YGJoon ’s Blog

Home


## 应用场景 需要限制所选的时间跨度 区间

[DatePicker 日期选择框](https://1x.antdv.com/components/date-picker-cn/)组件

所需函数

| **calendarChange** | 待选日期发生变化的回调 | function(dates: [moment, moment]                   | [string, string], dateStrings: [string, string]) |
| ------------------ | ---------------------- | -------------------------------------------------- | ------------------------------------------------ |
| **disabledTime**   | 不可选择的时间         | function(dates: [moment, moment], partial: 'start' | 'end')                                           |

## 逻辑梳理

先获取第一个时间区间的第一个值，待选日期发生变化的回调 calendarChange，可以拿到第一个选择的时间，再根据时间去禁用剔除出去的区间
disabledTime，这里需要用到[moment](http://momentjs.cn/)库

## 业务代码

```html
<a-range-picker
  v-model="createTime"
  :disabled-date="disabledDate"
  @calendarChange="onCalendarChange"
  :show-time="{
    format: 'HH:mm:ss',
    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
    }"
  format="YYYY-MM-DD HH:mm:ss"
  :placeholder="['Start Time', 'End Time']"
  @change="createChange"
/>
```

```js

onCalendarChange(obtain) {
    // 获取手动选择的时间段起始值
    this.disabledCurrentTime = obtain[0]
},
// 限制时间跨度 三个月 以及当天之后的日期
disabledDate(current) {
    return (
    current > moment('23:59:59', 'HH:mm:ss') ||
    current <
        moment(this.disabledCurrentTime)
        .subtract(3, 'M')
        .startOf('day') ||
    current >
        moment(this.disabledCurrentTime)
        .add(3, 'M')
        .endOf('day')
    )
},
```



Vue 中使用 a-range-picker 限制时间跨度


## 简述
 
？？校验文本是不是正则表达式？可能有人会这么写

```js
//通过原型来判断
function checkReg(v){
    return Object.prototype.toString.call(v) === '[object RegExp]'
}

// 很显然这样是行不通的，文本的构造函数不是string吗，
// string
checkReg('/[0-9a-zA-Z]+/g')
//false

// RegExp
checkReg(/[0-9a-zA-Z]+/g)
//true

```
之后查阅资料，有个很巧妙的思路，转成表达式调用正则，调用RegExp对象函数，报错说明就不是正则了

## eval 

eval有利有弊，eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。

```js
/**
 * 校验是否是正则表达式
 * @param {*} val 表达式
 * @returns 
 */
export function checkReg(v) {
  try {
    eval(v).test()
    return true
  } catch {
    return false
  }
}

```

文章关联知识点：[eval](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval)、[RegExp](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)


校验一个字符串是不是正则表达式


## 应用场景

文件名称默认以传入的 key 来命名，但我命名的时候是使用 uuid 填进去的。用链接下载下来的文件名就是一串没有后缀的字符串，打不开。

有两种解决方式：

- 在上传时指定带后缀的 key 。
- 在下载时 url 后拼接 ?attname= 后跟希望得到的文件名。

## 下载时拼接

```js
/**
 * 文件直接下载
 * @param {*} url 下载地址
 * @param {*} fileName 文件名
 * @param {*} tag 是否需要转换七牛云地址
 */
export function BaseDownloadFile(url, fileName, tag) {
  let link = document.createElement("a");
  link.style.display = "none";
  if (tag) {
    link.href = url + `?attname=${fileName}`;
  } else {
    link.href = url;
  }
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link); //下载完成移除元素
  window.URL.revokeObjectURL(url); //释放掉blob对象
}
```

文章关联知识点：[qiniu JavaScript SDK](https://developer.qiniu.com/kodo/1283/javascript)


关于七牛云下载的文件没有后缀


## 场景介绍

需要跨页统计数据金额，前端请求一页 10 条，并区分是支出还是收入，使用 ant-design-vue 组件库的 table 组件
查看组件 api 有看见所需钩子函数

| **onSelect**    | 用户手动选择/取消选择某列的回调   | Function(record, selected, selectedRows, nativeEvent) |
| --------------- | --------------------------------- | ----------------------------------------------------- |
| **onSelectAll** | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows)          |

### 根据钩子函数分析所需条件

- 勾选还是取消勾选
- 一键全选还是一键全部取消
- 区分收入还是支出
- 单条勾选或取消的下标

### template

```html
<template>
  <a-table
    :loading="tableLoading"
    :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onSelectAll: onSelectAll,
        onSelect: onSelectItemChange,
        onChange: onSelectChange
    }"
    :columns="columns"
    :data-source="data"
    :pagination="false"
    bordered
    rowKey="id"
    />
</tempalte>
```

### script

```js
data(){
  return{
    // 跨页勾选所需
    tableSelectArray: [],
    // 勾选还是取消勾选
    hasTableSelect: true,
  }
},
// 计算属性
computed:{
	// 勾选数据总金额
    tickPrice() {
      return this.tableSelectArray.reduce((prev, next) => {
        let str = next.financeType === 'pay' ? '-' : '+'
        return prev + parseFloat(str + next.amount)
      }, 0)
    },
}
```

```js
// 用户手动选择取消选择某列的回调
// 用户手动选择取消选择某列的回调
onSelectItemChange(item, flag) {
  if (this.hasTableSelect) {
    this.tableSelectArray.push(item)
  } else {
    let index = this.tableSelectArray.findIndex(arr => arr.id === item.id)
    this.tableSelectArray.splice(index, 1)
  }
},
// 用户手动选择取消选择所有列的回调
onSelectAll(selected, selectedRows, changeRows) {
  if (this.hasTableSelect) {
    this.tableSelectArray.push(...selectedRows)
    // unique 去重函数  根据id去重
    this.tableSelectArray = unique(this.tableSelectArray, 'id')
  } else {
    changeRows.forEach(item => {
      let index = this.tableSelectArray.findIndex(arr => arr.id === item.id)
      this.tableSelectArray.splice(index, 1)
    })
  }
},
```

### utils

```javascript
/**
 * 数组对象根据指定key 去重
 * @param {*} list
 * @param {*} key
 * @returns
 */
export function unique(list, key = "companyCode") {
  let obj = {};
  let result = list.reduce((cur, next) => {
    obj[next[key]] ? "" : (obj[next[key]] = true && cur.push(next));
    return cur;
  }, []);
  return result;
}
```




Vue 中使用 a-table 实现跨页勾选


## 提出问题

我该如何编写代码，怎么使得这个小球偏移到最后再回来呢，使得这个 translateX 偏移量更优雅呢,如果用大量的 js 去操作将增加我们的代码量

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        width: 80%;
        height: 300px;
        margin: 0 auto;
        border: 1px solid;
        position: relative;
      }

      .item {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background: rebeccapurple;
        position: absolute;
        top: 100px;
        left: 0;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        50% {
          transform: translateX(300px);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>

    <script></script>
  </body>
</html>
```

## CSS 变量

[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*)带有--前缀的属性名，表示带有值的自定义属性，下面是它的语法 以及使用,还可以使用 js 来设置 CSS 变量
通过[setProperty()](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty)函数来设置 CSS 变量

```css
--somecolor: #0000ff;

color：var(--somecolor)

/* 通过js的形式设置变量 */


```

```js
style.setProperty(propertyName, value, priority);

// 参数
/**
 * propertyName 是一个 DOMString ，代表被更改的 CSS 属性。
 * value可选 是一个 DOMString ，含有新的属性值。如果没有指定，则当作空字符串。
 * - 注意：value 不能包含 "!important" --那个应该使用 priority 参数。
 * priority可选 是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定，则当作空字符串。
 */
```

## calc()

[calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) 此 CSS 函数允许在声明 CSS 属性值时执行一些计算

```css
/* property: calc(expression) */
width: calc(100% - 80px);
```

好的了解过后让我们实现一下吧,使用 calc 计算外加 CSS 变量的形式，简化了代码，js 部分只执行赋值操作

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        width: 80%;
        height: 300px;
        margin: 0 auto;
        border: 1px solid;
        position: relative;
      }

      .item {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background: rebeccapurple;
        position: absolute;
        top: 100px;
        left: 0;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        50% {
          transform: translateX(calc(var(--w) - 100%));
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>

    <script>
      const container = document.querySelector(".container");
      const item = document.querySelector(".item");
      item.style.setProperty("--w", container.clientWidth + "px");
    </script>
  </body>
</html>
```


CSS变量的妙用


## 原理

一张图片就是一个 img 标签，浏览器是否发起请求图片是根据 img 的 src 属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给 img src 赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给 src 赋值。

## 旧的解决方案

检测元素的可视状态或者两个元素的相对可视状态都不是容易的事情，大部分解决办法并不是完全可靠的，实现方式非常的丑陋，也极易拖慢整个网站的性能

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载</title>
    <style>
      .box {
        margin-top: 1000px;
        display: flex;
        flex-direction: column;
      }
      img {
        width: 200px;
        height: 200px;
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img
        class="loadImg"
        data-img="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wqGK?ver=47a4"
        alt=""
      />
      <img
        class="loadImg"
        data-img="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wqGK?ver=47a4"
        alt=""
      />
      <img
        class="loadImg"
        data-img="https://ts1.cn.mm.bing.net/th?id=ORMS.a9bab2d2c4d0d7eef2a7962c5683cce1&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
        alt=""
      />
    </div>

    <script>
      let index = 0;
      const imgList = document.querySelectorAll(".loadImg");

      // 懒加载函数
      function lazyload() {
        // 获取可视区域高度
        const viewPortHeight =
          window.innerHeight || document.documentElement.clientHeight;

        for (let i = 0; i < imgList.length; i++) {
          // 可视区域高度减去 图片距离可视区域的高度
          const distance =
            viewPortHeight - imgList[i].getBoundingClientRect().top;
          // 如果大于0说明图片已经出现在可视区域当中
          if (distance >= 0) {
            // 给图片赋予真实的值
            imgList[i].src = imgList[i].dataset.img;
            index = i + 1;
          }
        }
      }

      // 节流函数||防抖函数
      function debounce(fn, delay = 500) {
        let timer = null;
        return function (...args) {
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            fn.apply(this, args);
          }, delay);
        };
      }

      window.addEventListener("scroll", debounce(lazyload, 600));

      window.addEventListener("resize", debounce(lazyload, 600));
    </script>
  </body>
</html>
```

## 更好的解决方案

IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。 但是存在一些[浏览器兼容性](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)问题

[https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载2</title>
    <style>
      .box {
        margin-top: 1000px;
        display: flex;
        flex-direction: column;
      }
      img {
        width: 200px;
        height: 200px;
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img
        class="loadImg"
        data-img="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wqGK?ver=47a4"
        alt=""
      />
      <img
        class="loadImg"
        data-img="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wqGK?ver=47a4"
        alt=""
      />
      <img
        class="loadImg"
        data-img="https://ts1.cn.mm.bing.net/th?id=ORMS.a9bab2d2c4d0d7eef2a7962c5683cce1&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0"
        alt=""
      />
    </div>

    <script>
      function Observer() {
        //得到所有的图片
        const imgList = document.querySelectorAll(".loadImg");
        // 创建一个新的 IntersectionObserver 对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。
        let observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((item) => {
              // 返回一个布尔值，如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交
              if (item.isIntersecting) {
                //加载图片,把data-img的值放到src
                item.target.src = item.target.dataset.img;
                // 停止监听已经开始加载的图片
                observer.unobserve(item.target);
              }
            });
          },
          {
            rootMargin: "0px 0px -100px 0px", //交叉视图超过 100px 才开始派发事件
          }
        );
        imgList.forEach((item) => observer.observe(item));
      }

      Observer();
    </script>
  </body>
</html>
```

## 实现懒加载自定义指令 v-lazy

需要了解[自定义指令](https://v2.cn.vuejs.org/v2/guide/custom-directive.html)的知识 ,第一个参数为之定义指令的名称，不需要带 v-。下面是勾子函数的简单介绍

```js
Vue.directive('指令名',{
   bind(){},//只调用一次，指令第一次绑定到HTML元素时调用。在这里可以进行一次性的初始化设置。
   inserted(){},//当指令绑定的元素插入到父节点中的时候触发。
   update(){},//当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发。
   componentUpdated(){},//当 update() 执行完毕之后触发。
   unbind()//只调用一次，指令与元素解绑时调用。
})
```

了解之后让我们简单实现一下这个自定义指令 v-lazy

```js
Vue.directive("lazy", {
  inserted(el, binding) {
    //定义一个观察器，entries为状态改变元素的数组
    let observer = new IntersectionObserver((entries) => {
      // 遍历
      for (let i of entries) {
        // 如果改元素处于可视区
        if (i.isIntersecting > 0) {
          // 获取该元素
          let img = i.target;
          // 重新设置src值
          img.src = binding.value;
          //取消对该元素的观察
          observer.unobserve(img);
        }
      }
    });
    // 为 img 标签添加一个观察
    observer.observe(el);
  },
});
```


图片懒加载实现原理


[compression-webpack-plugin](https://www.npmjs.com/package/compression-webpack-plugin)

```bash
# 依赖的安装
npm i compression-webpack-plugin
```

## Vue 配置文件

### 分片打包

```javascript
// Vue-cli3  module.exports
// vue.config.js
const CompressionPlugin = require("compression-webpack-plugin");

chainWebpack: (config) => {
  config.resolve.alias
    .set("@$", resolve("src"))
    .set("@api", resolve("src/api"))
    .set("@assets", resolve("src/assets"))
    .set("@comp", resolve("src/components"))
    .set("@views", resolve("src/views"));

  //生产环境，服务端开启js\css压缩
  if (process.env.NODE_ENV === "production") {
    config.plugin("compressionPlugin").use(
      new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
      })
    );
  }
};
```

### 分依赖模块打包

```javascript
// Vue-cli3  module.exports
// vue.config.js
configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.runtimeChunk = 'single'
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.splitChunks = {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 2000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      };
    }
  },
```


Vue2.x webpack代码打包方案


### 工具的基本使用与选择 forever 和 pm2

forever 则可以在或连接断开时,让项目一直运行,而且可以在项目崩溃时自动重启 cmd

```powershell
安装 npm install -g forever
forever的帮助手册 forever --help
使用启动项目 foreverforever start app.js
使用停止项目 foreverforever stop app.js
列出所有通过管理的项目 foreverforever list
监视项目中的文件,当文件有变动时重启项目 forever -w start app.js
```

pm2 功能较为丰富

```powershell
运行pm2 start app.js
查看运行状态 pm2 list
追踪资源运行情况 pm2 monit
查看日志 pm2 logs
重启应用 pm2 restart appId
停止应用 pm2 stop app.js
开启访问 apipm2 web
```


部署一个node应用


## webpack 入门

### 初始化 npm 项目

```bash
# 初始化项目
npm init -y
# 全局安装webpack
npm i webpack -g
# 项目中安装webpack --save-dev 开发环境依赖
npm i webpack -D
# 安装webpack cli 脚手架工具
npm i webpack-cli -D
# 检测安装是否成功
webpack -v
# ----------------------------------------------------
  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 7.49 GB / 15.86 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (109.0.1518.78)
    Internet Explorer: 11.0.22000.120
  Packages:
    webpack: ^5.75.0 => 5.75.0
    webpack-cli: ^5.0.1 => 5.0.1
```

### webpack configuration 介绍

- mode：构建模式
- entry :配置入口资源
- output:配置编译后的资源
- module:资源处理
- resolve:配置资源别名/扩展名等
- plugins:插件，比 loader 更强大

### 创建 webpack 配置文件

项目根目录创建 webpack.config.js

```bash
const webpack = require("webpack");

console.log(webpack)
# 命令行运行
node webpack.config.js
#---------- 检验安装是否成功

[Function: f] {
  webpack: [Getter],
  validate: [Getter],
  validateSchema: [Getter],
  version: [Getter],
  cli: [Getter],
  AutomaticPrefetchPlugin: [Getter],
  AsyncDependenciesBlock: [Getter],
  BannerPlugin: [Getter],
  Cache: [Getter],
  Chunk: [Getter],
  ChunkGraph: [Getter],
  CleanPlugin: [Getter],
  Compilation: [Getter],
  Compiler: [Getter],
  ConcatenationScope: [Getter],
  ContextExclusionPlugin: [Getter],
  ContextReplacementPlugin: [Getter],
  DefinePlugin: [Getter],
  DelegatedPlugin: [Getter],
  Dependency: [Getter],
  DllPlugin: [Getter],
  DllReferencePlugin: [Getter],
  DynamicEntryPlugin: [Getter],
  EntryOptionPlugin: [Getter],
  EntryPlugin: [Getter],
  EnvironmentPlugin: [Getter],
  EvalDevToolModulePlugin: [Getter],
  EvalSourceMapDevToolPlugin: [Getter],
  ExternalModule: [Getter],
  ExternalsPlugin: [Getter],
  Generator: [Getter],
  HotUpdateChunk: [Getter],
  HotModuleReplacementPlugin: [Getter],
  IgnorePlugin: [Getter],
  JavascriptModulesPlugin: [Getter],
  LibManifestPlugin: [Getter],
  LibraryTemplatePlugin: [Getter],
  LoaderOptionsPlugin: [Getter],
  LoaderTargetPlugin: [Getter],
  Module: [Getter],
  ModuleFilenameHelpers: [Getter],
  ModuleGraph: [Getter],
  ModuleGraphConnection: [Getter],
  NoEmitOnErrorsPlugin: [Getter],
  NormalModule: [Getter],
  NormalModuleReplacementPlugin: [Getter],
  MultiCompiler: [Getter],
  Parser: [Getter],
  PrefetchPlugin: [Getter],
  ProgressPlugin: [Getter],
  ProvidePlugin: [Getter],
  RuntimeGlobals: [Getter],
  RuntimeModule: [Getter],
  SingleEntryPlugin: [Getter],
  SourceMapDevToolPlugin: [Getter],
  Stats: [Getter],
  Template: [Getter],
  UsageState: [Getter],
  WatchIgnorePlugin: [Getter],
  WebpackError: [Getter],
  WebpackOptionsApply: [Getter],
  WebpackOptionsDefaulter: [Getter],
  WebpackOptionsValidationError: [Getter],
  ValidationError: [Getter],
  cache: { MemoryCachePlugin: [Getter] },
  config: {
    getNormalizedWebpackOptions: [Getter],
    applyWebpackOptionsDefaults: [Getter]
  },
  dependencies: {
    ModuleDependency: [Getter],
    HarmonyImportDependency: [Getter],
    ConstDependency: [Getter],
    NullDependency: [Getter]
  },
  ids: {
    ChunkModuleIdRangePlugin: [Getter],
    NaturalModuleIdsPlugin: [Getter],
    OccurrenceModuleIdsPlugin: [Getter],
    NamedModuleIdsPlugin: [Getter],
    DeterministicChunkIdsPlugin: [Getter],
    DeterministicModuleIdsPlugin: [Getter],
    NamedChunkIdsPlugin: [Getter],
    OccurrenceChunkIdsPlugin: [Getter],
    HashedModuleIdsPlugin: [Getter]
  },
  javascript: {
    EnableChunkLoadingPlugin: [Getter],
    JavascriptModulesPlugin: [Getter],
    JavascriptParser: [Getter]
  },
  optimize: {
    AggressiveMergingPlugin: [Getter],
    AggressiveSplittingPlugin: [Getter],
    InnerGraph: [Getter],
    LimitChunkCountPlugin: [Getter],
    MinChunkSizePlugin: [Getter],
    ModuleConcatenationPlugin: [Getter],
    RealContentHashPlugin: [Getter],
    RuntimeChunkPlugin: [Getter],
    SideEffectsFlagPlugin: [Getter],
    SplitChunksPlugin: [Getter]
  },
    createHash: [Getter],
    comparators: [Getter],
    runtime: [Getter],
    serialization: [Getter],
    cleverMerge: [Getter],
    LazySet: [Getter]
  },
  sources: [Getter],
  experiments: {
    schemes: { HttpUriPlugin: [Getter] },
    ids: { SyncModuleIdsPlugin: [Getter] }
  }
}
```

### 编写配置文件

**目录结构**
![image](/images/webpack/image(2).png)

```bash
const path = require("path");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "src/scripts/app.js"),
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build/scripts"),
  },
};

```

![image](/images/webpack/image(3).png)
![image](/images/webpack/image(4).png)
**执行打包命令**

```javascript
PS D:\Code\webpack\webpackStudy> webpack
asset main.js 2.62 KiB [emitted] (name: main)
./src/scripts/app.js 72 bytes [built] [code generated]
./src/scripts/index.js 77 bytes [built] [code genera
```

```bash
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack test demo</title>
  </head>
  <body>
    hello webpack
    <script src="../build/scripts/main.js"></script>
  </body>
</html>
```

![image1](</images/webpack/image(1).png>)

```javascript

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},
```

[webpackStudy.zip](https://www.yuque.com/attachments/yuque/0/2023/zip/26969329/1676816692893-972971ee-4b86-4a47-9c0b-a4b1b23e173e.zip?_lake_card=%7B%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2023%2Fzip%2F26969329%2F1676816692893-972971ee-4b86-4a47-9c0b-a4b1b23e173e.zip%22%2C%22name%22%3A%22webpackStudy.zip%22%2C%22size%22%3A29027%2C%22ext%22%3A%22zip%22%2C%22source%22%3A%22%22%2C%22status%22%3A%22done%22%2C%22download%22%3Atrue%2C%22taskId%22%3A%22udd85b1a3-7ac4-44cf-9719-0c3f1581775%22%2C%22taskType%22%3A%22transfer%22%2C%22type%22%3A%22application%2Fx-zip-compressed%22%2C%22mode%22%3A%22title%22%2C%22id%22%3A%22ue723ecb1%22%2C%22card%22%3A%22file%22%7D)

[https://www.webpackjs.com/concepts/output/#advanced](https://www.webpackjs.com/concepts/output/#advanced)

### plugins 的配置

```javascript
const htmlWebpackPlugin = require("html-webpack-plugin");

// html-webpack-plugin 将js自动引入到指定html中
plugins: [
    new htmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "src/index.html"),
    }),
  ],
```

### loader 的配置

注意：与 1.x 版本有区别
[https://www.webpackjs.com/loaders/css-loader/](https://www.webpackjs.com/loaders/css-loader/)

```javascript
module: {
    rules: [
      {
        test: /\.css$/, //正则表达式，匹配文件类型
        use: ["style-loader", "css-loader"], //申明使用什么loader进行处理
      },
    ],
  },
-----------1.0
  module:{
      rules:[
          {
              test:/\.css$/, //正则表达式，匹配文件类型
              loader:'style-loader!css-loader' //申明使用什么loader进行处理
          }
      ]
  }
```

### resolve 资源别名的配置

```javascript
resolve: {
  extensions: ["", ".js", ".css"],
},
```

webapck 更新日志
[https://github.com/webpack/webpack/releases](https://github.com/webpack/webpack/releases)


webpack处理html和模块化打包


## 代码规范

旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，统一团队的 JS 语法风格和书写习惯，减少程序出错的概率,没有统一的代码规范合并代码就是灾难性的、难以维护的,有的人会说啊 eslint 算了算了，空格都报错哈哈哈，没错就是它，如何让它格式化就变成 eslint 想要的样子呢

## 让程序自动处理规范化内容 eslint+prettier

让程序自动处理规范化内容，所用到的就是下面两个插件

[Prettier](https://prettier.io/)代码格式化插件，可以在 VSCode 插件中心找到

[ESlint](https://eslint.org/)代码规范检查和格式化工具

都可以在 VSCode 插件中心找到

### 依赖的安装

```bash
# ESlint所需依赖
yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node eslint-plugin-n -D
# 安装完成ESlint部分就可以啦
```

Prettier 有着自己的配置详细配置可以前往官网配置
下面这个是 angular 的.prettierrc 配置文件

根目录创建 .prettierrc

```bash
{
  "printWidth": 100,
  "tabWidth": 2,
  "tabs": false,
  "singleQuote": true,
  "semicolon": true,
  "quoteProps": "preserve",
  "bracketSpacing": true
}
```

关闭保存时自动格式化 format on save 避免每次保存都要格式化
![logo](/articleImg/formatOnSave.png)

又有人会说嘿我关闭了这个我不格式化直接 push 代码 🤣,我们可以把这个拦截操作提前，在本地提交代码的时候，不符合 commit 信息规范的禁止提交。而不是在合并公仓的时候才发现

## husky

husky 是一个让配置 git 钩子变得更简单的工具。支持所有的 git 钩子。

```bash
# 依赖项安装
yarn add husky -D
# husky
npx husky install
# 配置package.json script  那些文件需要校验
"lint": "eslint --ext .js --ext .vue src/"
# 添加commit前校验
npx husky add .husky/pre-commit "npm run lint"
```

### 提交时校验

使用 [commitizen](https://www.npmjs.com/package/commitizen) 提交时，系统会提示你在提交时填写任何必需的提交字段。不再需要等到稍后让 git 提交钩子运行并拒绝您的提交

```bash
  # 依赖安装
  npm install -g commitizen@4.2.4
  # 使用git cz 代替传统的git commit
  git cz
```

### 根目录创建 .cz-config.js

```
module.exports = {
  types:[
    {value:'feat',name:'feat: 添加新特性'},
    {value:'fix',name:'fix: 修复bug'},
    {value:'docs',name:'docs: 仅仅修改了文档'},
    {value:'style',name:'style: 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑'},
    {value:'refactor',name:'refactor: 代码重构，没有加新功能或者修复bug'},
    {value:'perf',name:'perf: 增加代码进行性能测试'},
    {value:'test',name:'test: 增加测试用例'},
    {value:'chore',name:'chore: 改变构建流程、或者增加依赖库、工具等'},
  ],
  messages:{
    type:'请选择提交类型:',
    // customScope:'请输入修改范围(可选):',
    customScope:'按规范不需要填写直接回车跳过(Enter):',
    subject:'请简要描述提交(必填):',
    body:'请输入详细描述(可选):',
    footer:'请输入要关闭的issue(可选):',
    confirmCommit:'确认要使用以上信息提交? (y/n)'
  },
  // 跳过步骤
  skipQuestions:['body','footer'],
  // 默认长度72
  subjectLimit:72
}
```


让程序自动处理规范化内容


### 使用 nvm 来进行 node 版本管理

[nvm](http://nvm.uihtm.com/)全英文也叫 node.js version management，是一个 nodejs 的版本管理工具。nvm 和 n 都是 node.js 版本管理工具，为了解决 node.js 各种版本存在不兼容现象可以通过它可以安装和切换不同版本的 node.js

安装之前需要先卸载之前的 Node,nvm 傻瓜式安装

```bash
# nvm list available 显示可下载版本的部分列表
nvm list available
# nvm install latest 安装最新版本 
nvm install latest
# npm install version 安装指定版本Node,也可以是最新稳定版本latest
npm install v14.16.0
# nvm uninstall version 卸载指定版本node
npm uninstall v14.16.0
# nvm use version 使用指定版本node
nvm use v14.16.0
# nvm version 显示nvm版本
nvm version
# nvm list 显示已安装的列表可简写nvm ls
nvm list | nvm ls
```


node版本管理


## 介绍

**最近在做 blob 流导出相关功能，其中需要导出 excel、csv、word、zip 压缩文件之类的，在导出 excel 和 word 中需要知道对应的 content-type 属性，感觉挺好的就记录一下**

| 后缀  | MIME Type                                                                 |
| ----- | ------------------------------------------------------------------------- |
| .doc  | application/msword                                                        |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document   |
| .xls  | application/vnd.ms-excel                                                  |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet         |
| .ppt  | application/vnd.ms-powerpoint                                             |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |

```js
/**
 * 下载模板
 * @param {*} data Excel 对象
 * @returns
 */
export const downLoadTemp = (data, name, type = "xlsx") => {
  if (type == "xlsx") {
    type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  } else {
    type = "application/vnd.ms-excel";
  }
  if (!data) {
    message.warning("文件下载失败");
    return;
  }
  if (typeof window.navigator.msSaveBlob !== "undefined") {
    window.navigator.msSaveBlob(
      new Blob([data], { type: type }),
      name.toString()
    );
    message.success({ content: "附件下载完成!", duration: 3 });
  } else {
    let url = window.URL.createObjectURL(new Blob([data], { type: type }));
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", name.toString());
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); //下载完成移除元素
    window.URL.revokeObjectURL(url); //释放掉blob对象
    message.success({ content: "附件下载完成!", duration: 3 });
  }
};
```

文章关联知识点：[Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)


blob格式文件对应格式


## XMLHttpRequest 介绍

[mdn web docs](https://developer.mozilla.org/zh-CN)中有写到 XMLHttpRequest[XMLHttpRequest](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用，对 Ajax 就是基于 XMLHttpRequest 实现的

### 原生实现

基本实现步骤

- 创建 XMLHttpRequest 实例
- 发出 HTTP 请求
- 服务器返回 XML 格式的字符串
- JS 解析 XML，并更新局部页面
- 不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。

```js
function ajax() {
  //实例化，以调用方法
  let xhr = new XMLHttpRequest();
  xhr.open("get", "https://www.liudongjun.cn"); //参数2，url。参数三：异步
  //每当 readyState 属性改变时，就会调用该函数。
  xhr.onreadystatechange = () => {
    //XMLHttpRequest 代理当前所处状态。
    if (xhr.readyState === 4) {
      //200-300请求成功
      if (xhr.status >= 200 && xhr.status < 300) {
        let string = request.responseText;
        //JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
        let object = JSON.parse(string);
      }
    }
  };
  //用于实际发出 HTTP 请求。不带参数为GET请求
  request.send();
}
```

### Promise 实现

基于 Promise 封装 ajax

- 返回一个新的 Promise 实例
- 创建 HMLHttpRequest 异步对象
- 调用 open 方法，打开 url，与服务器建立链接（发送前的一些处理）
- 监听 Ajax 状态信息
- 如果 xhr.readyState == 4（表示服务器响应完成，可以获取使用服务器的响应了）
  - xhr.status == 200，返回 resolve 状态
  - xhr.status == 404，返回 reject 状态
- xhr.readyState !== 4，把请求主体的信息基于 send 发送给服务器

```js
function ajax(url) {
  // 实例化一个Promise对象
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status <= 300) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject("请求出错");
        }
      }
    };
    xhr.send(); //发送hppt请求
  });
}

let url = "/data.json";
ajax(url)
  .then((res) => console.log(res))
  .catch((reason) => console.log(reason));
```

文章关联知识点：[onreadystatechange](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readystatechange_event)、
[JSON.parse()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)、[Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)


实现ajax


## 介绍

[Git](https://git-scm.com/)是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。简单来讲就是代码管理工具,安装挺简单的傻瓜式安装，以下介绍常用命令并不是全部命令

## 常用命令以及描述

```bash
# git init  初始化仓库git仓库
git init
# git add . 添加文件到暂存区
git add .
# git add filePath
git add file/index.html
# git status 查看仓库当前的状态，显示有变更的文件。
git status
# git reset  回退版本。 谨慎操作👍
git reset
# git log  查看历史提交记录
git log
# git push 上传远程代码并合并
git push
# git pull 下载远程代码并合并
git pull
```

## 分支

分支(branch)一个分支代表一条独立的开发线。 使用分支意味着你可以从开发主线上分离开来，然后在不影响主线的同时继续工作,下面介绍分支的常用操作

```bash
# git branch 列出你在本地的分支
git branch
# git branch branchName 创建分支
git branch develop
# git checkout branchName 切换分支
git checkout develop
# git push origin branchName 推送本地分支到远程
git push origin develop
# git branch -d branchName 删除分支
git branch -d develop
# git merge branchName 将改分支代码合并到当前所在分支
git merge  develop
```

## 标签

发布一个版本时，我们通常先在版本库中打一个标签（tag），这样就唯一确定了打标签时刻的版本。将来无论什么时候，取某个标签的版本，就是把那个打标签的时刻的历史版本取出来。

```bash
# git tag 列出已有的标签
git tag
# git show tagName 查看标签提交信息
git show v1.0.0
# git tag -a tagName 提交版本号 -m 附注信息  创建标签
git tag -a v1.0.0 -m "正式版本1.0.0"
# git tag -d tagName 删除标签
git tag -d v1.0.0
# git push origin tagName 将指定的标签上传到远程仓库
git push origin v1.0.0
# git push origin --tags 将所有不在远程仓库中的标签上传到远程仓库
git push origin --tags
# git branch newBranchName tagName 根据标签创建分支
git branch develop_01 v1.0.0
```


git 教程


关于 vscode 不支持yarn cmd支持yarn问题

```powershell
# 执行set-ExecutionPolicy RemoteSigned命令，
# 并输入y选项
set-ExecutionPolicy RemoteSigned
```
