对于angularJS的一点思考
已经找好工作近两周了,入职基本上还算顺利,自己两年来的挑灯夜战也算是有了收获,于是这两周基本上是按部就班的工作,没有学习什么新技术。在上个公司的时候,同事在项目中使用angularJs,之前他也没有接触过angularJs,一边学习一边做项目,结果给项目团队造成了很大的困扰。angularJS他研究的不透彻,在使用的过程中造成了很大的弊端,比如标签闪烁,暴露出未解析的源代码等。在商业的项目上尝试使用新技术是十分危险的,轻则项目留坑,给维护留下巨大的安全隐患,重则项目流产,商业计划因此而毁于一旦,公司也许就应为某些程序员的擅做主张而错失市场先机。
后来我为了给angularJS填坑,系统的学习了angularJS。看的是《用AngularJS开发下一代Web应用》。版本其实挺老的,书上的例子还是0.8的版本。现在已经更新到了3.0多了吧。没有去仔细的查看过最新的版本。刚入职,领导为了让我学习公司的框架,扔给我一个内部使用小项目,其实也不是特别小。只因为是内部使用的,而且是我一个人在做,所以在浏览器的兼容性和新技术的使用上面,就随意了许多。我可以和同事们协商使用最新的浏览器,因此能够避免很多新技术实践中遇到的问题。下面就简单的谈一谈我对AngularJS的一些理解,部分观点如果不正确,希望各位网友指正。
1、为什么会诞生AngularJS:
这个问题看起来荒唐,其实是十分重要的。任何一种技术都不会空穴来风,白白的产生出来。技术的产生一定是为了解决某个实践过程中遇到的问题。而通常大家所说的设计思想,则是解决此类问题的一个哲学原则。angularJS是为了解决前端工作代码混乱的一种工作状态。当初angularJS作者(Misko Hevery)为了开发一个Google Feedback项目,在项目中由于开发进度太慢,代码太多混乱。于是作者在以前造的小轮子的基础上重新设计了代码,用到了项目中,将混乱的js代码缩减到了1500行,改造后的轮子呗google重视,取名为angular。(关于具体详细的过程请移步:http://www.iteye.com/magazines/121。或者自己网上查找)。
angularJS解决了什么问题:
1、HTML和js代码混合在一起。
2、代码的复用率太低,一个网站有三四个表单,那么每个地方的表单验证要重写。
3、多人协作的困难。
4、后端和前端的解耦度更高。
angularJS把后端那套MVC设计模式(或者称之为代码组织方式)带到了前端,使得前端代码规范起来,管理起来也更加方便。在view层里面,看不到任何操作页面元素的代码。angularJS的view层的目的就是为了简单的呈现视图。至于用户和视图的交互过程则有controller来控制。虽然我是后端开发,但是也不可避免的经常会使用js写前端的一些逻辑。写前端逻辑的时候,经常需要写一会前端js然后写后端的接口。这样实际上增加了程序上下文切换的开销,使得编程的效率变得底下。使用angular以后。我编写前端的时候根本不关心后端的逻辑是怎么样的,我可以很方便的虚拟出一些假数据,仅仅依靠这些数据,我就能进行一些最基本的功能测试,完成前端绝大部分工作。
如果换过多人开发,这样的优势就更明显了。从前端用户需求出发,定义出所需要的数据格式以及规范。前后端同时开工。前端共有N个页面,可以抽象出多个Controller。分给多个人编写,抽象出其中公共的部分作为service继承使用。将页面中的公共的html元素抽象成directive可以在多个页面使用。(如分页栏)。后端程序员的工作则更加具体明确,减少了和前端同学的沟通,使得沟通成本下降了。
其中更为一点值得注意的是,angularJS将View 和数据层分离开的独特web构建方式,使得后端以前html与数据混合输出的方式得到了改善。一次编写代码可以在多个地方使用,因为后端仅仅定义了接口,无论在何种设备上呈现网页,只是view的样式放生了变化,其数据实质并没有发生变化。
2、view 和 data 分离。
这一部分,其实第一条已经写了一部分。这主要得益于angular的路由(routeProvider)机制。借助一些扩展(如html2js),可以将后端的静态资源完全的储存到客户端去。这样说有些朋友可能没有听明白,这里举一个小例子。比如我们以前去吃饭的时候,食堂的阿姨是将饭和菜打到盘子里递给我们的。每个同学吃饭,阿姨都要做两个动作,第一拿盘子,第二将饭菜盛到盘子里递给我们。但是后来人太多了,阿姨想了个办法。以后吃饭餐盘你们自己拿,我只负责打饭菜给你们。阿姨的工作只变成一个动作:将饭菜盛到盘子里递给我们。
不知道朋友们看懂我这个小故事没有。对应网页开发,我们的盘子就是我们的html,饭菜就是我们真正需要的数据。一个新闻页面用户每次刷新的时候,都会更换新的新闻。对于用户来讲,真正有意义的数据是那些更新的信息,而不是为了美化和包装这些数据的html。但是每次请求的时候这些东西还是返回给我们。第一个来说增加了网络数据传输量。第二个来说客户的响应速度可能会缓慢。
anguarlJS分别从服务端获取到这些js和打包成js的html静态资源。在页面初始化的时候,获取服务器端的数据,然后在客户端将用户需要的页面组装起来。
其实还有很多的优点,我只是一个初级的使用者,在以后的工作中,会有意的使用angularJS进行项目开发,充分的理解angularJS的前端设计思想。如果项目中不允许使用angularJS,那就要自己创建小项目学习了。
目前我写angularJS还存在挺多的问题,比如:
1、写代码总是写着写着,忍不住使用JQuery和js的方式写代码。使得一个页面中出现三种风格的代码,特别难以维护。
2、目前不会使用service。没有将公共的js代码封装成模块的习惯。这个在以后的代码中要有意加强。
3、在controller中使用Jquery操作DOM。这在angular中是不推荐甚至是不允许的。正确的做法应该是使用directive来编写可复用的指令。
4、写angularjs代码太少。熟悉一个项目需要大量的项目代码练手,我目前只能算是初步进入angularJS的大门。
希望各位angularJS的大神或者在github上有使用angularJS开发开源项目的能扔我一个链接,共同学习。
对angular的学习计划如下:
1、写2-3个使用angularJS框架的项目。使用到angularJS的大部分功能。
2、回归重温犀牛书和高程,重新系统的学习js。
3、学习angularJS源码。
五一假期转眼即过,明天就要上班了。所以今晚早点睡觉喽。