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

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

前言：

1、如果你深刻理解并合理運用 layui.define，那么本篇對你來說有點浪費時間了。

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

推薦：layui框架教程

我們在使用 Layui 的時候，經(jīng)常使用的是

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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