brix

by etaoux

etaoux / brix

Build site with bricks

127 Stars 52 Forks Last release: Not found MIT License 1.1K Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Brix

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

如何使用


组件库核心

  • brix.js : 框架的配置入口类
  • chunk.js :
    brick.js
    pagelet.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中,项目中直接使用链接地址。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.