Archive for angularJS

谈谈AngularJS的优缺点以及如何取舍

AngularJS可以说是一个非常完美的JS框架。先通过这篇文章来看看AngularJS的几大特性 http://blog.csdn.net/vking_wang/article/details/8817232
文章总结了有这些特性

  • 特性一:双向数据绑定
  • 特性二:模板
  • 特性三:MVC
  • 特性四:依赖注入(Dependency Injection,DI)
  • 特性五:Directives(指令)

再来看看我之前写的一篇文章:https://www.queyang.com/blog/?p=419

想必如果你是一个最求时髦的前端攻城狮一定已经蠢蠢欲动,想在手上的项目里开始小试牛刀了吧。
但是,在上项目前,你务必要了知道AngularJS的脾性,其实在如今的网站实例中,还是有很多类型的不适用它的。那么先说说它比较合适使用的场景:

首先是网站的后台

网站的后台通常都是功能复杂、模块化比较清晰的页面,而且不需要考虑SEO相关的场景,另外就是对浏览器的要求不如前端那么苛刻,你的很多想法可以在后台里体现出来。不过就我了解的情况来看,后台大多是讲究实用的地方,不需要华丽的界面,不需要超前的技术,只要你能赶紧实现一些需求,并且大部分是和服务器、数据库打交道,所以这时候就没前端攻城狮什么事情了,除非你是即做后端又热爱后端的人,比如像我这样的,丑陋的后台是我受不了的。
所以这样来看,AngularJS在后台里只能算是一个配角角色,而且能不能用不是看前端而是看做后台的同学的前端水平了。

网站用户管理页面

这些地方的页面不需要SEO但是直接面对用户,所以还是相当重要的,如果能在这样的页面用AngularJS做好那一定是件非常令人激动的事情。不过现在很多网站的用户管理页面其实还是很薄弱,可能就寥寥几页,这样AngularJS就显得有点没有太大用处的赶脚,不过,如果像淘宝这样的用户中心或者是支付宝里的页面都用上AngularJS来处理页面,那肯定是很赞的。

web应用页面

Web应用页面是非常适合AngularJS使用的,同样不需要SEO,同样可以多方模块化加载,而且经常需要页面上的调整,这样就能够发挥AngularJS的优势了。

单页应用

这样的页面在最近些年开始流行了,所有的内容在单页里,然后分不同的情景呈现给用户,一次做好就不用多改了,这样的页面可以用AngularJS来做,不过貌似也体现不出什么太大的优势来。

那么有哪些场景不适合AngularJS的使用呢?

我个人觉得目前来说期望做较好SEO的页面还是不适合用AngularJS来做,如果你用它做好页面,一定要针对SEO来做一个供蜘蛛使用的页面,否则你页面就基本进不了搜索引擎的门了
当然了,解决方案其实还是有一些的,不过现在来说一来复杂,二来不成熟,也许过些年针对AngularJS的SEO的方案会越来越简单、成熟。

那么除了对SEO有要求的页面外,还有哪些页面不适合用AngularJS呢?答曰:类WEB1.0页面,这种像新浪、搜狐这样一个页面堆叠了N多内容的老古板的页面还是用用老技术来作吧,新玩意不适合他们,呵呵。
我甚至盯着我们公司的 http://www.verycd.com/ 的首页想了老半天,如果这个首页用AngularJS做会出现怎样的情况?
这个首页是由很多模块(部件)组成的一个页面,如果按照AngularJS的完全分离的做法,这个首页在打开时或许会有N多个模板、资源页面需要通过ajax来载入,届时可能不得不担心的就是异步请求太多了,一来会拖慢浏览器端的显示速度,而来会大幅增加服务器的负担。

总的来说,对于前端,不得不考虑模块化带来的各种负面问题,那就是页面需要成倍的增加连接数量。而我曾经在负责VeryCD时甚至会把几个css合并成一个文件来载入以加快页面载入速度,所以说,在前端是接受不了N多个CSS连接、js、模板分别请求的。

除了jQuery,你该用用 AngularJS 了

AngularJS http://www.angularjs.org/ 是google在几年前打造的一个全新的JS的框架,如今已经很成熟,它的理念完全颠覆了我曾经对js的使用习惯和理解。
在js的世界里,做前端的或许没有人不知道jQuery,然而如果你掌握了AngularJS,那么你会发现她是如此的完美和与众不同。

本篇文章不会谈及技术性的问题,旨在帮你引荐AngularJS,让你对它有个初步的认识

