lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-06-28 13:34:27 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

docs: 重写 layui.extend() 新版文档

Browse Source
This commit is contained in:
贤心 2025-03-24 00:18:03 +08:00
parent c01a69225e
commit b4fbb28a04
1 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/modules.md
View File

@ -130,61 +130,94 @@ layui.use(['layer', 'table'], function(layer, table){
layui.use('demo', layui.factory('demo')); layui.use('demo', layui.factory('demo'));
``` ```
<h2 id="extend" lay-toc="">扩展模块</h2> <h2 id="extend" lay-toc="{hot: true}">扩展模块</h2>
`layui.extend(obj);` `layui.extend(settings);`
- 参数 `obj` 是一个对象，必选，用于声明模块别名。 - 参数 `settings` : 扩展模块的相关配置，如模块名、模块路径等。
除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）。 现在，让我们尝试着扩展一个 Layui 第三方模块： 除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块。我们在前文的「模块命名空间」提到，模块名具有唯一性，即不可被占用，因此我们扩展的模块必须是一个未被定义过的模块名。
1. **创建模块** 现在，让我们尝试扩展一个 Layui 第三方模块。
我们在前文的「模块命名空间」提到，模块名具有唯一性，即不可被占用，因此我们扩展的模块必须是一个未被定义过的模块名。假设为：`firstMod`，然后新建一个 `firstMod.js` 文件并放入项目的任意目录中（最好不要放入到 Layui 原始目录） ### 扩展遵循 Layui 规范的模块
2. **编写模块** 1. **创建模块和定义模块**
接下来我们开始定义 `firstMod` 模块，并编写该模块主体代码。 假设创建一个模块名为 `testModule` 的模块，新建 `testModule.js` 文件并放入项目的任意目录中（但应避免放入到 Layui 原始目录）。接着我们开始定义 `testModule` 模块，并编写该模块主体代码。
``` ```js
/** /**
* 编写一个 firstMod 模块 * 定义 testModule 模块
**/ **/
layui.define(function(exports){ // 也可以依赖其他模块 layui.define(function(exports){ // 也可以依赖其他模块
var obj = { var obj = {
hello: function(str){ hello: function(str){
alert('Hello '+ (str || 'firstMod')); alert('Hello '+ (str || 'TestModule'));
} }
}; };
// 输出 firstMod 接口 // 输出 testModule 接口
exports('firstMod', obj); exports('testModule', obj);
}); });
``` ```
3. **声明模块** 2. **声明模块和使用模块**
现在，我们只需声明模块名及模块文件路径，即完成模块扩展。 现在，我们只需声明模块名及模块文件路径，即完成模块扩展。
``` ```js
// 假设 firstMod 模块文件所在路径在： /js/layui_exts/firstMod.js // 假设 testModule 模块文件所在路径在：/js/layui_exts/testModule.js
layui.config({ layui.config({
base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录 base: '/js/layui_exts/' // 设置用于扩展模块的基础路径
}).extend({ }).extend({
firstMod: 'firstMod', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径 testModule: 'testModule', // 定义模块名和模块路径，会前置追加 base 基础路径
// mod2: 'mod2' // 可同时声明其他更多模块 // test1: 'test1' // 还可同时声明其他更多模块
}); });
// 也可以不继承 layui.config 的 base 路径，即单独指定路径 // 也可以不前置追加 base 基础路径，即设置单独路径
layui.extend({ layui.extend({
firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径 testModule: '{/}/js/layui_exts/testModule' // 开头特定符 {/} 即代表采用单独路径
}); });
// 然后我们就可以像使用内置模块一样使用扩展模块 // 然后我们就可以像使用内置模块一样使用扩展模块
layui.use(['firstMod'], function(){ layui.use(['testModule', 'test1'], function(){
var firstMod = layui.firstMod; var testModule = layui.testModule;
// var test1 = layui.test1;
firstMod.hello('World'); testModule.hello('World');
});
```
<h3 id="extend-external-modules" class="ws-anchor">扩展任意外部模块 <sup>2.11+</sup></h3>
我们在 `2.11.0` 版本新增了无缝扩展任意外部模块的支持，即无需遵循 Layui 模块规范的第三方库也能通过 Layui 去加载，并且无需对外部模块做任何的代码改动，只需在 `layui.extend()` 方法中声明模块名、路径和接口即可。
当声明的模块接受的是一个 `object` 类型时，即意味着声明任意外部模块。声明外部模块的对象由以下选项组成：
- `src` : 模块路径，可以是项目的相对路径，也可以是任意外部模块的公共 CDN 地址；
- `api` : 接口名称，通常是模块提供的全局对象
下面是一个扩展任意外部模块的示例：
```js
// 扩展任意外部模块
layui.extend({
marked: {
src: 'https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js', // 模块路径
api: 'marked' // 接口名称
},
Prism: {
src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
api: 'Prism'
}
});
// 加载扩展模块
layui.use(['marked', 'Prism'], function() {
console.log('任意外部模块 loaded: ')
console.log(' > marked: ', layui.marked);
console.log(' > Prism: ', layui.Prism);
}); });
``` ```