电商网站前端架构

在互联网应用越来越大，越来越复杂的今天，我们不可避免的需要工具来管理我们的前端代码。,替代以前的一个巨大的脚本文件，我们希望可以将文件写入不同的文件模块。并且希望代码可以重用，可以简单的引用和添加各种各样的依赖到我们的项目（无论是菜单一样的 UI 组件还是一个类似 jQuery 的 DOM 操作库）。不止是 JavaScript 我们希望可以用这种方式来组织，他应该也包含 CSS，HTML 模板，字体，图片和其他静态文件。

为什么前端需要模块化开发?
随着互联网应用越来越大，前端的开发也越来越复杂。如果还维持在以往以页面为单位的开发，会导致很多问题，类似依赖管理，命名冲突等棘手的问题。

前端架构知识储备

技术基础：

语言基础：JavaScropt, css&html;
基本框架和类库：jQuery & requirejs/seajs模块化框架 & MVC framework;
设计模式：代码继承&重用；
性能优化：http cache/ local cache/compress/DOM render;
其他： Restful API design & 自动化(grunt/nodejs) & 跨终端适配 & 代码托管。

产品设计、发布和迭代基础

1、产品设计：交互没有技术基础，前端和交互沟通，怎样方便实现、实现得更好；
2、产品发布：前端外延，与业务绑定
3、产品迭代：前端外延，与业务绑定

数据分析和优化

数据统计：利用第三方软件对前端展现的数据情况、反馈，对展现进行分析、优化。
关注数据的目的：提示产品的质量，做架构不是以技术，而是以产品的角度的，以用户体验为目的。

前端架构设计

目录层面的组织

目录系统在前端架构当中所充当的作用
更高效的组织开发目录：
好的目录组织方式，甚至可以代替那些复杂的代码组织框架
CSS，JS和图片要分开存放：
分开存放，往往不是出于技术角度的考量，而是从团队协作和迭代的管理层面出发。

一般而言，前端目录基本分为：
1、UI层（视图层）：控制视图业务逻辑代码
2、modle(数据层)：跟后台服务器打交道代码
3、controller(控制层)：轻量控制

页面层次的架构组织
将各个页面公用的代码存放在一个文件夹中。

高级的前端结构设计-组件化和设计模式层面

自定义：继承–js的原型链继承；例子：浅拷贝、原型链继承；
（目前很少自己定义：1.项目没那么复杂 2.一些类库已经封装好了继承和扩展的方法，比如jQuery的extend。）
使用闭包，对空间的划分过于随便，闭包中的变量会常驻在内存中，产生性能问题（注意事项：避免在闭包当中使用过大的变量）

使用组件化框架：requirejs、seajs – CMD（按需加载） AMD（依赖关系前置）。

//CMD 依赖就近，按需加载，用的时候导入依赖模块
define(function(require,export){
var b=1;
var a = require('./a');
a.dosomething();
})

//AMD 依赖前置，用之前加载依赖模块
define(['./a'],function(a){
a.dosomething();
})