在谈及AngularJS有多好之前,我来说说在以前我们是怎么做的:
如果以前要制作一个网站,对于前端来说需要规划整体框架的HTML,然后是包括首页等等各种页面里的内嵌的页面,当我们制作好HTML页面后还得交由网站的程序开发把类似PHP这样的服务器代码嵌入到程序视图里,在这过程中也许前端制作好的HTML到程序那会变得面目全非,甚至页面出来后和制作的HTML有很大的差异,前端和后端甚至会打起来,orz…
项目在刚刚开始制作好后还不会有什么问题,但是随着时间的推移,项目需求的不断变化,甚至经历了N个开发人员的离职、入职等等,我们通常会发现现在的项目代码完全无法直视,各种风格的JS,各种不同风格的HTML标签,或许还夹杂着程序员完全不考虑美感的代码,在还没有类似Bootstrap这样的CSS框架之前甚至会出现各种不一样的HTML布局,各种重复的HTML等等。作为项目里的人看到这样的情况会怎么想,怎么做?答案是:只能重构。这是普遍存在的问题:HTML的不断调整、人员的变动、和程序配合的调整等等,使得传统的制作网站的方式如此不堪。

jQuery是一个非常优秀的DOM操作的类库,AngularJS其实也并不排斥jQuery,反而如果你在页面里加载jQuery后它的很多DOM操作都是依赖jQuery的(页面没有载入jQuery的话AngularJS内置jqlite),所以先请不要把jQuery和AngularJS作为对立面来理解,你可以把jQuery当做AngularJS处理DOM的一个强大的助手的关系。

那么今天有了AngularJS后,原先的工作方式会发生怎样的变化呢?
依靠AngularJS强大的MVC和数据绑定功能,我们的工作可以和服务器程序最大程度的分离,我们可以让程序完全只要提供数据即可,所有的逻辑和页面呈现完全由我们来控制,不管将来怎么改动,服务器程序只要改动他们的数据内容格式,前端就负责自己的指令控制部分和模板即可。
除了和服务器程序可以最大的分离工作,前端的设计理念也会发生很多变化:
你的关注的重点是如何编写自己的指令控制,如果编写控制器以便获取需要的数据并把数据通过模板显示出来。你可以制作很多指令集,然后每个不同的页面的模板引用相应的指令即可。这相当于你制作了很多零件,然后制作页面只要把这些零件进行拼装即可。
每一个指令可以配合一个模板,每个页面也可以有一个独立的模板和控制器,然后模板里可以定义好需要用到的HTML及指令,控制器主要处理页面内的一些独立逻辑。
这样项目完成后,将来不管怎么调整,我们只要分模块进行维护即可。

在没有接触AngularJS时,这些或许看上去一头雾水,我切身的体验是:AngularJS入门好难。确实好难,一开始找不到门路。初学者会带着传统的思想去使用AngularJS,但是这是错的,你必须用数据即显示,数据即一切的思想去使用它,你不用去操作DOM,所有要操作DOM的代码请封装在指令(directive)里,在页面的控制器里,只要操作数据的相关代码,这样,你就可以很容易入门了。

那么它都有哪些优点呢?下面我来简单的说说(其实在很多人的文章里也都有)

数据绑定

在AngularJS的世界里,和DOM打交道的东西都交给directive吧(在下面会讲),你在使用时,只需要关心js里的$scope里的数据,当变量中的数据发生变化时,对应的DOM也会能够体现出来。

变量注入

相关的文章其实也很多,理论方面可以讲一大篇文章,简单的说就是AngularJS通过一些机制可以把本来属于内部的(或局部)变量在你调用自己设置的function时可以把它们注入到你的function中,这样你就可以顺利使用这些变量,比如在AngularJS里常见的代码,其中$scope就是被注入的变量,你可以直接使用

function Controller($scope) {
    $scope.test = 132;
}

 

指令控制

不知有没有人用过jQuery Mobile?在它里面对代码的处理完全是属于传统的思想理念,但是在AngularJS里会变得相当不一样,这就激发了我们全新的HTML前端设计理念的改变。并且,在AngularJS里有非常多的内置的指令功能很好用,比如a,form,ngClick,ngSubmit 等等

MVC和CMD规范

AngularJS的mvc还是很赞的,很容易使用,而且它内置CMD规范,但是CMD规范只服务于它内置的功能,所以如果你和我一样会加载很多别的类库甚至希望把css也纳入到模块加载里,你可以考虑再加一个requirejs(http://requirejs.org/) 或者国内大牛们开发的seajs(http://seajs.org/)来加载类库和css

下面推荐一些不错的文章,可以帮你学习使用AngularJS

Angular 2.0的未来展望(翻译)