對(duì)Layer UI 模塊化的用法詳解

此文章適合入門(mén)的同學(xué)查看，之前因?yàn)轫?xiàng)目的原因，在網(wǎng)上找了一套Layer UI做的后臺(tái)管理系統(tǒng)模板，完全不懂LayUI里面的JS用法，看了官方文檔和其它資料后才明白怎么去實(shí)現(xiàn)模塊化這個(gè)例子，但是還是感覺(jué)網(wǎng)上的資料寫(xiě)得不夠清晰，我嘗試把自己的想法寫(xiě)出來(lái)，大家可以一起學(xué)習(xí)

1.首先從簡(jiǎn)單的入手

加載所需模塊

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

引用了Layui.js后

往js文件寫(xiě)入

layui.use(['layer'],function(){ [mods]加載的模塊，現(xiàn)在加載的是彈出層
 var layer = layui.layer; 彈出層模塊
 layer.msg('風(fēng)繼續(xù)吹')
})  

2.定義模塊

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

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

3.全局配置

方法：layui.config(options)

layui.config({
 base: 'js/' //你存放新模塊的目錄，注意，不是layui的模塊目錄
}).use('index'); //加載入口

來(lái)到這一步，也許你還不明白，但是看完以下這個(gè)例子，你就會(huì)清晰多了

1.新建一個(gè)js文件夾和一個(gè)index.html，再加上官方下載的layui文件

在js文件夾里面建立index.js(注意這個(gè)文件的名稱)

目錄現(xiàn)在是這樣的

1

2.再進(jìn)行全局配置

在index.html中寫(xiě)

layui.config({
 base:'js/' //你存放新模塊的目錄，注意，不是layui的模塊目錄
  }).use(['index','layer'],function(){ //加載入口 上述的 index 即為你 js/ 目錄下的 index.js，看看官方的文件結(jié)構(gòu)，如下圖,index.js相當(dāng)于就成為了新的文件模塊（與下文提的模塊不一樣）
 var layer = layui.layer;
 layer.msg('leslie world');
})

2

不僅可以指定我們的index.js模塊文件模塊（），還可以引用內(nèi)置的模塊，比如laydate,layer等等

3.自定義模塊

在index.js中

layui.define(['layer'],function(exports){ //引用layer模塊
 var layer = layui.layer;
 exports('index',function(){ //注意，這里是模塊輸出的核心，模塊名必須和use時(shí)的模塊名一致，這里的index就是在index.html use的模塊
 layer.msg('leslie cheung');
 })
})

現(xiàn)在呢，我們已經(jīng)定義了新的模塊 index,怎么去運(yùn)行該模塊呢

4.最后使用熱加載模塊layui.use()

繼續(xù)在index.js寫(xiě)

layui.use(['index'],function(){
 layui.index() //調(diào)用index這個(gè)自定義模塊
})

最后總結(jié)一下，通俗易懂點(diǎn)來(lái)講，進(jìn)行全局配置(layui.config)：創(chuàng)建的這個(gè)index.js是我們業(yè)務(wù)所需要的文件模塊，類似于layer,laydate那些結(jié)構(gòu)的；

自定義模塊：接著我們發(fā)現(xiàn)業(yè)務(wù)的需求，需要進(jìn)一步在index.js去寫(xiě)自己的小模塊，于是呢通過(guò)define自定義模塊；

熱加載模塊：內(nèi)置模塊和自定義模塊怎么使用，通過(guò)layui.use()去加載

好了，以上就是我個(gè)人的理解，如有錯(cuò)誤，歡迎指出。希望能給大家一個(gè)參考，也希望大家多多支持億速云。