')
8 | // 命名的描述
9 | .description('create a new project')
10 | // create命令的选项
11 | .option('-f, --force', 'overwrite target if it exist')
12 | .action((name, options) => {
13 | // 执行'./create.js'，传入项目名称和 用户选项
14 | require('./create')(name, options);
15 | });
16 |
17 | program.parse();
18 |
--------------------------------------------------------------------------------
/my-build-cli/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-build-cli",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1
5 | }
6 |
--------------------------------------------------------------------------------
/my-build-cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-2022-cli",
3 | "version": "1.1.0",
4 | "description": "一个mini版的脚手架",
5 | "main": "./bin/www.js",
6 | "bin": "./bin/www.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "files": [
11 | "bin"
12 | ],
13 | "keywords": [
14 | "my-yuan-cli",
15 | "自定义脚手架"
16 | ],
17 | "author": "海阔天空",
18 | "license": "ISC",
19 | "dependencies": {
20 | "axios": "^0.24.0",
21 | "commander": "^8.3.0",
22 | "download-git-repo": "^3.0.2",
23 | "fs-extra": "^10.0.0",
24 | "inquirer": "^8.2.0",
25 | "ora": "^5.4.1",
26 | "util": "^0.12.4"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/performance-demo/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 |
--------------------------------------------------------------------------------
/performance-demo/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | 'extends': [
7 | 'plugin:vue/essential',
8 | 'eslint:recommended'
9 | ],
10 | parserOptions: {
11 | parser: '@babel/eslint-parser'
12 | },
13 | rules: {
14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/performance-demo/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 |
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 |
--------------------------------------------------------------------------------
/performance-demo/README.md:
--------------------------------------------------------------------------------
1 | 列举一些 `常规且有效` 的性能优化建议
2 |
3 | 1、main 分支是优化后的项目
4 |
5 | 2、test 分支为原始项目
6 |
--------------------------------------------------------------------------------
/performance-demo/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // presets: ['@vue/cli-plugin-babel/preset'],
3 | presets: ['@vue/app'],
4 | plugins: [
5 | [
6 | 'component',
7 | {
8 | libraryName: 'element-ui',
9 | styleLibraryName: 'theme-chalk'
10 | }
11 | ]
12 | ]
13 | };
14 |
--------------------------------------------------------------------------------
/performance-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "performance-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build --report",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "axios": "^1.2.2",
12 | "core-js": "^3.8.3",
13 | "echarts": "^5.4.1",
14 | "element-ui": "^2.15.12",
15 | "moment": "^2.29.4",
16 | "vue": "^2.6.14",
17 | "vue-lazyload": "^1.3.4",
18 | "vue-router": "^3.5.1",
19 | "vuex": "^3.6.2"
20 | },
21 | "devDependencies": {
22 | "@babel/core": "^7.12.16",
23 | "@babel/eslint-parser": "^7.12.16",
24 | "@vue/cli-plugin-babel": "~5.0.0",
25 | "@vue/cli-plugin-eslint": "~5.0.0",
26 | "@vue/cli-plugin-router": "~5.0.0",
27 | "@vue/cli-plugin-vuex": "~5.0.0",
28 | "@vue/cli-service": "~5.0.0",
29 | "babel-plugin-component": "^1.1.1",
30 | "compression-webpack-plugin": "^10.0.0",
31 | "eslint": "^7.32.0",
32 | "eslint-plugin-vue": "^8.0.3",
33 | "happypack": "^5.0.1",
34 | "less": "^4.0.0",
35 | "less-loader": "^8.0.0",
36 | "moment-locales-webpack-plugin": "^1.2.0",
37 | "vue-template-compiler": "^2.6.14"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/performance-demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/performance-demo/public/favicon.ico
--------------------------------------------------------------------------------
/performance-demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/performance-demo/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
10 |
11 |
33 |
--------------------------------------------------------------------------------
/performance-demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/performance-demo/src/assets/logo.png
--------------------------------------------------------------------------------
/performance-demo/src/components/dialogInfo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
45 |
50 |
--------------------------------------------------------------------------------
/performance-demo/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | import router from './router';
4 | import store from './store';
5 | import { Table, TableColumn, Form, FormItem, Input, Select, Option, TimePicker, Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Button, Dialog } from 'element-ui';
6 | import moment from 'moment';
7 | import * as echarts from 'echarts';
8 | import VueLazyLoad from 'vue-lazyload';
9 |
10 | Vue.use(VueLazyLoad, {
11 | preLoad: 1,
12 | attempt: 2
13 | });
14 | Vue.prototype.$moment = moment;
15 | Vue.prototype.$echarts = echarts;
16 | Vue.config.productionTip = false;
17 |
18 | Vue.use(Dialog);
19 | Vue.use(Table);
20 | Vue.use(TableColumn);
21 | Vue.use(Form);
22 | Vue.use(FormItem);
23 | Vue.use(Input);
24 | Vue.use(Select);
25 | Vue.use(TimePicker);
26 | Vue.use(Option);
27 | Vue.use(Switch);
28 | Vue.use(Checkbox);
29 | Vue.use(Radio);
30 | Vue.use(RadioGroup);
31 | Vue.use(Button);
32 | Vue.use(CheckboxGroup);
33 |
34 | new Vue({
35 | router,
36 | store,
37 | render: (h) => h(App)
38 | }).$mount('#app');
39 |
--------------------------------------------------------------------------------
/performance-demo/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueRouter from 'vue-router';
3 | // import HomeView from '../views/HomeView.vue';
4 | // import AboutView from '../views/AboutView.vue';
5 |
6 | Vue.use(VueRouter);
7 |
8 | const routes = [
9 | {
10 | path: '/',
11 | name: 'home',
12 | component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue')
13 | // component: HomeView
14 | },
15 | {
16 | path: '/about',
17 | name: 'about',
18 | component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
19 | // component: AboutView
20 | }
21 | ];
22 |
23 | const router = new VueRouter({
24 | routes
25 | });
26 |
27 | export default router;
28 |
--------------------------------------------------------------------------------
/performance-demo/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | Vue.use(Vuex)
5 |
6 | export default new Vuex.Store({
7 | state: {
8 | },
9 | getters: {
10 | },
11 | mutations: {
12 | },
13 | actions: {
14 | },
15 | modules: {
16 | }
17 | })
18 |
--------------------------------------------------------------------------------
/performance-demo/src/util/axiosWrap.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | const Axios = axios.create();
4 | Axios.defaults.timeout = 8000;
5 | Axios.defaults.withCredentials = true;
6 | Axios.defaults.dataType = 'JSON';
7 |
8 | // 请求拦截器
9 | Axios.interceptors.request.use(
10 | (config) => {
11 | return config;
12 | },
13 | (error) => {
14 | return Promise.reject(error);
15 | }
16 | );
17 |
18 | // 响应拦截器
19 | Axios.interceptors.response.use(
20 | (response) => {
21 | if (response.status === 200) {
22 | return Promise.resolve(response);
23 | } else {
24 | return Promise.reject(response);
25 | }
26 | },
27 | (error) => {
28 | if (error.response.status) {
29 | switch (error.response.status) {
30 | case 404:
31 | console.log('网络请求不存在');
32 | break;
33 | case 500:
34 | console.log('网络接口失败');
35 | break;
36 | // 其他错误，直接抛出错误提示
37 | default:
38 | }
39 | return Promise.reject(error.response);
40 | }
41 | return Promise.reject(error.response);
42 | }
43 | );
44 |
45 | export default Axios;
46 |
--------------------------------------------------------------------------------
/performance-demo/src/util/index.js:
--------------------------------------------------------------------------------
1 | export function targetType(target) {
2 | return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();
3 | }
4 | export function deepClone(target) {
5 | return JSON.parse(JSON.stringify(target));
6 | }
7 |
8 | export function listToTree(data) {
9 | // 使用对象重新存储数据, 空间换时间
10 | let map = {};
11 | // treeData存储最后结果
12 | let treeData = [];
13 | // 遍历原始数据data，存到map中，id为key，值为数据
14 | for (let i = 0; i < data.length; i++) {
15 | map[data[i].id] = data[i];
16 | }
17 | // 遍历对象
18 | for (let i in map) {
19 | // 根据 parentId 找到的是父节点
20 | if (map[i].parentId) {
21 | if (!map[map[i].parentId].children) {
22 | map[map[i].parentId].children = [];
23 | }
24 | // 将子节点放到父节点的 children中
25 | map[map[i].parentId].children.push(map[i]);
26 | } else {
27 | // parentId 找不到对应值，说明是根结点，直接插到根数组中
28 | treeData.push(map[i]);
29 | }
30 | }
31 | return treeData;
32 | }
33 |
34 | export function formatMenuTree({ data, pkey, ckey = 'id', lKey = 'label', pnKey }) {
35 | data = data.map((item) => {
36 | item.label = item[lKey];
37 | return item;
38 | });
39 | let tree = data.filter((item) => {
40 | const childArr = data.filter((sub) => {
41 | if (sub[pkey] === item[ckey]) {
42 | sub.hasParent = true;
43 | sub.rootId = item.rootId || item.id;
44 | if (pnKey) {
45 | // 传递第一级的参数到子级
46 | sub[pnKey.format] = item[pnKey.format] || item[pnKey.initial];
47 | }
48 | }
49 | return sub[pkey] === item[ckey];
50 | });
51 | if (childArr.length > 0) item.children = childArr;
52 | return !item.hasParent;
53 | });
54 | tree = tree.filter((item) => !item.hasParent);
55 | return tree;
56 | }
57 |
--------------------------------------------------------------------------------
/performance-demo/src/util/list.js:
--------------------------------------------------------------------------------
1 | export let tree = [
2 | { id: 1, title: 'child1', parentId: 0 },
3 | { id: 2, title: 'child2', parentId: 0 },
4 | { id: 3, title: 'child1_1', parentId: 1 },
5 | { id: 4, title: 'child1_2', parentId: 1 },
6 | { id: 5, title: 'child2_1', parentId: 2 }
7 | ];
8 |
--------------------------------------------------------------------------------
/performance-demo/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
This is an about page
4 |
打开弹框
5 |
6 |
7 | -
8 |
![]()
9 |
10 |
11 |
12 |
3 | {{ dataTime }}
4 | 打开弹框
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 立即创建
42 | 取消
43 |
44 |
45 |
46 |
47 |
48 |
49 |
124 |
133 |
--------------------------------------------------------------------------------
/performance-demo/vue.config.js:
--------------------------------------------------------------------------------
1 | const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
2 | // const CompressionPlugin = require('compression-webpack-plugin');
3 | const HappyPack = require('happypack');
4 | const os = require('os');
5 | // 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
6 | const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
7 |
8 | module.exports = {
9 | transpileDependencies: true,
10 | productionSourceMap: false,
11 | devServer: {
12 | proxy: {
13 | '/logstorage': {
14 | target: 'ttp://10.106.0.138:8083',
15 | changeOrigin: true, // target是域名的话，需要这个参数，
16 | secure: false // 设置支持https协议的代理,
17 | }
18 | }
19 | },
20 | configureWebpack: {
21 | externals: {
22 | vue: 'Vue',
23 | 'vue-router': 'VueRouter',
24 | axios: 'axios',
25 | echarts: 'echarts'
26 | },
27 | plugins: [
28 | new MomentLocalesPlugin({
29 | localesToKeep: ['zh-cn']
30 | }),
31 | // new CompressionPlugin({
32 | // test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则
33 | // threshold: 1024, //文件大小大于这个值时启用压缩
34 | // deleteOriginalAssets: false //压缩后保留原文件
35 | // }),
36 | new HappyPack({
37 | id: 'happybabel',
38 | loaders: ['babel-loader'],
39 | threadPool: happyThreadPool
40 | })
41 | ]
42 | }
43 | };
44 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
3 | "changelog": "@changesets/cli/changelog",
4 | "commit": false,
5 | "fixed": [],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "main",
9 | "updateInternalDependencies": "patch",
10 | "ignore": []
11 | }
12 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | vue.config
4 | /dist
5 | /testtemplate.txt
6 | .jsbeautifyrc
7 | # local env files
8 | .env.local
9 | .env.*.local
10 |
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 |
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | ZJS-FT.zip
26 | /node_modules/
27 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/README.md:
--------------------------------------------------------------------------------
1 | ## 安装
2 |
3 | ```javascript
4 | $ pnpm install
5 | ```
6 |
7 | ## 打包
8 |
9 | ```javascript
10 | $ pnpm run build
11 | ```
12 |
13 | ## 发布
14 |
15 | 例如：npm 包版本 1.0.0 更新为 1.1.0
16 |
17 | 这里 `@websee/pk1` 和 `@websee/pk2` 的初始版本都为 1.0.0
18 |
19 | ### 执行 `pnpm run changeset`
20 |
21 | 1、选择要发布的包
22 |
23 | 
24 |
25 | 2、选择发布 minor，选择对应的包
26 |
27 | 现在是 1.0.0 更新为 1.1.0，这里选择 minor
28 |
29 | 
30 |
31 | 3、填写 changelog
32 |
33 | 
34 |
35 | 4、Is this your desired changeset 选择 true
36 |
37 | 
38 |
39 | ### 执行 `pnpm run packages-version`
40 |
41 | 
42 |
43 | 提示 `All files have been updated`
44 |
45 | 打开 pk1 和 pk2 下的 package.json，发现版本号已修改完成
46 |
47 | 同时各目录下会自动生成 `CHANGELOG.md` 文件，记录版本号的变化
48 |
49 | ```js
50 | # @websee/pk1
51 |
52 | ## 1.1.0
53 |
54 | ### Minor Changes
55 |
56 | - 1.1.0
57 |
58 | ```
59 |
60 | ### 执行 `pnpm run publish`
61 |
62 | 发布 1.1.0 版本
63 |
64 | 
65 |
66 | 在 npm 官网上搜索 `@websee/pk1`，证明发布成功
67 |
68 | 
69 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "monorepo",
3 | "private": true,
4 | "scripts": {
5 | "build": "rollup -c",
6 | "changeset": "changeset",
7 | "packages-version": "changeset version",
8 | "release": "pnpm build && pnpm publish",
9 | "publish": "changeset publish --registry=https://registry.npmjs.com/"
10 | },
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "@changesets/cli": "^2.26.1",
15 | "rollup": "2.78.0",
16 | "rollup-plugin-typescript2": "0.34.1",
17 | "typescript": "4.9.4"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk1/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @websee/pk1
2 |
3 | ## 1.1.0
4 |
5 | ### Minor Changes
6 |
7 | - 1.1.0
8 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk1/dist/index.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3 | typeof define === 'function' && define.amd ? define(['exports'], factory) :
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["web-see"] = {}));
5 | })(this, (function (exports) { 'use strict';
6 |
7 | function pk1() {
8 | console.log('I am pk1');
9 | }
10 |
11 | exports.pk1 = pk1;
12 |
13 | Object.defineProperty(exports, '__esModule', { value: true });
14 |
15 | }));
16 | //# sourceMappingURL=index.js.map
17 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk1/dist/index.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export function pk1(): any {\r\n console.log('I am pk1');\r\n}"],"names":[],"mappings":";;;;;;WAAgB,GAAG,GAAA;EACjB,IAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;EAC1B;;;;;;;;;;"}
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@websee/pk1",
3 | "version": "1.1.0",
4 | "description": "",
5 | "main": "src/index.ts",
6 | "publishConfig": {
7 | "main": "dist/index.js"
8 | },
9 | "files": [
10 | "dist"
11 | ],
12 | "type": "module",
13 | "author": "海阔天空",
14 | "license": "ISC",
15 | "dependencies": {}
16 | }
17 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk1/src/index.ts:
--------------------------------------------------------------------------------
1 | export function pk1(): any {
2 | console.log('I am pk1');
3 | }
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk2/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @websee/pk2
2 |
3 | ## 1.1.0
4 |
5 | ### Minor Changes
6 |
7 | - 1.1.0
8 |
9 | ### Patch Changes
10 |
11 | - Updated dependencies
12 | - @websee/pk1@1.1.0
13 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk2/dist/index.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3 | typeof define === 'function' && define.amd ? define(factory) :
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["web-see"] = factory());
5 | })(this, (function () { 'use strict';
6 |
7 | function pk1() {
8 | console.log('I am pk1');
9 | }
10 |
11 | function pk2() {
12 | pk1();
13 | console.log('I am pk2');
14 | }
15 |
16 | return pk2;
17 |
18 | }));
19 | //# sourceMappingURL=index.js.map
20 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk2/dist/index.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.js","sources":["../../pk1/src/index.ts","../src/index.ts"],"sourcesContent":["export function pk1(): any {\r\n console.log('I am pk1');\r\n}","import {pk1} from '@websee/pk1'\r\n\r\nfunction pk2() {\r\n pk1()\r\n console.log('I am pk2');\r\n} \r\nexport default pk2;"],"names":[],"mappings":";;;;;;WAAgB,GAAG,GAAA;EACjB,IAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;EAC1B;;ECAA,SAAS,GAAG,GAAA;EACV,IAAA,GAAG,EAAE,CAAA;EACL,IAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;EAC1B;;;;;;;;"}
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@websee/pk2",
3 | "version": "1.1.0",
4 | "description": "",
5 | "main": "src/index.ts",
6 | "publishConfig": {
7 | "main": "dist/index.js"
8 | },
9 | "type": "module",
10 | "files": [
11 | "dist"
12 | ],
13 | "author": "海阔天空",
14 | "license": "ISC",
15 | "dependencies": {
16 | "@websee/pk1": "workspace:^1.1.0"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/packages/pk2/src/index.ts:
--------------------------------------------------------------------------------
1 | import {pk1} from '@websee/pk1'
2 |
3 | function pk2() {
4 | pk1()
5 | console.log('I am pk2');
6 | }
7 | export default pk2;
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'packages/*'
3 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/rollup.config.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 | import typescript from 'rollup-plugin-typescript2';
4 | const packagesDir = path.resolve(__dirname, 'packages');
5 | const packageFiles = fs.readdirSync(packagesDir);
6 | function output(path) {
7 | return [
8 | {
9 | input: [`./packages/${path}/src/index.ts`],
10 | output: [
11 | {
12 | file: `./packages/${path}/dist/index.js`,
13 | format: 'umd',
14 | name: 'web-see',
15 | sourcemap: true
16 | }
17 | ],
18 | plugins: [
19 | typescript({
20 | tsconfigOverride: {
21 | compilerOptions: {
22 | module: 'ESNext'
23 | }
24 | },
25 | useTsconfigDeclarationDir: true
26 | })
27 | ]
28 | }
29 | ];
30 | }
31 |
32 | export default [...packageFiles.map((path) => output(path)).flat()];
33 |
--------------------------------------------------------------------------------
/pnpm-monorepo-changesets/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["global.d.ts", "packages", "types", "test"],
3 | "compilerOptions": {
4 | "resolveJsonModule": true,
5 | "target": "es5",
6 | "module": "esnext",
7 | "lib": ["dom", "esnext"],
8 | "importHelpers": true,
9 | "declaration": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "noImplicitAny": true,
13 | "strictNullChecks": true,
14 | "strictFunctionTypes": true,
15 | "strictPropertyInitialization": true,
16 | "noImplicitThis": true,
17 | "alwaysStrict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noImplicitReturns": true,
21 | "noFallthroughCasesInSwitch": true,
22 | "moduleResolution": "node",
23 | "baseUrl": "./",
24 | "paths": {
25 | "*": ["src/*", "node_modules/*"]
26 | },
27 | "jsx": "react",
28 | "esModuleInterop": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/rrweb/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 |
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 |
--------------------------------------------------------------------------------
/rrweb/README.md:
--------------------------------------------------------------------------------
1 | # 使用 rrweb 进行前端录屏
2 |
3 | ## 安装
4 |
5 | ```
6 | npm install
7 | ```
8 |
9 | ## 执行
10 |
11 | ```
12 | npm run serve
13 | ```
14 |
15 | ## 点击录屏，10s 后点击播放
16 |
17 | 
18 |
--------------------------------------------------------------------------------
/rrweb/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/rrweb/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "baseUrl": "./",
6 | "moduleResolution": "node",
7 | "paths": {
8 | "@/*": [
9 | "src/*"
10 | ]
11 | },
12 | "lib": [
13 | "esnext",
14 | "dom",
15 | "dom.iterable",
16 | "scripthost"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/rrweb/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "myapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^3.8.3",
12 | "echarts": "^5.4.0",
13 | "element-ui": "^2.15.12",
14 | "fs": "0.0.1-security",
15 | "js-base64": "^3.7.3",
16 | "pako": "^2.1.0",
17 | "rrweb": "^2.0.0-alpha.4",
18 | "rrweb-player": "^1.0.0-alpha.4",
19 | "vue": "^2.6.14",
20 | "vue-router": "^3.5.1"
21 | },
22 | "devDependencies": {
23 | "@babel/core": "^7.12.16",
24 | "@babel/eslint-parser": "^7.12.16",
25 | "@vue/cli-plugin-babel": "~5.0.0",
26 | "@vue/cli-plugin-eslint": "~5.0.0",
27 | "@vue/cli-plugin-router": "~5.0.0",
28 | "@vue/cli-service": "~5.0.0",
29 | "eslint": "^7.32.0",
30 | "eslint-plugin-vue": "^8.0.3",
31 | "less": "^4.0.0",
32 | "less-loader": "^8.0.0",
33 | "vue-template-compiler": "^2.6.14"
34 | },
35 | "eslintConfig": {
36 | "root": true,
37 | "env": {
38 | "node": true
39 | },
40 | "extends": [
41 | "plugin:vue/essential",
42 | "eslint:recommended"
43 | ],
44 | "parserOptions": {
45 | "parser": "@babel/eslint-parser"
46 | },
47 | "rules": {}
48 | },
49 | "browserslist": [
50 | "> 1%",
51 | "last 2 versions",
52 | "not dead"
53 | ]
54 | }
55 |
--------------------------------------------------------------------------------
/rrweb/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/rrweb/public/favicon.ico
--------------------------------------------------------------------------------
/rrweb/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/rrweb/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
32 |
--------------------------------------------------------------------------------
/rrweb/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/rrweb/src/assets/logo.png
--------------------------------------------------------------------------------
/rrweb/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | hello world
3 |
4 |
5 |
11 |
12 |
13 |
29 |
--------------------------------------------------------------------------------
/rrweb/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | import router from './router';
4 | import ElementUI from 'element-ui';
5 | import 'element-ui/lib/theme-chalk/index.css';
6 | import * as echarts from 'echarts';
7 |
8 | Vue.use(ElementUI);
9 | Vue.prototype.$echarts = echarts;
10 | Vue.config.productionTip = false;
11 |
12 | new Vue({
13 | router,
14 | render: (h) => h(App)
15 | }).$mount('#app');
16 |
--------------------------------------------------------------------------------
/rrweb/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import HomeView from '../views/HomeView.vue'
4 |
5 | Vue.use(VueRouter)
6 |
7 | const routes = [
8 | {
9 | path: '/',
10 | name: 'home',
11 | component: HomeView
12 | },
13 | {
14 | path: '/about',
15 | name: 'about',
16 | // route level code-splitting
17 | // this generates a separate chunk (about.[hash].js) for this route
18 | // which is lazy-loaded when the route is visited.
19 | component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
20 | }
21 | ]
22 |
23 | const router = new VueRouter({
24 | routes
25 | })
26 |
27 | export default router
28 |
--------------------------------------------------------------------------------
/rrweb/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
This is an about page
4 |
5 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/rrweb/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service');
2 | module.exports = defineConfig({
3 | transpileDependencies: true
4 | });
5 |
--------------------------------------------------------------------------------
/source-map/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 |
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 |
--------------------------------------------------------------------------------
/source-map/README.md:
--------------------------------------------------------------------------------
1 | # 使用 source-map 进行代码还原
2 |
3 | ## 安装
4 |
5 | ```
6 | npm install
7 | ```
8 |
9 | ## 运行
10 |
11 | ```
12 | npm run start
13 | ```
14 |
15 | 浏览器输入 http://localhost:8083
16 |
17 | ## 错误还原的示例
18 |
19 | 
20 |
21 | ## 最终的效果
22 |
23 | 
24 |
--------------------------------------------------------------------------------
/source-map/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/cli-plugin-babel/preset'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/source-map/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "baseUrl": "./",
6 | "moduleResolution": "node",
7 | "paths": {
8 | "@/*": [
9 | "src/*"
10 | ]
11 | },
12 | "lib": [
13 | "esnext",
14 | "dom",
15 | "dom.iterable",
16 | "scripthost"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/source-map/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "myapp",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "node ./server.js",
7 | "test": "npm run build && npm run start",
8 | "serve": "vue-cli-service serve",
9 | "build": "vue-cli-service build"
10 | },
11 | "dependencies": {
12 | "core-js": "^3.8.3",
13 | "error-stack-parser": "^2.1.4",
14 | "express": "^4.18.2",
15 | "fs": "0.0.1-security",
16 | "path": "^0.12.7",
17 | "serve-static": "^1.15.0",
18 | "source-map-js": "^1.0.2",
19 | "vue": "^2.6.14",
20 | "vue-router": "^3.5.1"
21 | },
22 | "devDependencies": {
23 | "@babel/core": "^7.12.16",
24 | "@babel/eslint-parser": "^7.12.16",
25 | "@vue/cli-plugin-babel": "~5.0.0",
26 | "@vue/cli-plugin-eslint": "~5.0.0",
27 | "@vue/cli-plugin-router": "~5.0.0",
28 | "@vue/cli-service": "~5.0.0",
29 | "eslint": "^7.32.0",
30 | "eslint-plugin-vue": "^8.0.3",
31 | "less": "^4.0.0",
32 | "less-loader": "^8.0.0",
33 | "vue-template-compiler": "^2.6.14"
34 | },
35 | "eslintConfig": {
36 | "root": true,
37 | "env": {
38 | "node": true
39 | },
40 | "extends": [
41 | "plugin:vue/essential",
42 | "eslint:recommended"
43 | ],
44 | "parserOptions": {
45 | "parser": "@babel/eslint-parser"
46 | },
47 | "rules": {}
48 | },
49 | "browserslist": [
50 | "> 1%",
51 | "last 2 versions",
52 | "not dead"
53 | ]
54 | }
55 |
--------------------------------------------------------------------------------
/source-map/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/source-map/public/favicon.ico
--------------------------------------------------------------------------------
/source-map/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/source-map/server.js:
--------------------------------------------------------------------------------
1 | // 先安装 npm install express --save
2 |
3 | const express = require('express');
4 | const app = express();
5 | const path = require('path');
6 | const fs = require('fs');
7 | const serveStatic = require('serve-static');
8 | const rootPath = path.join(__dirname, 'dist');
9 | app.use(serveStatic(rootPath));
10 |
11 | //设置允许跨域访问该服务.
12 | app.all('*', function (res, req, next) {
13 | req.header('Access-Control-Allow-Origin', '*');
14 | req.header('Access-Control-Allow-Headers', 'Content-Type');
15 | req.header('Access-Control-Allow-Methods', '*');
16 | req.header('Content-Type', 'application/json;charset=utf-8');
17 | next();
18 | });
19 |
20 | // 获取js.map源码文件
21 | app.get('/getmap', (req, res) => {
22 | // req.query 获取接口参数
23 | let fileName = req.query.fileName;
24 | let mapFile = path.join(__filename, '..', 'dist/js');
25 | // 拿到dist目录下对应map文件的路径
26 | let mapPath = path.join(mapFile, `${fileName}.map`);
27 | console.log('path', mapPath);
28 | fs.readFile(mapPath, function (err, data) {
29 | if (err) {
30 | return;
31 | }
32 | res.send(data);
33 | });
34 | });
35 | app.listen(8083, () => {
36 | console.log('Server is running at http://localhost:8083');
37 | });
38 |
--------------------------------------------------------------------------------
/source-map/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
hello world
3 |
4 |
5 |
11 |
12 |
13 |
29 |
--------------------------------------------------------------------------------
/source-map/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | import router from './router';
4 | import ErrorStackParser from 'error-stack-parser';
5 | import sourceMap from 'source-map-js';
6 |
7 | Vue.config.productionTip = false;
8 |
9 | // 资源加载错误
10 | function resourceTransform(target) {
11 | return {
12 | action_type: 'RESOURCE_ERROR',
13 | happen_time: new Date().getTime(),
14 | source_url: `资源加载失败： ${target.src.slice(0, 100) || target.href.slice(0, 100)} `,
15 | element_type: target.localName
16 | };
17 | }
18 |
19 | window.addEventListener(
20 | 'error',
21 | (err) => {
22 | console.log('err', err);
23 |
24 | // 资源加载错误 提取有用数据
25 | if (err.target.localName) {
26 | const data = resourceTransform(err.target);
27 | // 上报错误
28 | console.log('data', data);
29 | return;
30 | }
31 | // code error
32 | let stackFrame = ErrorStackParser.parse(err.error)[0];
33 | console.log('stackFrame', stackFrame);
34 | let { fileName, columnNumber, lineNumber } = stackFrame;
35 | findCodeBySourceMap({
36 | fileName,
37 | line: lineNumber,
38 | column: columnNumber
39 | });
40 | },
41 | true // true必须加（冒泡阶段捕获），不加捕获不到资源加载异常
42 | );
43 |
44 | window.addEventListener('unhandledrejection', (err) => {
45 | console.log('err', err);
46 | // code error
47 | let stackFrame = ErrorStackParser.parse(err.reason)[0];
48 | console.log('unhandledrejection', stackFrame);
49 | let { fileName, columnNumber, lineNumber } = stackFrame;
50 | findCodeBySourceMap({
51 | fileName,
52 | line: lineNumber,
53 | column: columnNumber
54 | });
55 | });
56 |
57 | Vue.config.errorHandler = async (err) => {
58 | console.log(err);
59 | const stackFrame = ErrorStackParser.parse(err)[0];
60 | console.log(stackFrame, '错误堆栈');
61 | findCodeBySourceMap({
62 | fileName: stackFrame.fileName,
63 | line: stackFrame.lineNumber,
64 | column: stackFrame.columnNumber
65 | });
66 | // findCodeBySourceMap({
67 | // fileName: 'http://localhost:3000/js/app.de87f606.js',
68 | // line: 1,
69 | // column: 895
70 | // });
71 | };
72 |
73 | // 找到以.js结尾的fileName
74 | function matchStr(str) {
75 | if (str.endsWith('.js')) return str.substring(str.lastIndexOf('/') + 1);
76 | }
77 |
78 | // 将所有的空格转化为实体字符
79 | function repalceAll(str) {
80 | return str.replace(new RegExp(' ', 'gm'), ' ');
81 | }
82 |
83 | function loadSourceMap(fileName) {
84 | let file = matchStr(fileName);
85 | if (!file) return;
86 | return new Promise((resolve) => {
87 | fetch(`${window.location.origin}/getmap?fileName=${file}`).then((response) => {
88 | resolve(response.json());
89 | });
90 | });
91 | }
92 |
93 | const findCodeBySourceMap = async ({ fileName, line, column }) => {
94 | let sourceData = await loadSourceMap(fileName);
95 | if (!sourceData) return;
96 | let { sourcesContent, sources } = sourceData;
97 | console.log('sourceData', sourceData);
98 | let consumer = await new sourceMap.SourceMapConsumer(sourceData);
99 | let result = consumer.originalPositionFor({
100 | line: Number(line),
101 | column: Number(column)
102 | });
103 | // result结果
104 | // {
105 | // "source": "webpack://myapp/src/views/HomeView.vue",
106 | // "line": 24, // 具体的报错行数
107 | // "column": 0, // 具体的报错列数
108 | // "name": null
109 | // }
110 |
111 | let code = sourcesContent[sources.indexOf(result.source)];
112 | console.log('代码', code);
113 | let codeList = code.split('\n');
114 | var row = result.line,
115 | len = codeList.length - 1;
116 | var start = row - 5 >= 0 ? row - 5 : 0, // 将报错代码显示在中间位置
117 | end = start + 9 >= len ? len : start + 9; // 最多展示10行
118 | let newLines = [];
119 | let j = 0;
120 | for (var i = start; i <= end; i++) {
121 | j++;
122 | newLines.push(`${j}. ${repalceAll(codeList[i])}
`);
123 | }
124 |
125 | let target = document.querySelector('#text');
126 | target.innerHTML = ``;
127 | };
128 |
129 | new Vue({
130 | router,
131 | render: (h) => h(App)
132 | }).$mount('#app');
133 |
--------------------------------------------------------------------------------
/source-map/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import HomeView from '../views/HomeView.vue'
4 |
5 | Vue.use(VueRouter)
6 |
7 | const routes = [
8 | {
9 | path: '/',
10 | name: 'home',
11 | component: HomeView
12 | },
13 | {
14 | path: '/about',
15 | name: 'about',
16 | // route level code-splitting
17 | // this generates a separate chunk (about.[hash].js) for this route
18 | // which is lazy-loaded when the route is visited.
19 | component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
20 | }
21 | ]
22 |
23 | const router = new VueRouter({
24 | routes
25 | })
26 |
27 | export default router
28 |
--------------------------------------------------------------------------------
/source-map/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
This is an about page
4 |
5 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/source-map/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
3 |
4 |
5 | 表格计算示例
6 | canvas绘制示例
7 |
8 |
9 |
10 |
11 |
12 |
3 |
4 |
5 |
6 |
7 |
8 |
24 |
25 |
30 |
--------------------------------------------------------------------------------
/web-worker/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | import ElementUI from 'element-ui';
4 | import 'element-ui/lib/theme-chalk/index.css';
5 |
6 | import 'xe-utils';
7 | import VXETable from 'vxe-table';
8 | import 'vxe-table/lib/style.css';
9 |
10 | Vue.config.productionTip = false;
11 |
12 | Vue.use(ElementUI);
13 | Vue.use(VXETable);
14 | new Vue({
15 | render: (h) => h(App)
16 | }).$mount('#app');
17 |
--------------------------------------------------------------------------------
/web-worker/src/worker/canvasWorker.js:
--------------------------------------------------------------------------------
1 | onmessage = function (e) {
2 | // 使用OffscreenCanvas（离屏Canvas）
3 | let canvas = e.data.canvas;
4 | // 获取绘图上下文
5 | let ctx = canvas.getContext('2d');
6 | // 绘制一个圆弧
7 | ctx.beginPath(); // 开启路径
8 | ctx.arc(150, 75, 50, 0, Math.PI * 2);
9 | ctx.fillStyle = '#1989fa'; //设置填充颜色
10 | ctx.fill(); //开始填充
11 | ctx.stroke();
12 | };
13 |
--------------------------------------------------------------------------------
/web-worker/src/worker/dataWorker.js:
--------------------------------------------------------------------------------
1 | onmessage = function (e) {
2 | let data = e.data;
3 | let list = [];
4 | for (let i = 1; i < 400; i++) {
5 | for (let j = 0; j < 10; j++) {
6 | list.push({ ...data[j], key: `数据${j + 1 + i * 10}` });
7 | }
8 | }
9 | // 发送数据事件
10 | postMessage(list);
11 | };
12 |
--------------------------------------------------------------------------------
/web-worker/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service');
2 | module.exports = defineConfig({
3 | transpileDependencies: true
4 | });
5 |
--------------------------------------------------------------------------------
/web-worker/webworker.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xy-sea/blog/c104a0698fbfb641aeeaac9952950b637e29bd17/web-worker/webworker.gif
--------------------------------------------------------------------------------
/动画demo/奖动效demo/prize.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
--------------------------------------------------------------------------------
/算法分类题库/README.md:
--------------------------------------------------------------------------------
1 | ## 算法导图
2 |
3 | 
4 |
--------------------------------------------------------------------------------
/算法分类题库/堆.md:
--------------------------------------------------------------------------------
1 | ### 堆
2 |
3 | **堆实际上是一棵完全二叉树**
4 |
5 | **大顶堆**： 每个的节点元素值不小于其子节点
6 |
7 | **小顶堆**： 每个的节点元素值不大于其子节点
8 |
9 | 
10 |
11 | #### 堆的作用
12 |
13 | 在庞大的数据中，找到最大的 m 个数或者最小的 m 个数，可以借助堆来完成这个过程，时间复杂度为`nlogm`
14 |
15 | 如果先排序，再取前 m 个数，最小时间复杂度`nlogn`
16 |
17 | `nlogm` < `nlogn`，堆排序时间复杂度更优
18 |
19 | **堆节点与其叶子节点的规律**
20 |
21 | 1）堆中父节点为`k`，它的左子节点下标为`2k+1`，右子节点是`2k+2`
22 |
23 | 2）所有序号大于`length/2`的结点都是叶子节点, `0` 到 `length/2-1` 为父节点
24 |
25 | #### 堆的排序过程
26 |
27 | 
28 |
29 | #### 堆排序
30 |
31 | 从一堆数中，找到前 m 个最小值
32 |
33 | 如图，从下面的大顶堆中，找到前 4 个最小值，结果为`[6, 5, 2, 1]`
34 |
35 | 
36 |
37 | ```js
38 | function heapSort(list, m) {
39 | if (m > list.length) {
40 | return [];
41 | }
42 | createHeap(list, m);
43 | for (let i = m; i < list.length; i++) {
44 | if (list[i] < list[0]) {
45 | // 找到前m个数的最小值，依次将最小值放到最前面
46 | [list[i], list[0]] = [list[0], list[i]];
47 | ajustHeap(list, 0, m);
48 | }
49 | }
50 | // 取出前m个数
51 | return list.splice(0, m);
52 | }
53 | // 构建大顶堆（构建的顺序是从下往上，先找到最后一个父节点，然后从最后一个父节点开始构建，然后依次往上构建，将最大值逐步替换成根节点）
54 | function createHeap(arr, length) {
55 | // 找到堆中所有的非叶子节点（找到最后一个叶子节点，该节点之前都是非叶子节点）
56 | for (let i = Math.floor(length / 2) - 1; i >= 0; i--) {
57 | // 堆中，父节点为i，则子节点为2*i+1、2*i+2；反过来，知道了子节点为length,则最后一个子节点为Math.floor(length / 2) - 1。
58 | ajustHeap(arr, i, length); // 调整大顶堆，将最大值逐步替换成根节点
59 | }
60 | }
61 | // 调整大顶堆（注意：调整的顺序是从上往下，将根节点替换后，先调整根节点，然后依次往下调整，对应的子节点如果发生替换，要重新调整下对应子节点，保证都满足子节点不大于父节点的条件，直到该大顶推全部调整完成）
62 | // 比如，当调节根节点时，[a0, a1, a2], a2> a0, a2替换a0，则要重新调节a2这个分支上的节点，保证都满足子节点不大于父节点的条件
63 | function ajustHeap(arr, index, length) {
64 | for (let i = 2 * index + 1; i < length; i = 2 * i + 1) {
65 | // 父节点为i，则子节点为2*i+1
66 | if (i + 1 < length && arr[i + 1] > arr[i]) {
67 | // 找到arr[i + 1] 和 arr[i] 中的最大值
68 | i++;
69 | }
70 | // 如果子节点比父节点大，交换两者的位置，将最大值移动到顶部
71 | if (arr[index] < arr[i]) {
72 | [arr[index], arr[i]] = [arr[i], arr[index]];
73 | index = i;
74 | } else {
75 | break;
76 | }
77 | }
78 | }
79 | console.log(heapSort([5, 10, 2, 15, 1, 12, 6], 4)); // [6, 5, 2, 1]
80 | ```
81 |
--------------------------------------------------------------------------------
/算法分类题库/排序算法.md:
--------------------------------------------------------------------------------
1 | ### 排序算法
2 |
3 | 各种排序算法的对比详情
4 |
5 | 
6 |
7 | **算法的稳定性**：序列相同元素排序后，先后次序不变即稳定
8 |
9 | 冒泡排序、归并排序稳定，快速排序、选择排序不稳定
10 |
11 | #### 冒泡排序
12 |
13 | 时间复杂度为`O(n²)`，稳定
14 |
15 | ```
16 | function bubbleSort(arr) {
17 | const length = arr.length;
18 | // 外层循环用控制 排序进行多少轮
19 | for (let i = 0; i < length; i++) {
20 | // 内层循环用于每一轮的数据比较
21 | // 注意j的长度范围 length - i - 1
22 | for (let j = 0; j < length - i - 1; j++) {
23 | // 相邻元素，大的放到后面
24 | if (arr[j] > arr[j + 1]) {
25 | // 交换位置
26 | [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
27 | }
28 | }
29 | }
30 | return arr;
31 | }
32 | console.log(bubbleSort([8, 7, 1, 4, 3])); // [1,3,4,7,8]
33 | ```
34 |
35 | #### 选择排序
36 |
37 | 时间复杂度为`O(n²)`，不稳定
38 |
39 | **思路**
40 |
41 | 从未排序序列中找到最小的元素，放到已排序序列的头部，重复上述步骤，直到所有元素排序完毕
42 |
43 | 1）外层循环控制进行多少轮
44 | 2）内层循环进行数据比较，找到每一轮的最小值
45 |
46 | 
47 |
48 | ```
49 | function selectSort(arr) {
50 | // 定义index存储最小值的下标
51 | let index;
52 | // 外层循环用控制 排序进行多少轮
53 | for (let i = 0; i < arr.length - 1; i++) {
54 | index = i;
55 | // 内层循环用于每一轮的数据比较
56 | // 注意j的起始范围是 i + 1
57 | for (let j = i + 1; j < arr.length; j++) {
58 | // 寻找最小值
59 | if (arr[j] < arr[index]) {
60 | // 保存最小值的下标
61 | index = j;
62 | }
63 | }
64 | // 如果 index 不是目前的头部元素，则交换两者
65 | if (index !== i) {
66 | [arr[i], arr[index]] = [arr[index], arr[i]];
67 | }
68 | }
69 | return arr;
70 | }
71 | console.log(selectSort([9, 1, 5, 3, 2, 8])); // [1, 2, 3, 5, 8, 9]
72 | ```
73 |
74 | #### 插入排序
75 |
76 | 时间复杂度为`O(n²)`，稳定
77 |
78 | **思路**
79 |
80 | 将左侧序列看成一个有序序列，每次将一个数字插入该有序序列。
81 |
82 | 插入时，从有序序列最右侧开始比较，若比较的数较大，后移一位。
83 |
84 | 
85 |
86 | ```
87 | function insertSort(array) {
88 | // 外层控制循环的次数
89 | for (let i = 1; i < array.length; i++) {
90 | let target = i;
91 | // 内层循环用于每一轮的数据比较
92 | for (let j = i - 1; j >= 0; j--) {
93 | if (array[target] < array[j]) {
94 | [array[target], array[j]] = [array[j], array[target]];
95 | target = j;
96 | } else {
97 | break;
98 | }
99 | }
100 | }
101 | return array;
102 | }
103 |
104 | console.log(insertSort([9, 1, 5, 3, 2, 8])); // [1, 2, 3, 5, 8, 9]
105 | ```
106 |
107 | #### 快速排序
108 |
109 | 时间复杂度为`O(nlogn)`，不稳定
110 |
111 | **思路**
112 |
113 | 1）以一个数为基准(中间的数)，比基准小的放到左边，比基准大的放到右边
114 |
115 | 2）再按此方法对这两部分数据分别进行快速排序（递归进行）
116 |
117 | 3）不能再分后退出递归，并重新将数组合并
118 |
119 | ```
120 | // 快速排序
121 | function quickSort(list) {
122 | // 当list.length <= 1时，退出递归
123 | if (list.length <= 1) return list;
124 | // 找到中间节点
125 | let mid = Math.floor(list.length / 2);
126 | // 以中间节点为基准点，比该节点大的值放到right数组中，否则放到left数组中
127 | let base = list.splice(mid, 1)[0];
128 | let left = [];
129 | let right = [];
130 | list.forEach(item => {
131 | if (item > base) {
132 | right.push(item);
133 | } else {
134 | left.push(item);
135 | }
136 | });
137 | // 重新组合数组
138 | return quickSort(left).concat(base, quickSort(right));
139 | }
140 | console.log(quickSort([9, 1, 5, 3, 2, 8]));
141 | ```
142 |
143 | #### 归并排序
144 |
145 | 时间复杂度为`O(nlogn)`，稳定
146 |
147 | **思路**
148 |
149 | 1）将给定的列表分为两半（如果列表中的元素数为奇数，则使其大致相等）
150 |
151 | 2）以相同的方式继续划分子数组，直到只剩下单个元素数组
152 |
153 | 3）从单个元素数组开始，合并子数组，以便对每个合并的子数组进行排序
154 |
155 | 4）重复第 3 步单元，直到最后得到一个排好序的数组。
156 |
157 | 
158 |
159 | ```
160 | function MergeSort(array) {
161 | let len = array.length;
162 | if (len <= 1) {
163 | return array;
164 | }
165 | // 将给定的列表分为两半
166 | let num = Math.floor(len / 2);
167 | let left = MergeSort(array.slice(0, num));
168 | let right = MergeSort(array.slice(num, array.length));
169 | return merge(left, right);
170 |
171 | function merge(left, right) {
172 | let [l, r] = [0, 0];
173 | let result = [];
174 | while (l < left.length && r < right.length) {
175 | if (left[l] < right[r]) {
176 | result.push(left[l]);
177 | l++;
178 | } else {
179 | result.push(right[r]);
180 | r++;
181 | }
182 | }
183 | result = result.concat(left.slice(l, left.length));
184 | result = result.concat(right.slice(r, right.length));
185 | return result;
186 | }
187 | }
188 | console.log(MergeSort([6, 5, 3, 1, 8, 7, 2, 4]));
189 | ```
190 |
--------------------------------------------------------------------------------
/算法分类题库/栈和队列.md:
--------------------------------------------------------------------------------
1 | ### 栈和队列
2 |
3 | 栈是一种特殊的线性表，仅能在线性表的一端操作，栈顶允许操作，栈底不允许操作
4 |
5 | 栈的特点是：**先进后出**，从栈顶放入元素的操作叫入栈，取出元素叫出栈
6 |
7 | 队列与栈一样，也是一种线性表，不同的是，队列可以在一端添加元素，在另一端取出元素，也就是：**先进先出**，从一端放入元素的操作称为入队，取出元素为出队
8 |
9 | **两者区别：**`栈（先进后出）、队列（先进先出）`
10 |
11 | #### 创建栈和队列
12 |
13 | **创建栈**
14 |
15 | ```
16 | // 创建栈 只能从栈尾添加和删除 实现先进后出的效果
17 | class Stack {
18 | constructor() {
19 | this.arr = [];
20 | }
21 | // 从栈尾添加
22 | insert(data) {
23 | this.arr.push(data);
24 | }
25 | // 从栈尾删除
26 | del() {
27 | return this.arr.pop();
28 | }
29 | toString() {
30 | return this.arr.toString();
31 | }
32 | }
33 |
34 | let stack = new Stack();
35 | stack.insert(1);
36 | stack.insert(2);
37 | stack.insert(3);
38 | stack.del();
39 | console.log(stack.toString()); // 1,2
40 | ```
41 |
42 | **创建队列**
43 |
44 | ```
45 | // 创建队列 只能从栈尾添加和头部删除 实现先进先出的效果
46 | class Queue {
47 | constructor() {
48 | this.arr = [];
49 | }
50 | insert(data) {
51 | this.arr.push(data);
52 | }
53 | del() {
54 | return this.arr.shift();
55 | }
56 | toString() {
57 | return this.arr.toString();
58 | }
59 | }
60 |
61 | let queue = new Queue();
62 | queue.insert(1);
63 | queue.insert(2);
64 | queue.insert(3);
65 | queue.del();
66 | console.log(queue.toString()); // 2,3
67 |
68 | ```
69 |
70 | #### 栈的入栈和出栈序列
71 |
72 | 输入两个整数序列，第一个序列`arr1`表示栈的入栈顺序，请判断第二个序列`arr2`，是否可能为该栈的出栈序列
73 |
74 | **思路**
75 |
76 | 1）创建一个栈，模拟入栈、出栈的过程
77 |
78 | 2）`id`用来记录`arr1`已出栈的位置
79 |
80 | 3）当`stack`栈顶元素和 `arr2` 栈顶元素相同时，stack 出栈；索引`id+1`
81 |
82 | 4）最终 stack 栈为空，表示 arr1 全部元素已出栈
83 |
84 | ```
85 | // 判断两个整数序列，第一个序列为入栈顺序，第二个序列是否为出栈顺序
86 | function isSameStack(arr, arr1) {
87 | // 创建一个栈，模拟入栈、出栈的过程
88 | let stack = [];
89 | // id用来记录arr1已出栈的位置
90 | let id = 0;
91 | for (let i = 0; i < arr.length; i++) {
92 | // 入栈
93 | stack.push(arr[i]);
94 | // 当stack栈顶元素和 arr1 栈顶元素相同时，stack出栈；索引id+1，
95 | while (stack.length && stack[stack.length - 1] === arr1[id]) {
96 | // 出栈
97 | stack.pop();
98 | // 下次要对比arr1[id+1]与stack栈顶元素是否相等
99 | id++;
100 | }
101 | }
102 | // 最终stack栈为空，表示arr全部元素已出栈
103 | return stack.length == 0;
104 | }
105 |
106 | console.log(isSameStack([1, 2, 3, 4, 5], [2, 4, 5, 3, 1])); // true
107 | ```
108 |
109 | #### 滑动窗口最大值
110 |
111 | 给定一个数组 `nums`，有一个大小为 `k` 的滑动窗口，从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口中的 k 个数字。滑动窗口每次只向右移动一位，求返回滑动窗口最大值
112 |
113 | 如`nums = [1,3,-1,-3,5,3,6,7]`， `k = 3`，输出结果为`[3, 3, 5, 5, 6, 7]`
114 |
115 | 
116 |
117 | **思路**
118 |
119 | 利用双端队列（队列两侧都可以剔除元素），窗口移动的过程中，始终保证 window 中最左侧的元素为当前窗口的最大值
120 |
121 | ```
122 | function maxSlidingWindow(nums, k) {
123 | // window存储当前窗口中数据的下标
124 | const window = [];
125 | // result存储窗口中的最大值
126 | const result = [];
127 | for (let i = 0; i < nums.length; i++) {
128 | if (i - window[0] > k - 1) {
129 | // 窗口不断往右移动，当最大值在窗口最左侧，但窗口的长度超出k时的情况，就要把左侧的最大值剔除，比如窗口为【3,-1,-3】，继续往右时，就要把左侧的3剔除
130 | window.shift(); // 剔除窗口长度超出范围时左侧的最大值
131 | }
132 | for (let j = window.length - 1; j >= 0; j--) {
133 | // 当前窗口的值依次和要插入的值做比较，如果小于要插入的值，剔除掉该值，直到window为空为止（保证window中最左侧的值为最大值）
134 | if (nums[window[j]] <= nums[i]) {
135 | window.pop();
136 | }
137 | }
138 | // 添加右侧新加入的值，插入新值时有两种情况：
139 | // 1、新值为最大值时，则window此时为空；
140 | // 2、新值不为最大值时，window已剔除掉比新值小的值。
141 | // 始终保证window中最左侧的值为最大值
142 | window.push(i);
143 | if (i >= k - 1) {
144 | // 窗口是从0开始移动，当移动的距离，大于等于目标范围后，以后再往后移动一次，就要写入当前窗口的最大值
145 | result.push(nums[window[0]]);
146 | }
147 | }
148 | return result;
149 | }
150 | console.log(maxSlidingWindow([1, 3, -1, -3, 5, 3, 6, 7], 3)); // [3, 3, 5, 5, 6, 7]
151 | ```
152 |
--------------------------------------------------------------------------------
/算法分类题库/树.md:
--------------------------------------------------------------------------------
1 | ### 树
2 |
3 | JS 中树结构一般类似这样
4 |
5 | ```
6 | let tree = [
7 | {
8 | id: "1",
9 | title: "节点1",
10 | children: [
11 | {
12 | id: "1-1",
13 | title: "节点1-1"
14 | },
15 | {
16 | id: "1-2",
17 | title: "节点1-2"
18 | }
19 | ]
20 | },
21 | {
22 | id: "2",
23 | title: "节点2",
24 | children: [
25 | {
26 | id: "2-1",
27 | title: "节点2-1"
28 | }
29 | ]
30 | }
31 | ];
32 | ```
33 |
34 | #### 列表转树
35 |
36 | **使用对象存储数据, 典型的空间换时间**
37 |
38 | 时间复杂度为`O(n)`、空间复杂度为`O(n)`
39 |
40 | ```
41 | function listToTree(data) {
42 | // 使用对象重新存储数据, 空间换时间
43 | let map = {};
44 | // 存储最后结果
45 | let treeData = [];
46 | // 遍历原始数据data，存到map中，id为key，值为数据
47 | for (let i = 0; i < data.length; i++) {
48 | map[data[i].id] = data[i];
49 | }
50 |
51 | // 遍历对象
52 | for (let i in map) {
53 | // 根据 parentId 找到的是父节点
54 | if (map[i].parentId) {
55 | if (!map[map[i].parentId].children) {
56 | map[map[i].parentId].children = [];
57 | }
58 | // 将子节点 放到 父节点的 children中
59 | map[map[i].parentId].children.push(map[i]);
60 | } else {
61 | // parentId 找不到对应值，说明是根结点，直接插到根数组中
62 | treeData.push(map[i]);
63 | }
64 | }
65 |
66 | return treeData;
67 | }
68 |
69 | // 测试
70 | let list = [
71 | { id: 1, title: "child1", parentId: 0 },
72 | { id: 2, title: "child2", parentId: 0 },
73 | { id: 6, title: "child2_1", parentId: 2 },
74 | { id: 4, title: "child1_1", parentId: 1 },
75 | { id: 5, title: "child1_2", parentId: 1 },
76 | { id: 3, title: "child3", parentId: 0 },
77 | { id: 7, title: "child3_1", parentId: 3 }
78 | ];
79 | console.log(listToTree(list));
80 | ```
81 |
82 | #### 深度优先遍历
83 |
84 | 递归实现，写法简单，时间复杂度为`O(n²)`
85 |
86 | ```
87 | function deepTree(tree, arr = []) {
88 | tree.forEach(data => {
89 | arr.push(data.id);
90 | // 遍历子树
91 | data.children && deepTree(data.children, arr);
92 | });
93 | return arr;
94 | }
95 |
96 | let tree = [
97 | {
98 | id: "1",
99 | title: "节点1",
100 | children: [
101 | {
102 | id: "1-1",
103 | title: "节点1-1"
104 | },
105 | {
106 | id: "1-2",
107 | title: "节点1-2"
108 | }
109 | ]
110 | },
111 | {
112 | id: "2",
113 | title: "节点2",
114 | children: [
115 | {
116 | id: "2-1",
117 | title: "节点2-1"
118 | }
119 | ]
120 | }
121 | ];
122 | console.log(deepTree(tree)); // ['1', '1-1', '1-2', '2', '2-1']
123 | ```
124 |
125 | #### 广度优先遍历
126 |
127 | **思路**
128 |
129 | 1）维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤，直到队列为空
130 |
131 | 2）取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后
132 |
133 | 时间复杂度为`O(n)`、空间复杂度为`O(n)`
134 |
135 | ```
136 | // 广度优先
137 | function rangeTree(tree, arr = []) {
138 | let node,
139 | list = [...tree];
140 | while ((node = list.shift())) {
141 | arr.push(node);
142 | node.children && list.push(...node.children);
143 | }
144 | return arr;
145 | }
146 |
147 | let tree = [
148 | {
149 | id: "1",
150 | title: "节点1",
151 | children: [
152 | {
153 | id: "1-1",
154 | title: "节点1-1"
155 | },
156 | {
157 | id: "1-2",
158 | title: "节点1-2"
159 | }
160 | ]
161 | },
162 | {
163 | id: "2",
164 | title: "节点2",
165 | children: [
166 | {
167 | id: "2-1",
168 | title: "节点2-1"
169 | }
170 | ]
171 | }
172 | ];
173 | console.log(rangeTree(tree)); // ['1', '2', '1-1', '1-2', '2-1']
174 | ```
175 |
176 | #### 查找节点
177 |
178 | 递归实现，写法简单
179 |
180 | ```
181 | function findTreeNode(tree, func) {
182 | for (const data of tree) {
183 | // 条件成立 直接返回
184 | if (func(data)) return data;
185 | if (data.children) {
186 | const res = findTreeNode(data.children, func);
187 | // 结果存在再返回
188 | if (res) return res;
189 | }
190 | }
191 | return null;
192 | }
193 |
194 | let tree = [
195 | {
196 | id: "1",
197 | title: "节点1",
198 | children: [
199 | {
200 | id: "1-1",
201 | title: "节点1-1"
202 | },
203 | {
204 | id: "1-2",
205 | title: "节点1-2"
206 | }
207 | ]
208 | },
209 | {
210 | id: "2",
211 | title: "节点2",
212 | children: [
213 | {
214 | id: "2-1",
215 | title: "节点2-1"
216 | }
217 | ]
218 | }
219 | ];
220 | console.log(
221 | findTreeNode(tree, data => {
222 | return data.title === "节点1-1";
223 | })
224 | );
225 |
226 | // 打印结果： {id: '1-1', title: '节点1-1'}
227 | ```
228 |
--------------------------------------------------------------------------------
5 |