Hexo

const path = require("path");
const HotHashWebpackPlugin = require("hot-hash-webpack-plugin");
const WebpackBar = require("webpackbar");
const resolve = (dir) => path.join(__dirname, ".", dir);

module.exports = {
  productionSourceMap: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets",
  devServer: {
    port: 9999,
    host: "0.0.0.0",
    https: false,
    open: true,
  },

  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) => {
      let rule = config.module.rule("less").oneOf(type);
      rule
        .use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [path.resolve(__dirname, "./lessVariates.less")],
        });
    });

    config.resolve.alias
      .set("@", resolve("src"))
      .set("api", resolve("src/apis"))
      .set("common", resolve("src/common"));

    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => ({
        name: "./assets/images/[name].[ext]",
        quality: 85,
        limit: 0,
        esModule: false,
      }));

    config.module
      .rule("svg")
      .test(/.svg$/)
      .include.add(resolve("src/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader");

    config.plugin("define").tap((args) => [
      {
        ...args,
        "window.isDefine": JSON.stringify(true),
      },
    ]);

    // 生产环境配置
    if (process.env.NODE_ENV === "production") {
      config.output.filename("./js/[name].[chunkhash:8].js");
      config.output.chunkFilename("./js/[name].[chunkhash:8].js");
      config.plugin("extract-css").tap((args) => [
        {
          filename: "css/[name].[contenthash:8].css",
          chunkFilename: "css/[name].[contenthash:8].css",
        },
      ]);
      config
        .plugin("hotHash")
        .use(HotHashWebpackPlugin, [{ version: "1.0.0" }]);
      config.plugin("webpackBar").use(WebpackBar);

      config.optimization
        .minimize(true)
        .minimizer("terser")
        .tap((args) => {
          let { terserOptions } = args[0];
          terserOptions.compress.drop_console = true;
          terserOptions.compress.drop_debugger = true;
          return args;
        });
      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: "common",
            chunks: "all",
            minSize: 1,
            minChunks: 2,
            priority: 1,
          },
          vendor: {
            name: "chunk-libs",
            chunks: "all",
            test: /[\/]node_modules[\/]/,
            priority: 10,
          },
        },
      });
    }
  },
};

<template>
  <div id="app">
    <!-- 上传组件 -->
    <el-upload action drag :auto-upload="false" :show-file-list="false" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">大小不超过 200M 的视频</div>
    </el-upload>

    <!-- 进度显示 -->
    <div class="progress-box">
      <span>上传进度：{{ percent.toFixed() }}%</span>
      <el-button type="primary" size="mini" @click="handleClickBtn">{{ upload | btnTextFilter}}</el-button>
    </div>

    <!-- 展示上传成功的视频 -->
    <div v-if="videoUrl">
      <video :src="videoUrl" controls />
    </div>
  </div>
</template>

<script>
  import SparkMD5 from "spark-md5"
  import axios from "axios"

  export default {
    name: 'App3',
    filters: {
      btnTextFilter(val) {
        return val ? '暂停' : '继续'
      }
    },
    data() {
      return {
        percent: 0,
        videoUrl: '',
        upload: true,
        percentCount: 0
      }
    },
    methods: {
      async handleChange(file) {
        if (!file) return
        this.percent = 0
        this.videoUrl = ''
        // 获取文件并转成 ArrayBuffer 对象
        const fileObj = file.raw
        let buffer
        try {
          buffer = await this.fileToBuffer(fileObj)
        } catch (e) {
          console.log(e)
        }

        // 将文件按固定大小（2M）进行切片，注意此处同时声明了多个常量
        const chunkSize = 2097152,
          chunkList = [], // 保存所有切片的数组
          chunkListLength = Math.ceil(fileObj.size / chunkSize), // 计算总共多个切片
          suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1] // 文件后缀名

        // 根据文件内容生成 hash 值
        const spark = new SparkMD5.ArrayBuffer()
        spark.append(buffer)
        const hash = spark.end()

        // 生成切片，这里后端要求传递的参数为字节数据块（chunk）和每个数据块的文件名（fileName）
        let curChunk = 0 // 切片时的初始位置
        for (let i = 0; i < chunkListLength; i++) {
          const item = {
            chunk: fileObj.slice(curChunk, curChunk + chunkSize),
            fileName: `${hash}_${i}.${suffix}` // 文件名规则按照 hash_1.jpg 命名
          }
          curChunk += chunkSize
          chunkList.push(item)
        }
        this.chunkList = chunkList // sendRequest 要用到
        this.hash = hash // sendRequest 要用到
        this.sendRequest()
      },

      // 发送请求
      sendRequest() {
        const requestList = [] // 请求集合
        this.chunkList.forEach((item, index) => {
          const fn = () => {
            const formData = new FormData()
            formData.append('chunk', item.chunk)
            formData.append('filename', item.fileName)
            return axios({
              url: '/single3',
              method: 'post',
              headers: { 'Content-Type': 'multipart/form-data' },
              data: formData
            }).then(res => {
              if (res.data.code === 0) { // 成功
                if (this.percentCount === 0) { // 避免上传成功后会删除切片改变 chunkList 的长度影响到 percentCount 的值
                  this.percentCount = 100 / this.chunkList.length
                }
                this.percent += this.percentCount // 改变进度
                this.chunkList.splice(index, 1) // 一旦上传成功就删除这一个 chunk，方便断点续传
              }
            })
          }
          requestList.push(fn)
        })

        let i = 0 // 记录发送的请求个数
        // 文件切片全部发送完毕后，需要请求 '/merge' 接口，把文件的 hash 传递给服务器
        const complete = () => {
          axios({
            url: '/merge',
            method: 'get',
            params: { hash: this.hash }
          }).then(res => {
            if (res.data.code === 0) { // 请求发送成功
              this.videoUrl = res.data.path
            }
          })
        }
        const send = async () => {
          if (!this.upload) return
          if (i >= requestList.length) {
            // 发送完毕
            complete()
            return
          }
          await requestList[i]()
          i++
          send()
        }
        send() // 发送请求
      },

      // 按下暂停按钮
      handleClickBtn() {
        this.upload = !this.upload
        // 如果不暂停则继续上传
        if (this.upload) this.sendRequest()
      },

      // 将 File 对象转为 ArrayBuffer
      fileToBuffer(file) {
        return new Promise((resolve, reject) => {
          const fr = new FileReader()
          fr.onload = e => {
            resolve(e.target.result)
          }
          fr.readAsArrayBuffer(file)
          fr.onerror = () => {
            reject(new Error('转换文件格式发生错误'))
          }
        })
      }
    }
  }
