左边左边左边左边
44 | 右右边右边右边边
45 |
46 | 中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
47 |
48 | 比较 响应式 媒体查询情况下，base64 与 src 的区别
14 | 15 | 16 |17 |
18 | 19 | 20 |
子级的focus 让父级产生变化
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/normal/divide-maxSubArray.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 分治算法（Divide and Conquer Algorithm）是一种常用的算法策略，
3 | * 它将一个复杂的问题分解成多个规模较小、相互独立且形式相同的子问题，
4 | * 然后分别解决这些子问题，最后将子问题的解合并起来得到原问题的解。
5 | *
6 | * 给定一个整数数组 nums，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
7 | */
8 |
9 | function maxSubArray(nums) {
10 | if (nums.length === 1) {
11 | return nums[0];
12 | }
13 |
14 | let maxEndingHere = nums[0];
15 | let maxSoFar = nums[0];
16 |
17 | for (let i = 1; i < nums.length; i++) {
18 | maxEndingHere = Math.max(nums[i], maxEndingHere + nums[i]);
19 | maxSoFar = Math.max(maxSoFar, maxEndingHere);
20 | }
21 |
22 | return maxSoFar;
23 | }
24 |
25 | // 测试
26 | const nums = [-2, 1, -3, 4, -1, 2, 3, -5, 4];
27 | console.log(maxSubArray(nums)); // 输出 6
28 |
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/normal/greedy-cookie-index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 贪心算法是一种在每一步选择中都采取当前状态下的最优决策，从而希望最终得到全局最优解的算法策略。
3 | * 虽然贪心算法并不总是能得到全局最优解，但在许多问题上它可以提供高效且近似最优的解决方案。
4 | *
5 | * 有一群孩子和一堆饼干，每个孩子有一个饥饿度，每个饼干都有一个大小。每个孩子只能吃一个饼干，
6 | * 且只有当饼干的大小大于等于孩子的饥饿度时，孩子才能吃饱。求最多能有多少个孩子吃饱。
7 | */
8 |
9 | function findContentChildren(g, s) {
10 | g.sort((a, b) => a - b);
11 | s.sort((a, b) => a - b);
12 | let childIndex = 0;
13 | let cookieIndex = 0;
14 | while (childIndex < g.length && cookieIndex < s.length) {
15 | if (s[cookieIndex] >= g[childIndex]) {
16 | childIndex++;
17 | }
18 | cookieIndex++;
19 | }
20 | return childIndex;
21 | }
22 |
23 | // 测试
24 | const g = [1, 2, 3];
25 | const s = [1, 1];
26 | console.log(findContentChildren(g, s)); // 输出 1
27 |
--------------------------------------------------------------------------------
/docs/javascript/inherit/inherit-parasitic-structure.md:
--------------------------------------------------------------------------------
1 | # 寄生构造继承
2 |
3 | 创建对象-寄生构造函数模式
4 |
5 | > 比工厂模式多了一个 new，使用工厂模式 new 出来
6 |
7 | ## 寄生构造
8 |
9 | 特点：
10 |
11 | 1. 返回的对象与构造函数或者与构造函数的原型属性之间没有关系 `[1]`
12 | 2. 构造函数 return 的对象与构造函数外部创建的对象没有什么不同 `[2]`
13 | 3. 不能使用 instanceof 操作符确定对象类型
14 | 4. 在红宝石上书，不推荐此模式
15 |
16 | ```js
17 | function factory(name, age, job) {
18 | // const obj=Object.create({})//带有普通对象的__proto__ 类似 const obj = new Object()
19 | // const obj=Object.create(null)//则没有_proto__！
20 | const obj = {}; //此处不一定是Object对象，可以是Array对象，具体看业务操作
21 | obj.age = age;
22 | obj.name = name;
23 | obj.job = job;
24 | obj.sayName = function () {
25 | return this.name;
26 | };
27 | return obj;
28 | }
29 | //use
30 | const p = new factory('张三', '28', '前端狗');
31 | ```
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "test": "jest",
4 | "dev": "vitepress dev docs --port 5174",
5 | "build": "vitepress build docs",
6 | "preview": "vitepress preview docs",
7 | "lint": "zhlint --fix docs/**/*.md"
8 | },
9 | "dependencies": {
10 | "vitepress": "1.6.3",
11 | "vitepress-mermaid-renderer": "^1.0.14",
12 | "vitepress-script-preview": "^0.0.10",
13 | "vue": "^3.5.17"
14 | },
15 | "devDependencies": {
16 | "@types/node": "^24.0.7",
17 | "jest": "^30.0.3",
18 | "typescript": "^5.8.3",
19 | "zhlint": "^0.8.2"
20 | },
21 | "pnpm": {
22 | "ignoredBuiltDependencies": [
23 | "@parcel/watcher",
24 | "core-js",
25 | "esbuild",
26 | "highlight.js",
27 | "vuepress"
28 | ]
29 | }
30 | }
--------------------------------------------------------------------------------
/docs/javascript/switch.md:
--------------------------------------------------------------------------------
1 | # switch 语句
2 |
3 | - switch
4 | - case 必须紧接着跟值/变量/简单表达式/&&/function，不确定能使用||
5 |
6 | ```js
7 | // 以下产生一个 bug，不管怎么样使用关键字 name 声明一个值，只能是 string 类型！！！
8 | var name = '22';
9 | var tt = '22';
10 | var name1 = 22;
11 | var tt1 = 22;
12 | // demo1
13 | switch (name) {
14 | // 终止错误，合并两个条件
15 | case '22':
16 | case 'AbortError':
17 | default:
18 | console.info('NotFoundError:找不到满足错误的类型');
19 | }
20 | //demo2
21 | switch (name) {
22 | // 终止错误，合并两个条件
23 | case tt:
24 | case 'AbortError':
25 | default:
26 | console.info('NotFoundError:找不到满足错误的类型');
27 | }
28 | //demo3
29 | switch (name1) {
30 | // 终止错误，合并两个条件,数值为 number 类型时候，无法进入此条件
31 | case tt1:
32 | case 'AbortError':
33 | default:
34 | console.info('NotFoundError:找不到满足错误的类型');
35 | }
36 | ```
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/sort/shell-sort.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 希尔排序
3 | *
4 | * 1. 先将整个待排序的记录序列分割成为若干子序列
5 | * 2. 分别直接插入序列
6 | * 希尔排序（Shell Sort）是插入排序的一种改进版本，也称为 “缩小增量排序”。
7 | * 它通过将原始数据集合分割成若干个较小的子序列，
8 | * 对每个子序列进行插入排序，从而使数据逐步变得有序。
9 | */
10 | function shellSort(arr) {
11 | let n = arr.length;
12 | let gap = Math.floor(n / 2); // 初始增量
13 |
14 | while (gap > 0) {
15 | for (let i = gap; i < n; i++) {
16 | let temp = arr[i];
17 | let j = i;
18 | while (j >= gap && arr[j - gap] > temp) {
19 | arr[j] = arr[j - gap];
20 | j -= gap;
21 | }
22 | arr[j] = temp;
23 | }
24 | gap = Math.floor(gap / 2); // 缩小增量
25 | }
26 | return arr;
27 | }
28 |
29 | // 测试
30 | let array = [64, 34, 25, 12, 22, 11, 90];
31 | console.log(shellSort(array));
32 |
--------------------------------------------------------------------------------
/docs/javascript/context/bind.md:
--------------------------------------------------------------------------------
1 | # Bind 函数
2 |
3 | ## 说明
4 |
5 | ::: tip
6 | bind 新函数，不会立即执行。
7 | :::
8 |
9 | ## 特性
10 |
11 | - 创建一个新的函数。
12 | - 新函数的 `this` 是 `bind` 的第一个参数
13 | - 其余参数作为新函数的参数使用
14 |
15 | ```js
16 | const bind = function () {
17 | return function () {
18 | // do something
19 | };
20 | };
21 | ```
22 |
23 | - 因为 bind 每次都生成一个函数。所以需要注意以下：
24 |
25 | ```js
26 | const githubObject = {
27 | setRepo() {
28 | console.info('hello');
29 | },
30 | };
31 | // bad case
32 | const ele = document.querySelector('xx');
33 | ele.addEventListener('click', githubObject.setRepo.bind(githubObject));
34 |
35 | // good case
36 | const listener = githubObject.setRepo.bind(githubObject);
37 | ele.addEventListener('click', listener);
38 |
39 | // 否则无法 remove 事件监听
40 | ele.removeEventListener('click', listener);
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/sort/fast-sort.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 快速排序
3 | * 对冒泡算法的改进
4 | * 第一趟：
5 | * - 一部分： 比另外部分都要小，递归调用
6 | * - 另外一部分：递归调用
7 | * 在两边都实行快速排序
8 | *
9 | */
10 |
11 | function fastSort(el) {
12 | if (el.length <= 1) return el;
13 | // 向下取整获得中间数
14 | const halfIndex = Math.floor(el.length / 2);
15 | const pivot = el.splice(halfIndex, 1)[0];
16 | const left = [];
17 | const right = [];
18 | for (let i = 0; i < el.length; i++) {
19 | if (el[i] < pivot) {
20 | left.push(el[i]);
21 | } else {
22 | right.push(el[i]);
23 | }
24 | }
25 | console.log("===>", { halfIndex, pivot, left, right });
26 | return fastSort(left).concat([pivot], fastSort(right));
27 | }
28 |
29 | const arr = [12, 12, 15, 445, 451, 12, 123456, 61, 20, 136, 4856, 1, 0];
30 |
31 | console.log(fastSort(arr));
32 |
--------------------------------------------------------------------------------
/docs/backend/rust/actix-web/install.md:
--------------------------------------------------------------------------------
1 | # 安装
2 |
3 | 安装 Rust
4 |
5 | 因为 `actix-web` 是一个 Rust 框架，所以你需要 Rust 来开始使用它。如果你还没有，我们建议你使用 `rustup` 来管理你的 Rust 安装。
6 |
7 | 官方的 Rust 指南有一个很好的开始部分。我们目前至少需要 Rust1.39，所以请确保你运行 `rustup update` 以获得最新和最新的 Rust 版本。
8 | 特别是本指南将假设你实际运行 Rust 1.39 或更高版本。
9 |
10 | 安装 actix-web
11 |
12 | 多亏了 Rust 的 `cargo` 管理器，你不需要显式地安装 `actix-web`。相信它，就解放你自己了。对于不太可能使用 `actix-web` 开发版本的情况，可以直接依赖 git 存储库。
13 |
14 | 发行版本：
15 |
16 | ```toml
17 | [dependencies]
18 | actix-web = "2.0"
19 | ```
20 |
21 | 开发版本：
22 |
23 | ```toml
24 | [dependencies]
25 | actix-web = { git = "https://github.com/actix/actix-web" }
26 | ```
27 |
28 | ## 潜入
29 |
30 | 这里有两条路可以走，你可以按照指南进行操作，或者如果你非常不耐烦，你可能希望查看我们广泛的示例存储库并运行包含的示例。例如，下面是如何运行的基本示例：
31 |
32 | ```cmd
33 | git clone https://github.com/actix/examples
34 | cd examples/basics
35 | cargo run
36 | ```
37 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: home
3 |
4 | sidebar: false
5 | actionText: 立即阅读 →
6 | actionLink: /guide.html
7 | icpText: veaba/web-advanced-frond-end
8 | icpLink: https://github.com/veaba/web-advanced-frond-end
9 |
10 | hero:
11 | name: web advanced
12 | text: 前端工程师进阶指南
13 | text-size: 1.5
14 | tagline: 从入门到失业，仅需颈椎发作
15 | actions:
16 | - theme: brand
17 | text: 开始阅读
18 | link: /javascript/
19 | - theme: alt
20 | text: 指南目录
21 | link: /guide
22 | - theme: alt
23 | text: GitHub
24 | link: https://github.com/veaba/web-advanced
25 |
26 | features:
27 | - icon: 📝
28 | title: 开源(Open Source)
29 | details: Github开源文档
30 | - icon: 📥
31 | title: 可视化 + 低门槛
32 | details: 最终的目的，期望将概念性的东西可视化，方便记忆。
33 | - icon: 🚀
34 | title: TODO 基于实际的例子
35 | details: 以实践为标准
36 | ---
37 |
--------------------------------------------------------------------------------
/docs/javascript/context/index.md:
--------------------------------------------------------------------------------
1 | # 上下文
2 |
3 | ## 概念
4 |
5 | - `apply`、`call`、`bind` 三个方法改变上下文。
6 | - 在 `ES6` 中的箭头函数里，`apply`、`call`、`bind` 不起作用
7 |
8 | ## apply 方法
9 |
10 | `apply` 方法。调用一个函数，具有指定 this 的值，以及作为一个数组提供的参数。[MDN 查看更多](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
11 |
12 | ## bind 方法
13 |
14 | `bind` 方法。创建一个新的函数。被调用时，其 this 关键字设置为提供的值，在调用时新函数时，在任何提供之前一个给定的参数序列。[MDN 查看更多](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
15 |
16 | ## call 方法
17 |
18 | `call` 方法。调用一个函数，具有一个指定 this 值和分别地提供参数 [MDN 查看更多](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
19 |
20 | 语法 `function.call(thisObj,args...)`，如果 thisObj 是 null，则是全局对象，args 作为参数传递给 `function`
21 |
22 | bbbbb child
23 |
30 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/docs/public/demos/js/promise-function.js:
--------------------------------------------------------------------------------
1 | /***********************
2 | * @name JS
3 | * @author veaba
4 | * @date 2018/4/2
5 | ***********************/
6 |
7 | //P(fn) fn typeof 为function 手写简单的 promise
8 |
9 | // 1 3 4 2 5
10 | function P(fn) {
11 | console.info("P promise");
12 | var value = null;
13 | var events = [];
14 | this.then = function(f) {
15 | events.push(f);
16 | return this;
17 | };
18 | function resolve(newValue) {
19 | var f = events.shift();
20 | f(newValue, resolve);
21 | }
22 | fn(resolve);
23 | }
24 |
25 | function a() {
26 | debugger;
27 | console.info("function a");
28 | return new P(function(resolve) {
29 | console.log("ge1");
30 | setTimeout(function() {
31 | console.log("get2");
32 | resolve(1);
33 | }, 6000);
34 | });
35 | }
36 | a()
37 | .then(function(value, resolve) {
38 | console.log("get3");
39 | setTimeout(function() {
40 | console.log("get 4");
41 | resolve(2);
42 | }, 3000);
43 | })
44 | .then(function(value, resolve) {
45 | console.log("get 5：" + value);
46 | });
47 |
--------------------------------------------------------------------------------
/docs/public/demos/html/margin-left_center_right-layout-3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
31 | Left
32 |
33 |
34 | Center Flex
35 | 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
36 |
37 |
38 | Right
39 |
40 |
43 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/docs/public/demos/html/margin-left_center_right-layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
41 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/sort/select-sort.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 选择排序
3 | *
4 | * 1. 在未排序的序列中找到最小（大）的元素，
5 | * 2. 存放到排序序列的起始位置
6 | * 3. 再从剩余的未排序元素中继续寻找最小（大）
7 | * 4. 排到已排序序列的末尾
8 | *
9 | */
10 |
11 | function selectionSort(data) {
12 | console.time("selectionSort");
13 | const len = data.length;
14 | let minIndex = null;
15 | let temp = null;
16 | for (let i = 0; i < len; i++) {
17 | minIndex = i;
18 | for (let j = i + 1; j < len; j++) {
19 | // 前者比后者
20 | if (arr[j] < arr[minIndex]) {
21 | // 寻找最小值
22 | minIndex = j; // 将最小的索引保存
23 | }
24 | }
25 | // 前后两个交换位置
26 | console.log(
27 | "交换位置的索引是:(",
28 | i,
29 | minIndex + ")======>",
30 | `所对应的值做交换：（${arr[i]},${arr[minIndex]}）`
31 | );
32 | temp = arr[i];
33 | arr[i] = arr[minIndex];
34 | // console.log("arr[minIndex]===>", minIndex, arr[minIndex]);
35 | arr[minIndex] = temp;
36 | console.info("此时arr==>", arr);
37 | }
38 | console.timeEnd("selectionSort");
39 | return arr;
40 | }
41 |
42 | var arr = [9, 8, 6, 4, 5, 3, 2];
43 |
44 | console.log("===>", selectionSort(arr));
45 |
--------------------------------------------------------------------------------
/docs/public/demos/js/publish-subscribe.js:
--------------------------------------------------------------------------------
1 | // 所有一切都在对象中完成
2 | const eventEmitter = {};
3 |
4 | // 缓存列表，调度中心
5 | eventEmitter.list = {};
6 |
7 | // on 方法添加fn 缓存 ==> 订阅者注册事件到调度中心
8 | // 订阅处理
9 | eventEmitter.on = function(eventName, fn) {
10 | eventEmitter.list[eventName]
11 | ? eventEmitter.list[eventName].push(fn)
12 | : (eventEmitter.list[eventName] = [fn]);
13 |
14 | console.log("订阅事件==>list", eventEmitter.list);
15 | };
16 |
17 | // 发布者发布事件到调度中心，调度中心执行代码
18 | eventEmitter.emit = function(...args) {
19 | console.log("arg=>", args);
20 | const list = eventEmitter.list;
21 | const eventName = args[0];
22 | const publishContent = args[args.length - 1];
23 |
24 | if (list[eventName]) {
25 | const fns = list[eventName];
26 | for (let i = 0; i < fns.length; i++) {
27 | fns[i].call(this, publishContent);
28 | }
29 | }
30 | };
31 |
32 | // off 取消订阅
33 | eventEmitter.off = function() {
34 | eventEmitter.list = [];
35 | };
36 |
37 | function user1(content) {
38 | console.log("user1 subscribe=>", content);
39 | }
40 |
41 | // 订阅
42 |
43 | eventEmitter.on("art", user1);
44 |
45 | eventEmitter.emit("art", "ddd");
46 |
--------------------------------------------------------------------------------
/docs/public/demos/proxy.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @desc Proxy 代理 实验
3 | * @todo Proxy第一个参数是干啥的？
4 | * @param
5 | *
6 | */
7 |
8 | // const targetObj = {};
9 | // const handler = {
10 | // get: function(target, propKey, receiver) {
11 | // console.log('getting===>',propKey);
12 | // return Reflect.get(target, propKey, receiver);
13 | // },
14 | // set: function(target, propKey, value, receiver) {
15 | // console.log('setting===>',propKey);
16 | // return Reflect.set(target, propKey, value, receiver);
17 | // /*
18 | // set(target,prop,value){
19 | // target[prop] = value
20 |
21 | // }
22 | // */
23 | // },
24 | // };
25 |
26 | // const obj = new Proxy(targetObj, handler);
27 | // obj.aa=22
28 | // console.log(obj);
29 |
30 |
31 | /** Handler array */
32 | const arrayData = [
33 | {name:"Lee"},
34 | {name:"Lisa"},
35 | {name:"rookie"},
36 | ]
37 |
38 | const proxy = new Proxy(arrayData,{
39 | get(target,prop){
40 | return target[prop]
41 | },
42 | set(target,prop,value){
43 | target[prop]=value
44 | }
45 | })
46 |
47 | console.log(arrayData[1])
48 | console.log(proxy[2])
--------------------------------------------------------------------------------
/docs/public/demos/html/margin-left_center_right-layout-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 中间
42 | 左边
43 | 右边
44 |
41 |
45 |
46 |
--------------------------------------------------------------------------------
/docs/frontend/es6/arrow.md:
--------------------------------------------------------------------------------
1 | ## 箭头函数
2 |
3 | > 中间
42 | 左边
43 | 右边
44 |
34 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/docs/public/demos/js/simulate/myCreate.js:
--------------------------------------------------------------------------------
1 | function myObjectCreate(proto, propertiesObject) {
2 | if (typeof proto!== 'object' && typeof proto!== 'function') {
3 | throw new TypeError('The first argument must be an object or null');
4 | }
5 |
6 | // 创建一个临时构造函数
7 | function F() {}
8 |
9 | // 将临时构造函数的原型指向 proto
10 | F.prototype = proto;
11 |
12 | // 使用临时构造函数创建新对象
13 | let obj = new F();
14 |
15 | // 如果提供了 propertiesObject，则为新对象定义属性
16 | if (propertiesObject!== undefined) {
17 | Object.defineProperties(obj, propertiesObject);
18 | }
19 |
20 | // 如果 proto 为 null，则手动设置 obj 的 __proto__ 为 null
21 | if (proto === null) {
22 | Object.setPrototypeOf(obj, null);
23 | }
24 |
25 | return obj;
26 | }
27 |
28 | // 测试
29 | let parent = {
30 | name: 'parent',
31 | sayHello: function () {
32 | console.log('Hello from parent');
33 | }
34 | };
35 |
36 | let child = myObjectCreate(parent, {
37 | age: {
38 | value: 10,
39 | writable: true,
40 | enumerable: true,
41 | configurable: true
42 | }
43 | });
44 |
45 | console.log(child.name); // 输出 'parent'
46 | child.sayHello(); // 输出 'Hello from parent'
47 | console.log(child.age); // 输出 10
--------------------------------------------------------------------------------
/docs/public/demos/html/vue-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
35 | Left
36 |
37 |
38 | Center
39 | Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
40 |
41 |
42 | Right
43 |
44 |
12 | {{message}}
13 |
14 |
15 | {{title}}
16 |
17 |
18 |
19 |
26 |
27 |
28 |
29 |
30 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/docs/javascript/scoped/index.md:
--------------------------------------------------------------------------------
1 | # 作用域
2 |
3 | ## 几个作用域
4 |
5 | - `函数作用域`
6 | - `全局作用域`
7 | - `暂时性死域`，es6 引入，与 `let`、`const` 关联，创建了块级作用域
8 |
9 | ## 作用域定义
10 |
11 | - 什么叫作用域？
12 | - 怎么改变作用域？
13 |
14 | - `js 没有作用域块`，导致 var 声明时是全局作用域。但如果是 let 声明，情况就不一样。let 让变量有了作用域。
15 | - 可以使用过匿名函数来解决，模仿块级作用域
16 |
17 | > 以下代码让很感到困惑
18 |
19 | ```js
20 | if (1) {
21 | var ha = 'hello,world!';
22 | }
23 | console.log(ha); //得到多少?
24 | ```
25 |
26 | > 但如果是 let 开头的话，就不一样了
27 |
28 | ```js
29 | if (1) {
30 | let ha = 'hello world';
31 | }
32 | console.log(ha);
33 | ```
34 |
35 | > 这也就是能解释了，为什么当使用 var 声明 for 循环出来后，总是最后一个值的原因 (let 则相反)
36 |
37 | ```js
38 | for (var i = 0; i < 5; i++) {}
39 | console.log(i);
40 | ```
41 |
42 | ::: tip
43 |
44 | 所以优秀的代码，其实可以这样去避免，更优秀的就是别用 `var`
45 |
46 | :::
47 |
48 | ```js
49 | for (var i = 0; i < 5; i++) {}
50 | console.log(i);
51 | i = null;
52 | ```
53 |
54 | ::: tip
55 | 函数内部，相当于一个作用域
56 | :::
57 |
58 | ```js
59 | /*demo1*/
60 | const test = function () {
61 | var t = 'hello';
62 | return t + ',world!';
63 | };
64 | test();
65 | console.log(t); //
66 |
67 | /*demo2*/
68 | const test2 = function () {
69 | t2 = 'hello';
70 | return t2 + ',world!';
71 | };
72 | test2();
73 | console.log(t2); //可以访问到
74 | ```
75 |
--------------------------------------------------------------------------------
/docs/public/demos/js/algorithm/sort/heap-sort.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * 堆排序
4 | * @TODO 以下代码会引发无限递归
5 | * 1. 利用堆这种数据结构所设计的一种排序算法
6 | * 2. 堆积是近似完全二叉树的结构
7 | * 3. 满足堆积的性质
8 | * 4. 子节点的键值或索引总是 小于（或大于）它的父节点
9 | *
10 | */
11 |
12 | function heapSort(data){
13 | console.time('heapSort')
14 | var heapSize = data.length,temp;
15 |
16 | for(let i = Math.floor(heapSize)/2-1;i>=0;i++){
17 | heapify(data,i,heapSize)
18 | }
19 |
20 | // 堆排序
21 | for (let j=heapSize-1;j<=i;j--){
22 | temp=data[0]
23 | data[0]=data[j]
24 | data[j]=temp
25 | heapity(data,0,--heapSize)
26 | }
27 | console.timeEnd('heapSort')
28 | return data
29 | }
30 |
31 | function heapify(data,x,len){
32 | var l = 2*x+1
33 | var r = 2*x+2
34 | largest = x
35 | temp=null
36 | if(l-
20 |
- {{item.text}} 21 |
{{who}}----
25 |
27 |
28 |
29 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/public/demos/js/simulate/myClass.js:
--------------------------------------------------------------------------------
1 | // 定义一个函数来模拟类
2 | function createClass(constructor, methods, staticMethods) {
3 | // 为构造函数添加原型方法
4 | if (methods) {
5 | Object.keys(methods).forEach((methodName) => {
6 | constructor.prototype[methodName] = methods[methodName];
7 | });
8 | }
9 |
10 | // 为构造函数添加静态方法
11 | if (staticMethods) {
12 | Object.keys(staticMethods).forEach((methodName) => {
13 | constructor[methodName] = staticMethods[methodName];
14 | });
15 | }
16 |
17 | return constructor;
18 | }
19 |
20 | // 模拟一个类
21 | function Person(name, age) {
22 | this.name = name;
23 | this.age = age;
24 | }
25 |
26 | // 类的实例方法
27 | const personMethods = {
28 | sayHello() {
29 | console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
30 | }
31 | };
32 |
33 | // 类的静态方法
34 | const personStaticMethods = {
35 | fromJSON(json) {
36 | return new Person(json.name, json.age);
37 | }
38 | };
39 |
40 | // 创建模拟的类
41 | const MyPerson = createClass(Person, personMethods, personStaticMethods);
42 |
43 | // 创建实例
44 | let person = new MyPerson('Alice', 30);
45 | person.sayHello(); // 输出: Hello, my name is Alice and I'm 30 years old.
46 |
47 | // 调用静态方法
48 | let newPerson = MyPerson.fromJSON({ name: 'Bob', age: 25 });
49 | newPerson.sayHello(); // 输出: Hello, my name is Bob and I'm 25 years old.
--------------------------------------------------------------------------------
/docs/public/demos/html/margin-left_center_right-layout-4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
49 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/docs/public/demos/html/input.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
50 |
53 |
54 | 左侧边栏
51 |固定宽度200px
52 |
55 |
59 |
60 | 主要内容
56 |中间栏宽度自适应，会填满剩余空间。
57 |这是页面的主要内容区域，包含最重要的信息。
58 |
61 |
64 | 右侧边栏
62 |固定宽度200px
63 |-
39 |
- 1 40 |
- 2 41 |
- 3 42 |
- 4 43 |
- 5 44 |
- 6 45 |
- 7 46 |
- 8 47 |
- 9 48 |
- 10 49 |
Hello world
'); 90 | }); 91 | 92 | server.listen(8443); 93 | ``` 94 | 95 | ## 普通函数和构造函数的区别 96 | 97 | ## web 前端安全和常见的 web 安全问题 98 | -------------------------------------------------------------------------------- /scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | # !/bin/bash 2 | # 基于Github Actions 前端部署脚本 3 | set -e 4 | # 检查Actions目录配置 5 | if [ -z "${PUBLISH_DIR}" ]; then 6 | echo "【致命错误】：workflows尚未设置 PUBLISH_DIR" 7 | exit 1 8 | fi 9 | 10 | # 检查设置的目录是否存在，不存在直接退出 11 | if [ -d "$(pwd)${PUBLISH_DIR}" ]; then 12 | echo "【致命错误】：PUBLISH_DIR 尚未生成" 13 | exit 1 14 | fi 15 | 16 | # 检查要发布的分支名称 17 | if [ -z "${PUBLISH_BRANCH}" ]; then 18 | print_error "【致命错误】：没有发现 PUBLISH_BRANCH" 19 | exit 1 20 | fi 21 | 22 | # 进入到build的目录 23 | cd "${PUBLISH_DIR}" # dist 24 | 25 | # 为gh-pages 生成CNAME，发现使用别人提供的脚本，生成的竟然是小写的CNAME文件，所以改为小写的，使用脚本写入 26 | 27 | # 设置CNAME 28 | if [ -n "${CNAME}" ]; then 29 | echo "${CNAME}">CNAME 30 | fi 31 | 32 | # 格式化的输出 33 | function print_error() { 34 | echo -e "\e[31mERROR: ${1}\e[m" 35 | } 36 | 37 | function print_info() { 38 | echo -e "\e[36mINFO: ${1}\e[m" 39 | } 40 | 41 | # 配置仓库地址 42 | if [ -n "${EXTERNAL_REPOSITORY}" ]; then 43 | PUBLISH_REPOSITORY=${EXTERNAL_REPOSITORY} 44 | else 45 | PUBLISH_REPOSITORY=${GITHUB_REPOSITORY} 46 | fi 47 | 48 | # 配置ssh 49 | if [ -n "${ACCESS_TOKEN_DEPLOY}" ]; then 50 | echo "设置 ACCESS_TOKEN_DEPLOY" 51 | SSH_DIR="${HOME}/.ssh" 52 | mkdir "${SSH_DIR}" 53 | ssh-keyscan -t rsa github.com >"${SSH_DIR}/known_hosts" 54 | echo "${ACCESS_TOKEN_DEPLOY}" >"${SSH_DIR}/id_rsa" 55 | chmod 400 "${SSH_DIR}/id_rsa" 56 | remote_repo="git@github.com:${PUBLISH_REPOSITORY}.git" 57 | fi 58 | 59 | # 跳过配置personal_token 和 github_token 60 | remote_branch="${PUBLISH_BRANCH}" 61 | 62 | # 配置git 63 | git init 64 | git checkout --orphan "${remote_branch}" # 积累无数次commit，不算分支 65 | 66 | git config user.name "${GITHUB_ACTOR}" 67 | git config user.email "${GITHUB_ACTOR}@users.noreply.github.com" 68 | 69 | git remote rm origin || true 70 | git remote add origin "${remote_repo}" 71 | 72 | # 更改时间 73 | cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 74 | 75 | # git提交 76 | git add . 77 | push_time="$(date '+%Y-%m-%d %H:%M:%S')" 78 | git commit -m "【部署成功】：${push_time}" 79 | 80 | git push origin -f "${PUBLISH_BRANCH}" 81 | 82 | print_info "${GITHUB_SHA} 漂亮！部署成功： ${push_time}" 83 | -------------------------------------------------------------------------------- /docs/backend/nginx/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: auto 3 | --- 4 | 5 | # Nginx 6 | 7 | > https://blog.csdn.net/tsummerb/article/details/79248015 对 nginx 正向、反向带来写的比较好的文章 8 | 9 | ## nginx 的正向代理？ 10 | 11 | > 我忘记是 2018 年在哪一家公司面试了，面试官问我，你知道什么是 nginx 正向代理？我楞了下，说不知道，后面想一直知道这个知识点。直到我直到这个知识点后，傻楞了，我一个前端知道个锤子 nginx 正向代理啊，我去！算了，本着学习的心态，不想回忆起这个沙雕面试官了。 12 | 13 | - 正向代理最大的特点是客户端非常明确要访问的服务器地址；服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。 14 | - 内网服务主动要求请求外网的地址服务，内网服务->访问->外网。((⊙_⊙)？，所以我 ssh 到服务器 curl 百度，也算了) 15 | - (`应该可以本来按着a 页面返回给用户，结果我让百度页面返回给用户？恩？`) 16 | - 以通过代理软件访问 facebook 这样的例子，比较形象 17 | 18 | ```txt 19 | server{ 20 | resolver 8.8.8.8 21 | } 22 | ``` 23 | 24 | ## nginx 的反向代理？ 25 | 26 | - proxy_pass 27 | - upstream 28 | - 外网主动请求内网服务，外网->请求->内网服务 29 | - 请求的来源也就是客户端是明确的，但是请求具体由哪台服务器处理的并不明确了，nginx 扮演的就是一个反向代理角色 30 | - 用户去访问淘宝，但返回给用户的内容的服务器，可能来自浙江，可能来自北京 31 | 32 | ## nginx 负载均衡 33 | 34 | - 硬件负载均衡 35 | - 软件负载均衡 36 | 37 | > 与硬件主机实现一种消息队列分发机智 38 | 39 | - 负载均衡调度算法 40 | - weight 轮询 41 | > 皇帝翻牌子比较形象了！可以设定一些权重，来增加获得宠幸的几率，被打入冷宫的 out 出局。。。 42 | - ip_hash 43 | > 客户端 ip 的 hash 匹配，一个固定 ip 从会访问到同一个后端，一定程度解决了集群下，session 共享问题 44 | - fair 45 | > 智能调整算法调度？动态的根据后端服务器的请求处理处理的响应时间，进行均衡的分配，响应时间短的，分配到的几率高，长的，分配的少！需要安装 upstream_fair 模块 46 | - url_hash 47 | > 根据 url+hash 结果，每次请求的 url 都指定到后端固定服务器，nginx 作为静态服务器下，提高缓存效率。需要安装 hash 软件包 48 | 49 | ## 一段基于 vue 项目 nginx 配置文件 50 | 51 | ```txt 52 | { 53 | worker_processes 1; 54 | events { 55 | worker_connections 1024; 56 | } 57 | http { 58 | include mime.types; 59 | default_type application/octet-stream; 60 | sendfile on; 61 | keepalive_timeout 65; 62 | server { 63 | listen 80; 64 | server_name localhost; 65 | 66 | location / { 67 | root F:\baidu\dist; 68 | try_files $uri $uri/ @router; 69 | index index.html; 70 | } 71 | 72 | location @router { 73 | rewrite ^.*$ /index.html last; 74 | } 75 | location ^~/api/{ 76 | proxy_pass http://www.baidu.com/; 77 | } 78 | } 79 | } 80 | } 81 | 82 | ``` 83 | 84 | ## 一段基于 nuxt 项目的 nginx 配置文件 85 | -------------------------------------------------------------------------------- /docs/javascript/context/apply.md: -------------------------------------------------------------------------------- 1 | # Apply 函数 2 | 3 | ## 说明 4 | 5 | ::: tip 6 | apply 会立即执行。 7 | ::: 8 | 9 | ## 特性 10 | 11 | - 最多入参 `65536` 个参数，即 `2^16` 12 | - 假如数组的长度很长。切块后循环传入目标方法 13 | 14 | ## 数组添加到另一个数组 15 | 16 | - 数组 `list1`，数组 `list2` 17 | - `list1` 里面含有 `list2` 的元素，`list2` 不变 18 | 19 | ```js 20 | const list1 = [1, 3]; 21 | const list2 = [2, 4]; 22 | list1.push.apply(list1, list2); 23 | console.info('list1:', list1); 24 | console.info('list2:', list2); 25 | ``` 26 | 27 | ## 变更入参类型 28 | 29 | ```js 30 | // 最大值 31 | const waitSortedList = [12, 1, 456, 6, 16]; 32 | const max = Math.max.apply(null, waitSortedList); 33 | console.info(max); 34 | 35 | // 最小值 36 | const min = Math.min.apply(null, waitSortedList); 37 | console.info(min); 38 | ``` 39 | 40 | ### 将数组空元素转为 `undefined` 41 | 42 | ```js 43 | const arr = [54654, , 55]; 44 | const result = Array.apply(null, arr); 45 | console.info(result); //[ 54654, undefined, 55 ] 46 | ``` 47 | 48 | 等同于下面几种方式： 49 | 50 | `Array.from()` 实现 51 | 52 | ```js 53 | const arr = [54654, , 55]; 54 | const result = Array.from(arr); 55 | ``` 56 | 57 | `...` 拓展符实现： 58 | 59 | ```js 60 | const arr = [54654, , 55]; 61 | const result = [...arr]; 62 | ``` 63 | 64 | `concat()` 实现： 65 | 66 | ```js 67 | const arr = [54654, , 55]; 68 | const result = [].concat(arr); 69 | ``` 70 | 71 | ## 链接构造器 72 | 73 | ### 转换类数组对象 74 | 75 | ```js 76 | Array.prototype.slice.apply({ 0: 1, length: 1 }); // [1] 77 | Array.prototype.slice.apply({ 0: 1, length: 99 }); // (99) [1, empty × 98] 78 | ``` 79 | 80 | ### 绑定回调函数的对象 81 | 82 | ```js 83 | // TODO 84 | ``` 85 | 86 | ## call 与 apply 区别 87 | 88 | - call 入参是 `独立参数`，如 `fn("click","touch")` 89 | - apply 入参是 `数组`，如 `fn(["click","touch"])`，否则无法被读取到 90 | 91 | ```js 92 | function github(param1, param2) { 93 | console.info(param1, param2); 94 | } 95 | const repoObject = { repo: 'veaba/web-advanced' }; 96 | const authorObject = { author: 'veaba' }; 97 | fn.apply(null, [authorObject], repoObject); // {author: 'veaba'}, undefined 98 | 99 | fn.apply(null, repoObject, [authorObject]); // undefined undefined 100 | ``` 101 | -------------------------------------------------------------------------------- /docs/public/demos/html/waterfall.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |WARNING
${token.content}}
NOTE
${token.content}}
42 |
43 | jison
44 |
`;
48 | }
49 |
50 | return defaultRenderer(tokens, index, options, env, slf);
51 | };
52 | };
53 |
54 | export default MermaidExample;
--------------------------------------------------------------------------------
/docs/javascript/__proto__.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # `__proto__`
6 |
7 | ```js
8 | const obj = {
9 | a: 2,
10 | b: 3,
11 | };
12 |
13 | console.log(obj.__proto__);
14 | ```
15 |
16 | ::: details 如下：
17 |
18 | 
19 |
20 | :::
21 |
22 | ## 获取原型 `[[getPrototypeOf]]`
23 |
24 | - console.log(obj.`__proto__`)
25 | - console.log(Object.getPrototypeOf(obj))
26 | - console.log(Object.prototype)
27 |
28 | ## 设置原型 `[[setPrototypeOf]]`
29 |
30 | ```js
31 | Object.setPrototypeOf(obj, { c: 22 });
32 | ```
33 |
34 | 重新打印：
35 |
36 | ```js
37 | console.log(obj); // { a: 2, b: 3 }
38 |
39 | // 在原型链上，则可以获得 c 属性
40 | console.log(obj.c); // 22
41 | ```
42 |
43 | ## 获取对象的可拓展性 `[[isExtensible]]`
44 |
45 | ```js
46 | console.log(Object.isExtensible(obj)); // true
47 |
48 | Object.freeze(obj);
49 | console.log(Object.isExtensible(obj)); // false
50 |
51 | // seal 不可修改、不可删除，可复写，可枚举
52 | Object.seal(obj); //封闭对象
53 | obj.c = 999;
54 | console.log(obj); // 此时不会被写入
55 |
56 | // freeze 不可写 只读
57 | ```
58 |
59 | ## 获取自有属性 `[[getOwnProperty]]`
60 |
61 | - 返回自有属性
62 |
63 | ```js
64 | const obj = {
65 | a: 2,
66 | b: 3,
67 | };
68 | Object.setPrototypeOf(obj, { c: 22 });
69 | console.log(Object.getOwnPropertyNames(obj)); // ['a','b']
70 | ```
71 |
72 | ## 禁止拓展对象 `[[preventExtensions]]`
73 |
74 | ```js
75 | const obj = {
76 | a: 2,
77 | b: 3,
78 | };
79 | Object.preventExtensions(obj); // 禁止添加，可删，可改
80 | obj.d = 2;
81 | console.log(obj);
82 | ```
83 |
84 | ## 拦截对象操作 `[[defineProperty]]`
85 |
86 | ```js
87 | const obj = {
88 | a: 2,
89 | b: 3,
90 | };
91 | Object.defineProperty(obj);
92 | ```
93 |
94 | ## 判断是否是自身属性 `[[hasOwnProperty]]`
95 |
96 | ```js
97 | console.log(obj.hasOwnProperty('a')); // 返回布尔值，可用于深拷贝
98 | ```
99 |
100 | ## [[get]]
101 |
102 | ```js
103 | console.log('c' in obj); // 方法 1
104 | console.log(obj.c); // 方法 2
105 | ```
106 |
107 | ## [[set]]
108 |
109 | ```js
110 | obj.a = 2; // 方法 1
111 | obj['a'] = 2; // 方法 2
112 | ```
113 |
114 | ## delete
115 |
116 | ```js
117 | delete obj.a;
118 | ```
119 |
120 | ## enum
121 |
122 | ```js
123 | for (let k in obj) {
124 | console.log(k);
125 | }
126 | ```
127 |
128 | ## 获取键集合 `[[ownPropertyKeys]]`
129 |
130 | ```js
131 | Object.keys(obj);
132 | ```
133 |
134 | ## 声明过程
135 |
136 | ```js
137 | function a() {}
138 |
139 | const a = function () {};
140 | ```
141 |
142 | ## new 过程
143 |
144 | ```js
145 | function T {}
146 | const t = new T()
147 | ```
148 |
--------------------------------------------------------------------------------
/docs/algorithm/index.md:
--------------------------------------------------------------------------------
1 | # 算法
2 |
3 | ## 时间复杂度
4 |
5 | **量级**：
6 |
7 | - 常数阶 O(1)
8 | ↓
9 | - 对数阶 O(logN)
10 | ↓
11 | - 线性阶 O(n)
12 | ↓
13 | - 平方阶 O(n2)
14 | ↓
15 | - 立方阶 O(n3)
16 | ↓
17 | - K 次方阶 O(n^k)
18 | ↓
19 | - 指数阶 O(2^n)
20 | ↓
21 |
22 | 越下面，执行的效率越低。
23 |
24 | 
25 |
26 | **常数节**：时间复杂度只有 O(1)
27 |
28 | ```js
29 | var a = 0;
30 |
31 | var b = 0;
32 |
33 | a++;
34 |
35 | // or 此处的时间复杂度也是 O(n) 常数阶
36 |
37 | function total() {
38 | let sum = 0;
39 | for (let i = 0; i < 100; i++) {
40 | sum++;
41 | }
42 | }
43 |
44 | // O(n2)
45 |
46 | function total() {
47 | let sum = 0;
48 | for (let i = 0; i < 100; i++) {
49 | for (let j = 0; j < 100; j++) {
50 | sum++;
51 | }
52 | }
53 | }
54 |
55 | // 特殊的比较 O(m+n)，无法比较n 、m 大小
56 |
57 | function total3(n, m) {
58 | let sum = 0;
59 | for (let i = 0; i < n; i++) {
60 | sum += i;
61 | }
62 | let sum2 = 0;
63 | for (let j = 0; j < m; i++) {
64 | sum2 += i;
65 | }
66 | return sum + sum2;
67 | }
68 |
69 | // 特殊的比较 O(n*m)
70 | function total4(n, m) {
71 | let sumN = 0;
72 | let sumM = 0;
73 | for (let i = 0; i < n; i++) {
74 | sumN += i;
75 | for (let j = 0; j < m; j++) {
76 | sumM += j;
77 | }
78 | }
79 | return sumN * sumM;
80 | }
81 | ```
82 |
83 | **线性阶 O(n)**：
84 |
85 | **对数阶 O(logN)**：
86 |
87 | ```js
88 | function total() {
89 | let sum = 0;
90 | let i = 1;
91 | while (i <= n) {
92 | sum += 1;
93 | i = i * 2;
94 | }
95 | }
96 |
97 | function total2() {
98 | let sum = 0;
99 | for (let i = 0; i < n; i = i * 2) {
100 | sum += 1;
101 | }
102 | }
103 | ```
104 |
105 | `2x=n` => `x=log2n`，这两者的时间复杂度为 O(log2n)
106 |
107 | ## 空间复杂度
108 |
109 | 空间复杂度：表示算法的存储空间和数据规模之间的关系
110 |
111 | ```js
112 | // 根据时间复杂度推算，忽略常数量级，每次数组都申请一个空间存储量，此时的空间复杂度为 O(n)
113 | function initArray(n) {
114 | const arr = [];
115 | for (let i = 0; i < n; i++) {
116 | arr[i];
117 | }
118 | }
119 | ```
120 |
121 | **0(1) 空间复杂度**：
122 | **O(n) 空间复杂度**：
123 |
124 | ```js
125 | function total(n) {
126 | let sum = 0;
127 | for (let i = 0; i <= n; i++) {
128 | sum += i;
129 | }
130 | return sum;
131 | }
132 |
133 | total(10); //45
134 | ```
135 |
136 | 时间复杂度：O(n)，但是，显然这里的时间复杂度是高了。
137 |
138 | ```js
139 | // 通过调整算法后，时间复杂度仅为 0(1)
140 | function total(n) {
141 | const sum = (n * (n + 1)) / 2;
142 | return n;
143 | }
144 | ```
145 |
146 | 显然可以比较 `O(n)` > `O(1)`，这是算法的魅力，提高效率。
147 | **O(n2) 空间复杂度**：
148 |
--------------------------------------------------------------------------------
/docs/javascript/useful/debounce.md:
--------------------------------------------------------------------------------
1 | # 防抖函数 debounce
2 |
3 | ## 概念
4 |
5 | - 无论触发多少次回调，都只执行最后一次，停止出发后才执行
6 |
7 | - 通俗说，抖掉，等新的一次，重新计算的意思
8 |
9 | - 注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。
10 |
11 | - 如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。
12 |
13 | - 延滞性，最后一个函数触发后，过指定时间才开始执行
14 |
15 | ## 场景
16 |
17 | “适合停顿后触发的场景”，关心最终结果
18 |
19 | 1. 窗口大小调整 `resize`，窗口大小会频繁触发，可以按照特定时间获取到指定值，节流函数也适用
20 |
21 | 2. 懒加载监听计算 `scroll` 位置，按一定时间频率获取，节流函数也适用
22 |
23 | 3. input 查询，确保只有最后一次的更改有效，实际应用中，需要注意时间间隔的差异，并根据实际情况找出最佳数值
24 |
25 | 4. 防止按钮重复点击，短时间只允许提交一次，防止重复提交
26 |
27 | 5. 自动保存问题，当富文本编辑器在用户停止不动后，自动保存。
28 |
29 | ## 实现
30 |
31 | 重点是在 `clearTimeout`
32 |
33 | **方案 1**：
34 |
35 | ```js
36 | function debounce(fn, wait = 50) {
37 | let timer = null;
38 | return function (...args) {
39 | if (timer) clearTimeout(timer);
40 | timer = setTimeout(() => {
41 | fn.apply(this, args);
42 | }, wait);
43 | };
44 | }
45 |
46 | const betterFn = debounce(() => {
47 | console.log('go to ==>');
48 | }, 200);
49 |
50 | document.addEventListener('scroll', betterFn);
51 | ```
52 |
53 | **方案 2**：
54 |
55 | - 具备立即执行的特性
56 |
57 | ```js
58 | function debounce(fn, wait = 50, im) {
59 | let timer = null;
60 | return function (...args) {
61 | if (timer) clearTimeout(timer);
62 | if (!timer && im) {
63 | fn.apply(this, args);
64 | }
65 | timer = setTimeout(() => {
66 | fn.apply(this, args);
67 | }, wait);
68 | };
69 | }
70 |
71 | const betterFn = debounce(
72 | () => {
73 | console.log('go to ==>');
74 | },
75 | 200,
76 | true
77 | );
78 |
79 | document.addEventListener('scroll', betterFn);
80 | ```
81 |
82 | ## 同时使用
83 |
84 | ### 滚动场景
85 |
86 | ```js
87 | // 示例代码
88 | const handleScroll = () => {
89 | // 节流：限制检查频率
90 | throttle(() => {
91 | // 防抖：当用户停止滚动一段时间后执行
92 | debounce(checkIfReachBottom, 300)();
93 | }, 200)();
94 | };
95 |
96 | window.addEventListener('scroll', handleScroll);
97 | ```
98 |
99 | ### 实时搜索
100 |
101 | ```js
102 | const fetchSuggestions = () => {
103 | // 节流：限制最小请求间隔为500ms
104 | throttle(() => {
105 | // 防抖：用户停止输入300ms后执行
106 | debounce(actualFetch, 300)();
107 | }, 500)();
108 | };
109 |
110 | searchInput.addEventListener('input', fetchSuggestions);
111 | ```
112 |
113 | ```js
114 | const handleResize = () => {
115 | throttle(() => {
116 | debounce(calculateLayout, 200)();
117 | }, 100)();
118 | };
119 |
120 | window.addEventListener('resize', handleResize);
121 | ```
122 |
123 | ### 窗口大小调整
124 |
--------------------------------------------------------------------------------
/docs/public/demos/js/promise-class.js:
--------------------------------------------------------------------------------
1 | // Reference :https://segmentfault.com/a/1190000038433512
2 |
3 | class PromiseClass {
4 | constructor(exec) {
5 | this.status = "pending"; // 等待中
6 | this.value = undefined;
7 | this.reason = undefined;
8 | this.onFulfilled = undefined;
9 | this.onRejected = undefined;
10 | this.onFulFilledList = []; // 等待的函数与列表？
11 | this.onRejectedList = []; // 拒绝的列表
12 |
13 | try {
14 | // todo
15 | exec(this.resolve, this.reject);
16 | } catch (error) {
17 | this.reject(error);
18 | }
19 | }
20 |
21 | // resolve 函数
22 | resolve(value) {
23 | if (this.status === "pending") {
24 | this.status = "fulfilled";
25 | this.value = value;
26 | this.onFulFilledList.forEach((item) => item()); //每项函数都是执行
27 | }
28 | }
29 | // reject 函数
30 | reject(reason) {
31 | if (this.status === "pending") {
32 | this.status = "rejected";
33 | this.reason = reason;
34 | this.onRejectedList.forEach((item) => item());
35 | }
36 | }
37 |
38 | // then
39 |
40 | then(onFulfilled, onRejected) {
41 | let result = null;
42 | if (this.status === "fulfilled" && onFulfilled) {
43 | result = onFulfilled(this.value);
44 | return PromiseClass.resolve(result); //返回新的一个promise
45 | }
46 |
47 | if (this.status === "rejected" && onRejected) {
48 | result = onRejected(this.reason);
49 | return PromiseClass.resolve(result);
50 | }
51 |
52 | if (this.status === "pending") {
53 | onFulfilled && this.onFulFilledList.push(() => onFulfilled(this.value)); // 如果存在，则到栈里
54 | onRejected && this.onRejectedList.push(() => onRejected(this.reason));
55 | }
56 | }
57 | }
58 |
59 | PromiseClass.resolve = function(value) {
60 | if (typeof value === "object" && value.then) {
61 | return value;
62 | } else {
63 | return new PromiseClass((resolve) => {
64 | resolve(value);
65 | });
66 | }
67 | };
68 |
69 | PromiseClass.all = function(list) {
70 | return new PromiseClass((resolve, reject) => {
71 | let result = [];
72 | let count = 0;
73 | for (let i = 0; i < list.length; i++) {
74 | if (typeof list[i] === "object" && list[i].then) {
75 | PromiseClass.resolve(list[i]).then((data) => {
76 | result[i] = data;
77 | count++;
78 | }, reject);
79 | } else {
80 | result[i] = list[i];
81 | count++;
82 | }
83 | }
84 |
85 | if (count === list.length) {
86 | resolve(result);
87 | }
88 | });
89 | };
90 |
91 | // TODO:PromiseClass.race 只要一个成功，全部resolve
92 |
93 | // TODO:PromiseClass finally，不管成功失败，回调都执行，执行之后，依然可以then
94 |
--------------------------------------------------------------------------------
/docs/interview/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # 面试题
6 |
7 | ## 个人总结
8 |
9 | - 知所以然，不知所以然。(必须在常见的问题上，得到深入的理解和应用)
10 |
11 | - 必须需要作足准备 (几次的面试都很被动，打个措手不及)
12 |
13 | - 深入你使用主流框架的源码来理解
14 |
15 | ## css
16 |
17 | - 两种盒子模型分别说一下
18 |
19 | - 如何垂直居中
20 |
21 | - flex 怎么用？常用属性有什么？
22 |
23 | - BFC 是什么？
24 |
25 | - css 选择器优先级
26 |
27 | - 清除浮动
28 | - 原因？
29 | - 解决方案
30 |
31 | ## js
32 |
33 | - ES6 语法有什么？分别怎么用？
34 | - 必考：ES 6 语法知道哪些，分别怎么用？
35 | - 必考 Promise、Promise.all、Promise.race 分别怎么用？
36 | - 必考：手写函数防抖和函数节流
37 | - 必考：手写 AJAX
38 | - 必考：这段代码里的 this 是什么？6. 必考：闭包/立即执行函数是什么？
39 | - 必考：什么是 JSONP，什么是 CORS，什么是跨域？8. 常考：async/await 怎么用，如何捕获异常？
40 | - 常考：如何实现深拷贝？
41 | - 常考：如何用正则实现 trim()？
42 | - 常考：不用 class 如何实现继承？用 class 又如何实现？12. 常考：如何实现数组去重？
43 | - 放弃:==相关题目 (反着答)
44 | - 送命题：手写一个 Promise
45 | - (a==1&&a==2&&a==3) 可能为 true 吗？为什么
46 | - js 垃圾回收机制
47 | - EventLoop
48 | - apply call bind
49 | - [源码实现更新完毕](https://www.bilibili.com/read/cv7903371)
50 | - 手写原生 call bind apply
51 | - defineProperty 和 Proxy 区别？ - defineProperty 劫持数据 -> 对象做拓展 - obj 是空对象 - 单个处理 property - proxy 返回代理对象数据劫持 -> 代理 - target 是已有的 property - 无属性名 - 全局性处理 property - 代理改，被代理也会被改 - 支持对数组的代理 - 支持对函数的代理
52 |
53 | - [【前端面试必备】Vue2 与 Vue3 核心之 ‘响应式原理’](https://www.bilibili.com/video/BV1Dk4y127Ha?p=1)
54 | - [前端进阶之道](https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B)
55 |
56 | ## DOM
57 |
58 | 1. 必考：事件委托
59 | 2. 曾考：用 mouse 事件写一个可拖曳的 div
60 |
61 | ## HTTP
62 |
63 | 1. 必考：HTTP 状态码知道哪些？分别什么意思？
64 | 2. 大公司必考：HTTP 缓存有哪几种？
65 | 3. 必考：GET 和 POST 的区别
66 | 4. Cookie v.s.LocalStorage v.s。SessionStorage V.S。Session
67 |
68 | ## 框架 Vue
69 |
70 | 1. 必考：watch 和 computed 和 methods 区别是什么？
71 | 2. 必考：Vue 有哪些生命周期钩子函数？分别有什么用？
72 | 3. 必考：Vue 如何实现组件间通信？
73 | 4. 必考：Vue 数据响应式怎么做到的？
74 | 5. 必考：Vue.set 是做什么用的？
75 | 6. Vuex 你怎么用的？
76 | 7. VueRouter 你怎么用的？
77 | 8. 路由守卫是什么？
78 |
79 | ## 框架 React
80 |
81 | 1. 必考：受控组件对比非受控组件
82 | 2. 必考：React 有哪些生命周期函数？分别有什么用？(Ajax 请求放在哪个阶段？)
83 | 3. 必考：React 如何实现组件间通信？
84 | 4. 必考：shouldComponentUpdate 有什么用？
85 | 5. 必考：虚拟 DOM 是什么？
86 | 6. 必考：什么是高阶组件？
87 | 7. React diff 的原理是什么？
88 | 8. 必考 Redux 是什么？
89 |
90 | ## TypeScript
91 |
92 | - 说一下泛类型
93 | 1.never 类型是什么？
94 | 2.TypeScript 比起 JavaScript 有什么优点？
95 |
96 | ## Webpack
97 |
98 | 1. 必考：有哪些常见 loader 和 plugin，你用过哪些？2. 英语题：loader 和 plugin 的区别是什么？3. 必考：如何按需加载代码？4. 必考：如何提高构建速度？5. 转义出的文件过大怎么办？
99 | 上面五题请看这个不错的参考：https://zhuanlan.zhihu.com/p/44438844
100 |
101 | ## 安全
102 |
103 | - 什么是 XSS？
104 | - 解决：
105 |
106 | - 什么是 CSRF
107 | - 解决：
108 |
109 | ## Promise
110 |
111 | [Reference](https://segmentfault.com/a/1190000038433512)
112 |
113 | ```js
114 |
115 | ```
116 |
--------------------------------------------------------------------------------
/docs/public/demos/qij.js:
--------------------------------------------------------------------------------
1 |
2 | // let ob = {
3 | // '1': '∞',
4 | // '2': 'abc',
5 | // '3': 'def',
6 | // '4': 'ghi',
7 | // '5': 'jkl',
8 | // '6': 'mno',
9 | // '7': 'pqrs',
10 | // '8': 'tuv',
11 | // '9': 'wxyz',
12 | // '0': '+',
13 | // '*': ' ',
14 | // '↑': '#'
15 | // }
16 | // let arrNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', '0', '↑'];//∞ + ' ' #
17 | // function func(string) {
18 | // let stringData = (string.toString()).split('') //切割为数组
19 | // let len = stringData.length || 1;
20 | // let arrCount = []
21 | // // 入参多少次数据?
22 | // for (let i = 0; i < len; i++) {
23 | // let tempArr = ob[stringData[i]].split('')//值的数组
24 | // arrCount.push(tempArr)
25 | // }
26 | // console.info(arrCount)
27 | // return arrCount
28 | // }
29 | // func(194)
30 |
31 |
32 |
33 | /*********************************************/
34 | // var arr = [];
35 | // var a = ['b', 'c']; var b = ['e', 'f', 'g','h'];
36 | // for (let i = 0; i < 2; i++) {
37 | // for (let k = 0; k < b.length; k++) {
38 | // arr.push(a[i]+b[k])
39 | // };
40 | // };
41 | // console.info(arr)
42 |
43 | // ['a']、 ['b','c']、['d','e','f'] abd,abe,abf,acd,ace,acf= 2x3=6的长度
44 |
45 | let arr1 = [['∞'], ['w', 'x', 'y', 'z'], ['g', 'h', 'i']]
46 | let temp = []
47 | function p1(arr) {
48 | let s = ''
49 | for (let i = 0; i < arr.length; i++) {
50 | s = s + arr[i]
51 | temp.push(s)
52 | return p1(arr[i])
53 | }
54 | }
55 | p1(arr1)
56 |
57 |
58 |
59 | // Math.round(Math.random())?Math.round(Math.random()):Math.round(Math.random())-1
60 |
61 | /**数据动态绑定基本实现 **/
62 | let obj = {
63 | key_1: 1,
64 | key_2: 2
65 | }
66 | function func(key) {
67 | console.info(key + '的值子发生变化' + this[key])
68 | }
69 |
70 | function bindData(obj, func) {
71 | for (let item in obj) {
72 | Object.defineProperty(obj, item, {
73 | get: function () {
74 | return obj.item;
75 | },
76 | set: function (value) {
77 | obj.item = value;
78 | func.bind(obj)(item);
79 | }
80 | })
81 | }
82 | }
83 | bindData(obj, func)
84 | obj.key_1 = 2;//此时自动输出 变化为2
85 | obj.key_2 = 1 //此时自动输出变化为1
86 |
87 | /** 对json 数据结构进行处理，要求找到child 超过两个的name值 **/
88 |
89 | let data={
90 | name:'jack',
91 | child:[
92 | {name:'jack1'},
93 | {name:'jack2',child:[
94 | {name:'jack2_1',child:{name:'jack2-1-1'}},
95 | {name:'jack2_2'}
96 | ]},
97 | {name:'jack3',child:{name:'jack3-1'}}
98 | ]
99 | };
100 | Object.keys(data)//只能取同级的keys值
--------------------------------------------------------------------------------
/docs/frontend/es6/reflect.md:
--------------------------------------------------------------------------------
1 |
2 | ## Reflect
3 |
4 | > 现阶段一些方法同时部署到 Object、Reflect 对象上，未来某些方法只能从 Reflect 上获取，比如 Object.defineProperty
5 |
6 | - 合理化取值。比如 Object.defineProperty(obj,name,desc) 在无法定义属性时，报错，但 Reflect.defineProperty(obj,name,desc) 会返回 false
7 |
8 | ```js
9 | // 旧的方法
10 | try {
11 | Object.defineProperty(target, property, attributes);
12 | // 成功的取值
13 | } catch (e) {
14 | // 失败
15 | }
16 |
17 | if (Reflect.defineProperty(target, property, attributes)) {
18 | // 成功
19 | } else {
20 | // 失败
21 | }
22 | ```
23 |
24 | - `Object` 操作都变成了函数行为，而不是一个操作符
25 |
26 | ```js
27 | // 旧的写法
28 | 'assign' in Object; //true
29 | // 新写法
30 | Reflect.has(Object, 'assign'); //true
31 |
32 | // 旧的delete 操作符
33 | var obj = {
34 | name: 'Old',
35 | };
36 | delete obj.name;
37 |
38 | // 新的函数式操作方法
39 | Reflect.deleteProperty(obj, 'name');
40 | ```
41 |
42 | - Reflect 对象的方法和 Proxy 对象的方法一一对象，只要在 Proxy 有，Reflect 就会有。
43 | - 不管 Proxy 怎么修改默认行为，总可以在 Reflect 上获取默认行为
44 |
45 | ```js
46 | var obj = new Proxy(obj, {
47 | get(target, name) {
48 | console.log('get', target, name);
49 | return Reflect.get(target, name);
50 | },
51 | deleteProperty(target, name) {
52 | console.log('delete ', name);
53 | return Reflect.deleteProperty(target, name);
54 | },
55 | has(target, name) {
56 | console.log('has', name);
57 | return Reflect.has(target, name);
58 | },
59 | });
60 | ```
61 |
62 | - proxy 的拦截操作，内部的偶调用对应的 Reflect 方法，保证原生行为能够正常执行
63 | - 易阅读
64 |
65 | ```js
66 | // old
67 | Function.prototype.apply.call(Math.floor, undefined, [1.6]); //1
68 |
69 | // new
70 | Reflect.apply(Math.floor, undefined, [1.6]); //1
71 | ```
72 |
73 | ### Reflect 静态方法：一共 13 个
74 |
75 | - **Reflect.apply(target,thisArg,args)**
76 | - **Reflect.construct(target,args)**
77 | - **Reflect.get(target,name,receiver)**
78 | - **Reflect.set(target,name,value,receiver)**
79 | - **Reflect.defineProperty(target,name,dec)**
80 | - **Reflect.deleteProperty(target,name)**
81 | - **Reflect.has(target,name)**
82 | - **Reflect.ownKeys(target)**
83 | - **Reflect.isExtensible(target)**
84 | - **Reflect.preventExtensions(target)**
85 | - **Reflect.getOwnPropertyDescriptor(target,name)**
86 | - **Reflect.getPrototypeOf(target)**
87 | - **Reflect.setPrototypeOf(target,prototype)**
88 |
89 | ### 使用 Proxy 实现观察者模式
90 |
91 | 观察者模式 (Observer mode)
92 |
93 | ```js
94 | const queueObservers = new Set();
95 | const observer = (fn) => queueObservers.add(fn);
96 |
97 | function set(target, key, value, receiver) {
98 | const result = Reflect.set(target, key, value, receiver);
99 | queueObservers.forEach((ob) => ob());
100 | return result;
101 | }
102 | ```
103 |
104 | 先定义一个 Set 集合，所有观察者函数都放进这个集合，observable 函数返回对象的代理，拦截赋值操作，拦截函数 set 中，启动执行所有观察者
105 |
--------------------------------------------------------------------------------
/docs/public/demos/js/simulate/promise-class-all.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * 1. TODO 如何实现链式调用
4 | * 2. Promise 实例有三个方法
5 | * - then
6 | * - catch
7 | * - finally
8 | * 3. Promise 有6个静态方法
9 | * 4.
10 | * static #fns 私有静态
11 | * static fns 公有静态
12 | *
13 | */
14 | class PromiseClass {
15 | static thenList = [];
16 | static catchList = [];
17 | constructor(fn) {
18 | this.fns = [fn];
19 | this.thenList = [];
20 | // console.log("fn=>", fn);
21 | // console.log("typeof fn=>", typeof fn);
22 | // console.log("typeof fns=>", typeof this.fns);
23 | // console.log("this=>", this);
24 |
25 | fn.call(null, PromiseClass.resolved); // 通过call 显式转移内部的 param
26 | fn.call(null, PromiseClass.rejected); // 通过call 显式转移内部的 param
27 | }
28 | static resolved(...args) {
29 | const resolveParam = args[0];
30 | // PromiseClass.then.call(this, resolveParam);
31 |
32 | PromiseClass.thenList.shift().call(this, resolveParam);
33 |
34 | for (let i = 0; i < PromiseClass.thenList.length; i++) {
35 | const returnThen = PromiseClass.thenList[i];
36 | console.log("returnThen=>", returnThen.call(this, returnThen));
37 | }
38 | }
39 | static rejected(...args) {
40 | const rejectParam = args[0];
41 | for (let i = 0; i < PromiseClass.catchList.length; i++) {
42 | PromiseClass.catchList[i].call(this, rejectParam);
43 | }
44 | }
45 |
46 | /**
47 | * @desc promise instance method: then
48 | * @TODO 这个then 是在 resolve 里面异步后再被动执行的
49 | *
50 | */
51 | then(...args) {
52 | const thenParam = args[0];
53 | PromiseClass.thenList.push(thenParam);
54 | return this;
55 | }
56 |
57 | /**
58 | * @desc promise instance method: catch
59 | * @TODO
60 | *
61 | */
62 | catch(...args) {
63 | const catchParam = args[0];
64 | PromiseClass.catchList.push(catchParam);
65 | return this;
66 | }
67 |
68 | /**
69 | * @desc promise instance method: finally
70 | * @TODO
71 | *
72 | */
73 | finally() {}
74 |
75 | /**
76 | * @TODO
77 | *
78 | */
79 | static all(arg) {
80 | console.log("this", arg);
81 | }
82 | static resolve() {}
83 | /**
84 | * @TODO
85 | *
86 | */
87 | static reject() {}
88 | /**
89 | * @TODO
90 | *
91 | */
92 | static race() {}
93 | /**
94 | * @TODO
95 | *
96 | */
97 | static any() {}
98 | /**
99 | * @TODO
100 | *
101 | */
102 | static finally() {}
103 | /**
104 | * @TODO
105 | *
106 | */
107 | static allSettled() {}
108 | }
109 |
110 | // PromiseClass.all(11);
111 |
112 | // console.log(PromiseClass);
113 |
114 | /**
115 | * Promise 内部的如何调用 resolve 这个两个参数？
116 | * @Test 如果then里不return res 为undefined
117 | *
118 | */
119 |
120 | module.exports = PromiseClass;
121 |
--------------------------------------------------------------------------------
/docs/backend/node/fs.md:
--------------------------------------------------------------------------------
1 | ## fs
2 |
3 | > 不建议在调用 fs.open()、fs.readFile() 或 fs.writeFile() 之前使用 fs.access() 检查文件的可访问性。这样做会引入竞争条件，因为其他进程可能会在两个调用之间更改文件的状态。相反，用户代码应该直接打开、读取或写入文件，并处理在文件无法访问时引发的错误。
4 |
5 | - `.unlink()` 删除文件异步
6 |
7 | ```js
8 | const fs = require('fs');
9 | fs.unlink('./tmp/hello.js', (err) => {
10 | if (err) throw err;
11 | console.log('删除成功');
12 | });
13 | ```
14 |
15 | - `.unlinkSync()` 删除文件，同步
16 |
17 | ```js
18 | const fs = require('fs');
19 | try {
20 | fs.unlinkSync('./tmp/hello.js');
21 | console.log('删除成功');
22 | } catch (err) {
23 | console.log(err, '删除失败');
24 | }
25 | ```
26 |
27 | - `.rename()`
28 |
29 | ```js
30 | fs.rename('./tmp/hello.js', './tmp/world.js', (err) => {
31 | if (err) throw err;
32 | console.log('rename done');
33 | });
34 | ```
35 |
36 | - `.open()` 完成操作后，需要关闭描述符，否则可能导致内存泄漏
37 | - `wx` flag
38 | - `r`
39 |
40 | 线程池
41 |
42 | > 除了 fs.FSWatcher() 和显式同步的方法之外，都使用了 `libuv` 线程池，这对于某些应用程序可能会产生其他负面性能问题，详见 http://nodejs.cn/api/cli.html#cli_uv_threadpool_size_size
43 |
44 | - `fs.FSWatcher()`
45 | > 成功调用一个 fs.watch 方法都会返回一个新的 fs.FSWatcher 对象
46 | - `fs.access(path,[.mode],callback)`
47 | - `fs.Dirent` 类
48 | - `.dirent.isBlockDevice()` boolean
49 |
50 | ```js
51 | const fs = require('fs');
52 | fs.open('./tmp/hello.js', 'r', (err, fd) => {
53 | if (err) throw err;
54 | fs.fstat(fd, (err1, stat) => {
55 | if (err1) throw err1;
56 | //文件属性
57 | console.log(stat);
58 |
59 | //关闭文件描述符
60 | fs.close(fd, (errC) => {
61 | if (errC) throw errC;
62 | console.loh('关闭');
63 | });
64 | });
65 | });
66 | ```
67 |
68 | - `fs.ReadStream` 类
69 | - `fs.WriteSteam` 类
70 | - `fs.Stats` 类
71 | - `fs.stat()`
72 |
73 | ```js
74 | fs.stat('./tmp/world.js', (err, stats) => {
75 | if (err) throw err;
76 | conosle.log(stats);
77 | });
78 | ```
79 |
80 | - `fs.lsate()`
81 | - `.fstat`
82 |
83 | ```js
84 | fs.fstat(fd, (err1, stat) => {
85 | if (err1) throw err1;
86 | //文件属性
87 | console.log(stat);
88 | //关闭文件描述符
89 | fs.close(fd, (errC) => {
90 | if (errC) throw errC;
91 | console.log('关闭');
92 | });
93 | });
94 | ```
95 |
96 | - `fs.close()`
97 | - `fs.appendFile(path,data[,options],callback)`
98 | > 异步地将数据追加到文件中，如果文件不存在，则创建该文件，`data` 可以使字符串或者 `Buffer`
99 |
100 | ```js
101 | fs.appendFile('/tmp.append.txt', 'hello world append file for node.js fs.appendFile function' + new Date(), (err) => {
102 | if (err) throw err;
103 | });
104 | ```
105 |
106 | > 异步方法，顺序无法保证
107 |
108 | ```js
109 | fs.rename('./tmp/hello.js', './tmp/world.js', (err) => {
110 | if (err) throw err;
111 | console.log('rename done');
112 | });
113 | //stat可能在rename 之前，
114 | fs.stat('./tmp/world.js', (err, stats) => {
115 | if (err) throw err;
116 | conosle.log(stats);
117 | });
118 | ```
119 |
120 | > 方法时，在回调内部
121 |
--------------------------------------------------------------------------------
/docs/javascript/blob.md:
--------------------------------------------------------------------------------
1 | # Blob 对象
2 |
3 | `Blob` 是一个表示不可变、原始数据的类文件对象。
4 |
5 | 可以按文本、二进制格式进行读取，重要的是可以为别的格式。
6 |
7 | ## base64 转 blob
8 |
9 | ```js
10 | const file = dataURLtoFile(item, new Date());this.uploadFile(file);
11 | /**
12 | * @desc base64转换 blob文件
13 | * */
14 | const dataURLtoFile(dataUrl) {
15 | let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1];
16 | const base64Str = atob(arr[1]);
17 | const n = base64Str.length;
18 | const u8arr = new Uint8Array(n);
19 | while (n--) {
20 | u8arr[n] = base64Str.charCodeAt(n);
21 | }
22 | return new Blob([u8arr], {type: mime});
23 | },
24 | /**
25 | * @desc 上传图片
26 | * */
27 | const uploadFile(file) {
28 | const formData = new FormData();
29 | formData.append('file', file);
30 | $ajaxPost('/api/work/upload', formData, {
31 | headers: {
32 | 'content-Type': 'multipart/form-data'
33 | }
34 | })
35 | .then(res => {
36 | if (res && res.code === 0) {
37 | this.workData.screenShots.push(res.data.url);
38 | }
39 | })
40 | .catch(err => {
41 | console.info(err);
42 | });
43 | },
44 | ```
45 |
46 | ## json 转为 blob
47 |
48 | ```js
49 | const json = { a: 1, b: 2 };
50 |
51 | const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' });
52 |
53 | // blob 为 {size:22, type:"application/json"}
54 | // await blob.text() 为 '{\n "a": 1,\n "b": 2\n}'
55 | ```
56 |
57 | ## 字符串转为 blob 并返回对象的 URL
58 |
59 | 将一段字符串转为 blob 并生成 URL 下载
60 |
61 | ```js
62 | const novelData = 'hello world';
63 | const blob = new Blob([novelData], { type: 'text/plain' });
64 | const objectURL = URL.createObjectURL(blob);
65 |
66 | const downloadLink = document.createElement('a');
67 | downloadLink.textContent = 'download.txt';
68 | downloadLink.href = objectURL;
69 | downloadLink.download = 'download.txt';
70 |
71 | const downloadContainer = document.querySelector('.download');
72 | if (downloadContainer) {
73 | downloadContainer.appendChild(downloadLink);
74 | }
75 |
76 | // Remember to revoke the object URL when it's no longer needed to free memory
77 | downloadLink.addEventListener('click', () => {
78 | setTimeout(() => URL.revokeObjectURL(objectURL), 100);
79 | });
80 | ```
81 |
82 | ## 从 blob 中提取数据
83 |
84 | blob 对象本身不包含数据，它只是保存了数据的引用。要提取 blob 中的数据，需要使用 FileReader 对象。
85 |
86 | ```js
87 | const reader = new FileReader();
88 |
89 | reader.addEventListener('loadend', () => {
90 | // reader.result 包含 blob 中的数据
91 | });
92 |
93 | reader.readAsArrayBuffer(blob);
94 | ```
95 |
96 | ## 从 Response 中读取
97 |
98 | ```js
99 | const text = await new Response(blob).text();
100 | ```
101 |
102 | 或者：
103 |
104 | ```js
105 | const text = await blob.text();
106 | // 配合其他 API 如 fetch 使用
107 | ```
108 |
--------------------------------------------------------------------------------
/docs/javascript/promise.md:
--------------------------------------------------------------------------------
1 | # Promise
2 |
3 | [promise-class](https://github.com/veaba/web-advanced/blob/master/demos/js/promise-class.js)
4 |
5 | ```js
6 | // Reference :https://segmentfault.com/a/1190000038433512
7 |
8 | class PromiseClass {
9 | constructor(exec) {
10 | this.status = "pending"; // 等待中
11 | this.value = undefined;
12 | this.reason = undefined;
13 | this.onFulfilled = undefined;
14 | this.onRejected = undefined;
15 | this.onFulFilledList = []; // 等待的函数与列表？
16 | this.onRejectedList = []; // 拒绝的列表
17 |
18 | try {
19 | // todo
20 | exec(this.resolve, this.reject);
21 | } catch (error) {
22 | this.reject(error);
23 | }
24 | }
25 |
26 | // resolve 函数
27 | resolve(value) {
28 | if (this.status === "pending") {
29 | this.status = "fulfilled";
30 | this.value = value;
31 | this.onFulFilledList.forEach((item) => item()); //每项函数都是执行
32 | }
33 | }
34 | // reject 函数
35 | reject(reason) {
36 | if (this.status === "pending") {
37 | this.status = "rejected";
38 | this.reason = reason;
39 | this.onRejectedList.forEach((item) => item());
40 | }
41 | }
42 |
43 | // then
44 |
45 | then(onFulfilled, onRejected) {
46 | let result = null;
47 | if (this.status === "fulfilled" && onFulfilled) {
48 | result = onFulfilled(this.value);
49 | return PromiseClass.resolve(result); //返回新的一个promise
50 | }
51 |
52 | if (this.status === "rejected" && onRejected) {
53 | result = onRejected(this.reason);
54 | return PromiseClass.resolve(result);
55 | }
56 |
57 | if (this.status === "pending") {
58 | onFulfilled && this.onFulFilledList.push(() => onFulfilled(this.value)); // 如果存在，则到栈里
59 | onRejected && this.onRejectedList.push(() => onRejected(this.reason));
60 | }
61 | }
62 | }
63 |
64 | PromiseClass.resolve = function(value) {
65 | if (typeof value === "object" && value.then) {
66 | return value;
67 | } else {
68 | return new PromiseClass((resolve) => {
69 | resolve(value);
70 | });
71 | }
72 | };
73 |
74 | PromiseClass.all = function(list) {
75 | return new PromiseClass((resolve, reject) => {
76 | let result = [];
77 | let count = 0;
78 | for (let i = 0; i < list.length; i++) {
79 | if (typeof list[i] === "object" && list[i].then) {
80 | PromiseClass.resolve(list[i]).then((data) => {
81 | result[i] = data;
82 | count++;
83 | }, reject);
84 | } else {
85 | result[i] = list[i];
86 | count++;
87 | }
88 | }
89 |
90 | if (count === list.length) {
91 | resolve(result);
92 | }
93 | });
94 | };
95 |
96 | // TODO:PromiseClass.race 只要一个成功，全部resolve
97 |
98 | // TODO:PromiseClass finally，不管成功失败，回调都执行，执行之后，依然可以then
99 | ```
100 |
--------------------------------------------------------------------------------
/docs/frontend/performance/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # 性能提升
6 |
7 | 网页性能管理详解 ——阮一峰 http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
8 |
9 | ## 前端常见的性能优化请求手段
10 |
11 | 加快资源的加载速度，减少白屏事件
12 |
13 | - CDN 内容分发
14 | - css Sprite 图片合并
15 | - Compress/Gzip 资源文件压缩
16 | - Async/Defer 异步加载
17 | - HTTP Cache HTTP 缓存
18 | ....
19 |
20 | ## html/css 重绘回流 (Repaint、Reflow)
21 |
22 | - display:none 不会发生回流和重绘
23 | - 回流一定触发重绘，重绘不一定会触发回流
24 | - 复杂动画，使用 `position: absolute` 使其脱离文档流
25 | - css3 硬件加速 (GPU 加速)
26 | - css3 硬件加速下以下属性不会发生重绘回流：
27 | - transform
28 | - opacity
29 | - filters
30 | - 使用 fixed 和 absolute，如果修改 css 不会发生回流
31 |
32 | ### 重绘 (repaint)
33 |
34 | ### 回流 (reflow)
35 |
36 | 回流 (reflow)：布局引擎为 frame (框架) 计算图形的过程，一个 frame 回流会导致所有父节点以及后续元素都会回流。
37 |
38 | - 理论上发生回流的原因
39 | - 初始化 (initial)。dom 载入后第一次回流，遍历所有 frame
40 | - 渐进 (incremental)。一个 frame 发生渐进 reflow 时，前面没变，自己内部发生变化。
41 | - 改变大小。容器边界发生变化，内部没变，复用内部状态
42 | - 样式改变。整个 frame 都会遍历
43 | - dirty。(脏的) 已缓存了多个子元素的渐进回流时。
44 | - 具体的操作原因：
45 | - 窗口大小变化
46 | - 更改文档默认字体
47 | - 样式表改变
48 | - 元素内容变化，尤其是输入控件
49 | - input textarea
50 | - dom 操作
51 | - 渐进回流，会使浏览器将渐进队列冲洗，立即执行回流
52 | - offsetWidth、offsetHeight 计算。整个可视区域大小，包括 border scrollBar 在内
53 | - width、height 计算。
54 | - clientWidth 计算内部可视区域大小。
55 | - scrollTop 计算。元素内容向上滚动了多少像素。
56 | - scrollHeight 计算。元素内容的高度，包括溢出的部分
57 | - 避免回流
58 | - 避免逐项更改 style
59 | - 避免循环操作 dom
60 | - 避免循环读取 offsetLeft 等属性，并在循环之前存起来
61 | - 绝对定位具有复杂变化的动画元素。position:absolute 脱离文档流，否则会引起父元素以及后续元素的大量回流。css3 transition 性能不错
62 |
63 | ```js
64 | // 一次bad 的demo
65 |
66 | var dom = document.body.style;
67 | dom.padding = '2px'; // 回流+重绘
68 | dom.border = '1px solid'; // 回流+重绘
69 | dom.border = 'blue'; // 重绘
70 | dom.backgroundColor = '#ccc'; // 重绘
71 | dom.fontSize = '14px'; // 重绘+回流
72 | document.body(document.createTextNode('hello world!'));
73 | ```
74 |
75 | 解决办法
76 |
77 | 1. 写 style 更改 class
78 |
79 | ```js
80 | document.body.className = 'dom';
81 | ```
82 |
83 | ```html
84 | .dom { padding:2px; border:1px solid; background-color:#ccc; font-size:14px }
85 | ```
86 |
87 | 2. 一次添加全部的 style 操作
88 |
89 | ```js
90 | var dom = document.body.style;
91 | dom = 'padding:2px;border:1px solid;background-color:#ccc;font-size:14px';
92 | ```
93 |
94 | 重绘 (repaint)：发生在元素的可见性发生变化时产生重新渲染的现象，回流必然引起重绘：
95 |
96 | - background
97 | - color
98 |
99 | ## 常见的内存泄露的问题
100 |
101 | ### 闭包在 IE9 之前的版本会导致一些特殊的问题。
102 |
103 | ```js
104 | // 内存泄漏
105 | function click1() {
106 | let element = document.querySelector('.test');
107 | element.onclick = function () {
108 | console.log(element.id);
109 | };
110 | }
111 | // fix 版本
112 | function click2() {
113 | let element2 = document.querySelector('.test');
114 | let id = element2.id; // 引用赋值，消除变量循环引用
115 | element2.onclick = function () {
116 | console.log(id);
117 | };
118 | // 设置为null，解除对DOM对象的引用，减少计数
119 | element2 = null;
120 | }
121 | ```
122 |
--------------------------------------------------------------------------------
/docs/javascript/scoped/closure.md:
--------------------------------------------------------------------------------
1 | # 闭包
2 |
3 | - 如何调试闭包函数中返回的变量值，假设已上线，不可更改原始代码
4 |
5 | ```js
6 | const fn = (function () {
7 | const closeData = {
8 | age: 28,
9 | job: 'web',
10 | };
11 | return {
12 | run: function (key) {
13 | return closeData[key];
14 | },
15 | };
16 | })();
17 |
18 | // 如果获取完整的 closeData呢？
19 | fn.run('web');
20 |
21 | // 劫持原始对象的get
22 | Object.defineProperty(Object.prototype, 'all', {
23 | get: function () {
24 | return this;
25 | },
26 | });
27 |
28 | // 获取所有
29 | fn.run('all');
30 | ```
31 |
32 | 或：
33 |
34 | ```js
35 | Object.prototype.__defineGetter__('get', function () {
36 | return this;
37 | });
38 |
39 | console.log(o.run('get'));
40 | ```
41 |
42 | - JavaScript 语言中，只有函数内部的子函数才能读取局部变量。
43 |
44 | - `JavaScript` 特有链式作用域 (chain scope) 有关系，子对象会父级以上查找作用域变量。
45 | - 父作用域对子对象可见，反之不行
46 |
47 | - 闭包能够读取其他函数内部变量的函数
48 |
49 | ## 定义
50 |
51 | A 函数返回函数 B，且返回的函数调用 A 的变量
52 |
53 | ```js
54 | function A() {
55 | const a = 1;
56 | return function B() {
57 | console.log(a);
58 | };
59 | }
60 |
61 | // A()()
62 | ```
63 |
64 | ## 常见
65 |
66 | ```js
67 | for (var i = 1; i <= 5; i++) {
68 | setTimeout(() => {
69 | console.log(i);
70 | }, i * 1000);
71 | }
72 | ```
73 |
74 | setTimeout 是异步函数，会先把循环全部执行完毕。
75 |
76 | **1. 使用闭包解决：**
77 |
78 | ```js
79 | for (var i = 1; i <= 5; i++) {
80 | ((j) => {
81 | setTimeout(() => {
82 | console.log(j);
83 | }, j * 1000);
84 | })(i);
85 | }
86 | ```
87 |
88 | **2. setTimeout 第三个参数：**
89 |
90 | ```js
91 | for (var i = 1; i <= 5; i++) {
92 | setTimeout(
93 | (i) => {
94 | console.log(i);
95 | },
96 | i * 1000,
97 | i
98 | );
99 | }
100 | ```
101 |
102 | **3. 使用 let 声明，形成块级作用域：**
103 |
104 | ```js
105 | for (let i = 1; i <= 5; i++) {
106 | setTimeout(() => {
107 | console.log(i);
108 | }, i * 1000);
109 | }
110 | ```
111 |
112 | ## 解决与避免
113 |
114 | ## 场景
115 |
116 | 1. 允许不带参数的函数 `setTimeout` 调用
117 |
118 | ```js
119 | function fn(a) {
120 | function f2() {
121 | console.log(a);
122 | }
123 | }
124 | const fun = fn(2);
125 |
126 | setTimeout(fn, 2000);
127 | ```
128 |
129 | 2. 回调
130 |
131 | ```js
132 | function onSize(size) {
133 | return function () {
134 | document.border.style.fontSize = size + 'px';
135 | };
136 | }
137 |
138 | const size16 = onSize(16);
139 | document.body.onclick = size16;
140 | ```
141 |
142 | ## 如何消除闭包？
143 |
144 | - TODO 解除变量的引用？
145 |
146 | ```js
147 | const arrayDeepLevel = (function () {
148 | let level = -1;
149 | return function (array) {
150 | if (Array.isArray(array)) {
151 | for (let item of array) {
152 | if (Array.isArray(item)) {
153 | arrayDeepLevel(item);
154 | }
155 | }
156 | level++;
157 | return level;
158 | }
159 | };
160 | })();
161 | ```
162 |
163 | ## 引用
164 |
165 | - [阮一峰 - 学习 Javascript 闭包 (Closure)](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html)
166 |
--------------------------------------------------------------------------------
/docs/javascript/static-method.md:
--------------------------------------------------------------------------------
1 | [//]: # (TODO)
2 |
3 | # 静态方法
4 |
5 | - 疑问：比较 MediaSource.prototype 与 Array.isArray()
6 |
7 | Array.isArray() `静态方法?`，可在 chrome 打印出来并不是灰色
8 | 
9 |
10 | MediaSource.isTypeSupported() `静态方法`，在 chrome 打印出来是亮色
11 | 
12 |
13 | | 类型或者构造函数 | arguments | caller | length | name | prototype | **proto** | [[Scopes]] |
14 | |--------------|-----------|--------|--------|---------|-----------|-----------|------------|
15 | | String | | | 1 | String | | | |
16 | | Boolean | | | 1 | Boolean | | | |
17 | | Number | | | 1 | Number | | | |
18 | | Object | | | 1 | Object | | | |
19 | | Array | | | 1 | Array | | | |
20 | | Symbol | | | 0 | Symbol | | | |
21 | | MediaSources | | | | | | | |
22 | | | | | | | | |
23 |
24 | ## String 方法
25 |
26 | - `fromCharCode`
27 | - `raw`
28 |
29 | ## Boolean
30 |
31 | ## Number
32 |
33 | - `EPSILON:2.220446049250313e-16`
34 | - `MAX_SAFE_INTEGER: 9007199254740991`
35 | - `MAX_VALUE:1.7976931348623157e+308`
36 | - `MIN_SAFE_INTEGER: -9007199254740991`
37 | - `MIN_VALUE:5e-324`
38 | - `NEGATIVE_INFINITY: -Infinity`
39 | - `NaN: NaN`
40 | - `POSITIVE_INFINITY: Infinity`
41 | - `isFinite()`
42 | - `isInteger()`
43 | - `isNaN()`
44 | - `isSafeInteger()`
45 | - `parseFloat()`
46 | - `parseInt()`
47 |
48 | ## Object
49 |
50 | - `assign()`
51 | - `create()`
52 | - `defineProperties()`
53 | - `defineProperty()`
54 | - `entries()`
55 | - `freeze()`
56 | - `getOwnPropertyDescriptor()`
57 | - `getOwnPropertyDescriptors()`
58 | - `getOwnPropertyNames()`
59 | - `getOwnPropertySymbols()`
60 | - `getPrototypeOf()`
61 | - `is()`
62 | - `isExtensible()`
63 | - `isFrozen()`
64 | - `isSealed()`
65 | - `keys()`
66 | - `preventExtensions()`
67 | - `seal()`
68 | - `setPrototypeOf()`
69 | - `values()`
70 |
71 | ## Array
72 |
73 | - `from()`
74 | - `isArray()`
75 | - `of()`
76 | - `Symbol(Symbol.species)`
77 | - `get Symbol(Symbol.species):()`
78 |
79 | ## Symbol
80 |
81 | - `asyncIterator`
82 | - `for()`
83 | - `hadInstance`
84 | - `isConcatSpreadable`
85 | - `iterator`
86 | - `keyFor()`
87 | - `match`
88 | - `replace`
89 | - `search`
90 | - `species`
91 | - `split`
92 | - `toPrimitive`
93 | - `toStringTag`
94 | - `unscopables`
95 |
96 | ## WebSocket
97 |
98 | - `CLOSED:3`
99 | - `CLOSING:2`
100 | - `OPEN:1`
101 | - `CONNECTING:0`
102 |
103 | ## MediaSources
104 |
105 | - `isTypeSupported()` 静态方法
106 |
107 | ## Audio
108 |
109 | ## Vidio
110 |
111 | ## Canvas
112 |
--------------------------------------------------------------------------------
/docs/bundler/rollup/index.md:
--------------------------------------------------------------------------------
1 | # Rollup
2 |
3 | - umd
4 | - iife
5 | - cjs
6 |
7 | > rollup src\app.ts --file build.js --format cjs
8 |
9 | ## cjs
10 |
11 | ```js
12 | import { createServer } from "http";
13 | import { Server } from "socket.io";
14 |
15 | const httpServer = createServer();
16 | const io = new Server(httpServer, { cors: true });
17 |
18 | io.on("connection", (socket) => {
19 | console.log(socket.id);
20 | });
21 |
22 | httpServer.listen(8080, () => {
23 | console.log("listen 8080");
24 | });
25 | ```
26 |
27 | ==>
28 |
29 | ```js
30 | "use strict";
31 |
32 | var http = require("http");
33 | var socket_io = require("socket.io");
34 |
35 | const httpServer = http.createServer();
36 | const io = new socket_io.Server(httpServer, { cors: true });
37 |
38 | io.on("connection", (socket) => {
39 | console.log(socket.id);
40 | });
41 |
42 | httpServer.listen(8080, () => {
43 | console.log("listen 8080");
44 | });
45 | ```
46 |
47 | ## umd
48 |
49 | >
50 |
51 | ```js
52 | import { createServer } from "http";
53 | import { Server } from "socket.io";
54 |
55 | const httpServer = createServer();
56 | const io = new Server(httpServer, { cors: true });
57 |
58 | io.on("connection", (socket) => {
59 | console.log(socket.id);
60 | });
61 |
62 | httpServer.listen(8080, () => {
63 | console.log("listen 8080");
64 | });
65 |
66 | ```
67 |
68 | ===>
69 |
70 | ```js
71 | (function (global, factory) {
72 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('http'), require('socket.io')) :
73 | typeof define === 'function' && define.amd ? define(['http', 'socket.io'], factory) :
74 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.http, global.socket_io));
75 | }(this, (function (http, socket_io) { 'use strict';
76 |
77 | const httpServer = http.createServer();
78 | const io = new socket_io.Server(httpServer, { cors: true });
79 |
80 | io.on("connection", (socket) => {
81 | console.log(socket.id);
82 | });
83 |
84 | httpServer.listen(8080, () => {
85 | console.log("listen 8080");
86 | });
87 |
88 | })));
89 |
90 | ```
91 |
92 | ## iife
93 | - 立即执行
94 | > rollup src\app.ts --file build.js --format iife
95 |
96 | ```js
97 | import { createServer } from "http";
98 | import { Server } from "socket.io";
99 |
100 | const httpServer = createServer();
101 | const io = new Server(httpServer, { cors: true });
102 |
103 | io.on("connection", (socket) => {
104 | console.log(socket.id);
105 | });
106 |
107 | httpServer.listen(8080, () => {
108 | console.log("listen 8080");
109 | });
110 |
111 | ```
112 |
113 | ```js
114 | (function (http, socket_io) {
115 | 'use strict';
116 |
117 | const httpServer = http.createServer();
118 | const io = new socket_io.Server(httpServer, { cors: true });
119 |
120 | io.on("connection", (socket) => {
121 | console.log(socket.id);
122 | });
123 |
124 | httpServer.listen(8080, () => {
125 | console.log("listen 8080");
126 | });
127 |
128 | }(http, socket_io));
129 |
130 | ```
--------------------------------------------------------------------------------
/docs/html/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # HTML
6 |
7 | - [Docs Glossary](https://developer.mozilla.org/zh-CN/docs/Glossary)
8 |
9 | ## 知识点
10 |
11 | - 带 id 属性的 DOM 元素有什么副作用？
12 | - 创建同名的全局变量
13 | - `clientWidth`：`height` + `padding`
14 | - `offsetHeight`: `height` + `padding` + `border`
15 | - w3c 标准盒模型中，默认情况下，块元素的总宽度 = content
16 | - HTML5 事件可以触发多次
17 | - `link` 与 `@import` 区别
18 |
19 | ## 盒子模型
20 |
21 | ### 标准盒子模型
22 |
23 | 标准盒子模型宽度：content
24 |
25 | - 默认使用 border-box
26 |
27 | ```html
28 |
29 |
30 |
31 |
32 |
45 | ${token.content.replace(//g, '>')}
46 |
47 |
53 |
54 |
55 |
56 |
57 | ```
58 |
59 | - parent
60 |
61 | - 总 width：width + margin-left + margin-right
62 | - 总 height：width + margin-left + margin-right
63 | - 实际 content：width - border*2- padding*2=160
64 |
65 | 
66 |
67 | - children
68 | - 总 width：width - border*2- padding*2= 200-40=160
69 | - 总 height：height - border*2- padding*2= 200-40=160
70 |
71 | 
72 |
73 | ### IE 盒子模型
74 |
75 | - IE 盒子模型：`(margin+padding+border)\*2+width`
76 | - 默认使用 content-box
77 |
78 | ```html
79 |
80 |
81 |
82 |
83 |
104 |
105 |
106 |
107 |
108 | ```
109 |
110 | - parent
111 |
112 | - 总 width：margin*2+border*2+padding*2+width=200+20*2+10*2+10*2=280
113 | - 总 height：margin*2+border*2+padding*2+height=200+20*2+10*2+10*2=280
114 |
115 | 
116 |
117 | - children
118 | - 总 width：parent width = 200
119 | - 总 height：parent height = 200
120 |
121 | 
122 |
--------------------------------------------------------------------------------
/docs/interview/2018-8-31.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # 2018 年 8 月 31 日面试题
6 |
7 | ## 以下代码运行结果
8 |
9 | 符合预期？(还是没看懂这道题目！)
10 |
11 | - 目前测试的结果是，入参大于 100 + 300 的时候，time span 的打印时间会在 0.0x 毫秒以下，否则 100ms 左右
12 |
13 | ```js
14 | /*demo1*/
15 | function f1() {
16 | console.time('time span');
17 | }
18 | function f2() {
19 | console.timeEnd('time span');
20 | }
21 | setTimeout(f1, 100);
22 | setTimeout(f2, 200);
23 | function waitForMs1(n) {
24 | var now = Date.now();
25 | while (Date.now() - now < n) {}
26 | }
27 |
28 | waitForMs1(500);
29 | /*demo2*/
30 | function f3() {
31 | console.time('time span');
32 | }
33 | function f4() {
34 | console.timeEnd('time span');
35 | }
36 | setTimeout(f3, 1000);
37 | setTimeout(f4, 2000);
38 | function waitForMs2(n) {
39 | var now = Date.now();
40 | while (Date.now() - now < n) {}
41 | }
42 | waitForMs2(500);
43 | ```
44 |
45 | ::: tip
46 | 当时选的打印是约 500.077ms！回来一跑代码还是没看懂。
47 | 可以理解为？？
48 | :::
49 |
50 | ## 以下哪个结果为真？
51 |
52 | - A. null instanceof Object
53 | - B. null == undefined
54 | - C. NaN ==NaN
55 | - D. false == undefined
56 |
57 | 1. `instanceof` 用法
58 |
59 | - 用于测试其原型链上是否存在一个构造函数的 prototype 属性。
60 | - 检测 constructor.prototype 是否存在参数 object 的原型链
61 | - 语法 `object instanceof constructor`
62 | - 最好分辨的是，使用关键字 `new` 出来
63 |
64 | ```js
65 | console.info({} instanceof Object); /*true*/
66 | console.info(3 instanceof Number); /*false*/
67 | ```
68 |
69 | ## 关于 dom 事件流的表述哪些不正确？
70 |
71 | - A. 事件流包含两个阶段：事件捕获阶段，事件冒泡阶段
72 | - B. IE 跟标准浏览器对于 DOM 事件流实现不一样
73 | - C. 假设 parentEle 是 childEle 的父节点，绑定事件：parentEl.addEventListener('click',fn1.false),
74 | 和 childEle.addEventListener('click',fn2,false)，当点击 childEle 的时候，fn1 先于 fn2 触发
75 | - D. addEventListener 第三个参数 true 代表支持捕获，false 代表不支持捕获
76 |
77 | ## 关于原型的说法不正确的是？
78 |
79 | ```js
80 | function a1(name, age) {
81 | this.name = name;
82 | this.age = age;
83 | }
84 | a1.prototype = {
85 | name: 'children',
86 | hasOwnerProperty: function () {
87 | return false;
88 | },
89 | };
90 | ```
91 |
92 | - A.js 对象用两个不同的属性，一种是自身属性，另外一种是原型链上的继承的属性 `√`
93 | - B.instance.name == 'xx' 为 true `问题应该是这个，因为this指向，导致undefined，除非构造函数的时候入参`
94 |
95 | ```js
96 | var a = new a1('children')就可以
97 | ```
98 |
99 | - C.instance.hasOwnProperty('age')结果是 false `√`
100 | - D.所有对象都继承来自 Object.prototype `√`
101 |
102 | ## 写程序
103 |
104 | 参考