layui中如何使用函數(shù)layui.define-創(chuàng)新互聯(lián)

這篇文章主要介紹layui中如何使用函數(shù)layui.define，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立于2013年，先為陜州等服務(wù)建站，陜州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為陜州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

前言：

1、如果你深刻理解并合理運(yùn)用 layui.define，那么本篇對(duì)你來說有點(diǎn)浪費(fèi)時(shí)間了。

2、如果你對(duì)于“Javascript 模塊化開發(fā)”聽都沒聽過，更別說還要理解它。那么建議可以先在網(wǎng)絡(luò)上找找什么是“Javascript 模塊化開發(fā)”，這對(duì)你理解我后面所說的很重要，當(dāng)然，也會(huì)幫助你更好地理解 Layui 作者想表達(dá)的理念。

推薦：layui框架教程

我們?cè)谑褂?Layui 的時(shí)候，經(jīng)常使用的是

layui.use([], function(){})

但是，細(xì)心的小伙伴會(huì)發(fā)現(xiàn) layui 還有一個(gè)函數(shù)是 layui.define，這個(gè)是用來做什么的呢？以前我們寫代碼是沒有模塊化概念的，如下面的代碼：

function entry(type) {  if (type === 1) { handle1() }  else if (type === 2) { handle2() }  else { handleall() }}function handle1(){}function handle2(){}function handleall(){}

長(zhǎng)期的實(shí)踐讓程序員明白，javascript 模塊化是必不可少的。而在實(shí)現(xiàn)模塊化，每一家都有自己的想法和實(shí)現(xiàn)。他們盡可能考慮所有的問題，這也導(dǎo)致使用他們的模塊化你需要一個(gè)復(fù)雜的配置。layui 采用自身的加載方式，和其他模塊化實(shí)現(xiàn)相比，她是比較輕量級(jí)的。她有2個(gè)核心函數(shù) define 和 use 來實(shí)現(xiàn)自身的模塊化，但是有時(shí)候也會(huì)給人迷惑。我司小伙伴在使用過程中就問過我，layui 的 define 函數(shù)感覺和 use 函數(shù)差不多啊，如何做到正確使用？如 layui 文檔所說函數(shù) layui.define，那是用來擴(kuò)展組件的。而函數(shù) use 是加載使用這個(gè)組件的。但是什么樣的代碼才能算組件呢，在擴(kuò)展組件頁面，我們也可以看到一些優(yōu)秀的作者分享了他們的成果。但是我們可以看到這些組件都有個(gè)共同點(diǎn)，那就是不涉及業(yè)務(wù)（這不是廢話，有業(yè)務(wù)誰用它）。所以一旦設(shè)計(jì)業(yè)務(wù)，不在是組件了，這時(shí)候我們可以換個(gè)名稱，叫做接口。那么區(qū)別函數(shù) define 和 use 就很好理解了。函數(shù)define 就是為了定義組件或者接口的，函數(shù) use 就是為了使用那些組件或者接口。如果你寫的組件或者接口想讓別人使用，那么就使用函數(shù) define，但是如果你的函數(shù)只是內(nèi)務(wù)執(zhí)行，不需要讓他人調(diào)用，那么就使用函數(shù) use。到這里，如果你現(xiàn)在很清晰地明白兩者的區(qū)別，那么在下面的架構(gòu)一個(gè)簡(jiǎn)單的 layui 項(xiàng)目應(yīng)該更加明白。首先，你需要到這里下載一個(gè)簡(jiǎn)單的搭建項(xiàng)目 layui.test.project。然后用工具打開項(xiàng)目，我們可以清楚地看到文件目錄。

這里就運(yùn)用到了大量的 layui.define，展示在 index.single.html，這里面我們配置了 layui 的cdn，配置了全局的 layui 參數(shù)，最后是我們所運(yùn)用的業(yè)務(wù)腳本。打開 layui.config.js，可以很清楚看到內(nèi)容，這里面我本人定義了 2 個(gè)組件（注意這個(gè)稱呼），它們是沒有任何業(yè)務(wù)上的邏輯。所以我放在了 lib 文件夾，它是用了存放一些非業(yè)務(wù)公共的組件。因?yàn)闀?huì)大量使用，所以我提前配置完畢。而后我們會(huì)來到入口腳本 main.single.js，這里面使用了 layui 自身的模塊 jquery，form，也使用了我剛剛定義的模塊 logger 和 more，因?yàn)槲也粫?huì)導(dǎo)出給他人使用，所以使用的函數(shù)use 。而在其內(nèi)部，我做了簡(jiǎn)單的測(cè)試邏輯。

接下來，你可能會(huì)發(fā)現(xiàn)還有 api，const，utils 在這里根本沒用到，他們是做什么的呢。api 故名思意就是為了提供與后臺(tái)接口的處理，因?yàn)?layui 自帶了 jquery，那么在與后臺(tái)接口調(diào)用上我們采用 jquery.ajax，回調(diào)函數(shù)有時(shí)候是一些初學(xué)者的噩夢(mèng)，所以我們采用 jquery的 deffer 對(duì)象，可以鏈?zhǔn)秸{(diào)用。

這里我沒有封裝 jquery.ajax 的，這樣錯(cuò)誤處理，token 攜帶沒有統(tǒng)一的處理，無形會(huì)加載工作量，所以你需要補(bǔ)充封裝 jquery.ajax 的接口才行，這里可以再次定義一個(gè)組件 layui.ajax.jsconst 存放常量，這里配置了一個(gè)返回接口的關(guān)鍵字 response.js，當(dāng)然這是為了模擬，如果前后臺(tái)商量好，也可以直接在項(xiàng)目寫死。utils 存放工具類，我們常用的轉(zhuǎn)換時(shí)間，轉(zhuǎn)換url 都是可以寫在這里的。

這 3 個(gè)文件夾是為了輔助其他業(yè)務(wù)頁面而配置的，所以基本全部使用懶加載調(diào)用，它們以函數(shù) define 開始，最后導(dǎo)出一個(gè)接口名，給外部調(diào)用。不同于lib 需要預(yù)先配置，在使用他們的時(shí)候，需要自己重新配置，這里以 utils 加載為例：

layui.extend({  utils: '/path/to/utils/index'}).use(['utils'], function(){  var utils = layui.utils  // ...})

注意： 如果你使用ftl，jsp，apsx這些由后臺(tái)渲染的頁面引擎，應(yīng)該會(huì)有一個(gè)公共的頭部，那么剛剛的全局配置 layui 文件 layui.config.js，你可以在公共的頭部加入。

以上是“l(fā)ayui中如何使用函數(shù)layui.define”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：layui中如何使用函數(shù)layui.define-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.muchs.cn/article18/hgddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、商城網(wǎng)站、微信公眾號(hào)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)