电商网站前端架构笔记

JavaScript

1.简介

技术储备 　　

　　前端的架构设计是一个复杂的课题，最近刚刚看了一个关于电商网站架构的设计视频。再此记录下自己的学习过程。前端的架构涉及很多知识点，首先是前端必备的三驾马车，JavaScript/HTML/CSS。掌握这些是基础中的基础。当掌握了这些语言之后，要掌握一些基本的框架和类库，比如jQuery库、requirejs/sea.js等一些模块化框架、MVC framework(Angular.JS等)。接着我们要去更多的优化代码，以及学会如何继承与重用，这就涉及到JS中设计模式的问题。然后是性能优化，当然我们的优化要考虑的更多。常用到的有cache的优化，如HTTP cache/localStorage cache，DOM渲染优化，compress等等很多。其他的点还包括Restful API design & 前端自动化(grunt/gulp/Node.js)&跨终端适配&代码托管(Git)等。

产品设计和发布迭代

　　尽可能多的参与交互设计师与产品经理的设计过程。通过这个过程可以更多的去思考产品本身的一些特点。关注用户体验。产品完成后要了解产品发布的过程。通过发布系统与业务挂钩，后期不停更新跟踪。

数据分析和优化

　　将自己的产品发布到线上以后，通常需要通过线上数据对产品进行一系列的数据统计和优化。我们可以通过一些数据分析和统计工具帮助我们更好的对产品进行改良。

2.架构设计流程

前端架构的组织方式

目录层面的组织

　　一个好的目录组织是一个好的架构的开始。在我们开发一个项目的时候，往往需要一个清晰整洁的目录结构。否则，在修改一个很小的功能的时候，代码会变的杂乱无章。
　　对目录的分层主要包括数据层、视图层、控制层。也就是说每一个目录都有其相对应的职责。每一个目录会执行不同的功能。

层次化架构组织

架构相关–组件化和设计模式

　　A.关于JavaScript extend

1
2
3
4
5
function extend(sub,sup){
    for(var i in sup){
        sub[i] = sup[i];
    }
}

　　以上为浅拷贝的基本模式,对Array与Object等引用类型的应用深拷贝实现extend.
　　B.关于js继承实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Person = function(){
    this.name = 'xinxu';
}
Person.prototype.getName = function(){
    return this.name;
};
var man = function(){
    this.sex = 'male';
    Person.call(this);
}
man.prototype = Person.prototype;
//这么做的问题1.man的constructor指向Person 2.引用类型赋值 更改父类会使子类的值发生改变
man.prototype = new Person();//man作为Person的实例,计算机为其开辟了新的内存空间。man不在指向Person
man.prototype.constructor = man;

　　C.划分命名空间通过闭包实现
　　D.组件化AMD/CMD 代表 require.js/sea.js

AMD CMD区别

　　CMD –依赖就近

1
2
3
4
5
define(function(require,exports){
    var b = 1;
    var a = require('./a');//在需要的时候导入模块
    a.doSomething();//调用方法实施
})

　　AMD –依赖前置

1
2
3
define(['./a'],function(a){
    a.doSomething();//调用方法实施
})