网上很流行的一行代码，据说是谷歌工程师写的，它的作用是给页面所有元素增加一个随机颜色的外边框。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

运行效果如下图：

这个代码虽然只有一行，但是包含的知识点不少，网上有很多解析。我也说下自己的理解，然后最后推荐在实务中使用TreeWalker对象进行遍历。

我的理解其中主要包含如下4个知识点：

1. [].forEach.call
2. $$("*")
3. a.style.outline
4. (~~(Math.random()*(1<<24))).toString(16)

1 [].forEach.call

1.1 [].forEach

forEach是数组遍历的一个方法，接收一个函数参数用来处理每一个遍历的元素，常规的使用姿势是：

let arr = [3, 5, 8];
arr.forEach((item) => {
    console.log(item);
})
// 控制台输出：
//  3
//  5
//  8

那么下面的写法：

[].forEach

只是为了得到 forEach 这个方法，这个方法是定义都在Array.prototype上的方法，[] 表示空数组，可以访问到数组原型对象上的方法。

得到 forEach 这个方法后，就可以通过 call 发起调用。

1.2 call

call函数用来调用一个函数，和普通调用不同，call调用可以修改函数内this指向。

常规调用函数的姿势：

let object1 = {
    id: 1,
    printId() {
        console.log(this.id)
    }
}
object1.printId();
// 控制台输出：
//  1

因为是正常调用，方法内的this指向object1对象，所以上例输出1。

使用call调用printId方法，并传入另外一个对象object2：

let object2 = {
    id: 2
}
object1.printId.call(object2);
// 控制台输出：
//  2

这里使用call调用object1.printId函数，传入了object2对象，那么printId函数内的this就是指向object2这个对象，所以结果输出2。

1.3 综合分析

综合来看：

[].forEach.call( $$("*"), function(a){} )

这行代码的意思就是遍历如下对象：

$$("*") 

然后用如下方法处理每个元素：

function(a){}

其中，a就是遍历的的每一个元素。

那么

$$("*") 

指什么呢？我们接着往后看。

2 $$("*")

这个写法用来获取页面所有元素，相当于

document.querySelectorAll('*')

只是

$$("*") 

只能在浏览器开发控制台内使用，这个是浏览器开发控制台提供出来的预定义API，至于为什么，大家可以参考底部的参考文章。

3 a.style.outline

设置元素边框，估计很多人都知道，但是设置外边框就比较少人了解了，外边框的效果和边框类似，唯一不同的点是外边框盒子模型的算式，仅仅做装饰使用。

<style type="text/css">
    #swiper {
        width: 100px;
        height: 100px;
        outline: 10px solid;
    }
style>

<div id="swiper">div>

运行效果：

div元素实际的宽高还是100 * 100，如果把outline改成border，那么div元素的实际宽高就是120 * 120，因为要加上border的宽度。

外边框设置的最大作用就是：

可以设置元素边框效果，但是不影响页面布局。

4 (~~(Math.random()*(1<<24))).toString(16)

这个代码从结果是得到一个16进制的颜色值，但是为什么能得到呢？

16进制的颜色值：81f262

4.1 Math.random()

这个容易理解，就是随机 [0, 1) 的小数。

4.2 1<<24

这个表示1左移24位，二进制表示如下所示：

1 0000 0000 0000 0000 0000 0000  

十进制就是表示：

2^24

那么

Math.random() * (1<<24)

就会得到如下范围的一个随机浮点数：

[0, 2^24) 

4.3 两次按位取反

因为Math.random()得到是一个小数，所以两次按位取反就是为了过滤掉小数部分，最后得到整数。

所以

(~~(Math.random()*(1<<24)))

就会得到如下范围的一个随机整数：

[0, 2^24) 

4.4 转成字符串toString(16)

最后就是把上面得到的数字转成16进制，我们知道toString()是用来把相关的对象转成字符串的，它可以接收一个进制参数，转成不同的进制，默认是转成10进制。

对象.toString(2); // 转成2进制
对象.toString(8); // 转成8进制
对象.toString(10); // 转成10进制
对象.toString(16); // 转成16进制

上面的得到的随机整数用二进制表示就是：

0000 0000 0000 0000 0000 0000  
到
1111 1111 1111 1111 1111 1111

那么2进制转成16进制，是不是就是每4位转一个？

最终是不是就得到一个6个长度的16进制数了？

这个字符串加上#是不是就是16进制的颜色值了？

形如：

#ac83ce
#b74384
等等...

实务应用

虽然上面的代码简短，并且知识含量也很高，但是在实务中如果要遍历元素，我并不建议使用这样的方式。

主要原因是两个：

1. $$("*") 只在开发控制台可以用，正常项目代码中不能用。
2. 选中所有元素再遍历，性能低。

如果实务中要遍历元素，建议是用 TreeWalker。querySelectorAll是一次性获取所有元素然后遍历，TreeWalker是迭代器的方式，性能上 TreeWalker 更优，另外 TreeWalker 还支持各种过滤。

参考如下示例：

// 实例化 TreeWalker 对象
let walker = document.createTreeWalker(
    document.documentElement,
    NodeFilter.SHOW_ELEMENT
);
// 遍历
let node = walker.nextNode();
while (node !== null) {
    node.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
    node = walker.nextNode();
}

虽然代码更多，当时性能更好，并且支持各种过滤等，功能也更加强大。

如果大家有学到新姿势，麻烦帮忙点个赞，谢谢。欢迎大家留言讨论。

参考资料

JavaScript中的$$(*)代表什么和$选择器的由来：ourjs.com/detail/54ab…

querySelectorAll vs NodeIterator vs TreeWalker：stackoverflow.com/questions/6…

作者：晴空闲云
来源：https://juejin.cn/post/7034777643014684703

总结放前面：

console.log在打印引用数据类型的时候表现和我们的预期不相符合是因为console.log打印的是引用数据类型的一个快照，因为浏览器或者我们异步代码的原因在快照之后修改了对应的内存空间的值，所以等我们展开打印浏览器通过指针重新访问内存空间的时候会获得最新的值导致展开和不展开的表现不一致。

不知道各位大佬有没有遇到过这样的情况，我在代码里面console.log()了一个数组，然后打开浏览器控制台，看着是空的就像这样[]，结果我点展开它里面又有值了，但是在代码打印的位置使用length或者获取数组里面的值都是不行的，🤯 就像下面这样：

let arr = [];
const setFun = () => {
    return new Promise((reslove) => {
        let arr1 = [1, 2, 3];
        setTimeout(() => {
            reslove(arr1);
        }, 2000)
    });
}
const getFun = async () => {
    let result = await setFun();
    result.forEach((item) => {
        arr.push(item);
    })
}
getFun();
console.log(arr);

