渡一大师课笔记（重点：事件循环、浏览器渲染原理）

响应式原理（渡一）

什么是数据响应式？

函数与数据的关联（重要）

数据变化后，会自动重新运行依赖该数据的函数（重要）

被监控的函数

render、computed回调、watch、watchEffect

函数运行期间用到了响应式数据(响应式数据一定是个对象)

响应式数据变化会导致函数重新运行

defineProperty(渡一)

<code>var obj = {

b: 2,

};

// 得到属性描述符

// var desc = Object.getOwnPropertyDescriptor(obj, 'a');

// console.log(desc);

// 设置属性描述符

Object.defineProperty(obj, 'a', {

value: 10,

writable: false, // 不可重写

enumerable: false, // 不可遍历

configurable: false, // 不可修改描述符本身

});

// Object.defineProperty(obj, 'a', {

// writable: true,

// });

obj.a = 'abc';

console.log(obj.a);

// for (var key in obj) {

// console.log(key);

// }

// var keys = Object.keys(obj);

// console.log(keys);

// console.log(obj);

var aGoods = {

pic: '.',

title: '..',

desc: `...`,

sellNumber: 1,

favorRate: 2,

price: 3,

};

class UIGoods {

get totalPrice() {

return this.choose * this.data.price;

}

get isChoose() {

return this.choose > 0;

}

constructor(g) {

g = { ...g };

Object.freeze(g);

Object.defineProperty(this, 'data', {

get: function () {

return g;

},

set: function () {

throw new Error('data 属性是只读的，不能重新赋值');

},

configurable: false,

});

var internalChooseValue = 0;

Object.defineProperty(this, 'choose', {

configurable: false,

get: function () {

return internalChooseValue;

},

set: function (val) {

if (typeof val !== 'number') {

throw new Error('choose属性必须是数字');

}

var temp = parseInt(val);

if (temp !== val) {

throw new Error('choose属性必须是整数');

}

if (val < 0) {

throw new Error('choose属性必须大于等于 0');

}

internalChooseValue = val;

},

});

console.log(this)

this.a = 1;

Object.seal(this);

}

}

Object.freeze(UIGoods.prototype);

var g = new UIGoods(aGoods);

UIGoods.prototype.haha = 'abc';

// g.data.price = 100;

console.log(g.haha);

/**

* 观察某个对象的所有属性

* @param {Object} obj

*/

function observe(obj) {

for (const key in obj) {

let internalValue = obj[key];

let funcs = [];

Object.defineProperty(obj, key, {

get: function () {

// 依赖收集，记录：是哪个函数在用我

if (window.__func && !funcs.includes(window.__func)) {

funcs.push(window.__func);

}

return internalValue;

},

set: function (val) {

internalValue = val;

// 派发更新，运行：执行用我的函数

for (var i = 0; i < funcs.length; i++) {

funcs[i]();

}

},

});

}

}

function autorun(fn) {

window.__func = fn;

fn();

window.__func = null;

}

constructor的使用（购物车案例）(渡一)

以上代码等价于以下：

<code>// 单件商品的数据

class UIGoods {

constructor(g) {

this.data = g;

this.choose = 0;

}

// 获取总价

getTotalPrice() {

return this.data.price * this.choose;

}

// 是否选中了此件商品

isChoose() {

return this.choose > 0;

}

// 选择的数量+1

increase() {

this.choose++;

}

// 选择的数量-1

decrease() {

if (this.choose === 0) {

return;

}

this.choose--;

}

}

// 整个界面的数据

class UIData {

constructor() {

var uiGoods = [];

for (var i = 0; i < goods.length; i++) {

var uig = new UIGoods(goods[i]);

uiGoods.push(uig);

}

this.uiGoods = uiGoods;

this.deliveryThreshold = 30;

this.deliveryPrice = 5;

}

getTotalPrice() {

var sum = 0;

for (var i = 0; i < this.uiGoods.length; i++) {

var g = this.uiGoods[i];

sum += g.getTotalPrice();

}

return sum;

}

// 增加某件商品的选中数量

increase(index) {

this.uiGoods[index].increase();

}

// 减少某件商品的选中数量

decrease(index) {

this.uiGoods[index].decrease();

}

// 得到总共的选择数量

getTotalChooseNumber() {

var sum = 0;

for (var i = 0; i < this.uiGoods.length; i++) {

sum += this.uiGoods[i].choose;

}

return sum;

}

// 购物车中有没有东西

hasGoodsInCar() {

return this.getTotalChooseNumber() > 0;

}

// 是否跨过了起送标准

isCrossDeliveryThreshold() {

return this.getTotalPrice() >= this.deliveryThreshold;

}

isChoose(index) {

return this.uiGoods[index].isChoose();

}

}

// 整个界面

