若是你只會JQuery的插件式開發, 那麼你能夠進來看看？

對於JQuery的學習，已經有3年多的時間了，直到去年與個人組長一塊兒作項目，看到他寫的JS,確實特別漂亮,有時甚至還看不太懂,

我才發現其實我不太會JQuery。因此我有時間就會去看看他寫的JS代碼,直到今天我都會很懷戀那段在清大的日子,是我人生思想道路上的一次豔遇。

我到如今都一直喜歡去看一些牛人的js文章,譬如像 （葉小釵，司徒正美，tom大叔）等人的文章都是很不錯的。

上面的話說多了，來看看我如何輸寫JS代碼，模塊化的思路整理,大概有下面的幾種狀況：

第一種：教你如何在項目中編寫一個能夠通用的彈框，廢除掉 alert("shit")

var alertBox = function (option) {
    //擴展區域
    var options = {
        w: '',
        title: '提示:',
        msg: '',
        msgExt: '',
        MsgArr: [],
        yes_btn: "肯定",
        no_btn: "取消",
        yesBool: true,
        noBool: true,
        ok_Fun: null,
        backgroundColor: '#DC0100',
        AutoFun: null //----自執行函數----
    }
    //---繼承合併，造成組合的options參數----
    option = $.extend({}, options, option || {});
    //--隨機生成一個ID--
    var obj_msgprint = "msgprint_" + parseInt(Math.random() * 1000);
    //--肯定--
    option.yes_btn = option.yesBool ? 

     "<a id='a_activateYes' style= background-color:" + option.backgroundColor + " href='javascript:;'>" + option.yes_btn + '</a>' : "";
    //--取消--
    option.no_btn = option.noBool ? '<a id="a_activateNo" class="cancel" href="javascript:;">' + option.no_btn + '</a>' : "";
    if (option.noBool) {
        noBtn = "";
    }

    var allMsgArr = [];
    if (option.MsgArr.length > 0) {
        for (var item in option.MsgArr) {
            allMsgArr.push("<p class='big'>" + option.MsgArr[item] + "</p>");
        };
    }
    if (option.msg != '') {
        allMsgArr.push("<p class='big'>" + option.msg + "</p>");
    }
    if (option.msgExt != '') {
        allMsgArr.push("<p style='text-align:center;'>" + option.msgExt + "</p>");
    }

    var boxContentArr = ["<div id='" + obj_msgprint + "' class='albox' style='position:absolute;z-index:1002;display:block;width:" + option.w + "'>
                          <div class='headbox' style='background-color: " + option.backgroundColor + "'>", "<p>" + option.title + "</p>", "</div>
                          <div class='conbox' style='border-color: " + option.backgroundColor + "'><div class='txt'>" + allMsgArr.join('') + "</div>
                          <div class='btnbox'>", option.yes_btn, option.no_btn, "</div></div></div>"];

    $("body").append(boxContentArr.join(''));
    $("#a_activateNo,#a_closeActivate,#a_activateYes").click(function () {
        $("#" + obj_msgprint).hide();
        mask.hide();
        $("#" + obj_msgprint).remove();
        mask.remove();
        if (option.ok_Fun && (typeof (option.ok_Fun) === 'function') && $(this).is("#a_activateYes")) {
            option.ok_Fun.apply();
        }
    });
    //按下回車鍵
    $(document).keypress(function (e) {
        var ev = e || event;
        if (ev.keyCode == 13) {
            $("#a_activateYes").trigger("click");
        }
    });
    //***************建立遮罩效果*****************/
    var mask = $("<div id=\"maskOfDiv\"></div>"); //--Div遮罩----
    $("body").append(mask);
    var sh = document.documentElement.scrollHeight,
    ch = document.documentElement.clientHeight,
    height = sh > ch ? sh : ch;
    mask.css({
        "position": "absolute",
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0",
        "z-index": "1000",
        "background-color": "#000000",
        "display": "none",
        "height": height
    });
    mask.show().css("opacity", "0.3");
    $("#" + obj_msgprint).show();
    //***************建立遮罩效果******************/
    //-------居中提示類型---------
    var dom_obj = document.getElementById(obj_msgprint);
    dom_obj.style.top = ((document.documentElement.clientHeight - $("#" + obj_msgprint).height()) / 2) + "px";
    dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $("#" + obj_msgprint).width()) / 2) + "px";
    //------自動執行函數--------
    if (option.AutoFun && (typeof (option.AutoFun) === 'function')) {
        option.AutoFun.apply();
    }
}
window.alertBox = alertBox;

