最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
架构组织的维度分以下几个方面
目录层面
利用操作系统与生俱来的目录结构,合理规划目录结构,是好的架构实现的基础
页面层面
页面层面,通常用来组织视图( 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 -
自动化的
方向: 发布 测试 开发
课程地址: 电商网站前端架构
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
