024-底层方法
1. 全局配置
1.1. 方法: layui.config(options)。
1.2. 你可以在使用模塊之前, 全局化配置一些參數, 盡管大部分時候它不是必須的。目前支持的全局配置項如下:
layui.config({dir: '/res/layui/' // layui.js所在路徑(注意, 如果是script單獨引入layui.js, 無需設定該參數。), 一般情況下可以無視。,version: false // 一般用于更新模塊緩存, 默認不開啟。設為true即讓瀏覽器不緩存。也可以設為一個固定的值, 如: 201610。,debug: false // 用于開啟調試模式, 默認false, 如果設為true, 則JS模塊的節點會保留在頁面。,base: '' // 設定擴展的layui模塊的所在目錄, 一般用于外部模塊擴展。 });2. 定義模塊
2.1. 方法: layui.define([mods], callback)。
2.2. 通過該方法可定義一個layui模塊。參數mods是可選的, 用于聲明該模塊所依賴的模塊。callback即為模塊加載完畢的回調函數, 它返回一個exports參數, 用于輸出該模塊的接口。
layui.define(function(exports){exports('alias', function(){return '一般對子目錄模塊建立別名';}); });2.3. exports是一個函數, 它接受兩個參數, 第一個參數為模塊名, 第二個參數為模塊接口, 當你聲明了上述的一個模塊后, 你就可以在外部使用了, alias就會注冊到layui對象下, 即可通過layui.alias()去執行該模塊的接口。
2.4. 你也可以在定義一個模塊的時候, 聲明該模塊所需的依賴:
layui.define('code', function(exports){exports('etdCode', {title: '代碼修飾器擴展模塊',code: function(id, elem, title, height, encode, skin, about){var elem = document.getElementById(id);elem.innerHTML = elem.innerHTML.trim();layui.code({elem, title, height, encode, skin, about});}}); });2.5. mods參數并非只能是一個數組, 你也可以直接傳一個字符型的模塊名, 但是這樣只能依賴一個模塊。上述的'code'即為本模塊所依賴的模塊, 同時exports函數的第二個參數是一個對象。
2.6. 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模塊// 使用模塊 });3. 拓展一個模塊別名
3.1. 方法: layui.extend(options)。一般用于你的擴展模塊, 給具有多級子目錄的模塊起一個別名。
<script type="text/javascript">layui.config({base: 'layui/etdCode/'}).extend({alias: 'child/alias'}); </script>3.2. 你也可以忽略base設定的根目錄, 直接在extend指定路徑。{/}的意思即代表采用自有路徑, 即不跟隨base路徑。
<script type="text/javascript">layui.extend({mod2: '{/}http://cdn.xxx.com/lib/mod2' }); </script>4. 擴展模塊例子
4.1. 在layui目錄下新建一個etdCode作為我們擴展模塊的目錄
4.2. 在etdCode目錄新建一個etdCode.js的擴展模塊
4.3. 編輯etdCode.js模塊代碼
layui.define('code', function(exports){exports('etdCode', {title: '代碼修飾器擴展模塊',code: function(id, elem, title, height, encode, skin, about){var elem = document.getElementById(id);elem.innerHTML = elem.innerHTML.trim();layui.code({elem, title, height, encode, skin, about});}}); });4.4. 在etdCode目錄下還有一個child目錄, 是我們的alias模塊
4.5. 編輯alias.js模塊代碼
layui.define(function(exports){exports('alias', function(){return '一般對子目錄模塊建立別名';}); });4.6. 編輯extendcode.html使用擴展模塊
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>code模塊的擴展</title><link rel="stylesheet" type="text/css" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><pre class="layui-code" id='test1'>var person = { firstName:"Bill",lastName:"Gates",age:50,eyeColor:"blue"}</pre> <div id='test2'></div> <script type="text/javascript">layui.config({base: 'layui/etdCode/'}).extend({alias: 'child/alias'});// 使用use方法引入模塊layui.use(['etdCode', 'alias'], function(){var etdCode = layui.etdCode;layui.$('#test2').text(layui.alias());etdCode.code('test1');});</script> </body> </html>4.7. 效果圖
5. 獲取設備信息
5.1. 方法: layui.device(key), 參數key是可選的。
5.2. 由于layui的一些功能進行了兼容性處理和響應式支持, 因此該方法同樣發揮了至關重要的作用。尤其是在layui mobile模塊中的作用可謂舉足輕重。該方法返回了豐富的設備信息:
var device = layui.device();// device即可根據不同的設備返回下述不同的信息 {os: "windows" // 底層操作系統, windows、linux、mac等,ie: false // ie6-11的版本, 如果不是ie瀏覽器, 則為false,weixin: false // 是否微信環境,android: false // 是否安卓系統,ios: false // 是否ios系統,mobile: false // 是否為移動設備 }6. 其它
| 方法/屬性 | 描述 |
| layui.cache | 靜態屬性。獲得一些配置及臨時的緩存信息。 |
| 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.url(href) | 用于將一段URL鏈接中的pathname、search、hash屬性值進行對象化處理。 參數: href可選。若不傳, 則自動讀取當前頁面的url(即: location.href)。 示例: var url = layui.url(); |
| layui.hint() | 向控制臺打印一些異常信息, 目前只返回了error方法: layui.hint().error('出錯啦')。 |
| layui.stope(e) | 阻止事件冒泡。 |
| layui.onevent(modName, events, callback) | 增加自定義模塊事件。 |
| layui.event(modName, events, params) | 執行自定義模塊事件, 搭配onevent使用。 |
| layui.off(events, modName) | 用于移除模塊相關事件的監聽。 如: layui.off('select(filter)', 'form'), 那么form.on('select(filter)', callback)的事件將會被移除。 |
| layui.factory(modName) | 用于獲取模塊對應的define回調函數。 |
| layui.link(href) | 動態加載CSS。href即為css路徑。注意: 該方法并非是你使用layui所必須的, 它一般只是用于動態加載你的外部CSS文件。 |
| layui.data(table, settings) | 對localStorage的友好封裝。持久化存儲, 數據會永久存在, 除非物理刪除。 |
| layui.sessionData(table, settings) | 對sessionStorage的友好封裝。會話性存儲, 數據在頁面關閉后即失效。 |
7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>layui其它底層方法</title><link rel="stylesheet" type="text/css" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div> <script type="text/javascript">layui.use(['jquery'], function(){var $ = layui.jquery;// 平臺信息var device = layui.device();var platform = '';// 變量對象layui.each(device, function(key, value){platform += (key + ':' + value + '<br />');});$('#test1').html(platform);});</script> </body> </html>7.2. 效果圖
總結
