底層方法

                    本篇主要介紹核心基礎庫 layui.js 所發揮的作用,其中過濾了大部分在外部可能不是太常用的API,側重羅列了最常用的框架支撐。

                    方法:layui.config(options)

                    你可以在使用模塊之前,全局化配置一些參數,盡管大部分時候它不是必須的。所以我們目前提供的全局配置項非常少,這也是為了減少一些不必要的工作,盡可能讓使用變得更簡單。目前支持的全局配置項如下:

                    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模塊。參數mods是可選的,用于聲明該模塊所依賴的模塊。callback即為模塊加載完畢的回調函數,它返回一個exports參數,用于輸出該模塊的接口。

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

                    跟Requirejs最大不同的地方在于接口輸出,exports是一個函數,它接受兩個參數,第一個參數為模塊名,第二個參數為模塊接口,當你聲明了上述的一個模塊后,你就可以在外部使用了,demo就會注冊到layui對象下,即可通過 layui.demo() 去執行該模塊的接口。

                    你也可以在定義一個模塊的時候,聲明該模塊所需的依賴,如:

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

                    上述的['layer', 'laypage']即為本模塊所依賴的模塊,它并非只能是一個數組,你也可以直接傳一個字符型的模塊名,但是這樣只能依賴一個模塊。

                    方法:layui.use([mods], callback)

                    Layui的內置模塊并非默認就加載的,他必須在你執行該方法后才會加載。它的參數跟上述的 define方法完全一樣。
                    另外請注意,mods里面必須是一個合法的模塊名,不能包含目錄。如果需要加載目錄,建議采用extend建立別名(詳見模塊規范)

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

                    該方法的函數其實返回了所加載的模塊接口,所以你其實也可以不通過layui對象賦值獲得接口(這一點跟Sea.js很像哈):

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

                    方法:layui.link(href)

                    href即為css路徑。注意:該方法并非是你使用Layui所必須的,它一般只是用于動態加載你的外部CSS文件。

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

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

                    上述兩個方法的使用方式是完全一樣的。其中參數 table 為表名,settings是一個對象,用于設置key、value。下面與 layui.data 方法為例:

                    //【增】:向test表插入一個nickname字段,如果該表不存在,則自動建立。
                    layui.data('test', {
                      key: 'nickname'
                      ,value: '賢心'
                    });
                     
                    //【刪】:刪除test表的nickname字段
                    layui.data('test', {
                      key: 'nickname'
                      ,remove: true
                    });
                    layui.data('test', null); //刪除test表
                      
                    //【改】:同【增】,會覆蓋已經存儲的數據
                      
                    //【查】:向test表讀取全部的數據
                    var localTest = layui.data('test');
                    console.log(localTest.nickname); //獲得“賢心”
                          

                    方法:layui.device(key),參數key是可選的

                    由于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系統
                    }
                    

                    有時你的App可能會對userAgent插入一段特定的標識,譬如:
                    Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 myapp/1.8.6 Safari/537.36

                    你要驗證當前的WebView是否在你的App環境,即可通過上述的myapp(即為Native給Webview插入的標識,可以隨意定義)來判斷。

                    var device = layui.device('myapp');
                    if(device.myapp){
                      alert('在我的App環境');
                    }      
                          

                    其實除此之外,layui.js內部還提供了許多底層引擎,他們同樣是整個Layui框架體系的有力支撐,所以有必要露個臉,盡管你可能并不會用到:

                    方法/屬性 描述
                    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部分模塊依賴jQuery(比如layer),但是你并不用去額外加載jQuery。Layui已經將jQuery最穩定的一個版本改為Layui的內部模塊,當你去使用 layer 之類的模塊時,它會首先判斷你的頁面是否已經引入了jQuery,如果沒有,則加載內部的jQuery模塊,如果有,則不會加載。

                    另外,我們的圖標取材于阿里巴巴矢量圖標庫(iconfont),構建工具采用 Gulp 。除此之外,不依賴于任何第三方工具。

                    layui - 用心與你溝通

                    亚洲图色