View Code

調用插件：

<script type="text/javascript">
     alertBox({ msg: "幹掉alert,你看行不行!", yes_btn: "alertBox"});
</script>

你們能夠重點去學習，$.extend()：

               //---繼承合併，造成組合的options參數----

              option = $.extend({}, options, option || {});

截圖效果：

              

==========================================================

第二種： 教你如何用js的 prototype 原型鏈模式，作一個通用的驗證插件。

var FormValidateCommon = function (containerObj, tipContainerFlag) {
    this.valObj = containerObj; //驗證對象
    this.tipContainerBool = tipContainerFlag || false; //插入的位置標示 {true：自己，false：最後一個td}
    this.validatorArr = {}; // 驗證對象容器

    //********************************************
    //---------現有可提供的枚舉驗證類型-------//
    //********************************************
    this.regexEnum = {
        idCard: /^[1-9]([0-9]{14}|[0-9]{16})([0-9]|X)$/, //身份證
        num: /^\-?([1-9]\d*)$/,         //數字
        email: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/, //郵箱
        phone: /^1[3|4|5|8]\d{9}$/, //電話
        chinese: /^[\u0391-\uFFE5]{2,6}$/, //2-6位中文
        password: /^[a-zA-Z0-9_]{6,18}$/, //6-16位密碼驗證
        passwordBase: /^[a-zA-Z0-9_]*$/
    }

};
//=============擴展的原型方法============
FormValidateCommon.prototype =
    {
        init: function () {
            var scope = this;
            $(scope.valObj).find('.Validate').each(function () { //循環驗證
                var el = $(this);
                scope.initItem(el);
            })
        },
        initItem: function (el) {
            if (typeof el == 'string') el = $("#" + el);
            var scope = this; //FormValidateCommon的做用域
            var cfg = el.attr('data-val');

            //如果未開啓驗證便退出該項初始化
            if (cfg.check && cfg.check == false) {
                return false;
            }

            if (cfg && cfg.length > 0) {
                cfg = eval('(' + cfg + ')'); //轉成對象

                var check = cfg.check || true,
                id = el.attr('id') || Math.random(100000),
                initMsg = cfg.initMsg || '請填入信息',
                sucMsg = cfg.sucMsg || '格式正確',
                errorMsg = cfg.errorMsg || '請注意格式',
                requred = cfg.requred || false;
                cfg.id = id;
                cfg.check = check;
                cfg.initMsg = initMsg;  //默認信息
                cfg.sucMsg = sucMsg;     //驗證成功信息
                cfg.errorMsg = errorMsg; //驗證錯誤信息
                cfg.requred = requred;
                var tips = $("<span class='xx_czmsg'><img src='http://static.eee114.com/new_parents/images/xx_tmulspan.gif'>" + initMsg + "</span>");

                if (scope.tipContainerBool) { //插入到最後一個td
                    $("#" + id).parent().parent().find("td:last").html(tips);
                }
                else {  //插入到元素之間
                    tips.insertAfter(el);
                }
                cfg.el = el;
                cfg.tipEl = tips;


                //該表單的驗證
                cfg.validate = function () {
                    scope.funcValidate(cfg);
                };

                //文本框驗證
                el.blur(function () {
                    scope.funcValidate(cfg);
                });

                //下拉框驗證
                if ($("#" + id).is("select")) {
                    el.change(function () {
                        scope.funcValidate(cfg);
                    });
                }
                scope.validatorArr[id] = cfg; //生成相關驗證對象
            }
        },
        funcValidate: function (cfg) {
            var id = cfg.id;
            var el = cfg.el;
            var check = cfg.check; //判斷是否開啓驗證
            var _this = this;

            //取消事件不執行邏輯
            if (!this.validatorArr[id])
                return false;

            //如果沒有開啓驗證便忽略
            if (!check) {
                alert("驗證");
                this.validatorArr[id]['state'] = 'ignore';
                return false;
            }
            var type = cfg.type;
            var regexObj = cfg.regexObj; //用戶擴張的驗證
            var ajaxObj = cfg.ajaxObj;   //ajax擴張的驗證
            var compareObj = cfg.compareObj; //對比驗證
            var msg = '';
            var isPass = 1; //{0：初始化提示，1：成功，-1：錯誤，2：必填}

            //--【1】----首先驗證非空-------------------------
            if (cfg.requred) {
                if (el.val() == '' || el.val() == '0' || el.val() == null) {
                    isPass = 2; //必須項
                    //msg=cfg.initMstg;
                } else {
                    msg = cfg.sucMsg;
                }
            }
            //--【2】-----type優先,預約於的正則驗證---------
            if (isPass == 1 && el.val().length > 0 && typeof type == 'string') {
                var reg = this.regexEnum[type];

                if (reg.test(el.val())) {
                    msg = cfg.sucMsg;
                } else {
                    isPass = -1;
                    msg = cfg.errorMsg;
                }
            }
            //--【3】------自身擴展的正則驗證---------------
            if (isPass == 1 && el.val().length > 0 && regexObj) {
                var reg = regexObj;

                if (reg.test(el.val())) {
                    msg = cfg.sucMsg;
                } else {
                    isPass = -1;
                    msg = cfg.errorMsg;
                }
            }
            //--【4】-------驗證比較字符串--------------------------
            if (isPass == 1 && el.val().length > 0 && compareObj) {
                var compareArr = compareObj.split('|');
                if (compareArr.length == 3) {
                    var _type = compareArr[0]
                    var _id = compareArr[1];
                    var _flag = compareArr[2];
                    var _v = el.val();
                    var _cv = $('#' + _id).val();
                    if (_type == 'num') {
                        _v = parseInt(_v);
                        _cv = parseInt(_cv);
                    }

                    if (_flag == '=') {
                        if (_v == _cv) {
                            msg = cfg.sucMsg;
                        } else {
                            isPass = -1;
                            msg = '兩次密碼輸入不一致';
                        }
                    }
                }
            }
            //--【5】------------ajax驗證-----------------------------
            if (isPass == 1 && el.val().length > 0 && ajaxObj) {
                var ajaxArr = ajaxObj.split('|');
                if (ajaxArr.length >= 2) {
                    var url = ajaxArr[0];
                    var _param = {};
                    _param[ajaxArr[1]] = el.val(); //文本框參數
                    //--------------擴展參數---------------------------
                    for (var i = 2; i < ajaxArr.length; i++) {
                        var arrObjParam = ajaxArr[i].split('=');
                        _param[arrObjParam[0]] = arrObjParam[1];
                    }

                    $.post(url, _param, function (data) {
                        if (typeof data == 'string') {
                            fata = eval('(' + data + ')');
                        }
                        if (data.code) {
                            msg = data.msg || cfg.sucMsg;
                        } else {
                            isPass = -1;
                            msg = data.msg;
                        }
                        ShowResult(_this, isPass);
                    });
                    return false; //在此中斷後操做
                }
            }

            ShowResult(_this, isPass);

            //----------顯示消息----------------
            function ShowResult(scope, isPass) {
                if (msg == '') isPass = 2;
                switch (isPass) {
                    case 0: //默認

                        scope.validatorArr[id]['state'] = 'tip';
                        scope.validatorArr[id]['tipEl'].html('<img src=http://static.eee114.com/new_parents/images/xx_tmulspan.gif>' + cfg.initMsg);
                        break;
                    case 1: //成功
                        scope.validatorArr[id]['state'] = 'success';
                        scope.validatorArr[id]['tipEl'].html('<img src=http://static.eee114.com/new_parents/images/xx_right.gif>' + msg);
                        break;
                    case -1: //驗證有誤
                        scope.validatorArr[id]['state'] = 'error';
                        scope.validatorArr[id]['tipEl'].html('<img src=http://static.eee114.com/new_parents/images/xx_no.gif>' + msg);
                        break;
                    case 2: //必填驗證有誤
                        scope.validatorArr[id]['state'] = 'error';
                        scope.validatorArr[id]['tipEl'].html('<img src=http://static.eee114.com/new_parents/images/xx_tmulspan.gif>' + cfg.initMsg);
                        break;
                    default:
                        break;
                }
            }
        },
        validatorAll: function () {
            for (var k in this.validatorArr) {
                var v = this.validatorArr[k];
                v.validate();
            }
        },
        validatorState: function () {
            for (var k in this.validatorArr) {
                if (this.validatorArr[k].state == 'error') {
                    return false;
                }
            }
            return true;
        }
    }

