<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 底層方法

      本篇主要介紹核心基礎庫 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 - 用心與你溝通

      亚洲图色