class UI {

constructor() {

this.uiData = new UIData();

this.doms = {

goodsContainer: document.querySelector('.goods-list'),

deliveryPrice: document.querySelector('.footer-car-tip'),

footerPay: document.querySelector('.footer-pay'),

footerPayInnerSpan: document.querySelector('.footer-pay span'),

totalPrice: document.querySelector('.footer-car-total'),

car: document.querySelector('.footer-car'),

badge: document.querySelector('.footer-car-badge'),

};

var carRect = this.doms.car.getBoundingClientRect();

var jumpTarget = {

x: carRect.left + carRect.width / 2,

y: carRect.top + carRect.height / 5,

};

this.jumpTarget = jumpTarget;

this.createHTML();

this.updateFooter();

this.listenEvent();

}

// 监听各种事件

listenEvent() {

this.doms.car.addEventListener('animationend', function () {

this.classList.remove('animate');

});

}

// 根据商品数据创建商品列表元素

createHTML() {

var html = '';

for (var i = 0; i < this.uiData.uiGoods.length; i++) {

var g = this.uiData.uiGoods[i];

html += `<div class="goods-item">code>

<img src="${g.data.pic}" alt="" class="goods-pic">code>

<div class="goods-info">code>

<h2 class="goods-title">${g.data.title}</h2>code>

<p class="goods-desc">${g.data.desc}</p>code>

<p class="goods-sell">code>

<span>月售 ${g.data.sellNumber}</span>

<span>好评率${g.data.favorRate}%</span>

</p>

<div class="goods-confirm">code>

<p class="goods-price">code>

<span class="goods-price-unit">￥</span>code>

<span>${g.data.price}</span>

</p>

<div class="goods-btns">code>

<i index="${i}" class="iconfont i-jianhao"></i>code>

<span>${g.choose}</span>

<i index="${i}" class="iconfont i-jiajianzujianjiahao"></i>code>

</div>

</div>

</div>

</div>`;

}

this.doms.goodsContainer.innerHTML = html;

}

increase(index) {

this.uiData.increase(index);

this.updateGoodsItem(index);

this.updateFooter();

this.jump(index);

}

decrease(index) {

this.uiData.decrease(index);

this.updateGoodsItem(index);

this.updateFooter();

}

// 更新某个商品元素的显示状态

updateGoodsItem(index) {

var goodsDom = this.doms.goodsContainer.children[index];

if (this.uiData.isChoose(index)) {

goodsDom.classList.add('active');

} else {

goodsDom.classList.remove('active');

}

var span = goodsDom.querySelector('.goods-btns span');

span.textContent = this.uiData.uiGoods[index].choose;

}

// 更新页脚

updateFooter() {

// 得到总价数据

var total = this.uiData.getTotalPrice();

// 设置配送费

this.doms.deliveryPrice.textContent = `配送费￥${this.uiData.deliveryPrice}`;

// 设置起送费还差多少

if (this.uiData.isCrossDeliveryThreshold()) {

// 到达起送点

this.doms.footerPay.classList.add('active');

} else {

this.doms.footerPay.classList.remove('active');

// 更新还差多少钱

var dis = this.uiData.deliveryThreshold - total;

dis = Math.round(dis);

this.doms.footerPayInnerSpan.textContent = `还差￥${dis}元起送`;

}

// 设置总价

this.doms.totalPrice.textContent = total.toFixed(2);

// 设置购物车的样式状态

if (this.uiData.hasGoodsInCar()) {

this.doms.car.classList.add('active');

} else {

this.doms.car.classList.remove('active');

}

// 设置购物车中的数量

this.doms.badge.textContent = this.uiData.getTotalChooseNumber();

}

// 购物车动画

carAnimate() {

this.doms.car.classList.add('animate');

}

// 抛物线跳跃的元素

jump(index) {

// 找到对应商品的加号

var btnAdd = this.doms.goodsContainer.children[index].querySelector(

'.i-jiajianzujianjiahao'

);

var rect = btnAdd.getBoundingClientRect();

var start = {

x: rect.left,

y: rect.top,

};

// 跳吧

var div = document.createElement('div');

div.className = 'add-to-car';

var i = document.createElement('i');

i.className = 'iconfont i-jiajianzujianjiahao';

// 设置初始位置

div.style.transform = `translateX(${start.x}px)`;

i.style.transform = `translateY(${start.y}px)`;

div.appendChild(i);

document.body.appendChild(div);

// 强行渲染

div.clientWidth;

// 设置结束位置

div.style.transform = `translateX(${this.jumpTarget.x}px)`;

i.style.transform = `translateY(${this.jumpTarget.y}px)`;

var that = this;

div.addEventListener(

'transitionend',

function () {

div.remove();

that.carAnimate();

},

{

once: true, // 事件仅触发一次

}

);

}

}

var ui = new UI();

// 事件

ui.doms.goodsContainer.addEventListener('click', function (e) {

if (e.target.classList.contains('i-jiajianzujianjiahao')) {

var index = +e.target.getAttribute('index');

ui.increase(index);

} else if (e.target.classList.contains('i-jianhao')) {

var index = +e.target.getAttribute('index');

ui.decrease(index);

}

});

window.addEventListener('keypress', function (e) {

if (e.code === 'Equal') {

ui.increase(0);

} else if (e.code === 'Minus') {

ui.decrease(0);

}

});

浏览器是如何渲染页面的？(渡一)

<code><h1>Mr.Yuan is awesome!</h1>

<button>change</button>

<script>

var h1 = document.querySelector('h1');

var btn = document.querySelector('button');

// 死循环指定的时间

function delay(duration) {

var start = Date.now();

while (Date.now() - start < duration) { }

}

btn.onclick = function () {

h1.textContent = '袁老师很帅！';

delay(3000);

};

</script>

点击按钮后，会发生什么呢？

<见具体演示>

任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释:

每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。

在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行

https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

延时队列：用于存放计时器到达后的回调任务，优先级「中」交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」微队列：用户存放需要最快执行的任务，优先级「最高」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如：

<code>// 立即把一个函数添加到微队列

Promise.resolve().then(函数)

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

计算机硬件没有原子钟，无法做到精确计时操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差

要是使用 Promise、MutationObserver

例如：

<code>// 立即把一个函数添加到微队列

Promise.resolve().then(函数)

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

[外链图片转存中…(img-HP1VZIML-1683955406483)]

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

计算机硬件没有原子钟，无法做到精确计时操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差