为啥bootstrap要放弃jQuery，jQuery不适合现代的web开发了吗

Posted 2023-03-19

jQuery的成就

jQuery是一个伟大的库，

它解决了dom api兼容的问题，使得dom操作更简便
它支持类似css选择器的方式来选择组件
支持批量的操作数组中的元素，也叫隐式迭代
支持链式操作，可以在一条语句中完成很复杂的逻辑
有易于使用的插件扩展机制
deffered的异步方案比promise更早。
等等。

jquery可以说在dom操作领域做的很棒了，几乎统治了一个时代，甚至影响了w3c，dom api中的querySelector就有jq的影子。

但是，如今使用jq的公司越来越少了，但这并不是说在dom操作领域有更好地库，而是因为mvvm的出现。

mvvm的出现

dom操作是业务无关的逻辑，不应该出现在业务的代码中，虽然使用jq简化了很多，但是代码依然是难以维护和复用的，直到mvvm的出现，把数据和视图的绑定变成了自动化的操作，进而把dom操作从业务代码中移除。业务代码因此变得更加的纯粹，也更容易复用。

技术的发展规律

其实，技术的发展趋势就是追求更高的复用性，更简便的业务代码写法，所以最终都会要求跨平台、都会彻底分离非业务逻辑。

jvm上的语言持续的火了10多年，java长期霸占语言排行榜榜首，很大的原因就是因为jvm的跨平台，这是技术发展的趋势，就像node的libuv平台层、react的vdom、游戏引擎的多端打包等一样，随着各种端和平台越来越多，跨平台几乎是对一个新技术基本的要求。

业务代码应该是纯粹的，任何业务代码都应该独立出去作为可复用资源而存在。比如dom操作的代码很多时候是业务无关的，所以mvvm实现了自动的绑定之后，逐渐的成为主流，jquery不符合这个趋势，所以也逐渐走向没落。

jQuery的没落

jQuery在dom操作领域已经做得很好了，但是它不符合技术发展的一般规律，所以最终肯定是会被取代q的，就像大润发战胜了所有的对手，却在互联网时代被阿里收购一样。只是因为它做事情的方式不是最佳的，对开发效率和代码复用性的追求最终导致了jquery的淘汰。

从jquery帝国一统，到如今mvvm诸雄割据，对效率和代码复用性的要求对技术做出了选择，顺应这个趋势的技术才能长盛不衰。

jQuery战胜了dom操作领域的所有对手，只是输给了时代。 参考技术A 现在项目采用的技术都是前后端分离模式。jquery虽然可以做到，但是总是会操作DOM，这对现在的项目很不友好。

Bootstrap 与 Jquery validate 结合使用——多个规则实现

进行开发的时候，遇到了需要有多个规则来校验，如新用户过来一套校验规则，老用户过来又是一套规则，这时候就要需要定义多套校验规则。

首先要熟悉Bootstrap和Jquery validate的使用，详情请参考Bootstrap 与 Jquery validate 结合使用——简单实现

然后开始进入正题。

基本的东西不变，只需要给form表单绑定不同的规则，自己定义几套规则即可。

（本人亲自尝试了多种方法，发现Jquery validate的校验规则只能在$(function(){})即网页加载完毕后才能绑定校验规则，不能动态的去更改绑定。即通过一个触发事件重新绑定新的校验规则）

给每个form表单绑定校验规则，根据业务显示对应的form表单即可

