Layer UI 模組化的用法

2021-09-11 08:48:21 字數 1366 閱讀 1554

此文章適合入門的同學檢視,之前因為專案的原因,在網上找了一套layer ui做的後台管理系統模板,完全不懂layui裡面的js用法,看了官方文件和其它資料後才明白怎麼去實現模組化這個例子,但是還是感覺網上的資料寫得不夠清晰,我嘗試把自己的想法寫出來,大家可以一起學習

1.首先從簡單的入手

載入所需模組

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

引用了layui.js後

往js檔案寫入

layui.use(['layer'],function())

2.定義模組

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

layui.define(['layer'], function(exports));

});3.全域性配置

方法:layui.config(options)

layui.config().use('index'); //載入入口

來到這一步,也許你還不明白,但是看完以下這個例子,你就會清晰多了

在js資料夾裡面建立index.js(注意這個檔案的名稱)

目錄現在是這樣的

2.再進行全域性配置

在index.html中寫

layui.config().use(['index','layer'],function())

不僅可以指定我們的index.js模組檔案模組(),還可以引用內建的模組,比如laydate,layer等等

3.自定義模組

在index.js中

layui.define(['layer'],function(exports))

})現在呢,我們已經定義了新的模組 index,怎麼去執行該模組呢

4.最後使用熱載入模組layui.use()

繼續在index.js寫

layui.use(['index'],function())

最後總結一下,通俗易懂點來講,進行全域性配置(layui.config):建立的這個index.js是我們業務所需要的檔案模組,類似於layer,laydate那些結構的;

自定義模組:接著我們發現業務的需求,需要進一步在index.js去寫自己的小模組,於是呢通過define自定義模組;

熱載入模組:內建模組和自定義模組怎麼使用,通過layui.use()去載入

什麼是模組化?模組化的好處

1.高內聚低耦合,有利於團隊作戰,當專案很複雜的時候,將專案劃分為子模組分給不同的人開發,最後再組合在一起,這樣可以降低模組與模組之間的依賴關係體現低耦合,模組又有特定功能體現高內聚。2.可重用,方便維護,模組的特點就是有特定功能,當兩個專案都需要某種功能的時候,我們定義乙個特定的模組來實現該功能,...

什麼是模組化?模組化的好處

什麼是模組化?j a 應用架構設計 模組化模式與 osgi 一書中對它的定義是 模組化是一種處理複雜系統分解為更好的可管理模組的方式。所謂的模組化開發就是封裝細節,提供使用介面,彼此之間互不影響,每個模組都是實現某一特定的功能。模組化開發的基礎就是函式。模組化開發使 耦合度降低,模組化的意義在於最大...

模組化的理解,以及模組化的好處

先理解模組 在程式設計中,為完成某一功能所需的一段程式或子程式 或指能由編譯程式 裝配程式等處理的獨立程式單位 或指大型軟體系統的一部分。可以這樣理解每乙個頁面中的部分都可以看成乙個模組。模組化是指解決乙個複雜問題時自頂向下逐層把系統劃分成若干模組的過程,有多種屬性,分別反映其內部特性。是指將每乙個...