对于复杂交互的前端页面架构的思考(干货)

项目背景

effevo致力于为用户提供最方便的云端任务管理工具，任务管理过程中主要涉及的就是数据的CRUD，并能够将这种数据变化实时的反馈出来；有些地方(比如甘特图)需要比较复杂的dom操作和交互；有些页面(比如首页)有SEO的要求。由于系统的这种复杂性决定不可能由单一的技术来实现整体的系统。
本文主要对Effevo 前端的整体架构做了一个简单的介绍，给大家提供一种前端架构的解决方案。其中也还存在着一些问题， 欢迎大家与我们交流，共同改进。

前端架构

针对上面的项目背景，我们初步决定 前端采用angularJS + 部分jQuery; 后端采用nodejs搭建整体的项目架构。

一. angularjs

面向前端的MVC框架， 前端开发变得更加规范。实现了数据的双向绑定，把开发人员从复杂的dom操作中解放出来，将关注点放在数据和业务逻辑操作上面；MVC架构使得用angularJS能够很方便的进行模块化开发；angularJS的学习成本比较低，使得开发人员能够迅速的进入开发状态。

二.前端路由

有angularJS自带的ngRoute和基于ngRoute扩展的ui-router两种方案。
1. ngRoute： 靠检测URL改变，绘制视图， 一个app只能有一个视图，URL之间的跳转会造成某些 $scope信息的重复载入，这也意味着没法进行视图之间的嵌套，也不允许在一个页面上有多个view，这样不利于模块化的开发或者说模块化开发的复杂度比较高，因为在实际开发过程中一个页面可以拆分成多个并列的模块和嵌套的模块，这些模块可能不是由一个人开发的，这种情