定目标后我们就开始考虑如果构建一个企业网站。先是进行业内调查，看了看别人家的网站是怎么做的。总体来讲，国外网站的设计和使用的技术总能比国内高很大
一截，国内很多公司，甚至是很多软件公司都不注重公司网站的构建，网站千篇一律，没有特色。很多网站都是使用Wordpress，然后自定义皮肤。也有一
些设计类公司，网站页面做的很漂亮，设计也前卫，但是前端源代码写的一塌糊涂。我们起初的方案也是想使用Wordpress作为基础来设计网站，网站UI
从已有开源的皮肤基础上修改。这样既能节省开发成本，又能体现独一无二。其实，刚开始也是这么做的，并且已经做出来了第一版了。只是实在是觉得和别人家的
网站差别不大，太普通了，并且网站也没有任何体现我们专注于Web开发这一特质。权衡再三之后，决定从头开发一个企业网站出来，使用我们团队擅长的技术重
新开发一个网站出来。决定前端使用AngularJS和Bootstrap构建，后端使用node.js和Express构建。经过一个多月的努力完成的项目的第一版。下面将详细介绍这个项目的基础结构设计。
项目整体设计
技术上，项目前端使用AngularJS和Bootstrap，后端使用node.js和Express。网站自动化构建工具使用grunt。网站整体应用了流行扁平化设计和响应式设计。当然，UI设计是我们团队的弱项，所以很多都是借鉴（抄袭）了别人的设计。网站前端代码基于HTML5，支持Chrome、Safari、Firefox及IE9+，使用IE8浏览器打开网站会自动跳转到引导用户下载现代浏览器的页面中。网站应用了响应式设计，所以在智能手机上也可以愉快地浏览。
项目是完全开源的，github上的地址是：eRealm，项目演示地址：eRealm Info &Tech。
代码结构介绍
推荐使用Webstorm打开项目。打开项目后，代码结构如下图所示：
在主体结构中从上到下介绍。app文件夹包含了所有后端代码；build文件夹中包含了最新数据库备份；config包含有网站整体的配置；logs文件夹包含网站后端记录的日志文件；node_modules是包含所有的node.js依赖包（源代码中初始没有此文件夹，运行npm install命令后所有加载的依赖包放置在此文件夹中）；public文件夹包含了所有的前端代码，包括JavaScript、less、图片、Webfont等；.bowerrc中定义了bower管理前端库的下载地址；bower.json则配置了项目需要的前端库；.jshintre-client和.jshintrc-server分别为前后端JavaScript代码规范检查规则；.travis.yml为[travis]（https://travis-ci.org/）自动编译配置；app.js为node.js启动脚本文件；build.sh为单独编写的自动发布bash命令；gruntfile.js为grunt配置文件；newrelic.js为newrelic的配置文件，用于监控网站性能；package.json包含了所有node.js依赖包配置。
项目后端结构
项目后端代码架构如下图所示：
主要分为两大部分：app和config。app里面按照职责不同来分类，每个脚本文件对应于不同的模块；api文件夹包含了所有api对应的业务逻辑代码，helper放置一些公用方法，如邮件发送、日志记录、数据库连接等等；templates放置的是静态邮件模板；views是后端页面模板，使用了handlebar模板引擎，其中http中放置系统错误显示页面，layouts放置模板页；routes是express对应的路由配置，所有的页面和API的路由配置都在这个文件中。config文件夹中为系统配置，按照不同环境分为开发和现场两个环境配置，all.js放置共通配置，development.js放置开发环境对应配置而production.js放置线上环境配置。配置内容包括邮件发送、数据库连接及一些第三方API所需的key等等。
项目前端结构
项目前端代码结构如下所示：
前端代码全部放置于public文件夹下。data目录包含一些静态json格式数据，后期可能会考虑放到数据库中。helper中是浏览器下载引导页面；images包含了所有项目中用到的图片，我们尽量使用第三方的图片服务器保存图片，一些小图标也尽量使用webfont。JavaScripts文件夹包含所有JavaScript文件，其中app子目录放置业务代码，业务代码都是按照业务不同封装成了不同的angularjs?controller；debug子目录放置调试用代码，而libs方式前端JavaScript库，项目中使用得JavaScript库有angularjs、jQuery及一些插件；clients.js是所有ajax请求函数；erealm.js是angularjs的主模块；language.js包含了所有多语言配置，目前支持中英文。stylesheets包含了所有的css样式及webfont，除了第三方库之外，自定义的样式全部使用了less。作为一种惯例，项目中添加了humans.txt文件，表明项目的作者信息。有关humans.txt，可以参考官方网站humans.txt。
自动化构建工具
项目自动化构建使用grunt。grunt的使用涉及开发、调试、发布阶段。开发阶段使用了图片压缩和前端代码格式美化，使用的工具是imagemin和jsbeautifier，运行grunt prepare命令。调试阶段使用了代码规范检查、less编译、自动添加浏览器前缀、自动加载运行nodejs并打开浏览器、实时监控代码变化并刷新页面等。开发中，使用grunt命令即可，为默认grunt命令。发布阶段包含了JavaScript及css合并压缩，并在文件路径上添加哈希值来避免浏览器缓存问题，同时删除开发环境中使用的代码，使用grunt build命令即可把代码切换为发布环境。
具体的使用grunt方法及相关工具的介绍，后期会有专门的技术文章讲解，这里不会详细设计技术细节。
后期持续的改进点
项目完成的比较仓促，但是我们尽量保持代码的整洁和可维护性，一些编码方式也借鉴当前流行的最佳实践。但理想是美好的，现实总是不会做到那么完美，需要不断的完善。目前存在的问题是后端代码结构不够清晰、整体代码中无用代码还没有来得及移除。框架上期望把jQuery去掉，只使用Angularjs，目前只做到了尽量不用jQuery中的方法。小图标的使用上Bootstrap和?Font Awesome重复，后期会逐步删除Font Awesome而只使用Bootstrap中带的小图标。目前，最大的问题是项目没有完整的自动化测试，这个后期会逐步添加。
总结
以上是这个开源项目的整体技术结构介绍。在这个项目中，我们会持续使用最流行的Web技术，希望得到大家的持续关注，如果有开发者能一块贡献一些代
码，我们将会非常高兴。我们已经在github.io上构建了一个技术平台来发布Web技术文章，网址是blog.erealm.cn。博客网址也同样开
源，使用了Jekyll构建。Jekyll非常强大，最大的特点是使用markdown格式来发布文章。博客的代码在这里：github。
我们做这个开源的项目的目的有两个，其一是通过这个项目来展示我们做Web项目的实力，及培养团队技术水平。其二是借助这个项目，能和同行们有个技
术上的互动和交流。如果我们的项目能让一些新手们学到一些做Web项目的经验，我们就很知足了。技术是不断革新的，而国内Web技术向来是落后于国外好几
年，这个是不争的事实。我们erealm团队乐意为国内Web贡献自己的力量，也欢迎国内同行们和我们交流Web开发经验。
一、MVC
MVC模式的意思是，软件可以分成三个部分。
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信方式如下。
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的。
二、互动模式
接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。
另一种是直接通过controller接受指令。
三、实例：Backbone
实际项目往往采用更灵活的方式，以 Backbone.js 为例。
1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。
四、MVP
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 Presenter 传递。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
五、MVVM
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。 Angular 和 Ember 都采用这种模式。
1、js工厂模式
说明：
在函数中定义对象，并定义对象的各种属性，虽然属性可以为方法，但是建议将属性为方法的属性定义到函数之外，这样可以避免重复创建该方法。
引用该对象的时候，这里使用的是 var x = Parent()而不是 var x = new object()因为后者可能会出现很多问题（前者也成为工厂经典方式，后者称之为混合工厂方式），不推荐使用new的方式使用该对象。
在函数的最后返回该对象。
不推荐使用这种方式创建对象，但应该了解。
2、js构造函数模式
说明：
与工厂方式相比，使用构造函数方式创建对象无需在函数内部创建对象，而使用this指代，并而函数无需明确return。
同工厂模式一样，虽然属性的值可以为方法，仍建议将该方法定义在函数之外。
同样的，不推荐使用这种方式创建对象，但仍需了解。
3、js原型模式
说明：
函数中不对属性进行定义。
利用prototype属性对属性进行定义。
同样的额，不推荐使用这样的方式创建对象。
4、构造函数+原型的js混合模式（推荐）
说明：
该模式是指混合搭配使用构造函数和原型方式。
将所有的属性，不是方法的定义在函数中（构造函数的方式），将所有属性值为方法的利用prototype在函数之外定义（原型方式）。
推荐使用这样的方式创建对象，这样有好处。
5、构造函数+原型的动态原型模式（推荐）
说明：
动态原型方式可以理解为混合构造函数，原型方式的一个特例。
该模式中，属性为方法的属性直接在函数中进行了定义，但是因为
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name
}
Parent.lev = true
}
从而保证创建该对象的实例时，属性的方法不会被重复的创建。
目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fxDojo （JS library and UI component ）：
Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛 应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。
优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持
缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。
Prototype （JS OO library）：
是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样 的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。
优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。
缺点：如果说缺点，可能就是功能是他的弱项
Scriptaculous （JS UI component based on prototype）：
Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般
优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果
缺点：刚刚兴起，需要时间的磨练
yui-ext (JS UI component)：
基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件 能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。
优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。
缺点：太过复杂，整个界面的构造过于复杂。
Jquery ：
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，
优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数
缺点：据说太嫩，历史不悠久。
Mochikit ：
MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器
优点：MochiKit.DOM这部分很实用，简介也是很突出的
缺点：轻量级的缺点
mootools ：
MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。
优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。
缺点：不大不小，具体应用具体分析
moo.fx ：
moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。
优点：小块头有大能耐
缺点：这么小了，已经不错了