View Code

調用插件：

<form class="familyClass">
    <input type="text" class="Validate" name="Phone" id="Phone" value="@Model.Phone"  
    data-val="{type:'phone',initMsg:'請輸入您的手機號！',sucMsg:'手機號碼驗證成功！',errorMsg:'請輸入正確的手機號！'}"/>
<form>
<script type="text/javascript">
   var familyForm = new FormValidateCommon(".familyClass", false);
  familyForm.init();
   familyForm.validatorAll();
</script>

上面的調用實現了很靈活的自動式標籤綁定驗證，可是隻適合一種一個項目的通用樣式的提示。

你們能夠重點去學習，FormValidateCommon.prototype = {} ：

截圖效果：

 

============================================

第三種：用js製做實現一個漂亮的下拉框插件：selectPlus

(function ($) {
    $.fn.selectPlus = function (option) {
        option = $.extend({ index: 0, defaultClick: true }, option);
        return this.each(function () {
            var _this = $(this);
            var newSelect = _this.find(".seleitem");
            var _itemClick = null;
            newSelect.live({
                click: function () {
                    _itemClick = $(this);
                    //沒有數據，則無效
                    if ($(this).find("p>a").length <= 0) {
                        return;
                    } else {
                        //---------------------------
                        if ($(this).hasClass("click")) {
                            closeSelect(this);
                        } else {
                            $(this).addClass("click");
                            $(this).find("p>a").show("fast").css("style", "display:block");
                            $(this).find("p>a.current").hide();
                        }
                    }
                },
                mouseleave: function () {
                    closeSelect(this);
                }
            });

            //隱藏p，移除click樣式
            function closeSelect(obj) {
                $(obj).find("p>a").hide("fast");
                $(obj).removeClass("click");
            }

            //給p下面的a添加點擊事件
            $(".seleitem p>a").live("click", function (e) {
                var src = e.target;
                var thisLink = $(this);

                if (src.tagName == "A") {
                    var PObj = thisLink.parent();
                    var a_show = PObj.siblings("a");

                    PObj.siblings("a").text(src.innerHTML);
                    PObj.siblings("a").attr("value", thisLink.attr("value"));

                    thisLink.parents(".seleitem").removeClass("click");
                    thisLink.addClass("current").siblings().removeClass("current");


                    //----------------------
                    thisLink.parents(".seleitem").children("[data-name='data']").attr("value", src.innerHTML);
                    thisLink.parents(".seleitem").children("[data-value='data']").attr("value", thisLink.attr("value"));
                    closeSelect(".seleitem");
                  
                }
            });
            //--------自動觸發一下----------------------
            (function () {
                if (option.defaultClick) {
                    _this.find(".seleitem p>a").eq(option.index).trigger("click");
                    _this.find(".seleitem p>a").eq(option.index).attr("style", "display:none");
                }
            }());
        });
    }
})(jQuery);

