javascript教程第二章（JavaScript高级教程第六集）

javascript教程第二章（JavaScript高级教程第六集）· 任务管理器 --->进程· 新版的大多数是多进程· 一个进程内的数据可以供其中的多个线程直接共享· 多个进程之间的数据是不能直接共享的· 老版的大多数是单进程

课前补充1. 进程和线程进程

· 程序的一次执行 它占有一片独有的内存空间

线程

· CPU的基本调度单位 是程序执行的一个完整流程

进程与线程的关系

· 一个进程中一般至少有一个运行的线程: 主线程

· 一个进程中也可以同时运行多个线程 这时程序就是多线程运行的

· 一个进程内的数据可以供其中的多个线程直接共享

· 多个进程之间的数据是不能直接共享的

浏览器运行是单进程还是多进程?

· 老版的大多数是单进程

· 新版的大多数是多进程

· 任务管理器 --->进程

浏览器运行是单线程还是多线程?

· 都是多线程运行的

2. js是单线程的1. 验证1

· 定时器并非定时执行

· 原理

• setTimeout()的回调函数是在主线程执行的

• 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

· 代码

• var btn = document.getElementById('btn') timerId = null; btn.onclick = function (ev) { // 0. 清除定时器 clearTimeout(timerId); // 1. 获取当前的时间 var cTime = Date.now(); console.log('------之前-----'); // 2. 开启定时器 timerId = setTimeout(function () { console.log((Date.now() - cTime) 'ms后执行'); } 200); console.log('------之后-----'); // 3. 耗时的任务 for(var i = 0; i < 1000000000; i ){ }}

2. 代码划分

· 初始化代码

· 回调代码

3. js引擎执行代码的基本流程

· 先执行初始化代码: 包含一些特别的代码

• 设置定时器

• 绑定监听

• 网络(ajax)

· 后面在某个时刻才可能执行回调代码(异步)

4. 验证2

· // 1. 定时器1setTimeout(function () { console.log('------2m');} 2000);// 2. 定时器2setTimeout(function () { console.log('------1m');} 1000);// 3. 函数function func() { console.log('--------func()');}func();// 4. 弹窗alert('阻断');// 5. 后续操作console.log('---------弹窗之后操作1-----');console.log('---------弹窗之后操作2-----');

5. 为什么js要用单线程 而不用多线程?

· JavaScript的单线程，与它的用途有关。

· 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。

· 这决定了它只能是单线程，否则会带来很复杂的同步问题

· 图示

•

3. 浏览器内核简介

· 支持浏览器运行的最核心的程序

· Chrome Safari: webkit

· firefox: Gecko

· IE: Trident

· 360 搜狗等国内浏览器: Trident webkit

内核模块组成

· html css文档解析模块

• 负责页面文本的解析

· dom/css模块

• 负责dom/css在内存中的相关处理

· 布局和渲染模块

• 负责页面的布局和效果的绘制

· 定时器模块

• 负责定时器的管理

· 网络请求模块

• 负责服务器请求(常规/Ajax)

· 事件响应模块

• 负责事件的管理

· ......

4. 事件循环模型1. 图示

·

2. 了解

· 模型的组成

• 事件管理模块

• 回调队列

· 代码分类

• 初始化执行代码(同步代码)

• 包含绑定dom事件监听 设置定时器 发送ajax请求的代码

• 回调执行代码(异步代码)

• 处理回调逻辑

· 模型的运转流程

• 执行初始化代码 将事件回调函数交给对应模块管理

• 当事件发生时 管理模块会将回调函数及其数据添加到回调列队中

• 只有当初始化代码执行完后(可能要一定时间) 才会遍历读取回调队列中的回调函数执行

00-设计模式-简介别忘记本质

设计模式的根本目的是减少项目变化所造成的影响概念是为了解决在开发中可能遇到的需求(相似) 而提出的一套解决方法.书籍推荐设计模式大话设计模式23种常见的设计模式常用设计模式工厂设计模式单例设计模式命令模式模板模式策略模式观察者模式命名空间模式目的高内聚 低耦合提高重用性 减少代码冗余扩展性稳定性...01-工厂设计模式1. 简单工厂模式给定不同的材料 生产不同属性值的产品 并把产品返回批量生产 具备相同属性的产品步骤

· 1. 声明工厂函数(接收原料参数)

• 创建对象

• 设置对象属性

• 返回对象

· 2. 使用工厂函数 传递参数 接收对象

2. 复杂工厂模式可以根据不同的类型 创建不同的产品步骤

· 1. 声明工厂函数

• 可根据需求 自己添加相关工厂属性

• 不重要

· 2. 让工厂具备两个能力

• 1. 根据不同生产线名称(type) 和原材料(其他参数);

• 找到对应生产线 生产产品并返回

• 注意:

• 需要判定生产线是否存在

• 2. 扩展生产线的能力

· 3. 开始根据需求 扩展生产线

· 4. 用户开始使用

3. 应用场景需要创建的对象较少客户端不关心对象的创建过程对象的构建十分复杂需要依赖具体环境创建不同实例处理大量具有相同属性的小对象4. 业务需求网页端Token存储

· 根据工厂模式，在工厂中创建对象，工厂中根据不同浏览器类型，创建不同对象。

· 在浏览器支持H5的时候，存储token于localStorage;

· 在不支持h5的浏览器中还是存于cookie.

02-单例设计模式

特点:在整个程序的运行过程中一个类型只有一个实例对象.通过指定的构造函数 无论创建多少次对象 都只有一个js实现单例模式实现方式静态属性

· 步骤

• 同上 只是将全局变量变为静态属性

· 缺点

• 构造函数的静态属性其实也可能被修改 因此这种方法不安全

全局变量

· 步骤

• 01 提供一个全局的变量

• 02 提供一个构造函数Person

• 03 在构造函数内部先判断全局变量是否有值 如果有那么就直接返回

• 04 如果没有 那么就把this赋值给全局变量

• 05 通过this设置属性和方法

· 缺点:

• 使用一个全局变量来保存单例对象 该全局变量在整个作用域中都可以被访问或者是修改 可能会轻易的被覆盖或者是修改.

• 修改之后 创建出来的实例对象就不再是之前的那个单例对象了.

优化

· 即时函数

闭包-惰性函数

· 步骤

• 01 提供构造函数

• 02 在构造函数内部提供一个私有变量(instance)

• 03 使用惰性函数定义来更新构造函数(直接把私有变量的值返回)

• 04 使用this设置属性和方法

• 05 把this赋值给私有变量

· 问题

• 01 原型对象 在创建对象之后设置的原型对象和这个实例对象的原型对象并非是同一个 新设置的原型属性和方法无法访问

• 02 构造函数 对象的构造函数属性指向的是旧的构造函数

· 优化

• 01 提供一个构造函数

• 02 在构造函数内部声明一个私有的变量

• 03 使用惰性函数定义更新构造函数的实现(直接把instance返回)

• 04 设置原型对象[新构造函数的原型对象 = 旧构造函数的原型对象

• 05 使用新的构造函数创建实例对象 并且赋值给instance

• 06 修正对象的构造函数指向

• 07 通过instance设置实例属性和方法

应用场景只需要有一个对象的时候避免 重复创建 删除对象03-观察者设计模式

又称为发布-订阅模式有人发布有人订阅还可以取消订阅一旦有人发布 订阅者就可以收到消息主动权在发布者手中举例订阅报纸

· 报社有新版报纸发行 会送给你一份

使用效果订阅

· lk.addTypeTargetAction('h5' stu1 stu1.noup);

· lk.addTypeTargetAction('h5' stu2 stu1.noup);

· lk.addTypeTargetAction('iOS' stu2 stu2.baoming);

发布

· lk.publishMsg('h5' 'h5开班了 学费99');

取消订阅

· lk.removeType('h5');

· lk.removeTarget(stu1);

· lk.removeTypeTarget('h5' stu2);

描述一个用户可以订阅很多个类型的消息 做不同的操作04-备忘录模式应用场景函数结果缓存举例

· 一般一个函数 给定相同的参数 都会得到一个固定的结果

· 那么假设这个函数特别耗费性能

· 而我们需要计算10次相同参数的结果

• 就会非常耗费性能

解决方案

· 事先把计算好的结果都存储起来

· 当下次再计算时 先到结果缓存中查看 有就直接返回 没有再计算 再缓存

步骤001 提供一个全局的对象(缓存对象) key-value002 当我们传递参数需要进行计算(逻辑)的时候 先检查缓存对象中是否有对应的结果003 如果有缓存数据 那么就直接使用(可以节省时间 提高效率)004 如果没有缓存数据 那么这个时候再执行计算操作 处理得到结果之后 把这个数据保存起来05-命名空间设计模式命名空间模式:写法:就是把所有的东西都写在一个对象里面.命名:命名空间的名称一般是项目的名称或者是简写 要求所有的字符都大写为什么会使用命名空间?为了防止全局变量的冲突06-策略模式定义一系列的策略，把它们一个个封装成函数，也可以统一封装进一个对象;然后再定义一个方法，该方法可根据参数自动选择执行对应的策略。举例:一个小球 从一个点运动到另外一个点;

· 但运动的效果可以有很多种可能

· 运动效果

• 快进快出

• 慢进快出

• 线性运动

• ...

策略模式实现07-模板模式很多事情的流程步骤都是一模一样 只是部分细节不同此时可以在父类型定义这个模板 封装这些固定的操作子类型重写部分方法举例冲果汁08-命令模式模式优点1.降低对象之间的耦合度。2.新的命令可以很容易地加入到系统中。3.调用同一方法实现不同的功能点餐 做菜