UI组件加载方式D探讨

最新推荐文章于 2025-09-12 14:21:37 发布

转载最新推荐文章于 2025-09-12 14:21:37 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000003766399

文章标签：

#ui #后端 #前端 #ViewUI

本文详细阐述了如何在实际项目中利用异步加载机制，将UI组件、功能组件与业务功能分离，通过引入唯一接口TZUI来简化后端工程师的工作，并确保组件按需加载，从而提高开发与维护效率。

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这个组件下载下来。

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

后端工程师只需要知道 TZUI 这个接口
各个组件只会在收到通知的情况下被下载，不会全都下载下来。

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