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

AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担。AngularJS将帮助标准化的开发web应用结构并且提供了针对客户端应用的未来开发使用的模板,AngularJS非常全面且简单易学习,AngularJS快速的成为了javascript的主流框架,帮助开发者专业的从事web开发。

一、Amazing的Angular

AnguarJS的一些特性

(1)方便的REST: RESTful逐渐成为了标准的服务器和客户端沟通的方式。使用一行javascript代码,你就可以快速的从服务器端得到数据。AugularJS将这些变成了JS对象,作为Model,遵循MVVM(model view view-model)设计模式。

(2)MVVM救星:这是一个技术,更是一个思想。Model将和ViewModel互动(通过$scope对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的代码。View可以通过$routeProvider对象来支配,所以你可以深度的链接和组织你的View和Controller,将他们变成导航URL。AngualrJS同时提供了无状态的Controller,可以用来初始化和控制$scope对象。

(3)数据绑定和依赖注入:在MVVM设计模式中的任何东西无论发生任何事情都自动的和UI通信。这帮助我们去除了wrapper,getter/setter方法或者class定义。AngularJS将帮助我们处理所有的这些内容,所以你可以处理数据像处理基本javascript数据类型。当然你也可以通过自定义处理复杂数据。正因为所有事情的发生都是自动的,所以你不必调用一个main()来执行你的代码,而是通过依赖关系来驱动。

(4)可扩展的HTML:大多数的网站都是使用非语义的<div>标签来搭建的。你需要自己在CSS的class中定义相关的DOM层次结构。而使用AngularJS,你可以操作XML一样操作HTML,给你无穷的方式来完成标签和属性定义。AngularJS通过自己的编译器和directives来完成相关的设置。而这也是组件实现的基石。

大家接触jQuery的时候发现,要做事先绑定,取回数据要塞回去,塞的过程都是要自己关心的。但是Angular,数据取回来只要注入变量自动完成了,包括事件绑定。数据绑定,MVVM、依赖注入让你觉得,原先要关心很多东西,现在都不需要关心了,只需更加关心数据结构和业务层,把我们从繁琐DOM绑定中解脱出来。(可在附录——AnguarJS使用前后对比——中查看到早期我用jQuery做的账号模块和后来用ng模式下的区别)

二、组件化之路

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

组件化及组件展现形式

组件化可以有很多事情可以做,比如模板化,现在模板化重任交到前端。第二个是公共样式库,第三公共函数库,一些业务组件,模块化特殊一点。

因此可以得出组件大概展现形式包括: 统一的样式库,具有一定HTML结构的代码片段,具有一部分JS控制的功能函数,具有一定数据输入和输出的控制。

 

三、揭开云组件的面纱

什么是云以及云组件

云服务是基于互联网的相关服务的增加、使用和交付模式,通常涉及通过互联网来提供动态易扩展且经常是虚拟化的资源。云是网络、互联网的一种比喻说法。过去在图中往往用云来表示电信网,后来也用来表示互联网和底层基础设施的抽象。云服务指通过网络以按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关,也可是其他服务。它意味着计算能力也可作为一种商品通过互联网进行流通。把云和组件二者结合则构成了云组件。

所以云组件,通过线上的资源,结合这个概念把这两个概念合在了一起就产生了这个概念。说到底是希望通过一个统一的控制的东西,把N个项目全部控制在一起。

个推的组件

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

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

这是个推云组件的技术方案。基于前端三大件和一些其他库,比如会有一些地理围栏的组件,需要让百度地图给我们整个项目对接起来,还有可视化的项目,比如G20那边人流怎么样,可视化项目会用到第三方库。我们用的是LESS写CSS。基于这些之上开发云组件。

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

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

基于gulp的打包

云组件展示站点

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

关于云组件的新的思考

基于云的理念是正向的牵一发而动全身,但实际上这个机制运用不好(比如一个老的组件更新出了个bug),便会打开了负面的牵一发动全身了,这时该怎么办?

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

所以,只有合理控制住才能真正发挥云组件的优势。

多个版本下,我们的开发模式便是就某个项目的云组件升级由该项目决定。因为如果云组件一发版,所有的项目都升级云组件那这个回测的代价就很高了,况且原有的云组件版本也是够之前已经上线的项目的当前版本用了。

个推的项目体系图

实际使用中的问题

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

四、经验之谈

第一、模块化:随时准备模块化抽象,这是一个动态的过程。 第二、多想想周边的,超过所止的部分 —— 换位思考,方便下游,倒推上游。 第三、没有实现不了的效果,只有承受不了的代价。第四、方法有很多,时间允许的话都可以试试。

时间: 2024-10-21 09:36:35

基于AngularJS的个推前端云组件探秘的相关文章

基于AngularJS的企业软件前端架构[转载]

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能

基于AngularJS的企业软件前端架构(LINK)

这是我关注AngularJS的原因,做企业软件的开发. 基于AngularJS的企业软件前端架构: http://www.ituring.com.cn/article/109771 基于AngularJS的企业软件前端架构(LINK)

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

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配

[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端

使用AngularJS为基于Elasticsearch的应用创建前端 如果使用Elasticsearch使用应用的数据源,我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端. 以创建一个简单的员工信息花名册为例. 准备工作 准备工作分为以下两个方面: 添加前端依赖 安装Bower 在bower.json中添加对于AngularJS和Elasticsearch的依赖: "dependencies": { "angular"

腾讯云首推私有云存储,意欲抢占更多用户市场

腾讯云首推私有云存储,意欲抢占更多用户市场 8月23日,腾讯云于2017腾讯"云+未来"峰会北京站,面向全球用户,重磅推出了智能云存储新品系列.其中,为给各行业领域提供更多能满足其私有存储需求的公有云服务,腾讯云特别推出了私有化存储CSP(Cloud Storage on Private),它以标准化.分布式的X86架构为基础,为客户提供机房私有部署.腾讯云机房专区部署两种方式,在满足客户多场景需求的同时,更保障其对系统100%的可控性. 直面市场挑战,腾讯云重拳出击 众所周知,公有云

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者.即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容.最常见的 百度(baidu.com).谷歌(google.com)等的搜索框就是这样来设计的.目的是为了给用户提供一个更好的输入体验. 在

基于angularJS的分页功能

先看分页效果图 是基于bootstrap的基本分页效果,样式可以先去查看boostrap文档熟悉. 在以angularJS中,像这种公共组件一般(也应该)写到公共directive中,下面可以下项目中怎么实现的. ①. 公共组件 pageDirective.js define(['angular'], function(angular) { //依赖angularJS,这里用到了requireJS,未使用者自行更改 var directives = angular.module("app.dir