View Code

調用插件：

 <div class="order">  
 <div style="width: 124px;" class="seleitem">
     <input type="hidden" name="pay-name" data-name="data" value="已支付">
        <input type="hidden" name="orderPayNum" data-value="data" value="1">
            <i id="opOption"></i>
            <a id="orderPay" class="show" href="javascript:void(0);" value="1">已支付</a>
            <p style="width: 140px; height: 55px;">
                <a value="" href="javascript:void(0)" style="display: none;" class="">所有</a>
                <a value="0" href="javascript:void(0)" style="display: none;">未支付</a>
                <a value="1" href="javascript:void(0)" style="display: none;" class="current">已支付</a>
           </p>
  </div>
  </div>
  <script type="text/javascript">
   $(function () { 

         //-------------插件調用-------------------------------

         $(".order").selectPlus({ index: 0 });//--支付狀態,{index:爲選中第一個}

     

      });

   </script>

截圖效果：

             

======================================================================

第四種： 續 : selectPlus                               

對於上面的selectPlus我還有話要說，對於插件的思想，未必真的就很好，看了BootStrap的一些插件源代碼，你會發現，它還結合了一種綁定式的思想。

對於上面提到的全部插件式寫法，其實咱們均可以用綁定式的思想去簡化代碼量。

在上面的代碼中加上,加上以下代碼：

(function ($) {
  $.fn.selectPlus = function (option) {
     //.........能夠參考上面的selectPlus.......     
  }

  //----------很簡單的關鍵代碼-------------------
   $(window).on('load', function () {
        //取得元素上帶data-tip="on"的元素
        $('[data-select="on"]').each(function () {
            $(this).selectPlus();
        })
    })
});

調用變成了這樣：

 <div class="order" data-select="on">  
      //..............
  </div>

 

但願小夥伴們也都能領悟，吃飯了哦！