/jigsaw

Jigsaw-七巧板是基于Angular(4+)实现的组件集,它是中兴通讯大数据应用支撑组件 RDK 的下一代组件集。RDK被广泛应用在中兴大数据的各个产品,在国内外已有多个商用局。Jigsaw-七巧板这套组件最主要的设计目标是用于构建复杂、交互密集型页面。

Primary LanguageTypeScriptMIT LicenseMIT

Jigsaw-七巧板

npm version Build Status Coverage Status

名字的内涵

Jigsaw原意是七巧板,一种拼图游戏。游戏的过程和现代web页面开发过程很类似,游戏者按照既定的蓝图将杂乱的碎片组合成一幅图,我们使用这个名字正是为了让web页面开发者能够像玩Jigsaw游戏一样,边玩边开发你的页面。

组合是Jigsaw的灵魂,我们致力于将组合做到极致。

把若干组件按照一定的顺序排列&布局之后可以得到一个应用页面,这是通常意义上的组合,我们将这个层次的组合称归之为Level I。Level I 的组合把组件当做原子,不可再拆分。

Jigsaw的组件不再是原子,它对组件的功能进行了二次抽象,同时,允许组件的局部高度定制化,甚至有的组件做到完全的可定制化。小到类似jigsaw-button这样的基础组件,大到jigsaw-table这样的巨无霸组件,你看到的几乎每个UI元素,都是可以与其他组件再组合来覆盖其默认行为。原子组件是有限的,组合才能产生无限的可能。这里提到的定制化,换句话说,就是另一种形式的组合,我们将这个层次的组合归为Level II。

用Jigsaw,尽情释放你的想象力吧!

用法

全新的开始

我们强烈推荐使用 Jigsaw Seed 来作为新工程的开始。具体步骤为:

  1. 如果未安装nodejs,或者nodejs低于6.x.x,npm版本低于3.x.x,请先安装nodejs
  2. 下载或者clone Jigsaw Seed 的源码。假设保存到了 d:\jigsaw-seed
  3. 下载依赖包,执行如下脚本
cd d:\jigsaw-seed
npm config set proxy=http://proxy.zte.com.cn:80                          # 直连网络下不可执行这个命令
npm config set registry=https://registry.npm.taobao.org/                 # for Chinese developers only
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass # for Chinese developers only
npm install -g @angular/cli                                              # 强烈推荐,可选。
npm install
npm start
  1. 浏览器里打开 http://localhost:4200 如果看到欢迎页,表示你的开发环境搭建完毕。
  2. 后续直接在 d:\jigsaw-seed 目录下运行 npm start 命令就可以启动开发环境了。Jigsaw专门针对现代的IDE做了代码优化,让这些IDE可以精确提示更多的信息,节约你翻阅api文档的时间。我们推荐使用WebStorm作为IDE。

集成到已有工程中

具体过程请看这里

新手宝典

Jigsaw Tourist 是一个专门为新手准备的教学工程,它展示了从零开始如何使用jigsaw来构建一个难度中等的应用页面。单击这里,勇敢的迈出你在Jigsaw的第一步吧。

上手过程中有任何困难,请关注Jigsaw的官方微信公众号,在那里可以加入SOS群和我们开发者直接对话:

求星星!One More Star Please!

请随手赏个星星,这是对我们最好的鼓励!This is the best encouragement for us.

组件状态图

参与贡献

我们认为如下的行为都是在做贡献:

  • 默默的关注;
  • watch/star/fork 这个工程;
  • 给我们提bug/需求/建议
  • 给我们写写文档,写点小文章;
  • 更有效的是给我们推送PR,所有的PR我们都欢迎并会认真处理;
    • 请优先处理没有打 suspend 标签的issue
    • 这里是一份简单的代码规范,请尽量遵守它;

正在打算换工作?

加入我们,白菜价送套市区房子!位于宁双路楚翘城往东200m处。绝不是吹牛,我很认真!

  • 我们需要诺干有经验的前端工程师,他的主要职责是全职加入这个组件库的开发;
  • 我们需要诺干有经验的服务端工程师,他的主要职责是全职加入RDK后端的开发;
  • 详情点击这里