layui 底層基礎

全局配置

方法：layui.config(options)

你能夠在使用模塊以前，全局化配置一些參數，儘管大部分時候它不是必須的。因此咱們目前提供的全局配置項很是少，這也是爲了減小一些沒必要要的工做，儘量讓使用變得更簡單。目前支持的全局配置項以下：

codelayui.code

1. layui.config({
2. dir: '/res/layui/' //layui.js 所在路徑（注意，若是是script單獨引入layui.js，無需設定該參數。），通常狀況下能夠無視
3. ,version: false //通常用於更新模塊緩存，默認不開啓。設爲true即讓瀏覽器不緩存。也能夠設爲一個固定的值，如：201610
4. ,debug: false //用於開啓調試模式，默認false，若是設爲true，則JS模塊的節點會保留在頁面
5. ,base: '' //設定擴展的Layui模塊的所在目錄，通常用於外部模塊擴展
6. });

定義模塊

方法：layui.define([mods], callback)

經過該方法可定義一個 Layui模塊。參數mods是可選的，用於聲明該模塊所依賴的模塊。callback即爲模塊加載完畢的回調函數，它返回一個exports參數，用於輸出該模塊的接口。

codelayui.code

1. layui.define(function(exports){
2. //do something
4. exports('demo', function(){
5. alert('Hello World!');
6. });
7. });

跟Requirejs最大不一樣的地方在於接口輸出，exports是一個函數，它接受兩個參數，第一個參數爲模塊名，第二個參數爲模塊接口，當你聲明瞭上述的一個模塊後，你就能夠在外部使用了，demo就會註冊到layui對象下，便可經過 layui.demo() 去執行該模塊的接口。

你也能夠在定義一個模塊的時候，聲明該模塊所需的依賴，如：

codelayui.code

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

上述的['layer', 'laypage']即爲本模塊所依賴的模塊，它並不是只能是一個數組，你也能夠直接傳一個字符型的模塊名，可是這樣只能依賴一個模塊。

 

 

加載所需模塊

 

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

Layui的內置模塊並不是默認就加載的，他必須在你執行該方法後纔會加載。它的參數跟上述的 define方法徹底同樣。 
另外請注意，mods裏面必須是一個合法的模塊名，不能包含目錄。若是須要加載目錄，建議採用extend創建別名（詳見模塊規範）

codelayui.code

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

該方法的函數其實返回了所加載的模塊接口，因此你其實也能夠不經過layui對象賦值得到接口（這一點跟Sea.js很像哈）：

codelayui.code

1. layui.use(['laypage', 'layedit'], function(laypage, layedit){
3. //使用分頁
4. laypage();
6. //創建編輯器
7. layedit.build();
8. });

動態加載CSS

方法：layui.link(href)

href即爲css路徑。注意：該方法並不是是你使用Layui所必須的，它通常只是用於動態加載你的外部CSS文件。

 

本地儲存

 

方法：layui.data(table, settings)

參數table爲表名，settings是一個對象，用於設置key、value。 
該方法對localStorage進行了良好的封裝，在Layui的多個內置模塊（好比layim）中發揮了重要的做用，所以你可使用它存儲一些本地數據。

codelayui.code

1. //【增】：向test表插入一個nickname字段，若是該表不存在，則自動創建。
2. layui.data('test', {
3. key: 'nickname'
4. ,value: '賢心'
5. });
6. //【刪】：刪除test表的nickname字段
7. layui.data('test', {
8. key: 'nickname'
9. ,remove: true
10. });
11. layui.data('test', null); //刪除test表
13. //【改】：同【增】，會覆蓋已經存儲的數據
15. //【查】：向test表讀取所有的數據
16. var localTest = layui.data('test');
17. console.log(localTest.nickname); //得到「賢心」

其餘

 

其實除此以外，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使用