JS进阶指南-优快云博客

本文链接：https://blog.youkuaiyun.com/mafan121/article/details/80654872

1.优先级

var z=1,y=z=typeof y;
console.log(y);//undefined

由于typeof的优先级大于=，所以先执行y=typeof y,返回结果'undefined'。之后的赋值操作从右往左依次执行。所以结果为'undefined'

2.执行顺序

var a = 'glabol';
function test(){
    console.log(a);
    var a = 'local'
}
test();//undefined

js执行分为2个部分：第一部分为编译，会先申明变量或函数体，第二部分为函数执行。当执行test()时会先执行var a；所以打印为undefined。

3.H5新特性

可参照：https://blog.youkuaiyun.com/mafan121/article/details/80649634

4.单例模式和工程模式

单例模式

单例模式又分为懒汉式和饿汉式2种。

懒汉式：当需要使用的时候再实例化对象。

饿汉式：初始化的时候就实例化对象。

单例模式的特点：

1.某个类只能有一个实例；

2.它必须自行创建这个实例；

3.它必须自行向整个系统提供这个实例。

单例模式的使用环境

当你想统一管理实例，并且节省系统资源的时候使用。

优点：

1.只有一个实例，减少了频繁创建销毁的内存小消耗，加快了访问速度。

2.避免了对资源的重复占用，避免了状态的不一致性。

缺点：

1.没有接口，不能继承。

2.不适用于可在不同环境产生不同变化的情况。

3.不能new，且每次开发必须检查是否存在实例。

工厂模式

工厂模式又分为简单工厂模式、工厂方法模式、抽象工厂模式。

简单工厂模式

简单工厂模式：可以用比较简单的方式隐藏创建对象的细节，一般只需要告诉工厂类所需要的类型，工厂类就会返回需要的产品类，但客户端看到的只是产品的抽象对象，无需关心到底是返回了哪个子类。客户端唯一需要知道的具体子类就是工厂子类。

简单工厂模式的使用环境

当需要用到多种同类型的类的时候，一般选用简单工厂模式。

优点：

1.隐藏了对象创建的细节，将产品的实例化推迟到子类中实现。

2.客户端基本不用关心使用的是哪个产品，只需要知道用哪个工厂就行了，提供的类型也可以用比较便于识别的字符串。

3.方便添加新的产品子类，每次只需要修改工厂类传递的类型值就行了。

4.遵循了依赖倒转原则。

缺点：

1.要求产品子类的类型差不多，使用的方法名都相同，如果类比较多，而所有的类又必须要添加一种方法，则会是非常麻烦的事情。或者是一种类与另一种类有几种方法不相同，客户端无法知道是哪一个产品子类，也就无法调用这几个不相同的方法。

2.每添加一个产品子类，都必须在工厂类中添加一个判断分支，这违背了开放-封闭原则(软件实现应该对扩展开放，对修改关闭) 。

工厂方法模式

工厂方法模式：与简单的工厂模式基本相同，唯一的区别在于解决了简单工厂模式违背开闭原则的弊端。

其思路为：既然不允许直接修改，那么就将每次的修改也生成为一个子类，再基于这个子类的操作同样可以达到相同的效果。

抽象工厂模式

抽象工厂模式就将同一类的产品子类归为一类，让他们继承同一个抽象子类，我们可以把他们一起视作一组，然后好几组产品构成一族。

客户端要使用时必须知道是哪一个工厂并且是哪一组的产品抽象类。每一个工厂子类负责产生一族产品，而子类的一种方法产生一种类型的产品。

抽象工厂模式使用环境

适用于产品组合产品族变化不大的情况。

优点：

1.封装了产品的创建，使得不需要知道具体是哪种产品，只需要知道是哪个工厂就行了。

2.可以支持不同类型的产品，使得模式灵活性更强。

3.可以非常方便的使用一族中间的不同类型的产品。

缺点：

1.结构太过臃肿，如果产品类型比较多，或者产品族类比较多，就会非常难于管理。

2.每次如果添加一组产品，那么所有的工厂类都必须添加一个方法，这样违背了开放-封闭原则。

