UI组件加载方式D探讨

UI组件的加载方式探讨

开发模式

• 前端工程师（通用组）负责ui组件、功能组件制作

• 后端工程师（业务组）负责使用（通用组）开发的组件完成业务功能

在实际项目中，所有的ui组件都会被统一封装到一个接口模块中，假设这个接口是 TZUI 。

使用的seajs来异步加载模块，$.Deferred方法来延迟调用。

它的使用方式：

//创建一个导航标签实例
TZUI.createTabNav(config).done(function(tabNav) {
  //tabNav 是TabNav的实例
}

//创建一个手风琴面板实例
TZUI.createAccordion(config).done(function(accordion) {
  //accordion 是 Accordion 的实例
})

//另一种写法
var dialogPromiss = TZUI.createDialog(config);
//some code ...
dialogPromiss.done(function(dialog) {
  dialog.show();
})

这是一个异步加载的ui组件。

这样做的一个好处是，后端工程师只需要引入一个接口

var TZUI = require('tzui');

不需要关心具体组件的位置。

使用异步加载的原因

• 系统所有ui组件只有唯一的一个ui接口（TZUI）

• ui组件是模块化的，分散在各个文件中。基本上是一个ui组件是一个js文件。

• 异步的方式可以保证只加载自己需要的组件。

在 TZUI 这个接口中的代码：

var TZUI = {},
    $ = require('$');

//使用延迟对象和seajs的异步加载来完成。
TZUI.createAccordion = function(config) {
  return $.Deferred(function(dfd) {
    //异步加载
    require.async('accordion', function(Accordion) {
      //延迟调用
      dfd.resolve(new Accordion(config));
    });
  })
}

TZUI.createTabNav = function(config) {
  return $.Deferred(function(dfd) {
    //异步加载
    require.async('tabnav', function(TabNav) {
      //延迟调用
      dfd.resolve(new TabNav(config))
    })
  })
}

module.exports = TZUI;

而这个组件的位置是：

'accordion': 'widget/accordion/1.3.4/accordion',
'tabnav': 'widget/tabnav/1.2.3/tabnav'

这样就可以保证我在只需要使用tabnav这个组件的时候，不会把accordion这个组件下载下来。

以上是我在实际项目中的解决方案，目的有两个

1. 后端工程师只需要知道 TZUI 这个接口

2. 各个组件只会在收到通知的情况下被下载，不会全都下载下来。

这样在开发与维护中显得特别方便。