layui項(xiàng)目中函數(shù)layui.define的使用方法

今天小編給大家分享的是layui.define函數(shù)的詳細(xì)介紹，相信大部分人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，話不多說(shuō)，一起往下看吧。

前言：

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

2、如果你對(duì)于“Javascript 模塊化開(kāi)發(fā)”聽(tīng)都沒(méi)聽(tīng)過(guò)，更別說(shuō)還要理解它。那么建議可以先在網(wǎng)絡(luò)上找找什么是“Javascript 模塊化開(kāi)發(fā)”，這對(duì)你理解我后面所說(shuō)的很重要，當(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è)是用來(lái)做什么的呢？

以前我們寫代碼是沒(méi)有模塊化概念的，如下面的代碼：

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)。他們盡可能考慮所有的問(wèn)題，這也導(dǎo)致使用他們的模塊化你需要一個(gè)復(fù)雜的配置。

layui 采用自身的加載方式，和其他模塊化實(shí)現(xiàn)相比，她是比較輕量級(jí)的。她有2個(gè)核心函數(shù) define 和 use 來(lái)實(shí)現(xiàn)自身的模塊化，但是有時(shí)候也會(huì)給人迷惑。我司小伙伴在使用過(guò)程中就問(wèn)過(guò)我，layui 的 define 函數(shù)感覺(jué)和 use 函數(shù)差不多啊，如何做到正確使用？

如 layui 文檔所說(shuō)函數(shù) layui.define，那是用來(lái)擴(kuò)展組件的。而函數(shù) use 是加載使用這個(gè)組件的。但是什么樣的代碼才能算組件呢，在擴(kuò)展組件頁(yè)面，我們也可以看到一些優(yōu)秀的作者分享了他們的成果。但是我們可以看到這些組件都有個(gè)共同點(diǎn)，那就是不涉及業(yè)務(wù)（這不是廢話，有業(yè)務(wù)誰(shuí)用它）。

所以一旦設(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。

然后用工具打開(kāi)項(xiàng)目，我們可以清楚地看到文件目錄。

這里就運(yùn)用到了大量的 layui.define，展示在 index.single.html，這里面我們配置了 layui 的cdn，配置了全局的 layui 參數(shù)，最后是我們所運(yùn)用的業(yè)務(wù)腳本。

打開(kāi) layui.config.js，可以很清楚看到內(nèi)容，這里面我本人定義了 2 個(gè)組件（注意這個(gè)稱呼），它們是沒(méi)有任何業(yè)務(wù)上的邏輯。所以我放在了 lib 文件夾，它是用了存放一些非業(yè)務(wù)公共的組件。因?yàn)闀?huì)大量使用，所以我提前配置完畢。

而后我們會(huì)來(lái)到入口腳本 main.single.js，這里面使用了 layui 自身的模塊 jquery，form，也使用了我剛剛定義的模塊 logger 和 more，因?yàn)槲也粫?huì)導(dǎo)出給他人使用，所以使用的函數(shù)use 。而在其內(nèi)部，我做了簡(jiǎn)單的測(cè)試邏輯。

接下來(lái)，你可能會(huì)發(fā)現(xiàn)還有 api，const，utils 在這里根本沒(méi)用到，他們是做什么的呢。

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)用。

這里我沒(méi)有封裝 jquery.ajax 的，這樣錯(cuò)誤處理，token 攜帶沒(méi)有統(tǒng)一的處理，無(wú)形會(huì)加載工作量，所以你需要補(bǔ)充封裝 jquery.ajax 的接口才行，這里可以再次定義一個(gè)組件 layui.ajax.js

const 存放常量，這里配置了一個(gè)返回接口的關(guān)鍵字 response.js，當(dāng)然這是為了模擬，如果前后臺(tái)商量好，也可以直接在項(xiàng)目寫死。

utils 存放工具類，我們常用的轉(zhuǎn)換時(shí)間，轉(zhuǎn)換url 都是可以寫在這里的。

這 3 個(gè)文件夾是為了輔助其他業(yè)務(wù)頁(yè)面而配置的，所以基本全部使用懶加載調(diào)用，它們以函數(shù) define 開(kāi)始，最后導(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è)面引擎，應(yīng)該會(huì)有一個(gè)公共的頭部，那么剛剛的全局配置 layui 文件 layui.config.js，你可以在公共的頭部加入。

以上就是函數(shù)layui.define的使用方法的簡(jiǎn)略介紹，詳細(xì)使用情況還需要大家自己親自動(dòng)手使用過(guò)才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！