Need help with brix?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

etaoux
127 Stars 52 Forks MIT License 1.1K Commits 15 Opened issues

Description

Build site with bricks

Services available

!
?

Need anything else?

Contributors list

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.