或者说我在某处代码console.log()一个对象,明明控制台打印对象的某一个key是1，但是我展开这个对象里面的key居然是2，我在代码里面获取的也是2，就像下面这样：
不知道各位大佬遇到这样的情况是怎么个想法，反正我第一次遇到的时候我还以为是我的谷歌浏览器出问题了，擦💦我甚至都想卸载重装一波。后来动了动🧠，觉得可能是代码执行顺序的原因，所以我就在代码里面打了断点看了一下,在执行console.log()的时候arr的确是一个空的对象，对arr数组的操作是在console.log()执行之后才进行的。

所以说这到底是为什么呐？
其实这个还是和js的引用数据类型还有console.log()的设计有关系。我们都知道引用数据类型大体上可以说是由两部分组成：指针和内容，指针保存的内容就是一个内存地址的指向，指针一般都是基本数据类型保存在栈内存，内容就包含着这个引用数据类型的实际值一般保存在堆内存。😍 而console.log呐打印的时候只是打印了这个引用数据类型的一个快照，快照中的指针和内容都是照相的时候的内容，在console.log()之后，修改了这个引用数据类型，或者说在这之前修改的操作在一个异步的内容里面，当我们去看打印的时候，这个引用数据类型的内容可能就被修改了，但是因为快照的原因我们看到的还是以前的值。
然后当我们展开的时候，浏览器会利用指针去内存重新读取内容，因为快找的指针是没有发生变化的，所以就看到了改变之后内存，这就是为什么我们展开和不展开看到的结果是不一样的原因了。当然造成这样的原因不一定都是因为我们代码在异步里面操作这个引用数据类型。
还有就是浏览器在进行I/O的时候异步会提升性能，所有这就是为什么有时候我们写的同步代码依然会出现不一致的情况，就像我第二个图一样。
下面就验证一下我上面的想法，当我把上面的代码修改一下，直接替换：

let arr = [];
const setFun = () => {
    return new Promise((reslove) => {
        let arr1 = [1, 2, 3];
        setTimeout(() => {
            reslove(arr1);
        }, 2000)
    });
}
const getFun = async () => {
    let result = await setFun();
    arr = result; // 修改部分
}
getFun();
console.log(arr);

那么我们看到的结果就和上面不一样了，这个展开的表现是和不展开是一样的。
相信各位大佬也知道是啥原因了，因为这次直接替换，修改的是指针的指向并没有修改之前引用数据饿类型的内存空间，所以当我们展开的时候快照中指针保存的地址还是空的，这样我们看到的和看之前的想法就对应上了。
注：该问题只存在于打印引用数据类型，基本数据类型不会出现。

作者：江湖不渡i
来源：https://juejin.cn/post/7032504319584780325

✨12 个救命的 CSS 技巧✨

1. 使用 Shape-outside 在浮动图像周围弯曲文本

它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码：

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. 魔法组合

这个小组合实际上可以防止你在 HTML 中遇到的大多数布局错误的问题。我们确实不希望水平滑块或绝对定位的项目做他们想做的事情，也不希望到处都是随机的边距和填充。所以这是你们的魔法组合。

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

有时“display:block”没有用，但在大多数情况下，你会将 <a> 和 <span> 视为与其他块一样的块。所以，在大多数情况下，它实际上会帮助你！

3. 拆分 HTML 和 CSS

这更像是一种“工作流程”类型的技巧。我建议你在开发时创建不同的 CSS 文件，最后才合并它们。例如，一个用于桌面，一个用于移动等。最后，你必须合并它们，因为这将有助于最大限度地减少您网站的 HTTP 请求数量。

同样的原则也适用于 HTML。如果你不是在 Gatsby 等 SPA 环境中进行开发，那么 PHP 可用于包含 HTML 代码片段。例如，你希望在单独的文件中保留一个“/modules”文件夹，该文件夹将包含导航栏、页脚等。因此，如果需要进行任何更改，你不必在每个页面上都对其进行编辑。模块化越多，结果就越好。

4. ::首字母

它将样式应用于块级元素的第一个字母。因此，我们可以从印刷或纸质杂志中引入我们熟悉的效果。如果没有这个伪元素，我们将不得不创建许多跨度来实现这种效果。例如：

这是如何做到的？代码如下：

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5. 四大核心属性

CSS 动画提供了一种相对简单的方法来在大量属性之间平滑过渡。良好的动画界面依赖于流畅流畅的体验。为了在我们的动画时间线中保持良好的性能，我们必须将我们的动画属性限制为以下四个核心：

• 缩放 - transform:scale(2)

• 旋转 - transform:rotate(180deg)

• 位置 – transform:translateX(50rem)

• 不透明度 - opacity: 0.5

边框半径、高度/宽度或边距等动画属性会影响浏览器布局方法，而背景、颜色或框阴影的动画会影响浏览器绘制方法。所有这些都会大大降低您的 FPS (FramesPerSecond)。您可以使用这些属性来产生一些有趣的效果，但应谨慎使用它们以保持良好的性能。

6. 使用变量保持一致

保持一致性的一个好方法是使用 CSS 变量或预处理器变量来预定义动画时间。

:root{ timing-base: 1000;}

在不定义单元的情况下设置基线动画或过渡持续时间为我们提供了在 calc() 函数中调用此持续时间的灵活性。此持续时间可能与我们的基本 CSS 变量不同，但它始终是对该数字的简单修改，并将始终保持一致的体验。

7. 圆锥梯度

有没有想过是否可以只使用 CSS 创建饼图？好消息是，您实际上可以！这可以使用 conic-gradient 函数来完成。此函数创建一个由渐变组成的图像，其中设置的颜色过渡围绕中心点旋转。您可以使用以下代码行执行此操作：

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. 更改文本选择颜色

要更改文本选择颜色，我们使用 ::selection。它是一个伪元素，在浏览器级别覆盖以使用您选择的颜色替换文本突出显示颜色。使用光标选择内容后即可看到效果。

::selection {
     background-color: #f3b70f;
 }

9. 悬停效果

悬停效果通常用于按钮、文本链接、站点的块部分、图标等。如果您想在有人将鼠标悬停在其上时更改颜色，只需使用相同的 CSS，但要添加 :hover到它并更改样式。这是您的方法；

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

当有人将鼠标悬停在 h2 标签上时，这会将您的 h2 标签的颜色从黑色更改为红色。它非常有用，因为如果您不想更改它，则不必再次声明字体大小或粗细。它只会更改您指定的任何属性。

10.投影

添加此属性可为透明图像带来更好的阴影效果。您可以使用给定的代码行执行此操作。

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{

     width: 100% ;

      height: 80vh ;

      display: grid ;

      place-items: center center;

}

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div>

  <div></div>

