模块化

模块相当于一个独立的命名空间，UIExtension将所有component、 controller和directive放置在不同的模块中，以此减少名称冲突的问题。目前，模块可使用在以下的场景中：

• 根模块: 基础组件和指令都放置在根模块下，根模块没有模块名，使用时不需要加模块名前缀。
• 业务模块：业务组件和controller。
• Addon创建的模块

详细的信息将会在 Components 相关章节中体现。

新建一个模块

const module = PDFUI.module('module-name', [
    // ...dependencies
]);

模块名称不可以重复，否则会报错。

第二个参数是依赖的模块，可以传名称或模块对象。如果没有依赖的模块，则可以传空数组，但不能不传。

获取模块对象

1. 获取根模块对象

   根模块是所有模块的基础，根模块包含所有内置的组件和布局等信息。

   const root = PDFUI.root();
   

2. 获取自定义模块对象

   和创建模块的方法一样，但没有第二个参数。当模块名不存在时会报错。

   const module = PDFUI.module('module-name');
   

模块对象上的方法

1. 注册新组件

   // 注册一个自定义控件。
   module.registerComponent(class ComponentClass extends UIExtension.Component{
       static getName() {
       return 'custom-component';
       }
   });
   // 或者
   module.registerComponent(UIExtension.Component.extend('custom-component', {
   //
   }));
   module.getComponentClass('custom-component');   
   

   在模板中使用自定义组件：

   <module-name:custom-component></module-name:custom-component>
   

2. 注册pre-configured组件

   module.registerPreConfiguredComponent('pre-configured-btn', {
       template: '<xbutton name="pre-configured-btn"></xbutton>',
       config: [{
           target: 'pre-configured-btn',
           callback: function() {
               alert('button click')
           }
       }]
   })
   

   在模板中使用组件

   <module-name:pre-configured-btn></module-name:pre-configured-btn>
   

3. 注册Controller

   module.registerController(class CustomController extends Controller {
       static getName() {
           return 'CustomController';
       }
       handle() {
           alert('')
       }
   });
   

   或者

   module.controller('CustomController', {
       handle: function() {
           alert('')
       }
   });
   

   在模板中使用controller

   <module-name:custom-component @controller="module-name:CustomController"></module-name:custom-component>