Build site with bricks
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
doc
src
tasks
tools
.gitignore
Gruntfile.js
LICENSE.md
README.md
brix.sublime-project
package.json

README.md

Brix

基于淘宝 Kissy1.3框架的一淘通用组件框架。

如何使用

<link type="text/css" rel="stylesheet" href="http://a.tbcdn.cn/apps/e/brix/2.0/brix-min.css" charset="utf-8">
<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script>
<script type="text/javascript" src="http://a.tbcdn.cn/apps/e/brix/2.0/brix-min.js" bx-config="{autoPagelet:true}"></script>
<script type="text/javascript">
    //业务代码,自动构建
    KISSY.ready(function(S){
        //pagelet自动构建完成
        Brix.ready(function(){
            //pagelet的实例
            Brix.pagelet.ready(function(){
                //拿到组件实例
                var brick = Brix.pagelet.getBrick('#id');
            });
        });
    });
</script>

组件库核心

  • brix.js : 框架的配置入口类
  • chunk.js : brick.jspagelet.js 类的父类
  • tmpler.js : 模板解析类,用 xtemplate 渲染。
  • dataset.js : 数据管理类,数据变化时,通知模板引擎更新
  • brick.js : 组件基类,所有组件继承此类
  • pagelet.js : 组件管理器,对组件实现渲染
  • demolet.js : demo组件管理器,根据业务组件的data.json和template.html显示预览

类关系图

Brix 类关系图

组件钩子

  • bx-name : 组件名称
  • bx-path : 组件地址,一般是包名 + 文件路径,核心组件可以省略配置
  • bx-config : 组件配置,动态渲染时候的参数
  • bx-tmpl : 组件模板,这个钩子和 bx-datakey组合使用,在数据更新时对模板重新渲染。具体写法详见: core/brix.html
  • bx-datakey : 组件数据对象 key 值,可以有多个 key,以 , 分割,且支持对象的子对象,如 “X.Y,Z.Y.X”

开发环境需求

开发

git clone git://github.com/etaoux/brix.git
cd brix

# If you have installed Grunt globally in the past, you will need to remove it first
npm uninstall -g grunt

# 安装 Grunt
npm install -g grunt-cli

# 以及插件模块
npm install

# 使用 Grunt 运行自动监视文件变化编译
grunt

目录结构

  • demo : 组件开发的demo目录,一般存放静态的html文件,名称以组件名命名。
  • dist : 工具打包生成的目标目录,不用人为进行编辑。
  • src : 源文件目录,你懂的;组件存放在gallery,再以组件名命名的组件目录,组件的js文件是以index.js命名,如下拉框组件:gallery/dropdown/index.js
  • tasks : 存放打包脚本目录
  • tools : 辅助工具目录

说明

  • 组件开发使用一般使用到src, demo两个目录, src是组件的源代码目录,进入目录后,再选择gallery还是style,同时开发时的demo文件存放在demo目录,对应gallery或style。这两个目录是直接提交到master分支。
  • 文档是在gh-pages-source分支,主要是操作_post目录,gallery组件直接放在_post/gallery目录下; style放在_post/style目录下。
  • gh-pages-source分支下不要去修改src与demo目录,提交也是无效的。
  • 组件中使用到的图片,都传到tps中,项目中直接使用链接地址。