5.页面优化

5.1 避免`<head>`中的js阻塞

理论情况下：

解析html文档生成DOM树和加载相应的资源文件是并行进行的。

当发现一个标签，就会根据标签下载指定的资源。

当DOM树生成完成后则触发DOMContentLoaded时间。

当资源下载执行完成，DOM树生成完成后，则触发onload事件。

但是所有放在head中的css和js都将阻塞DOM渲染。

所以一般情况下，我们会将css放在head中，因为样式下载不全界面将会变形。但应尽量保证css文件不要太大，避免出现白屏效果。将js放在body中，这样就可以保证页面先呈现出来再进行逻辑渲染。

5.2 图片延迟加载

对很多网站来说，图片永远是最消耗流量和带宽的。所以可以在有图片的位置先使用占位符，在页面加载完成后再使用js动态的加载图片。

<body>  
    <img id="imgTest" src="about:blank" data-src="1.gif" />  
</body>  
<script type="text/javascript">  
    window.onload = function(){  
        $("#imgTest").attr("src",$("#imgTest").data("src"));  
    }  
</script>

5.3 压缩文件

在服务器端对文本文件进行压缩，在浏览器端进行解压缩。（在服务器端资源不足的情况下慎用）

5.4 启用浏览器缓存

使用web Storage缓存浏览器端数据，减少cookie的使用。

5.5 减少http请求，合理利用http缓存

###5.6 减少html层级嵌套，减轻css匹配选择器的计算量

5.7 javaScript代码级别的优化

例如：

别滥用闭包，会加深作用域链。

字符串转化，尽量使用+""。

避免使用 eval和 Function。

6 原型和原型链

实例的构造函数属性指向构造函数。

person1.constructor == Person //person1为Person的一个实例

在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）。

Person.prototype.constructor == Person	//Person.prototype为原型对象

原型对象是构造函数的一个实例。

var A = new Person();
Person.prototype = A;

每个对象都有一个__proto__属性，可以理解他为构造函数的原型。

__proto__ === constructor.prototype

只有函数才拥有prototype属性，拥有prototype的对象，且在定义函数的时候就被创建则称之为原型对象。

当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中调用查找。

**原型链：由__proto__构成的链式结构。

这里写图片描述

原型对象的主要优点是数据共享，当然这也是他的缺点，所以一般情况下我们都是原型模式和工厂模式结合使用，原型模式共享方法，工厂模式私有独立属性。

7 MVC和MVVM框架

MVC（Model-View- Controller ）

Model负责存储、定义、操作数据；
View用来展示给用户，并且和用户进行交互；
Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。

原理：当用户在view进行了一次请求操作，请求首先会派发到controller中，controller会调用相应的model来业务逻辑处理，并返回数据给view层进行视图渲染。前端MVC和后端稍有差异，前端是单向数据流，后端返回是双向数据流。

这里写图片描述

MVVM（Model-View-ViewModel ）

Model负责存储、定义、操作数据；
View用来展示给用户，并且和用户进行交互；
ViewModel 是Model和ViewView和Model的绑定器，主要负责界面逻辑和模型数据封装。

原理：当用户在view进行了一次请求操作，请求首先会派发到viewModel中，viewModel对请求数据进行封装和处理，并调用model进行业务处理,返回数据，最后viewModel将对返回数据进行封装处理使界面达到新的渲染效果。

这里写图片描述

面试集锦（一）

1.优先级

2.执行顺序

3.H5新特性

4.单例模式和工程模式

单例模式

单例模式的特点：

单例模式的使用环境

工厂模式

简单工厂模式

简单工厂模式的使用环境

工厂方法模式

抽象工厂模式

抽象工厂模式使用环境

5.页面优化

5.1 避免<head>中的js阻塞

5.2 图片延迟加载

5.3 压缩文件

5.4 启用浏览器缓存

5.5 减少http请求，合理利用http缓存

5.7 javaScript代码级别的优化

6 原型和原型链

7 MVC和MVVM框架

5.1 避免`<head>`中的js阻塞