Brix应用层组件框架

Brix 是基于 KISSY（PC端）和 Zepto、SeaJS 等（移动端）底层类库的应用层组件框架。 目标是打造面向前台展示型业务、后台管理型业务、移动高端版业务的通用且易用的一淘UX前端组件平台。

Brix 来自 一淘 UX，即 Bricks 的谐音。

总体设计

Brix完成了三个大的目标：

• 组件开发规范的确立

• 组件初始化和销毁的管理

• 组件、模块基于数据驱动的局部刷新

Brix让行为和结构分离，无论是webapp类型的项目，还是传统的jsp php页面，组件的渲染形式和管理方式都是统一的。

Brix 对组件和区块做了统一的初始化和销毁，使用者不再需要关心组件的实例化问题，我们来看看基于传统开发和基于Brix开发会有什么不同呢？

传统实现

KISSY.use('brick1path,brick2path，……，brickNpath',function(S,Brick1,Brick2，……,BrickN){
    var config1 = {}//config1是Brick1组件需要的配置
    var brick1 = new Brick1(config1)
    var config2 = {}//config2是Brick2组件需要的配置
    var brick2 = new Brick2(config2)
    ……
    var configN = {}//configN是BrickN组件需要的配置
    var brickN = new BrickN(configN)
    //组件间的交互
    brixck1.on('eventtype',function(){
        brick2.dosomething()
    })
    ……
    brixck2.on('eventtype',function(){
        brickN.dosomething()
    })
})

大家一定很习惯这样的用法，而且感觉结构也很清晰。

那么，如果引入Brix，又会怎样？

Brix实现

KISSY.use('brix/app',function(S,App){
    // 所有组件的配置
    var config = {
        el:'#id'//提供一个容器节点
    }
    App.boot(config).once('ready',function(brix){
        //brix就是实例化出来的根组件，并有父子关系。
        var brick1 = brix.one('brick1') //获取组件实例
    })
})