AngularJS给我带来的关于网站架构设计的感想

Angular出了2也有好些日子了 还没有去深入的看 最早接触angular的是13年下半年的时候 还大二上 在工作室跟着某学长做项目 接了一个外包 说用angular 那段时间正好大漠穷秋在翻译那本angular书 于是拿到了第一版的新书 那个外包的甲方还挺牛逼的 虽然后来各种原因项目没有完成 还是第一次接触angular 因为书里很多东西后来看了之后还是感觉挺坑的 。。。说实话 只能看懂小半部分

之前也没了解很多js库 因为我觉得js库大多数都是只是工具 只是把各种复杂的东西封装好 然后给大家方便的使用 比如jquery,underscore,还有各种图形库 , 因此我也就没有了解太多的其他的js库 直到angular的出现 并且它完全改变了我对网站架构的认识

从最开始 网站的开发和客户端的开发给人感觉是不一样的 客户端是这样

图一

而网站是这样

图二

(没有装专业的线框图工具 这个是用glifffy画的 就不要太吐槽了。。。)

这里吧后端分开了 是因为其实后端这里明显分为两部分 一部分处理api的请求 这个是以json(或者其他)作为数据格式进行数据传输的 而另外一部分负责处理浏览器的路由(router)以及对不同的路由从数据库获取信息渲染html模板 最终将这个html返回给浏览器 (这里只说html而忽略js、img、css等资源文件是因为这些静态资源放在cdn就可以了 和服务端关系不大 ) 而一些刚入门的后端基本上这两个部分都是混写在一起的 这个我也见的好多了

刚开始的时候也挺混乱的 举个例子 用户登录的时候 第一步打开登录页面 这一个过程服务端是由图2中服务器2做的 将这个页面返回给浏览器 第二步用户填完数据后点击登录按钮 第三步浏览器通过ajax(或者其他)将数据发送给服务器 拿到登录结果 第三步这个过程则是由图2中后端1来完成
如果站点还有客户端的话 后端1是公共的部分 后端2就差不多是网站专属了

因为后端1和后端2都需要从数据库获取数据 所以数据库相关的是公共部分 抽取出来再画详细一点 就是这样的

图三

后来有人说 这也不行 后端2既渲染页面又从数据库拿数据 而后端1只从服务器拿数据 所以两个后端功能略有重复 具体情景是这样的 例如ajax动态获取文章列表页

用户打开第一页的时候 后端2 先从数据库取了10篇文章 然后渲染到html发给浏览器 用户点击加载更多 使用ajax向后端1发一个获取更多的文章 拿到json数据后 前端用js将数据显示出来 所以后端2从数据库取数据这一步和后端1重复了 于是为了把后端2重复的部分全部交给后端1来处理 于是出现了 这种

图四

后端2和后端1也是由api来进行交互的 浏览器和后端1进行交互的部分通过后端2来进行转发 于是乎 可以看到 后端2+浏览器 才和客户端实现的功能是一样的 而且这样的就比较高的抽离出各个模块 耦合度也比较低 负责网站的人和负责api的人就不用使用同一种语言了 所以 这种情况下 后端2还能算后端么 所以很多大的站 这部分也作为前端 这部分用的比较多的是php 所以 php在某些大站算前端 而后端一般都是java

然后有人说 前面那个文章列表那个例子 直接后端2不从数据库拿文章 直接返回空的列表给浏览器 然后浏览器直接从第一页就开始用ajax请求数据 这样也是可以解决后端2和后端1重复的问题的吧

说的没错 接下来就是要说这个了 比如说好多个页面 每个页面的数据都是ajax动态请求到的 那相当于把html渲染的部分拿到浏览器来做了 后端2只需要把各个页面对应的html模版发送给前端就可以了 这样后端2就只剩下一个功能了 就是router的功能 根据不同的router 返回不同的html模板 然后在进一步 要不干脆把后端2去掉吧 直接吧模板作为静态资源文件就可以了 router也由浏览器端来处理吧 router可以使用网址的hash来做(这个不是加密解密hashmap那个hash, 而是只网址后面#这个符号后面的那一串) 这样的话就完全把后端2去掉了 接下来就是纯js做的事情了 于是angular1 就干了这样的事

图五

这样一搞 前端这块就和客户端是一致的了 真的是太牛逼了

当我发现angular干了这样的事情之后我才明白 这是一个怎样的库 于是能理解一点为啥angular能在库这么多的今天突然流行起来了 angular 具有很多优秀的特性,MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等 (这个摘抄自其他地方)也有很多的问题 于是angular2出来了 就是想重新来解决这些问题 不过他们的核心目的都是一样的在我看来 都是为了构建单页面的web应用程序

在我看来 angular和nodejs有种微妙的共同点 前几天看一篇stackoverflow的年度统计 angular和nodejs被单独拿出来 而不是合并到js里 还是能理解的

还有 经常看到 拿angular和react还有vue做比较 其实我觉得angular和另外两个不是一个级别的 另外两个最多只能和angular中的某个模块比较 angular是框架 而另外两个是库

好了 上面说的对资深的开发者来说全都是废话