Layui自定義模組的使用
阿新 • • 發佈：2020-09-19
一、定義你的新模組
這裡以common.js為例，程式碼如下：
//common.js檔案 layui.define(function(exports) { var obj = { hello: function() { alert("Hello"); } }; exports('common', obj); //common為新建的模組名（不考慮命名規範的話，名字隨便起），obj即為模組中的obj物件 });
二、註冊新模組
對你的新模組進行配置（建立config.js檔案專一用來配置你的自定義模組），程式碼如下：
//config.js檔案 layui.config({ base: 'js/' }).extend({ common: 'common' // 在common.js檔案中定義的模組名 : 該模組相對於上邊base的路徑 });
在這裡有一些問題需要注意，官方文件是這樣寫的：
官方文件的base路徑是 /res/js/，在測試過程中，如果把我的案例改為 /js/，則會報錯，控制檯輸出如下：
可以看出，線上下測試時，/代表的是電腦磁碟的根目錄，而不是該專案的根目錄，所以線上下測試時要將第一個/去掉。
三、使用你的自定義模組
新建index.html檔案，內容如下，即可正常使用自定義模組
<!-- index.html檔案 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 一定要先引入layui.js，再引入config.js--> <script src="layui/layui.js"></script> <script src="js/config.js"></script> <title>Gaint snail</title> </head> <body> <h1>hello World</h1> </body> <script> //這裡即為自定義模組的使用方式 layui.use('common', function() { var common = layui.common; common.hello(); }); </script> </html>
最後貼出整個專案的目錄結構：