layui.js框架的启发

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

 /** search.page-v1.0.0  by wbq/*/
 !function (w) {
     "use strict";
     var c = {
         showMessageElement: "#tipMessage",
         waitElement: "#mainload",
     },
      o = function () {

          this.v = "1.0.0";
          this.PostData = {};
          this.KeywordList = [];
          this.filterUrl = "";
          this.listurl = "";

      };

     o.prototype.buildPostData = function () {
         var that = this;
         $('[nf-value]').each(function (index, item) {
             if (item.type === "checkbox") {
                 that.PostData[item.id] = item.checked;
             }
             else if (item.type === "radio") {
                 if (item.checked) {
                     that.PostData[item.name] = item.value;
                 }
             } else {
                 if (item.id)
                     that.PostData[item.id] = item.value;
             }
         });
         return that.PostData;
     },
     o.prototype.config = function (e) {
         e = e || {};
         for (var t in e) c[t] = e[t];
         return this;
     },
     o.prototype.post = function (url, postData, callback) {
         if (!postData) {
             postData = this.buildPostData();
         }
         var that = this;
         $.ajax({
             url: url,
             type: "POST",
             data: postData,
             cache: false,
             beforeSend: function (XMLHttpRequest) {
                 if (c.waitElement)
                     $(c.waitElement).show();
             },
             success: function (result) {
                 if (callback != null && typeof callback == 'function')
                     callback(result);
             },
             complete: function () {
                 if (c.waitElement)
                     $(c.waitElement).hide();
             },
             error: function (xhr, status, exp) {

                 that.ShowMessage(exp);
             }
         });
     },
     o.prototype.get = function (postData, uri, callback) {
         var that = this;
         $.ajax({
             url: uri,
             type: "get",
             cache: false,
             data: postData,
             success: function (result) {
                 if (callback != null && typeof callback == 'function')
                     callback(result);
             },
             error: function (xhr, status, exp) {

                 that.ShowMessage(exp);
             }
         });
     },

     o.prototype.CheckAll = function () {
         $("input[name='ckImport']").each(function (i) {
             if ($(this).prop("checked")) {
                 $(this).prop("checked", false);
             }
             else {
                 $(this).prop("checked", true);
             }
         });
     },
     o.prototype.Search = function (keyword) {

     };
     w.pageRequest = new o;

     w.chooseLetter = function (obj) {

     };
     w.chooseKeyword = function (obj) {

     };

 }(window);

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