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

docs/modules.md

@@ -130,61 +130,94 @@ layui.use(['layer', 'table'], function(layer, table){
 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){ // 也可以依赖其他模块
   var obj = {
     hello: function(str){
-      alert('Hello '+ (str || 'firstMod'));
+      alert('Hello '+ (str || 'TestModule'));
     }
   };
 
-  // 输出 firstMod 接口
-  exports('firstMod', obj);
+  // 输出 testModule 接口
+  exports('testModule', obj);
 });
 ```
 
-3. **声明模块**
+2. **声明模块和使用模块**
 
 现在，我们只需声明模块名及模块文件路径，即完成模块扩展。
 
-```
-// 假设 firstMod 模块文件所在路径在： /js/layui_exts/firstMod.js
+```js
+// 假设 testModule 模块文件所在路径在：/js/layui_exts/testModule.js
 layui.config({
-  base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录
+  base: '/js/layui_exts/' // 设置用于扩展模块的基础路径
 }).extend({
-  firstMod: 'firstMod', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径
-  // mod2: 'mod2' // 可同时声明其他更多模块
+  testModule: 'testModule', // 定义模块名和模块路径，会前置追加 base 基础路径
+  // test1: 'test1' // 还可同时声明其他更多模块
 });
 
-// 也可以不继承  layui.config 的 base 路径，即单独指定路径
+// 也可以不前置追加 base 基础路径，即设置单独路径
 layui.extend({
-  firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径
+  testModule: '{/}/js/layui_exts/testModule' // 开头特定符 {/} 即代表采用单独路径
 });
 
 // 然后我们就可以像使用内置模块一样使用扩展模块
-layui.use(['firstMod'], function(){
-  var firstMod = layui.firstMod;
+layui.use(['testModule', 'test1'], function(){
+  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);
 });
 ```