對(duì)Layer UI 模塊化的用法詳解
此文章適合入門的同學(xué)查看，之前因?yàn)轫?xiàng)目的原因，在網(wǎng)上找了一套Layer UI做的后臺(tái)管理系統(tǒng)模板，完全不懂LayUI里面的JS用法，看了官方文檔和其它資料后才明白怎么去實(shí)現(xiàn)模塊化這個(gè)例子，但是還是感覺(jué)網(wǎng)上的資料寫得不夠清晰，我嘗試把自己的想法寫出來(lái)，大家可以一起學(xué)習(xí)
1.首先從簡(jiǎn)單的入手
加載所需模塊
方法：layui.use([mods], callback)
引用了Layui.js后
往js文件寫入
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中寫
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寫
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去寫自己的小模塊，于是呢通過(guò)define自定義模塊；
熱加載模塊：內(nèi)置模塊和自定義模塊怎么使用，通過(guò)layui.use()去加載
好了，以上就是我個(gè)人的理解，如有錯(cuò)誤，歡迎指出。希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)的圖片預(yù)覽功能
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片預(yù)覽功能,結(jié)合實(shí)例形式分析了javascript針對(duì)圖片預(yù)覽相關(guān)功能實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03
這篇文章主要介紹了微信小程序 swiper組件輪播圖詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下，希望能給你帶來(lái)幫助2021-08-08
Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript中關(guān)于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個(gè)最核心的概念存在的。相信廣大FE筒子們對(duì)于這個(gè)概念不會(huì)陌生，它定義了變量或函數(shù)有權(quán)訪問(wèn)其他數(shù)據(jù)范圍以及其行為。2011-08-08
這篇文章主要介紹了JavaScript實(shí)現(xiàn)修改偽類樣式的方法以及代碼實(shí)現(xiàn)過(guò)程，一起學(xué)習(xí)參考下吧。2017-11-11
本文主要介紹了js實(shí)現(xiàn)抽獎(jiǎng)效果的方法實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
本文主要介紹了手把手教會(huì)你使用redux的入門教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
利用Javascript裁剪圖片并存儲(chǔ)的簡(jiǎn)單實(shí)現(xiàn)
裁剪圖片對(duì)我們來(lái)說(shuō)是再熟悉不過(guò)的了，最近工作中就又遇到了這個(gè)需求，所以想著干脆整理下來(lái)，方法大家和自己在需要的時(shí)候參考學(xué)習(xí)，所以這篇文章主要介紹了利用Javascript裁剪圖片并存儲(chǔ)的簡(jiǎn)單實(shí)現(xiàn)，后端PHP處理我用的是THINKPHP框架，需要的朋友可以參考下。2017-03-03
純?JS?實(shí)現(xiàn)的輕量化圖片編輯器實(shí)例詳解
這篇文章主要為大家介紹了純JS實(shí)現(xiàn)的輕量化圖片編輯器實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序tabBar設(shè)置實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11