/* 表单数据校验 start */
    //设置默认值
    $.validator.setDefaults({
        errorElement : \'span\',
        errorClass : \'help-block\',
        debug: false, //调试模式取消submit的默认提交功能   
        focusInvalid: false, //当为false时，验证无效时，没有焦点响应 
        submitHandler: function(form){//表单提交句柄,为一回调函数，带一个参数：form 
            var datas = stitchParameter();
            if(paycount == 90){
                $(form).ajaxSubmit({
                    type : "POST",
                    dataType : "json",
                    async : false,
                    data : {"encrypt" : SecUtil.encrypt(datas,_keyPair)},
                    url : HOSTPATH+"/pay/unionPay",
                    success:function( jsondata ){
                        if( jsondata.meta.code == \'S002\' ){
                            //数据处理
                            $(".tab-pane").removeClass("in").removeClass("active");
                            $("#pay-successful").addClass("in").addClass("active");
                        }else{
                            alert(jsondata.meta.message);
                            //数据处理
                            $(".tab-pane").removeClass("in").removeClass("active");
                            $("#pay-failure").addClass("in").addClass("active");
                        }
                    }
                });
                //开始计时
                var paytimer = setInterval(function(){
                    paycount--;
                    if(paycount == 0){
                        clearInterval(paytimer);
                        paycount = 90;
                    }else{
                        if(payflag==1){
                            clearInterval(paytimer);
                        }
                    }
                },1000);
            }else{
                
            }
        },   

          //自定义错误消息放到哪里
        errorPlacement : function(error, element) {
            //区分普通输入框和输入框组，如果直接用element.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）
            element.nextUntil(".input-group-addon").remove();
            //element.next().remove();//删除显示图标
            element.after(\'<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>\');
            element.closest(\'.form-group\').append(error);//显示错误消息提示
        },
        //给未通过验证的元素进行处理
        highlight : function(element) {
            $(element).closest(\'.form-group\').addClass(\'has-error has-feedback\');
        },
        //验证通过的处理
        success : function(label) {
            var el=label.closest(\'.form-group\').find("input");
              //区分普通输入框和输入框组，如果直接用el.next().remove();会错误删除标签（即输入框组的<span class="input-group-addon"></span>）
            el.nextUntil(".input-group-addon").remove();
            //el.next().remove();//删除显示图标
            el.after(\'<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>\');
            label.closest(\'.form-group\').removeClass(\'has-error\').addClass("has-feedback has-success");
            label.remove();
        },
    });
    //新数据校验规则
    var newRules={
        rules:{
            new_name:{
                required : true,
                minlength : 2
            },
            new_idCard:{
                required : true,
                isIdCardNo : true
                
            },
            new_phone:{
                required : true,
                mobile : true
            },
            new_cardNo:{
                required : true,
                FixedLength : 16
            },
            new_cvn:{
                required : true,
                FixedLength : 3,
                
            },
            new_verifyCode:{
                required : true,
                FixedLength : 4,
                checkVerifyCode : true
            },
            new_expDate:{
                required:true,
                date : true
            }   
        },
        messages:{
            new_name:{
                required : "请输入姓名",
                minlength : "请输入正确的姓名"
            },
            new_idCard:{
                required : "请输入身份证号"
            },
            new_phone:{
                required : "请输入手机号码"
            },
            new_cardNo:{
                required :"请输入银行信用卡",
                FixedLength : "请输入正确的银行信用卡"
            },
            new_cvn:{
                required : "请输入CVN",
                FixedLength : "请输入3位的CVN"
            },
            new_verifyCode:{
                required : "请输入验证码",
                FixedLength : "请输入有效的验证码",
            },
            new_expDate:{
                required : "请输入有效日期"
            }
        },    
    };
    //旧数据校验规则
    var oldRules={
        rules:{
            old_cvn:{
                required : true,
                FixedLength : 3,
                
            },
            old_verifyCode:{
                required : true,
                FixedLength : 4,
                checkVerifyCode : true
            }
        },
        messages:{
            old_cvn:{
                required : "请输入CVN",
                FixedLength : "请输入3位的CVN"
            },
            old_verifyCode:{
                required : "请输入验证码",
                FixedLength : "请输入有效的验证码",
            }
        },    
    };
    //生成校验规则
    var validate_new = jQuery.extend({}, $.validator.defaults, newRules);
    var validate_old = jQuery.extend({}, $.validator.defaults, oldRules);
    //表单绑定校验#userPay-old
    $("#userPay-new").validate(validate_new);
    $("#userPay-old").validate(validate_old);
    /* 表单数据校验 end */

对应的页面文件

<!-- 新数据表单 -->
<form id="userPay-new">
    <table>
        <tr>
            <td>
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">姓名：</label>
                    <div class="input-group input-div">
                        <input id="new_name" name="new_name" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">身份证：</label>
                    <div class="input-group input-div">
                        <input id="new_idCard" name="new_idCard" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">手机：</label>
                    <div class="input-group input-div">
                        <input id="new_phone" name="new_phone" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group bank-card-div">
                    <label for="dtp_input3" class="label-title control-label">银行卡：</label>
                    <div class="input-group date input-div">
                        <span class="caret"></span>
                        <input id="new_cardNo" name="new_cardNo" class="form-control dropdown-toggle" data-toggle="dropdown" size="16" type="text" value=""/>
                        <!-- <span class="input-group-addon" data-toggle="dropdown">
                            <span class="glyphicon     glyphicon glyphicon-arrow-down"></span>
                        </span> -->
                         <span class="input-group-addon addCard">
                            <span class="glyphicon glyphicon glyphicon-plus"></span>
                        </span>
                        <ul class="userCards dropdown-menu">
                            <!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->
                        </ul>
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">CVN：</label>
                    <div class="input-group input-div">
                        <input id="new_cvn" name="new_cvn" class="form-control" size="3" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group verify-code-div">
                    <label for="dtp_input3" class="label-title control-label">验证码：</label>
                    <div class="input-group input-div">
                        <input id="new_verifyCode" name="new_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">
                        <span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group exp-date-div">
                    <label for="dtp_input2" class="label-title control-label">有效期：</label>
                    <div class="datepicker input-group date form_date input-div">
                        <input id="new_expDate" name="new_expDate" class="form-control" data-toggle="dropdown" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>
</form>
<!-- 旧数据表单 -->
<form id="userPay-old" style="display: none;">
    <table>
        <tr>
            <td>
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">姓名：</label>
                    <div class="input-group input-div">
                        <input id="old_name" name="old_name" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">身份证：</label>
                    <div class="input-group input-div">
                        <input id="old_idCard" name="old_idCard" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">手机：</label>
                    <div class="input-group input-div">
                        <input id="old_phone" name="old_phone" class="form-control readonly-input" size="16" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group bank-card-div">
                    <label for="dtp_input3" class="label-title control-label">银行卡：</label>
                    <div class="input-group date input-div">
                        <span class="caret"></span>
                        <input id="old_cardNo" name="old_cardNo" class="form-control dropdown-toggle readonly-input" data-toggle="dropdown" size="16" type="text" value="" readonly/>
                       <!--  <span class="input-group-addon" data-toggle="dropdown">
                            <span class="glyphicon     glyphicon glyphicon-arrow-down"></span>
                        </span> -->
                         <span class="input-group-addon addCard">
                            <span class="glyphicon glyphicon glyphicon-plus"></span>
                        </span>
                        <ul class="userCards dropdown-menu" aria-labelledby="old_cardNo">
                            <!-- <li role="presentation"><span>信用卡（7757）</span><a href="#">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><span onclick="javascript: selectCard(this);">信用卡（7757）</span><a href="#" onclick= "return ">删除</a></li> -->
                        </ul>
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group">
                    <label for="dtp_input3" class="label-title control-label">CVN：</label>
                    <div class="input-group input-div">
                        <input id="old_cvn" name="old_cvn" class="form-control" size="3" type="text" value="">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group verify-code-div">
                    <label for="dtp_input3" class="label-title control-label">验证码：</label>
                    <div class="input-group input-div">
                        <input id="old_verifyCode" name="old_verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">
                        <span class="input-group-addon verify-code-span"><a class="btn btn-primary verify-code-a">获取验证码</a></span>
                    </div>
                </div>
            </td>
            <td class="float-td">
                <div class="form-group exp-date-div">
                    <label for="dtp_input2" class="label-title control-label">有效期：</label>
                    <div class="datepicker input-group date form_date input-div">
                        <input id="old_expDate" name="old_expDate" class="form-control readonly-input" data-toggle="dropdown" size="16" type="text" value="" >
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <input id="submit-btn-inner" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>
</form>

结果可行。

如有更加好的方法，请留言。本来小菜一枚，如有不足之处，请多多指教！