电商网站前端架构 学习笔记(全是干货)

1:前端架构的基本知识

1: 前端工程师必须会的一些技能

前端工程师基本技能图.PNG

2: 前端架构基本知识

• 什么是前端架构?
  每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的，只有一个架构是不是适合你的。哪个个架构符合你的需求的时候，你使用它就是了啦。另外,要记住的是架构是为完成产品服务的.一个简单的网站也可能涉及到前端架构,比如代码的复用.
• 做前端架构的目的?
  做架构的目的并不是为了技术做架构而是因为产品才做架构的;
• single page application (SPA)
  单页网站页面的应用,所有应用页面的切换通过页面的哈希完成,做这样的事需要一些比较复杂的框架,像backbone,anjular.js.单页面应用最近几年开始流行起来了,像qq邮箱,雅虎邮箱等都已经在应用了.

---

2:前端建构技术基础介绍

• 技术基础的作用:做好技术基础的好处在于:后面做网站的整体规划和架构设计就会轻松非常多

语言基础

• javascript,html & css

基本框架和类库

• jQuery (更方便做代码开发)& require.js/ seajs(模块化框架),MVX farmwork
• 帮助我们更高效的去开发代码

设计模式

• 继承,重用
• 代码如何组织:比如我们在页面上有两个地方的代码有重复,我们把代码封装成一个函数,这是最基本的设计模式-代码重用

性能优化

• http cache,local cache,compress(代码压缩),DOM render(DOM渲染)

• 如何解决性能瓶颈问题:
  1: 最常见的就是找到缓存的点,可以从http协议层面可以做缓存,利用HTML5做本地缓存
  2: 做代码压缩
  3:更科学的做DOM树的渲染

其它

• Resful API design(前后台数据联调),自动化(Group/node.js),跨终端适配,代码托管

---

3:产品设计和发布

如果我们想让产品更加具有灵魂感,我们必须自己去思考产品应该被设计成什么样

交互设计图.PNG

---

4:数据分析和优化

数据分析和优化是做前端架构的必要前提,因为前端页面的数据对于我们前端工程师来说是非常重要的,比如可以根据数据波动去发现页面中的bug等等;最终的目的是提高产品的整体的体验和质量
大家以一个比较全局的观点去考虑这个问题的时候,不要以技术的观点去想,而要以产品的规划和产品怎么为用户服务的理念去想

---

5:前端架构组织方式和目录组织

架构组织的维度分以下几个方面

目录层面
利用操作系统与生俱来的目录结构,合理规划目录结构,是好的架构实现的基础
页面层面
页面层面,通常用来组织视图( HTML )
功能层面
最简单的网站,单个文件通常是一个或多个相关功能的聚合
组件化和设计模式层面
当一个逻辑需要多次被使用时,我们就开始组件化和抽象

---

1 :目录层面的组织

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

举例: js目录结构,根据以下三层,分门别类的放置文件
1: Model: 数据层,存放与服务器打交道的代码 
2: UI: 控制视图业务逻辑的代码
3: Controller: 控制层

2: 页面层面的组织

• 由于页面中有不同的代码,所以不能用相同的方式进行组织架构的划分,在我们页面中有 js(逻辑性代码); html(结构性代码) ;css 描述性代码

• 重用 :一般页面与页面之间经常会有公共的部分,我们把公共的部分抽象出来,存放到一个文件夹,然后将里面的文件作为公用部分.
  同常来讲,页面与页面之间之间 不太存在逻辑之间的关系,而是包含与被包含的关系,比如一个页面包含某个子结构.

3: 功能层面

• 最简单的网站,单个文件通常是一个或多个相关功能的聚合

6: 组件化和设计模式层面(详细讲解,单独作为一节)

• JS中的继承和Extend
  继承和拷贝是JS中抽象的基础,因为JS不像其它面对对象语言,与生俱来就有这些功能,所以呢,要自己写

• 浅拷贝简单例子

var a = {};
var b = {c:100, d:200};
//想让 a 具有 b 的属性,就用到浅拷贝; 其实用到的就是for in 方法
var i;
for (i in b){
a[i] = b[i] 
}
a; // {c: 100, d: 200}

//封装函数
function extend(sub,sup) {
    var i ;
    for (i in sub) {
        sub[i] = sup[i]
    }
}

• JS继承继承方式:原型链
  偷懒继承方式:

//people
var people = function(){
    this.name = 'jiangdeng'
}
people.prototype.getName = function() {
    return this.name
}
//man
var man = function() {
    this.sex = 'male';
    people.call(this); //将man函数的this指向 people对象
}
//继承
//想要man获取people对象上的属性
//最简单的方式,也是偷懒的方式
man.prototype = people.prototype;
var Man = new man();
Man.getName()

偷懒方式的问题: man 的 prototype 中的 constructor 属性指向的是 people 的构造函数,当 people 的 getName 方法 被重写后,man再调用 getName 方法也会被重写

修改后的继承方式

//peopel
var people = function() {
    this.name = 'jiangdeng'
}
people.prototype.getName = function() {
    return this.name
}
//man
var man = function() {
    this.sex = 'male';
    people.call(this); //将man函数的this指向 people对象
}
//继承
//不让man的原型指向people的原型,而是指向people的实例
//指向people的实例后,man的constructor改变了,得把它设回它本身
man.prototype = new peopl();
man.prototype.constructor = man;
var Man = new man();
Man.getName() //jiangdeng

• 命名空间
  命名空间的基础:前端模块拆分的最基本形式可以认为是闭包的一种应用,但是这种方式对于命名空间的管理过于随意
• 组件化
  高级一点的组件化:可以使用开源框架完成最终的组件的组织和管理,例如requirejs/seajs
  require.js(国外人写的)
sea.js(国人写的)

• 组件化中的AMD和CMD的区别
  CMD -- 依赖就近 (按需求再加载)
AMD -- 依赖前置 (提前一锅端,都加载)

---

7:前端架构实施

1:前端架构实施前的思考

• 更合理的技术选型 --例如团队成员都精通jQuery,就没必要选YUI作为类库;
• 需求分解后,模块的边界划分;模块的边界划分不是一个人的事,每个代码的贡献者都有义务提出建议;
• 如何设计借口更加友好
• 自动化的发布和快速迭代
• 如何降低维护成本,维护成本通常体现在架构的可扩展性和易用性,好的设计会一劳永逸;

2:优化和扩展
从哪些方面着手?

• 代码层面
  code review & 代码规范
• 架构层面
  可扩展性是否受约束
• 协议层面
  通过 http(s) 协议优化
• 综合
  优化往往是多种技术的综合使用

3: 前端自动化

• 前端自动化原因: 人会犯错 ;提高开发效率
• 前端自动化基础 : node.js /grunt
• 自动化的方向 : 发布 测试 开发

---

课程地址: 电商网站前端架构