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


Posted in Javascript onOctober 20, 2016

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

一、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绑定中解脱出来。

二、组件化之路

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

组件化及组件展现形式

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

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

三、揭开云组件的面纱

云以及云组件概念

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

云服务指通过网络以按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关,也可是其他服务。它意味着计算能力也可作为一种商品通过互联网进行流通。把云和组件二者结合则构成了云组件。说到底是希望通过一个统一的控制的东西,把N个项目全部控制在一起。

个推的组件类型

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

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

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

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

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

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

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

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

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

基于gulp的打包

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

云组件展示站点

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

关于云组件的新的思考

云组件牵一发会动全身,如果云组件机制运用不好比如一个老的组件更新出了个bug,会产生很多负面影响,这时该怎么办?

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

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

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

个推的项目体系图

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

实际使用中的问题

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

四、关于AngularJS的经验与总结

第一、模块化:随时准备模块化抽象,这是一个动态的过程。

第二、多想想周边的,超过所止的部分 —— 换位思考,方便下游,倒推上游。

第三、没有实现不了的效果,只有承受不了的代价。

第四、方法有很多,时间允许的话都可以试试。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript 回调函数详解
Nov 11 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
分享javascript、jquery实用代码段
Oct 20 #Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 #Javascript
纯JavaScript手写图片轮播代码
Oct 20 #Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
Javascript实现图片懒加载插件的方法
Oct 20 #Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 #Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 #Javascript
You might like
php&amp;java(一)
2006/10/09 PHP
?繁体转换的class
2006/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue+iview+less 实现换肤功能
2018/08/17 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python 使用多属性来进行排序
2019/09/01 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
高三自我鉴定范文
2013/10/19 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android