项目背景
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，这样不利于模块化的开发或者说模块化开发的复杂度比较高，因为在实际开发过程中一个页面可以拆分成多个并列的模块和嵌套的模块，这些模块可能不是由一个人开发的，这种情况下如果每个人需要维护的代码量会比较大，在开发的过程中容易出错，整体代码结构不够清晰。
2.ui-router： 靠状态变化绘制视图。ui-router修复了很多ngRoute面临的问题，她有以下两个特性：
- 支持在同一个URL下面的多个视图
- 支持URL的多级嵌套
<body>
<div ui-view='nav'></div>
<div ui-view='content'>
</div>
<div ui-view='footer'></div>
</body>这样整体页面拆分成了3个独立的ui-view，导航视图， 内容视图 和 底部的视图。
对于内容视图的模板里面的内容大体是这样的：
<div>
<div class='leftNav'></div>
<div ui-view></div>
</div>内部构成二级导航，根据二级导航的切换ui-view的内容进行变化，而ui-view里面的内容可以分别由不同的人员开发。这样不管是嵌套还是并列的视图都可以将里面的模块拆分出来，代码结构也更清晰，维护起来也比较方便。
三. 组件化开发
在项目开发过程中，不同的子系统和不同的模块之间涉及到很多共性的东西，我们称之为组件。如果每个子系统和模块分别实现一套的话不仅开发量巨大，而且以后维护起来也是个灾难。而angularJS 中的指令(directive)提供了很方便的模式实现组件化。举个例子：
例如任务管理中任务编辑页面下面的评论框：
在话题列表页下面是这样的：
内部的功能是完全一样的，我在代码里面是这样用的：
<div ee-comment="taskDynamicsInfo.projectCommentCfg"></div>通过配置决定评论框的行为，这样以后如果问题页面或者文件管理页面需要这种评论框的时候直接拿过来就可以使用了，这样就实现了write once， use everyWhere。对于项目的开发效率来说有非常大的提高。Effevo 中存在这大量的这样的组件：select选择框、左侧导航、日期选择框、TreeList等等；凡是其他地方可能够用到的我们统一都做成组件，甚至以后应用到其他项目中去。
四. 前端样式库
前端开发过程中另一个重要的方面是样式统一问题，Effevo最初的版本里面我们采用的是bootstrap样式库。后来发现bootstrap 样式库里面的样式和UED设计稿的风格差别比较大，因此我们决定自己实现一套CSS 样式库，采用less 实现，将统一的样式提取出来。整体结构如下： 
分别存放全局变量、 覆盖浏览器默认样式、全局通用样式和mixIn 样式，如果后面样式库扩展的时候可以将less拆分成不同的小文件。
五. 模块加载器
目前主流的模块加载器有requireJS 和 SeaJS， 与requireJS 相比，seaJS专注于浏览器端的模块加载，遵循CMD规范， 更简洁优雅。但是感觉差别不是特别大，看团队使用习惯，选择一个即可，我们开始使用的是seaJS，后来一直延续下来。目前看来也存在着一些问题，例如打包过程中的路径问题，第三方库的依赖问题等。而requireJS中这些问题都得到很好的解决，并且现在很多第三方的库都默认支持AMD标准了。
六. 前后端交互
Effevo 前端通过采用Restful 形式的API与后台交换json格式的数据的形式达到前后端数据交互的目的。另外系统中存在着对数据实时性要求比较高的功能模块，例如在任务管理模块，用户A和B在不同的地方同时在编辑同一个项目(经过我们调查这种情况经常出现)，如果A编辑的数据没有立刻同步到B的客户端的话容易出现数据丢失或者混乱的情况，因为系统只能保存最后一次修改的内容。Effevo最初的版本中没有处理这种情况，所以经常会接到用户反馈修改的数据莫名丢失。为了解决这个问题我们引入了webSocket， 每当有用户登录到系统后，会自动与后台服务器建立一个 webSocket的连接， 这样数据在其他客户端修改之后会立刻广播到其他客户端，同步进行修改，能够解决上面的问题。与传统的轮询方案相比，webSocket 能够主动给客户端发送消息，只需要建立一次链接，并且node的后台能够保证在并发量很大的情况下依然能有很高的处理效率。
相关推荐
前端最全的初级前端面试题 干货满满前端最全的初级前端面试题 干货满满前端最全的初级前端面试题 干货满满前端最全的初级前端面试题 干货满满前端最全的初级前端面试题 干货满满前端最全的初级前端面试题 干货满满...
文档干货前端工程师面试题汇总内含题目解析和详细答案
### 干货前端工程师面试题汇总及解析 #### 1. **HTML Doctype 作用？严格模式与混杂模式如何区分？它们有何意义?** - **Doctype** 的作用是告诉浏览器以何种文档类型来解析当前文档。对于HTML文档而言，浏览器会...
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系...
干货：等保2.0安全架构介绍+建设要点.docx干货：等保2.0安全架构介绍+建设要点.docx干货：等保2.0安全架构介绍+建设要点.docx干货：等保2.0安全架构介绍+建设要点.docx干货：等保2.0安全架构介绍+建设要点.docx干货...
干货：等保2.0安全架构介绍+建设要点.pdf干货：等保2.0安全架构介绍+建设要点.pdf干货：等保2.0安全架构介绍+建设要点.pdf干货：等保2.0安全架构介绍+建设要点.pdf干货：等保2.0安全架构介绍+建设要点.pdf干货：等保...
微服务架构是一种现代软件开发的方法论，它将大型复杂应用程序分解为一组小的、独立的服务，每个服务都专注于单一业务功能，并且可以独立部署、扩展和维护。这种架构模式起源于2000年代中期，随着互联网技术的发展和...
从第一代架构到第四代架构，阐述架构的演变之路，以及架构学习注意，及架构干货，让个人架构技术栈串起来。
它涉及到网站设计的各个方面，包括主页设计、频道首页的架构以及底层页面的布局。本文将深入探讨这些知识点，帮助理解和提升网站的整体性能。 首先，我们要理解主页设计的十二个重要任务。这十二个任务不仅是用户...
前端开发干货资料包领取"来深入探讨前端开发的重要知识点。 首先，前端开发主要涉及HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript三大核心技术。HTML用于定义网页结构，如标题、...
质量监测或者说项目质量监督，是一个项目交付前非常重要的过程，也是关乎一个项目成败的关键一环。课程带领同学们从一个全新的视角审视整个项目，从宏观的角度出发，让经常做项目的我们从需方角度来看待项目。...
高级系统架构设计是软件开发中的核心环节，它关乎软件系统的稳定性、可维护性以及扩展性。本篇将探讨一些高级系统架构设计的关键知识点。 首先，一个健康的软件系统应该避免出现硬化、脆弱、绑死和胶着这四种症状。...
总之，自定义Dcat-admin页面涉及多个层面，包括控制器、接口、前端资源和模板。理解并掌握这些基本要素，你就能灵活地扩展Dcat-admin以满足项目特定的需求。不断学习和实践，你将在后台开发领域变得更加熟练。
AUTOSAR联盟在召开架构讨论会上，工程师讲解了AUTOSAR的基本框架(另见《AUTOSAR架构的故事（干货）》)，同时提出Communication部分另外讨论。这次这位工程师准备了丰富的资料将通信服务详细讲解了一番。...
前端知识分享、经验总结干货，javascript、css、http、react、typescript、vue、webpack、微前端、思维导图、性能优化、浏览器、移动端相关、算法相关、设计模式、调试等前端各方面的资料和经验应有尽有，非常高质量...
安装图数据库在这里就不介绍了，本篇主要介绍如何连接neo4j数据库，将知识图谱成功显示在前端页面中。 Neovis.js与Neo4j的连接非常简单明了，并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义...
在Android应用开发中，"Android-基于干货集中营接口的客户端采用Retrofit RxJava MVP架构"是一个实践项目，它展示了如何使用现代Android开发中的流行技术栈来构建一个功能齐全的应用。这个项目的主要技术包括...
- **Presto优化**：为改善CLI用户体验，携程基于Presto StatementClient开发了自己的Web UI，前端采用了jquery的easyui。同时，还引入了Airbnb的AirPal，尽管存在一些问题，但通过适配和改进提高了易用性。 - **...
移动web视频(共120多集)、电商项目视频(共59多集)、...梅兰商城项目实战基础视频教程、果果点餐系统、Ajax音乐播放器等外加多套项目）、ES6(共36多集)涵盖前端当前最流行，最全的前端技术栈，让你成为前端大神不是梦