GEAR

Gear意为齿轮，本项目主要是从渲染层提供一种业务开发新思路。

前端框架有很多种，我自己将所有的前端框架分为两类：开发类框架和业务类框架。GEAR正是为业务而生。前端的生命线莫过于网页的加载与渲染。Gear主要从加载和渲染的角度来提供业务开发的工作流，它分为两种模式：制作页面和渲染页面。

制作页面模式: Gear会加载配置好的组件库，同时页面会进入编辑模式，用户可以编辑页面，可以改变展示形态。

渲染页面模式：Gear会加载设计好的数据模型展示渲染页面。这部分会对性能和接口做出对应优化。

Gear整体的思想是一种前端开发解决方案，采用它可以最大程度降低开发成本，提升开发效率，加速迭代业务的开发，这是一种整体的战略布局，借助Gear编辑和渲染一体化的平台，大家可以做的事情很多，前端开发同学可以一边歇歇了！

试用地址：http://gear.haomou.net/dist/#/project

GIT: https://github.com/chalecao/gear

喜欢给我点亮星星哦！

介绍

整体的设计思想：(Gear工作流程图如下)

项目中集成的思路，主要分两种：

1. 直接集成到项目中，采用Gear来渲染项目页面
2. 导出HTML/CSS/JavaScript代码到项目中，项目中保留原有渲染方式

上面这两种方式Gear都可以做到，我之前的思路也一直是导出代码的方式，例如我做的工具CMP(https://github.com/chalecao/cmp )，基本就是导出代码的思想，后来在实际工作中发现会有很多人工维护的工作成本，所以不建议采用这种导出代码的方式。

集成到项目中的使用方式比较推荐，有很多可以优化的工作，比如页面加载速度的提升，页面渲染效率的提升，甚至还支持页面热修复（妈妈再也不用担心我在半夜修bug了）。

用户群体

Gear面向用户群体：策划，交互，视觉，运营甚至是开发同学。Gear系统比较适合做运营活动、营销页面，支持线上即时修改、即时效果预览、即时发布等特性。

Gear的学习成本比较低，策划和交互基本不用学习就能用Gear做出交互原型，视觉可以在Gear平台上补充视觉内容，最后如果功能不是很复杂，运营同学只要学习如何补充业务逻辑（当然后端接口采用通用数据接口），然后发布上线就可以了。这个闭环是不是很漂亮，开发哥哥们都乐了。

基于Gear的工作流程如下：

直接在线使用，所有数据默认保存在本地，也可以将数据导出分享给他人或者备份。

约定

1.元素可编程属性

programTxt属性指定了可编程字段，格式: special.src

2.绑定事件 在action属性中操作，数据格式如下：

click@searchTerm(form-termId)>searchTable

其中：事件名： click

关联元素名称(kid): searchTerm

参数关联元素名称(kid): form-termId

回调数据处理接收关联元素: searchTable (根据可编程属性来关联返回值)

使用方法

可以参考dist目录中标准示例，默认不开启编辑模式，开启编辑模式方式：按住ctrl键 + body上点击鼠标左键，打开编辑模式的快捷键支持自定义。

todo list

1. 单页系统由于Gear本身占用了HASH，所以SPA的支持采用HASH后面加query参数，这样需要Gear类处理这些参数

特性

1. 新增Cache元素类型，用于处理请求
2. 新增Action元素类型，用于处理数据，目前采用JS代码处理，类似管道操作，可以用于对接数据字段名称，是的接口的结果和关联元素的关联返回值一致。
3. 新增函数类型，函数目前支持For和If，可以用来处理一些逻辑。
4. 嵌套层级结构支持。
5. 页面级别组件和通用组件支持。可以直接被引用。
6. 增加单页（SPA）支持, 在页面组件栏目中可以创建多个page类型页面