</script>

<style scoped>
  .progress-box {
    box-sizing: border-box;
    width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #ecf5ff;
    font-size: 14px;
    border-radius: 4px;
  }
</style>

import axios from "axios";
import { getToken, setToken, getRefreshToken } from "@utils/auth";

// 刷新 access_token 的接口
const refreshToken = () => {
  return instance.post(
    "/auth/refresh",
    { refresh_token: getRefreshToken() },
    true
  );
};

// 创建 axios 实例
const instance = axios.create({
  baseURL: process.env.GATSBY_API_URL,
  timeout: 30000,
  headers: {
    "Content-Type": "application/json",
  },
});

let isRefreshing = false; // 标记是否正在刷新 token
let requests = []; // 存储待重发请求的数组
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (!error.response) {
      return Promise.reject(error);
    }
    if (
      error.response.status === 401 &&
      !error.config.url.includes("/auth/refresh")
    ) {
      const { config } = error;
      if (!isRefreshing) {
        isRefreshing = true;
        return refreshToken()
          .then((res) => {
            const { access_token } = res.data;
            setToken(access_token);
            config.headers.Authorization = `Bearer ${access_token}`;
            // token 刷新后将数组的方法重新执行
            requests.forEach((cb) => cb(access_token));
            requests = []; // 重新请求完清空
            return instance(config);
          })
          .catch((err) => {
            console.log("抱歉，您的登录状态已失效，请重新登录！");
            return Promise.reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise((resolve) => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push((token) => {
            config.headers.Authorization = `Bearer ${token}`;
            resolve(instance(config));
          });
        });
      }
    }
    return Promise.reject(error);
  }
);

// 给请求头添加 access_token
const setHeaderToken = (isNeedToken) => {
  const accessToken = isNeedToken ? getToken() : null;
  if (isNeedToken) {
    // api 请求需要携带 access_token
    if (!accessToken) {
      console.log("不存在 access_token 则跳转回登录页");
    }
    instance.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
  }
};

// 有些 api 并不需要用户授权使用，则无需携带 access_token；默认不携带，需要传则设置第三个参数为 true
export const get = (url, params = {}, isNeedToken = false) => {
  setHeaderToken(isNeedToken);
  return instance({
    method: "get",
    url,
    params,
  });
};

export const post = (url, params = {}, isNeedToken = false) => {
  setHeaderToken(isNeedToken);
  return instance({
    method: "post",
    url,
    data: params,
  });
};

 abbc abbbc
/ab{2,5}c/

ab1c ab2c
/ab[1,2,3]c/

[1234][1 - 4];

"hello" = "" + "" + "hello"
"hello" /^^hello$$$/

const format = (num) =>{
  return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/g,',').replace(/^/,'$$ ')
}

let str = 'I love js java node'
let str = 'I love node'
reg = /^ I love (?:js|node)/

一个是替换 另一个是提取
/^\s+|\s+$/g ''
/^\s*(.*?)\s*$/g  $1

/(?:^|\s)\w/g $1.toUpperCase 

-moz-magic
/[_-\s]+(.)?/g  
(.) 首字母    ?字符尾巴可能不是单词字符  '-moz-magic '  

/([a-zA-Z])/g, '-$1' 
/[_-\s]+/g, '-'

<>div<
/\&([^;]+);/g.replace(match,key) &gt gt 