</div>

.center {

  display: flex;

  align-items: center;

  justify-content: center;

}



.center div {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: #b8b7cd;

}

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。

• align-items: center; 这可确保 flex 子项与横轴的中心对齐。

• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

作者：海拥
来源：https://juejin.cn/post/7024372412632268813

尽管许多新技术使网站创建过程变得更简单、更高效，但 HTML 始终是核心。随着 HTML5 的普及，在 2014 年，这种标记语言发生了很多变化，变得更加友好，浏览器对新标准的支持热度也越来越高。而HTML并不止于此，还在不断发生变化，并且可能会获得一些特性来证明对 HTML6 的命名更改是合理的。

支持原生模式

该元素<dialog> 将随 HTML6 一起提供。它被认为等同于用 JavaScript 开发的模态，并且已经标准化，但只有少数浏览器完全支持。但这种现象会改变，很快它将在所有浏览器中得到支持。

这个元素在其默认格式下，只会将光标显示在它所在的位置上，但可以使用 JavaScript 打开模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="确定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默认形式下，该元素创建一个灰色背景，其下方是非交互式内容。

可以在 <dialog> 其中的表单上使用一种方法，该方法将发送值并将其传递回自身 <dialog>。

总的来说，这个标签在用户交互和改进的界面中变得有益。

可以通过更改 <dialog> 标签的 open 属性以控制打开和关闭。

<dialog open>
  <p>组件内容</p>
</dialog>

没有 JavaScript 的单页应用程序

FutureClaw 杂志主编 Bobby Mozumder 建议：

将锚元素链接到 JSON/XML、API 端点，让浏览器在内部将数据加载到新的数据结构中，然后浏览器将 DOM 元素替换为根据需要加载的任何数据。初始数据（以及标准错误响应）可以放在标题装置中，如果需要，可以稍后替换。

据他介绍，这是单页应用程序网页设计模式，可以提高响应速度和加载时间，因为不需要加载 JavaScript。

自由调整图像大小

HTML6 爱好者相信即将到来的更新将允许浏览器调整图像大小以获得更好的观看体验。

每个浏览器都难以呈现相对于设备和屏幕尺寸的最佳图像尺寸，不幸的是，srce 标签 img 在处理这个问题时不是很有效。

这个问题可以通过一个新标签 <srcset> 来解决，它使浏览器在多个图像之间进行选择的工作变得更加容易。

专用库

将可用库引入 HTML6 绝对是提高开发效率的重要一步。

微格式

很多时候，需要在互联网上定义一般信息，而这些一般信息可以是任何公开的信息，例如电话号码、姓名、地址等。微格式是能够定义一般数据的标准。微格式可以增强设计者的能力，并可以减少搜索引擎推断公共信息所需的努力。

自定义菜单

尽管标签<ul>、<ol>非常有用，但在某些情况下仍有一些不足之处。可以处理交互元素的标签将是一个不错的选择。

这就是创建标签 <menu> 的驱动力，它可以处理按钮驱动的列表元素。

<menu type="toolbar">
  <li><button>个人信息</button></li>
  <li><button>系统设置</button></li>
  <li><button>账号注销</button></li>
</menu>

因此 <menu>，除了能够像普通列表一样运行之外，还可以增强 HTML 列表的功能。

增强身份验证

虽然HTML5在安全性方面还不错，浏览器和网络技术也提供了合理的保护。毫无疑问，在身份验证和安全领域还有很多事情可以做。如密钥可以异地存储；这将防止不受欢迎的人访问并支持身份验证。使用嵌入式密钥而不是 cookie，使数字签名更好等。

集成摄像头

HTML6 允许以更好的方式使用设备上的相机和媒体。将能够控制相机、它的效果、模式、全景图像、HDR 和其他属性。

总结

没有什么是完美的，HTML 也不是完美的，所以 HTML 规范可以做很多事情来使它更好。应该对一些有用的规范进行标准化，以增强 HTML 的能力。小的变化已经开始推出。如增强蓝牙支持、p2p 文件传输、恶意软件保护、云存储集成，下一个 HTML 版本可以考虑一下。

作者：天行无忌
来源：https://juejin.cn/post/7032874253573685261

由于原始的DOM提供的API过长，不方便记忆，
于是我采用对象风格的形式封装了一个DOM库->源代码链接
这里对新封装的API进行总结
同样，用增删改查进行划分，我们先提供一个全局的window.dom对象

增

创建节点

create (string){
        const container = document.createElement("template")//template可以容纳任意元素
        container.innerHTML = string.trim();//去除字符串两边空格
        return container.content.firstChild;//用template,里面的元素必须这样获取  
}

首先，如果用原始的DOM API，我们想要创建一个div，div里面含有一个文本'hi'，需要分为两步

1. document.createElement('div')

2. div.innerText = 'hi'

