基于AngularJS前端云组件的最佳实践

AngularJS是谷歌设计开发的前端开发框架，可以帮助开发者更方便地进行前端开发。AngularJS旨在克服HTML在构建应用程序时的缺点。它全面、简单、易学，因此AngularJS很快成为javascript的主流框架。

第一，神奇的棱角分明

英语的特点

便捷REST: RESTful逐渐成为服务器和客户端之间的标准通信方式。您只需要使用一行javascript代码就可以快速从服务器获取数据。AugularJS将这些转换成JS对象作为模型，并遵循MVVM(modelview视图-模型)设计模式。

MVVM救世主：模型将与视图模型交互(通过$scope对象)并倾听模型的变化。可以通过View发送和渲染，代码用HTML显示。视图可以由$routeProvider对象控制，因此您可以将视图和控制器进行深度链接和组织，并将它们转化为导航URL。AngualrJS还提供了一个无状态控制器，可以用来初始化和控制$scope对象。

数据绑定和依赖注入：无论发生什么，MVVM设计模式中的一切都会自动与用户界面通信。这有助于我们摆脱包装器、getter/setter方法或类定义。AngularJS将帮助我们处理所有这些内容，您可以像处理基本的javascript数据类型一样处理数据。当然，您也可以自定义复杂的数据。因为一切都是自动发生的，所以您不必调用main()来执行代码，而是通过依赖项来驱动它。

可扩展HTML:大多数网站都是用非语义div标签构建的。您需要自己在CSS类中定义DOM层次结构。使用AngularJS，您可以像操作XML一样操作HTML，并且有无穷无尽的方法来定义标签和属性。AngularJS通过自己的编译器和指令完成相关设置，这是组件实现的基石。

当你接触到jQuery的时候，发现需要提前做绑定，检索数据，推回，需要关心插拔的过程。但是，使用Angular，只要注入变量(包括事件绑定)，数据检索就会自动完成。数据绑定、MVVM和依赖注入让你觉得需要关心很多事情，但是现在只需要更加关注数据结构和业务层，这样就把我们从繁琐的DOM绑定中解放出来了。

第二，组件化之路

组件是一个简单的数据和方法包。这里，样式类、指令类型、方法等具有UI效果的组件统称为组件。在大型软件中，组件化是共识，一方面提高了开发效率，另一方面降低了维护成本。

组件化和组件表示形式

组件化可以做很多事情，比如模板化，现在模板化的责任交给了前端。第二个是公共风格库，第三个是公共函数库，一些业务组件，模块化比较特殊。

组件的一般呈现形式包括：统一样式库、具有一定HTML结构的代码片段、一些JS控制的函数、一定的数据输入输出控制。

第三，揭开云组件的面纱

云和云组件概念

云是网络和互联网的隐喻。过去，云经常被用来表示电信网络，后来它也被用来抽象地表示互联网和底层基础设施。

云服务是指通过网络以按需和可扩展的方式获取所需的服务。这种服务可以与信息技术和软件、互联网或其他服务相关。这意味着计算能力也可以作为商品通过互联网流通。云和组件的结合构成了云组件。归根结底，希望通过统一管控，把所有N个项目一起管控。

推送的组件类型

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

从组件分类中可以发现，独占CSS是一个样式组件，模板是一个非常简单的组件，然后放入控制器，也就是带有一定JS和一定逻辑的组件，链接中加入动画，数据层有一定的输入输出能力。数据层有很多种，比如和你的页面控制器交互，或者这个组件很强大，直接和服务器通信来获取和传输数据(当然实际上前者可能更适合我们现在的环境，而后者对统一接口的要求更高)。

上图是推送云组件的技术方案。基于前端三块和其他一些库，比如geofence组件(我们需要百度地图连接整个项目)，还有可视化项目，比如G20期间杭州某景区的人流，可视化项目会使用第三方库。用LESS编写CSS，并在此基础上开发云组件。

根据云组件的一些情况，推断其最佳实践对象是从具有一定通用交互的表单类管理系统开始，逐步包括复杂的交互系统应用，并对响应有一定的支持。推送从做推送服务开始，然后有很多产品线。推送服务会有很多2B和2C平台，是托管的。

上图是推送云组件采用的目录结构，采用大口打包。CSS中有wd文件夹，主要包含一些第三方库。关键是下面，JS也是，wd是基础库。第五是最重要的。所有组件都放在这个文件夹中，每个组件包含自己的三大块：——模板、逻辑、交互、效果和样式。

基于大口的包装

云组件展示网站

云组件的用户主要分为三类。第一类是前端用户(包括泛前端用户)，需要学习如何使用和快速使用组件(需要了解Angular的一些基本概念和用法)。第二类是UI设计师、项目和产品等。他们需要观察效果是否合适，并根据库设计新的这样的系统。第三类是游客和其他人员。

对云组件的新思考

云成分会影响全身。如果云组件机制使用不好，比如一个老组件更新一个bug，会有很多负面影响。这个时候该怎么办？

回到云的开始，不难发现，当资源被隔离时，这种影响是不会发生的(云组件利用自己的逆向思维很方便)，所以我们可以通过相对关闭云组件的资源来减少这种影响。这就是版本控制，不同的项目参考对应的云，从而达到刚才提到的两者之间的平衡，从而优化结果。

因此，只有合理控制，才能充分发挥云组件的优势。

在多个版本下，我们的开发模式是一个项目的云组件升级由项目决定。如果云组件发布了，所有项目都升级了云组件，那么这次回测的成本会非常高。此外，云组件的原始版本对于之前启动的项目的当前版本来说已经足够了。

个人推送项目系统图。

实际使用中的问题。

云组件的发布有一定的周期性，但实际项目需要快速响应。此时需要采用云组件扩展模块(模式)开发：基于云组件开发本项目的组件级模块，将云组件作为项目进行扩展或定制。

4.AngularJS的经验和总结。

第一，模块化：随时做好模块化、抽象化的准备是一个动态的过程。

第二，多考虑周边地区，多考虑——那部分，方便下游，把上游向后推。

第三，没有高不可攀的效果，只有难以承受的代价。

第四，方法很多，时间允许的话可以试试。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。