知识点总结

<table class="text"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555

- 高阶组件 <轮子> - 高阶组件 <椅子> - 组件 compose(<真皮>,<轮子>)(椅子) => 真皮轮椅 compose(<轮子>)(椅子) => 轮椅 compose(<真皮>)(椅子) => 真皮椅子       异步的几种方式和对比   redux-thunk：代码简单，实现简单，使reducer能接受一个函数(disptach/getState)       function createThunkMiddleware(extraArgument) {       return ({ dispatch,getState }) => next => action => {         if (typeof action === 'function') {           return action(dispatch,getState,extraArgument);         }             return next(action);       };     }   函数内部极为复杂   如果需要为每一个异步操作都如此定义一个action，显然action不易维护,action的形式不统一,有的返回object,有的是函数       export function fetchData() {       return (dispatch) => {         dispatch(getData())         getPeople()           .then((data) => {             dispatch(getDataSuccess(data))           })           .catch((err) => console.log('err:',err))       }     }   Redux-promise：和redux-thunk连用，自动派发状态pending/success/fail       function fetchData() {       return {         type: FETCH_DATA,        payload: getPeople()       }     }   action还是不统一，要抽离异步操作，混杂在里面   Redux-saga：       https://github.com/Pines-Cheng/blog/issues/9   - takeLatest/takeEvery/throttle方法，可以便利的实现对事件的仅关注最近事件、关注每一次、事件限频 - 提供cancel/delay方法，可以便利的取消、延迟异步请求 - 提供race(effects),[…effects]方法来支持竞态和并行场景   系统交互的常驻进程 Saga = Worker + Watcher   感觉像是同步的在写代码，还加入了takeLasted等的一些流程控制方法   saga 就像是应用程序中一个单独的线程，它独自负责处理副作用，不改变同步化的代码，看起来清晰明了   Take // 监听一个type为 'FETCH_REQUESTED' 的action的执行   put - disptach   Selector - 获取state数据   Call - 异步代码、fork不会等上一个返回，异步执行       export function fetchData() {       return {         type: FETCHING_DATA       }     }     function* fetchData (action) {       try {         const data = yield getPeople()         yield put({ type: FETCHING_DATA_SUCCESS,data })       } catch (e) {         yield put({ type: FETCHING_DATA_FAILURE })       }     }   Rx.js - obserbel的思想 流的概念，复杂的用户操作   总结：    Saga 更适用于较为复杂的应用，除此之外的其他所有情况 Redux Promise Middleware 都是十分合适的。笔者十分喜欢 Saga 中的 Generators 和 async-await，这些特性很有趣       Vue双向数据绑定+依赖收集       1、data属性，递归调用defineReactive，重写getter和setter方法   2、每个data属性维护一个dep实例（发布者）getter方法中，将每个模板上用到这个data属性创建一个watcher实例，render时，粗发getter,收集依赖，更改时，在setter中notify这些watcher,调用update方法   首先在 observer 的过程中会注册 get 方法，该方法用来进行「依赖收集」。在它的闭包中会有一个 Dep 对象，这个对象用来存放 Watcher 对象的实例。其实「依赖收集」的过程就是把 Watcher实例存放到对应的 Dep 对象中去。get 方法可以让当前的 Watcher 对象（Dep.target）存放到它的 subs 中（addSub）方法，在数据变化时，set 会调用 Dep 对象的 notify 方法通知它内部所有的 Watcher 对象进行视图更新。   这是 Object.defineProperty 的 set/get 方法处理的事情，那么「依赖收集」的前提条件还有两个：   1. 触发 get 方法； 2. 新建一个 Watcher 对象。   这个我们在 Vue 的构造类中处理。新建一个 Watcher 对象只需要 new 出来，这时候 Dep.target已经指向了这个 new 出来的 Watcher 对象来。而触发 get 方法也很简单，实际上只要把 render function 进行渲染，那么其中的依赖的对象都会被「读取」，这里我们通过打印来模拟这个过程，读取 test 来触发 get 进行「依赖收集」。       ssr   react   Babel-node bable支持jsx语法   renderString 将react的页面转换   css/png hook   拼接模板，把css/js挂载上去   更好的 SEO   无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，       MVC、MVVM       model与服务端model相联通   view数据绑定的声明、 指令的声明、 事件绑定的声明   viewModel 具体业务逻辑,联通mdoel       1. View 传送指令到 Controller 2. Controller 完成业务逻辑后，要求 Model 改变状态 3. Model 将新的数据发送到 View，用户得到反馈       SEO   1、扁平化结构（大网站一般为树形结构）   2、辅助导航、面包屑导航、次导航   关键词keywords   描述description   H1H2H3使用 head标签   关键字强调   图片Alt属性   标题title   控制文章内部链接数量   添加外链       通用sass设计   各种color：主题色/背景色/辅助色/active,非active的状态   字体：字体颜色/大小/权重 - 会和UI定好（标题、副标题、正文)/高清方案   布局样式：flex的居中   尺寸：图标尺寸/常见间隔   装饰：圆角/边框(一般都为0.5px)/阴影   文字超出效果   Normarlize   兼容方案：ios取消点击灰色背景等       移动端适配   rem: html的大小，pc浏览器一般为16，在监视器看，不一样，动态设置根元素fontSize   计算：750px*1334px设计稿中 1rem  =   lib-flexible   计算缩放比：var scale = 1 / dpr   自动转换rem-sass插件           元素添加data-dpr属性，并且动态改写data-dpr的值 - 给元素添加font-size属性，并且动态改写font-size的值     数据库范式   数据库表中的字段都是单一属性的，不可再分   数据库表中不存在非关键字段对任一候选关键字段的部分函数依赖，即符合第二范式(只能依赖唯一主键)   传递依赖：在第二范式的基础上，数据表中如果不存在非关键字段对任一候选关键字段的传递函数依赖则符合3NF。       web app与hybrid app差别   web app   开发快，迭代快，跨多个平台和终端   无法获取系统级别的通知，提醒，动效等等/体验较差   hybrid app   访问本地资源（通讯录，相册）/体验强   维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本）   更新慢       关系型数据库与非关系数据库   性能更高、成本更低、好扩展   后期表多了，不容易维护，和其他mysql库交互也不好，数据迁移很难       node   单线程，单线程的好处，减少了内存开销，操作系统的内存换页。   如果某一个事情，进入了，但是被I/O阻塞了，所以这个线程就阻塞了。   非阻塞I/O， 不会傻等I/O语句结束，而会执行后面的语句。   非阻塞就能解决问题了么？比如执行着小红的业务，执行过程中，小刚的I/O回调完成了，此时怎么办？？   事件机制，事件环，不管是新用户的请求，还是老用户的I/O完成，都将以事件方式加入事件环，等待调度。   区别：   Node.js不是一种独立的语言,运行在JavaScript引擎上（V8）   Node.js没有web容器   缺点：   单进程，单线程，只支持单核CPU，不能充分的利用多核CPU服务器，计算量大的不行，一蹦就全蹦了，高IO       Bridge:   实现：JS调用Native，借助iframe来实现，只要发现是jsbridge://开头的地址，就不进行内容的加载，转而执行相应的调用逻辑：   - H5向Native通信，以下为常见场景：   1. H5打开一个原生界面，H5只作为一个入口，后续逻辑均在原生界面处理      sample://route/module ID/sub ID   2. H5唤起一个原生界面执行一些逻辑，需要将结果返回给H5      sample://login/callback      使用消息分发机制（一种Android客户端架构设计分享 中也有说明）通知WebView调用此JavaScript回调      (所需的传值如登录状态、用户ID可封装为JSON格式，通过callback参数方式返回给H5。H5中处理此回调提取返回值，如登录成功，接下来可执行用户登录后相关的刷新操作) - Native向H5通信   1. 通常表现原生界面将某些结果传给H5页面或触发某些H5的行为      sample://lifecircle/status      OC环境中如果要调用js方法，就可以通过window.WebViewJavascriptBridge在加上具体方法来调用。，该方法返回js脚本的执行结果      在原生代码中根据原生页面的生命周期触发一个JS回调，有需要监听页面生命周期的H5自行实现该回调即可，实现后JS即可获取原生页面状态从而进行对应处理   新版：初始化桥接对象，OC可以通过WebViewJavascriptBridge来调用JS里面的各种方法     在这个文件中也初始化了一个iframe实现webview的url跳转功能，从而激发webview代理方法的调用     OC环境和javascript环境的bridege都建立完毕。OC和javascript环境都有一个bridge对象，这个对象都保存着注册的每个方法和回调，并且维护着各自的消息队列、回调id、requestId等一系列信息。   初始化一个WebViewJavascriptBridge对象 ->有javascript环境注入的提供给OC调用的方法registerHandler，javascript调用OC环境方法的callHandler -> _fetchQueue这个方法的作用就是把javascript环境的方法序列化成JSON字符串，然后传入OC环境再转换->handleMessageFromObjC就是处理OC发给javascript环境的方法       - 分别在OC环境和javascript环境都保存一个bridge对象，里面维持着requestId,callbackId,以及每个id对应的具体实现。 - OC通过javascript环境的window.WebViewJavascriptBridge对象来找到具体的方法，然后执行。 - javascript通过改变iframe的src来出发webview的代理方法webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler从而实现把javascript消息发送给OC这个功能。       算法   快排   （1）在数据集之中，选择一个元素作为"基准"（pivot）。   （2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。   （3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。       var quickSort = function(arr) {     　　if (arr.length <= 1) { return arr; }     　　var pivotIndex = Math.floor(arr.length / 2);     　　var pivot = arr.splice(pivotIndex,1)[0];     　　var left = [];     　　var right = [];     　　for (var i = 0; i < arr.length; i++){     　　　　if (arr[i] < pivot) {     　　　　　　left.push(arr[i]);     　　　　} else {     　　　　　　right.push(arr[i]);     　　　　}     　　}     　　return quickSort(left).concat([pivot],quickSort(right));     };   斐波那契数列求和       function fibonacci(n) {         if(n==0 || n == 1)             return n;         return fibonacci(n-1) + fibonacci(n-2);     }       var fibonacci = (function () {       var memory = {}       return function(n) {         if(n==0 || n == 1) {           return n         }         if(memory[n-2] === undefined) {           memory[n-2] = fibonacci(n-2)         }         if(memory[n-1] === undefined) {           memory[n-1] = fibonacci(n-1)         }         return memory[n] = memory[n-1] + memory[n-2]       }     })()       webSocket   WebSocket 协议基于 TCP，解决过去为了实现即时通讯而采用的轮询方案，解决了大量交换 HTTP header，信息交换效率低的问题。在浏览器和服务器之间建立双向连接,  测试mocha   supertest   - 为 app 创建 http 服务器 - 对各个 API 发出请求 - 对响应内容进行断言   如何写入cookie   写一个中间件，判断为测试库的话，就req.cookie写一个已有的       escribe('User API',function () {           // 为每个单元测试初始化数据       // 每个单元测试中可以通过 context 来访问相关的数据       beforeEach(function (done) {         co(function* () {           self.user1 = yield UserModel.create({ username: 'user1' })           self.token = jwt.sign({ _id: self.user1._id },config.jwtSecret,{ expiresIn: 3600 })           done()         }).catch(err => {           console.log('err: ',err)           done()         })       })           // 正常情况下访问 /user       it('should get user info when GET /user with token',function (done) {         const self = this         request           .get('/user')           .set('Authorization',self.token)           .expect(200)           .end((err,res) => {             res.body._id.should.equal(self.user1._id)             done()           })       })       输入URL发生什么       SPA路由/历史管理       前端工程化       webpack原理       设计模式       路由                  版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。