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. 各个组件只会在收到通知的状况下被下载，不会全都下载下来。

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