前言

在我们开发完一个组件库的时候，需要有一个组件说明文档，文档页面是最直接的获取信息的窗口。而文档页一般包含了这些信息：

• 组件的描述
• 组件 Demo 示例的展示、描述和源码
• 组件的参数文档

组件说明文档是让其他人了解组件库的关键环节，包括组件库的适用范围（pc端，移动端，轻量级还是重量级），兼容浏览器的版本，设计原则和背景，以及社区生态，使用方法等。

关于如何开发组件库，可看这篇：

heaven-ui

文档生成

这里推荐 vuepress ，可以快速帮我们完成组件库文档的建设。(https://vuepress.vuejs.org/zh/guide/)

vuepress是一个文档生成工具，默认的样式和vue官方文档几乎是一致的，因为创造它的初衷就是想为vue和相关的子项目提供文档支持。它内置了 Markdown的扩展，写文档的时候就是用 markdown来写，最让人省心的是你可以直接在 Markdown 文件中使用Vue组件，意味着我们的组件库中写的一个个组件，可以直接放到文档里去用，展示组件的实际运行效果。 我的案例网站也就是通过vuepress来写的，生成静态网站后，用 gh-pages 直接部署到github上，也可以直接部署到我们自己的网站上。

vuepress更好的一点在于你可以自定义其webpack配置和主题，意味着你可以让你自己的文档站点在开发阶段有更多的功能特性的支持，同时可以把站点风格改成自己的一套主题风格。这就无需我们重头开始去做一套了，对于咱们想要快速完成组件库文档建设这一需求来说，还是挺有效的。

什么是XSS呢

跨网站指令码（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程式的安全漏洞攻击，是[代码注入]的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言。

XSS 分为三种：反射型，存储型和 DOM-based

如何攻击

XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。

例如通过 URL 获取某些参数

1
2

<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div> ，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击。

也有另一种场景，比如写了一篇包含攻击代码 <script>alert(1)</script> 的文章，那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击，也可以说是 DOM-based 攻击，并且这种攻击打击面更广。

众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。

JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。

1
2
3
4
5
6
7

console.log('script start')

setTimeout(function() {
  console.log('setTimeout')
}, 0)

console.log('script end')

前⾔

Vue是⼀套⽤于构建⽤户界⾯的渐进式框架,⽬前有越来越多的开发者在学习和使⽤。⽽组件库能帮我们节省开发精⼒，⽆需所有东⻄都从头开始去做，通过⼀个个⼩组件拼接起来，就得到了我们想要的最终⻚⾯。在⽇常开发中如果没有特定的⼀些业务需求，使⽤组件库进⾏开发⽆疑是更便捷⾼效，⽽且质量也相对更⾼的⽅案。

本⽂阐述了如何基于vue⼀步步完成⼀个UI组件库的打造。

组件库官⽹

github地址

npm地址

⼀、技术栈

我们先简单了解⼀下要搭建⼀个 UI 组件库，会涉及到哪些技术栈，下⾯是我选⽤的内容：

1. vue-cli：官⽅⽀持的 CLI 脚⼿架，提供⼀个零配置的现代构建设置；
2. Vue: 渐进式 JavaScript 库；
3. Jest：JavaScript 测试框架，⽤于组件库的单元测试；

升级webpack 5实战

一、背景

本次对公司项目进行webpack的升级 ， 原有版本是webpack4.42.1， 本次升级目标是webpack5.28.0，已经是很新的版本了。目标，升级Webpack5，应用长效缓存，提升构建速度。

二、步骤

按照官网升级文档

“vue-loader”: “^15.9.6”,

“terser-webpack-plugin”: “^5.1.1”,

“style-loader”: “^2.0.0”,

“mini-css-extract-plugin”: “^1.4.0”,

“less-loader”: “^8.0.0”,

“html-webpack-plugin”: “^5.3.1”,

“file-loader”: “^6.2.0”,

“css-loader”: “^5.2.0”,

“compression-webpack-plugin”: “^7.1.2”,

“babel-loader”: “^8.2.2”,

“postcss-loader”: “^5.2.0”,

Vite —— 一种新的、更快地 web 开发工具。

vite 是什么

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

1. 1.快速的冷启动
2. 2.即时的模块热更新
3. 3.真正的按需编译

Vite介绍

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。

• 英文文档
• 中文文档
• GitHub

reduce

特点: reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
源码实现

1
2
3
4
5
6
7
8
9
10
11
12
13

Array.prototype.myReduceRight = function(func, init) {
    var prev = init,
        len = this.length,
        k = len - 1; 
    if(init === undefined) {
        prev = this[k];
        k = len - 2;
    }
    for(k; k >= 0; k --) {
        prev = func(prev, this[k], k);
    }
    return prev;
}

map

特点:
map处理return出来的值，把值放在一个新的数组，默认返回undefined。
浅拷贝，会改变原数组。
浅度map实现

1
2
3
4
5
6
7
8

Array.prototype.myMap = function(func) {
    var len = this.length,
        newArr = [];
    for(var i = 0; i < len; i++) {
        newArr.push(func(this[i], i));
    }
    return newArr;
}

filter

作用: filter筛选数组，筛选出新的数组。
特点: 筛选的值由return来决定，会放在一个新的数组中返回。

源码实现

1
2
3
4
5
6
7
8
9
10

Array.prototype.myFilter = function(func) {
  var len = this.length,
      newArr = [];
  for(var i = 0; i < len; i++) {
      if(func(this[i], i)) {
          newArr.push(this[i]);
      }
  }
  return newArr;
}

forEach

作用: 循环遍历数组
特点:
不改变原数组，返回值为undefined。
改变不了数组的遍历(return/break不好使，会报错)

源码实现

1
2
3
4
5
6

Array.prototype.myForEach = function(func) {
  var len = this.length;
  for(var i = 0; i < len; i++) {
      func(this[i], i);
  }
}