<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 模塊規范

      layui 的模塊是基于 layui.js 內部實現的異步模塊加載方式,它并不遵循于AMD(沒有為什么,畢竟任性呀!),而是自己定義了一套更輕量的模塊規范。并且這種方式在經過了大量的實踐后,成為 layui 最核心的模塊加載引擎。

      開門見山,還是直接說使用比較妥當。Layui的模塊加載采用核心的 layui.use(mods, callback)方法,當你的JS 需要用到Layui模塊的時候,我們更推薦你采用預先加載,因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義:

      /*
        Demo1.js
        使用Layui的form和upload模塊
      */
      layui.use(['form', 'upload'], function(){  //如果只加載一個模塊,可以不填數組。如:layui.use('form')
        var form = layui.form //獲取form模塊
        ,upload = layui.upload; //獲取upload模塊
        
        //監聽提交按鈕
        form.on('submit(test)', function(data){
          console.log(data);
        });
        
        //實例化一個上傳控件
        upload({
          url: '上傳接口url'
          ,success: function(data){
            console.log(data);
          }
        })
      });
            
      按需加載(不推薦)

      如果你有強迫癥,你對網站的性能有極致的要求,你并不想預先加載所需要的模塊,而是在觸發一個動作的時候,才去加載模塊,那么,這是允許的。你不用在你的JS最外層去包裹一個大大的 layui.use,你只需要:

      /*
        Demo2.js
        按需加載一個Layui模塊
      */
       
      //……
      //你的各種JS代碼什么的
      //……
       
      //下面是在一個事件回調里去加載一個Layui模塊
      button.addEventListener('click', function(){
        layui.use('laytpl', function(laytpl){ //溫馨提示:多次調用use并不會重復加載laytpl.js,Layui內部有做模塊cache處理。
          var html = laytpl('').render({});
          console.log(html);
        });
      });
            

      注意:如果你的 JS 中需要大量用到模塊,我們并不推薦你采用這種加載方式,因為這意味著你要寫很多 layui.use(),代碼可維護性不高。
      建議還是采用:預先加載。即一個JS文件中,寫一個use即可。

      layui 的模塊接口會綁定在 layui 對象下,內部由 layui.define() 方法來完成。每一個模塊都會一個特有的名字,并且無法被占用。所以你無需擔心模塊的空間被污染,除非你主動 delete layui.{模塊名}。調用模塊可通過 layui.use 方法來實現,然后再通過 layui 對象獲得模塊接口。如:

      layui.use(['layer', 'laypage', 'laydate'], function(){
        var layer = layui.layer //獲得layer模塊
        ,laypage = layui.laypage //獲得laypage模塊
        ,laydate = layui.laydate; //獲得laydate模塊
        
        //使用模塊
      });      
            

      我們推薦你將所有的業務代碼都寫在一個大的 use 回調中,而不是將模塊接口暴露給全局,比如下面的方式我們是極不推薦的:

      //強烈不推薦下面的做法
      var laypage, laydate;
      layui.use(['laypage', 'laydate'], function(){
        laypage = layui.laypage;
        laydate = layui.laydate;
      });
            

      你之所以想使用上面的錯誤方式,是想其它地方使用不在執行一次 layui.use?但這種理解本身是存在問題的。因為如果一旦你的業務代碼是在模塊加載完畢之前執行,你的全局對象將獲取不到模塊接口,因此這樣用不僅不符合規范,還存在報錯風險。建議在你的 js 文件中,在最外層寫一個 layui.use 來加載所依賴的模塊,并將業務代碼寫在回調中,見:預先加載

      事實上,如果你不想采用 layui.use,你可以引入 layui.all.js 來替代 layui.js,見:非模塊化用法

      layui 官方提供的模塊有時可能還無法滿足你,或者你試圖按照layer的模塊規范來擴展一個模塊。那么你有必要認識layui.define()方法,相信你在文檔左側的“底層方法”中已有所閱讀。下面就就讓我們一起擴展一個Layui模塊吧:

      第一步:確認模塊名,假設為:mymod,然后新建一個mymod.js 文件放入項目任意目錄下(注意:不用放入layui目錄)

      第二步:編寫test.js 如下:

      /**
        擴展一個test模塊
      **/      
       
      layui.define(function(exports){ //提示:模塊也可以依賴其它模塊,如:layui.define('layer', callback);
        var obj = {
          hello: function(str){
            alert('Hello '+ (str||'mymod'));
          }
        };
        
        //輸出test接口
        exports('mymod', obj);
      });    
            

      第三步:設定擴展模塊所在的目錄,然后就可以在別的JS文件中使用了

      //config的設置是全局的
      layui.config({
        base: '/res/js/' //假設這是你存放拓展模塊的根目錄
      }).extend({ //設定模塊別名
        mymod: 'mymod' //如果 mymod.js 是在根目錄,也可以不用設定別名
        ,mod1: 'admin/mod1' //相對于上述 base 目錄的子目錄
      });
       
      //你也可以忽略 base 設定的根目錄,直接在 extend 指定路徑(主要:該功能為 layui 2.2.0 新增)
      layui.extend({
        mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路徑,即不跟隨 base 路徑
      })
       
      //使用拓展模塊
      layui.use(['mymod', 'mod1'], function(){
        var mymod = layui.mymod
        ,mod1 = layui.mod1
        ,mod2 = layui.mod2;
        
        mymod.hello('World!'); //彈出 Hello World!
      });
            

      大體上來說,layui 的模塊定義很類似 Require.js 和 Sea.js,但跟他們又有著明顯的不同,譬如在接口輸出等地方。

      其實關于模塊的核心,就是 layui.js 的兩個底層方法:一個用于定義模塊的 layui.define(),一個加載模塊的 layui.use()

      layui - 用心與你溝通

      亚洲图色