# # 模块化

模块相当于一个独立的命名空间，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>