基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架，他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计的，它很是全面且简单易学习，所以AngularJS快速的成为了javascript的主流框架。

1、Amazing的Angular

AnguarJS的特性

方便的REST： RESTful逐渐成为了一种标准的服务器和客户端沟通的方式。你只需使用一行javascript代码，就能够快速的从服务器端获得数据。AugularJS将这些变成了JS对象，做为Model，遵循MVVM(modelview view-model)设计模式。

MVVM救星：Model将和ViewModel互动（经过$scope对象），并监听Model的变化。能够经过View来发送和渲染，由HTML来展现代码。View能够经过$routeProvider对象来支配，因此你能够深度的连接和组织你的View和Controller，将他们变成导航URL。AngualrJS同时提供了无状态的Controller，能够用来初始化和控制$scope对象。

数据绑定和依赖注入：在MVVM设计模式中的任何东西不管发生任何事情都自动的和UI通讯。这帮助咱们去除了wrapper，getter/setter方法或者class定义。AngularJS将帮助咱们处理全部的这些内容，你能够处理数据像处理基本javascript数据类型般。固然你也能够经过自定义处理复杂数据。正由于全部事情的发生都是自动的，因此你没必要调用一个main()来执行你的代码，而是经过依赖关系来驱动。

可扩展的HTML：大多数网站都是使用非语义的<div>标签来搭建的。你须要本身在CSS的class中定义相关的DOM层次结构。而使用AngularJS，你能够像操做XML同样操做HTML，有无穷的方式来完成标签和属性定义。AngularJS经过本身的编译器和directives来完成相关的设置，而这也是组件实现的基石。

你们接触jQuery的时候发现，要作事先绑定，取回数据要塞回去，塞的过程都是要本身关心的。可是利用Angular，数据取回来只要注入变量自动完成了，包括事件绑定。数据绑定，MVVM、依赖注入让你以为，原先要关心不少东西，如今都不须要关心了，只需更加关心数据结构和业务层，它把咱们从繁琐DOM绑定中解脱出来。

2、组件化之路

组件是对数据和方法的简单封装，在此样式类，指令型等具有UI效果的组件，方法等统称组件。在大型软件中，组件化是一种共识，它一方面提升了开发效率，另外一方面下降了维护成本。

组件化及组件展示形式

组件化能够有不少事情能够作，好比模板化，如今模板化重任交到前端。第二个是公共样式库，第三公共函数库，一些业务组件，模块化特殊一点。

组件大概展示形式包括： 统一的样式库，具备必定HTML结构的代码片断，具备一部分JS控制的功能函数，具备必定数据输入和输出的控制。

3、揭开云组件的面纱

云以及云组件概念

云是网络和互联网的一种比喻说法。过去每每用云来表示电信网，后来也用来抽象地表示互联网和底层基础设施。

云服务指经过网络以按需、易扩展的方式得到所需服务。这种服务能够是IT和软件、互联网相关，也但是其余服务。它意味着计算能力也可做为一种商品经过互联网进行流通。把云和组件两者结合则构成了云组件。说究竟是但愿经过一个统一的控制的东西，把N个项目所有控制在一块儿。

个推的组件类型

个推的组件类型包括样式类组件、指令型组件、服务型组件、公共过滤器、公共函数库等。

从组件分类里能够发现专属CSS是样式类组件，加上模板就是很是简单的组件，再把加控制器放进去，就是前面讲的具备必定JS和必定逻辑的组件，把link加进去，带了动画，数据层加进去就具有必定的输入输出能力。这个数据层可能包含多种，有多是跟你的页面控制器交互，也有可能这个组件很是强，本身直接与服务端通讯获取数据和传递数据（固然实际实践中可能前者更合适当前咱们的环境，后者对统一的接口要求会更高）。

上图是个推云组件的技术方案。基于前端三大件和一些其余库好比地理围栏的组件（须要让百度地图给咱们整个项目对接起来），还有可视化的项目，好比G20期间杭州某景区人流状况，可视化项目会用到第三方库。个推利用LESS写CSS，基于这些开发云组件。

根据云组件的一些状况个推得出它的最佳实践对象就是从具备必定通用交互的表格表单类的管理型系统出发，逐渐包含复杂交互的系统应用，并对响应式具备必定的支持。个推是从作推送服务开始，以后有不少产品线。推送服务就会有不少2B、2C的平台，这就是管理型的。

上图是个推云组件采用的目录结构，用的是gulp打包，CSS里面有wd文件夹，主要放了一些第三方的库。更关键主要仍是下面，JS也是同样，wd是基础库。第五个是最重要的，全部组件都放在这个文件夹下，每一个组件包含本身专属的三大件——模板、逻辑、交互、效果和样式。

基于gulp的打包

云组件展现站点

云组件的使用人员主要分为三大类，第一类是前端使用者（包括泛前端人员），他们须要学习如何使用，快速用组件（须知道Angular的一些基本概念和用法）。第二类是UI设计师、项目和产品等，他们须要观察效果是不是适合的，根据库去设计新的此类系统。第三类是游客和其余人员。

关于云组件的新的思考

云组件牵一发会动全身，若是云组件机制运用很差好比一个老的组件更新出了个bug，会产生不少负面影响，这时该怎么办？

回到云的初始之处咱们不难发现，当资源隔绝便不会产生这种影响了（云组件正是利用其反向思惟达到的便捷），那么咱们相对将云组件资源封闭即可以下降这个影响了。这即是版本控制，不一样项目引用相应的云，以达到刚才讲的二者之间的平衡，从而成效最优化。

因此，只有合理控制住才能真正发挥云组件的优点。

多个版本下，咱们的开发模式即是就某个项目的云组件升级由该项目决定。由于若是云组件一发版，全部的项目都升级云组件那这个回测的代价就很高了，何况原有的云组件版本也是够以前已经上线的项目的当前版本用了。

个推的项目体系图

 

实际使用中的问题

云组件的发版有必定的周期性，但实际项目中的需求要快速响应，这时须要采用云组件扩展模块（模式）开发：基于云组件开发本项目的组件级别的模块，对云组件进行扩展或者项目化定制。

4、关于AngularJS的经验与总结

第1、模块化：随时准备模块化抽象，这是一个动态的过程。 第2、多想一想周边的，超过所止的部分 —— 换位思考，方便下游，倒推上游。第3、没有实现不了的效果，只有承受不了的代价。第4、方法有不少，时间容许的话均可以试试。