什么是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);
  }
}

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1. 父组件向子组件传值
   接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:[“王小虎”,”张三”,”李四”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>

import Users from "./components/Users"

export default {
  name: 'App',
  data(){
    return{
      users:["王小虎","张三","李四"]
    }
  },
  components:{
    "users":Users
  }
}