• 前言

在前面的第一篇文章,我們已經進行了layui的初步準備工作以及簡單的使用了,從本篇開始,便正式開始layui的學習.本篇文章主要就layui的基礎說明進行學習,以期加深對layui的認識.另外,所有的學習以及參考資源偶都基于layui官方文檔.

layui文檔

核心方法

layui的底層方法是layui的基礎支撐,是layui.js核心基礎庫中幾個核心的方法,而在這里,暫時只對其中比較重要的模塊定義方法layui.define,模塊加載方法layui.use.以及全局配置方法layui.config進行簡單的總結介紹.其他一些底層方法,比較詳細的內容可以參看官方文檔學習.

• layui.config(options) 全局配置方法

該方法是一個全局配置方法,在使用模塊之前,進行一些最基本的全局參數配置(在連接外部js模塊文件是會經常使用到)

    layui.config({
      dir: '/res/layui/' //layui.js 所在路徑（注意，如果是script單獨引入layui.js，無需設定該參數。），一般情況下可以無視
      ,version: false //一般用于更新模塊緩存，默認不開啟。設為true即讓瀏覽器不緩存。也可以設為一個固定的值，如：201610
      ,debug: false //用于開啟調試模式，默認false，如果設為true，則JS模塊的節點會保留在頁面
      ,base: '' //設定擴展的Layui模塊的所在目錄，一般用于外部模塊擴展
    });
          

我們看看提供的參數,我們可以發現,我們在使用該方法的時候,基本只會使用到base參數來引入我們的外部js文件,甚至如果我們不按照其模塊規范使用傳統js引入方式的話,我們都不需要設置base參數.

該方法的使用多使用在使用模塊規范來引入外部js文件,使用自定義模塊的時候使用: 我們看一個簡單的例子:

// 通過config方法引入js文件的絕對路徑,只需要導入到對應的目錄下即可.
layui.config({
       base: '/sty_layui/src/js/'
    })
// 通過layui.use('mods',callback)方法加載(調用)js文件夾下對應的mods模塊.
layui.use('sty_module',{}); // 這里第一個mods參數就是需要用到的模塊js文件的名字

當然我們還可以使用下面的方法引入不同級的js文件.并且設置別名:

//config的設置是全局的
layui.config({
  base: '/res/js/' //假設這是你存放拓展模塊的根目錄
}).extend({ //設定模塊別名
  mymod: 'mymod' //如果 mymod.js 是在根目錄，也可以不用設定別名
  ,mod1: 'admin/mod1' //相對于上述 base 目錄的子目錄
});

我們還可以直接使用.extend方法直接引入不更隨base絕對路徑的自定義文件路徑,這種方式通常使用在從靜態資源服務器上獲取js資源文件.

//你也可以忽略 base 設定的根目錄，直接在 extend 指定路徑（主要：該功能為 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑
})

• layui.define(['mods'],callback) 模塊定義方法

我們在前面知道layui框架的設計思想是模塊化的,并且可以實現按需加載,預先加載等加載模塊的方式,以求通過這種方式來達到用更輕量級的內容達到更高效的目的.并且其是支持自定義模塊的,自定義模塊的好處在于能夠大量減少代碼的冗雜重復.可以將共用的模塊封裝起來.

我們通過一個例子來看看模塊的定義:

/*外部js文件,將自定義模塊封裝在外部純js文件中.*/
layui.define(function (exports) { 
    var obj = {  // 聲明一個對象,對象體內部用來書寫自定義方法.
        hello: function (str) {
            alert('Hello'+ str);
        }
    };
    exports('mymod',obj);  // exports的兩個參數,第一個用來設置當前模塊的名稱,第二個返回對象obj
});

// define的兩個參數,第一個參數用來聲明當前模塊需要依賴的模塊我們可以不填.
// 第二個參數即為模塊的回調函數,它返回exprots參數,用于輸出該模塊的接口.
layui.define(['layer','form'],function (exports) {

    var obj = {
        hello: function (str) {

            alert('Hello'+ str);
        }
    };
    exports('mymod',obj);
});

• layui.use(['mods'],callback)加載模塊的方法
  layui的內置模塊都是默認不加載的,必須在執行了該方法后才會被加載(當然前提是你使用的是模塊化),該方法其實幾乎與define方法一樣,用法上沒有什么區別,我們來看看該如何使用上面我們自定義的模塊吧:

// 該方法使用的前提是你已經引入了對應的模塊.
  layui.use('mymod',function () {
        var mod = layui.mymod;
        mod.hello('world');
    });

模塊規范

layui的模塊是基于layui.js內部的異步模塊加載方式,它自己定義一套更輕量的模塊規范,使其在大量的實踐后成為layui最核心的模塊加載引擎.

• 預先加載
  layui采用的核心加載方法就是layui,use(mods,callback)方法,預先加載,其實就是使用一個大的use方法,將所需的模塊都先加載進來,然后在內部進行操作,這樣會避免到處寫use方法的情況.我們看看官方的示例:

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);
    }
  })
});

• 按需加載
  按需加載其實就是在具體的控件中的事件回調中直接使用use方法,來達到當使用到該事件的時候,模塊才被加載的目的.來看看例子:

button.addEventListener('click', function(){
  layui.use('laytpl', function(laytpl){ //溫馨提示：多次調用use并不會重復加載laytpl.js，Layui內部有做模塊cache處理。
    var html = laytpl('').render({});
    console.log(html);
  });
});

顯然這種方式并不利于代碼的可讀性和維護性,當你的js代碼較多的時候,這種方式顯然是不明智的.

• 擴展一個模塊
  layui允許我們隨意拓展自定義模塊.來達到封裝我們自己所需的模塊.拓展方法其實在上面定義模塊中就有講到.參考上面描述.

頁面元素規范

layui提倡返璞歸真,遵循于原生態的元素書寫規則，所以通常而言，你仍然是在寫基本的HTML和CSS代碼，不同的是，在HTML結構上及CSS定義上需要小小遵循一定的規范。

• css命名規范

class命名前綴：layui，連接符：-，如：class="layui-form"命名格式一般分為兩種：
一：layui-模塊名-狀態或類型，
二：layui-狀態或類型。因為有些類并非是某個模塊所特有，他們通常會是一些公共類。
如：一（定義按鈕的原始風格）：class="layui-btn layui-btn-primary"、
二（定義內聯塊狀元素）：class="layui-inline"
大致記住這些簡單的規則，會讓你在填充HTML的時候顯得更加得心應手。

• html規范
• layui在解析HTML元素的時候,必須充分確保其結構是被支持的:

    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">標題一</li>
        <li>標題二</li>
        <li>標題三</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">內容1</div>
        <div class="layui-tab-item">內容2</div>
        <div class="layui-tab-item">內容3</div>
      </div>
    </div> 

如果改變了結構，極有可能會導致Tab功能失效。所以在嵌套HTML的時候，你應該細讀各個元素模塊的相關文檔.

• 常用公共屬性.

很多時候，元素的基本交互行為，都是由模塊自動開啟。但不同的區域可能需要觸發不同的動作，這就需要你設定我們所支持的自定義屬性來作為區分。如下面的 lay-submit、lay-filter即為公共屬性.

image.png

更新時間:
2019-6-12
15:26