Axiu Blog
算太多,但是拿jQuery搞DOM元素还是蛋疼的很,每天都晕晕的。于是琢磨着选一个前端框架来玩玩。对比ExtJS、BackboneJS、AngularJS等等,最后选了一个“学习曲线陡峭”的AngularJS,谷歌虽然埋掉很多产品,但是偶尔发布出来的框架还是比较好用且可借鉴的(比如cts)。 先大概使用了一下1.x(AngularJS 2跨度有点猛,超前的
项目所需,加上有那么一点前端(html、css和少量的jQuery)经验,所以就硬被安排客串了一把前端工程师。UI已经用了Bootstrap,项目主要内容就是CRUD(Create、Read、Update、Delete),虽然刚开始内容并不算太多,但是拿jQuery搞DOM元素还是蛋疼的很,每天都晕晕的。于是琢磨着选一个前端框架来玩玩。对比ExtJS、BackboneJS、AngularJS等等,
项目所需,加上有那么一点前端(html、css和少量的jQuery)经验,所以就硬被安排客串了一把前端工程师。UI已经用了Bootstrap,项目主要内容就是CRUD(Create、Read、Update、Delete),虽然刚开始内容并不算太多,但是拿jQuery搞DOM元素还是蛋疼的很,每天都晕晕的。于是琢磨着选一个前端框架来玩玩。对比ExtJS、BackboneJS、AngularJS等等,
AngularJS 1.x简单体验
Max

项目所需,加上有那么一点前端(html、css和少量的jQuery)经验,所以就硬被安排客串了一把前端工程师。UI已经用了Bootstrap,项目主要内容就是CRUD(Create、Read、Update、Delete),虽然刚开始内容并不算太多,但是拿jQuery搞DOM元素还是蛋疼的很,每天都晕晕的。于是琢磨着选一个前端框架来玩玩。对比ExtJS、BackboneJS、AngularJS等等,最后选了一个“学习曲线陡峭”的AngularJS,谷歌虽然埋掉很多产品,但是偶尔发布出来的框架还是比较好用且可借鉴的(比如cts)。

先大概使用了一下1.x(AngularJS 2跨度有点猛,超前的过多),创建了一些方法并用在项目上。总体感觉

非常适合做CRUD类型的web应用,其他要求强交互的就不行了。

后台要写好多代码,页面倒是削减了有一多半的代码量。

IE10以上以及FF、Chrome等支持较好,IE6~9不能支持100%的功能。

思维和习惯转换

从Java转到AngularJS,路线并不算陡峭,因为controller/Service、依赖注入、数据绑定这些概念,基本看一下就能理解。但是从jQuery转到AngularJS,还是要花很多心思的。不像jQuery,提供了一整套可供调用的API(所以拿jQuery写更像在查字典做翻译),AngularJS提供了一套的完整框架,他的目的很明确,解决CRUD类型的应用问题,并且把如何解决问题的方法也全部放在那里“OK,我这就是最好的方法,你就按这个来”。

除了思维转换,另外就是“写作”习惯,jQuery用户已经很习惯操作DOM了,比如隐藏个元素、划入划出,但是转过来Angular,就要改用MVC的方式进行,页面数据绑定,后台也是各种数据Model。当然,在html里还需要增加许多的自定义标签,这也是AngularJS标语“HTML enhanced for web apps!”的理由之一。如果你之前接触过jstl,会发现他们有很大程度的相似性,看一下语法,然后把你的html前台页面当成简单的后台就可以了,基本的循环、判断等语法逻辑是完全没问题的。

可能前期准备的内容有点多,但是,当把后台的controller、service之类的搞定之后,页面内容就相当简单且有一点神奇了:像绑定了js事件一样的即时更新。这得益于双向数据绑定,啥是双向绑定呢?

AngularJS

在Model–View中使用了同名的变量并保持同步,这样,前台对View的更改,直接可以影响到Model后台更新,同样,Model的更改也会实时改变View的内容。在做一些增删改查的动作,比操作单个元素显得方便和直观很多了,另外,一些过滤、排序也是特别简单。

依赖注入(Dependency Injection)

Angular中使用依赖注入(DI)很普遍。DI是一种设计模式,简单来说,一些服务,不必等用到的时候自己去初始化,或者自己取singleton,由系统决定什么时候执行这些,你只需要告诉它“我要用这个”,由系统决定依赖关系和初始化方式。

Angular中主要用于解决services的调用,比如$http、$log、$q等等,不过不用理解那么多,拿来用就可以了。

动画效果(Animations)

用jQuery加一些动画效果通常要使用enter、move、leave、addClass、removeClass等操作,在Angular里,可以换一种方式(并不一定好用),它实时添加一些如ng-hide、ng-leave等等class进去,然后在css里,自己写transition、opacity等方法(前面也说了它对IE9以下支持不好),然后自动调用。或者你可以自己定义一些scope的class变量,然后在ng-click的时候改变它的值,之后在需要的地方使用ng-class添加这个变量即可。

其他一些多视图、directive还没玩转,以后再说啦。

我不算一个实用主义者,有很长一段时间,我一直认为一种新编程语言的学习,必须经过读书–>认知–>实践–>总结这么一个循序渐进的步骤,然而从上班之后,却惊讶的发现,几乎没有一次,新语言的学习总是按照实践–>读书–>实践–>认知–>总结的步骤来的,有时候,甚至没有什么时间去学习和总结。

所以,一方面,基础是很重要的,循序渐进总是来的比较结实,直接使用框架可能反倒被束缚。但是另一方面,能在恰当的时候选择到趁手的框架,也是事半功倍。中间关键的一步,就是抽时间的“知其所以然”和总结。

感悟学习这条路很广,喜欢什么技术不重要,重要的是你肯花時间去学习。

Comments