layui.js框架的启发

最近做前台设计的MM，应用了layui.js框架，是一个可以按模块加载的js框架，可以实现UI上的一些效果，比如"手风琴折叠"面板。我看了下源码，抽出了其框架，应用到公司的项目中，代码示例如下：

  1 /** search.page-v1.0.0  by wbq/*/
  2 !function (w) {
  3     "use strict";
  4     var c = {
  5         showMessageElement: "#tipMessage",
  6         waitElement: "#mainload",
  7     },
  8      o = function () {
  9 
 10          this.v = "1.0.0";
 11          this.PostData = {};
 12          this.KeywordList = [];
 13          this.filterUrl = "";
 14          this.listurl = "";
 15     
 16      };
 17 
 18     o.prototype.buildPostData = function () {
 19         var that = this;
 20         $('[nf-value]').each(function (index, item) {
 21             if (item.type === "checkbox") {
 22                 that.PostData[item.id] = item.checked;
 23             }
 24             else if (item.type === "radio") {
 25                 if (item.checked) {
 26                     that.PostData[item.name] = item.value;
 27                 }
 28             } else {
 29                 if (item.id)
 30                     that.PostData[item.id] = item.value;
 31             }
 32         });
 33         return that.PostData;
 34     },
 35     o.prototype.config = function (e) {
 36         e = e || {};
 37         for (var t in e) c[t] = e[t];
 38         return this;
 39     },
 40     o.prototype.post = function (url, postData, callback) {
 41         if (!postData) {
 42             postData = this.buildPostData();
 43         }
 44         var that = this;
 45         $.ajax({
 46             url: url,
 47             type: "POST",
 48             data: postData,
 49             cache: false,
 50             beforeSend: function (XMLHttpRequest) {
 51                 if (c.waitElement)
 52                     $(c.waitElement).show();
 53             },
 54             success: function (result) {
 55                 if (callback != null && typeof callback == 'function')
 56                     callback(result);
 57             },
 58             complete: function () {
 59                 if (c.waitElement)
 60                     $(c.waitElement).hide();
 61             },
 62             error: function (xhr, status, exp) {
 63 
 64                 that.ShowMessage(exp);
 65             }
 66         });
 67     },
 68     o.prototype.get = function (postData, uri, callback) {
 69         var that = this;
 70         $.ajax({
 71             url: uri,
 72             type: "get",
 73             cache: false,
 74             data: postData,
 75             success: function (result) {
 76                 if (callback != null && typeof callback == 'function')
 77                     callback(result);
 78             },
 79             error: function (xhr, status, exp) {
 80 
 81                 that.ShowMessage(exp);
 82             }
 83         });
 84     },
 85 
 86     o.prototype.CheckAll = function () {
 87         $("input[name='ckImport']").each(function (i) {
 88             if ($(this).prop("checked")) {
 89                 $(this).prop("checked", false);
 90             }
 91             else {
 92                 $(this).prop("checked", true);
 93             }
 94         });
 95     },
 96     o.prototype.Search = function (keyword) {
 97     
 98     };
 99     w.pageRequest = new o;
100   
101     w.chooseLetter = function (obj) {
102     
103 
104     };
105     w.chooseKeyword = function (obj) {
106    
107     };
108   
109 }(window);

此js结构比较简单明了，核心原理：通过立即执行函数，为window对象定义了一个属性pageRequest，它指向名为o的function实例，接下来，我们的注意力就集中到了o的上面。var  o=function(){}这是函数表达式的写法。在函数内部，定义了一些属性。然后在o.prototype,即函数的原型上面定义了一组方法，它们在所有的实例上可以共享。我们还可以在window对象上定义其它方法。比如chooseLetter和chooseKeyword。

       

posted @ 2018-05-23 16:59  micDavid  阅读(624)  评论(0)  编辑  收藏  举报