layui相關用法

// layui 模組的定義
layui.define([mods], function() {
    // ...
    
    export('mod', api);
});




// layui模組化載入
layui.use(['layer', 'form'], function() {
    var layer = layui.layer;
    var form = layui.form;
    
    // 呼叫封裝的彈框
    layer.msg('hello world!');
    
});
複製程式碼

推薦相關用法

layui.config({
    base: '/res/js/mymoudels/' // 存放新模組的目錄，不是layui的目錄
}).use('index'); // 載入入口，即使用的檔案

// 這裡的index,表示/res/js/mymoudels/目錄下的index.js


// index.js 內容可以為下
layui.define(['layui', 'form'], function(exports) {
    var layer = layui.layer;
    var form = layui.form;
    
    layer.msg('Hello World!');
    exports('index', {}); // 模組的輸出核心，表示此模組對外暴露
});
複製程式碼

底層方法

全域性配置

• 使用模組化之前，需要進行全域性配置

layui.config({
    dir: '/res/layui/' // layui.js所在的路徑（如果script單獨引入layui.js 無需設定該引數），一般情況下可以無視
    ,version: false // 一般用於更新模組快取，預設不開啟。設為true即讓瀏覽器不快取。也可以設定為一個固定的值，如201610
    ,debug:false // 用於開啟除錯模式，預設false，如果設定為true，則JS模組的節點會保留在頁面
    ,base: '' // 設定擴充套件layui模組所在的目錄，一般用於外部模組擴充套件
});
複製程式碼

模組的定義和匯出

• 方法：layui.define([mods], callback);
• mods 是可選的，用於宣告該模組所需要依賴的模組，

// 不依賴外部模組
layui.define(function() {
    
    // do something
    
    exports('demo', function() {
        alter('對外暴露完畢！');
    });
});

// 依賴外部模組
layui.degine(['layer', 'laypage'], function() {
    // do something
    
    exports('demo', function() {
        alter('對外暴露完畢！');
    });
});

複製程式碼

使用所需要的模組

• 方法：layui.use([mods], callback)
• layui 的內建模組也不是預設就載入的，執行該方法後才會執行

layui.use(['laypage', 'layedit'], function() {
    var laypage = layui.laypage;
    var laydit = layui.laydit;
    
    // do something
});

// use 方法返回了所載入模組的介面，所以可以不需要通過layui物件複製獲得介面
layui.use(['laypage', 'layedit'], function() {
    
    // 使用分頁
    laypage();
    
    // 建立編輯器
    layedit.build();
});

複製程式碼

動態載入CSS

• 方法：layui.link(href)
• href 為css的路徑，該方法並非是使用layui必須的，它一般只是用於動態載入外部的css檔案

本地儲存

• 本地儲存是對localStorage 和 sessionStorage 的友好封裝，可方便地管理本地資料

localStorage 持久化儲存：layui.data(table, settings) // 資料會永久存在，除非物理刪除
sessionStorage 會話性儲存： layui.sessionData(table, settings) // 頁面關閉後失效
複製程式碼

• 上述兩個方法的使用方式是相同的，其中table為表名，settings是一個物件，settings是一個物件，用於設定key, value，下面以layui.data方法為例

// [增]：向test表中插入一個nickname 欄位，如果該表不存在就自動建立
layui.data('test', {
    kdy: 'nickname',
    value: 'jijijijideideidei'
});

// [刪]：刪除test表中的nickname 欄位
layui.data('test', {
    key: 'nickname',
    remove: true
});

// [改]: 同[增]會覆蓋已經儲存的資料

// [查]: 向test表讀取全部的資料
var localTest = layui.data('test');
console.log(localTest.nickname); // 列印value
複製程式碼

獲取裝置資訊

• 方法：layui.device(key), 引數key 是可選的
• 由於layui 的一些功能進行了相容性的處理和響應式支援，所以獲取裝置資訊很重要

var device = layui.device();

// device 即可根據不同的裝置，返回不同的資訊
{
    os: "windows", // 底層的作業系統，windows，Linux，Mac等
    ie: false, // ie6-11的版本，如果不是IE瀏覽器則為false
    weixin: false, // 是否微信環境
    android: false, // 是否安卓系統
    ios: false // 是否ios系統    
}
複製程式碼

其他方法

layui.cache	靜態屬性。獲得一些配置及臨時的快取資訊
layui.extend(options)	擴充一個模組別名，如：layui.extend({test: '/res/js/test'})
layui.each(obj, fn)	物件（Array、Object、DOM物件等）遍歷，可用於取代for語句
layui.getStyle(node, name)	獲得一個原始DOM節點的style屬性值，如：layui.getStyle(document.body, 'font-size')
layui.img(url, callback, error)	圖片預載入
layui.sort(obj, key, desc)	將陣列中的物件按某個成員重新對該陣列排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a')
layui.router()	獲得location.hash路由，目前在Layui中沒發揮作用。對做單頁應用會派上用場。
layui.hint()	向控制檯列印一些異常資訊，目前只返回了error方法：layui.hint().error('出錯啦')
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	自定義模組事件，屬於比較高階的應用。有興趣的同學可以閱讀layui.js原始碼以及form模組
layui.event(modName, events, params)	執行自定義模組事件，搭配onevent使用
layui.factory(modName)	用於獲取模組對應的 define 回撥函式