// 虚拟 DOM 结构
const element = {
  type: "div", // 标签名
  props: {
    // 节点属性，包含 children
    title: "foo", // title 属性
    children: "hello", // 子节点，注：实际上这里应该是数组结构，帮助我们存储更多子节点
  },
};

const createElement = (type, props, ...children) => {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) =>
        typeof child === "object" ? child : createTextElement(child)
      ),
    },
  };
};

const createTextElement = (text) => {
  return {
    type: "TYPE_TEXT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
};

// 虚拟Dom，添加到真实节点
function render(element, container) {
  const dom =
    element.type === "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type);
  // 遍历所有子节点，并进行渲染
  element.props.children.forEach((child) => render(child, dom));
  const isProperty = (key) => key !== "children";
  // 将element的props属性添加到dom
  Object.keys(element.props)
    .filter(isProperty)
    .forEach((name) => {
      dom[name] = element.props[name];
    });
  container.appendChild(dom);
}

console.log(
  el("div", { id: "container" }, [
    el("h1", { style: "color: red" }, ["simple virtal dom"]),
  ])
);

function Element(tagName, props = {}, children = []) {
  // 标签名
  this.tagName = tagName;
  // 属性对象
  this.props = props;
  // 子节点
  this.children = children;
  // key标志
  const { key = void 666 } = this.props;
  this.key = key;

  // 子节点数量
  let count = 0;
  this.children.forEach((child, index) => {
    if (child instanceof Element) {
      count += child.count;
    }
    count++;
  });
  this.count = count;
}

Element.prototype.render = function () {
  // 根据tag创建一个标签
  const el = document.createElement(this.tagName);
  const props = this.props;
  // 遍历props给标签赋属性
  for (const propName in props) {
    const propValue = props[propName];
    _.setAttr(el, propName, propValue);
  }
  // 遍历子结点
  this.children.forEach((child) => {
    let childEl;
    // 如果子结点的原型指向El 继续创建标签 属性赋值
    if (child instanceof Element) {
      // 进行递归子结点 el("h1",{style:"color:red"})
      childEl = child.render();
    } else {
      // 子结点非指向EL，就创建文本标签
      childEl = document.createTextNode(child);
    }
    el.appendChild(childEl);
  });

  return el;
};

document.body.appendChild(
  el("div", { id: "container" }, [
    el("h1", { style: "color: red" }, ["simple virtal dom"]),
  ]).render()
);

if (_.isString(oldNode) && _.isString(newNode)) {
  currentNode.push({ type: patch.type, content: newNode });
}

if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
  // Diff props
  var propsPatches = diffProps(oldNode, newNode);
  if (propsPatches) {
    currentPatch.push({ type: patch.PROPS, props: propsPatches });
  }
  // Diff children. If the node has a `ignore` property, do not diff children
  if (!isIgnoreChildren(newNode)) {
    diffChildren(
      oldNode.children,
      newNode.children,
      index,
      patches,
      currentPatch
    );
  }
}

function patch(node, patches) {
  var walker = { index: 0 };
  dfsWalk(node, walker, patches);
}

function dfsWalk(node, walker, patches) {
  var currentPatches = patches[walker.index];

  var len = node.childNodes ? node.childNodes.length : 0;
  for (var i = 0; i < len; i++) {
    var child = node.childNodes[i];
    walker.index++;
    dfsWalk(child, walker, patches);
  }

  if (currentPatches) {
    applyPatches(node, currentPatches);
  }
}

20个请求最多5个
// 请求函数
function createTask(i) {
  return () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(i);
      }, 2000);
    });
  };
}

class TaskQueue {
  constructor() {
    this.max = 5;
    this.taskList = [];
    setTimeout(() => {
      this.run();
    });
  }
  addTask(task) {
    this.taskList.push(task);
  }
  run() {
    let len = this.taskList.length;

    if (!len) return false;

    let min = Math.min(this.max, len);
    for (let i = 0; i < min; i++) {
      // 开始占用一个任务的空间
      this.max--;
      let task = this.taskList.shift();
      task()
        .then((res) => {
          console.log("result:", res);
        })
        .catch((error) => {
          throw new Error(error);
        })
        .finally(() => {
          // 释放一个任务空间
          this.max++;
          this.run();
        });
    }
  }
}

const taskQueue = new TaskQueue();
for (let i = 0; i < 20; i++) {
  const task = createTask(i + 1);
  taskQueue.addTask(task);
}

window.WKwebviewBridge = {
  registerHandle:handleRegister,
  callHandler:callHandler
}
const sendMessageQueue  = []

bridge.callHandler('Name',data,(data)=>{
  console.log('js Receive data')
})
function callHandler(handlerName,data,responseCallBack){
  if(arguments.length ===2 && typeof data === 'function'){
    responseCallBack = data
    data = null
  }
  doSend({handlerName,data},responseCallBack)
}
function doSend(message,responseCallback){
  if(responseCallBack){
    const callBackId = '__bridge'+new Date()
    responseCallBack[]
  }
}