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 - 自动化的
方向: 发布 测试 开发
课程地址: 电商网站前端架构
网友评论