对于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源码。

---

五一假期转眼即过，明天就要上班了。所以今晚早点睡觉喽。