而这里，只需要一步就能完成dom.create('

新增哥哥

before(node,node2){
    node.parentNode.insertBefore(node2,node);
}

这个比较简单，找到爸爸节点，然后使用```JavaScript，新增一个node2即可

新增弟弟

after(node,node2){
    node.parentNode.insertBefore(node2,node.nextSibling); //把node2插到node下一个节点的前面,即使node的下一个节点为空，也能插入  
}

由于原始的DOM只有insertBefore，并没有insertAfter，所以要实现这个功能我们需要一个曲线救国的方法：
node.nextSibling 表示node节点的下一个节点，
而想在node的后面插入一个节点，就等于说在node的下一个节点前插入一个新节点node2即可
如上代码就是实现了这个操作，而即使node的下一个节点为空，也能成功插入

新增儿子

 append(parent,node){
        parent.appendChild(node)
}

找到爸爸节点，用appendChild即可

新增爸爸

 wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
}

思路如图：

分为两步走：

1. 先把新增的爸爸节点，放到老节点的前面

2. 再把老节点放入新增的爸爸节点的里面

这样就可以使新的爸爸节点包裹住老节点

使用示例：

const newDiv = dom.create('
')
dom.wrap(test, newDiv)

删

删节点

remove(node){
       node.parentNode.removeChild(node)
       return node
}

找到爸爸节点，removeChild即可

删除所有子节点

empty(node){
    const array = []
    let x = node.firstChild
    while (x) {
        array.push(dom.remove(node.firstChild))
        x = node.firstChild//x指向下一个节点
    }
    return array
}

其实一开始的思路，是用for循环

for(let i = 0;i<childNodes.length;i++){
    dom.remove(childNodes[i])
}

但这样的思路有一个问题：childNodes.length是会随着删除而变化的
所以我们需要改变思路，用while循环：

1. 先找到该节点的第一个儿子赋值为x

2. 当x是存在的，我们就把它移除，并放入数组里面(用于获取删除的节点的引用)

3. 再把x赋值给它的下一个节点(当第一个儿子被删除后，下一个儿子就变成了第一个儿子)

4. 反复操作，直到所有子节点被删完

改

读写属性

 attr(node,name,value){
        if(arguments.length === 3){
            node.setAttribute(name,value)
        }else if(arguments.length === 2){
            return node.getAttribute(name)
        }
}

这里运用重载，实现两种不同的功能：

1. 当输入的参数是3个时，就写属性

2. 当如数的参数是2个时，读属性

使用示例：

//写：
//给 
test
 添加属性
dom.attr(test,'title','Hi,I am Wang')
//添加之后：
test
//读：
const title = dom.attr(test,'title')
console.log(`title:${title}`)
//打印出：title:Hi,Hi,I am Wang

读写文本内容

text(node,string){
    if(arguments.length === 2){
        if('innerText' in node){
            node.innerText = string
        }else{
            node.textContent = string
        }
    }else if(arguments.length === 1){
        if('innerText' in node){
            return node.innerText
        }else{
            return node.textContent
        }
    }
}

为什么这里需要适配，innerText与textContent？
因为虽然现在绝大多数浏览器都支持两种，但还是有非常旧的IE只支持innerText，所以这里是为了适配所有浏览器

同时与读写属性思路相同：

1. 当输入的参数是2个时，就在节点里写文本

2. 当输入的参数是1个时，就读文本内容

读写HTML的内容

html(node,string){
    if(arguments.length === 2){
        node.innerHTML = string
    }else if(arguments.length === 1){
            return node.innerHTML
    }
}

同样，2参数写内容，1参数读内容

修改Style

style(node,name,value){
        if(arguments.length === 3){
            //dom.style(div,'color','red')
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
             //dom.style(div,'color')
            return node.style[name]    
            }else if(name instanceof Object){
                //dom.style(div,{color:'red'})
                const Object = name
                for(let key in Object){
                    //key:border/color
                    //node.style.border = ...
                    //node.style.color = ...
                    node.style[key] = Object[key]
                } 
            }
       }
}

思路：

1. 首先判断输入的参数，如果为3个如：dom.style(div,'color','red')

2. 就更改它的style

3. 如果输入参数为2个时，先判断输入name的值的类型

4. 如果是字符串，如dom.style(div,'color')，就返回style的属性

5. 如果是对象,如dom.style(div,{border:'1px solid red',color:'blue'})，就更改它的style

增删查class

class:{
    add(node,className){
        node.classList.add(className)    
    },
    remove(node,className){
        node.classList.remove(className)
    },
    has(node,className){
        return node.classList.contains(className)
    }
}

注：查找一个元素的classList里是否有某一个class, 用的是contains

添加事件监听

on(node,eventName,fn){
       node.addEventListener(eventName,fn) 
}

使用示例：

const fn = ()=>{
    console.log('点击了')
}
dom.on(test,'click',fn)

这样当点击id为test的div时，就会打印出'点击了'

删除事件监听

off(node,eventName,fn){
    node.removeEventListener(eventName,fn)
}

查

获取单个或多个标签

find(selector,scope){
    return (scope || document).querySelectorAll(selector)
}

可以在指定区域或者全局的document里找

使用示例：
在document中查询：

const testDiv = dom.find('#test')[0]
console.log(testDiv)

在指定范围内查询：

 <div>
        <div id="test"><span>test1span>
        <p class="red">段落标签p>
        div>
        <div id="test2">
            <p class="red">段落标签p>
        div>
div>

我只想找test2里面的red，应该怎么做

const test2 = dom.find('#test2')[0]
console.log(dom.find('.red',test2)[0])

注意：末尾的[0]别忘记写

获取父元素

parent(node){
    return node.parentNode
}

获取子元素

children(node){
    return node.children 
}

获取兄弟姐妹元素

siblings(node){
    return Array.from(node.parentNode.children).filter(n=>n!==node) //伪数组变数组再过滤本身
}

找到爸爸节点，然后过滤掉自己本身

获取弟弟

next(node){
    let x = node.nextSibling
    while(x && x.nodeType === 3){
        x = x.nextSibling
    }
    return x
}

为什么这里需要while(x && x.nodeType === 3)？
因为我们不想获取文本节点(空格回车等)
所以当读到文本节点时，自动再去读取下一个节点，直到读到的内容不是文本节点为止

获取哥哥

previous(node){
        let x = node.previousSibling
        while(x && x.nodeType === 3){
            x = x.previousSibling
        }
        return x
}

与上面思路相同

遍历所有节点

each(nodeList,fn){
        for(let i=0;i<nodeList.length;i++){
            fn.call(null,nodeList[i])
        }
}

注：null用于填充this的位置
使用示例：
利用fn可以更改所有节点的style

const t = dom.find('#travel')[0]
dom.each(dom.children(t),(n)=>dom.style(n,'color','red'))

遍历每个节点，把每个节点的style都更改

用于获取排行老几

index(node){
    const list = dom.children(node.parentNode)
    let i;
    for(i=0;i<list.length;i++){
        if(list[i]===node){
             break
        }
    }
    return i
}

思路：

1. 获取爸爸节点的所有儿子

2. 设置一个变量i

3. 如果i等于想要查询的node

4. 退出循环，返回i值
   

作者：PrayWang
来源：https://juejin.cn/post/7038171258617331719

先上结论：

• 执行 async 函数，返回的都是 Promise 对象

• Promise.then() 对应 await

• Promise.catch() 对应 try...catch

执行 async 函数，返回的都是 Promise 对象

先看下面两个函数：

async function test1() {
  return 1;
}
async function test2() {
  return Promise.resolve(2);
}
const res1 = test1();
const res2 = test2();
console.log('res1', res1);
console.log('res1', res2);

test1 和 test2 两个函数前面都加了 async，说明这两个都是异步函数，并且如果一个函数前加了 async，那么这个函数的返回值就是一个 Promise（不论这个函数返回的是什么，都会被 JS 引擎包装成 Promise 对象）。

输出结果如下图：

Promise.then() 对应 await

1.直接在一个 await 后面加 promise 对象

看下面的代码：

async function test3() {
  const p3 = Promise.resolve(3);
  p3.then(data => {
    console.log('data', data);
  });

  const data = await p3;
  console.log('data', data);
}
test3();

输出结果如下图：

可以看到输出是相同的，这就说明了 Promise 的 then() 方法对应 await。

2.直接在一个 await 后面加一个基本数据类型的值

看下面的例子：

async function test4() {
  const data4 = await 4; // await Promise.resolve(4)
  console.log('data4', data4);
}
test4();

输出结果如下图：

可以看到输出的是 4，上面的 await 4 就相当于 await Promise.resolve(4)，又因为 await 相当于 then()，所以输出的就是 4。

3.直接在一个 await 后面加一个异步函数

看下面的例子：

async function test1() {
  return 1;
}
async function test5() {
  const data5 = await test1();
  console.log('data5', data5);
}
test5();

输出结果如下图：

可以看到输出的是 1，首先 test5() 执行，然后执行 test1()，test1 返回数字 1，相当于返回 Promise.resolve(1)，await 又相当于 then()，所以输出 1。

:::tip 提示 开发中最常用的就是第三种，await 后面跟一个异步函数，所以一定要掌握！ :::

Promise.catch() 对应 try...catch

看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  const data6 = await p6;
  console.log('data6', data6);
}
test6();

输出结果如下图：

可以看到没有捕获到错误，那应该怎么做呢？没错，可以使用 try...catch。 看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  try {
    const data6 = await p6;
    console.log('data6', data6);
  } catch (e) {
    console.log('e', e); // 顺利捕获错误
  }
}
test6();

输出结果如下图：

可以看到已经成功捕获到错误了！

作者：ShiYan_Chen
来源：https://juejin.cn/post/7038152028664627230

前言

❝ 最近，我们老大让小白搞一下登录模块，登录模块说简单也简单，复杂也复杂。本章主要讲一下，会话过期后，token 刷新的一系列的事。 ❞

需求

在一个页面内,当请求失败并且返回 302 后,判断是接口过期还是登录过期,如果是接口过期,则去请求新的token,然后拿新的token去再次发起请求.

思路

• 当初，想了一个黑科技（为了偷懒），就是拿到新的token后，直接强制刷新页面，这样一个页面内的接口就自动刷新啦~（方便是方便，用户体验却不好）

• 目前，想到了重新请求接口时，可以配合订阅发布模式来提高用户体验

响应拦截

首先我们发起一个请求 axios({url:'/test',data:xxx}).then(res=>{})

拦截到302后，我们进入到刷新token逻辑

响应拦截代码

axios.interceptors.response.use(
    function (response) { 
        if (response.status == 200) { 
            return response;
        }
    },
    (err) => {
        //刷新token
        let res = err.response || {}; 
        if (res.data.meta?.statusCode == 302) {
            return refeshToken(res);
        } else {  
            return err;
        }
    }
);

我们后台的数据格式是根据statusCode来判断过期（你们可以根据自己的实际情况判断），接着进入refrshToken方法~

刷新token方法

//避免其他接口同时请求(只请求一次token接口)
let isRefreshToken = false;
const refeshToken = (response) => {
   if (!isRefreshToken) {
            isRefreshToken = true;
            axios({
                //获取新token接口
                url: `/api/refreshToken`,
            })
                .then((res) => {
                    const { data = '', meta = {} } = res.data;
                    if (meta.statusCode === 200) {
                        isRefreshToken = false; 
                        //发布 消息
                        retryOldRequest.trigger(data);
                    } else { 
                        history.push('/user/login');
                    }
                })
                .catch((err) => { 
                    history.push('/user/login');
                });
        }
        //收集订阅者 并把成功后的数据返回原接口
        return retryOldRequest.listen(response);
};

看到这，有的小伙伴就有点奇怪retryOldRequest这个又是什么？没错，这就是我们男二 订阅发布模式队列。

订阅发布模式

大家如果还不了解订阅发布模式，可以点击看一下，里面有大神写的通俗易懂的例子（觉得学到的话，可以顺便帮点赞哦~）。

把失败的接口当订阅者，成功拿到新的token后再发布（重新请求接口）。

以下便是订阅发布模式代码

const retryOldRequest = {
    //维护失败请求的response
    requestQuery: [],

    //添加订阅者
    listen(response) {
        return new Promise((resolve) => {
            this.requestQuery.push((newToken) => { 
                let config = response.config || {};
                //Authorization是传给后台的身份令牌
                config.headers['Authorization'] = newToken;
                resolve(axios(config));
            });
        });
    },

    //发布消息
    trigger(newToken) {
        this.requestQuery.forEach((fn) => {
            fn(newToken);
        });
        this.requestQuery = [];
    },
};

大家可以先不用关注订阅者的逻辑，只需要知道订阅者是每次请求失败后的接口（reponse）就好了。

每次进入refeshToken方法,我们失败的接口都会触发retryOldRequest.listen去订阅，而我们的requestQuery则是保存这些订阅者的队列。

注意:我们订阅者队列requestQuery是保存待发布的方法。而在成功获取新token后，retryOldRequest.trigger就会去发布这些消息（新token）给订阅者（触发订阅队列的方法）。

而订阅者（response）里面有config配置，我们拿到新的token后(发布后)，修改config里面的请求头Autorzation.而借助Promise我们可以更好的拿到新token请求回来的接口数据，一旦请求到数据，我们可以原封不动的返回给原来的接口/test了（因为我们在响应拦截那里返回的是refreshToken,而refreshToken又返回的是订阅者retryOldRequest.listen返回的数据,而Listiner又返回Promise的数据，Promise又在成功请求后resolve出去）。

看到这，小伙伴们是不是觉得有点绕了~

而在真实开发中，我们的逻辑还含有登录过期（与请求过期区分开来）。我们是根据当前时间 - 过去时间 < expiresTime（epiresTime:登录后返回的有效时间）来判断是请求过期还是登录过期的。 以下是完整逻辑
以下是完整代码

const retryOldRequest = {
    //维护失败请求的response
    requestQuery: [],

    //添加订阅者
    listen(response) {
        return new Promise((resolve) => {
            this.requestQuery.push((newToken) => { 
                let config = response.config || {};
                config.headers['Authorization'] = newToken;
                resolve(axios(config));
            });
        });
    },

    //发布消息
    trigger(newToken) {
        this.requestQuery.forEach((fn) => {
            fn(newToken);
        });
        this.requestQuery = [];
    },
};
/**
 * sessionExpiredTips
 * 会话过期：
 * 刷新token失败，得重新登录
 * 用户未授权，页面跳转到登录页面 
 * 接口过期 => 刷新token
 * 登录过期 => 重新登录
 * expiresTime => 在本业务中返回18000ms == 5h
 * ****/

//避免其他接口同时请求
let isRefreshToken = false;
let timer = null;
const refeshToken = (response) => {
    //登录后拿到的有效期
    let userExpir = localStorage.getItem('expiresTime');
    //当前时间
    let nowTime = Math.floor(new Date().getTime() / 1000);
    //最后请求的时间
    let lastResTime = localStorage.getItem('lastResponseTime') || nowTime;
    let token = localStorage.getItem('token');

    if (token && nowTime - lastResTime < userExpir) {
        if (!isRefreshToken) {
            isRefreshToken = true;
            axios({
                url: `/api/refreshToken`,
            })
                .then((res) => {
                    const { data = '', meta = {} } = res.data;
                    isRefreshToken = false;
                    if (meta.statusCode === 200) {
                        localStorage.getItem('token', data);
                        localStorage.getItem('lastResponseTime', Math.floor(new Date().getTime() / 1000)
                        );
                        //发布 消息
                        retryOldRequest.trigger(data);
                    } else {
                       //去登录
                    }
                })
                .catch((err) => {
                    isRefreshToken = false;
                   //去登录
                });
        }
        //收集订阅者 并把成功后的数据返回原接口
        return retryOldRequest.listen(response);
    } else {
        //节流：避免重复运行
       //去登录
    }
};

// http response 响应拦截
axios.interceptors.response.use(
    function (response) { 
        if (response.status == 200) {
            //记录最后操作时间
           localStorage.getItem('lastResponseTime', Math.floor(new Date().getTime() / 1000));
            return response;
        }
    },
    (err) => { 
        let res = err.response || {}; 
        if (res.data.meta?.statusCode == 302) {
            return refeshToken(res);
        } else {
            // 非302 报的错误; 
            return err;
        }
    }
);

以上便是我们这边的业务，如果写的不好请大佬多担待~~

如果有好方案的小伙伴也可以在评论区内互相讨论~

作者：用户3797421129853
来源：https://juejin.cn/post/7037787299202990093

网页的渲染是一个宏任务。 这是我下的一个结论。

别着急反驳，后面我会给出证据。

我们先来聊下什么是调试：

调试是通过工具获取运行过程中的某一时刻或某一段时间的各方面的数据，帮助开发者理清逻辑、分析性能、排查问题等。 JS 的各种运行环境都会提供调试器，除此以外我们也会自己做一些埋点上报来做调试和统计。

我们最常用的调试工具是 JS Debugger，它支持断点，可以在某处断住，查看当前上下文的变量、调用栈等，这对于理清逻辑很有帮助。

但是性能分析的调试工具却不能这样做，不能用断住的方式实时查看，因为会影响数据的真实性。所以这类工具都是通过录制一段时间的数据，然后作事后的统计和分析的方式，常用的是 Chrome Devtools 里的 Performance 工具。（甚至为了避免浏览器插件的影响，还要用无痕模式来运行网页）点击录制按钮 record 开始录制（如果想录制从页面加载开始的数据，就点击 reload 按钮），Performance 会记录下录制时间内各方面的数据。

有哪些数据呢？

网页的运行是有多个线程的，主线程负责通过 Event Loop 的方式来不断的执行 JS 和渲染，也有一些别的线程，比如合成渲染图层的线程，Web Worker 的线程等，渲染的每一帧会绘制到界面上。

网页是这样运行的，那记录的自然也都是这些数据：Performance 会记录网页的每个线程的数据，其中最重要的是主线程，也就是图中的 Main，这部分记录着 Event Loop 的执行过程，记录着 JS 执行的调用栈和页面渲染的流程。看到图中标出的一个个小灰块了么，那就是一个个 Task，也就是宏任务。Event Loop 就是循环执行宏任务。每个 Task 都有自己的调用栈，可以看到函数的执行路径，耗时等信息。图中宽度代表了耗时，可以直观的通过块的宽窄来分析性能。

执行完宏任务会执行所有的微任务，在图中也可以清晰的看到：点击每一个块可以看到代码的位置，可以定位到对应代码，这样就可以分析出哪块代码性能不好。这些是 Main 线程的执行逻辑，也就是通过 Event Loop 来不断执行 JS 和渲染。

当然，还有其他线程，比如光栅化线程，也就是负责把渲染出的图层合并成一帧的线程：总之，就像 Debugger 面前，JS 的执行过程没有秘密一样，在 Performance 面前，网页各线程的执行过程也没有秘密。

说了这么多，就是为了讲清楚调试工具和 Performance 都是干啥的，它记录了哪些信息。

我们想知道渲染是不是一个宏任务，自然可以通过 Performance 来轻易的分析出来。

我们继续看 Main 线程的 Event Loop 执行过程：你会看到一个个很小的灰块，也就是一个个 Task，每隔一段时间都会执行，点击它，就会看到其实他做的就是渲染，包括计算布局，更新渲染树，合并图层、渲染等。

这说明了什么，不就说明了渲染是一个宏任务么。

所以，我们得到了结论：渲染是一个宏任务，通过 Event Loop 来做一帧帧的渲染。

通过 Performance 调试工具，我们可以看到 Main 线程 Event Loop 的细节，看到 JS 执行和渲染的详细过程。

有时你可能会看到有的 Task 部分被标红了，还警告说这是 Long Task。因为渲染和 JS 执行都是在同一个 Event Loop 内做的，那如果有执行时间过长的 Task，自然会导致渲染被延后，也就是掉帧，用户感受到的就是页面的卡顿。

避免 Long Task，这是网页性能优化的一个重点。这也是为什么 React 使用了 Fiber 架构的可打断的组件树渲染，替代掉了之前的递归渲染整个组件树的方式，就是为了不产生 Long Task。

总结

本文目的为了证明渲染是不是一个宏任务，但其实更重要的是想讲清楚调试工具的意义。

调试工具可以分析程序运行过程中某一刻或某一段时间的各方面的数据，有两种方式：一种是 Debugger 那种断点的方式，可以看到上下文变量的值、调用栈，可以帮助理清逻辑、定位问题。而性能分析工具则是另一种方式，通过录制一段时间内的各种数据，做事后的分析和统计，这样能保证数据的真实性。

网页的性能分析工具 Performance 可以记录网页执行过程中的各个线程的执行情况，主要是主线程的 Event Loop 的执行过程，包括 JS 执行、渲染等。

通过 Performance，我们可以轻易的得出“渲染是一个宏任务”的结论。

就像在 Debugger 面前，JS 执行过程没有秘密一样。在 Performance 面前，网页的执行过程也同样没有秘密。

作者：zxg_神说要有光
来源：https://juejin.cn/post/7037839989018722340

1. MVVM和MVC

Vue是MVVM，React是MVC。

MVVM(Model-View-ViewModel)是在MVC(Model View Controller)的基础上，VM抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

可以理解为MVVM是MVC的升级版。

虽然React不算一个完整的MVC框架，可以认为是MVC中的V(View)，但是Vue的MVVM还是更面向未来一些。

2. 数据绑定

vue是双向绑定，react是单向绑定。

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于项目的可维护性。

但是Vue虽然是双向绑定，但是也是单向数据流，它的双向绑定只是一个语法糖，想看正经的双向绑定可以去看下Dva。

单向绑定的缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的重复代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得冗余。

双向绑定可以在表单交互较多的场景下，会简化大量业务无关的代码。

我认为Vue的设计方案好一些，全局性数据流使用单向，局部性数据流使用双向。

3. 数据更新

3.1 React 更新流程

React 推崇 Immutable(不可变)，通过重新render去发现和更新自身。

3.2 Vue 更新流程

Vue通过收集数据依赖去发现更新。

Vue很吸引人的就是它的响应式更新，Vue首次渲染触发data的getter，从而触发依赖收集，为对应的数据创建watcher，当数据发生更改的时候，setter被触发，然后通知各个watcher在下个tick的时候更新数据。

所以说，如果data中某些数据没有在模板template 中使用的话，更新这些数据的时候，是不会触发更新的。这样的设计非常好，没有在模版上用到的变量，当它的值发生变化时，不更新视图，相当于内置了React的shouldComponentUpdate。

3.3 更新比较

• 获取数据更新的手段和更新的粒度不一样

Vue通过依赖收集，当数据更新时 ，Vue明确知道是哪些数据更新了，每个组件都有自己的渲渲染watcher，掌管当前组件的视图更新，所以可以精确地更新对应的组件，所以更新的粒度是组件级别的。

React会递归地把所有的子组件重新render一下，不管是不是更新的数据，此时，都是新的。然后通过 diff 算法 来决定更新哪部分的视图。所以，React 的更新粒度是一个整体。

• 对更新数据是否需要渲染页面的处理不一样

• 只有依赖收集的数据发生更新，Vue 才会去重新渲染页面

• 只要数据有更新(setState，useState 等手段触发更新)，都会去重新渲染页面 （可以使用shouldComponentUpdate/ PureComponent 改善)

Vue的文档里有一描述说，Vue是细粒度数据响应机制，所以说数据更新这一块，我认为Vue的设计方案好一些。

4. 性能对比

借用尤大大的一段话：

模板在性能这块吊打 tsx，在 IDE 支持抹平了的前提下用 tsx 本质上是在为了开发者的偏好牺牲用户体验的性能（性能没遇到瓶颈就无所谓） 这边自己不维护框架的人吐槽吐槽我也能理解，毕竟作为使用者只需要考虑自己爽不爽。作为维护者，Vue 的已有的用户习惯、生态和历史包袱摆在那里，能激进的程度是有限的，Vue 3 的大部分设计都是戴着镣铐跳舞，需要做很多折衷。如果真要激进还不如开个新项目，或者没人用的玩票项目，想怎么设计都可以。 组件泛型的问题也有不少人提出了，这个目前确实不行，但不表示以后不会有。 最后实话实说，所有前端里面像这个问题下面的类型体操运动员们毕竟是少数，绝大部分有 intellisense + 类型校验就满足需求了。真的对类型特别特别较真的用 React 也没什么不好，无非就是性能差点。

为什么模板性能吊打TSX？

tsx和vue template其实都是一样的模版语言，tsx最终也会被编译成createElement，模板被编译成render函数，所以本质上两者都有compile-time和runtime，但tsx的特殊性在于它本身是在ts语义下的，过于灵活导致优化无从下手。但是vue的模板得益于自身本来就是DSL，有自己的文法和语义，所以vue在模板的compile-time做了巨多的优化，比如提升不变的vnode，以及blocktree配合patchflag靶向更新，这些优化在最终的runtime上会把性能拉开不少。

DSL： 一种为特定领域设计的，具有受限表达性的编程语言。

所以说Vue的性能是优于React的。

5. React Hooks和Vue Hooks

其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制：

1. 不要在循环，条件或嵌套函数中调用 Hook

2. 确保总是在你的 React 函数的最顶层调用他们。

3. 遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

而 Vue 带来的不同在于：

1. 与 React Hooks 相同级别的逻辑组合功能，但有一些重要的区别。 与 React Hook 不同，setup函数仅被调用一次，这在性能上比较占优。

2. 对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。

3. 不必考虑几乎总是需要 useCallback 的问题，以防止传递函数prop给子组件的引用变化，导致无必要的重新渲染。

4. React Hook 有臭名昭著的闭包陷阱问题，如果用户忘记传递正确的依赖项数组，useEffect 和 useMemo 可能会捕获过时的变量，这不受此问题的影响。 Vue 的自动依赖关系跟踪确保观察者和计算值始终正确无误。

5. 不得不提一句，React Hook 里的「依赖」是需要你去手动声明的，而且官方提供了一个 eslint 插件，这个插件虽然大部分时候挺有用的，但是有时候也特别烦人，需要你手动加一行丑陋的注释去关闭它。

我们认可 React Hooks 的创造力，这也是 Vue-Composition-Api 的主要灵感来源。上面提到的问题确实存在于 React Hook 的设计中，我们注意到 Vue 的响应式模型恰好完美的解决了这些问题。

--- 来自ssh

Vue的组合式API刚出来的时候确实一看好像React Hooks，我也对它的.value进行了吐槽，

但是总体来说还是更偏向于Vue Hooks。

6. 写法

React的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，所以说React的写法感觉相对自由一些，逻辑正确老子想怎么写怎么写，对于我来说，我确实更偏向于React的写法。

Vue则是把html，css，js组合到一起，就像 Web 开发多年的传统开发方式一样， vue-loader会解析文件，提取每个语言块用各自的处理方式，vue有单文件组件(SFC)，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。Vue感觉是给你搭了一个框架，告诉你什么地方该写什么东西，你只要按照他的要求向里面填内容就可以了，没有React那么自由，但是上手难度简单了许多。而且因为SFC，一个组件的代码会看起来很长，维护起来很头痛。

7. 理念及设计

Vue 和 React 的核心差异，以及核心差异对后续设计产生的“不可逆”影响。

Vue 和 React 在 API 设计风格和哲学理念（甚至作者个人魅力）上的不同。

Vue 和 React 在工程化预编译构建阶段，AOT 和 JIT 优化的本质差异和设计。

这个层次的比较确实对我难度确实大，我也懒得去copy，下面是Lucas大佬的分析，可以去看一下，时空隧道。

作者：黑色的枫
来源：https://juejin.cn/post/7037365650251055134

前言

微前端是 2016 年thoughtWorks提出的概念，它将微服务的理念应用于浏览器端，即将前端应用由单体应用转变成多个小型前端应用聚合的应用。各个小型前端应用可以独立运行、独立开发、独立部署。

为什么出现？

与微服务出现的原因相似，随着前端业务越来越复杂，前端的代码和业务逻辑也愈发难以维护，尤其对于中后台系统，很容易出现巨石应用，微前端由此应运而生，其根本目的就是解决巨石应用的项目复杂，系统庞大，开发人员众多，难以维护的问题。

微前端 vs 巨石应用

架构方案

基座模式是当前比较常见的微前端架构设计。

首先以容器应用作为整个项目的主应用，负责子应用的注册，聚合，提供子运行环境、管理生命周期等。子应用就是各个独立部署、独立开发的单元。

应用注册表拥有每个应用及对应的入口。在前端领域里，入口的直接表现形式可以是路由，又或者对应的应用映射。

目前可以实现微前端架构的方案有如下：

HTTP后端路由转发（nginx）

• ✅ 简单高效快速，同时不需要前端做额外的工作。

• ❌ 体验并不好，相当于mpa页面，路由到每个应用需要重新刷新

iframe

• ✅ 前端最简单的应用方式，直接嵌入，门槛最低，改动最小

• ❌ iframe都会遇到的一些典型问题：UI 不同步，DOM 结构不共享（比如iframe中的弹框），跨域通信等

各个业务独立打到npm包中

• ✅ 门槛低，易上手

• ❌ 模块修改后需要重新部署发布，太麻烦。

组合式应用路由分发（基座模式）

• ✅ 纯前端改造，体验良好，各个业务相互独立

• ❌ 需要设计和开发，有一定成本，同时需要兼顾子页面和基座的变量污染，样式互相影响等问题

web component

• ✅ 是一项标准，目前它包含三项主要技术，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。应该是微前端的最终态

• ❌ 比较新，兼容性较差

微前端页面形态

微前端基座框架需要解决的问题

路由分发

作为微前端的基座应用，是整个应用的入口，负责承载当前子应用的展示和对其他路由子应用的转发，对于当前子应用的展示，一般是由以下几步构成：

1. 远程拉取子应用内容

2. 将子应用的 js 和 css 抽离，采用eval来运行 js，并将 css 和 html 内容append到基座应用中留给子应用的展示区域

3. 当子应用切换走时，同步卸载这些内容

对于路由分发而言，以采用react-router开发的基座SPA应用来举例，主要是下面这个流程：

1. 当浏览器的路径变化后，react-router会监听hashchange或者popstate事件，从而获取到路由切换的时机。

2. 最先接收到这个变化的是基座的router，通过查询注册信息可以获取到转发到那个子应用，经过一些逻辑处理后，采用修改hash方法或者pushState方法来路由信息推送给子应用的路由，子应用可以是手动监听hashchange或者popstate事件接收，或者采用react-router接管路由，后面的逻辑就由子应用自己控制。

应用隔离

应用隔离问题主要分为主应用和子应用，子应用和子应用之间的JavaScript执行环境隔离，CSS样式隔离，

CSS

• 当主应用和子应用同屏渲染时，就可能会有一些样式会相互污染，如果要彻底隔离CSS污染，可以采用CSS Module 或者命名空间的方式，给每个子应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀。

• 而对于子应用与子应用之间的CSS隔离就非常简单，在每次应用加载时，将该应用所有的link和style 内容进行标记。在应用卸载后，同步卸载页面上对应的link和style即可。

JavaScript隔离

• 每当子应用的JavaScript被加载并运行时，它的核心实际上是对全局对象Window的修改以及一些全局事件的改变，例如jQuery这个js运行后，会在Window上挂载一个window.$对象，对于其他库React，Vue也不例外。为此，需要在加载和卸载每个子应用的同时，尽可能消除这种冲突和影响，最普遍的做法是采用沙箱机制（SandBox）。

• 沙箱机制的核心是让局部的JavaScript运行时，对外部对象的访问和修改处在可控的范围内，即无论内部怎么运行，都不会影响外部的对象，需要结合 with 关键字和window.Proxy对象来实现浏览器端的沙箱。

消息通信

应用间通信有很多种方式，当然，要让多个分离的子应用之间要做到通信，本质上仍离不开中间媒介或者说全局对象。所以对于消息订阅（pub/sub）模式的通信机制是非常适用的，在基座应用中会定义事件中心Event，每个子应用分别来注册事件，当被触发事件时再有事件中心统一分发，这就构成了基本的通信机制。

当然，如果基座和子应用采用的是React或者是Vue，是可以结合Redux和Vuex来一起使用，实现应用之间的通信。

搭一个看看？

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。也是支付宝内部广泛使用的微前端框架。

那么我们就使用 qiankun 从头搭一个demo出来体验一下

基座

• 基座我们使用react，自行使用 create-react-app 创建一个react项目即可。

• npm install qiankun -s

• 在基座中需要调用 registerMicroApps 注册子应用，然后调用start启动

因此在 index.js 中插入如下代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);

// 启动 qiankun
start();

• 修改App.js

• • 加入一些 antd 元素，让demo像样一些

  • 同时，由于qiankun根据路由来加载不同微应用，我们也安装 react-router-dom

• • npm install react-router-dom

  • 安装完之后修改 App.js 如下：

import { useState } from 'react';
import { Layout, Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'
import './App.css';

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  
  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <Link to="/app-vue">Vue应用</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '16px' }}>
          <div id="container" className="site-layout-background" style={{ minHeight: 360 }}></div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>This Project ©2021 Created by DiDi</Footer>
      </Layout>
    </Layout>
  );
}

export default App;

• 记得修改 index.js，把 App 组件用 react-router-dom 的 BrowserRouter 包一层，让 BrowserRouter 作为顶层组件才可以跳转

• 至此，基座搭好了

子页面

尝试使用vue作为子页面，来体现微前端的技术隔离性。

• 使用vue-cli创建vue2.x项目

• 修改main.js如下：

import Vue from "vue/dist/vue.js";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

// window.__POWERED_BY_QIANKUN__ 为true 说明在 qiankun 架构中
// 修改webpack的publicPath，将子应用资源加载的公共基础路径设为 qiankun 包装后的路径
// 这个 __INJECTED_PUBLIC_PATH_BY_QIANKUN__ 的实际地址是子应用的服务器地址，子应用的应用资源都在他本身的实际服务器上
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时 直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 应用需要导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}

export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}

• router.js配置如下：

import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/test",
    name: "Test",
    component: () => import("./components/Test.vue"),
  },
  {
    path: "/hello",
    name: "Hello",
    component: () => import("./components/Hello.vue"),
  },
];

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",
  mode: "history",
  routes,
});

export default router;

• 根目录下新建vue.config.js 用来配置webpack，内容如下：

const { name } = require("./package");
module.exports = {
  devServer: {
    // 跨域
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      // 把微应用打包成 umd 库格式
      libraryTarget: "umd",
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

启动

基座和子应用分别启动，可以看到，子应用已经加载到了主应用中：

作者：visa
来源：https://juejin.cn/post/7037386845751083021