Giter VIP home page Giter VIP logo

missjanewj / jigsaw Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rdkmaster/jigsaw

0.0 0.0 0.0 23.92 MB

Jigsaw七巧板 provides a set of web components based on Angular4+, it is the next generation of web component set of RDK which supports developing of all applications of Big Data Product of ZTE. The main purpose of Jigsaw is to help the application developers to construct complex & intensive interacting & use friendly web pages.

Home Page: http://rdk.zte.com.cn/jigsaw

License: MIT License

HTML 8.31% TypeScript 70.28% CSS 8.90% JavaScript 12.29% Shell 0.23%

jigsaw's Introduction

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后端的开发;
  • 详情点击这里

jigsaw's People

Contributors

rdkmaster avatar hpyou avatar zhongzhong0505 avatar angular-cli avatar damoqiongqiu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.