引言:angularjs是一个中等重量级的前端开发框架
HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了。通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足:
1.类库:类库是一类函数的集合,它能帮助你写web应用。这里起主导作用是你的代码,由你来决定何时使用类库。典型的类库,例如prototype、jQuery等。
2.框架:框架式一种特殊的、已经实现的web应用,你只需要填充具体的业务逻辑。这里框架是起主导作用的,由它根据具体的逻辑来调用你的代码。典型的框架例如knockout,sproutcore, YUI等。AngularJS也是其中之一。
框架又有轻重之分。我对轻重的判断标准是,是否需要很多的第三方类库来帮助你实现功能。显然,backbone这种属于轻量级框架,它简单易用,专注于前端Mvc的实现,故而你还需要很多第三方类库(至少jquery)来完成dom操作、UI等各种各样的内容。Yui、dojo属于重型框架,他们的作者企图搞出一个森罗万象的框架+组件库,包括代码动态调用、各种UI组件都包含在内,学习成本较高,但是一旦精通,至少这个项目别无所求。从这个角度讲,轻量级框架好比毛坯房,还需要各种工具做装修,但是对于开发者来说也更灵活。重量级框架好比精装修的房间,你只需要的是适应它,但如果要自己做出大刀阔斧的修改,那就稍微有点伤经动骨了。
angularjs,在我看来是介于以上两类之间,是个中等重量级的框架。即不像backbone那么简单,也不像dojo和Yui那么包罗万象。很多时候,妄图包罗万象,往往会出现很多子模块的质量高不成低不就,并且修改起来较为困难。过分精简,则框架内容单薄需要写的内容太多。angularjs这种相对中庸的风格,则非常符合我的需求。目前,AngularJS三个我认为最为精妙的组件就是数据绑定(Scope),指令(Directive)和依赖注入(Dependency Injection),表现得非常好。相对而言,它的UI组件和动画则是弱项。可以说,选择了angularjs,就意味着选择了jquery式的组件库方式来弥补它的不足,要完成一个web应用必须跟第三方类库打交道。
现在已经有许多针对angularjs写的UI插件,有的是结合了bootstrap,有的是结合了jquery, 虽然不太完善,都很值得参考:
与jquery类库的协作
第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了。它灵活的dom操作,让很多web开发人员欲罢不能。再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库。然而,它是否能与angularjs结合呢?
很多angularjs原教旨主义者对此持否定态度。他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用。任何类似jquery的dom操作,都是不洁的。把所有和界面相关的, 比如dom操作, 都放在directive中, 这样页面中directive而没有代码,跟JSF思想一致。MVVM,DSL,组件化的思想这才是web的趋势。嗯,想法很好,原教旨主义者想法都是这么纯洁。但事实情况是,使用了angularjs我们就离不开jquery。
众所周知,angularjs里面事实上已经内置了jquery lite.,而且angularjs源码中很多方法直接就是使用jquery方法。例如angularjs的事件绑定机制。既然先知们都在用,我们又何苦不用?组件化的思想没有错,但没必要因此把自己的手脚绑住。唯一要注意的问题是,不要用jquery的代码破坏了angularjs的结构。对此我的原则如下,不足之处还请指出:
模块划分、服务、路由、依赖注入等重要方面上都得使用angularjs的方式,只有某些具体内容(通常是一些Ui)才使用jquery。 避免在controller里面写了一堆直接操作dom元素的 jquery代码。使用angularjs的模板绑定机制。 常用的组件要用angularjs的方法抽取出来,但组件具体实现则不必纠结于是否使用jquery及其插件。 .使用第三方类库时,在变量和函数命名时有特殊标记(通常是加上这个类库名的缩写)。
jquery,更是建议作为angularjs的依赖,先于angularjs加载进来。
事实上,选择了angularjs这样的框架中德中等重量级选手,就意味着你必须添加其他类库。而jquery,更是建议作为angularjs的依赖,先于angularjs加载进来。因为在查看angularjs API的时候,我已经发现,其中许多功能,事实上是依赖于jquery的。典型的例子,就是官网的ng-blur指令。
<input type="text" ng-model="name" ng-blur="checkname()" > ng-blur指令,是在焦点离开某个元素时触发的指令。对于上例,即在焦点离开该文本输入框时,触发checkname()函数。