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. 各個組件只會在收到通知的狀況下被下載，不會全都下載下來。

這樣在開發與維護中顯得特別方便。