layui中如何使用函數layui.define

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

前言：

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

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

推薦：layui框架教程

我們在使用 Layui 的時候，經常使用的是

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

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

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

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

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

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

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

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

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

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

以上是“layui中如何使用函數layui.define”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！