layui 的基本使用介紹

cscw發表於2020-10-26

全域性配置

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)

layui.define(function(exports){
  //do something
  exports('demo', function(){
    alert('Hello World!');
  });
});

載入所需模組

layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage
  ,layedit = layui.layedit
  //do something
});
layui.use(['laypage', 'layedit'], function(laypage, layedit){
  //使用分頁
  laypage();
  //建立編輯器
  layedit.build();
});

動態載入CSS

  • layui.link(href)

本地儲存

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

  • localStorage 持久化儲存:layui.data(table, settings),資料會永久存在,除非物理刪除。
  • sessionStorage 會話性儲存:layui.sessionData(table, settings),頁面關閉後即失效。注:layui 2.2.5 新增

獲取裝置資訊

  • layui.device(key)

其它

方法 屬性 描述
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 回撥函式

模組名稱空間

layui 的模組介面會繫結在 layui 物件下,內部由 layui.define() 方法來完成。每一個模組都會一個特有的名字,並且無法被佔用。所以你無需擔心模組的空間被汙染,除非你主動 delete layui.{模組名}。呼叫模組可通過 layui.use 方法來實現,然後再通過 layui 物件獲得模組介面。

如何使用內部jQuery

//主動載入jquery模組
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重點處
  ,layer = layui.layer;
  
  //後面就跟你平時使用jQuery一樣
  $('body').append('hello jquery');
});

layui官方文件

相關文章