215 | = T extends (this: any, ...args: infer P) => infer R ? (...args: P) => R : T;
216 | ```
--------------------------------------------------------------------------------
/posts/对象的继承方式.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 对象的继承方式
3 | date: 2019-05-27 10:46:26
4 | categories: javascript
5 | tags: [js]
6 | ---
7 |
8 | 关于对象的继承方式的学习和总结
9 |
10 | ### 原型链的继承方式
11 |
12 | **概念：** 父元素作为子类的原型
13 | **缺点：** 父元素的原型属性方法的变化会影响到子类
14 | ```ts
15 | function User (name: string) {
16 | this.name = name
17 | this.getName = function (): string {
18 | return this.name
19 | }
20 | this.setName = function (name: string): void {
21 | this.name = name
22 | }
23 | }
24 |
25 | User.prototype.test = function () {
26 | console.log('test user')
27 | }
28 |
29 | function Student (age: number) {
30 | this.age = age
31 | }
32 |
33 | Student.prototype = new User('dw')
34 |
35 | const s = new Student(21)
36 | s.test() // 'test user'
37 |
38 | // 此时 s 的值为 { age: 21 }, 但是由于继承了User对象，拥有User对象的属性和方法
39 | ```
40 | 对象在获取一个属性或者方法的时候，会先访问自身是否有这个属性，如果有，则直接返回，如果没有，则寻找父级对象，继续执行属性和方法的查找，如果有则返回，没有则重复执行这类操作，直至最顶层，如果没有则返回undefined
41 |
42 | ```ts
43 | // 因此，s 为 { age: 21 }
44 | s.name === 'dw' // true 此时访问的是父元素的name属性， 因为s 自身并没有这个属性， 他是继承 User，因此能拿到User实例的属性和方法
45 |
46 | s.name = 'dwdwdwdw' // 此时 s 的值为 { age: 21, name: 'dwdwdwdw' }
47 | s.setName('newDw') // 此时 s 的值为 { age: 21, name: 'newDw' }
48 | Student.prototype // name的值还是 dw
49 | ```
50 | s.name 和 s.setName 只会作用自身的对象属性，但是在访问的时候，如果自身没有该属性和方法，则会往上层层查找
51 |
52 | ### 构造继承方式
53 |
54 | **概念：** 使用call，apply的方式把父类的this制定的属性方法创建在子级的对象，不涉及对象继承，原型链继承
55 | **缺点：**
56 | - 只能继承（Student）的实例属性和方法，父类（User）原型扩展不会影响到子类（子类无法访问其原型上扩展的属性或者方法）
57 | - 每个子类都会拿到父类的所有属性和方法并存在子类的实例中，这样会增加不必要的内存问题
58 |
59 | ```ts
60 | function User (name: string) {
61 | this.name = name
62 | this.getName = function (): string {
63 | return this.name
64 | }
65 | this.setName = function (name: string): void {
66 | this.name = name
67 | }
68 | }
69 |
70 | User.prototype.test = function () {
71 | console.log('test user')
72 | }
73 |
74 | function Student (name: string, age: number) {
75 | User.call(this, name)
76 | this.age = age
77 | }
78 |
79 | const s = new Student('dw', 26)
80 | s.test() // VM424:1 Uncaught TypeError: s.test is not a function
81 |
82 | // s 并不像原型链继承的方式只有age属性，而是所有的属性和方法都存在s对象上
83 | // {
84 | // age: 26,
85 | // getName: function () {},
86 | // name: 'dw',
87 | // setName: function (name) {}
88 | // }
89 | ```
90 | 这种继承方式并不存在对象继承，而仅仅是将 User 的方法和属性设置到 Student 构造函数之上， 实现方式就是利用call apply 指定this的指向执行调用机制
91 |
92 | ### 原型链 + 构造继承组合的方式
93 | **概念：** 使用call方法调用父类构造函数，继承父类的属性，然后再通过父类实例作为子类的原型
94 | **缺点：**
95 | - 无论什么情况下，都会调用两次父类构造函数
96 | - 父类中（User）的属性和方法既存在于子类（Student）的实例化对象中，又存在于子类的原型中（Student.prototype）说是会内存占用
97 | - 一组在实例上，一组在 Student 原型中，这是不合理的
98 |
99 | ```ts
100 | function User (name, sex) {
101 | this.name = name
102 | this.sex = sex
103 | console.log('name-sex', name, sex)
104 | this.setSex = function () {
105 | console.log('this is User setSex')
106 | }
107 | }
108 |
109 | User.prototype.test = function () {
110 | console.log('this is User test')
111 | }
112 |
113 | function Student (name, sex, grade) {
114 | console.log(name, sex)
115 | // 继承 User的属性
116 | User.call(this, name, sex)
117 | this.grade = grade
118 | this.setGrade = function () {
119 | console.log('this is Student setGrade')
120 | }
121 | }
122 |
123 | // 设置原型
124 | Student.prototype = new User()
125 | console.log(Student.prototype.constructor)
126 | console.log(Student.prototype)
127 | // 设置构造函数由Student初始化
128 | Student.prototype.constructor = Student
129 | console.log(Student.prototype.constructor)
130 | console.log(Student.prototype)
131 | Student.prototype.setStudent = function () {
132 | console.log('this is Student setStudent')
133 | }
134 | // 用于测试 Student.prototype.constructor = Student
135 | // 可查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
136 | Student.prototype.test = function () {
137 | console.log('this is Student test')
138 | return new this.constructor()
139 | }
140 | const c1 = new Student('张三', '男', '三年级')
141 | const c2 = new Student('王洁', '女', '四年级')
142 |
143 | console.log(c1);
144 | console.log(c1.constructor);
145 |
146 | console.log(c2);
147 | console.log(c2.constructor);
148 | ```
149 | Student类通过设置原型链继承的方式定义prototype为User的实例，这样在实例化Student的时候，c1是可以访问到User的属性方法了，其次在实例化Student的时候，执行User.call，保证实例的对象有User的副本
150 |
151 | ### 寄生组合式继承
152 | **概念：** 使用call方法调用父类构造函数，继承父类的属性，通过设置中间函数，创建父类原型的副本，存放在子类的原型上，避免两次调用父类构造函数
153 | **缺点：** 暂无，可能就稍微麻烦一点吧
154 | ```js
155 | function User (name, sex) {
156 | this.name = name
157 | this.sex = sex
158 | this.sayHello = function () {
159 | console.log(`Hello ${this.name}`)
160 | }
161 | }
162 | User.prototype.test = function () {
163 | console.log('this is User test')
164 | }
165 |
166 | User.prototype.saySex = function () {
167 | console.log(`my Sex is ${this.sex}`)
168 | }
169 |
170 | function warp (Child, Parent) {
171 | const prototype = Object.create(Parent.prototype)
172 | prototype.constructor = Child
173 | console.log(Parent.prototype)
174 | console.log(Object.create(Parent.prototype))
175 | console.log(prototype)
176 | Child.prototype = prototype // 这里的目的是为了拿到原型属性，以及定义constructor指向自身
177 | }
178 |
179 | function Student (name, sex, age) {
180 | User.call(this, name, sex) // 这里初始化构造函数属性继承与User
181 | this.age = age
182 | }
183 |
184 | Student.prototype.sayAge = function () {
185 | console.log(`${name}的年龄是：${this.age}`)
186 | }
187 |
188 | warp(Student, User)
189 | const v1 = new Student('dw', '男', 22)
190 | const v2 = new Student('zg', '女', 12)
191 | ```
192 | 寄生组合式继承是组合式继承的简化版本
193 |
--------------------------------------------------------------------------------
/posts/【js高级程序】DOM扩展.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 【js高级程序】DOM扩展
3 | date: 2020-11-20 08:02:52
4 | categories: javascript
5 | tags: [js]
6 | ---
7 |
8 | 红宝书学习记录
9 |
10 | ### *原文整理摘抄自 javascript 高级程序开发(第4版) 第15章*
11 |
12 | ### DOM 扩展
13 |
14 | #### Selectors API
15 | ##### querySelector()
16 | querySelector()方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配 项则返回 null。
17 | ```js
18 | document.querySelector("body");
19 | document.querySelector("#myDiv");
20 | ```
21 |
22 | ##### querySelectorAll()
23 | 这个方法返回的是一个 NodeList 的静态实例， querySelector的集合
24 |
25 | ##### matches()
26 | matches()方法（在规范草案中称为 matchesSelector()）接收一个 CSS 选择符参数，如果元素 匹配则该选择符返回 true，否则返回 false。
27 | ```js
28 | if (document.body.matches("body.page1")) {
29 | // true
30 | }
31 | ```
32 |
33 | #### 元素遍历
34 | 背景: IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会。这样就导致了 childNodes 和 firstChild 等属性上的差异。为了弥补这个差异，同时不影响 DOM 规范，W3C 通过新的 Element Traversal 规范定义了一组新属性。
35 | - `childElementCount` 返回子元素数量（不包含文本节点和注释）
36 | - `firstElementChild` 指向第一个 Element 类型的子元素（Element 版 firstChild）
37 | - `lastElementChild` 指向最后一个 Element 类型的子元素（Element 版 lastChild）；
38 | - `previousElementSibling` 指向前一个Element类型的同胞元素（ Element 版 previousSibling）；
39 | - `nextElementSibling` 指向后一个 Element 类型的同胞元素（Element 版 nextSibling）。
40 |
41 | #### HTML5
42 | ##### CSS 类扩展
43 | ###### getElementsByClassName
44 | getElementsByClassName()是 HTML5 新增的最受欢迎的一个方法，暴露在 document 对象和 所有 HTML 元素上。
45 |
46 | ###### classList属性
47 | 要操作类名，可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串， 所以每次操作之后都需要重新设置这个值才能生效，即使只改动了部分字符串也一样。
48 |
49 | 新增方法:
50 | - `add(value)` 向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做。
51 | - `contains(value)` 返回布尔值，表示给定的 value 是否存在。
52 | - `remove(value)` 从类名列表中删除指定的字符串值 value。
53 | - `toggle(value)` 如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。
54 |
55 | ```js
56 | // 删除"disabled"类
57 | div.classList.remove("disabled");
58 |
59 | // 添加"current"类
60 | div.classList.add("current");
61 |
62 | // 切换
63 | div.classList.add("on");
64 | ```
65 |
66 | ##### 焦点管理
67 | ###### document.activeElement
68 | HTML5 增加了辅助 DOM 焦点管理的功能。首先是 `document.activeElement`，始终包含当前拥有焦点的 DOM 元素。
69 | > 默认情况下，document.activeElement 在页面刚加载完之后会设置为 document.body。而在 页面完全加载之前，document.activeElement 的值为 null。
70 |
71 | ###### document.hasFocus()
72 | 确定文档是否获得了焦点，就可以帮助确定用户是否在操作页面。
73 |
74 | ##### HTMLDocument 扩展
75 | ###### readyState 属性
76 | HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值
77 | - `loading`，表示文档正在加载；
78 | - `complete`，表示文档加载完成。
79 |
80 | ###### compatMode 属性
81 | 自从 IE6 提供了以标准或混杂模式渲染页面的能力之后，检测页面渲染模式成为一个必要的需求。 IE 为 document 添加了 compatMode 属性，这个属性唯一的任务是指示浏览器当前处于什么渲染模式。
82 | - 标准模式下 document.compatMode 的值是"CSS1Compat"
83 | - 混杂模式下， document.compatMode 的值是"BackCompat"
84 | ```js
85 | if (document.compatMode == "CSS1Compat"){
86 | console.log("Standards mode");
87 | } else {
88 | console.log("Quirks mode");
89 | }
90 | ```
91 |
92 | ###### head 属性
93 | 作为对 document.body（指向文档的 `body` 元素）的补充，HTML5 增加了 `document.head` 属性，指向文档的 `head` 元素。
94 |
95 | ##### 字符集属性
96 | HTML5 增加了几个与文档字符集有关的新属性。其中，characterSet 属性表示文档实际使用的 字符集，也可以用来指定新字符集。
97 | ```js
98 | console.log(document.characterSet); // "UTF-16"
99 | document.characterSet = "UTF-8";
100 | ```
101 |
102 | ##### 自定义数据属性
103 | HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，这些属性既不包含 与渲染有关的信息，也不包含元素的语义信息。
104 | ```html
105 |
106 | ```
107 | 定义了自定义数据属性后， 可以通过元素的 dataset 属性来访问。 dataset 属性是一个 DOMStringMap 的实例，包含一组键/值对映射。
108 | ```js
109 | let div = document.getElementById("myDiv");
110 | // 取得自定义数据属性的值
111 | let appId = div.dataset.appId; // 12345
112 | div.dataset.appId = 23456
113 | console.log(div.dataset.appId) // 23456
114 | ```
115 |
116 | ##### 插入标记
117 | ###### innerHTML 属性
118 | - 在读取 innerHTML 属性时，会返回元素所有后代的 HTML 字符串，包括元素、注释和文本节点。
119 | - 而在写入 innerHTML 时，则会根据提供的字符串值以新的 DOM 子树替代元素中原来包含的所有节点。
120 |
121 | ###### outerHTML 属性
122 | - 读取 outerHTML 属性时， 会返回调用它的元素（及所有后代元素）的 HTML 字符串。
123 | - 在写入 outerHTML 属性时，调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。
124 |
125 | ###### insertAdjacentHTML()与 insertAdjacentText()
126 | 关于插入标签的最后两个新增方法是 insertAdjacentHTML()和 insertAdjacentText()。
127 | 第一个参数 必须是下列值中的一个：
128 | - `beforebegin` 插入当前元素前面，作为前一个同胞节点；
129 | - `afterbegin` 插入当前元素内部，作为新的子节点或放在第一个子节点前面；
130 | - `beforeend` 插入当前元素内部，作为新的子节点或放在最后一个子节点后面；
131 | - `afterend` 插入当前元素后面，作为下一个同胞节点。
132 |
133 | ```html
134 |
135 |
136 |
137 | foo
138 |
139 |
140 |
141 | ```
142 | > 在使用 innerHTML、 outerHTML 和 insertAdjacentHTML()之前，最好手动删除要被替换的元素上关联的事件处理程序和 JavaScript 对象。
143 |
144 | ##### scrollIntoView
145 | DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。HTML5 选择了标准化 scrollIntoView()。
146 | - `alignToTop`: bool值
147 | - true： 窗口滚动后元素的顶部与视口顶部对齐。
148 | - false： 窗口滚动后元素的底部与视口底部对齐。
149 | - `scrollIntoViewOptions` 是一个选项对象。
150 | - `behavior` 定义过渡动画，可取的值为"smooth"和"auto"，默认为"auto"。
151 | - `block` 定义垂直方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默 认为 "start"。
152 | - `inline` 定义水平方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默 认为 "nearest"。
153 |
154 | #### 专有扩展
155 | ##### children 属性
156 | ```js
157 | let childCount = element.children.length;
158 | let firstChild = element.children[0];
159 | ```
160 |
161 | ##### contains()方法
162 | contains()方法应该在要搜索的祖先元素上调 用，参数是待确定的目标节点。
163 | ```js
164 | console.log(document.documentElement.contains(document.body);
165 | ```
166 |
167 | ##### 插入标记
168 | ###### innerText 属性
169 | - innerText 属性对应元素中包含的所有文本内容，无论文本在子树中哪个层级。在用于读取值时， innerText 会按照深度优先的顺序将子树中所有文本节点的值拼接起来。
170 | - 在用于写入值时，innerText 会移除元素的所有后代并插入一个包含该值的文本节点。
171 |
172 | ###### outerText属性
173 | - outerText 与 innerText 是类似的， 只不过作用范围包含调用它的节点。
174 | - 要读取文本值时， outerText 与 innerText 实际上会返回同样的内容。
175 |
--------------------------------------------------------------------------------
/posts/javascript异步编程.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: javascript异步编程
3 | date: 2019-03-17 19:37:11
4 | categories: javascript
5 | tags: js
6 | ---
7 |
8 | ### 背景
9 | js是单线程语言，浏览器只分配给js一个主线程，用来执行任务，异步编程是JavaScript的一种编程方式，用于在不影响主程序去执行其他的操作，如网络请求，文件读写，等等，如果这些操作都是同步执行的话，那么对于用户来说就是一个灾难，毕竟在执行其他操作的时候，后续的代码没法同步执行
10 |
11 | ### 异步编程的方式
12 | 使用不同方式实现 ·红绿灯· 的操作模式
13 | - 执行红灯操作3秒
14 | - 之后执行绿灯操作2秒
15 | - 最后执行黄灯1秒
16 | - // 程序结束 //
17 |
18 | #### 1. callback 回调
19 | ```js
20 | function red (ms) {
21 | console.log('----- red start -----')
22 | setTimeout(function () {
23 | green(2000)
24 | }, ms)
25 | }
26 |
27 | function green (ms) {
28 | console.log('----- green start -----')
29 | setTimeout(function () {
30 | yellow(1000)
31 | }, ms)
32 | }
33 |
34 | function yellow (ms) {
35 | console.log('----- yellow start -----')
36 | setTimeout(function () {
37 | console.log('----- ALL DOWN -----')
38 | }, ms)
39 | }
40 |
41 | red(3000)
42 | ```
43 | 定义三种方法，第一个方法执行结束执行第二个，再执行第三个，所有的后续操作都是在setTimeout方法的回调中实现的
44 |
45 | 但是如果我要放在我本身方法的回调里呢？
46 | ```js
47 | function red (ms, callback) {
48 | console.log('----- red start -----')
49 | setTimeout(function () {
50 | callback && callback()
51 | }, ms)
52 | }
53 |
54 | function green (ms, callback) {
55 | console.log('----- green start -----')
56 | setTimeout(function () {
57 | callback && callback()
58 | }, ms)
59 | }
60 |
61 | function yellow (ms, callback) {
62 | console.log('----- yellow start -----')
63 | setTimeout(function () {
64 | callback()
65 | }, ms)
66 | }
67 |
68 | red(3000, function () {
69 | green(2000, function () {
70 | yellow(1000, function () {
71 | console.log('----- ALL DOWN -----')
72 | })
73 | })
74 | })
75 | ```
76 | 这种方式表现出回调方法的特性，层层嵌套，然而这也会存在我们都知道的问题，回调地狱
77 |
78 | #### 2. 事件监听
79 | #### 3. 发布/订阅
80 | 简单的发布订阅者模式
81 | ```js
82 | function TestObserver () {
83 | this.handler = {}
84 | }
85 |
86 | TestObserver.prototype.on = function (eventType, handler) {
87 | const list = Object.keys(this.handler)
88 | if (!list.includes(eventType)) {
89 | this.handler[eventType] = []
90 | }
91 | this.handler[eventType].push(handler)
92 | return this
93 | }
94 |
95 | TestObserver.prototype.off = function (eventType, handler) {
96 | const offType = this.handler[eventType]
97 | if (offType) {
98 | for (let i = offType.length; i >= 0; i--) {
99 | if (offType[i] === handler) {
100 | offType.splice(i, 1)
101 | }
102 | }
103 | }
104 | return this
105 | }
106 |
107 | TestObserver.prototype.emit = function (eventType) {
108 | const handlerArgs = Array.prototype.slice.call(arguments, 1)
109 | const handlerType = this.handler[eventType]
110 | handlerType.forEach(item => {
111 | item.apply(this, handlerArgs)
112 | })
113 | return this
114 | }
115 | ```
116 | 执行的时候如同第一个方式，代码量大，不以管理
117 | ```js
118 | const obs = new TestObserver()
119 | obs.on('red', function (ms) {
120 | console.log('----- red start -----')
121 | setTimeout(function () {
122 | obs.emit('green', 2000)
123 | }, ms)
124 | })
125 |
126 | obs.on('green', function (ms) {
127 | console.log('----- green start -----')
128 | setTimeout(function () {
129 | obs.emit('yellow', 1000)
130 | }, ms)
131 | })
132 |
133 | obs.on('yellow', function (ms) {
134 | console.log('----- yellow start -----')
135 | setTimeout(function () {
136 | console.log('----- ALL DOWN -----')
137 | }, ms)
138 | })
139 |
140 | obs.emit('red', 3000)
141 | ```
142 |
143 | #### 4. 协程
144 | Thunk + Generator
145 |
146 | ```js
147 | function *toDo () {
148 | yield console.log('----- red start -----')
149 | yield console.log('----- green start -----')
150 | yield console.log('----- yellow start -----')
151 | yield console.log('----- ALL DOWN -----')
152 | }
153 |
154 | function Thunk (fn) {
155 | return function () {
156 | const args = Array.prototype.slice.call(arguments)
157 | return function (callback) {
158 | args.push(callback)
159 | return fn.apply(this, args)
160 | }
161 | }
162 | }
163 |
164 | const timer = function (time, callback) {
165 | setTimeout(function () {
166 | callback && callback ()
167 | }, time)
168 | }
169 |
170 | // const light = toDo()
171 | // const timeout = Thunk(timer)
172 | // light.next()
173 | // timeout(3000)(function () {
174 | // light.next()
175 | // })
176 | // timeout(3000)(function () {
177 | // light.next()
178 | // })
179 | // timeout(3000)(function () {
180 | // light.next()
181 | // })
182 | ```
183 |
184 | #### 5. Promise
185 | es6的到来Promise是最常用的一个新功能
186 | ```js
187 | const red = function (ms) {
188 | console.log('----- red start -----')
189 | return new Promise (resolve => {
190 | setTimeout(() => {
191 | resolve()
192 | }, ms)
193 | })
194 | }
195 |
196 | const green = function (ms) {
197 | console.log('----- green start -----')
198 | return new Promise (resolve => {
199 | setTimeout(() => {
200 | resolve()
201 | }, ms)
202 | })
203 | }
204 |
205 | const yellow = function (ms) {
206 | console.log('----- yellow start -----')
207 | return new Promise (resolve => {
208 | setTimeout(() => {
209 | resolve()
210 | }, ms)
211 | })
212 | }
213 |
214 | red(3000)
215 | .then(() => green(2000))
216 | .then(() => yellow(1000))
217 | .then(() => {
218 | console.log('----- ALL DOWN -----')
219 | })
220 | ```
221 | 看起来舒服多了
222 |
223 | #### 6. async/await
224 | es7语法
225 | 三个灯的方法定义和上面一样，返回一个promise即可
226 | ```js
227 | async function toDo () {
228 | await red(3000)
229 | await green(2000)
230 | await yellow(1000)
231 | console.log('----- ALL DOWN -----')
232 | }
233 | toDo()
234 | ```
235 |
236 | ### 总结
237 | 从callback 到 事件/发布订阅 到 协程 到 Promise 再到 async/await
238 | 方法越来越简单
--------------------------------------------------------------------------------
/posts/javascript需要注意的this指向问题.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: javascript需要注意的this指向问题
3 | date: 2019-10-15 17:13:35
4 | categories: javascript
5 | tags: ["js"]
6 | ---
7 |
8 | this 指向是 JavaScript 常见的一个知识点，也是平时经常遇到的问题，包括面试时候也经常会问到
9 |
10 | ### 全局环境中
11 |
12 | 在全局环境中，this 指向 windows
13 |
14 | ```ts
15 | console.log(this); // window
16 | var a = 1;
17 | console.log(window.a); // 1
18 | this.b = 3;
19 | console.log(b); // 3
20 | console.log(window.b); // 3
21 | ```
22 |
23 | ### 对象中方法
24 |
25 | 此时方法运行的时候绑定的是 obj 对象，this 指向 obj
26 |
27 | ```ts
28 | function fn() {
29 | console.log(this.a);
30 | }
31 |
32 | var obj = {
33 | a: 1,
34 | b: fn,
35 | };
36 |
37 | obj.b(); // 1
38 | ```
39 |
40 | 虽然 foo 是 obj 对象的方法，但是在函数 foo 执行的时候，this 是在函数执行的时候绑定的，也就是 foo 函数的作用域的对象也就是 window
41 |
42 | ```ts
43 | var a = "window.a";
44 | function fn() {
45 | console.log(this.a);
46 | }
47 |
48 | var obj = {
49 | a: 1,
50 | b: fn,
51 | c: () => {
52 | console.log(this.a);
53 | },
54 | };
55 | var foo = obj.b;
56 | obj.b(); // 1
57 | foo(); // window.a
58 | obj.c(); // window.a
59 | ```
60 |
61 | ### 构造函数中
62 |
63 | 构造函数中的 this 指向的是实例化构造函数返回的新的对象
64 |
65 | ```ts
66 | function Fn() {
67 | this.a = 1;
68 | }
69 | var foo = new Fn();
70 | foo.a; // 1
71 | ```
72 |
73 | ### call, apply 方式调用函数
74 |
75 | call, apply 可以修改调用函数的 this 指向
76 |
77 | ```ts
78 | function fn() {
79 | console.log(this);
80 | }
81 |
82 | fn.call("test"); // string对象 test
83 | fn.call(null); // window
84 | fn.call({
85 | a: 1,
86 | }); // { a: 1 }
87 | ```
88 |
89 | ### 定时器
90 |
91 | 定时器中的 this，指向的是 window
92 |
93 | ```ts
94 | var a = "window.a";
95 | setTimeout(function () {
96 | console.log(this); // window
97 | });
98 |
99 | const obj = {
100 | a: 1,
101 | b: function () {
102 | setTimeout(function () {
103 | console.log(this.a);
104 | }, 400);
105 | },
106 | };
107 | obj.b(); // window.a
108 | ```
109 |
110 | ### 元素绑定事件
111 |
112 | 回调函数执行的 this 指向的是当前的元素
113 |
114 | ```ts
115 | const ele = document.getElementById('btn')
116 | ele.onclick = funciton () {
117 | console.log(this) // ele 元素
118 | }
119 | ele.addEventListener('click', function () {
120 | console.log(this)} // ele 元素
121 | )
122 | ```
123 |
124 | ### 函数调用的时候绑定 bind
125 |
126 | ```ts
127 | const ele = document.getElementById('btn')
128 | ele.onclick = funciton () {
129 | console.log(this) // window
130 | }.bind(window)
131 | ```
132 |
133 | 以上是 this 指向的出现场景，下面再做一些 this 相关的面试题巩固了解一下
134 |
135 | #### 题目一
136 |
137 | ```ts
138 | this.x = 9; // this refers to global "window" object here in the browser
139 | var module = {
140 | x: 81,
141 | getX: function () {
142 | return this.x;
143 | },
144 | };
145 |
146 | module.getX(); // 81
147 |
148 | var retrieveX = module.getX;
149 | retrieveX(); // 9
150 | ```
151 |
152 | 因为 this 的指向是在函数执行的时候绑定的，而非函数创建时绑定，所以 retrieveX() === this.retrieveX() === 9, module.getX() === 81
153 |
154 | #### 题目二
155 |
156 | ```ts
157 | function foo() {
158 | console.log(this.a);
159 | }
160 | var a = 2;
161 | var b = { a: "b.a", foo: foo };
162 | var c = { a: "c.a" };
163 |
164 | foo(); // 2
165 | b.foo(); // 'b.a'
166 | console.log(b.foo);
167 | (c.foo = b.foo)(); // 2
168 | c.foo(); // 'c.a'
169 | ```
170 |
171 | 至于为什么`(c.foo = b.foo)() === 2`,我们来解释一下
172 | (c.foo = b.foo)()我们可以这么写
173 |
174 | ```ts
175 | function foo() {
176 | console.log(this.a);
177 | }
178 | var a = 2;
179 | var b = { a: "b.a", foo: foo };
180 | var c = { a: "c.a" };
181 |
182 | function fn() {
183 | c.foo = b.foo;
184 | return c.foo;
185 | }
186 | fn()(); // 2
187 | ```
188 |
189 | 而 fn 执行的方法指向的 this 是 window，结果也就是 2 了
190 |
191 | #### 题目三
192 |
193 | ```ts
194 | var len = 10;
195 | function fn() {
196 | console.log(this.len);
197 | }
198 |
199 | var obj = {
200 | len: 5,
201 | getLen: function (fn) {
202 | console.log(this.len);
203 | fn();
204 | arguments[0]();
205 | },
206 | };
207 | obj.getLen(fn, 1);
208 | // 5
209 | // 10
210 | ```
211 |
212 | this 永远指向调用他的对象，没错 `getLen`方法里的 this 指向的是 obj 对象，所以拿到的第一个打印信息是 5，但是在该方法内部执行的 fn 有单独的 this 绑定，也就是 window，所以第二个结果为 10
213 |
214 | #### 题目四
215 |
216 | ```ts
217 | var foo = 1;
218 | function fn() {
219 | this.foo = 2;
220 | console.log(foo);
221 | }
222 | fn(); // 2
223 | ```
224 |
225 | fn 执行方法 this 指向的 window，导致 foo 被赋值成 2，打印的就是 2
226 |
227 | ```ts
228 | var foo = 1;
229 | function fn() {
230 | this.foo = 2;
231 | console.log(foo);
232 | }
233 | new fn(); // 1
234 | new fn().foo; // 2 实例化的this指向的不是window 而是 实例化生成的新对象
235 | ```
236 |
237 | #### 题目五
238 |
239 | ```ts
240 | var a = {
241 | name: "zh",
242 | sayName: function () {
243 | console.log(`hello, ${this.name}`);
244 | },
245 | };
246 | var name = "ls";
247 | function sayName() {
248 | var s = a.sayName;
249 | s(); // 'hello, ls'
250 | a.sayName(); // 'hello, zh'
251 | a.sayName(); // 'hello, zh'
252 | (b = a.sayName)(); // 'hello, ls'
253 | }
254 |
255 | sayName();
256 | ```
257 |
258 | - 分析
259 | - `s()` this 指向的是全局对象也就是 window.name 也就是 'hello, ls'
260 | - `a.sayName()` 此时执行的是 a 对象下的方法，a.sayName 绑定的对象是 a，a.name 为'zh'，因此结果为'hello, zh'
261 | - `(a.sayName)()` 等价于 a.sayName() 结果和上面一样为'hello, zh'
262 | - `(b = a.sayName)()` 赋值操作再执行 b 方法等价于第一个结果为 'hello, ls'
263 |
264 | #### 题目六
265 |
266 | ```ts
267 | var name = "zh";
268 | var obj = {
269 | name: "ls",
270 | sayName: function () {
271 | console.log(`this.name: ${this.name}`);
272 | },
273 | callback: function () {
274 | var _this = this;
275 | return function () {
276 | var sayName = _this.sayName;
277 | _this.sayName(); // this.name: ls
278 | sayName(); // this.name: zh
279 | };
280 | },
281 | };
282 | obj.callback()();
283 | ```
284 |
285 | - 分析
286 | - `obj.callback()` 返回一个函数，此时已经绑定了\_this 的指向，为`obj`对象，然后再执行这个函数
287 | - `_this.sayName()` 就相当于`obj.sayName()`，所以执行的结果为 'this.name: ls'
288 | - `sayName()` 在执行的时候当前函数的时候 this 的指向为 window，此时的 sayName 方法中的 this.name 相当于 window.name 也就是'zh'，最后的结果为'this.name: zh'
289 |
--------------------------------------------------------------------------------
/posts/【js高级程序】模块.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 【js高级程序】模块
3 | date: 2020-10-29 08:30:28
4 | categories: javascript
5 | tags: [js]
6 | ---
7 |
8 | 红宝书学习记录
9 |
10 | ### *原文整理摘抄自 javascript 高级程序开发(第4版) 第26章*
11 |
12 | JavaScript 是异步加载的解释型语言，所以得到广泛应用的各种模块实现也表现出不同的形态。 这些不同的形态决定了不同的结果，但最终它们都实现了经典的模块模式。
13 |
14 |
15 | ### ES6 之前的模块加载器
16 | 在 ES6 原生支持模块之前，使用模块的 JavaScript 代码本质上是希望使用默认没有的语言特性。因 此， 必须按照符合某种规范的模块语法来编写代码， 另外还需要单独的模块工具把这些模块语法与 JavaScript 运行时连接起来。这里的模块语法和连接方式有不同的表现形式，通常需要在浏览器中额外 加载库或者在构建时完成预处理。
17 |
18 | #### CommonJS
19 | CommonJS 规范概述了**同步声明依赖的模块定义**。这个规范主要用于在服务器端实现模块化代码组织，但也可用于定义在浏览器中使用的模块依赖。CommonJS 模块语法不能在浏览器中直接运行。
20 |
21 | > 一般认为，Node.js的模块系统使用了 CommonJS规范，实际上并不完全正确。Node.js使用了轻微修改版本的 CommonJS，**因为 Node.js 主要在服务器环境下使用，所以不需要考虑网络延迟问题。**
22 |
23 | CommonJS 模块定义需要使用 require()指定依赖，而使用 exports 对象定义自己的公共 API
24 | ```js
25 | // moduleA
26 |
27 | var moduleB = require('./moduleB');
28 |
29 | module.exports = {
30 | stuff: moduleB.doStuff();
31 | };
32 | ```
33 | `moduleA` 通过使用模块定义的相对路径来指定自己对 `moduleB` 的依赖。什么是“模块定义”，以及 如何将字符串解析为模块，完全取决于模块系统的实现。
34 |
35 | 请求模块会加载相应模块， 而把模块赋值给变量也非常常见， 但赋值给变量不是必需的。 调用 require()意味着模块会原封不动地加载进来：
36 | ```js
37 | console.log('moduleA');
38 | require('./moduleA'); // "moduleA"
39 | ```
40 |
41 | 无论一个模块在 require()中被引用多少次，**模块永远是单例**。在下面的例子中，moduleA 只会 被打印一次。这是因为无论请求多少次，moduleA 只会被加载一次。
42 | ```js
43 | console.log('moduleA');
44 | var a1 = require('./moduleA');
45 | var a2 = require('./moduleA');
46 |
47 | console.log(a1 === a2); // true
48 | ```
49 | **在 CommonJS 中，模块加载是模块系统执行的同步操作**因此 require()可以像下面这样以编程 方式嵌入在模块中：
50 | ```js
51 | if (loadCondition) {
52 | require('./moduleA');
53 | }
54 | ```
55 |
56 | #### 异步模块定义（AMD） ####
57 | CommonJS 以服务器端为目标环境，能够一次性把所有模块都加载到内存，而异步模块定义（AMD， Asynchronous Module Definition）的模块定义系统则以浏览器为目标执行环境，这需要考虑网络延迟的 问题。
58 | AMD 的一般策略是让模块声明自己的依赖，而运行在浏览器中的模块系统会按需获取依赖，并 在依赖加载完成后立即执行依赖它们的模块。
59 | **AMD模块实现的核心是用函数包装模块定义。**
60 | ```js
61 | // ID 为'moduleA'的模块定义。moduleA 依赖 moduleB，
62 | // moduleB 会异步加载
63 | define('moduleA', ['moduleB'], function(moduleB) {
64 | return {
65 | stuff: moduleB.doStuff();
66 | }
67 | }
68 | ```
69 |
70 | #### 通用模块定义 （UMD）
71 | 为了统一 CommonJS 和 AMD 生态系统，通用模块定义（UMD，Universal Module Definition）规范 应运而生。
72 |
73 | 本质上，UMD 定义的模块会在启动时 检测要使用哪个模块系统，然后进行适当配置，并把所有逻辑包装在一个立即调用的函数表达式（IIFE） 中。
74 |
75 | ```js
76 | (function (root, factory) {
77 | if (typeof define === 'function' && define.amd) {
78 | // AMD。注册为匿名模块
79 | define(['moduleB'], factory);
80 | } else if (typeof module === 'object' && module.exports) {
81 | // Node。不支持严格 CommonJS
82 | // 但可以在 Node 这样支持 module.exports 的
83 | // 类 CommonJS 环境下使用
84 | module.exports = factory(require(' moduleB '));
85 | } else {
86 | // 浏览器全局上下文（root 是 window）
87 | root.returnExports = factory(root. moduleB);
88 | }
89 | }(this, function(moduleB) {
90 | // 以某种方式使用 moduleB
91 |
92 | // 将返回值作为模块的导出
93 | // 这个例子返回了一个对象
94 | // 但是模块也可以返回函数作为导出值
95 | return {};
96 | })
97 | ```
98 |
99 | ### 使用 ES6 模块
100 | #### 模块标签及定义
101 | ```html
102 |
103 | ```
104 |
105 | #### 执行顺序
106 | ```html
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 | ```
116 | > 与传统脚本不同，所有模块都会像<script defer>加载的脚本一样按顺序执行。解析到<script type="module">标签后会立即下载模块文件，但执行会延迟到文档解析完成。无论对嵌入的模块代码， 还是引入的外部模块文件，都是这样。
117 | > <script type="module">在页面中出现的顺序就是它们执行 的顺序。与<script defer>一样，修改模块标签的位置，无论是在<head>还是在<body>中，只会影 响文件什么时候加载，而不会影响模块什么时候加载。
118 |
119 | #### 模块加载
120 | ECMAScript 6 模块的独特之处在于，既可以通过浏览器原生加载，也可以与第三方加载器和构建工 具一起加载。有些浏览器还没有原生支持 ES6 模块，因此可能还需要第三方工具。事实上，很多时候使 用第三方工具可能会更方便。
121 |
122 | - 顶级模块加载整个依赖图，且是异步完成
123 | - 浏览器 会解析入口模块，确定依赖，并发送对依赖模块的请求
124 | - 文件通过网络返回后，浏览器就会解析它 们的内容，确定它们的依赖
125 | - 如果这些二级依赖还没有加载，则会发送更多请求。
126 |
127 | 这个异步递归加载过程会持续到整个应用程序的依赖图都解析完成。解析完依赖图，应用程序就可以正式加载模块了。
128 |
129 | #### 模块行为
130 | ECMAScript 6 模块借用了 CommonJS 和 AMD 的很多优秀特性。下面简单列举一些。
131 | - 模块代码只在加载后执行。
132 | - 模块只能加载一次。
133 | - 模块是单例。
134 | - 模块可以定义公共接口，其他模块可以基于这个公共接口观察和交互。
135 | - 模块可以请求加载其他模块。
136 | - 支持循环依赖。
137 |
138 | ES6 模块系统也增加了一些新行为。
139 | - ES6 模块默认在严格模式下执行。
140 | - ES6 模块不共享全局命名空间。
141 | - 模块顶级 this 的值是 undefined（常规脚本中是 window）。
142 | - 模块中的 var 声明不会添加到 window 对象。
143 | - ES6 模块是异步加载和执行的。
144 | > ES6根本不会关心是否发生了"循环加载"，只是生成一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
145 |
146 | #### 模块导出
147 | ES6 模块支持两种导出：
148 | - 命名导出
149 | ```js
150 | const foo = 'foo';
151 | export { foo };
152 | export const bar = 'bar';
153 | export { foo as myFoo };
154 | ```
155 |
156 | - 默认导出。
157 | ```js
158 | const foo = 'foo';
159 | const bar = 'bar';
160 | export default foo;
161 | export { foo as default };
162 | export { foo as default, bar };
163 | ```
164 | > ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。在import 代码引入之前，是不会执行js代码块的
165 | > export 关键字用于声明一个值为命名导出。导出语句必须在模块顶级，不能嵌套在某个块中
166 |
167 | #### 模块导入
168 | 模块可以通过使用 import 关键字使用其他模块导出的值。与 export 类似，import 必须出现在 模块的顶级
169 | ```js
170 | import { foo } from './fooModule.js';
171 | import foo from './fooModule.js';
172 | ```
173 | > js 代码被 JavaScript 引擎编译时 foo 只是作为变量存储了 const foo = ...., fooModule.js 中导出的方法引用，当执行foo方法的时候，就会找到引用方法的代码并执行
174 |
175 | #### 模块转移导出
176 | 模块导入的值可以直接通过管道转移到导出。此时，也可以将默认导出转换为命名导出，或者相反。 如果想把一个模块的所有命名导出集中在一块，可以像下面这样在 bar.js 中使用*导出：
177 | ```js
178 | export * from './foo.js';
179 | export { foo, bar as myBar } from './foo.js';
180 | export { default } from './foo.js';
181 | export { foo as default } from './foo.js';
182 | ```
183 |
184 | #### 工作者模块
185 | ECMAScript 6 模块与 Worker 实例完全兼容。在实例化时，可以给工作者传入一个指向模块文件的 路径，与传入常规脚本文件一样。Worker 构造函数接收第二个参数，用于说明传入的是模块文件。
186 | ```js
187 | // 第二个参数默认为{ type: 'classic' }
188 | const scriptWorker = new Worker('scriptWorker.js');
189 |
190 | const moduleWorker = new Worker('moduleWorker.js', { type: 'module' });
191 | ```
192 |
193 | #### 向后兼容
194 | ```html
195 | // 支持模块的浏览器会执行这段脚本
196 | // 不支持模块的浏览器不会执行这段脚本
197 |
198 |
199 | // 支持模块的浏览器不会执行这段脚本 //
200 | 不支持模块的浏览器会执行这段脚本
201 |
202 | ```
203 |
204 |
--------------------------------------------------------------------------------
/posts/js数据类型转换.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: js数据类型转换
3 | date: 2019-10-21 23:40:30
4 | categories: javascript
5 | tags: ['js']
6 | ---
7 |
8 | JavaScript 数据类型分为基本数据类型和引用数据类型
9 |
10 | ### 基本数据类型
11 | - `string`
12 | - `boolean`
13 | - `undefined`
14 | - `null`
15 | - `number`
16 | - `symbol` (es6新类型)
17 | - `bigint` (现在处在 ECMAScript 标准化过程中的 第三阶段)
18 |
19 | ### 引用数据类型
20 | - `function`
21 | - `object`
22 | - `array`
23 |
24 | ### 数据类型转换
25 | 以下是一张来自 `javacript权威指南`中的一张数据转换的图片
26 | 
27 |
28 | 我们需要知道数据类型转换有
29 | - 数字
30 | - Bool值
31 | - 字符串
32 |
33 | ### 值转为数字
34 | Number() 函数, Number函数会将里面的num值转化为number类型,如果无法转化为数字，就会成NaN
35 |
36 | #### 原始类型值
37 | ```ts
38 | // 字符串：如果不可以被解析为数值，
39 | Number('1as2') // NaN
40 | Number('1') // 1
41 |
42 | // 布尔值：true 转成 1，false 转成 0
43 | Number(true) // 1
44 | Number(false) // 0
45 |
46 | Number(null) // 0
47 | Number(undefined) // NaN
48 | ```
49 | 其他转换的方法 parseInt, parseFloat
50 | Number相对于parseInt更为严格(parseInt逐个解析字符，而Number函数整体转换字符串的类型。)比如
51 | ```ts
52 | Number('1as2') // NaN
53 | parseInt('1as2') // 1
54 | ```
55 | #### 对象
56 | 如果Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组。
57 | ```ts
58 | Number({}) // NaN
59 | Number({a: 1, b: 2}) // NaN
60 | Number([5]) // 5
61 | Number(['a']) // NaN
62 | Number(['1']) // 1
63 | ```
64 | Number的参数为对象的时候会走以下的类型转换
65 | - 此时会先调用对象自身的valueOf方法，如果返回的是原始值，则直接作为参数执行Number方法，然后break
66 | - 如果valueOf返回的还是对象的话，则调用对象的toString方法，如果返回原始值类型，则执行Number方法，然后break
67 | - 如果toSting返回的还是对象，则报错
68 |
69 | 看下面的例子
70 | ```ts
71 | const bar = { a : 1 }
72 | const foo = [1]
73 | const stra = ['a1']
74 |
75 | // 我们按上面步骤一步一步走
76 | bar.valueOf() // { a: 1 } 还是对象。所以需要走toString方法
77 | foo.valueOf() // [1] 同样是对象，也需要再走toString方法
78 | stra.valueOf() // ['a1'] 同上
79 |
80 | // valueOf执行之后如果还不是原始值开始走toString
81 | bar.toString() // '[object Object]' 是原始值，开始执行Number('[object Object]')
82 | foo.toString() // '1' 是原始值，开始执行Number('1')
83 | stra.toString() // 'a1' 是原始值，开始执行Number('a1')
84 |
85 | // 最后得到的结果分别为
86 | Number('[object Object]') // NaN
87 | Number('1') // 1
88 | Number('a1') // NaN
89 | ```
90 |
91 | ### 值转为字符
92 | String() 函数，将参数转换成原始的字符串，并返回转换后的值。
93 | #### 原始类型值
94 | ```ts
95 | String(1) // '1'
96 | String(null) // 'null'
97 | String(false) // 'false'
98 | String('1') // '1'
99 | String('undefined') // 'undefined'
100 | ```
101 | #### 对象
102 | String方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。
103 | ```ts
104 | String([]) // ''
105 | String([1, 2]) // '1, 2'
106 | String({}) // '[object Object]'
107 | ```
108 | String方法的转换规则，与Number方法基本相同，只是互换了valueOf方法和toString方法的执行顺序
109 | - 对象先调用自身的toString方法，如果返回的是原始类型值，直接作为参数执行String方法，然后break
110 | - 如果toString返回的不是原始类型则调用对象的valueOf，如果返回的是原始值，则执行String方法，然后break
111 | - 如果valueOf返回的还是对象，则报错
112 |
113 | 继续看例子
114 | ```ts
115 | const bar = { a : 1 }
116 | const foo = [1]
117 | const stra = ['a1']
118 |
119 | // 先执行对象的toString方法
120 | bar.toString() // '[object Object]' String('[object Object]')
121 | foo.toString() // '1' 是原始值，开始执行String('1')
122 | stra.toString() // 'a1' 是原始值，开始执行String('a1')
123 |
124 | // 直接执行结果了
125 | String('[object Object]') // '[object Object]'
126 | String('1') // '1'
127 | String('a1') // 'a1'
128 | ```
129 |
130 | 我们再来试试这个对象，看返回的结果是啥
131 | ```ts
132 | var obj = {
133 | valueOf: function () {
134 | return 'this is valueOf';
135 | },
136 | toString: function () {
137 | return {};
138 | }
139 | };
140 |
141 | String(obj) // "this is valueOf"
142 | ```
143 | 为啥？ obj.toString()被重写返回对象，所以会继续看obj.valueOf，返回的是`'this is valueOf'`，最后就相当于
144 | ```ts
145 | String(obj.valueOf())
146 | // 等同于
147 | String('this is valueOf') // 'this is valueOf'
148 | ```
149 |
150 | ### 值转为布尔值
151 | Boolean函数可以将任意类型转化成布尔值
152 | 以下5个值转化结果为false，其他的全部为true
153 | - undefined
154 | - null
155 | - ''(空字符串)
156 | - 0 (包括-0, +0)
157 | -NaN
158 |
159 | ```ts
160 | Boolean(undefined) // false
161 | Boolean(null) // false
162 | Boolean('') // false
163 | Boolean(0) // false
164 | Boolean(NaN) // false
165 | Boolean([]) // true
166 | Boolean({}) // true
167 | Boolean(1) // true
168 | ```
169 |
170 | ### 隐式类型转换
171 | 在某些情况下，即使我们不提供显示转换，Javascript也会进行自动类型转换，主要情况有：
172 | - 自动转换为布尔值
173 | - 自动转换为字符串
174 | - 自动转换为数值
175 |
176 | ### 自动转换为布尔值
177 | JavaScript遇到预期为布尔值的时候会将非布尔值自动转换成布尔值，系统会自定调用 Boolean 函数
178 | 除了以下五个值以外，其他的自动转为true
179 | - `undefined`
180 | - `null`
181 | - `-0 ， +0`
182 | - `NaN`
183 | - `''`
184 |
185 |
189 | ```ts
190 | !undefined // true
191 | !null // true
192 | !0 // true
193 | !NaN // true
194 | !'' // true
195 | ```
196 | 如果判断元素获取布尔返回值的话
197 | ```ts
198 | const a = '1'
199 | a ? true : false // true
200 | !!a // true
201 | ```
202 |
203 | ### 自动转换为字符串
204 | JavaScript 遇到预期为字符串的地方，会将非字符串的值自动转换为原始类型值在转为字符串
205 | ```ts
206 | '1' + 1 // '11'
207 | '1' + true // '1true'
208 | '1' + false // '1false'
209 | '1' + {} // '1[object Object]'
210 | '1' + [] // '1'
211 | '1' + function () {} // '1function () {}'
212 | '1' + undefined // '1undefined'
213 | '1' + null // '1null'
214 | ```
215 |
216 | ### 自动转换为数值
217 | JavaScript 遇到预期为数值的地方，会自动将参数转化成数值，系统内部会自动调用Number函数
218 | 除了加法运算符（+）有可能把运算子转为字符串，其他运算符都会把运算子自动转成数值。
219 | ```ts
220 | '5' - '2' // 3
221 | '5' * '2' // 10
222 | true - 1 // 0
223 | false - 1 // -1
224 | '1' - 1 // 0
225 | '5' * [] // 0
226 | false / '5' // 0
227 | 'abc' - 1 // NaN
228 | null + 1 // 1
229 | undefined + 1 // NaN
230 | ```
231 |
232 | ### 常见面试题
233 | #### Question 1
234 | ```ts
235 | [] == false // true
236 | ![] == false // true
237 | ```
238 | 第一个结果为`true` 原因是 [] 被转换成 '' 之后被转化成数值 0 返回true
239 | 第二个结果同样`true` 前边多了个!，直接被转成bool值取反，[]转bool为true，取反为false，所以结果也相等
240 |
241 | #### Qusetion 2
242 | ```ts
243 | [] + {} // '[object Object]'
244 | {} + [] // 0
245 | ```
246 | 第一个按照正常的js隐式转换逻辑[] 转换为''(空字符串)，{} 转换为 '[object Object]'， 结果为 '[object Object]'
247 | 第二个的{}被视为一个代码块，而不是一个javascript对象，所以相当于 +[]，将 []转化为数值，所以结果为 0
248 |
249 | 参考于：[阮一峰，JavaScript标准教程](http://javascript.ruanyifeng.com/grammar/conversion.html#toc0)
250 |
251 |
--------------------------------------------------------------------------------
/posts/Content-Security-Policy.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Content-Security-Policy
3 | date: 2020-10-14 00:00:57
4 | categories: web安全
5 | tags: [javascript, html]
6 | ---
7 |
8 | 基于 XSS 的解决方案，Content-Security-Policy（CSP 内容安全策略） 可以根本性的解决跨站脚本攻击，由开发者自己定义网页中的（script，style，iframe，font，img 等）资源请求的配置信息，可理解为资源请求的白名单配置
9 |
10 | CSP 的主要目标是减少和报告 XSS 攻击 ，XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。
11 |
12 | ### 设置方式
13 | - meta标签设置
14 | - 服务端配置 Content-Security-Policy
15 |
16 | ### meta 设置
17 | ```html
18 |
19 | ```
20 | 这里表示：当前页面只允许加载同域的script 脚本, 不允许加载object 嵌入地址，style样式的引入只允许 daiwei.site 域名下加载
21 |
22 | 如图
23 | 
24 | css 本地临时地址 http://localhost:1996/css/app-af63c014edc89c09025e.css 直接被视为具有安全隐患的资源地址从而会被拒绝，而 https://www.daiwei.site/web_next/_next/static/css/styles.33733be0.chunk.css 则可以正常加载
25 |
26 | 再看这两个iframe
27 | 
28 | 上面的加载失败（http://www.daiwei.site）
29 | 下面的加载成功 （http://www.daiwei.site）
30 | 原因就是 child-src 设置只允许 https 的协议访问
31 |
32 | 具体报错截图
33 | 
34 |
35 | 至于 script-src 'self' 表示 指向与要保护的文件所在的源，包括相同的 URL scheme 与端口号。必须有单引号。一些浏览器会特意排除 blob 与 filesystem 。需要设定这两种内容类型的站点可以在 Data 属性中进行设定。
36 |
37 | ### 服务端配置
38 | ```nginx
39 | add_header Content-Security-Policy "default-src 'self';";
40 | ```
41 | 这表示视，音频，图片，css，js，等必须是同域名且同协议且同端口号
42 | 此时我访问 https://www.daiwei.site; (忽略serviceworker 报错)
43 | 
44 | 引入google 的字体直接被拒绝，以及从二级域名引入的图片地址也会被拒绝，此时设置；
45 |
46 | ```nginx
47 | add_header Content-Security-Policy "default-src 'self' https://*.daiwei.site;
48 | img-src 'self' https://www.bing.com https://*.daiwei.site;
49 | script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.daiwei.site;
50 | font-src 'self' https://*.daiwei.site https://fonts.gstatic.com;
51 | style-src 'self' https://*.daiwei.site 'unsafe-inline' https://fonts.googleapis.com;";
52 | ```
53 | 配置之后
54 | 
55 | nginx_conf_result
56 |
57 | 资源请求头可以看到 `Content-Security-Policy` 的配置信息
58 | res_header_csp
59 | 
60 |
61 | ### 资源加载配置（具体可查看mdn详解）
62 | - [default-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/default-src): 指令可以为其他 CSP 拉取指令（fetch directives）提供备选项。对于以下列出的指令，假如不存在的话，那么用户代理会查找并应用 default-src 指令的值。
63 | - [child-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/child-src): 定义了Web worker的有效源以及使用诸如和元素加载的嵌套浏览上下文
64 | - frame
65 | - iframe
66 | - [connect-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src): 用于控制允许通过脚本接口加载的链接地址。其中受到影响的API如下:
67 | - a标签， ping
68 | - Fetch 请求
69 | - XMLHttpRequest
70 | - WebSocket
71 | - EventSource
72 | - [font-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/font-src): 指令定义了 @font-face 加载字体的有效源规则。
73 | - [frame-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src): 嵌套浏览上下文使用元素如加载指令指定有效来源 (child-src 也可使用)
74 | - frame
75 | - iframe
76 | - [img-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/img-src): 图片以及 favicons 加载指令指定有效来源
77 | - img
78 | - favicons
79 | - [manifest-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/manifest-src): HTTP指令指定可以将哪些清单应用于资源
80 | - [media-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/media-src): 用于加载媒体的有效源
81 | - video
82 | - audio
83 | - [object-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/object-src): 该HTTP指令指定的有效来源，和元素。
84 | - object
85 | - embed
86 | - applet
87 | - [script-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src): js执行脚本指定有效来源
88 | - script
89 | - [style-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/style-src): stylesheet样式有效来源
90 | - link stylesheet
91 | - [worker-src](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src): 指令指定的有效来源Worker，SharedWorker或ServiceWorker脚本
92 |
93 | ### 资源配置选项值
94 | ##### 'self'
95 | 指提供受保护文档的来源，包括相同的URL方案和端口号。您必须包括单引号。一些浏览器特别排除blob和filesystem从源代码指令。需要允许这些内容类型的站点可以使用Data属性指定它们。
96 |
97 | ##### 'unsafe-eval'
98 | 允许使用eval()和类似的方法从字符串创建代码。您必须包括单引号。
99 |
100 | ##### 'unsafe-hashes'
101 | 允许启用特定的内联事件处理程序。如果您只需要允许内联事件处理程序而不是内联 `script` 元素或javascript:URL，则这是比使用unsafe-inline表达式更安全的方法。
102 |
103 | ##### 'unsafe-inline'
104 | 允许使用内联资源，例如内联 `script` 元素，javascript:URL，内联事件处理程序和内联 `style` 元素。单引号是必需的。
105 |
106 | ##### 'none'
107 | 指空集；也就是说，没有URL匹配。单引号是必需的。
108 |
109 | ##### 'nonce- <base64-value>'
110 | 使用加密随机数（使用一次的数字）的特定内联脚本的允许列表。服务器每次发送策略时都必须生成一个唯一的随机数值。提供难以猜测的随机数至关重要，因为绕开资源策略是微不足道的。有关示例，请参见不安全的内联脚本。指定随机数会使现代浏览器忽略'unsafe-inline'，但仍可以为没有随机数支持的旧版浏览器设置该随机数。
111 |
112 | ##### '<hash-algorithm>-<base64-value>'
113 | 脚本或样式的sha256，sha384或sha512哈希。此源的使用由两部分组成，并用破折号隔开：用于创建哈希的加密算法和脚本或样式的base64编码哈希。生成哈希值时，请勿包含 `script` 或 `style` 标记，并注意大小写和空格很重要，包括前导或尾随空格。有关示例，请参见不安全的内联脚本。在CSP 2.0中，这仅适用于内联脚本。script-src对于外部脚本，CSP 3.0允许它。
114 | ...
115 |
116 | ### 注意的点
117 | - 多个值也可以并列，用空格分隔。
118 | - 如果同一个限制选项使用多次，只有第一次会生效。
119 | - `script-src` 和 `object-src` 是必设的，除非设置了 `default-src`。因为攻击者只要能注入脚本，其他限制都可以规避。而object-src必设是因为 Flash 里面可以执行外部脚本。
120 | - `script-src` 不能使用 `unsafe-inline` 关键字（除非伴随一个nonce值），也不能允许设置data:URL。
121 | ```html
122 | 
123 |
124 | ```
125 | - 特别注意 JSONP 的回调函数。
126 | ```html
127 |
128 | ```
129 |
130 | ### 参考于
131 |
132 | [Locking Down Your Website Scripts with CSP, Hashes, Nonces and Report URI](https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/)
133 |
134 | [Content-Security-Policy - HTTP | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP)
135 |
136 | [Content Security Policy 入门教程](http://www.ruanyifeng.com/blog/2016/09/csp.html)
137 |
--------------------------------------------------------------------------------
/posts/【js高级程序】变量、作用域与内存.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 【js高级程序】变量、作用域与内存
3 | date: 2020-11-26 22:47:48
4 | categories: javascript
5 | tags: [js]
6 | ---
7 |
8 | 红宝书学习记录
9 |
10 | ### _原文整理摘抄自 javascript 高级程序开发(第 4 版) 第 4 章_
11 |
12 | ### 原始值与引用值
13 |
14 | **原始值** 就是最简单的数据
15 |
16 | > 目前有六种原始值 Undefined、Null、Boolean、Number、String 和 Symbol、BigInt
17 |
18 | **引用值** 由多个值构成的对象
19 | 引用值是保存在内存中的对象。
20 | JavaScript 不允许直接访问内存位置，因此也就 不能直接操作对象所在的内存空间。在操作对象时，实际上操作的是对该对象的引用(reference)而非 实际的对象本身。为此，保存引用值的变量是按引用(by reference)访问的。
21 |
22 | #### 动态属性
23 |
24 | 原始值和引用值的定义方式很类似，都是创建一个变量，然后给它赋一个值。
25 | 对于引用值而言，可以随时添加、修改和删除其属性和方法。
26 |
27 | #### 复制值
28 |
29 | 除了存储方式不同，原始值和引用值在通过变量复制时也有所不同。
30 |
31 | - 原始值的存储复制完全独立，互不干扰
32 | 
33 | - 引用值存储在变量中的值也会被复制到新变量所在的位置。区 别在于，**这里复制的值实际上是一个指针，它指向存储在堆内存中的对象**。
34 | 
35 |
36 | #### 传递参数
37 |
38 | ECMAScript 中所有函数的参数都是按值传递的。
39 | 这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。
40 |
41 | - 如果是原始值，那么就跟原始值变量的复制一样
42 | - 如果是 引用值，那么就跟引用值变量的复制一样。
43 |
44 | #### 确定类型
45 |
46 | `typeof` 确定值是不是对象
47 | `instanceof` 反对元素是否是某个类型的实例
48 |
49 | ```js
50 | result = variable instanceof constructor;
51 | ```
52 |
53 | ```js
54 | console.log(person instanceof Object); // 变量 person 是 Object 吗？
55 | console.log(colors instanceof Array); // 变量 colors 是 Array 吗？
56 | console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？
57 | ```
58 |
59 | ### 执行上下文与作用域
60 |
61 | 变量或函数的上下文决定 了它们可以访问哪些数据，以及它们的行为。
62 |
63 | 全局上下文是最外层的上下文。
64 |
65 | 上下文在其所有代码都执行完毕后会被销毁，包括定义 在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）。
66 |
67 | 每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。 在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。 类似洋葱模型
68 |
69 | 上下文中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain）。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。
70 |
71 | 代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。
72 |
73 | ```js
74 | var color = "blue";
75 |
76 | function changeColor() {
77 | if (color === "blue") {
78 | color = "red";
79 | } else {
80 | color = "blue";
81 | }
82 | }
83 | changeColor();
84 | ```
85 |
86 | 函数 changeColor()的作用域链包含两个对象
87 |
88 | - 它自己的变量对象（就 是定义 `arguments` 对象的那个）
89 | - 全局上下文的变量对象
90 | 这个函数内部之所以能够访问变量 color，就是因为**可以在作用域链中找到它**。
91 |
92 | 此外，局部作用域中定义的变量可用于在局部上下文中替换全局变量。
93 |
94 | #### 作用域链增强
95 |
96 | 虽然执行上下文主要有全局上下文和函数上下文两种（eval()调用内部存在第三种上下文），但有其他方式来增强作用域链。
97 | 某些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除
98 |
99 | - try/catch 语句的 catch 块 (创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明)
100 | - with 语句 (会向作用域链前端添加指定的对象)
101 | 这两种情况下，都会在作用域链前端添加一个变量对象。
102 |
103 | ```js
104 | function buildUrl() {
105 | let qs = "?debug=true";
106 |
107 | with (location) {
108 | let url = href + qs;
109 | return url;
110 | }
111 | }
112 | ```
113 |
114 | 这里，with 语句将 location 对象作为上下文，因此 location 会被添加到作用域链前端。当 with 语句中的代码引用变量 href 时，实际上引用的是 location.href，也就是自己变量对象的属性。
115 |
116 | #### 变量声明
117 |
118 | var, let, const
119 |
120 | 1. 使用 var 的函数作用域声明
121 | 在使用 var 声明变量时，变量会被自动添加到最接近的上下文。
122 |
123 | - 在函数中，最接近的上下文就是函数的局部上下文。
124 | - 在 with 语句中，最接近的上下文也是函数上下文。
125 | - 如果变量未经声明就被初始化了， 那么它就会自动被添加到全局上下文
126 | > var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前。这个现象叫作“提升” （hoisting）。
127 |
128 | 2. 使用 let 的**块级作用域声明**
129 | ES6 新增的 let 关键字跟 var 很相似，但它的作用域是块级的，这也是 JavaScript 中的新概念。
130 | 块级作用域由最近的一对包含花括号{}界定。
131 | 换句话说，if 块、while 块、function 块，甚至连单独 的块也是 let 声明变量的作用域。
132 |
133 | > 严格来讲，let 在 JavaScript 运行时中也会被提升，但由于“暂时性死区”（temporal dead zone）的 缘故，实际上不能在声明之前使用 let 变量。
134 |
135 | ```js
136 | for (let i = 0; i < 10; i++) {
137 | setTimeout(() => {
138 | console.info(i);
139 | });
140 | }
141 | ```
142 |
143 | 每次循环所生成的块级作用域包含着当时 i 的值, 块级作用域在定时器回调中被使用到，函数执行每次都有一个单独的作用域 i，可正常输出 0,2,3..9
144 |
145 | 3. 使用 const 的**常量声明**
146 | 使用 const 声明的变量必须同时初始化为某个值。
147 |
148 | ```js
149 | const INIT_SIZE = 3;
150 | ```
151 |
152 | ### 垃圾回收
153 |
154 | JavaScript 是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存。
155 |
156 | 基本思路：确定哪个变量不会再 使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间（或者说在代码执 行过程中某个预定的收集时间）就会自动运行。
157 |
158 | #### 回收策略: 标记清理
159 |
160 | JavaScript 最常用的垃圾回收策略是标记清理
161 |
162 | 当变量进入上下文，比如在函数内部声明一个变量时，这个变量会被加上存在于上下文中的标记。当变量离开上下文时，也会被加上离开上下文的标记。
163 |
164 | 垃圾回收程序运行的时候，会标记内存中存储的所有变量（记住，标记方法有很多种）。
165 |
166 | 然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。
167 |
168 | 在此之后再被加上标记 的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了。
169 |
170 | 随后垃圾回收程序做一次**内存清理**，销毁带标记的所有值并收回它们的内存。
171 |
172 | #### 回收策略: 引用计数
173 |
174 | 另一种没那么常用的垃圾回收策略是引用计数
175 |
176 | 其思路是对每个值都记录它被引用的次数。声明变量并给它赋一个引用值时，这个值的引用数为 1。如果同一个值又被赋给另一个变量，那么引用数加 1。
177 |
178 | 类似地，如果保存对该值引用的变量被其他值给覆盖了，那么引用数减 1。当一个值的引用数为 0 时，就说明没办法再访问到这个值了，因此可以安全地收回其内存了。
179 |
180 | 垃圾回收程序下次运行的时候就会释放引用数为 0 的值的内存。
181 |
182 | > 会存在循环引用问题
183 |
184 | #### 性能
185 |
186 | 垃圾回收程序会周期性运行，如果内存中分配了很多变量，则可能造成性能损失，因此垃圾回收的 时间调度很重要。
187 |
188 | 在内存有限的移动设备上，垃圾回收有可能会明显拖慢渲染的速度和帧速率。
189 |
190 | #### 内存管理
191 |
192 | - **解除引用：** 如果数据不需要，把它设置 null
193 |
194 | > 解除对一个值的引用并不会自动导致相关内存被回收。解除引用的关键在于确保相关的值已经不在上下文里了，因此它在下次垃圾回收时会被回收。
195 |
196 | - **通过 const 和 let 声明提升性能**
197 | `const` `let` 都是以块（非函数）为作用域
198 |
199 | - **隐藏类和删除操作**
200 | 运行期间，V8 会将创建的对象与隐藏类关联起来，以跟踪它们的属性特征。能够共享相同隐藏类 的对象性能会更好，V8 会针对这种情况进行优化，但不一定总能够做到。
201 |
202 | ```js
203 | function Article() {
204 | this.title = "Inauguration Ceremony Features Kazoo Band";
205 | }
206 |
207 | let a1 = new Article();
208 | let a2 = new Article();
209 | ```
210 |
211 | V8 会在后台配置，让这两个类实例共享相同的隐藏类，因为这两个实例共享同一个构造函数和原 型。假设之后又添加了下面这行代码：
212 |
213 | ```js
214 | a2.author = "Jake";
215 | ```
216 |
217 | 此时两个 Article 实例就会对应两个不同的隐藏类。
218 |
219 | ```js
220 | function Article(opt_author) {
221 | this.title = "Inauguration Ceremony Features Kazoo Band";
222 | this.author = opt_author;
223 | }
224 |
225 | let a1 = new Article();
226 | let a2 = new Article("Jake");
227 | ```
228 |
229 | 这样，两个实例基本上就一样了（不考虑 hasOwnProperty 的返回值），因此可以共享一个隐藏类， 从而带来潜在的性能提升。
230 | 不过要记住，使用 delete 关键字会导致生成相同的隐藏类片段。**解决方式就是不删除该属性而是设置属性为 null**
231 |
232 | - **静态分配与对象池** (间接控制触发垃圾回收的条件)
233 |
234 | ### 小结
235 |
236 | - JavaScript 变量可以保存两种类型的值：原始值和引用值。
237 | - 原始值: `Undefined`、`Null`、`Boolean`、`Number`、`String` 和 `Symbol`。
238 | - **原始值大小固定，因此保存在栈内存上**。
239 | - 从一个变量到另一个变量复制原始值会创建该值的第二个副本。
240 | - **引用值是对象，存储在堆内存上**。
241 | - 包含引用值的变量实际上只包含指向相应对象的一个**指针**，而**不是对象本身**。
242 | - 从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
243 | - `typeof` 操作符可以确定值的原始类型，而 `instanceof` 操作符用于确保值的引用类型。
244 | - 执行上下文分
245 | - 全局上下文
246 | - 函数上下文
247 | - 块级上下文。
248 | - 代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。
249 | - 函数或块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃 至全局上下文中的变量。
250 | - 全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据。
251 | - **变量的执行上下文用于确定什么时候释放内存**。
252 | - 离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。
253 | - 主流的垃圾回收算法是**标记清理**，即先给当前不使用的值加上标记，再回来回收它们的内存。
254 | - 引用计数是另一种垃圾回收策略，需要记录值被引用了多少次。JavaScript 引擎不再使用这种算 法，但某些旧版本的 IE 仍然会受这种算法的影响，原因是 JavaScript 会访问非原生 JavaScript 对 象（如 DOM 元素）。
255 | - 引用计数在代码中存在`循环引用`时会出现问题。
256 | - 解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。为促进内存回收，全局对象、全局对象的属性和循环引用都应该在不需要时解除引用。
257 |
--------------------------------------------------------------------------------
/posts/面试中的那些手写代码题目.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 面试中的那些手写代码题目
3 | date: 2019-10-28 10:22:32
4 | categories: javascript
5 | tags: ["js", "面试"]
6 | ---
7 |
8 | 话不多说，直接进入正题
9 |
10 | ### JS 防抖函数
11 |
12 | #### 基本的防抖函数
13 |
14 | ```ts
15 | export function debounce(fn: Function, wait: number = 1000) {
16 | let t: any;
17 | return function () {
18 | const _this = this;
19 | t && clearTimeout(t);
20 |
21 | t = setTimeout(function () {
22 | fn.apply(_this, arguments);
23 | }, wait);
24 | };
25 | }
26 | ```
27 |
28 | #### 添加 immediate 参数
29 |
30 | ```ts
31 | export function debounce(
32 | fn: Function,
33 | wait: number = 1000,
34 | immediate: boolean = true
35 | ) {
36 | let t: any;
37 | return function () {
38 | const _this = this;
39 | const _arg = arguments;
40 | t && clearTimeout(t);
41 |
42 | if (immediate) {
43 | let isDo = !t;
44 | t = setTimeout(function () {
45 | t = null;
46 | }, wait);
47 | if (isDo) {
48 | fn.apply(_this, _arg);
49 | }
50 | } else {
51 | t = setTimeout(function () {
52 | fn.apply(_this, _arg);
53 | }, wait);
54 | }
55 | };
56 | }
57 | ```
58 |
59 | ### JS 节流函数
60 |
61 | 节流的概念为多次点击的过程中只会在每次大于 wait 等待时长执行方法
62 |
63 | ```ts
64 | export function throttle(fn: Function, wait: number = 1000) {
65 | let prev: number = +new Date();
66 |
67 | return function () {
68 | const now: number = +new Date();
69 | if (now - prev > wait) {
70 | fn.apply(this, arguments);
71 | prev = +new Date();
72 | }
73 | };
74 | }
75 | ```
76 |
77 | ### 手写 call
78 |
79 | call 返回一个执行结果，第二个及以后的参数为执行函数的参数
80 |
81 | ```ts
82 | Function.prototype.selfCall = function (context: Window = window) {
83 | const ctx = context || {};
84 | ctx.fn = this;
85 | const args = Array.from(arguments).slice(1);
86 | const result = ctx.fn(args);
87 | delete ctx.fn;
88 | return result;
89 | };
90 |
91 | const bar = {
92 | a: "this is bar",
93 | };
94 | const foo = {
95 | a: 1,
96 | getA: function (name, age = 0) {
97 | console.log(`prop: ${this.a}`);
98 | console.log(`name: ${name}`);
99 | console.log(`age: ${age}`);
100 | console.log("-------------------");
101 | },
102 | };
103 |
104 | foo.getA.selfCall(bar, "selfCall");
105 |
106 | // prop: this is bar
107 | // name: selfCall
108 | // age: 0
109 | // -------------------
110 | ```
111 |
112 | ### 手写 apply
113 |
114 | apply 同样也是返回一个执行结果，只是第二个参数为数组
115 |
116 | ```ts
117 | Function.prototype.selfApply = function (context: Window = window) {
118 | const ctx = context || {};
119 | ctx.fn = this;
120 | const arg = Array.from(arguments).slice(1)[0];
121 | const result = ctx.fn(...arg);
122 | delete ctx.fn;
123 | return result;
124 | };
125 |
126 | // 接着call的对象信息执行代码
127 | foo.getA.selfApply(bar, ["selfApply", 22]);
128 |
129 | // prop: this is bar
130 | // name: selfApply
131 | // age: 22
132 | // -------------------
133 | ```
134 |
135 | ### 手写 bind
136 |
137 | > 注意：bind 方法只是返回一个可执行函数，执行需要由用户自己执行返回的函数
138 |
139 | ```ts
140 | Function.prototype.selfBind = function (context: Window = window) {
141 | const fn = this;
142 | const ctx = context || {};
143 | const arg = Array.from(arguments).slice(1);
144 | return function () {
145 | fn.call(ctx, ...arg);
146 | };
147 | };
148 |
149 | foo.getA.selfBind(null, "selfBind", 22)();
150 |
151 | // prop: undefined
152 | // name: selfBind
153 | // age: 22
154 | // -------------------
155 | ```
156 |
157 | ### 手写 Object.create 方法
158 |
159 | ### 科里化函数
160 |
161 | 通过判断参数是否符合实际方法所需参数的数量进行执行函数或者继续递归判断
162 |
163 | ```ts
164 | export function curry(fn: Function) {
165 | const _this = this;
166 | const args = Array.from(arguments).slice(1);
167 | // fn.length 属性指明函数的形参个数。
168 | const len = fn.length;
169 |
170 | return function () {
171 | const _args = Array.from(arguments);
172 | args.push(..._args);
173 | if (args.length < len) {
174 | return curry.call(_this, fn, ...args);
175 | }
176 |
177 | return fn.apply(_this, args);
178 | };
179 | }
180 |
181 | // test
182 | const addCur = function (a, b, c) {
183 | console.log("a + b + c", a + b + c);
184 | };
185 |
186 | const reduceCur = function (a, b, c) {
187 | console.log("a - b - c", a - b - c);
188 | };
189 |
190 | const add = curry(addCur, 2);
191 | s(1)(2); // a + b + c 6
192 | s(1, 3); // a + b + c 6
193 |
194 | const reduce = curry(reduceCur);
195 | reduce(1)(2)(3); // a - b - c -1
196 | reduce(1, 2, 3); // a - b - c -3
197 | ```
198 |
199 | ### compose
200 |
201 | 类似 react 中组件， compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args)))
202 |
203 | ```ts
204 | export function compose(...fn: Function[]) {
205 | return function (...args: any) {
206 | return fn.reduceRight((prevResult, currentFn) => {
207 | return currentFn.call(this, ...prevResult);
208 | }, args);
209 | };
210 | }
211 | ```
212 |
213 | ### 实现一个 `instanceof`
214 |
215 | instanceof 的原理就是判断这个变量是否来自于某一个构造函数
216 |
217 | ```ts
218 | export function selfInstanceOf(left, right) {
219 | while (true) {
220 | if (left === null) return false;
221 | if (left === right) return true;
222 | if (left.__proto__ === right.prototype) return true;
223 | left = left.__proto__;
224 | }
225 | }
226 |
227 | // test
228 | selfInstanceOf({}, Object); // true
229 | selfInstanceOf({}, Array); // false
230 | selfInstanceOf([], Array); // true
231 | selfInstanceOf([], Object); // true
232 |
233 | const Fn = function () {};
234 | const a = new Fn();
235 | selfInstanceOf(a, Fn); // true
236 | selfInstanceOf(a, Object); // true
237 | ```
238 |
239 | ### 数组去重
240 |
241 | 就不使用 Set 去实现去重了，使用 filter + indexOf 实现数组去重
242 |
243 | #### 方法一
244 |
245 | ```ts
246 | export function uniqueArray(arr: any[]) {
247 | return arr.filter((item, index) => arr.indexOf(item) === index);
248 | }
249 |
250 | console.log(uniqueArray([1, 2, 3, 2, 1, 3, 4, 5, 6, 3, 8]));
251 | // [1, 2, 3, 4, 5, 6, 8]
252 | ```
253 |
254 | #### 方法二
255 |
256 | ```ts
257 | export function uniqueArray(arr: any[]) {
258 | const newArr = arr.sort();
259 | let result = [newArr[0]];
260 | for (let i = 1; i < newArr.length; i++) {
261 | newArr[i] !== newArr[i - 1] && result.push(newArr[i]);
262 | }
263 | return result;
264 | }
265 | console.log(uniqueArray([1, 2, 3, 2, 1, 3, 4, 5, 6, 3, 8]));
266 | // [1, 2, 3, 4, 5, 6, 8]
267 | ```
268 |
269 | ### JS 深拷贝
270 |
271 | `JSON.stringify` 的问题导致我们需要自己手写基本的深拷贝方法
272 | 以下只做了 object array 的判断
273 |
274 | ```ts
275 | export function deepClone(obj: Object | any) {
276 | let result: any = {};
277 | for (let k in obj) {
278 | let typeStr = Object.prototype.toString
279 | .call(obj[k])
280 | .match(/\[object (.*?)\]/)[1]
281 | .toLowerCase();
282 | switch (typeStr) {
283 | case "object":
284 | result[k] = deepClone(obj[k]);
285 | break;
286 | case "array":
287 | result[k] = obj[k].slice();
288 | break;
289 | default:
290 | result[k] = obj[k];
291 | }
292 | }
293 | return result;
294 | }
295 | ```
296 |
297 | > 这里需要考虑到一个对象重复引用的问题， 如果存在对象引用，会导致代码重复执行，可以参考 lodash 的深拷贝代码， WeakMap 可以解决这个问题，后面会针对这个代码进行优化
298 |
--------------------------------------------------------------------------------
/posts/日志监控.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 日志监控
3 | date: 2019-01-22 23:13:23
4 | categories: javascript
5 | tags: js
6 | ---
7 |
8 | 最近项目上有对于网站监控的需求，主要功能如下
9 | 1. 白屏时间
10 | 2. ajax请求响应时间
11 | 3. js报错信息
12 | 这些都需要通过request请求将对应的数据提交到后端，虽然从功能上来说，后端运维的log日志完全可以看到大多数内容，但是既然要求做了那就写呗
13 |
14 | ### 白屏时间
15 | 这个就是使用浏览器自带的 `performance` 对象来实现了
16 | performance.timing则是包含浏览器在各个状态下的时间戳以及其他属性值
17 | 部分js时间计算的代码
18 |
19 | ``` js
20 | Logger.prototype.getTiming = function () {
21 | var _return = {
22 | // DNS查询耗时
23 | dnsT: this.timing.domainLookupEnd - this.timing.domainLookupStart,
24 | // 白屏时间
25 | loadT: this.timing.domLoading - this.timing.navigationStart,
26 | // request请求耗时
27 | requestT: this.timing.responseEnd - this.timing.responseStart,
28 | // TCP链接耗时
29 | tcpT: this.timing.connectEnd - this.timing.connectStart,
30 | // 解析dom树耗时
31 | renderDomT: this.timing.domComplete - this.timing.domInteractive,
32 | // domready时间(用户可操作时间节点)
33 | readyDomT: this.timing.domContentLoadedEventEnd - this.timing.navigationStart,
34 | // onload时间(总下载时间)
35 | onLoadT: this.timing.loadEventEnd - this.timing.navigationStart
36 | };
37 | return _return;
38 | };
39 | ```
40 |
41 | ### ajax请求响应时间
42 | 由于公司网址都是用的$.ajax的请求方法，新老官网以及落地页，关于ajax请求的代码就有好几百个，不可能一个个在ajax里写starttime然后成功或者失败定义endtime拿到差值再减，看起来很难维护
43 | 想了很久，最后决定重写$.ajax，也就是包装这个方法，专业术语叫 AOP 装饰者模式
44 | ```js
45 | (function ($, w) {
46 | // window上初始一个方法
47 | w._ajax = $.ajax;
48 | $.ajax = function (arg) {
49 | // 请求之前的时间
50 | var start_t = new Date().getTime()
51 | // 拿到$.ajax的执行的成功回调，记录下来
52 | var success = arg.success
53 | // 重写succes
54 | arg.success = function () {
55 | // 拿到$.ajax传入的参数
56 | var data = arguments
57 | // 成功执行后定义的方法
58 | var time = new Date().getTime() - start_t
59 | // 此时执行默认的ajax，因为默认的ajax不会捕获success之后的回调函数
60 | _ajax({
61 | url: 'url',
62 | data: {
63 | time: time
64 | }
65 | success: success.call(this, data)
66 | });
67 | }
68 | return _ajax.call($, arg)
69 | };
70 | })(jQuery, window);
71 | ```
72 |
73 | ### js报错信息
74 | js报错主要就是用window的onerror事件去监听js的报错信息
75 | 这里需要注意一下几点
76 |
77 | #### 1.不能使用 window.onerror = function () {...} ,而是使用 window.addEventListener ('error', funciton (e) {})
78 | 原因就是 window.onerror 会覆盖或者被覆盖，因为他是表达式，所以在其他地方执行这个方法的时候，会被覆盖，addEventListener则是添加一个error的监听事件，不会影响之前error的监听代码
79 |
80 | #### 2.执行顺序
81 | error的监听代码尽量写在js最前面，因为涉及到调用 $.ajax , 因此放在jquery引入之后，其余的代码则放在后面, 先初始化监听, 后执行后续代码
82 |
83 | #### 3.crossorigin
84 | 在script引入日志监控代码标签没有用到crossorigin的时候, 由于跨域调用的windows脚本, onerror的事件不会打印详细的报错信息, 为了打印详细信息, 需配置crossorigin属性, 这需要后端的 Access-Control-Allow-Origin 支持
85 |
86 | #### 4.不是所有js报错代码都可以监听
87 | - console.error 不会被执行
88 | - try {} catch () {} 不会被监听
89 | - 静态资源加载错误不会被监听
90 |
91 | 代码如下
92 | ```js
93 | Logger.prototype.initErrorEvent = function () {
94 | /**
95 | * @param {String} errorMessage 错误信息
96 | * @param {String} scriptURL 出错文件的URL
97 | * @param {Number} lineNumber 出错代码的行号
98 | * @param {Number} columnNumber 出错代码的列号
99 | * @param {Object} errorObj 错误信息Object
100 | */
101 | var _this = this;
102 | window.addEventListener('error', function (e) {
103 | setTimeout(function () {
104 | _this.staticError({
105 | errorMessage: e.message,
106 | scriptURL: e.filename,
107 | lineNumber: e.lineno,
108 | columnNumber: e.colno,
109 | errorObj: e.error
110 | });
111 | }, 0);
112 | });
113 | };
114 |
115 | Logger.prototype.staticError = function (data) {
116 | $.ajax({
117 | url: 'url...',
118 | type: 'POST',
119 | dataType: 'json',
120 | data: {
121 | url: window.location.href,
122 | current_time: new Date().getTime(),
123 | js_url: data.scriptURL,
124 | error_info: data.errorMessage,
125 | error_line: data.lineNumber,
126 | error_column: data.columnNumber
127 | }
128 | });
129 | };
130 | ```
131 |
132 | 完整的logger代码，不包含包装的ajax方法
133 | ```js
134 | var Logger = /** @class */ (function () {
135 | function Logger() {
136 | this.timing = window.performance.timing;
137 | this.initErrorEvent();
138 | }
139 | Logger.prototype.getTiming = function () {
140 | var _return = {
141 | // DNS查询耗时
142 | dnsT: this.timing.domainLookupEnd - this.timing.domainLookupStart,
143 | // 白屏时间
144 | loadT: this.timing.domLoading - this.timing.navigationStart,
145 | // request请求耗时
146 | requestT: this.timing.responseEnd - this.timing.responseStart,
147 | // TCP链接耗时
148 | tcpT: this.timing.connectEnd - this.timing.connectStart,
149 | // 解析dom树耗时
150 | renderDomT: this.timing.domComplete - this.timing.domInteractive,
151 | // domready时间(用户可操作时间节点)
152 | readyDomT: this.timing.domContentLoadedEventEnd - this.timing.navigationStart,
153 | // onload时间(总下载时间)
154 | onLoadT: this.timing.loadEventEnd - this.timing.navigationStart
155 | };
156 | return _return;
157 | };
158 | /**
159 | * 初始化error监听事件
160 | */
161 | Logger.prototype.initErrorEvent = function () {
162 | /**
163 | * @param {String} errorMessage 错误信息
164 | * @param {String} scriptURL 出错文件的URL
165 | * @param {Number} lineNumber 出错代码的行号
166 | * @param {Number} columnNumber 出错代码的列号
167 | * @param {Object} errorObj 错误信息Object
168 | */
169 | var _this = this;
170 | window.addEventListener('error', function (e) {
171 | setTimeout(function () {
172 | _this.staticError({
173 | errorMessage: e.message,
174 | scriptURL: e.filename,
175 | lineNumber: e.lineno,
176 | columnNumber: e.colno,
177 | errorObj: e.error
178 | });
179 | }, 0);
180 | });
181 | };
182 | /**
183 | * 事件错误的回调事件
184 | */
185 | Logger.prototype.staticError = function (data) {
186 | $.ajax({
187 | url: '',
188 | type: 'POST',
189 | dataType: 'json',
190 | data: {
191 | url: window.location.href,
192 | current_time: new Date().getTime(),
193 | js_url: data.scriptURL,
194 | error_info: data.errorMessage,
195 | error_line: data.lineNumber,
196 | error_column: data.columnNumber
197 | }
198 | });
199 | };
200 | /**
201 | * 页面加载时长的数据信息
202 | */
203 | Logger.prototype.fetchPageLoadInfo = function () {
204 | var timingInfo = this.getTiming();
205 | $.ajax({
206 | url: '',
207 | type: 'POST',
208 | dataType: 'json',
209 | data: {
210 | url: window.location.href,
211 | current_time: new Date().getTime(),
212 | response_time: timingInfo.loadT
213 | }
214 | });
215 | };
216 | return Logger;
217 | }());
218 | window.logger = new Logger();
219 | window.addEventListener('load', function () {
220 | setTimeout(function () {
221 | logger.fetchPageLoadInfo();
222 | }, 1000);
223 | }, false);
224 | ```
225 |
--------------------------------------------------------------------------------
/posts/算法学习-递归.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 算法学习-递归
3 | date: 2021-01-07 07:39:55
4 | categories: 算法
5 | tags: ['算法']
6 | ---
7 |
8 | ### leet_code 的递归算法的学习
9 |
10 | #### 344.反转字符串
11 | 编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。
12 |
13 | 不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。
14 |
15 | 你可以假设数组中的所有字符都是 ASCII 码表中的可打印字符
16 |
17 | 示例 1：
18 | ```code
19 | 输入：["h","e","l","l","o"]
20 | 输出：["o","l","l","e","h"]
21 | ```
22 | 示例 2：
23 | ```code
24 | 输入：["H","a","n","n","a","h"]
25 | 输出：["h","a","n","n","a","H"]
26 | ```
27 |
28 | ##### 代码：
29 | ```ts
30 | function reverseString(s: string[]): void {
31 | const fn = (start: number, end: number, s: string[]) => {
32 | if (start > end) {
33 | return;
34 | }
35 | let tmp = s[start];
36 | s[start] = s[end];
37 | s[end] = tmp;
38 | fn(start + 1, end - 1, s);
39 | }
40 |
41 | fn(0, s.length - 1, s);
42 | };
43 | ```
44 | > 通过首尾替换的方式修改数组的值，左边的值 ++ ，右边的值--， 直到 left > right （索引）跳出递归
45 |
46 | #### 509.斐波那契数
47 | 斐波那契数，通常用 F(n) 表示，形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。
48 |
49 | ##### 代码
50 | - **递归**
51 | ```ts
52 | let cache = new Map();
53 | function fib(N: number): number {
54 | if (N == 0) return 0
55 | if (N == 1) return 1
56 | if (cache.has(N)) {
57 | return cache.get(N)
58 | }
59 | let ret = fib(N - 1) + fib(N - 2)
60 | cache.set(N, ret);
61 | return ret;
62 | }
63 | ```
64 | - **数组**
65 | ```ts
66 | function fibArr(n: number): number {
67 | let arr = [0, 1];
68 | for (let i = 2; i <= n; i++) {
69 | arr[i] = arr[i - 1] + arr[i - 2];
70 | }
71 | return arr[n];
72 | }
73 | ```
74 |
75 | #### 206.反转链表
76 | 反转一个单链表。
77 |
78 | 示例:
79 |
80 | ```code
81 | 输入: 1->2->3->4->5->NULL
82 | 输出: 5->4->3->2->1->NULL
83 | ```
84 | ```ts
85 | function reverseList(head: ListNode | null): ListNode | null {
86 | if (head === null || head.next === null) {
87 | return head;
88 | }
89 | const node = reverseList(head.next);
90 | head.next.next = head;
91 | head.next = null;
92 | return node;
93 | }
94 | ```
95 |
96 | #### 104.二叉树的最大深度
97 | 给定一个二叉树，找出其最大深度。
98 |
99 | 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。
100 |
101 | **说明**: 叶子节点是指没有子节点的节点。
102 | **示例**：
103 | 给定二叉树 [3,9,20,null,null,15,7]，
104 | ```code
105 | 3
106 | / \
107 | 9 20
108 | / \
109 | 15 7
110 | ```
111 | 返回它的最大深度 3 。
112 | ```ts
113 | function maxDepth(root: TreeNode | null): number {
114 | return root
115 | ? Math.max(maxDepth(root.left), maxDepth(root.right)) + 1
116 | : 0
117 | };
118 | ```
119 |
120 | #### 50. Pow(x, n)
121 | 实现 `pow(x, n)` ，即计算 x 的 n 次幂函数。
122 | **示例 1**:
123 | ```code
124 | 输入: 2.00000, 10
125 | 输出: 1024.00000
126 | ```
127 | **示例 2**:
128 | ```code
129 | 输入: 2.10000, 3
130 | 输出: 9.26100
131 | ```
132 | **示例 3**:
133 | ```code
134 | 输入: 2.00000, -2
135 | 输出: 0.25000
136 | 解释: 2-2 = 1/22 = 1/4 = 0.25
137 | ```
138 | **说明**:
139 | - -100.0 < x < 100.0
140 | - n 是 32 位有符号整数，其数值范围是 [−231, 231 − 1] 。
141 |
142 | **1. for循环累乘**
143 | ```ts
144 | function myPow(x: number, n: number): number {
145 | let newN = n;
146 | let newX = x;
147 | if (newN < 0) {
148 | newX = 1 / x;
149 | newN = -n
150 | }
151 | let aws = 1;
152 | console.info(newX);
153 | for (let i = 0; i < newN; i++) {
154 | aws *= newX;
155 | }
156 | return aws;
157 | }
158 | ```
159 |
160 | **2. 递归**
161 | ```code
162 | pow(2, 10) === pow(2, 5) * pow(2, 5) === pow(2, pow(2, 5))
163 |
164 | pow(2, 9) === pow(2, 4) * pow(2, 4) * 2 === pow(2, pow(2, 4)) * 2
165 | ```
166 | 我们可以知道
167 | **在次方为偶数的情况下:** 一个值（2）的 10次方相当于 是，两个该值的一半(10 / 2) 的乘积
168 | **在次方为奇数的情况下:** 一个值（2）的 9次方相当于 是，两个该值的一半【向下取整的次方】(`Math.floor(9 / 2)`) * 2 的乘积
169 | ```ts
170 | function myPow(x: number, n: number): number {
171 | const fastPow = (x: number, n: number): number => {
172 | if (n === 0) {
173 | return 1;
174 | }
175 |
176 | const half = fastPow(x, Math.floor(n / 2));
177 | if (n % 2 === 1) {
178 | // 基数
179 | return half * half * x;
180 | } else {
181 | return half * half;
182 | }
183 | }
184 |
185 | const ret = fastPow(x, Math.abs(n));
186 | // n < 0 负次方则将总的乘积求导数
187 | return n > 0 ? ret : 1 / ret;
188 | };
189 | ```
190 |
191 | #### 21.合并两个有序链表
192 | 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。
193 |
194 | 示例 1：
195 |
196 | 
197 |
198 | ```code
199 | 输入：l1 = [1,2,4], l2 = [1,3,4]
200 | 输出：[1,1,2,3,4,4]
201 | ```
202 |
203 | 示例 2：
204 | ```code
205 | 输入：l1 = [], l2 = []
206 | 输出：[]
207 | ```
208 |
209 | 示例 3：
210 | ```code
211 | 输入：l1 = [], l2 = [0]
212 | 输出：[0]
213 | ```
214 | ```ts
215 | function mergeTwoLists(l1: ListNode | null, l2: ListNode | null): ListNode | null {
216 | // 如果 l1 到头了，直接拼l2的值
217 | if (l1 === null) {
218 | return l2;
219 | }
220 |
221 | // 如果 l2 到头了，拼接l1的值
222 | if (l2 === null) {
223 | return l1;
224 | }
225 |
226 | // l1.val > l2.val 则将l1 和 l2 的下一个做比较，l2的next值就是比较之后的值
227 | if (l1.val > l2.val) {
228 | l2.next = mergeTwoLists(l1, l2.next);
229 | return l2;
230 | } else {
231 | // 同理
232 | l1.next = mergeTwoLists(l1.next, l2);
233 | return l1;
234 | }
235 | };
236 | ```
237 |
238 | #### 779.第K个语法符号
239 | 在第一行我们写上一个 0。接下来的每一行，将前一行中的0替换为01，1替换为10。
240 |
241 | 给定行数 N 和序数 K，返回第 N 行中第 K个字符。（K从1开始）
242 | **例子:**
243 | ```code
244 | 输入: N = 1, K = 1
245 | 输出: 0
246 |
247 | 输入: N = 2, K = 1
248 | 输出: 0
249 |
250 | 输入: N = 2, K = 2
251 | 输出: 1
252 |
253 | 输入: N = 4, K = 5
254 | 输出: 1
255 |
256 | 解释:
257 | 第一行: 0
258 | 第二行: 01
259 | 第三行: 0110
260 | 第四行: 01101001
261 | ```
262 | **注意：**
263 | 1. N 的范围 [1, 30].
264 | 2. K 的范围 [1, 2^(N-1)].
265 |
266 | ```ts
267 | function kthGrammar(N: number, K: number): number {
268 | if (N === 1) return 0;
269 | // 如果 K 是奇数，则 N,K 对应的值为父级（N-1，((K + 1)) / 2）的位置的值
270 | if (K % 2) {
271 | return kthGrammar(N-1, (K + 1) / 2);
272 | } else {
273 | // 偶数
274 | // 上一行为0 下一行为1
275 | // 上一行为1 下一行为0
276 | return kthGrammar(N-1, K / 2) === 0 ? 1 : 0;
277 | }
278 | };
279 | ```
280 |
281 | #### 95.不同的二叉搜索树 II
282 | 给定一个整数 n，生成所有由 1 ... n 为节点所组成的 二叉搜索树 。
283 |
284 | **示例:**
285 | ```code
286 | 输入：3
287 | 输出：
288 | [
289 | [1,null,3,2],
290 | [3,2,null,1],
291 | [3,1,null,null,2],
292 | [2,1,3],
293 | [1,null,2,null,3]
294 | ]
295 | 解释：
296 | 以上的输出对应以下 5 种不同结构的二叉搜索树：
297 |
298 | 1 3 3 2 1
299 | \ / / / \ \
300 | 3 2 1 1 3 2
301 | / / \ \
302 | 2 1 2 3
303 | ```
304 | **提示：**
305 | - 0 <= n <= 8
306 |
307 | 
308 |
309 | ```ts
310 | function generateTrees(n: number): Array {
311 | // 0 直接返回
312 | if (n === 0) return [];
313 |
314 | // 递归函数 初始值 以及最大值
315 | const getBSTnum = (start: number, n: number) => {
316 | if (start > n) return [null];
317 | if (start === n) return [new TreeNode(start)];
318 |
319 | const res = [];
320 | for (let i = start; i <= n; i++) {
321 | let leftBST = getBSTnum(start, i - 1);
322 | let rightBST = getBSTnum(i + 1, n);
323 |
324 | for (let leftV of leftBST) {
325 | for (let rightV of rightBST) {
326 | const root = new TreeNode(i);
327 | root.left = leftV;
328 | root.right = rightV;
329 | res.push(root);
330 | }
331 | }
332 | }
333 | return res;
334 | };
335 | return getBSTnum(1, n);
336 | };
337 | ```
338 |
339 | #### 总结
340 | - 递归算法的时间复杂度通常是递归调用的数量和计算的时间复杂度的乘积
341 | - 递归算法的空间复杂度, 虑造成空间消耗的两个部分：
342 | - 递归相关空间 (不断执行递归，堆栈数据得不到释放，规模过大可能会导致堆栈溢出)
343 | - 非递归相关空间（与递归过程没有直接关系的内存空间，通常包括为全局变量分配的空间（通常在堆中））
344 |
345 | > 记忆化技术优化递归性能
346 |
347 | https://leetcode-cn.com/leetbook/read/recursion/xk5vw2/
348 |
--------------------------------------------------------------------------------
/posts/【js高级程序】客户端检测.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 【js高级程序】客户端检测
3 | date: 2020-11-25 07:36:34
4 | categories: javascript
5 | tags: [js]
6 | ---
7 |
8 | 红宝书学习记录
9 |
10 | ### *原文整理摘抄自 javascript 高级程序开发(第4版) 第13章*
11 |
12 | ### 能力检测
13 | 能力检测（又称特性检测）即在 JavaScript **运行时中使用一套简单的检测逻辑，测试浏览器是否支 持某种特性**。
14 | ```js
15 | if (object.propertyInQuestion) {
16 | // 使用 object.propertyInQuestion
17 | }
18 | ```
19 | 能力检测的关键是理解两个重要概念。
20 | - 应该先检测最常用的方式。
21 | - 必须检测切实需要的特性。某个能力存在并不代表别的能力也存在。
22 |
23 | #### 基于能力检测进行浏览器分析
24 | ##### 检测特性
25 | 如果你的应用程序需要使用特定的浏览器能力，那么最好集中检测所 有能力，而不是等到用的时候再重复检测。
26 | ```js
27 | // 检测浏览器是否支持 Netscape 式的插件
28 | let hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
29 |
30 | // 检测浏览器是否具有 DOM Level 1 能力
31 | let hasDOM1 = !!(document.getElementById && document.createElement && document.getElementsByTagName);
32 | ```
33 | > 能力检测最适合用于决定下一步该怎么做，而不一定能够作为辨识浏览器的标志。
34 |
35 | ### 用户代理检测
36 | 用户代理检测通过浏览器的用户代理字符串确定使用的是什么浏览器。用户代理字符串包含在每个 HTTP 请求的头部，在 JavaScript 中可以通过 navigator.userAgent 访问。
37 | - 在服务器端，常见的做法 是根据接收到的用户代理字符串确定浏览器并执行相应操作。
38 | - 而在客户端，用户代理检测被认为是不可 靠的，只应该在没有其他选项时再考虑。
39 |
40 | #### Gecko
41 | Gecko渲染引擎是 Firefox 的核心。
42 | ```code
43 | Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language; PrereleaseVersion)Gecko/GeckoVersion ApplicationProduct/ApplicationProductVersion
44 | ```
45 |
46 | #### WebKit
47 | 2003年，苹果宣布将发布自己的浏览器 Safari。Safari 的渲染引擎叫 WebKit，是基于 Linux 平台浏 览器 Konqueror 使用的渲染引擎 KHTML 开发的。
48 | ```code
49 | Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Safari/SafariVersion
50 |
51 | Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5
52 | ```
53 |
54 | #### Blink
55 | 谷歌的 Chrome 浏览器使用 Blink 作为渲染引擎，使用 V8 作为 JavaScript 引擎。Chrome 的用户代理 字符串包含所有 WebKit 的信息，另外又加上了 Chrome 及其版本的信息。
56 | ```code
57 | Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Chrome/ChromeVersion Safari/SafariVersion
58 | ```
59 |
60 | #### Opera
61 | ```code
62 | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 OPR/52.0.2871.64
63 | ```
64 |
65 | #### iOS 与 Android
66 | iOS 和 Android 移动操作系统上默认的浏览器都是基于 WebKit 的，因此具有与相应桌面浏览器一样 的用户代理字符串。
67 |
68 |
69 | #### 浏览器分析
70 | 通过检测用户代理来识别浏览器并不是完美的方式，毕竟这个字符串是可以造假的。
71 | 只不过实现 window.navigator 对象的浏览器（即所有现代浏览器）都会提供 userAgent 这个只读属性。因此， 简单地给这个属性设置其他值不会有效：
72 |
73 | 不过，有些浏览器提供伪私有的__defineGetter__方法， 利用它可以篡改用户代理字符串：
74 | ```js
75 | // Chrome 浏览器测试
76 | window.navigator.__defineGetter__('userAgent', () => 'foobar')
77 | console.info(window.navigator.userAgent); // "foobar"
78 | ```
79 |
80 | ### 软件与硬件检测
81 | #### 识别浏览器与操作系统 (测试于mac pc端)
82 | 1. `navigator.oscpu` 通常对应用户代理字符串中操作系统/系统架构相关信息。
83 | ```js
84 | // Chrome Safari 显示为 undefind
85 | console.info(navigator.oscpu) // undefind
86 | ```
87 |
88 | 2. `navigator.vendor` 通常包含浏览器开发商信息。
89 | ```js
90 | // Chrome
91 | console.info(navigator.vendor) // Google Inc.
92 |
93 | // Safari
94 | console.info(navigator.vendor) // Apple Computer, Inc.
95 | ```
96 |
97 | 3. `navigator.platform` 通常表示浏览器所在的操作系统。
98 | ```js
99 | // Chrome
100 | console.info(navigator.vendor) // MacIntel
101 |
102 | // Safari
103 | console.info(navigator.vendor) // MacIntel
104 | ```
105 |
106 | 4. `screen.colorDepth` 和 `screen.pixelDepth`
107 | 返回一样的值，即显示器每像素颜色的位深。
108 | ```js
109 | // Chrome
110 | console.info(screen.colorDepth, screen.pixelDepth) // 30 30
111 |
112 | // Safari
113 | console.info(screen.colorDepth, screen.pixelDepth) // 24 24
114 | ```
115 |
116 | 5. `screen.orientation` 返回一个 ScreenOrientation 对象
117 | ```js
118 | // Chrome
119 | console.info(screen.orientation)
120 | // {
121 | // angle: 0
122 | // onchange: null
123 | // type: "landscape-primary"
124 | // }
125 |
126 | // Safari
127 | console.info(screen.orientation) // undefind
128 | ```
129 |
130 | #### 浏览器元数据
131 | navigator 对象暴露出一些 API，可以提供浏览器和操作系统的状态信息。
132 |
133 | ##### Geolocation API
134 | 浏览器脚本感知当前设备的地理位 置。这个 API 只在安全执行环境(通过 HTTPS 获取的脚本)中可用。
135 |
136 | ```js
137 | navigator.geolocation.getCurrentPosition((position) => console.info(position));
138 |
139 | // 如果同意返回如下信息
140 | // {
141 | // coords: {
142 | // accuracy: 55
143 | // altitude: null
144 | // altitudeAccuracy: null
145 | // heading: null
146 | // latitude: 31.273845500000004
147 | // longitude: 121.471465
148 | // speed: null
149 | // },
150 | // timestamp: 1606297728920
151 | // }
152 | ```
153 | - `coords`
154 | - `accuracy` 以米为单位的精度(纬度相关)
155 | - `altitude` 海拔高度 (精度值:米) 设备必须具备相应的能力(比 如 高度计),否则为null
156 | - `altitudeAccuracy` 海拔精度(米)
157 | - `heading` 表示相对于正北方向移动的角度(0 ≤ heading < 360)
158 | - `latitude` 纬度
159 | - `longitude` 经度
160 | - `speed` 表示设备每秒移动的速度
161 | - `timestamp` 表示查询时间的时间戳
162 |
163 | `getCurrentPosition` 第二个参数是error 错误的回调函数，参数e是一个对象，包含一下参数
164 | - `code` 属性是一个整数,表示以下 3 种错误
165 | - `PERMISSION_DENIED` 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
166 | - `POSITION_UNAVAILABLE` 地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
167 | - `TIMEOUT` 获取地理位置超时，通过定义 `PositionOptions.timeout` 来设置获取地理位置的超时时长。
168 | - `message` string
169 |
170 | `getCurrentPosition` 第三个参数 `PositionOptions`对象，可设置如下属性
171 | - `enableHighAccuracy` true 表示返回的值应该尽量精确，默认值为 false。
172 | - `timeout` 毫秒 表示在以 TIMEOUT 状态调用错误回调函数之前等待的最长时间
173 | - `maximumAge` 毫秒 表示返回坐标的最长有效期，默认值为 0。0 表示强 制系统忽略缓存的值，每次都重新查询。
174 |
175 | ##### Connection State 和 NetworkInformation API
176 | 1. Connection State: online & offline
177 | ```js
178 | const connectionStateChange = () => console.log(navigator.onLine);
179 |
180 | // 网络连接时触发
181 | window.addEventListener('online', connectionStateChange);
182 |
183 | // 网络断开时触发
184 | window.addEventListener('offline', connectionStateChange);
185 | ```
186 |
187 | 2. NetworkInformation API
188 | navigator 对象还暴露了 NetworkInformation API，可以通过 navigator.connection 属性使用
189 | ```js
190 | navigator.connection // NetworkInformation {onchange: null, effectiveType: "4g", rtt: 100, downlink: 10, saveData: false}
191 | ```
192 | 以下是 NetworkInformation API 暴露的属性。
193 | - `downlink` 整数，表示当前设备的带宽(以 Mbit/s 为单位)，舍入到最接近的 25kbit/s。这个值可能会根据历史网络吞吐量计算，也可能根据连接技术的能力来计算。
194 | - `downlinkMax` 整数，表示当前设备最大的下行带宽(以 Mbit/s 为单位)，根据网络的第一跳来确定。因为第一跳不一定反映端到端的网络速度，所以这个值只能用作粗略的上限值。
195 | - `effectiveType` 字符串枚举值，表示连接速度和质量。`slow-2g` | `2g` | `3g` | `4g`
196 | - `rtt` 表示当前网络实际的往返时间，舍入为最接近的 25 毫秒。
197 | - `type` 字符串枚举值，表示网络连接技术。这个值可能为下列值之一。
198 | - `bluetooth` 蓝牙
199 | - `cellular` 蜂窝
200 | - `ethernet` 以太网
201 | - `none` 无网络连接。相当于 navigator.onLine === false。
202 | - `mixed` 多种网络混合。
203 | - `wifi` wifi状态
204 | - ...
205 | - `saveData` 表示用户设备是否启用了“节流”(reduced data)模式。
206 | - `onchange` 会在任何连接状态变化时激发一个 change 事件。
207 | ```js
208 | navigator.connection.addEventListener('change',changeHandler)
209 | ```
210 |
211 | 3. Battery Status API
212 | ```js
213 | (async() => {
214 | const res = await navigator.getBattery();
215 | alert(JSON.stringify(res)) // BatteryManager 对象。
216 | })()
217 | ```
218 | BatteryManager 包含 4 个只读属性，提供了设备电池的相关信息
219 | - `charging` 布尔值，表示设备当前是否正接入电源充电。如果设备没有电池，则返回 true。
220 | - `chargingTime` 整数，表示预计离电池充满还有多少秒。
221 | - `dischargingTime` 整数，表示预计离电量耗尽还有多少秒。
222 | - `level` 浮点数，表示电量百分比。电量完全耗尽返回 0.0，电池充满返回 1.0。如果设备没有电
223 | 池，则返回 1.0。
224 |
225 | 这个 API 还提供了 4 个事件属性，可用于设置在相应的电池事件发生时调用的回调函数。
226 | - `onchargingchange` 充电状态变化时的处理程序
227 | - `onchargingtimechange` 充电时间变化时的处理程序
228 | - `ondischargingtimechange` 放电时间变化时的处理程序
229 | - `onlevelchange` 电量百分比变化时的处理程序
230 |
231 | #### 硬件
232 | 1. 处理器核心数 `navigator.hardwareConcurrency`
233 | 返回浏览器支持的逻辑处理器核心数量，包含表示核心
234 | 数的一个整数值(如果核心数无法确定，这个值就是 1)。关键在于，这个值表示浏览器可以并行执行的 最大工作线程数量，不一定是实际的 CPU 核心数。
235 |
236 | 2. 设备内存大小 `navigator.deviceMemory`
237 | 返回设备大致的系统内存大小，包含单位为 GB 的浮点数(舍入
238 | 为最接近的 2 的幂:512MB 返回 0.5，4GB 返回 4)。
239 |
240 | 3. 最大触点数 `navigator.maxTouchPoints`
241 | 返回触摸屏支持的最大关联触点数量，包含一个整数值。
242 |
243 |
--------------------------------------------------------------------------------
/posts/css-module.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: css-module
3 | date: 2020-03-30 00:05:24
4 | categories: css
5 | tags: css
6 | ---
7 |
8 | ### 产生的背景
9 | 一个好看的网页 css 样式密不可分，网页中标签的颜色，字体，背景，动画，等等都是用css控制实际的展示效果，通过标签，类名称等不同选择器定义css样式，但久而久之，项目越来越大的时候，不同组件，不同标签之间样式可能会被污染，影响实际展示效果
10 |
11 | ### 实际项目中出现的问题
12 | - 样式被覆盖
13 | - class 名称过长
14 |
15 | ### 配置
16 | css module 目前有四种方式集成到项目，具体请看 https://github.com/css-modules/css-modules/blob/master/docs/get-started.md ， 我们主要学习 webpack 中在css-loader的使用
17 |
18 | #### 通过 css-loader 配置支持 css module实现
19 | ```ts
20 | [
21 | {
22 | test: /\.less$/,
23 | use: [
24 | 'style-loader',
25 | {
26 | loader: 'css-loader',
27 | options: {
28 | modules: true
29 | }
30 | },
31 | "less-loader",
32 | {
33 | loader: 'style-resources-loader',
34 | options: {
35 | patterns: path.resolve(__dirname, './../src/styles/val.less')
36 | }
37 | }
38 | ],
39 | },
40 | ]
41 | ```
42 | 设置 css-loader 的 `options.modules` 为true 配置css module支持
43 |
44 | 由于我是在 less中使用，且环境是ts的开发环境，所以在不做设置的情况下，通过css-module 的方式引入less文件会报错
45 |
46 | ```less
47 | // module.less
48 | .main {
49 | color: #fff;
50 | padding: 4px 15px;
51 | background: rgb(163, 25, 25);
52 | border-radius: 4px;
53 | }
54 | ```
55 |
56 | ```tsx
57 | // module.tsx
58 | import React from 'react'
59 | import styles from './index.less'
60 |
61 | console.log(styles) // {main: "zEvk6qCVDzWwH0LgzL_3-"}
62 |
63 | export default () => {
64 | return (
65 | hello
66 | )
67 | }
68 | ```
69 | css-module给 span 元素生成一个独一无二的全局 class 名称 `zEvk6qCVDzWwH0LgzL_3-` ，这样就不会受全局样式命名冲突的影响，使用`styles.main` 即可拿到class 名称， 实际的效果如下
70 | 
71 | 编辑结果如下
72 | 
73 |
74 | > 注意： 由于我使用的是 ts 开发环境，在以es6 引入的方式引入 less文件的时候，会被提示，index.less不是模块，网上看了一下，顶一下 *.less 模块就可以了，[来自这里](https://stackoverflow.com/questions/57635943/how-do-i-make-import-as-style-from-from-x-less-work)，代码如下
75 |
76 | ```ts
77 | // global.d.ts
78 | declare module '*.less' {
79 | const classes: {[key: string]: string};
80 | export default classes;
81 | }
82 | ```
83 |
84 | #### localIdentName 生成的class标识符
85 | 继续之前的操作，在默认不配置 `localIdentName` 的时候，返回的随机class 名称为: `zEvk6qCVDzWwH0LgzL_3-`， 为了统一风格和可读性，我们定义一种class命名格式
86 | ```ts
87 | {
88 | loader: 'css-loader',
89 | options: {
90 | modules: {
91 | localIdentName: '[path][name]__[local]--[hash:base64:5]',
92 | }
93 | }
94 | },
95 | ```
96 | 生成的结果
97 | 
98 | 结果为： `src-components-Module-index__text--3iAYn`
99 | [path]: src/components/Module
100 | [name]: index
101 | [local]: text
102 | [hash:base64:5]: 3iAYn
103 |
104 | - [name] 资源的基本名称
105 | - [path] 资源相对于context查询参数或选项的路径。
106 | - [local] 当前定义的类名称
107 | - [hash:base64:5] base64前5个字符转hash
108 | 至于其他的 标识 名，见 https://github.com/webpack/loader-utils#interpolatename
109 |
110 | > Recommendations:
111 | > - use '[path][name]__[local]' for development
112 | > - use '[hash:base64]' for production
113 |
114 | #### context 设置上下文
115 | ```ts
116 | {
117 | loader: 'css-loader',
118 | options: {
119 | modules: {
120 | localIdentName: '[path][name]__[local]--[hash:base64:5]',
121 | context: path.resolve(__dirname, './../src')
122 | }
123 | }
124 | },
125 | ```
126 | 添加context之后，path的目录就是给予src开始，其结果为 `components-Module-index__text--Tnlj5`
127 | [path]: src/components/Module
128 | [name]: index
129 | [local]: text
130 | [hash:base64:5]: 3iAYn
131 | 除去最后的 hash 不管， name，local 没发生变化，变化的只是 path ， path 的 context 发生了变化
132 |
133 | #### mode ("local" | "global" | "pure")
134 | ```ts
135 | {
136 | loader: 'css-loader',
137 | options: {
138 | modules: {
139 | localIdentName: '[path][name]__[local]--[hash:base64:5]',
140 | context: path.resolve(__dirname, './../src'),
141 | // Using `local` value has same effect like using `modules: true`
142 | mode: 'local'
143 | }
144 | }
145 | },
146 | ```
147 | 还有一些其他的属性，暂时不研究其具体的意义了（主要是不清楚...）
148 | #### hashPrefix `string`
149 | #### getLocalIdent
150 | #### localIdentRegExp
151 |
152 | ### 使用
153 | 基本的使用方式前面已经展示了，需要在具体研究一下 `css-module` 的使用方法
154 | - 选择器作为变量引入到class名
155 | - 全局作用域
156 | ```less
157 | :global {
158 | .main {
159 | color: #fff;
160 | padding: 4px 15px;
161 | background: rgb(163, 25, 25);
162 | border-radius: 4px;
163 | }
164 | .text {
165 | color: gray;
166 | font-size: 16px;
167 | font-weight: bold;
168 | }
169 | }
170 | ```
171 | 这段代码在webpack编译之后和之前没什么区别，会在所有 class 为 `main`, `text` 的元素上生效，此时对于这种类型， `styles.className` 的这种写法是不生效的，因为 styles 对象，是一个空对象
172 | 
173 | 如果需要引入对象只需要引入对应的 class 字符串即可
174 |
175 | - 局部作用域
176 | ```less
177 | :local {
178 | .main {
179 | color: #fff;
180 | padding: 4px 15px;
181 | background: rgb(163, 25, 25);
182 | border-radius: 4px;
183 | }
184 | .text {
185 | color: gray;
186 | font-size: 16px;
187 | font-weight: bold;
188 | }
189 | }
190 | ```
191 | `:local .main` 的使用方式和直接使用 `.main` 实际上是一致的效果，都会生成 `option.localIdentName` 定义的class格式
192 |
193 | - class 继承
194 | ```less
195 | .main {
196 | color: #fff;
197 | padding: 4px 15px;
198 | background: rgb(163, 25, 25);
199 | border-radius: 4px;
200 | &:hover {
201 | background: blue;
202 | }
203 | &::before {
204 | content: 'hi css module';
205 | background: green;
206 | }
207 | }
208 | .text {
209 | composes: main;
210 | color: gray;
211 | font-size: 16px;
212 | font-weight: bold;
213 | }
214 | ```
215 | 同样的代码，text 类下通过 `composes: main;` 引入想要继承的类名称，就可以实现属性，以及伪类，伪元素的继承
216 | 
217 | 而实际上对应的 class 类的对象信息如下
218 | 
219 | `text`属性的第二个 class名称 对应 `main` 的class名称，因为有共同的样式效果
220 |
221 | - class 继承（来自外部文件的继承方式）
222 | ```less
223 | // auto.less
224 | .auto {
225 | background: #14f3b0;
226 | font-size: 14px;
227 | }
228 | ```
229 | ```less
230 | // index.less
231 | .main {
232 | color: #fff;
233 | padding: 4px 15px;
234 | background: rgb(163, 25, 25);
235 | border-radius: 4px;
236 | &:hover {
237 | background: blue;
238 | }
239 | &::before {
240 | content: 'hi css module';
241 | background: green;
242 | }
243 | }
244 | .text {
245 | composes: auto from './auto.less';
246 | color: gray;
247 | font-size: 16px;
248 | font-weight: bold;
249 | }
250 | ```
251 | `text` 元素会引入 auto.less 的 auto类的样式，设置背景色为翠绿色,如下图:
252 | 
253 | 此时 this is text 元素的class名称可以看到 `components-Module-auto__auto` 一个来自 components 的 Module文件下的 auto.less 样式文件的 auto 类
254 |
255 | - 变量的引入
256 | 尝试在 auto.less 中使用变量达到方便维护和开发的效果
257 | ```less
258 | @color: #14f3b0;
259 | .auto {
260 | background: @color;
261 | font-size: 14px;
262 | }
263 | ```
264 | 引入的时候发现并没有效果，样式被编译成了
265 | ```css
266 | .components-Module-auto__auto--KJeL5 {
267 | background: @color;
268 | font-size: 14px;
269 | }
270 | ```
271 | `@color` 并没有被转换成对应的色值， 不过css-loader 支持变量定义, 来看代码
272 | ```less
273 | @value v-auto-color #14f3b0;
274 | @value s-auto-select auto;
275 | @value m-lg (min-width: 960px);
276 | .s-auto-select {
277 | background: v-auto-color;
278 | font-size: 14px;
279 | }
280 | @media m-lg {
281 | body {
282 | background: #000;
283 | }
284 | }
285 | ```
286 | 官方推荐命名：
287 | v-： 变量
288 | s-： 选择器
289 | m-： 媒体查询
290 |
291 | [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)
292 | [webpack/css-loader](https://www.webpackjs.com/loaders/css-loader/)
293 | [css-loader](https://github.com/webpack-contrib/css-loader#modules)
294 | [CSS module 入门](https://segmentfault.com/a/1190000014722978)
295 |
--------------------------------------------------------------------------------
/posts/graphql入门.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: graphql入门
3 | date: 2020-01-23 19:26:08
4 | categories: javascript
5 | tags: [graphql, js]
6 | ---
7 |
8 | ### GraphQL 是什么
9 | #### 一种用于 API 的查询语言
10 | GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。
11 |
12 | ### 背景
13 | - 请求多个接口，页面请求借口过多，多次资源请求，难维护
14 | - 数据过度获取，或者数据字段缺失
15 | - 参数类型校验
16 | - 前端对于接口的处理被动，字段无法变更
17 | - 如何实现代码即文档
18 |
19 | ### GraphQL 特点
20 | - API 聚合
21 | - 请求合并， 字段组合
22 | - 类型系统描述
23 | - 辅助工具，提升开发效率
24 |
25 | ### 浏览器查询语言
26 | 在客户端获取gql聚合数据的时候，需要用到gql提供的查询操作
27 |
28 | #### query 查询
29 | 查询字段： 获取数据，比如查找， 获取所有文章的 id 和 title 字段
30 | ```graphql
31 | query {
32 | article {
33 | result {
34 | id
35 | title
36 | }
37 | }
38 | }
39 | ```
40 |
41 | 查询结果
42 | ```json
43 | {
44 | "data": {
45 | "article": {
46 | "result": [
47 | {
48 | "id": "1",
49 | "title": "JavaScript"
50 | },
51 | {
52 | "id": "2",
53 | "title": "html5新特性"
54 | },
55 | {
56 | "id": "3",
57 | "title": "css3相关特性"
58 | }
59 | ]
60 | }
61 | }
62 | }
63 | ```
64 |
65 | #### mutation 变更
66 | 变更：对数据进行变更，比如增加、删除、修改
67 | 添加tip的count信息 会返回对应tip的详情
68 | ```graphql
69 | mutation {
70 | tipIncrease (id: 1) {
71 | result {
72 | count
73 | }
74 | }
75 | }
76 | ```
77 | 变更的结果
78 | ```json
79 | {
80 | "data": {
81 | "tipIncrease": {
82 | "result": {
83 | "count": 30
84 | }
85 | }
86 | }
87 | }
88 | ```
89 |
90 | #### substription 订阅
91 | 当数据发生更改，进行消息推送
92 |
93 | #### 事例代码
94 | ```js
95 | import Http from './../utils/http'
96 |
97 | /**
98 | * 合并 gql 请求的方法
99 | */
100 | export const gql = async (type, name, ...gqlStr) => {
101 | console.log(`【${type.toUpperCase()}】===【${name}】：`)
102 | console.log([...gqlStr].join('\n'))
103 | try {
104 | const { data } = await Http.post('/graphql', {
105 | query: `
106 | ${type} ${name} {
107 | ${[...gqlStr].join('\n')}
108 | }
109 | `
110 | })
111 | return data
112 | } catch (e) {
113 | throw e
114 | }
115 | }
116 |
117 | /**
118 | * 获取tips 的query数据
119 | */
120 | export const tipsQuery = (page = 0, size = 20) => {
121 | return `
122 | tips(page: ${page}, size: ${size}) {
123 | result {
124 | id
125 | name
126 | count
127 | }
128 | }
129 | `
130 | }
131 |
132 | /**
133 | * 获取banner 信息
134 | */
135 | export const bannerQuery = () => {
136 | return `
137 | banner {
138 | result {
139 | id
140 | desc
141 | url
142 | }
143 | }
144 | `
145 | }
146 |
147 | /**
148 | * 获取文章类型信息
149 | */
150 | export const articleTypeQuery = () => {
151 | return `
152 | articleType {
153 | result {
154 | id
155 | name
156 | }
157 | }
158 | `
159 | }
160 |
161 | /**
162 | * 获取文章信息
163 | */
164 | export const articleQuery = (page = 0, size = 20, type = 0) => {
165 | return `
166 | article(page: ${page}, size: ${size}, type: ${type}) {
167 | result {
168 | id
169 | title
170 | tid
171 | createDate
172 | desc
173 | content
174 | type
175 | editDate
176 | user
177 | }
178 | }
179 | `
180 | }
181 |
182 | /**
183 | * 获取 tips info
184 | */
185 | export const tips = async () => {
186 | const { data } = await gql('query', 'getTips', tipsQuery())
187 | return data
188 | }
189 |
190 | /**
191 | * 获取页面的所有数据信息
192 | */
193 | export const pageAInfo = async () => {
194 | return await gql('query', 'getPageAInfo',
195 | tipsQuery(),
196 | bannerQuery(),
197 | articleTypeQuery(),
198 | articleQuery()
199 | )
200 | }
201 |
202 | /**
203 | * tip increase
204 | */
205 | export const tipIncrease = async (id) => {
206 | return await gql('mutation', 'tipIncrease', `
207 | tipIncrease(id: ${id}) {
208 | result {
209 | count
210 | }
211 | }
212 | `)
213 | }
214 | ```
215 |
216 | ### Schema 和类型
217 | 全称Schema Definition Language。GraphQL实现了一种可读的模式语法，SDL和JavaScript类似，这种语法必须存储为String格式。GraphQL Schema声明了返回的数据和结构。
218 | ```js
219 | const typeDefs = `
220 | type Query {
221 | article(page: Int, size: Int, type: Int): ArticleResponse
222 | articleType: ArticleTypeResponse
223 | }
224 |
225 | type Article {
226 | id: ID!
227 | tid: Int
228 | title: String
229 | createDate: Date
230 | desc: String
231 | content: String
232 | editDate: Date
233 | type: String
234 | user: String
235 | }
236 |
237 | type ArticleType {
238 | id: ID!
239 | name: String
240 | }
241 |
242 | type ArticleResponse implements Response {
243 | code: Int
244 | msg: String
245 | result: [Article]
246 | }
247 |
248 | type ArticleTypeResponse implements Response {
249 | code: Int
250 | msg: String
251 | result: [ArticleType]
252 | }
253 | `
254 | module.exports = typeDefs
255 | ```
256 |
257 | #### 默认量标类型
258 | GraphQL 自带一组默认标量类型
259 | - `Int`：有符号 32 位整数。
260 | - `Float`：有符号双精度浮点值。
261 | - `String`：UTF‐8 字符序列。
262 | - `Boolean`：true 或者 false。
263 | - `ID`：ID 标量类型表示一个唯一标识符，通常用以重新获取对象或者作为缓存中的键。ID 类型使用和 String 一样的方式序列化；然而将其定义为 ID 意味着并不需要人类可读型。
264 |
265 | #### 自定义量标类型
266 | 自定义量标类型用于定义除 默认量标类型 的其他类型，如 Date 格式
267 | - `resolve`中 类型定义是通过 `GraphQLScalarType` 事例化对象，在其对应的回调函数中执行类型格式化操作
268 | - 通过 `scalar` 申明一个新类型
269 | ```js
270 | const resolve = {
271 | Date: new GraphQLScalarType({
272 | name: 'Date',
273 | description: '自定义Date标量类型',
274 |
275 | // 对来自客户端的值进行处理, 对变量的处理
276 | parseValue(value) {
277 | console.log('parseValue', value)
278 | return moment(value, 'YYYY-MM-DD hh:mm:ss')
279 | },
280 |
281 | // 返回给客户端的值进行处理
282 | serialize(value) {
283 | console.log('serialize', value)
284 | return moment(new Date(value))
285 | },
286 |
287 | // parseLiteral则会对Graphql的参数进行处理，参数会被解析转换为AST抽象语法树
288 | parseLiteral(ast) {
289 | if (ast.kind === Kind.INT) {
290 | return moment(new Date(ast.value))
291 | }
292 | return null
293 | }
294 | })
295 | }
296 | // 在 defs 中注册新类型
297 | // commmon.defs.js
298 | const typeDefs = `
299 | # 新增 Date 数据结构
300 | scalar Date
301 |
302 | interface Response {
303 | code: Int
304 | msg: String
305 | }
306 | `
307 | module.exports = typeDefs
308 | ```
309 |
310 |
311 | ### resolver 解析器
312 | 解析器提供了将gql的操作(查询，突变或订阅)转换为数据的行为，在这个过程中，resolver可能会进行数据库的操作，resolver函数包含四个参数
313 | - obj 上一个resolve的解析结果 (数据层级多的时候可用) 最顶层为 undefined
314 | - args 传递用于查询的参数，id 或者 page，size…
315 | - context 解析器上下文，包含请求状态
316 | - Info 包含与当前查询有关的特定于字段的信息
317 |
318 | #### 解析客户端查询语句
319 | ```gql
320 | query {
321 | article {
322 | code
323 | msg
324 | result {
325 | id,
326 | author {
327 | name
328 | }
329 | desc
330 | }
331 | }
332 | }
333 | ```
334 | 这段 query 查询，在resolve中是这样被解析的
335 | - 进行第一次解析，当前的类型是query 类型，resolver 名为 article
336 | - 使用article的 resolver 获取解析数据，第一层解析结束
337 | - 之后对第一层解析的返回值，进行第二层解析，article类型为 `ArticleResponse` ， 执行 code 解析 Int， msg 解析String，result 解析 自定义对象类型 `Article`
338 | - id在 `Article` 类型中为标量类型，解析结束
339 | - author 在 `Article` 类型中为自定义类型 `Author` ，执行 `Author` 的 resolver解析
340 | - 解析name String 结束 `Author` 的 解析
341 | - 解析desc String 至此完成 `Article` 解析
342 | - `ArticleResponse` 中 result 自定义类型解析完毕，至此，`ArticleResponse` 字段全部解析完成
343 |
344 | > 遇到一个Query之后，尝试使用它的Resolver取值，之后再其Resolver对返回值进行解析，这个过程是递归的，直到所解析Field的类型是 Scalar Type （标量类型） 为止
345 |
346 | ### GraphQL 工作流程
347 | 如图
348 | 
349 |
350 | ### 演示地址
351 | gql 请求页面: [地址访问](http://www.daiwei.site/graphql/){:target="_blank"}
352 |
353 | 非gql请求页面: [地址访问](http://106.14.207.56:8080/b){:target="_blank"}
354 |
355 | ### 参考于
356 | [graphql从入门到实战](https://juejin.im/post/5cd68a9b51882568047fa6eb)
357 |
358 | [apollo.vue](https://apollo.vuejs.org/)
359 |
360 | [30分钟理解GraphQL核心概念](https://segmentfault.com/a/1190000014131950)
361 |
362 |
--------------------------------------------------------------------------------
43 |
44 |
45 |