對Layer UI 模塊化的用法詳解
此文章適合入門的同學(xué)查看，之前因?yàn)轫?xiàng)目的原因，在網(wǎng)上找了一套Layer UI做的后臺管理系統(tǒng)模板，完全不懂LayUI里面的JS用法，看了官方文檔和其它資料后才明白怎么去實(shí)現(xiàn)模塊化這個例子，但是還是感覺網(wǎng)上的資料寫得不夠清晰，我嘗試把自己的想法寫出來，大家可以一起學(xué)習(xí)
1.首先從簡單的入手
加載所需模塊
方法：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'); //加載入口
來到這一步，也許你還不明白，但是看完以下這個例子，你就會清晰多了
1.新建一個js文件夾和一個index.html，再加上官方下載的layui文件
在js文件夾里面建立index.js(注意這個文件的名稱)
目錄現(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時的模塊名一致，這里的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這個自定義模塊
})
最后總結(jié)一下，通俗易懂點(diǎn)來講，進(jìn)行全局配置(layui.config)：創(chuàng)建的這個index.js是我們業(yè)務(wù)所需要的文件模塊，類似于layer,laydate那些結(jié)構(gòu)的；
自定義模塊：接著我們發(fā)現(xiàn)業(yè)務(wù)的需求，需要進(jìn)一步在index.js去寫自己的小模塊，于是呢通過define自定義模塊；
熱加載模塊：內(nèi)置模塊和自定義模塊怎么使用，通過layui.use()去加載
好了，以上就是我個人的理解，如有錯誤，歡迎指出。希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
window.event.srcElement 得到事件源對象
window.event.srcElement 得到事件源對象代碼，大家可以參考腳本之家以前發(fā)的代碼，多瀏覽兼容的。2009-05-05
使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法
這篇文章主要介紹了使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
微信小程序中的畫布是非常重要的展示控件,其相當(dāng)于HTML中的canvas控件,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)Canvas畫板的相關(guān)資料,需要的朋友可以參考下2024-08-08
JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能,涉及javascript數(shù)字、字符串等運(yùn)算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
漂亮的widgets，支持換膚和后期開發(fā)新皮膚...2007-04-04
完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（上篇）
這篇文章主要介紹了完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖的具體資料，基于完美運(yùn)動框架move2.js而完成的八種焦點(diǎn)錄播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單圖片拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
Webpack 本身是不能識別樣式資源的,所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源,本文就來介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下2023-12-12
原生JavaScript實(shí)現(xiàn)購物車效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購物車效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07