一、定義你的新模塊
這里以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>
最后貼出整個項目的目錄結構：
