哈哈小老虎's Blog

TBra — taobao UED自主开发的一款基于YUI的JS库(详细介绍可查看官方blog).

和YUI相比, TBra属于轻量级的, 但它的架构方式和其中使用的设计模式, 却很值得学习, 在此, 我分享一下我所领会到的东西…

一. TBra的架构

分析：我认为, TBra采用了组件化的设计方式(如组件类TB.widget, TB.util), 每个组件下有许多模块(如TB.widget.SimplePopup, TB.util.Indicator), 这些模块分别实现不同的功能且彼此独立，删除或增加某一个模块, 不会对其他模块产生影响. 这就使得各个模块之间可以单独开发，单独测试, 大大降低了代码的耦合性.

二. TBra中模块的设计模式

以TB.widget.SimpleTab为例:
TB.widget.SimpleTab = new function() {
    var Y = YAHOO.util, Dom = Y.Dom, Event = Y.Event, Lang = Y.Lang;
    var defConfig = {...}; // 默认的配置参数
    this.decorate = function(container, config) {
        ...
        /* 返回给调用者的控制器，只包含对调用者可见的方法/属性 */
        var handle = {};
        ...
        return handle;
    };
};

TBra中, 几乎所有的模块都使用了这样的设计模式, 各模块的代码结构都是相似的: (1) 都有一个”默认配置参数”–defConfig; (2) 都通过decorate方法来激活模块, 如TB.widget.SimpleTab.decorate(container, config); decorate方法被调用后, 都会返回一个handle对象.

我认为这样的设计, 有两个好处: (1) 封装性很好 — 通过handle的方式, 只返回了对调用者可见的方法/属性; (2) 代码很友好 — 由于每个模块的代码风格都是一样的, 对于学习者来说, 降低了认知难度(只要熟悉了一个模块, 再学习其他模块, 就会容易许多).

TBra是开源的, 这里有它的SVN地址, 或者直接查看TBra源码文件