Skip to content
This repository has been archived by the owner on Apr 9, 2024. It is now read-only.

etaoux/brix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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中,项目中直接使用链接地址。