-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
589 lines (318 loc) · 192 KB
/
atom.xml
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
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>TedQin</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2019-10-17T06:29:42.963Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>Ted Qin</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>什么时候需要保存this?</title>
<link href="http://yoursite.com/2019/10/17/%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E9%9C%80%E8%A6%81%E4%BF%9D%E5%AD%98this/"/>
<id>http://yoursite.com/2019/10/17/什么时候需要保存this/</id>
<published>2019-10-17T06:25:05.000Z</published>
<updated>2019-10-17T06:29:42.963Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://www.imooc.com/wenda/detail/312105" target="_blank" rel="noopener">https://www.imooc.com/wenda/detail/312105</a></p></blockquote><p>javascript中this什么时候可以直接调用？什么时候要把它赋值给一个变量后才能调用？</p><ul><li><p>1) 避免多层this</p><pre><code> var o = { f1: function() { console.log(this); var f2 = function() { console.log(this); }(); } } o.f1()</code></pre><p> 上面代码包含两层this，结果运行后，第一层指向该对象，第二层指向全局对象。一个解决方法是在第二层改用一个指向外层this的变量。</p><pre><code> var o = { f1: function() { console.log(this); var that = this; var f2 = function() { console.log(that); }(); } } o.f1()</code></pre><p> 上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。</p></li></ul><ul><li><p>2) 避免数组处理方法中的this</p><p> 数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。</p><pre><code> var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v+' '+item); }); }} o.f()</code></pre><p> 上面代码中，foreach方法的参数函数中的this，其实是指向window对象，因此取不到o.v的值。</p><p> 解决这个问题的一种方法，是使用中间变量。</p><pre><code> var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { var that = this; this.p.forEach(function (item) { console.log(that.v+' '+item); }); }} o.f()</code></pre><p> 另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。</p><pre><code> var o = { v: 'hello', p: [ 'a1', 'a2' ], f: function f() { this.p.forEach(function (item) { console.log(this.v+' '+item); }, this); }} o.f()</code></pre></li><li><p>3) 避免回调中的this</p><pre><code> var o = new Object();o.f = function (){ console.log(this === o);}o.f()</code></pre><p> 上面代码表示，如果调用o对象的f方法，其中的this就是指向o对象。</p><p> 但是，如果将f方法指定给某个按钮的click事件，this的指向就变了。</p><pre><code> $('#button').on('click', o.f);</code></pre></li></ul>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://www.imooc.com/wenda/detail/312105" target="_blank" rel="noopener">https://www.imooc.com/wenda/detail/312105
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>vue的一些知识整理</title>
<link href="http://yoursite.com/2019/10/10/vue%E7%9A%84%E4%B8%80%E4%BA%9B%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86/"/>
<id>http://yoursite.com/2019/10/10/vue的一些知识整理/</id>
<published>2019-10-10T15:56:43.000Z</published>
<updated>2019-10-12T10:01:39.095Z</updated>
<content type="html"><![CDATA[<h2 id="父子组件传值"><a href="#父子组件传值" class="headerlink" title="父子组件传值"></a>父子组件传值</h2><ul><li><p>父组件向子组件传值</p><pre><code> //html //1.父组件通过v-bind给子组件传值 <todo-item v-bind:content="data1"></todo-item> //script //定义全局组件 Vue.component("TodoItem", { //2.子组件通过props接收 props: ['content'] //也可以用对象形式进行参数校验 //props: {content: String}//只允许接受string template: "<li>{{content}}</li>" }) var app = new Vue({ ... data: { data1: "ted" } })</code></pre></li><li><p>子组件向父组件传值</p><pre><code> //html //2.父组件使用子组件时，通过v-on监听触发的事件 //一旦子组件delete触发，就会触发父组件handleItemDelete这个方法 <todo-item v-on:delete="handleItemDelete"> </todo-item> //script var TodoItem = { data: { data1: 'ted' }, template: "<li v-on:click='handleButtonClick'>点我删除</li>", methods: { handleButtonClick: function() { //1.子组件通过$emit向外触发delete事件,并传出data1 this.$emit("delete", data1) } } } var app = new Vue({ ... methods: { //3.父组件使用子组件的值 handleItemDelete: function(data1) { alert("data1") } } })</code></pre></li></ul><h2 id="非父子组件传值"><a href="#非父子组件传值" class="headerlink" title="非父子组件传值"></a>非父子组件传值</h2><ul><li><p>观察者模式</p><pre><code> <!-- 非父子组件传值 --><!-- 通过观察者模式实现，两个子组件之间传值，点击其中一个组件，另一个组件的值变成这个被点击组件的值--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./vue.js"></script></head><body><div id="root"> <child :content="content1"></child> <child :content="content2"></child></div><script> //1. 在Vue的prototype上定义一个bus Vue.prototype.bus = new Vue() Vue.component('child', { props: { content: String }, template: '<div v-on:click="handleClick">{{content}}</div>', methods: { handleClick: function() { //使用bus向外触发事件 this.bus.$emit('change', this.content) } }, //利用钩子函数，监听change事件 mounted: function() { var this_ = this this.bus.$on('change', function(msg) { this_.content = msg }) } }) var vm = new Vue({ el: "#root", data: { content1: "tedqin", content2: "teddymoon" } })</script></body></html></code></pre></li><li>vuex</li></ul><h2 id="全局组件和局部组件"><a href="#全局组件和局部组件" class="headerlink" title="全局组件和局部组件"></a>全局组件和局部组件</h2><ul><li><p>全局组件：用Vue.component()方法定义，其他组件可以直接使用</p><pre><code> //html //父组件通过v-bind给子组件传值 <todo-item v-bind:content="data1"></todo-item> //script //定义全局组件 Vue.component("TodoItem", { //子组件通过props接收 props: ['content'] template: "<li>{{content}}</li>" }) var app = new Vue({ ... data: { data1: "ted" } })</code></pre></li><li><p>局部组件：像普通对象一样定义，其他组件引用的时候需要注册</p><pre><code> //html //父组件通过v-bind给子组件传值 <todo-item v-bind:content="data1"></todo-item> //script //定义局部组件 var TodoItem = { props: ['content'] template: "<li>{{content}}</li>" } var app = new Vue({ ... //把局部逐渐注册到到需要引用它的组件的vue实例中 components: { TodoItem: TodoItem } data: { data1: "ted" } })</code></pre></li></ul><h2 id="v-bind-v-model-v-for和v-on"><a href="#v-bind-v-model-v-for和v-on" class="headerlink" title="v-bind,v-model,v-for和v-on"></a>v-bind,v-model,v-for和v-on</h2><ul><li><p>v-bind：用于给标签/组件绑定属性，实现动态管理标签的属性</p><pre><code> //html <a v-bind:href="url">网络测试</a> //v-bind绑定href //script var app = new Vue({ ... data { url: "http://www.baidu.com" } })</code></pre><pre><code> //html //父组件通过v-bind给子组件传值 <todo-item v-bind:content="data1"></todo-item> //script Vue.component("TodoItem", { //子组件通过props接收 props: ['content'] template: "<li>{{content}}</li>" }) var app = new Vue({ ... data: { data1: "ted" } })</code></pre></li><li><p>v-model：实现数据和视图层的双向绑定，只能定义在input，select，textarea上，绑定之后随着input输入的变化，对应绑定的内容也变化，反之也变化</p><pre><code> //html <input type="text" v-model="inputValue" /> //script var app = new Vue({ ... data: { inputValue: '' } })</code></pre></li><li><p>v-for：循环data</p><pre><code> //循环数组 //html <li v-for="item of list">{{item.text}}</li> <li v-for="(item, index) of list">{{item.text}}---{{index}}</li> <li v-for="(item, index) of list" :key="item.id">{{item.text}}---{{index}}</li> <!--用index的时候最好再用key唯一标识--> //script var app = new Vue({ ... data: { list: [{ id: "1", text: "ted" }, { id: "2", text: "xxy" }] } })</code></pre><pre><code> //循环对象 //html <li v-for="(item, key, index) of list">{{item}}--{{key}}--{{index}}</li> <!--输出"ted--name--0 23--age--1"--> //script var app = new Vue({ ... data: { list: { name: "ted", age: "23" } } })</code></pre></li><li><p>v-on：绑定事件</p><pre><code> //html <button v-on:click="handleButtonClick">提交</button> //script var app = new Vue({ ... methods: { handleButtonClick: function() { alert("click!") } } })</code></pre></li></ul><h2 id="v-text和v-html的区别"><a href="#v-text和v-html的区别" class="headerlink" title="v-text和v-html的区别"></a>v-text和v-html的区别</h2><ul><li>v-text: 等同于插值表达式双括号，绑定当前元素的innerText，会原封不动的输出纯文本</li><li><p>v-html: 绑定当前元素的innerText，会以html规则编译文本内容后输出</p><pre><code> //html <div v-text="name"></div> <!--输出<h1>ted</h1>--> <div v-html="name"></div> <!--输出h1大小的ted--> //script var vm = new Vue({ el:"#app", data: { name:"<h1>ted</h1>" } })</code></pre></li></ul><h2 id="计算属性-computed"><a href="#计算属性-computed" class="headerlink" title="计算属性 computed"></a>计算属性 computed</h2><p>和逻辑有关的计算都放在computed中，不方便直接在模版中计算</p><p>例子：</p><ul><li><p>get属性</p><pre><code> <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })</code></pre></li><li><p>set属性</p><pre><code> computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }</code></pre></li></ul><p>上面代码中，get作用是通过监听firstName和lastName的改变，获取fullName的值；<br>set的所用是传入需要改变的fullName，并根据参数更新firstName和lastName的值</p><ul><li>和method的不同：<ul><li>计算属性中的值依赖data中相关联的值</li><li>computed存在缓存机制：每次重新渲染时，对于method，每次都会重新计算；对于计算属性，仅当data中依赖的值改变时，计算属性的值才改变，</li></ul></li></ul><h2 id="侦听器-watch"><a href="#侦听器-watch" class="headerlink" title="侦听器 watch"></a>侦听器 watch</h2><p>和computed相似，同样是监听data中的值，当data发生改变时，执行相应的操作<br>也具有缓存效果</p><ul><li>和computed的不同：<ul><li>computed是定义并计算一个新的值，这个值依赖data中的某些值 </li><li>watch是监听data中已经存在的变量，并在data发生改变的时候做相应的操作</li><li>computed比watch更加简洁</li></ul></li></ul><h2 id="样式绑定"><a href="#样式绑定" class="headerlink" title="样式绑定"></a>样式绑定</h2><ul><li><p>class绑定：<code>:class=</code>等价于<code>: v-bind:class=</code> ，将class绑定在一个标签上，可以控制class的显示与否</p><ul><li><p>class的对象绑定 <code>:class="{activated: isActivated}"</code></p><pre><code> <style> .activated {color: red} </style> <div @click="handleDivClick> :class="{activated: isActivated}"></div> var vm = new Vue({ el: "#app", data: { isActicated: false }, method: { handleDivClick: function() { this.isActivated = true } } })</code></pre></li><li>class的数组绑定 <code>:class="[activated]"</code></li></ul></li></ul><pre><code> ``` <style> .activated {color: red} </style> <div @click="handleDivClick> :class="{activated: isActivated}"></div> var vm = new Vue({ el: "#app", data: { activated: "" }, method: { handleDivClick: function() { this.activated = "activated" } } }) ``` </code></pre><ul><li><p>内联样式绑定</p><ul><li><p>style的对象绑定 </p><pre><code> <div :style="styleObj" v-on:click="handleDivClick"></div> var vm = new Vue({ el: "#app", data: { styleObj: { color: red } }, methods: { handleDivClick: function() { this.styleObj.color = red } } })</code></pre></li><li><p>style的数组绑定 </p><p> 只需要把<code><div :style="styleObj"</code>换成<code><div :style=[styleObj, {fontSize: '20px'}]</code></p></li></ul></li></ul><h2 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h2><ul><li>v-if: 隐藏的元素不会被渲染到页面上，还可以用v-else</li><li><p>v-show: 隐藏的元素已经被渲染到页面上，只是用了display:none来隐藏</p><pre><code> <div v-if="show">{{name}}</div> <div v-else="show">Bye</div> <div v-if="show===a">a</div> <div v-else-if="show===b">b</div> <div v-else>bye</div> <div v-show="show">{{name}}</div> var vm = new Vue({ el: "#app", data: { name: 'ted', show: false }, })</code></pre></li></ul><h2 id="vue中的set方法"><a href="#vue中的set方法" class="headerlink" title="vue中的set方法"></a>vue中的set方法</h2><pre><code>arr=[1,2,3,4,5]data={ name: "ted", age: "23"}</code></pre><p>改变页面中的渲染出来的对象或数组，不能直接用<code>arr[3]=5</code>这样直接改，只能修改数组/对象的引用，即<code>this.arr=[1,2,5,4,5]</code>全部修改</p><ul><li><p>也可以用Vue.set()方法修改，set方法也可以添加新的数据</p><pre><code> //改数组 Vue.set(this.arr, 0, 11) //[11,2,3,4,5] //改对象 Vue.set(this.data, "name", "teddy") //{name:"teddy", age: "23"}</code></pre></li></ul><h2 id="slot插槽："><a href="#slot插槽：" class="headerlink" title="slot插槽："></a>slot插槽：</h2><p>父组件向子组件传递dom结构: 直接在子组件中定义，然后在template中引入<slot></slot></p><pre><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./vue.js"></script></head><body> <div id="app"> <child> <h1>tedqin</h1> </child> </div> <script> Vue.component('child', { template: `<div> <p>hello</p> <slot></slot> </div> ` }) var vm = new Vue({ el: "#app" }) </script></body></html></code></pre><pre><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./vue.js"></script></head><body> <div id="app"> <child> <header slot="header"></header> <footer slot="footer"></footer> </child> </div> <script> Vue.component('child', { template: `<div> <slot name="header"></slot> <p>hello</p> <slot name="footer"></slot> </div> ` }) var vm = new Vue({ el: "#app" }) </script></body></html></code></pre><h2 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h2><pre><code><component :is="type"></component>//Vue.component('type1', { template: '<div>type1</div>'})Vue.component('type2', { template: '<div>type2</div>'})//data:{ type: 'type1'}//methods: { handleBtnClick: function(){ this.type = (this.type==="type1" ? 'type2' : 'type1') }}</code></pre><p>根据is属性绑定的data数据中的type动态切换组件</p><h2 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h2><p>将第一次展示在页面中的资源保存在内存中，下次直接从内存中取资源，可以优化性能，提高静态页面展示效率</p><p>##vue的路由</p><ul><li><p>src/main.js</p><ul><li><p>入口文件，定义了一个根实例 </p><pre><code>import Vue from 'vue'import App from './App'import router from './router'new Vue({ el: "app", //app挂载点在./index.html上 router, //使用router，在路由配置文件index.js中配置路由 components: { App }, //使用子组件App template: '<App/>' //渲染App这个局部组件})</code></pre></li></ul></li><li><p>src/App.js</p><ul><li><p>App局部组件，也就是main.js渲染的页面，也就是主页面</p><pre><code><template> <div id="app> <router-view> //显示当前路由地址所对应的路由内容 </div></template><script>export default { name: 'App'}<sctipt><style>#app { ...}<style></code></pre></li></ul></li><li><p>src/router/index.js</p><ul><li><p>路由配置项 </p><p><code>`</code><br>import Vue from ‘vue’<br>import Router from ‘vue-router’<br>import Home from ‘@/pages/home/Home’<br>import Home from ‘@/pages/list/List’</p></li></ul></li></ul><pre><code>Vue.use(Router)export default new Router({ routes: [ { path: '/', //1.当用户访问根路径的时候 name: 'Home', components: Home // 2.访问home这个单文件组件 }, { //增加其他页面的配置项 path: '/list', name: 'List', components: List } ]})``` </code></pre><ul><li><p>@/pages/home/Home.vue</p><ul><li><p>主页，单文件组件</p><pre><code><template> <div>home</div></template><script>export default { name: 'Home'}</script><style></style></code></pre></li></ul></li><li><p>@/pages/list/List.vue</p><ul><li><p>list页面，单文件组件</p><pre><code><template> <div>list</div></template><script>export default { name: 'List'}</script><style></style></code></pre></li></ul></li></ul><h2 id="vue是单页面应用，用替换a标签"><a href="#vue是单页面应用，用替换a标签" class="headerlink" title="vue是单页面应用，用替换a标签"></a>vue是单页面应用，用<router-link>替换a标签</router-link></h2><pre><code><router-link to="/list">点击跳转</router-link></code></pre>]]></content>
<summary type="html">
<h2 id="父子组件传值"><a href="#父子组件传值" class="headerlink" title="父子组件传值"></a>父子组件传值</h2><ul>
<li><p>父组件向子组件传值</p>
<pre><code> //html
//1.父组件通过
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="vue" scheme="http://yoursite.com/tags/vue/"/>
</entry>
<entry>
<title>html5知识整理</title>
<link href="http://yoursite.com/2019/09/30/html5%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86/"/>
<id>http://yoursite.com/2019/09/30/html5知识整理/</id>
<published>2019-09-30T02:53:19.000Z</published>
<updated>2019-09-30T03:25:41.606Z</updated>
<content type="html"><![CDATA[<h2 id="h5变化"><a href="#h5变化" class="headerlink" title="h5变化"></a>h5变化</h2><ul><li>表单增强属性<ul><li>日期、时间、搜索</li><li>表单验证 （required必填，minmax输入范围，正则）</li><li>placeholder 表单空的时候显示什么内容 自动聚焦</li></ul></li><li>新增语义<ul><li>header/footer</li><li>section/article 区域 （块级）</li><li>nav 导航（快级）</li><li>aside（快级）</li><li>em/strong 强调</li></ul></li><li>新API<ul><li>离线 （applicationCache ）</li><li>音视频 （audio, vidio）</li><li>图形 （canvas）</li><li>实时通信（websoket）</li><li>本地存储（localStorage, indexDB）</li><li>设备能力（地图定位，手机摇一摇）</li></ul></li></ul><h2 id="Doctype-作用？标准模式与兼容模式各有什么区别"><a href="#Doctype-作用？标准模式与兼容模式各有什么区别" class="headerlink" title="Doctype 作用？标准模式与兼容模式各有什么区别?"></a>Doctype 作用？标准模式与兼容模式各有什么区别?</h2><p><!DOCTYPE html>声明位于HTML文档中的第一行，不是一个HTML标签，它的作用：告知web浏览界面应该使用哪个html版本。</p><ul><li><p>标准模式：<code><!DOCTYPE html></code></p><p> h5及以后的版本，以该浏览器支持的最高标准运行</p></li><li><p>兼容模式：<br><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code></p><p> h5以前的版本，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。<br>需引用DTD（文档类型说明），因为html 4.0.1是基于SGML(Standard Generalized Markup Language，标准通用标记语言)。DTD指定了标记语言的规则，确保了浏览器能正确的渲染内容。</p></li></ul><h2 id="行内元素有哪些？块级元素有哪些？-空-void-元素有那些？"><a href="#行内元素有哪些？块级元素有哪些？-空-void-元素有那些？" class="headerlink" title="行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？"></a>行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</h2><p>定义：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。</p><ul><li>行内元素有：a b span img input select strong（强调的语气）</li><li>块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p</li><li>空元素：<ul><li>常见: br hr img input link meta</li><li>不常见: area base col command embed keygen param source track wbr</li></ul></li></ul><p>不同浏览器（版本）、HTML4（5）、CSS2 等实际略有差异 参考: <a href="http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements" target="_blank" rel="noopener">http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements</a></p><h2 id="哪些元素可以自闭合？"><a href="#哪些元素可以自闭合？" class="headerlink" title="哪些元素可以自闭合？"></a>哪些元素可以自闭合？</h2><ul><li>表单元素 input</li><li>img</li><li>br, hr</li><li>meta, link</li></ul><h2 id="HTML和DOM的关系"><a href="#HTML和DOM的关系" class="headerlink" title="HTML和DOM的关系"></a>HTML和DOM的关系</h2><ul><li>HTML只是一个字符串</li><li>DOM由HTML解析而来</li><li>JS可以维护DOM</li></ul><h2 id="form-作用"><a href="#form-作用" class="headerlink" title="form 作用"></a>form 作用</h2><ul><li>直接提交表单</li><li>使用submit / reset按钮</li><li>便于浏览器保存表单</li><li>第三方库可以整体取值</li><li>第三方库可以进行表单验证</li></ul><h2 id="简述一下你对-HTML-语义化的理解？"><a href="#简述一下你对-HTML-语义化的理解？" class="headerlink" title="简述一下你对 HTML 语义化的理解？"></a>简述一下你对 HTML 语义化的理解？</h2><ul><li>用正确的标签做正确的事情。</li><li>html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;</li><li>即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;</li><li>搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;</li><li>使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。</li></ul><h2 id="介绍一下你对浏览器内核的理解？"><a href="#介绍一下你对浏览器内核的理解？" class="headerlink" title="介绍一下你对浏览器内核的理解？"></a>介绍一下你对浏览器内核的理解？</h2><p>主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。</p><p>渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后渲染到用户的屏幕上。</p><p>JS 引擎则：解析和执行 javascript 来实现逻辑和控制 DOM 进行交互。</p><p>最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。</p><h2 id="html-中-title-属性和-alt-属性的区别？"><a href="#html-中-title-属性和-alt-属性的区别？" class="headerlink" title="html 中 title 属性和 alt 属性的区别？"></a>html 中 title 属性和 alt 属性的区别？</h2><p><code><img src="#" alt="alt信息" /></code></p><p>当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。</p><p><code><img src="#" alt="alt信息" title="title信息" /></code></p><ul><li>当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息；</li><li>当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。</li><li>除了纯装饰图片外都必须设置有意义的值，搜索引擎会分析。</li></ul><h3 id="另外还有一些关于-title-属性的知识："><a href="#另外还有一些关于-title-属性的知识：" class="headerlink" title="另外还有一些关于 title 属性的知识："></a>另外还有一些关于 title 属性的知识：</h3><ul><li>title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。</li><li>title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。</li><li>title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。</li></ul><h2 id="为什么我们要弃用table标签？"><a href="#为什么我们要弃用table标签？" class="headerlink" title="为什么我们要弃用table标签？"></a>为什么我们要弃用table标签？</h2><p>table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西<strong>全都下载完之后</strong>才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全都加载完之后才显示出来的话那也太慢了，所以table标签现在我们基本放弃使用了。</p><h2 id="head子元素大概分为三类，分别是："><a href="#head子元素大概分为三类，分别是：" class="headerlink" title="head子元素大概分为三类，分别是："></a>head子元素大概分为三类，分别是：</h2><ul><li>描述网页基本信息的</li><li>指向渲染网页需要其他文件链接的</li><li>各大厂商根据自己需要定制的</li></ul><h3 id="网页基本信息"><a href="#网页基本信息" class="headerlink" title="网页基本信息"></a>网页基本信息</h3><p>一个网页，首先得有个标题，就跟人有名字一样。除此之外，还可以根据实际需要补充一些基本信息。</p><ul><li>文档标题（浏览器标签中显示的文本）：<code><title>深入了解 head 元素</title></code></li><li>编码格式： 如果你的页面出现乱码，那一般就是编码格式不对</li><li>视窗设置：</li><li>搜索引擎优化相关内容：</li><li>IE浏览器版本渲染设置：</li></ul><h3 id="其他文件链接"><a href="#其他文件链接" class="headerlink" title="其他文件链接"></a>其他文件链接</h3><ul><li>CSS 文件：</li><li>JavaScript 文件：<code><script src=“script.js"></script></code></li></ul><p>但是为了让页面的样子更早的让用户看到，一般把JS文件放到body的底部</p><h3 id="厂商定制"><a href="#厂商定制" class="headerlink" title="厂商定制"></a>厂商定制</h3><p>同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？其实就是看有没有设置下面这三个内容</p><p><code><meta itemprop="name" content="这是分享的标题"/></code><br><code><meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" /></code><br><code><meta name="description" itemprop="description" content="这是要分享的内容" /></code></p><h2 id="移动端项目需要注意的4个问题"><a href="#移动端项目需要注意的4个问题" class="headerlink" title="移动端项目需要注意的4个问题"></a>移动端项目需要注意的4个问题</h2><h3 id="meta中设置viewport"><a href="#meta中设置viewport" class="headerlink" title="meta中设置viewport"></a>meta中设置viewport</h3><p>阻止用户手滑放大或缩小页面，需要在 index.html中添加meta元素,设置viewport。</p><p><code><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></code></p><h3 id="CSS样式统一问题"><a href="#CSS样式统一问题" class="headerlink" title="CSS样式统一问题"></a>CSS样式统一问题</h3><p>我们需要重置页面样式，因为在不同的手机浏览器上，默认的css样式不是统一的。 解决方法：使用reset.css重置所有元素的默认样式</p><h3 id="一像素边框问题"><a href="#一像素边框问题" class="headerlink" title="一像素边框问题"></a>一像素边框问题</h3><p>有的手机分辨率比较高，是2倍屏或3倍屏，手机上的浏览器就会把CSS中的1像素值展示为2个或3个物理宽度</p><p>解决方法： 添加一个border.css库，将利用scroll缩放的原理将边框重置。当我们需要使用一像素边框时只需要在标签上添加对应类名，如设置底部一像素边框就在标签上加入”border-bottom”的class名</p><h3 id="300毫秒点击延迟问题"><a href="#300毫秒点击延迟问题" class="headerlink" title="300毫秒点击延迟问题"></a>300毫秒点击延迟问题</h3><p>在移动端开发中，某些机型上使用click事件会延迟300ms才执行，这样影响了用户体验。 解决方法： 引入fastclick.js。</p><h2 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h2><ul><li>块级一般不能嵌套块级（但div可以嵌套p）</li><li>a可以包含div</li></ul><h2 id="html问题"><a href="#html问题" class="headerlink" title="html问题"></a>html问题</h2><ul><li>doctype的意义是什么<ul><li>让浏览器以标准模式渲染</li><li>让浏览器知道元素的合法性</li></ul></li><li>html xhtml h5的关系<ul><li>html属于sgml</li><li>xhtml属于xml，是html进行xml严格化的结果 </li><li>h5是一个独立的规范，比hxtml宽松</li></ul></li><li>H5有什么变化<ul><li>新的语义化元素section article header footer aside</li><li>表单增强</li><li>新的API</li></ul></li><li>em和i有什么区别<ul><li>都是斜体，em是语义化标签，i是纯样式</li></ul></li><li>语义化的意义<ul><li>维护的开发者容易理解</li><li>机器容易理解结构</li><li>有助于seo</li></ul></li><li>哪些标签可以自闭和（不能嵌套其他标签）<ul><li>input</li><li>img</li><li>br（换行） hr（水平线）</li><li>meta link</li></ul></li></ul>]]></content>
<summary type="html">
<h2 id="h5变化"><a href="#h5变化" class="headerlink" title="h5变化"></a>h5变化</h2><ul>
<li>表单增强属性<ul>
<li>日期、时间、搜索</li>
<li>表单验证 （required必填，minmax
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="html5" scheme="http://yoursite.com/tags/html5/"/>
</entry>
<entry>
<title>es6中的async&await异步调用方法</title>
<link href="http://yoursite.com/2019/09/25/es6%E4%B8%AD%E7%9A%84async-await%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8%E6%96%B9%E6%B3%95/"/>
<id>http://yoursite.com/2019/09/25/es6中的async-await异步调用方法/</id>
<published>2019-09-25T09:13:18.000Z</published>
<updated>2019-09-25T14:46:38.249Z</updated>
<content type="html"><![CDATA[<h2 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h2><h3 id="async函数"><a href="#async函数" class="headerlink" title="async函数"></a>async函数</h3><ul><li><p>async定义的函数返回一个Promise对象，可以使用then方法添加回调函数。</p><pre><code> async function timeout() { return 'hello world' } console.log(timeout()); console.log('虽然在后面，但是我先执行');</code></pre><p> <img src="https://images2017.cnblogs.com/blog/1013082/201802/1013082-20180205150941373-8971393.png" alt=""></p></li><li><p>它和promise一样，有异步回掉功能</p><pre><code> async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('虽然在后面，但是我先执行');</code></pre><p> <img src="https://images2017.cnblogs.com/blog/1013082/201802/1013082-20180205151306873-401823311.png" alt=""></p></li><li><p>async原理：如果async成功返回一个promise对象，实际会调用Promise.resolve()返回，否则会调用Promise.reject()</p><pre><code> async function timeout(flag) { if (flag) { return 'hello world' } else { throw 'my god, failure' } } console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。 console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。</code></pre><p> <img src="https://images2017.cnblogs.com/blog/1013082/201802/1013082-20180205154012701-1737597385.png" alt=""></p></li></ul><h3 id="await"><a href="#await" class="headerlink" title="await"></a>await</h3><p>当函数执行时，一旦遇到await(后面定义的也是一个promise对象)就会先返回，等异步操作完成，再执行后面的语句。</p><p>await只能出现在async函数内部，等待async函数返回或执行promise，</p><pre><code>// 2s 之后返回双倍的值function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } )}async function testResult() { let result = await doubleAfter2seconds(30); console.log(result);}testResult(); //2s后输出60</code></pre><p>代码执行过程：</p><ol><li>调用testResult()函数，遇到await，开始等待（后面的promise执行完毕）</li><li>执行await后的doubleAfter2seconds(30)，返回promise开始执行，2s后执行完毕，值为60并返回</li><li>await拿到60，赋值给result，等待结束，代码继续运行，执行console</li></ol><p>这里如果计算多个值，可以像写同步代码那样，避免回掉地狱</p><pre><code>async function testResult() { let first = await doubleAfter2seconds(30); let second = await doubleAfter2seconds(50); let third = await doubleAfter2seconds(30); console.log(first + second + third);}</code></pre><h2 id="demo"><a href="#demo" class="headerlink" title="demo"></a>demo</h2><ul><li>获取股票报价的函数（可以用.then处理async函数）</li></ul><pre><code>async function getStockPriceByName(name) { const symbol = await getStockSymbol(name); const stockPrice = await getStockPrice(symbol); return stockPrice;}getStockPriceByName('goog').then(function (result) { console.log(result);});</code></pre><ul><li>在api中，把结果return 出去</li></ul><pre><code>export async function getRetailUnitPrice () {const reqBody = await get('/race/spot/racespot/enter/dayahead')return reqBody}</code></pre><h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h2><ul><li>async函数返回的promise对象，必须等到内部所有await命令后面的对象执行完，才会执行then</li><li>当async返回一个常量，返回Promise.resolve(常量)自动构建promise返回值</li><li>当async函数没有返回值的时候，返回Promise.resolve(undefiend)自动构建promise返回值</li></ul><pre><code>async function getTitle(url) { let response = await fetch(url); let html = await response.text(); return html.match(/<title>([\s\S]+)<\/title>/i)[1];}getTitle('https://tc39.github.io/ecma262/').then(console.log)// "ECMAScript 2017 Language Specification"</code></pre><h2 id="与promise相比"><a href="#与promise相比" class="headerlink" title="与promise相比"></a>与promise相比</h2><p>优点：处理.then链，不必把回掉嵌套在.then中，只要await即可</p><pre><code>function sing() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(`来一首好听的歌吧~~~`); }, 1000); }); } async function demo() { try { const v = await say(); const s = await sing(); console.log(v); // 输出：hello, joel。今年我 26 岁 console.log(s) // 来一首好听的歌吧~~~ } catch (e) { console.log(e) } } demo();</code></pre><p>如果使用原来的Promise 就是把回调放在then()中。</p>]]></content>
<summary type="html">
<h2 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h2><h3 id="async函数"><a href="#async函数" class="headerlink" title="asy
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>浅谈Javascript的垃圾回收机制与内存泄漏问题</title>
<link href="http://yoursite.com/2019/09/25/%E6%B5%85%E8%B0%88Javascript%E7%9A%84%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%E4%B8%8E%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F%E9%97%AE%E9%A2%98/"/>
<id>http://yoursite.com/2019/09/25/浅谈Javascript的垃圾回收机制与内存泄漏问题/</id>
<published>2019-09-25T02:37:12.000Z</published>
<updated>2019-09-25T03:50:46.938Z</updated>
<content type="html"><![CDATA[<h2 id="javascript的垃圾回收机制"><a href="#javascript的垃圾回收机制" class="headerlink" title="javascript的垃圾回收机制"></a>javascript的垃圾回收机制</h2><p>Javascript浏览器具有自动垃圾回收机制<br>最常用的方式是<b>标记清除(mark-and-sweep)</b></p><p>当申明一个变量时，就将这个变量标记为“进入环境”。从逻辑上来讲，永远都不能释放进入环境的变量。当变量离开环境时，标记为“离开环境”</p><p>js定期进行垃圾回收（非实时），销毁带“离开环境”标记的变量，回收内存</p><pre><code>function test(){var a = 10 ; // 被标记 ，进入环境 var b = 20 ; // 被标记 ，进入环境}test(); // 执行完毕 之后 a、b又被标离开环境，被回收</code></pre><h2 id="内存泄漏"><a href="#内存泄漏" class="headerlink" title="内存泄漏"></a>内存泄漏</h2><p>内存泄漏是指一块被分配的内存即不能使用也不能回收</p><p>浏览器会使用自动垃圾回收机制，但是也会产生一些内存泄漏问题</p><h3 id="1-意外的全局变量"><a href="#1-意外的全局变量" class="headerlink" title="1. 意外的全局变量"></a>1. 意外的全局变量</h3><pre><code>function foo(arg) { bar = "this is a hidden global variable";}</code></pre><p>bar没被申明，会变成一个全局变量，在页面关闭之前不会被释放</p><h3 id="2-被遗忘的计时器或callback函数"><a href="#2-被遗忘的计时器或callback函数" class="headerlink" title="2. 被遗忘的计时器或callback函数"></a>2. 被遗忘的计时器或callback函数</h3><pre><code>var someResource = getData();setInterval(function() { var node = document.getElementById('Node'); if(node) { // 处理 node 和 someResource node.innerHTML = JSON.stringify(someResource)); }}, 1000);</code></pre><p>这里如果node元素从dom中移除，该定时器还是会存在；同时因为回掉函数中用了someResource，定时器外面的someResource也不会被释放</p><h3 id="3-闭包"><a href="#3-闭包" class="headerlink" title="3. 闭包"></a>3. 闭包</h3><pre><code>function bindEvent(){ var obj=document.createElement('xxx') obj.onclick=function(){ // Even if it is a empty function }}</code></pre><p>闭包可以维持函数内的局部变量，使得闭包内返回的函数可以调用返回外的局部变量，使其得不到释放，所以会形成内存泄漏</p><pre><code>// 将事件处理函数定义在外面function bindEvent() { var obj = document.createElement('xxx') obj.onclick = onclickHandler}// 或者在定义事件处理函数的外部函数中，删除对dom的引用function bindEvent() { var obj = document.createElement('xxx') obj.onclick = function() { // Even if it is a empty function } obj = null}</code></pre><p>解决方法：将事件处理函数定义在外部，或者在定义事件处理函数的外部函数中，删除对dom的引用。</p><h3 id="4-没有清理的dom元素引用"><a href="#4-没有清理的dom元素引用" class="headerlink" title="4. 没有清理的dom元素引用"></a>4. 没有清理的dom元素引用</h3><pre><code>var elements = { button: document.getElementById('button'), image: document.getElementById('image'), text: document.getElementById('text')};function removeButton() { document.body.removeChild(document.getElementById('button')); // 此时，仍旧存在一个全局的 #button 的引用 // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。}</code></pre><p>虽然我们用removeChild移除了button，但是还在elements对象里保存着#button的引用，换言之，DOM元素还在内存里面。</p><h2 id="避免内存泄漏的方法"><a href="#避免内存泄漏的方法" class="headerlink" title="避免内存泄漏的方法"></a>避免内存泄漏的方法</h2><ul><li>减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收</li><li>注意程序逻辑，避免“死循环”之类的</li><li>避免创建过多的对象</li></ul><p>总而言之需要遵循一条原则：不用了的东西要及时归还</p><h2 id="内存泄漏查看方法"><a href="#内存泄漏查看方法" class="headerlink" title="内存泄漏查看方法"></a>内存泄漏查看方法</h2><p>chrome中</p><p><img src="http://www.ruanyifeng.com/blogimg/asset/2017/bg2017041704.png" alt=""></p><ol><li>打开开发者工具，选择 performance 面板</li><li>勾选 Memory和screenshots</li><li>点击左上角的录制按钮。</li><li>在页面上进行各种操作，模拟用户的使用情况。</li><li>一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。</li></ol><p>如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。<br><img src="http://www.ruanyifeng.com/blogimg/asset/2017/bg2017041705.png" alt=""></p><p>反之，就是内存泄漏了。<br><img src="http://www.ruanyifeng.com/blogimg/asset/2017/bg2017041706.png" alt=""></p>]]></content>
<summary type="html">
<h2 id="javascript的垃圾回收机制"><a href="#javascript的垃圾回收机制" class="headerlink" title="javascript的垃圾回收机制"></a>javascript的垃圾回收机制</h2><p>Javascript
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>vue源码研读</title>
<link href="http://yoursite.com/2019/09/24/vue%E6%BA%90%E7%A0%81%E7%A0%94%E8%AF%BB/"/>
<id>http://yoursite.com/2019/09/24/vue源码研读/</id>
<published>2019-09-24T09:59:08.000Z</published>
<updated>2019-09-24T10:50:13.112Z</updated>
<content type="html"><![CDATA[<p>不定时更新</p><h2 id="computed原理"><a href="#computed原理" class="headerlink" title="computed原理"></a>computed原理</h2><h3 id="Vue的响应式系统"><a href="#Vue的响应式系统" class="headerlink" title="Vue的响应式系统"></a>Vue的响应式系统</h3><p>当把一个普通的js对象传给Vue实例的data时，Vue将遍历这个对象的所有属性，并使用Object.defineProperty把这些属性全部转换为getter/setter</p><p>目的：在data被访问和修改的时候通知变化</p><p>组成：</p><ul><li>observe：遍历data中的属性，使用Object.defineProperty把它们转化为getter/setter，这一步被称为<em>数据劫持</em></li><li>dep：每个属性都拥有自己的消息订阅器dep，用于存放所有订阅了该属性的观察者对象</li><li>watcher：观察者对象，通过dep实现对响应属性的监听，当监听到改变时，触发自己的回掉函数</li></ul><h3 id="computed监听的原理步骤"><a href="#computed监听的原理步骤" class="headerlink" title="computed监听的原理步骤"></a>computed监听的原理步骤</h3><ol><li>数据劫持：组件初始化，computed和data建立各自的响应系统，observe遍历data的属性，并使用Object.defineProperty把它们转化为getter/setter</li><li>computed初始化：注册一个watcher观察者对象，实例化一个dep消息订阅器</li><li>computed调用：<ul><li>触发getter</li><li>调用watcher.depend()向自身的dep中添加所监听data属性的watcher</li></ul></li><li>当data中某个被监听的数据发生变化时，出发setter，遍历dep，调用watcher.update()完成更新</li></ol><h2 id="双向绑定原理"><a href="#双向绑定原理" class="headerlink" title="双向绑定原理"></a>双向绑定原理</h2><p>model=>view：使用基本的事件监听即可实现</p><p>view=>model：原理的computed相似，也是通过数据劫持+观察者模式来实现</p><p>步骤：</p><ul><li><ol><li>数据劫持：使用Object.defineProperty()给data添加getter和setter属性，</li></ol></li><li><ol start="2"><li>创建一个消息订阅器类dep，存放订阅者，订阅者是收集的发生变化的数据</li></ol></li><li><ol start="3"><li>创建一个观察者类watcher，在初始化时把自己添加进dep，观察者是view需要修改的节点</li></ol></li></ul>]]></content>
<summary type="html">
<p>不定时更新</p>
<h2 id="computed原理"><a href="#computed原理" class="headerlink" title="computed原理"></a>computed原理</h2><h3 id="Vue的响应式系统"><a href="
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="vue" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/vue/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
<category term="vue" scheme="http://yoursite.com/tags/vue/"/>
</entry>
<entry>
<title>浅谈原型、执行上下文和作用域</title>
<link href="http://yoursite.com/2019/09/24/%E6%B5%85%E8%B0%88%E5%8E%9F%E5%9E%8B%E3%80%81%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F/"/>
<id>http://yoursite.com/2019/09/24/浅谈原型、执行上下文和作用域/</id>
<published>2019-09-23T17:28:59.000Z</published>
<updated>2019-09-23T17:29:07.289Z</updated>
<content type="html"><![CDATA[<h2 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h2><h3 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h3><p>一个普通函数，内部使用了this变量</p><h3 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h3><p>对构造函数使用new运算符，就能生成实例对象，并且this会绑定在实例上</p><h3 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h3><p>一个实例对象，自身不存在的属性可以通过它的隐式原型<em>proto</em>向指向的原型对象找，若没有，则同理顺着该原型对象的<em>proto</em>到该原型对象的原型对象上找</p><h3 id="原型（原型对象）"><a href="#原型（原型对象）" class="headerlink" title="原型（原型对象）"></a>原型（原型对象）</h3><p>原型对象是每个函数的prototype属性指向的一个对象，可以理解为一个仓库，可以在上面定义其他属性，它自带一个constructor,指向回它的构造函数</p><ul><li>每创建一个函数，该函数就会自带一个prototype属性（显式原型），该属性是一个指针，指向该函数的原型对象。</li><li>若这个函数是构造函数，则由它构建的实例会自带一个<em>proto</em>属性（隐式原型），该属性是一个指针，指向原型对象</li><li>原型对象上有一个属性constructor，该属性也是一个指针，指向其关联的构造函数</li><li>如果Person的原型Person.prototype对象变成了某一个类的实例Person{},这个实例又会指向一个新的原型对象Object.prototype</li></ul><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/Gt9Oqvr24En4sIVKEL4jWTXBFwK6rK92CrYeFuEm7iM!/b/dFMBAAAAAAAA&bo=8gQMAgAAAAARB8g!&rf=viewer_4" alt=""><br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/tsDoSJkiA.YG52uhACzzXXkUPbZGarFDWC*80acIV9M!/b/dL8AAAAAAAAA&bo=GQMhAgAAAAARBwk!&rf=viewer_4" alt=""></p><h2 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h2><p>针对对象或者函数，可以理解为this的值</p><ul><li>分类：<ul><li>全局上下文：window为全局上下文</li><li>函数（局部）上下文</li></ul></li><li>特点：<ul><li>动态的，函数调用的时候时创建，函数调用结束时释放</li></ul></li></ul><h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><p>一块地盘，一个代码段所在的区域。</p><ul><li>分类：<ul><li>全局作用域</li><li>函数作用域</li><li>块级作用域</li></ul></li><li>作用：隔离变量，不同作用域下同名的变量名不会产生冲突</li><li>特点：<ul><li>静态的，只要定义好了就一直存在，不会改变</li></ul></li></ul><h3 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h3><p>由多个具有从属关系的作用域形成的链，查找变量时沿着作用域链查找</p><ul><li>自由变量：当前作用域没有定义的变量，可以顺着作用域链到父级作用域中去找</li></ul>]]></content>
<summary type="html">
<h2 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h2><h3 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>Javascript的几种继承方法</title>
<link href="http://yoursite.com/2019/09/23/Javascript%E7%9A%84%E5%87%A0%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E6%B3%95/"/>
<id>http://yoursite.com/2019/09/23/Javascript的几种继承方法/</id>
<published>2019-09-23T14:36:54.000Z</published>
<updated>2019-09-23T15:12:43.741Z</updated>
<content type="html"><![CDATA[<p>整理一下目前javascript的几种继承方式</p><h2 id="1-利用构造函数和call-apply"><a href="#1-利用构造函数和call-apply" class="headerlink" title="1. 利用构造函数和call/apply"></a>1. 利用构造函数和call/apply</h2><h3 id="缺点：子类无法继承父类原型上的属性"><a href="#缺点：子类无法继承父类原型上的属性" class="headerlink" title="缺点：子类无法继承父类原型上的属性"></a>缺点：子类无法继承父类原型上的属性</h3><pre><code>function Parent() { this.name = 'parentName'}function Child() { Parent.call(this) this.age = 10}</code></pre><h2 id="2-利用原型链"><a href="#2-利用原型链" class="headerlink" title="2. 利用原型链"></a>2. 利用原型链</h2><h3 id="缺点：如果改变一个实例的属性，其他的实例也会被改变，原因是公用一个原型"><a href="#缺点：如果改变一个实例的属性，其他的实例也会被改变，原因是公用一个原型" class="headerlink" title="缺点：如果改变一个实例的属性，其他的实例也会被改变，原因是公用一个原型"></a>缺点：如果改变一个实例的属性，其他的实例也会被改变，原因是公用一个原型</h3><pre><code>function Parent() { this.name = 'parentName'}function Child() { this.age = 10}Child.prototype = new Parent()</code></pre><h2 id="3-组合继承"><a href="#3-组合继承" class="headerlink" title="3. 组合继承"></a>3. 组合继承</h2><pre><code>function Parent() { this.name = 'parentName'}function Child() { Parent.call(this) this.age = 10}Child.prototype = new Parent()</code></pre><h2 id="4-es6-class继承"><a href="#4-es6-class继承" class="headerlink" title="4. es6 class继承"></a>4. es6 class继承</h2><pre><code>class Point { constructor(x, y) { this.x = x; this.y = y; }}class ColorPoint extends Point { constructor(x, y, color) { super(x, y); this.color = color; }}let cp = new ColorPoint(25, 8, 'green');</code></pre>]]></content>
<summary type="html">
<p>整理一下目前javascript的几种继承方式</p>
<h2 id="1-利用构造函数和call-apply"><a href="#1-利用构造函数和call-apply" class="headerlink" title="1. 利用构造函数和call/apply"><
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>深浅拷贝</title>
<link href="http://yoursite.com/2019/09/23/%E6%B7%B1%E6%B5%85%E6%8B%B7%E8%B4%9D/"/>
<id>http://yoursite.com/2019/09/23/深浅拷贝/</id>
<published>2019-09-22T16:27:23.000Z</published>
<updated>2019-09-23T15:13:20.631Z</updated>
<content type="html"><![CDATA[<p>简单的概念：</p><ul><li>浅拷贝：将原对象/数组的引用赋值给新对象，新对象/数组只是一个引用<ul><li>改变新对象的时候，同时改变原对象 </li></ul></li><li>深拷贝：创建一个新的对象/数组，将原对象/数组的各项属性的值拷贝过来<ul><li>改变新对象的时候，不改变原对象</li></ul></li></ul><h2 id="只对第一层做拷贝：浅拷贝"><a href="#只对第一层做拷贝：浅拷贝" class="headerlink" title="只对第一层做拷贝：浅拷贝"></a>只对第一层做拷贝：浅拷贝</h2><h3 id="对数组-基本类型数组"><a href="#对数组-基本类型数组" class="headerlink" title="对数组(基本类型数组)"></a>对数组(基本类型数组)</h3><ul><li><p>直接遍历</p><pre><code> let arr = [1,2,3,4] let newArray=[] 遍历{ newArray.push(item) }</code></pre></li><li><p>slice() <code>let newArray = arr.slice()</code></p></li><li>concat() <code>let newArray = arr.concat()</code></li></ul><h3 id="对对象"><a href="#对对象" class="headerlink" title="对对象"></a>对对象</h3><ul><li>直接遍历</li><li><p>Object.assign()</p><pre><code> var obj = {name: 'ted', age:23} var copyObj = Object.assign({}, obj)</code></pre></li><li>扩展运算符…(数组同样适用) <code>let copyObj = {...obj}</code></li></ul><h2 id="深拷贝：拷贝所有层级"><a href="#深拷贝：拷贝所有层级" class="headerlink" title="深拷贝：拷贝所有层级"></a>深拷贝：拷贝所有层级</h2><ul><li><p>JSON.parse(JSON.stringify(XXXX))</p><pre><code> let arr = [ {number1: 1}, {number2: 2}, {number3: 3} ] let copyArr = JSON.parse(JSON.stringify(arr))</code></pre></li><li><p>递归</p><pre><code> function myCopy(obj) { let copyObj = obj.constructor === Array ? [] : {} for (let i in obj) { if (typeof obj[i] === 'object') { copyObj[i] = myCopy(obj[i]) } else { copyObj[i] = obj[i] } } }</code></pre></li></ul>]]></content>
<summary type="html">
<p>简单的概念：</p>
<ul>
<li>浅拷贝：将原对象/数组的引用赋值给新对象，新对象/数组只是一个引用<ul>
<li>改变新对象的时候，同时改变原对象 </li>
</ul>
</li>
<li>深拷贝：创建一个新的对象/数组，将原对象/数组的各项属性的值拷贝过来<u
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>牛客网JavascriptV8输入格式</title>
<link href="http://yoursite.com/2019/08/03/%E7%89%9B%E5%AE%A2%E7%BD%91JavascriptV8%E8%BE%93%E5%85%A5%E6%A0%BC%E5%BC%8F/"/>
<id>http://yoursite.com/2019/08/03/牛客网JavascriptV8输入格式/</id>
<published>2019-08-03T15:38:20.000Z</published>
<updated>2019-08-03T22:42:28.094Z</updated>
<content type="html"><![CDATA[<p>相比Leetcode，牛客和赛码网等网站对于Javascript真的太不友好了，光是输入就可以折腾半天。整理了一下牛客网上Javascript V8的输入</p><ol><li><p>输入一行，空格隔开</p><pre><code> 1 2</code></pre><pre><code> while (line = readline()) { var lines = line.split(' ') var a = parseInt(lines[0]) var b = parseInt(lines[1]) } console.log(a, b)</code></pre></li><li><p>多行，每行输入一个</p><pre><code> 2 1 2</code></pre><pre><code> var lines = [] while (line = readline()) { lines.push(parseInt(line)) } console.log(lines)</code></pre></li><li><p>多行，第一行为参数,后面行为数组</p><pre><code> //第一行为参数m和n，接下里为数组 2 3 //m, n 1 2 3 4 11 22 33 44 </code></pre><pre><code> var lines = readline().split(' ') var n = parseInt(lines[0]) var m = parseInt(lines[1]) var Arr1 = readline().split(' ') var Arr2 = readline().split(' ') console.log(n,m,Arr1,Arr2)</code></pre></li></ol>]]></content>
<summary type="html">
<p>相比Leetcode，牛客和赛码网等网站对于Javascript真的太不友好了，光是输入就可以折腾半天。整理了一下牛客网上Javascript V8的输入</p>
<ol>
<li><p>输入一行，空格隔开</p>
<pre><code> 1 2
</code></pre>
</summary>
<category term="javascript" scheme="http://yoursite.com/categories/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
<category term="基础" scheme="http://yoursite.com/tags/%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>vue2.0仿去哪儿网移动端Webapp遇到的问题</title>
<link href="http://yoursite.com/2019/07/31/vue2.0%E4%BB%BF%E5%8E%BB%E5%93%AA%E5%84%BF%E7%BD%91%E7%A7%BB%E5%8A%A8%E7%AB%AFWebapp%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/"/>
<id>http://yoursite.com/2019/07/31/vue2.0仿去哪儿网移动端Webapp遇到的问题/</id>
<published>2019-07-31T15:20:07.000Z</published>
<updated>2019-08-01T02:52:01.197Z</updated>
<content type="html"><![CDATA[<h2 id="vue2-0仿去哪儿网移动端Webapp遇到的问题"><a href="#vue2-0仿去哪儿网移动端Webapp遇到的问题" class="headerlink" title="vue2.0仿去哪儿网移动端Webapp遇到的问题"></a>vue2.0仿去哪儿网移动端Webapp遇到的问题</h2><p>github地址：<a href="https://github.com/tedqin/Travel" target="_blank" rel="noopener">https://github.com/tedqin/Travel</a><br>demo：<a href="https://tedqin.github.io/Travel/" target="_blank" rel="noopener">https://tedqin.github.io/Travel/</a></p><p>使用vue2.0对去哪儿网的移动端web页面的复现，做个总结。</p><h2 id="为什么使用单页面应用"><a href="#为什么使用单页面应用" class="headerlink" title="为什么使用单页面应用"></a>为什么使用单页面应用</h2><h3 id="多页面应用"><a href="#多页面应用" class="headerlink" title="多页面应用"></a>多页面应用</h3><ul><li>每次页面跳转，后端返回一个新的html<ul><li>优点：首屏时间快、seo效果好（搜索引擎可以识别跳转的多个链接）</li><li>缺点：页面切换慢（每次跳转需发送http请求）</li></ul></li></ul><h3 id="单页面应用"><a href="#单页面应用" class="headerlink" title="单页面应用"></a>单页面应用</h3><ul><li>js感知路由变化，动态清除页面内容并将新页面渲染<ul><li>优点：页面切换快</li><li>缺点：首屏时间慢，seo差</li></ul></li></ul><h2 id="移动web端配置"><a href="#移动web端配置" class="headerlink" title="移动web端配置"></a>移动web端配置</h2><ul><li>使用rem单位</li><li>防止手指放大缩小页面，修改index.js</li></ul><pre><code><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></code></pre><h2 id="组件开发"><a href="#组件开发" class="headerlink" title="组件开发"></a>组件开发</h2><p>合理拆分组件，提高开发效率。父组件通过import方式导入子组件，并且</p><pre><code>export default { name: 'xxx', components: {注册子组件名}</code></pre><h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2><p>使用场景：当组件的内容希望父组件去定制</p><h2 id="stylus"><a href="#stylus" class="headerlink" title="stylus"></a>stylus</h2><p>style库，增加开发效率。<br>其中，<code>.a >>> .b</code>具有穿透scoped限制的效果</p><h2 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h2><p>为了防止图片加载的过程中，页面抖动（图片未加载完毕的时候，文字会在上方，加载完毕后会抖动）</p><pre><code>.wrapper width: 100% height: 0 overflow: hidden padding-bottom: 26.7% //图片的宽高比</code></pre><h2 id="vuex进行非父子组件数据传递"><a href="#vuex进行非父子组件数据传递" class="headerlink" title="vuex进行非父子组件数据传递"></a>vuex进行非父子组件数据传递</h2><h3 id="一般使用"><a href="#一般使用" class="headerlink" title="一般使用"></a>一般使用</h3><p>vuex中有几个关键：单向数据的改变过程<br><code>state</code>存放公用数据，组件改数据必须调用<code>actions</code>，做一些异步处理或者批量的同步操作。然后actions调用<code>mutations</code>，只有通过改变mutations的值才能改变state</p><ul><li>在state中设置默认值<br> <code>attr = 'aaa'</code></li><li>在组件中通过dispatch向actions派发数据（如果没有异步请求，可以直接使用commit，跳过这步）<br> <code>this.$store.dispatch('actionsName', data)</code></li><li><p>在actions中通过commit向mutations发送数据</p><pre><code> actionnName(tcx, data) { tcx.commit('mutationsName', data) }</code></pre></li><li><p>然后在mutations中修改state中的值</p><pre><code> mutationsName(state, data) { state.attr = data }</code></pre></li></ul><h3 id="高级使用"><a href="#高级使用" class="headerlink" title="高级使用"></a>高级使用</h3><ul><li>引入mapState, mapMutations <code>import [mapState, mapMutations] from 'vuex</code></li><li>把mapState添加到计算属性（compute）中，把mapMutations添加到方法（methods）中<pre><code> computed: { ...mapState({ currentCity: 'city }) }, methods: { ...mapMutations( ['changeCity'] ) }</code></pre></li></ul><h2 id="axios发送ajax请求"><a href="#axios发送ajax请求" class="headerlink" title="axios发送ajax请求"></a>axios发送ajax请求</h2><ul><li>使用生命周期函数mounted函数获取ajax数据，此时vue实例被挂载，但dom还没有渲染，可以节省性能 </li><li>请求url：<code>axios.get('xxx/xxx.json')</code></li><li><p>axios返回的是promise对象，可以使用then</p><pre><code> methods: { getCityInfo () { axios.get('/Travel/static/mock/city.json') .then(this.handleGetCityInfoSucc) }, handleGetCityInfoSucc (res) { res = res.data if (res.ret && res.data) { const data = res.data this.cities = data.cities this.hotCities = data.hotCities } ...</code></pre></li><li>对以上代码的解释：<ul><li>在mounted钩子函数里面定义一个A方法，只要页面加载完毕就执行A方法</li><li>A方法用于获取后端的数据，它是一个promise函数，只要获取到了函数就then一个B函数</li><li>B函数可以接收一个res参数，这个参数就是返回的结果 </li></ul></li><li>ajax请求一般放在最外层的组件，这样只需要一次请求就可以获取所有页面的内容</li></ul><h2 id="ajax获取动态数据"><a href="#ajax获取动态数据" class="headerlink" title="ajax获取动态数据"></a>ajax获取动态数据</h2><ul><li>在路由里的地址后面写:id，表示把对应的id参数存在了id变量中</li><li>在获取ajax请求的地址上，可以写<code>axios.get('xxx/xxx.json?id=' + this.$route.params.id)</code></li><li>也可以写<code>axios.get('xxx/xxx.json', {params: {id: this.$route.params.id}})</code></li></ul><h2 id="router-link"><a href="#router-link" class="headerlink" title="router-link"></a>router-link</h2><ul><li>vue中的内置路由组件<br> <code><router-link to='/city'></router-link></code> </li><li>使用前先在router/index.js中配置路由 </li><li>可以通过配置tag属性改成别的标签</li></ul><h2 id="单行内容超出范围"><a href="#单行内容超出范围" class="headerlink" title="单行内容超出范围"></a>单行内容超出范围</h2><p>当单行文字内容超出显示范围，而显示<code>......</code>时，可以</p><pre><code>overflow: hiddenwhite-space: nowraptext-overflow: ellipsis</code></pre><h2 id="betterscroll"><a href="#betterscroll" class="headerlink" title="betterscroll"></a>betterscroll</h2><p>页面滚动插件</p><h2 id="函数节流"><a href="#函数节流" class="headerlink" title="函数节流"></a>函数节流</h2><p>当鼠标在字母表上来回移动的时候，touchMove执行的频率是非常高的，通过函数节流限制下执行的频率：增加延时器</p><h2 id="localstorage"><a href="#localstorage" class="headerlink" title="localstorage"></a>localstorage</h2><p>自动缓存，刷新页面的时候已经选择的城市不发生改变</p><ul><li>相当于cookie，但是用法要简单很多</li><li>用法：<br> <code>localStorage.arrt = va;ue</code></li><li>最好使用try catch包裹，因为在部分浏览器会报错</li></ul><h2 id="keepalive"><a href="#keepalive" class="headerlink" title="keepalive"></a>keepalive</h2><p>优化问题：缓存页面数据，防止切换页面会发生多次ajax请求</p><pre><code><keep-alive> <router-view/></keep-alive></code></pre><p>它的意思是，路由内容每被加载一次，就把路由中的内容放到内存之中，下一次再进这个路由的时候，不需要再次渲染这个组件去重新执行钩子函数，只需要你从内存把以前的内容拿出来显示到页面上就可以</p><h2 id="组件中name属性"><a href="#组件中name属性" class="headerlink" title="组件中name属性"></a>组件中name属性</h2><ul><li>在递归组件时使用</li><li>keepalive取消缓存在exclude=’组件name’中使用</li><li>vue devtool调试工具中显示项目结构的名字</li></ul><h2 id="组件异步加载"><a href="#组件异步加载" class="headerlink" title="组件异步加载"></a>组件异步加载</h2><p>正常情况下，单页应用会在进入首页时加载所有组件<br>可以删除import特定的组件，然后通过<code>component: () => import('@/pages/home/Home)</code>按需加载</p><h2 id="全局事件解绑"><a href="#全局事件解绑" class="headerlink" title="全局事件解绑"></a>全局事件解绑</h2><ul><li>window是全局事件，无论那个页面都会监听这个事件，会影响到其他页面，所以要解绑</li><li>在有keep-alive时会出现两个新的钩子函数：<ul><li>activated 在页面被显示时执行</li><li>deactivated 在页面即将被隐藏或页面被替换的时候执行 </li></ul></li></ul><h2 id="简写"><a href="#简写" class="headerlink" title="简写"></a>简写</h2><ul><li>@表示src目录</li><li>es6中，键值对相同写一个就可以</li></ul><h2 id="组件一览"><a href="#组件一览" class="headerlink" title="组件一览"></a>组件一览</h2><ul><li>home <ul><li>Header 头部 </li><li>Icon 原型图标区域 </li><li>Recommend 推荐 </li><li>Swiper 图片轮播 </li><li>Weekend 周末推荐</li></ul></li><li>city <ul><li>Header 头部 </li><li>Alphabet 右侧城市首字母下拉列表 </li><li>List 城市列表 </li><li>Search 搜索</li></ul></li><li>detail <ul><li>Header 头部 </li><li>Banner 主页面 </li><li>List 图片详情页的轮播</li></ul></li></ul><h2 id="部署到GitHub-pages"><a href="#部署到GitHub-pages" class="headerlink" title="部署到GitHub pages"></a>部署到GitHub pages</h2><p>参考 <a href="https://medium.com/@Roli_Dori/deploy-vue-cli-3-project-to-github-pages-ebeda0705fbd" target="_blank" rel="noopener">https://medium.com/@Roli_Dori/deploy-vue-cli-3-project-to-github-pages-ebeda0705fbd</a></p><h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><p>后期更新</p>]]></content>
<summary type="html">
<h2 id="vue2-0仿去哪儿网移动端Webapp遇到的问题"><a href="#vue2-0仿去哪儿网移动端Webapp遇到的问题" class="headerlink" title="vue2.0仿去哪儿网移动端Webapp遇到的问题"></a>vue2.0仿去哪儿网
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="vue" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/vue/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
<category term="vue" scheme="http://yoursite.com/tags/vue/"/>
</entry>
<entry>
<title>javascript整理</title>
<link href="http://yoursite.com/2019/07/15/javascript%E6%95%B4%E7%90%86/"/>
<id>http://yoursite.com/2019/07/15/javascript整理/</id>
<published>2019-07-15T13:23:22.000Z</published>
<updated>2019-10-17T05:44:13.427Z</updated>
<content type="html"><![CDATA[<p>闲来无事，把之前的笔记整理一下。 </p><h2 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h2><h3 id="变量类型"><a href="#变量类型" class="headerlink" title="变量类型"></a>变量类型</h3><ul><li>值类型：a和b相等，改a，b不变 (直接赋值值)<ul><li>undefined string number boolean</li></ul></li><li>引用类型：a和b相等，改a，b变 （赋值地址） <ul><li>object function</li></ul></li><li>强制类型转换<ul><li>字符串拼接 <ul><li><code>var a=10; var b=100 + '10'//string</code></li></ul></li><li>== <ul><li><code>100=='100'; 0==''; null==undefined //true</code></li></ul></li><li>if <ul><li><code>if(b=100)//转换为true</code></li></ul></li><li>逻辑运算符(&，||) <ul><li><code>10&&0；''||'abc'; !window.abc//都转换为true或false</code></li></ul></li></ul></li><li><strong>问题</strong><ul><li>typeof能得到哪些类型<ul><li>number, string, object, boolean, function, undefiend, symbol （null是object）</li><li>symbol： 可以生成永不重复的值，可以用一个字符串标记 </li></ul></li><li>何时使用===，何时使用==<ul><li>===：内容相等数据类型也相同的严格模式；==：内容相等数据类型可以不相等</li><li>使用==的唯一情况：’’if(obj.a==null){}’’</li></ul></li></ul></li></ul><h3 id="原型-原型链"><a href="#原型-原型链" class="headerlink" title="原型 原型链"></a>原型 原型链</h3><ul><li>构造函数<ul><li><code>function Foo(name,age) {this.name=name; this.age=age return this}</code> <code>var f = new Foo('ted',20)</code></li><li>var a ={}是var a =new Object()的语法糖//数组，函数同理</li><li>函数名大写字母开头</li></ul></li><li>原型规则和示例<ul><li>所有的引用类型（数组对象函数）都具有对象特性，即可自由扩展属性(null除外)</li><li>所有的引用类型都有一个<code>__proto__</code>属性，属性值是一个普通对象 </li><li>所有的函数都有一个prototype属性，属性值也是一个普通的对象</li><li><code>__proto__</code>对象指向它的构造函数的prototype对象（完全等于）</li><li>当试图得到一个引用类型的某个属性时，如果这个变量本身没有这个属性，那么会去它的<code>__proto__</code>，即它的构造函数的prototype中找</li><li>例子：不遍历原型上的属性：<code>if(f.hasOwnProperty(item))</code></li></ul></li><li>原型链<ul><li>一个对象，对象自身不存在的属性到它的隐式原型找，它的隐式原型不存的的话，再到它的隐式原型的隐式原型中找</li><li>Object.prototype指向null，防止死循环</li></ul></li><li>instanceof<ul><li>instanceof判断一个函数是否是一个变量的构造函数</li><li><code>var f = new Foo('ted')</code> <code>f instanceof Foo//true</code></li><li>判断逻辑：f的<code>__proto__</code>一层层往上，能否对应到Foo.prototype</li></ul></li><li><strong>问题</strong><ul><li>如何准确判断一个变量是数组<ul><li><code>var arr = []</code> <code>arr instanceof Array//true</code></li></ul></li><li>写一个原型链继承的例子<ul><li><code>function Animal(){this.eat = function(){console.log('eat')}}</code> <code>function Dog(){this.bark(){console.log('bark')}}</code> <code>Dog.prototype=new Animal()</code> <code>var haski=new Dog()</code> //这个比较low</li><li><code>function Elem(id){this.elem=document.getElementById(id)}</code> <pre>Elem.prototype.html=function(val) {<pre><code> var elem=this.elem if(val){ elem.innerHTML=val return this } else{ return elem.innerHTML}}</pre> </code></pre> <pre>Elem.prototype.on=function(type,fn){<pre><code> var elem=this.elem elem.addEventListener(type,fn) </pre></code></pre> <code>var div1 = new Elem('div1')</code></pre></pre></li></ul></li><li>描述new一个对象的过程<ul><li>创建一个新对象</li><li>this指向这个新对象</li><li>执行构造函数的代码，即对this赋值</li><li>返回this</li></ul></li></ul></li></ul><h3 id="作用域-闭包"><a href="#作用域-闭包" class="headerlink" title="作用域 闭包"></a>作用域 闭包</h3><ul><li>执行上下文 代码执行的环境<ul><li>一段<code><script></code>：全局上下文<ul><li>变量定义->函数申明</li></ul></li><li>一个函数：函数上下文<ul><li>变量定义->函数申明->this->arguments</li></ul></li></ul></li><li>this<ul><li>this要在执行时才能确认值，定义时无法确认</li><li>call可以改变this的值：<code>a.fn.call({name:B})</code></li><li>1.作为构造函数执行：指向定义的对象 <pre>function Foo(name) {<br>this.name = name}<br>var f = new Foo(‘ted’)</pre></li><li>2.作为对象属性执行:指向该对象 <pre>var obj = {<br>name: ‘A’, printName: function () {console.log(this.name)}}<br>obj.printName()</pre></li><li>3.作为普通函数执行: 指向window <pre>function fn() {<br>console.log(this)}}</pre></li><li>4.call apply bind <pre>function fn1(name, age) {<br>alert(name); console.log(this)}<br>fn1(‘ted’,20)//普通函数的this，指向window<br>fn1.call({x:100},’ted’,20)//通过call函数改变this，指向{x:100}这个对象<br>fn1.apply({x:200}, [‘ted’, 20])//apply和call不同在于参数用数组传递<br></pre> <pre>//bind:适用于函数表达式 var fn2 = function (name, age) {alert(name); console.log(this)}.bind({y:300})fn2('ted',20)//通过bind函数改变this，this也指向{y:300}这个对象</pre></li></ul></li><li>作用域<ul><li>JS没有块级作用域<ul><li>在函数中定义和赋值的变量可以在函数外使用</li><li>ES6中加入块级作用域：<pre>for(let i = 0; i< 10; i++){}<br>console.log(i)//报错，let定义的变量有块级作用域，在for中定义的不能在for之外访问</pre></li></ul></li><li>JS有函数和全局作用域<ul><li>定义在函数中的变量，只能在函数中修改</li></ul></li><li>自由变量：当前作用域没有定义的变量，可以在父级作用域中去找</li></ul></li><li>作用域链<ul><li>当前作用域可访问父级作用域</li><li>一个元素的父级作用域是在它定义的时候的作用域，而非执行</li></ul></li><li>闭包<ul><li>函数作为返回值</li><li>函数作为参数传递</li><li>闭包中返回的函数，若有自由变量，则向（函数定义时）父作用域寻找</li></ul></li><li><p><strong>问题</strong></p><ul><li>说一下对变量提升的理解<ul><li>在各个执行上下文中，变量定义+函数声明都会提前</li></ul></li><li>说明this几种不同的使用场景<ul><li>作为构造函数：指向定义的对象</li><li>作为对象属性：指向该对象</li><li>作为普通函数：指向window</li><li>call apply bind： 指向改变的对象</li></ul></li><li>创建10个<code><a></code>标签，点击的时候弹出来对应的序号<br> * </li><li>如何理解作用域<ul><li>自由变量</li><li>作用域链，自由变量的查找</li><li>闭包的两个场景</li></ul></li><li>闭包</li><li><p>实际开发中闭包的应用</p><ul><li><p>封装变量，收敛权限</p><pre><code>let isFirstLoad = function () { let _list = [] return function (el) { if (_list.indexOf(el) >= 0) { return false } else { _list.push(el) return true } }}let firstLoad = isFirstLoad()isFirstLoad(10) //trueisFirstLoad(10) //falseisFirstLoad(20) //true</code></pre></li></ul></li></ul></li></ul><h3 id="异步和单线程"><a href="#异步和单线程" class="headerlink" title="异步和单线程"></a>异步和单线程</h3><ul><li>什么是异步（对比同步）<ul><li>同步会阻塞，异步不会，遇到setTimeout会先执行后面的代码</li><li>何时使用：有可能发生等待的情况-等待的过程不能阻塞程序运行</li></ul></li><li>前端使用异步的场景<ul><li>定时任务：setTimeout，setInverral</li><li>网络请求：ajax请求，动态<img>加载 （时间不固定）</li><li>事件绑定：如点击事件，在不点击的时候不能阻塞程序运行</li></ul></li><li>异步和单线程<ul><li>单线程：代码一个个排队执行，不能同时干两件事</li><li>js是单线程，所以在遇到阻塞的情况，要用异步，现将不需要等待的代码执行完，再执行异步代码</li></ul></li><li><strong>问题</strong><ul><li>同步和异步的区别是什么？分别举一个同步和异步的例子<ul><li>同步会阻塞代码，异步不会，alert是同步，setTimeout是异步</li></ul></li><li>一个关于setTimeout的笔试题</li><li>前端使用异步的场景有哪些？<ul><li>定时任务-网络请求-时间绑定</li></ul></li></ul></li></ul><h3 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h3><ul><li><p>日期</p><pre><code> Date.now() //获取时间戳 //2019/09/17/23:41:44 let dt = new Date() dt.getTime() //获取时间戳 dt.getFullYear() //2019 dt.getMonth() //8 (0-11) dt.getDate() //17 (0-31) dt.getHours() //23 (0-23) dt.getMinutes() //41 (0-59) dt.getSeconds() //44 (0-59) </code></pre></li><li><p>Math</p><ul><li>获取随机数<code>Math.random()</code></li></ul></li><li>数组api<ul><li>forEach 遍历所有元素</li><li>every 判断所有元素是否都符合条件</li><li>some 判断是否有至少一个元素符合条件</li><li>sort 排序</li><li>map 对元素重新组装，生成新数组</li><li>filter 过滤符合条件的元素</li></ul></li><li>对象api<ul><li>for in</li></ul></li><li><p><strong>题目</strong></p><ul><li><p>获取2019-07-25格式的日期</p><pre><code> let formatDate = function (dt) { if (!dt) { dt = new Date() } let year = dt.getFullYear() let month = dt.getMonth() + 1 let date = dt.getDate() if (month < 10) { month = '0' + month } if (date < 10) { date = '0' + date } return year + '-' + month + '-' + date } let dt = new Date() console.log(formatDate(dt))</code></pre></li><li><p>获取随机数，要求是长度一致的字符串格式</p><pre><code> //获取长度一致的随机数 let formatRandom = function () { let random = Math.random() random = random + '0000000000' return random.slice(0, 10) } console.log(formatRandom())</code></pre></li></ul></li></ul><h2 id="JS-API"><a href="#JS-API" class="headerlink" title="JS API"></a>JS API</h2><ul><li>JS语法标准（基础知识）：ECMA 262标准</li><li>JS-WEB-API（浏览器）：W3C标准<ul><li>DOM操作</li><li>BOM操作：浏览器操作 获取当前地址 获取屏幕尺寸</li><li>事件绑定</li><li>AJAX请求（包括http协议）</li><li>存储</li><li>没有规定任何JS基础相关的东西</li></ul></li><li>全面考虑，JS内置的全局函数和对象（浏览器打造）<ul><li>Object，Array，Boolean等</li><li>window document</li><li>所有未定义的全局变量，如navigator.userAgent</li></ul></li></ul><h3 id="DOM操作"><a href="#DOM操作" class="headerlink" title="DOM操作"></a>DOM操作</h3><ul><li>DOM本质<ul><li>浏览器拿到html代码后，把html结构化成浏览器可识别以及js可识别的东西，就是dom</li><li>dom本质是js的对象</li></ul></li><li><p>DOM节点操作</p><ul><li><p>获取dom节点</p><pre><code> //获取DOM节点 //get let id1 = document.getElementById('id1') //id let divs = document.getElementByTagName('div') //元素集合 let div0 = document.getElementByTagName('div')[0] //元素 let classes = document.getElementsByClassName('class1') //class集合 let class0 = document.getElementsByClassName('class1')[0] //class //query let id1 = document.querySelector('#id1') //id let divs = document.querySelectorAll('div') //元素集合 let div0 = document.querySelector('div') //元素，选择第一个div let div0 = document.querySelector('div')[0] //元素，选择第一个div let classes = document.querySelectorAll('.class0') //class集合 let class0 = document.querySelector('class0') //class，选择第一个class let class0 = document.querySelector('class0')[0] //class，选择第一个class</code></pre></li><li><p>property</p><ul><li><p>js对象中的属性</p><pre><code>//获取attributelet p0 = document.quertSelectorAll('p')[0]console.log(p0.style.width) //获取样式p0.style.width = '200px' //修改样式console.log(p0.className) //获取classp0.className = 'p0' //修改classconsole.log(p0.nodeName) //pconsole.log(p0.nodeType) //1 </code></pre></li></ul></li><li><p>attribute</p><ul><li><p>HTML文档中 标签的属性</p><pre><code>//获取attributelet p0 = document.querySelectorAll('p')[0]p0.getAttribute('attr1') //获取p0上的attr1属性的值p0.getAttribute('attr1', 'abc') //修改属性p0.getAttribute('style') //获取style，元素上必须有style才行p0.getAttribute('style', 'font-size:30px')</code></pre></li></ul></li></ul></li><li><p>DOM结构操作</p><ul><li><p>新增节点 <code>document.createElement(node)</code></p><pre><code> //添加新节点 let div1 = document.getElementById('div1') let p1 = documemt.createElement('p') div1.appendChild(div1) //移动现有节点 let p2 = document.getElementById('p2') div1.appendChild(p2)</code></pre></li><li><p>获取父节点 <code>childNode.parentElement</code></p><pre><code> let div1 = getElementById(div1) let parent = div1.parentElement</code></pre></li><li><p>获取子节点 <code>.parentNode.childNodes</code></p><pre><code> let div1 = getElementById(div1) let parent = div1.parentElement</code></pre><ul><li><code>.childNodes</code>返回所有节点包括文本和注释节点 <code>.children</code>只返回元素节点</li></ul></li><li><p>删除节点 <code>parentNode.removeChild(childNode)</code></p><pre><code> let div1 = getElementById(div1) let child = div1.childNodes //删除第一个子元素 div1.removeChild(child[0])</code></pre></li></ul></li><li><p><strong>问题</strong></p><ul><li>DOM是哪一种基本数据结构<ul><li>数</li></ul></li><li>DOM操作的常用API有哪些<ul><li>获取DOM节点，以及节点的property和attr</li><li>获取父节点，子节点</li><li>新增，删除，移动节点</li></ul></li><li>DOM节点的attr和property有何局别<ul><li>property是js属性的修改和获取</li><li>attr是对html标签的修改和获取</li></ul></li></ul></li></ul><h3 id="BOM操作"><a href="#BOM操作" class="headerlink" title="BOM操作"></a>BOM操作</h3><ul><li>navigator浏览器<ul><li>判断浏览器类型 userAgent <pre>var ua = navigator.userAgent<br>var isChrome = ua.indexOf(‘Chrome’)<br>console.log(isChrome)</pre></li></ul></li><li>screen屏幕<ul><li><pre>console.log(screen.width)console.log(screen.height)</pre></li></ul></li><li>location地址栏信息 拆解url<ul><li><pre> location.href //url location.protocal //协议 http https location.host //域名 location.pathname //路径 /learn/199 location.search //url ？ 后面的字符串 location.search //url # 后的hash</pre></li></ul></li><li><p>history历史 前进后退</p><ul><li><pre>history.backhistory.forward</pre></li></ul></li><li><p><strong>问题</strong></p><ul><li><p>如何检测目标浏览器的类型</p><pre><code> let ua = navigator.userAgent let isChrome = ua.indexOf('Chrome') console.log(isChrome)</code></pre></li><li><p>拆解url的各部分</p><pre><code> location.href //url location.protocal //协议 http https location.host //域名 location.pathname //路径 /learn/199 location.search //url ？ 后面的字符串 location.search //url # 后的hash</code></pre></li></ul></li></ul><h3 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax</h3><ul><li><p>XMLHttpRequest</p><pre><code> let xhr = new XMLHttpRequest() xhr.open("GET", "/api", "false") xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { alert(xhr.responseText) } } } xhr.send(null)</code></pre></li><li><p>状态码说明</p><ul><li><code>readyState == 4</code> ajax状态码<ul><li>0-（未初始化）还没有调用send()方法</li><li>1-（载入）已调用send()方法，正在发送请求</li><li>2-（载入完成）send()方法执行完成，已经接收到全部响应内容</li><li>3-（交互）正在解析响应内容</li><li>4-（完成）响应内容解析完成，可以在客户端调用了</li></ul></li><li><code>statue == 200</code> http标准状态码<ul><li>2xx - 表示成功处理请求。如200</li><li>3xx - 需要重定向，浏览器直接跳转</li><li>4xx - 客户端请求错误，如404</li><li>5xx - 服务端错误</li></ul></li></ul></li><li><p>跨域</p><ul><li>什么是跨域<ul><li>浏览器有同源策略，不允许ajax访问其他接口，如<a href="http://www.a.com:80不能访问http://www.b.com" target="_blank" rel="noopener">http://www.a.com:80不能访问http://www.b.com</a></li><li>跨域条件：协议(http)、域名(<a href="http://www.a.com)、端口(:80)有一个不同就算跨域" target="_blank" rel="noopener">www.a.com)、端口(:80)有一个不同就算跨域</a></li></ul></li><li>可以跨域的三个标签<ul><li><code><img src=xxx></code><ul><li>用于打点统计，统计网站可能是其他域</li></ul></li><li><code><link href=xxx></code><ul><li>可以使用CDN，CDN也是其他域</li></ul></li><li><code><script src=xxx></code><ul><li>可以使用CDN，CDN也是其他域</li><li>可以用于JSONP</li></ul></li></ul></li><li><p>JSONP 前端</p><pre><code> <!-- jsonp跨域 --> <script> function callbackFunc (data) { alert(data) } </script> <script src="http://www.baidu.com/api/data.js"></script></code></pre><ul><li>前端定义一个callback函数，得到信息。再用script标签获取一个跨域的信息，这个信息会调用callback({x:100, y:200})</li></ul></li><li><p>服务器端设置http header 后端</p><pre><code> //后端通过设置httpheader跨域 response.setHeader("Access-Control-Allow-Origin", "http://a.com, http://b.com"); response.setHeader("Access-Control-Allow-Headers", "X-Requested-With"); response.setHeader("Access-Control-Allow-Methods", "PUT, POST,GET, OPTIONS, DELETE"); //允许接收跨域的cookie response.setHeader("Access-Control-Allow-Credentials", "true");</code></pre></li></ul></li><li><p><strong>问题</strong></p><ul><li>手动编写一个ajax，不依赖第三方库<ul><li>前面有</li></ul></li><li>跨域的几种实现方式<ul><li>JSONP</li><li>服务器端设置http header</li></ul></li></ul></li></ul><h3 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h3><ul><li><p>通用事件绑定</p><pre><code> //通用事件绑定函数 function bindEvent (elem, type, fn) { elem.addEventListener(type, fn) } let a1 = document.getElementById('a1') bindEvent(a1, 'click', function (e) { e.preventDefault() alert('clicked') })</code></pre></li><li><p>事件冒泡</p><ul><li>若底层和父层节点有相同绑定事件，底层业务节点的事件（如点击）会先执行，然后会一层层网上执行，先执行底层的事件，然后上一层的事件，然后…</li><li>点击激活弹出激活，点击取消弹出取消<br>（<code>e.stopPropatation()</code>：阻止冒泡）</li></ul></li><li><p>代理 事件冒泡的应用</p><ul><li><p>点击a标签的元素，会弹出相应文字</p><p> <code>`</code></p> <!-- 冒泡的应用，代理，点击每个标签都会弹出对应的内容，直接给div1绑定一个事件即可 --><p> <!DOCTYPE html></p> <html lang="en"><br> <head><br> <meta charset="UTF-8"><br> <title>propogation</title><br> </head><br> <body><br> <div id="div1"><br> <a href="#">a1</a><br> <a href="#">a2</a><br> <a href="#">a3</a><br> <a href="#">a4</a><br> </div><br><br> <script><br> let div1 = document.getElementById(“div1”)<br> div1.addEventListener(“click”, function(e) {<br> alert(e.target.innerHTML)<br> })<br> </script><br> </body><br> </html></li></ul></li></ul><pre><code> ```（这里target可以定位到当前点击的元素）</code></pre><ul><li><strong>问题</strong><ul><li>编写一个通用的事件监听函数</li><li>描述事件冒泡流程<ul><li>dom树形结构</li><li>冒泡</li><li>阻止冒泡</li><li>应用：代理</li></ul></li><li>对于一个无限下拉加载图片的页面，如何给每个图片绑定事件<ul><li>使用代理：代码简洁，对浏览器压力小</li></ul></li></ul></li></ul><h3 id="存储"><a href="#存储" class="headerlink" title="存储"></a>存储</h3><ul><li>cookie<ul><li>属于http的东西，本身用于客户端和服务端通信</li><li>但是它有本地存储的功能，于是被“借用”</li><li>使用<code>document.cookie=...</code>获取和修改即可</li><li>限制：<ul><li>存储量太小，只有4kb</li><li>所有http请求都带着，会影响获取资源的效率</li><li>API简单，需要封装才能用<code>document.coockie</code></li></ul></li></ul></li><li><p>sessionStorage和localStorage</p><ul><li>H5专门为存储而设计，最大容量5M</li><li>API简单易用,key+value<ul><li><pre>localStorage.setItem(key,value)localStorage.getItem(key)</pre></li></ul></li></ul></li><li><p><strong>问题</strong></p><ul><li>描述一下cookie（h5之前），sessionStorage和localStorage的区别 <ul><li>cookie和后两者的区别<ul><li>容量</li><li>是否会携带到ajax请求中</li><li>API易用性</li></ul></li><li>后两者的区别<ul><li>localStorage不会主动删除，sessionStorage随着每次会话结束会清除，95%的场景存储到localStorage中</li></ul></li></ul></li></ul></li></ul><h2 id="开发环境"><a href="#开发环境" class="headerlink" title="开发环境"></a>开发环境</h2><h3 id="IDE（写代码的效率）"><a href="#IDE（写代码的效率）" class="headerlink" title="IDE（写代码的效率）"></a>IDE（写代码的效率）</h3><ul><li>webstorm</li><li>sublime</li><li>vscode</li><li>atom</li></ul><h3 id="git-版本管理，多人协作"><a href="#git-版本管理，多人协作" class="headerlink" title="git 版本管理，多人协作"></a>git 版本管理，多人协作</h3><ul><li>常用命令<ul><li>git add .</li><li>git checkout xxx </li><li>git commit -m ‘xxx’ //提交到本地仓库</li><li>git push origin master</li><li>git pull origin master</li><li>git branch </li><li>git checkout -b xxx</li><li>git merge xxx</li></ul></li></ul><h3 id="js模块化"><a href="#js模块化" class="headerlink" title="js模块化"></a>js模块化</h3><ul><li>不适用模块化的情况<ul><li>如果a.js, b.js, c.js, c依赖b，b依赖a，引用的时候必须要按顺序，如果顺序错就会报错</li><li>引用的文件的变量必须是全局变量，容易被污染</li></ul></li><li>使用模块化<ul><li>a.js 传递出别人所需要的功能函数，b和a需要哪个函数引用哪个函数</li><li>引用的时候直接引用最表层的js文件即可</li></ul></li><li><p>AMD 异步模块定义规范</p><ul><li>require.js</li><li>全局define函数</li><li>全局require函数</li><li><p>依赖的js会自动、异步加载</p><p> <code>`</code><br> //util.js<br> define(function() {</p><pre><code> return { func: function () { return 1 } }</code></pre><p> })</p><p> //a-utils.js<br> define([‘./utils.js’], function(util) {</p><pre><code> return { func2: function () { return util.func() } }</code></pre><p> })</p></li></ul></li></ul><pre><code> ```* html用：``<script src="/require.js" data-main="./main.js"></script> ``* 好处：异步加载，不使用（依赖）就不加载</code></pre><ul><li><p>CommonJs</p><ul><li>nodejs模块化规划，现在被大量用于前端</li><li>前端开发依赖的插件和库，都可以用npm中获取</li><li>构建工具的高度自动化，使得使用npm的成本非常低</li><li><p>CommonJS不会异步加载js，而是同步一次性加载出来</p><pre><code> //util.js module.exports = { func: function () { return 1 } } //a-util.js let util = require('./util.js') module.exports = { func2: function () { return utils() } }</code></pre></li></ul></li><li><p>AMD和CommonJS的使用场景</p><ul><li>需要异步加载，用AMD</li><li>使用了npm之后建议使用CommonJs</li></ul></li></ul><h3 id="打包工具"><a href="#打包工具" class="headerlink" title="打包工具"></a>打包工具</h3><ul><li><p>webpack</p><ul><li>启动一个服务，先全局安装，<code>npm install http-server =g</code>，然后在要访问的页面根目录启动服务 <code>http-server 8080</code></li><li><code>npm init</code> 初始化，完成后多处package.json文件</li><li><code>npm install webpack --save -dev</code> 安装webpack</li></ul></li><li><p>配置webpack</p><ul><li><p>创建webpack.config.js</p><pre><code> var path = require('path') var webpack = require('require') module.exports = { context: path.resolve(__dirname, './src'), extry: { app: './app.js' }. output: { path: path.resolve(__dirname, './dist') filename: 'bundle.js' } }</code></pre></li><li><p>创建src app.js等文件</p></li><li>在package.json scripts里加入”start”: “webpack”，就可以在命令行执行start进行打包输出 </li></ul></li><li>webpack进行代码压缩：<ul><li>在config的exports中追加<code>plugins: [new webpack.optimize.UglifyJsPlugin()]</code></li></ul></li><li>webpack的主要作用：<ul><li>代码合并：合并commonjs的语法规范，否则前端无法识别</li><li>代码压缩：保证代码上线</li></ul></li></ul><h3 id="上线回滚的流程"><a href="#上线回滚的流程" class="headerlink" title="上线回滚的流程"></a>上线回滚的流程</h3><ul><li>上线的基本流程<ul><li>将测试完成的代码提交到git版本库的master分支</li><li>将当前服务器的代码全部打包并记录版本号，备份</li><li>将master分支的代码提交覆盖到线上服务器，生成新版本号</li></ul></li><li>回滚的基本流程<ul><li>将当前服务器的代码全部打包并记录版本号，备份</li><li>将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号</li></ul></li><li>linux基本命令<ul><li>mkdir</li><li>ls</li><li>ll 列表形式的ls</li><li>pwd</li><li>cd</li><li>cd ..</li><li>rm -rf 文件夹名 //删除当前目录下所有文件</li><li>vi a.js //创建并进入a.js<ul><li>i //insert</li><li>: //最下行</li><li>w //写</li><li>q //退出</li></ul></li><li>cp a1 a2 //创建a2，把a1复制到a2</li><li>mv a1 f1 //把a1移动到f1文件夹</li><li>cat a1 //查看当前文件</li><li>grep ‘2’ a.js //查找a.js中的2</li></ul></li></ul><h2 id="运行环境"><a href="#运行环境" class="headerlink" title="运行环境"></a>运行环境</h2><h3 id="页面加载过程"><a href="#页面加载过程" class="headerlink" title="页面加载过程"></a>页面加载过程</h3><ul><li>加载资源的形式<ul><li>输入url(或跳转页面)加载html </li><li>加载html中的静态资源<ul><li>如<code><script><img></code></li></ul></li></ul></li><li>加载一个资源的过程<ul><li>浏览器根据DNS服务器得到域名的IP地址</li><li>向这个IP的机器发送http请求</li><li>服务器收到、处理并返回http请求（图片，html js代码，）</li><li>浏览器得到返回的请求并渲染</li></ul></li><li>浏览器渲染页面的过程<ul><li>根据HTNL结构生成DOM树</li><li>根据CSS生成CSSOM（结构化处理）</li><li>将DOM和CSSOM整合成RenderTree（渲染树，每个节点都规定了样式）</li><li>根据RenderTree开始渲染和展示</li><li>遇到<code><script></code>时，会执行并阻塞渲染</li></ul></li><li><strong>题目</strong><ul><li>从输入url到得到html的详细过程<ul><li>根据DNS得到域名IP-向该IP发送请求-服务器收到处理返回请求-浏览器得到返回内容</li></ul></li><li>window.onload和DOMCotentLoaded的区别<ul><li>onload：页面全部资源加载完，包括图片视频等才会执行</li><li>CotentLoaded：DOM渲染完即可执行，图片还没有加载完</li></ul></li><li>为什么把css文件放在head中？<ul><li>因为渲染默认是顺序的，保证在渲染body时候浏览器已经知道对应的样式了</li></ul></li><li>为什么把js放在body最下面？<ul><li>不会阻塞之前body中html的渲染</li><li>保证script能拿到所有的html节点标签</li></ul></li></ul></li></ul><h3 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h3><ul><li>基本2点<ul><li>多使用内存、缓存或者其他方法 -开源</li><li>减少CPU计算、减少网络 -节流</li></ul></li><li>加载资源优化<ul><li>静态资源的压缩合并<ul><li>合并：将多个js文件合并成一个js</li><li>压缩：压缩体积</li></ul></li><li>静态资源缓存<ul><li>通过连接名称，名称不变的话，浏览器会加载之前同名的缓存</li></ul></li><li>使用CDN让资源加载更快<ul><li>不同区域的网络优化，上海转到上海的节点等等</li></ul></li><li>使用SSR后端渲染，数据直接输出到HTML中（不同ajax请求数据）</li></ul></li><li><p>页面渲染优化</p><ul><li>CSS放前面，JS放后面</li><li>懒加载（图片懒加载，下拉加载更多/先用一张模糊的图片代替原图，要用的时候再加载） 什么时候用什么时候加载</li><li>减少DOM查询，对DOM查询做缓存</li><li>减少DOM操作，多个操作尽量合并在一个执行<ul><li>先创建一个片段<code>frag=document.createDocumentFragment()</code></li></ul></li><li><p>事件节流</p><ul><li>间隔一段时间执行一次 </li><li><p>如键盘输入，在ns内执行一次事件, 不停的输入，也会在一段时间后输出一次</p><pre><code> //时间戳版 function throttle(fn, delay) { let previous = 0 return function (args) { let _args = args let _this = this let now = Date.now() if (now-previous > wait) { fn.call(_this, _args) previous = now } } }</code></pre></li></ul></li><li><p>事件防抖</p><ul><li>超过一段时间不输入，执行一次 </li><li><p>防止输入一个就输出一个这样的抖动情况，设置一个延迟，超过这个延迟不执行输入的情况下，才会执行输出。也就是输入一堆，停5ms不输入以后，才会输出 </p><pre><code> function debounce (fn, delay) { let timeout return function (args) { let _this = this let _args = args clearTimeout(timeout) timout = setTimeout(function (_args, _this) { fn.call(_this, _args) }, delay) } } //使用防抖 function print (content) { console.log(content) } let input = document.getElementById('text') let debounceInput = debounce(print, 100) input.addEventListener('keyup', function () { debounceAjax(e.target.innerHTML) })</code></pre></li></ul></li><li><p>尽早执行操作（DOMCotentLoaded）</p></li></ul></li></ul><h3 id="安全性"><a href="#安全性" class="headerlink" title="安全性"></a>安全性</h3><ul><li>XSS跨站请求攻击<ul><li>新浪博客写一篇文章，同时偷偷插入一段攻击代码<code><script></code></li><li>攻击代码中，获取查看者的cookie，发送到自己的服务器</li></ul></li><li>XSS预防<ul><li>前端替换关键字，例如替换<code><</code>为&lt；<code>></code>为&gt</li><li>后端替换</li></ul></li><li>XSRF跨站请求伪造<ul><li>你已登录一个购物网站，正在浏览商品</li><li>付费接口是xxx.com/pay?id=100但是没有任何验证</li><li>你收到一封钓鱼邮件，隐藏着<code><img src='xxx.com/pay?id=100'></code></li><li>查看邮件的时候，就悄悄付费了</li></ul></li><li>XSRF预防<ul><li>增加验证流程，如输入指纹、密码、短信验证码</li></ul></li><li><strong>问题</strong><ul><li>前端安全问题的场景有哪些</li></ul></li></ul><h2 id="面试技巧"><a href="#面试技巧" class="headerlink" title="面试技巧"></a>面试技巧</h2><ul><li>简历<ul><li>简介明了，重点突出项目经历和解决方案</li><li>把个人博客放在简历中，并且定期维护更新博客</li><li>把个人的开源项目放在简历中，并维护开源项目</li><li>不能造假，要保证能力和经历上的造假</li></ul></li><li>谈谈你的缺点<ul><li>说一下最近正在学的东西，比如我对vue不是很了解，正在学vue.js</li></ul></li></ul><h2 id="面试题"><a href="#面试题" class="headerlink" title="面试题"></a>面试题</h2><ul><li>window.onload和DOMCotentLoaded的区别<ul><li>onload事件触发：页面上所有dom，样式表，脚本，图片，flash都已经加载完；DOMCotentLoaded：仅dom加载完</li></ul></li><li>如何理解JSON<ul><li>是一个JS对象，有两个API：<ul><li><code>JSON.stringify(obj)//将js的对象转换成json字符串</code></li><li><code>JSON.parse('{"a":5}')</code>//json字符串转js对象</li></ul></li><li>是一个数据格式</li></ul></li><li>js有哪些内置函数<ul><li>Object</li><li>Array</li><li>Boolean</li><li>Number</li><li>String</li><li>Function(以上为构造函数)</li><li>Date </li><li>RegExp</li><li>Error</li></ul></li><li>new一个vue对象发生了什么？<ol><li>执行this._init()方法，初始化对象：<ul><li>合并配置options</li><li>初始化生命周期</li><li>初始化事件中心</li><li>初始化渲染</li><li>初始化data,props,computed,watcher等</li></ul></li><li>初始化完成，检查如果有el属性，就调用vm.$mount方法挂载</li></ol></li></ul><h2 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h2><h3 id="一种异步解决方案，类似一个容器，包括未来会执行的任务"><a href="#一种异步解决方案，类似一个容器，包括未来会执行的任务" class="headerlink" title="一种异步解决方案，类似一个容器，包括未来会执行的任务"></a>一种异步解决方案，类似一个容器，包括未来会执行的任务</h3><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/a0WToHqioHq*CO965eYmwE*yUghrJYJ9upHFVSChdzQ!/b/dLYAAAAAAAAA&bo=9AQSAgAAAAARB9A!&rf=viewer_4" alt=""></p><h3 id="then"><a href="#then" class="headerlink" title=".then()"></a>.then()</h3><p>参数1为resolve的内容，参数2（可以不要）为reject的内容</p><h3 id="catch"><a href="#catch" class="headerlink" title=".catch()"></a>.catch()</h3><p>用于resolve有错误的情况，一般用在.then的最后</p><h3 id="finally"><a href="#finally" class="headerlink" title=".finally()"></a>.finally()</h3><p>用于不管promise最后状态如何都执行的操作</p><h3 id="all"><a href="#all" class="headerlink" title=".all()"></a>.all()</h3><p>用于将多个promise包装成一个<br><code>const p = Promise.all([p1, p2, p3]);</code></p><ul><li>必须等三个都resolve，p才resolve，而有一个reject p就reject</li><li>场景：几个任务时间不一样，需要等全部完成才执行下一个任务</li></ul><h3 id="race"><a href="#race" class="headerlink" title=".race()"></a>.race()</h3><p>Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。<br><code>const p = Promise.race([p1, p2, p3])</code></p><ul><li>只要有一个resolve了，就算完成</li><li>场景：把异步操作和定时器绑定，如果定时到了异步操作还没完成就报错</li></ul><h3 id="resolve"><a href="#resolve" class="headerlink" title=".resolve()"></a>.resolve()</h3><p>将对象转换为promise对象，状态为resolve<br><code>let jsPromise = Promise.resolve(para)</code></p><ul><li>param：<ul><li>promise对象，直接返回不做修改</li><li>thenable对象：有<code>then: function(resolve, reject){resolve()}</code>的对象，直接封装，立即执行then</li><li>普通对象：直接封装，状态为resolve</li></ul></li></ul><h3 id="reject"><a href="#reject" class="headerlink" title=".reject()"></a>.reject()</h3><p>将对象转换为promise对象，状态为reject</p><h3 id="try"><a href="#try" class="headerlink" title=".try()"></a>.try()</h3><p>模拟try代码块</p>]]></content>
<summary type="html">
<p>闲来无事，把之前的笔记整理一下。 </p>
<h2 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h2><h3 id="变量类型"><a href="#变量类型" class="h
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
</entry>
<entry>
<title>DCGAN进行图像修复</title>
<link href="http://yoursite.com/2019/07/10/DCGAN%E8%BF%9B%E8%A1%8C%E5%9B%BE%E5%83%8F%E4%BF%AE%E5%A4%8D/"/>
<id>http://yoursite.com/2019/07/10/DCGAN进行图像修复/</id>
<published>2019-07-10T04:12:51.000Z</published>
<updated>2019-09-19T09:33:02.161Z</updated>
<content type="html"><![CDATA[<p>本文已置于<a href="https://github.com/tedqin/GAN-ImageRepairing" title="github" target="_blank" rel="noopener">https://github.com/tedqin/GAN-ImageRepairing</a></p><h2 id="总体设计"><a href="#总体设计" class="headerlink" title="总体设计"></a>总体设计</h2><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/yVOoj8uvJYCJ5gmqMhDyThY8AGvsPFGaIXyu5tpGOvM!/b/dLYAAAAAAAAA&bo=KARmBgAAAAARB3w!&rf=viewer_4" alt=""></p><p>和典型的使用神经网络来实现目的方法一样，简单来讲，基于DCGAN的图像修复首先需要先训练出一组优秀的生成器和判别器，然后利用这一组训练好的模型进行图像修复。<br>首先第一步需要进行图像预处理，这是因为DCGAN的模型结构决定了图像的尺寸大小是64”×” 64”×” 3，进行图像预处理之后，由于神经网络需要矩阵形式的输入，所以修复流程的首要步骤就是将图像分解为样本点，这个步骤可以由判别器的卷积实现，然后生成器和判别器进行博弈，得到训练好的模型，由生成器快速生成伪造的图像，然后建立适当的损失函数和惩罚因子来寻找修复图像所需要的最佳伪造图像。<br>由此，总的系统流程主要可以分为三步：</p><ul><li>图像预处理。</li><li>训练DCGAN模型。</li><li>找到补全原图像所需要的最佳伪造图像，进行图像修复。</li></ul><h2 id="图像预处理"><a href="#图像预处理" class="headerlink" title="图像预处理"></a>图像预处理</h2><h3 id="Openface预处理"><a href="#Openface预处理" class="headerlink" title="Openface预处理"></a>Openface预处理</h3><p>Openface是一个基于深度神经网络的开源人脸识别系统。</p><ul><li>用OpenCV或者dlib中预训练好的模型检测人脸</li><li>将人脸迁移到神经网络。利用dlib的实时姿态估计与OpenCV的仿射线变换来使人脸的眼睛和嘴唇出现在每个图像上的相同位置。</li><li>使用深度神经网络将面部表示（或嵌入）在128维单位超球面上。这种嵌入方法可以通用于任何人脸表示上面。与其他的一些人脸表征方法不同，这种人脸嵌入方法具有很好的性质，两个嵌入人脸间的距离较大就意味着这两幅面孔可能不是来自于同一个人。</li></ul><p>运用Openface来消除除了人脸外的其他的因素，比如背景、发型等等，然后移动图像，使得数据集中的每个人的人脸区域居于整张图片的中央。</p><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/9PoRdd1OpU6LxVWa3S5PrnnPN1sTaiaV8nfGBkIy*H4!/b/dLYAAAAAAAAA&bo=TQPUAAAAAAADB7g!&rf=viewer_4" alt=""></p><h3 id="构建掩膜"><a href="#构建掩膜" class="headerlink" title="构建掩膜"></a>构建掩膜</h3><p>为了能够评估修复结果，需要知道被损坏图像之前的样子。我采用给未损坏图像一个二进制掩膜来作为损坏区域，这样就可以在修复掩膜之后，对比修复前的图像进行修复效果评估。</p><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/6nuXgTq1zgTWTF4FTdaEeDIDCOD8.SqI862rbBU3kUY!/b/dLYAAAAAAAAA&bo=9gLOAAAAAAARBwo!&rf=viewer_4" alt=""></p><h2 id="训练"><a href="#训练" class="headerlink" title="训练"></a>训练</h2><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/WoaTn*w37HUMJXa4HFQq068VxZ0T4JxKUl2HGOpsTZc!/b/dL4AAAAAAAAA&bo=KgXCAgAAAAARB98!&rf=viewer_4" alt=""></p><p>训练过程中，定义了一个采样器，在每一个epoch训练完成以后，用采样器对生成器进行采样并且保存样例图像</p><p>在20个epoch训练完成以后，生成的图像效果已经比较好，此时生成器和判别器的损失函数变化如图</p><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/w*B.kfsi1f0fuE.dV.5yXy8C4Rr1H4EKZeX7.Nr73XU!/b/dD4BAAAAAAAA&bo=qAP2AwAAAAARB24!&rf=viewer_4" alt=""></p><h2 id="修复"><a href="#修复" class="headerlink" title="修复"></a>修复</h2><p>部分结果如下：<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/IyOO0Qhkojl14WspCfqMMT5iuIvZKBBJvedjKog8i60!/b/dL8AAAAAAAAA&bo=3gQwAgAAAAARB9g!&rf=viewer_4" alt=""></p>]]></content>
<summary type="html">
<p>本文已置于<a href="https://github.com/tedqin/GAN-ImageRepairing" title="github" target="_blank" rel="noopener">https://github.com/tedqin/GAN-I
</summary>
<category term="machine learning" scheme="http://yoursite.com/categories/machine-learning/"/>
<category term="gan" scheme="http://yoursite.com/categories/machine-learning/gan/"/>
<category term="python" scheme="http://yoursite.com/tags/python/"/>
<category term="machine learning" scheme="http://yoursite.com/tags/machine-learning/"/>
</entry>
<entry>
<title>知识整理CSS</title>
<link href="http://yoursite.com/2019/06/01/%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86css/"/>
<id>http://yoursite.com/2019/06/01/知识整理css/</id>
<published>2019-06-01T08:19:02.000Z</published>
<updated>2019-10-16T16:59:19.064Z</updated>
<content type="html"><![CDATA[<h2 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h2><p>标签：p{}<br>class: .class{}<br>id：#id {}<br>同一标签，多个类：p.class1{} .class2{<br>集体选择器：p,.class1,#id1 {}<br>后代选择器(选择子孙代)：p em a {}<br>子代选择器(只能选择子代)：div > p<br>相邻选择：div + p<br>通配符选择：*<br>否定选择：not(.link) {}<br>属性选择器：[title] {}<br>伪类选择：:link {}<br><code>链接伪类 ``:link``:未访问的链接 ``:visited``：已访问的链接 ``:hover``：鼠标悬停状态 ``:active``：鼠标点击到松开的阶段（hover和active可用于任何标签）</code><br>伪元素选择：::before {}</p><h3 id="权重"><a href="#权重" class="headerlink" title="权重"></a>权重</h3><ul><li>!important 优先级最高，但也会被权重高的important所覆盖</li><li>行内样式总会覆盖外部样式表的任何样式(除了!important)</li><li>如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则，以与元素距离近的选择器为最后规则 </li></ul><p>一句话总结： !important > 行内样式 > ID选择器 > (类选择器 | 属性选择器 | 伪类选择器 ) > 元素选择器 | 伪元素选择弃 > * </p><h3 id="css3-属性选择器"><a href="#css3-属性选择器" class="headerlink" title="css3 属性选择器"></a>css3 属性选择器</h3><table><thead><tr><th style="text-align:left">选择器</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:left">[attribute]</td><td style="text-align:left">用于选取带有指定属性的元素。</td></tr><tr><td style="text-align:left">[attribute=value]</td><td style="text-align:left">用于选取带有指定属性和值的元素。</td></tr><tr><td style="text-align:left">[attribute~=value]</td><td style="text-align:left">用于选取属性值中包含指定词汇的元素。</td></tr><tr><td style="text-align:left">`[attribute</td><td style="text-align:left">=value]`</td><td>用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。</td></tr><tr><td style="text-align:left">[attribute^=value]</td><td style="text-align:left">匹配属性值以指定值开头的每个元素。</td></tr><tr><td style="text-align:left">[attribute$=value]</td><td style="text-align:left">匹配属性值以指定值结尾的每个元素。</td></tr><tr><td style="text-align:left">[attribute*=value]</td><td style="text-align:left">匹配属性值中包含指定值的每个元素。</td></tr></tbody></table><h3 id="伪类和伪元素区别"><a href="#伪类和伪元素区别" class="headerlink" title="伪类和伪元素区别"></a>伪类和伪元素区别</h3><p>伪类值一种状态，用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；<br>伪类将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如： </p><pre><code>a:hover {color: #FF00FF}p:first-child {color: red}</code></pre><p>伪元素是DOM树没有定义的虚拟元素，是一个真实存在的元素，他可以有样式有内容<br>伪元素在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见例如：</p><pre><code>p::before {content:"第一章：";}p::after {content:"Hot!";}p::first-line {background:red;}p::first-letter {font-size:30px;}</code></pre><p>换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。</p><h3 id="浏览器解析CSS"><a href="#浏览器解析CSS" class="headerlink" title="浏览器解析CSS"></a>浏览器解析CSS</h3><p>.wrapper div > p CSS中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快CSS解析速度，从后往前，排除法</p><h2 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h2><p>盒模型有两种， W3C标准盒子模型、IE 怪异盒子模型； </p><p>盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。</p><p>标准模型的宽高是指的content区宽高； IE盒模型的宽高是指的content+padding+border的宽高。</p><p><img src="https://github.com/huyaocode/webKnowledge/raw/master/img/stadardBox.png" alt=""></p><ul><li>盒子模型类型 box-sizing: border-box | content-box <ul><li>border-box：width的值为width=width </li><li>content-box：width的值为width=border+padding+content</li></ul></li><li>height：长度/百分比/auto</li><li>width： </li><li>border边框<ul><li>边框粗细<code>border-(top/l/r/bottom)-width: thin/medium/thick/长度值</code></li><li>边框颜色 <code>border-color:</code></li><li>样式<code>border-style: none/solid实线/dotted点状</code></li><li>简写: 粗细-样式-颜色</li></ul></li><li>padding内边距 主要用来设置空隙 盒子与边框的距离<ul><li>padding粗细<code>padding-(top/l/r/bottom): thin/medium/thick/长度值</code></li><li>padding粗细简写：全/上下 左右/上 左右 下/上 右 下 左</li></ul></li><li>margin外边距 边框与外界的距离 <ul><li>可以为负值</li><li>设置为auto：实现水平方向居中</li></ul></li></ul><h2 id="bfc"><a href="#bfc" class="headerlink" title="bfc"></a>bfc</h2><p>W3C对BFC定义：</p><blockquote><p>浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 </p></blockquote><p>BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p><p>BFC作用：</p><ul><li>利用BFC避免外边距折叠</li><li>清除内部浮动 （撑开高度）</li><li>原理: 触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内</li><li>避免文字环绕</li><li>分属于不同的BFC时，可以阻止margin重叠</li><li>多列布局中使用BFC</li></ul><p>如何生成BFC：（脱离文档流，满足下列的任意一个或多个条件即可）</p><ul><li>根元素，即HTML元素（最大的一个BFC）</li><li>float的值不为none</li><li>position的值为absolute或fixed</li><li>overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）</li><li>display的值为inline-block、table-cell、table-caption</li></ul><h2 id="非布局样式"><a href="#非布局样式" class="headerlink" title="非布局样式"></a>非布局样式</h2><p>文字粗细：<code>font-weight: normal/bold</code><br>文字斜度：<code>font-style: normal/italic/oblique</code><br>文字粗细：<code>font-weight: 600</code><br>字重（粗体）font-weight<br>斜体 font-style<br>下划线 text-decoration<br>指针 cursor</p><h2 id="滚动"><a href="#滚动" class="headerlink" title="滚动"></a>滚动</h2><ul><li>visible 滚动条隐藏, 文字超出显示</li><li>hidden 滚动条隐藏, 文字超出不显示</li><li>scroll 滚动条一直显示，无论文字是否够多</li><li>auto 滚动条自动隐藏</li></ul><h2 id="文本对齐方式"><a href="#文本对齐方式" class="headerlink" title="文本对齐方式"></a>文本对齐方式</h2><p>文本水平对齐方式：<code>text-align: left/right/center/justify</code><br>左对齐/右对齐/居中对齐/两端对齐 只对块级元素有效 </p><h2 id="行高"><a href="#行高" class="headerlink" title="行高"></a>行高</h2><p>首行缩进：<code>text-indent: 2em</code><br>行高：<code>line-height: 120em</code> 最好用em防止字体过大导致显示不全<br>注意：图片是按照inline元素做的排版，会涉及字体对齐，默认按照baseline对齐，和底线有空隙。 为了删除这个空隙，可以直接<code>vertical-align: bottom</code>或者<code>display: block</code> </p><h3 id="行高的构成"><a href="#行高的构成" class="headerlink" title="行高的构成"></a>行高的构成</h3><p>行高是由 line-box 组成的<br>line-box 是由一行里的 inline-box 组成的<br>inline-box中最高的那个，或字体最大的拿个决定行高</p><h3 id="你对-line-height-是如何理解的？"><a href="#你对-line-height-是如何理解的？" class="headerlink" title="你对 line-height 是如何理解的？"></a>你对 line-height 是如何理解的？</h3><ul><li>line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离</li><li>如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的</li><li>一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容</li><li>把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中</li><li>line-height 和 height 都能撑开一个高度，height 会触发 haslayout（一个低版本IE的东西），而 line-height 不会 </li></ul><h3 id="line-height-三种赋值方式有何区别？（带单位、纯数字、百分比）"><a href="#line-height-三种赋值方式有何区别？（带单位、纯数字、百分比）" class="headerlink" title="line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）"></a>line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）</h3><ul><li>带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高</li><li>纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px</li><li>百分比：将计算后的值传递给后代</li></ul><h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><ul><li>可以让行内元素形成块级元素</li><li>元素”浮动”</li><li>脱离文档流</li><li>不脱离文本流</li><li>位置尽量靠上，并靠左或右</li><li>脱离文档流，只能左右 <code>float:left/right/none</code> </li><li>对自己的影响<ul><li>形成”块”(BFC)</li><li>这个块会负责自己的布局，宽高由自己决定。比如 span 中用 float 这个span就形成了一个BFC，就可以设置宽高了</li></ul></li><li>浮动后出现的问题：<ul><li>浮动溢出（高度塌陷）</li></ul></li><li><p>解决：清除浮动</p><ul><li><code>clear:none/left/right/both</code></li><li>1.给父元素添加<code>overflow:hidden</code> 使父元素变成一个bfc，同时需要父元素指定宽度</li><li><p>2.css3 <code></code>clearfix :after 使用伪元素</p><pre><code> .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0} .clearfloat{zoom:1}</code></pre></li><li><p>3.结尾添加一个空行</p><pre><code> <div class="parent"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div></div><style> .left {float:left} .clearfloat{clear:both}</style></code></pre></li></ul></li></ul><h2 id="inline-block的间隙"><a href="#inline-block的间隙" class="headerlink" title="inline-block的间隙"></a>inline-block的间隙</h2><p>两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。</p><p>解决办法：</p><ol><li>删除两个标签间的空格，但是这样html排版不好</li><li>容器元素font-size: 0 然后再在里面再重新设置字体大小</li></ol><h2 id="元素内容的垂直方式"><a href="#元素内容的垂直方式" class="headerlink" title="元素内容的垂直方式"></a>元素内容的垂直方式</h2><p>只对行内元素有效<br><code>vertical-align: sub/supper/</code>文字向上向下对齐</p><h2 id="单行文本溢出显示省略号"><a href="#单行文本溢出显示省略号" class="headerlink" title="单行文本溢出显示省略号"></a>单行文本溢出显示省略号</h2><ul><li>overflow: hidden;</li><li>text-overflow: ellipsis;</li><li>white-space: no-wrap;</li></ul><h2 id="多行文本溢出显示省略号"><a href="#多行文本溢出显示省略号" class="headerlink" title="多行文本溢出显示省略号"></a>多行文本溢出显示省略号</h2><ul><li>overflow: hidden;</li><li>text-overflow: ellipsis;</li><li>display: -webkit-box;</li><li>-webkit-line-clamp: 3;</li><li>-webkit-box-orient: vertical;</li></ul><h2 id="display属性"><a href="#display属性" class="headerlink" title="display属性"></a>display属性</h2><p>将元素显示为内联元素: <code>inline</code><br>将元素显示为块级元素: <code>block</code><br>将元素显示为内联元素具有快级属性可以设置宽高: <code>inline-block</code><br>inherit 规定应该从父元素继承 display 属性的值<br>none 此元素将显示为块级元素，此元素前后会带有换行符。<br>list-item 象块类型元素一样显示，并添加样式列表标记。<br>table 此元素会作为块级表格来显示 </p><p>ps：宽高设为100%，表示和父元素相同</p><h3 id="display-none-与-visibility-hidden-的区别"><a href="#display-none-与-visibility-hidden-的区别" class="headerlink" title="display: none; 与 visibility: hidden; 的区别"></a>display: none; 与 visibility: hidden; 的区别</h3><p>结构： </p><ul><li>display:none<ul><li>会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击</li></ul></li><li>visibility: hidden<ul><li>不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击</li></ul></li><li>opacity: 0<ul><li>不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击</li></ul></li></ul><p>继承</p><ul><li>display: none和opacity: 0<ul><li>非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。</li></ul></li><li>visibility: hidden<ul><li>继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。</li></ul></li></ul><p>性能</p><ul><li>display:none<ul><li>修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大</li></ul></li><li>visibility:hidden<ul><li>修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden元素内容</li></ul></li><li>opacity: 0<ul><li>修改元素会造成重绘，性能消耗较少 </li></ul></li></ul><p>相同点： 它们都能让元素不可见、他们都依然可以被 JS 所获取到</p><h2 id="CSS预处理器"><a href="#CSS预处理器" class="headerlink" title="CSS预处理器"></a>CSS预处理器</h2><ul><li>嵌套<ul><li>反映层级和约束</li></ul></li><li>变量和计算<ul><li>减少冗余代码</li></ul></li><li>entend和mixin<ul><li>代码片段重用</li><li>mixin是直接把CSS代码每个地方重复写一份</li><li>extend是使用逗号分割的选择器来为多个不同的地方使用同一段CSS</li></ul></li><li>循环<ul><li>适用于复杂有规律的样式</li></ul></li><li>import<ul><li>CSS模块化</li></ul></li><li>常见三种css预处理器：sass less stylus</li></ul><h2 id="CSS单位"><a href="#CSS单位" class="headerlink" title="CSS单位"></a>CSS单位</h2><ol><li><p>px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。</p></li><li><p>% 父元素宽度的比例。</p><ul><li>如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。</li></ul></li><li><p>em 相对单位。 不同的属性有不同的参照值。</p><ul><li>对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小</li><li>border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。</li></ul></li><li><p>rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。</p><ul><li>好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。</li></ul></li><li><p>vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。</p><ul><li>vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一</li><li>vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一</li><li>vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一</li><li>vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一</li></ul></li></ol><h2 id="CSS-优化、提高性能的方法有哪些？"><a href="#CSS-优化、提高性能的方法有哪些？" class="headerlink" title="CSS 优化、提高性能的方法有哪些？"></a>CSS 优化、提高性能的方法有哪些？</h2><ul><li>多个 css 合并，尽量减少 HTTP 请求</li><li>css 雪碧图</li><li>抽象提取公共样式，减少代码量</li><li>选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）</li><li>属性值为 0 时，不加单位</li><li>压缩CSS代码</li><li>避免使用 CSS 表达式<ul><li>它们要计算成千上万次并且可能会对你页面的性能产生影响。</li></ul></li></ul><h2 id="position-定位模型"><a href="#position-定位模型" class="headerlink" title="position 定位模型"></a>position 定位模型</h2><ul><li>static：常规流 忽略跑偏移量（忽略 top, bottom, left, right - z-index 声明）</li><li>inherit 规定从父元素继承 position 属性的值</li><li>relative： <ul><li>相对相对于其正常位置进行定位。设置偏移量 <code>top/bottom/left/right:10px</code></li><li>常规流的位置会留下，不会影响其他元素;也就是如果因为它的移动空出来了区域，其他的元素不会填充</li></ul></li><li>absolute：绝对定位<ul><li>相对于值不为 static 的第一个父元素进行定位。</li><li>常规流的位置会被占据，会影响其他元素；也就是如果因为它的移动空出来了区域，其他的元素会填充</li><li>如果设置上下左右偏移量为0，margin：autoauto，子元素就会相对于父元素居中</li></ul></li><li>常用： 父元素设置为relative，子元素设置为absolute，子元素就可以设置相对于父元素的偏移量 </li><li>fixed：相对定位 <ul><li>相对于浏览器窗口进行定位。不会随着视图滚动而滚动，其余和absolute一样</li></ul></li><li>后三者可以设置z-index</li></ul><h2 id="DOM层级顺序与z-index"><a href="#DOM层级顺序与z-index" class="headerlink" title="DOM层级顺序与z-index"></a>DOM层级顺序与z-index</h2><p>DOM层级顺序，大概来说就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级顺序，我们想到的往往就是用CSS的z-index属性来控制。<br>dom层级顺序规则：</p><ol><li>顺序规则<ul><li>在不设置position属性（或设置成static）的情况下，文档流后面的DOM节点会覆盖前面的DOM节点。</li></ul></li><li>定位规则<ul><li>定位节点（position属性设置为relative，absolute或fixed的节点）会覆盖非定位节点（不设置position属性或position属性设为static的节点）</li></ul></li><li>参与规则<ul><li>z-index属性仅对定位节点生效。（使用position的节点）</li><li>有三个DOM节点，其定位为static。但是A的z-index最大，但是依旧是在最底部，C的z-index最小，而在最顶部，因此可知z-index并未生效，此时为顺序规则在生效。</li></ul></li><li>默认值规则<ul><li>z-index设为0和没有设置z-index的节点在同一层级内没有高低之分。在IE6和7种，z-index的默认值为0，其他浏览器中默认值为auto。</li></ul></li><li>从父规则<ul><li>两个节点A和B都是定位节点，如果节点A的z-index值比节点B的大，那么节点A的子元素都会覆盖在节点B以及节点B的子节点上。 </li></ul></li></ol><h2 id="link-与-import-的区别"><a href="#link-与-import-的区别" class="headerlink" title="link 与 @import 的区别"></a>link 与 @import 的区别</h2><ul><li>link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;</li><li>页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;</li><li>import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;</li><li>link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;</li></ul><h2 id="CSS-有哪些继承属性"><a href="#CSS-有哪些继承属性" class="headerlink" title="CSS 有哪些继承属性"></a>CSS 有哪些继承属性</h2><ul><li>关于文字排版的属性如：<ul><li>font</li><li>word-break</li><li>letter-spacing</li><li>text-align</li><li>text-rendering</li><li>word-spacing</li><li>white-space</li><li>text-indent</li><li>text-transform</li><li>text-shadow</li></ul></li><li>line-height</li><li>color</li><li>visibility</li><li>cursor</li></ul><h2 id="CSS3新特性"><a href="#CSS3新特性" class="headerlink" title="CSS3新特性"></a>CSS3新特性</h2><ul><li>新增的选择器：<ul><li>元素选择器<ul><li>子元素选择器：<code>father > son1 {}</code></li><li>相邻兄弟元素选择器:<code>father > son1 + son2 {}</code> </li><li>通用兄弟选择器: <code>father > son1 ~ son5 {}</code></li><li>群组选择器: <code>father > son1, father > son2, father > son3 {}</code></li></ul></li><li>属性选择器<ul><li><code>a[href] {}</code></li></ul></li><li>伪类选择器<ul><li>动态伪类（之前有）：<ul><li>锚点伪类 <code>a:link{} a:visited{}</code></li><li>用户行为伪类 :hover :active :focus</li></ul></li><li>UI元素状态伪类<ul><li><code>input:enabled {} :disabled :checked</code> </li></ul></li></ul></li><li>结构类选择器<ul><li>first/last子类选择器<code>section:fi<div class="a2">123</div><div class="a2">123</div><div class="a2">123</div><div class="a2">123</div>rst-child {}</code></li><li>父元素的第N个子元素<code>ul>li:nth-child(3){}</code><ul><li>选择多个： <code>nth-child(n){}</code></li></ul></li></ul></li></ul></li><li>弹性盒模型 display: flex;</li><li>边框与圆角 <ul><li>圆角 <code>border-radius:10px/10rem/10%</code></li><li>盒阴影 <code>box-shadow:水平偏移 垂直偏移 模糊 扩展 颜色</code></li><li>边界图片 <code></code>border-image:source </li></ul></li><li>文本<ul><li>文本阴影 <code>text-shadow:h v blur color</code></li><li>自动换行 <code>word-break</code></li><li>文本属性</li></ul></li><li>字体 @font-face <ul><li><code>@font-face {font-familt:<name> src:<source> [<format>]}</code></li></ul></li><li>transform 转换<ul><li>旋转<code>transform:rotate(<angle>)</code></li><li>平移<code>trandform:translate(x,y)</code><ul><li><code>trandform:translateX(200px)</code></li><li><code>trandform:translateY(200px)</code> </li></ul></li><li>缩放：水平 垂直 都有 <ul><li><code>trandform:scaleX(.5)</code> </li></ul></li><li>扭曲: 三种<ul><li><code>skewX(<angle>)``</code></li></ul></li><li>3D transform<ul><li>rotateX</li><li>translate3d(x,y,z)</li><li>scale3d(x,y,z) scaleZ(z)</li></ul></li></ul></li><li>动画<ul><li>transition 补间动画 两个状态</li><li>keyframe 关键帧动画 有很多状态</li><li>逐帧动画 没有补间</li></ul></li></ul><h2 id="如何水平-垂直居中一个元素？"><a href="#如何水平-垂直居中一个元素？" class="headerlink" title="如何水平/垂直居中一个元素？"></a>如何水平/垂直居中一个元素？</h2><ul><li><p>水平居中</p><ul><li><p>如果需要居中的元素为inline或inline-block，为父元素设置 text-align: center;即可实现</p></li><li><p>如果要居中的元素为一个块级元素的话，一般使用 margin: 0 auto; 进行居中。</p></li></ul></li><li><p>垂直居中</p><ul><li><p>对于绝对定位元素，直接宽高减去一半</p><pre><code> #d1 { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background: red }</code></pre></li><li><p>用css3的transform，无需知道宽高</p><pre><code> width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); background: red</code></pre></li><li>相对定位元素，先水平居中再垂直</li></ul></li></ul><h2 id="li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法？-也称幽灵字符"><a href="#li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法？-也称幽灵字符" class="headerlink" title="li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)"></a>li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)</h2><p>行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符, 这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了</p><h2 id="display-inline-block-什么时候会显示间隙？-携程"><a href="#display-inline-block-什么时候会显示间隙？-携程" class="headerlink" title="display:inline-block 什么时候会显示间隙？(携程)"></a>display:inline-block 什么时候会显示间隙？(携程)</h2><ul><li>相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距</li><li>非 inline-block 水平元素设置为 inline-block 也会有水平间距</li><li>可以借助 vertical-align:top; 消除垂直间隙</li><li>可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙</li><li>把 li 标签写到同一行可以消除垂直间隙，但代码可读性差</li></ul><h2 id="用纯-CSS-创建一个三角形的原理是什么？"><a href="#用纯-CSS-创建一个三角形的原理是什么？" class="headerlink" title="用纯 CSS 创建一个三角形的原理是什么？"></a>用纯 CSS 创建一个三角形的原理是什么？</h2><p>把border的其他三条边设为透明 注意，这里要把 border-width 、border-style、 border-color 分开写。</p><pre><code>.tri { width: 0px; height: 0; border-style: solid; border-width: 100px; border-color: transparent transparent red transparent;}</code></pre><h2 id="常用布局方式"><a href="#常用布局方式" class="headerlink" title="常用布局方式"></a>常用布局方式</h2><h3 id="表格布局"><a href="#表格布局" class="headerlink" title="表格布局"></a>表格布局</h3><pre><code> <table> <tr> <td class="left">left</td> <td class="right">right</td> </tr> </table></code></pre><h3 id="float-margin"><a href="#float-margin" class="headerlink" title="float+margin"></a>float+margin</h3><pre><code> <style> .container { width: 500px; height: 500px; } .left { width: 100px; height: 100%; float: left; background: green; } .middle { margin-left: 100px; /*空出和左边width一样*/ margin-right: 200px; /*空出和右边width一样*/ background: #000 } .right { height: 100%; width: 200px; float: right; background: yellow; } </style> <div class="container"> <div class="left">left</div> <div class="right">right</div> <!--先写right，right写在最后会因为float上靠--> <div class="middle">middle</div> </div></code></pre><h3 id="inline-block"><a href="#inline-block" class="headerlink" title="inline-block"></a>inline-block</h3><ul><li>像文本一样排block元素</li><li>问题:中间有间隙：<ul><li>解决方法：把父元素字体大小设为0，并在子元素中设置字体大小</li></ul></li></ul><pre><code> <style> .container { width: 500px; height: 500px; } .left { width: 100px; height: 100%; display: inline-block; background: green; } .right { height: 100%; width: 200px; display: inline-block; background: yellow; } </style> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div></code></pre><h3 id="flexbox"><a href="#flexbox" class="headerlink" title="flexbox"></a>flexbox</h3><p><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool" target="_blank" rel="noopener">参考</a></p><p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p><p><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png" alt=""></p><p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p><ul><li><p>弹性盒子的属性：</p></li><li><p>flex-direction：属性决定主轴的方向（即项目的排列方向）。</p><ul><li>row（默认值）：主轴为水平方向，起点在左端。</li><li>row-reverse：主轴为水平方向，起点在右端。</li><li>column：主轴为垂直方向，起点在上沿。</li><li>column-reverse：主轴为垂直方向，起点在下沿。</li></ul></li><li>flex-wrap: 定义，如果一条轴线排不下，如何换行。<ul><li>nowrap（默认）：不换行。</li><li>wrap：换行，第一行在上方。</li><li>wrap-reverse：换行，第一行在下方。 </li></ul></li><li>flex-flow: flex-direction属性和flex-wrap属性的简写形式</li><li>justify-content: 定义了项目在主轴上的对齐方式。<ul><li>flex-start（默认值）：左对齐</li><li>flex-end：右对齐</li><li>center： 居中</li><li>space-between：两端对齐，项目之间的间隔都相等。</li><li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li></ul></li><li>align-items: 定义项目在交叉轴上如何对齐。<ul><li>flex-start：交叉轴的起点对齐。</li><li>flex-end：交叉轴的终点对齐。</li><li>center：交叉轴的中点对齐。</li><li>baseline: 项目的第一行文字的基线对齐。</li><li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 </li></ul></li><li><p>align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p><ul><li>flex-start：与交叉轴的起点对齐。</li><li>flex-end：与交叉轴的终点对齐。</li><li>center：与交叉轴的中点对齐。</li><li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li><li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li><li>stretch（默认值）：轴线占满整个交叉轴。 </li></ul></li><li><p>项目的属性</p></li><li>order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。</li><li>flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</li><li>flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</li><li>flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</li><li>flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto</li><li>align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch</li></ul><pre><code> <style> .a1 { display: flex; height:100px; width: 500px; background: #000 } .a2 { flex: 1; background: red } </style> <div class="a1"> <div class="a2">123 </div> </div></code></pre><h3 id="响应式设计和布局"><a href="#响应式设计和布局" class="headerlink" title="响应式设计和布局"></a>响应式设计和布局</h3><ul><li>响应式设计就是网站能够兼容多个不同大小的终端，而不是为每个终端做一个特定的版本</li><li>基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式</li><li>对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过监听window.onresize 方法来实现兼容</li><li>主要考虑屏幕大小</li><li>主要方法：<ul><li>隐藏：隐藏导航栏等不重要的东西</li><li>折行：pc端一行显示多个的在移动端一行显示少一些</li><li>自适应空间：多留出自适应空间</li></ul></li><li><p>方式：</p><ul><li>rem：通过html的字体大小确定元素大小<ul><li>html默认的样式字体大小为16px，1rem=16px，不同屏幕在mediaquery中改html的字体大小即</li></ul></li><li>viewport：在meta中手工确定屏幕大小<code>content="width=320"</code></li><li><p>媒体查询：为不同屏幕写样式</p><pre><code> @media (max-width: 640px) { .left{display: none} /*为移动端隐藏样式*/ }</code></pre></li></ul></li></ul><h2 id="请列举几种隐藏元素的方法"><a href="#请列举几种隐藏元素的方法" class="headerlink" title="请列举几种隐藏元素的方法"></a>请列举几种隐藏元素的方法</h2><ul><li>visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在</li><li>opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明</li><li>position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外</li><li>display: none; 元素会变得不可见，并且不会再占用文档的空间。</li><li>transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留</li><li><div hidden="hidden"> HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态</div></li><li>height: 0; 将元素高度设为 0 ，并消除边框</li><li>filter: blur(0); CSS3 属性，将一个元素的模糊度设置为 0</li></ul><h2 id="css-属性-content-有什么作用？"><a href="#css-属性-content-有什么作用？" class="headerlink" title="css 属性 content 有什么作用？"></a>css 属性 content 有什么作用？</h2><p>content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式</p><h2 id="元素竖向的百分比设定是相对于容器的高度吗？"><a href="#元素竖向的百分比设定是相对于容器的高度吗？" class="headerlink" title="元素竖向的百分比设定是相对于容器的高度吗？"></a>元素竖向的百分比设定是相对于容器的高度吗？</h2><p>元素竖向的百分比设定是相对于容器的宽度，而不是高度</p><h2 id="a-标签上四个伪类的使用顺序是怎么样的？"><a href="#a-标签上四个伪类的使用顺序是怎么样的？" class="headerlink" title="a 标签上四个伪类的使用顺序是怎么样的？"></a>a 标签上四个伪类的使用顺序是怎么样的？</h2><p>link > visited > hover > active 简称 lvha(love-ha)</p><p>伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）</p><p>在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色</p><h2 id="设置元素浮动后，该元素的-display-值会如何变化？"><a href="#设置元素浮动后，该元素的-display-值会如何变化？" class="headerlink" title="设置元素浮动后，该元素的 display 值会如何变化？"></a>设置元素浮动后，该元素的 display 值会如何变化？</h2><p>设置元素浮动后，该元素的 display 值自动变成 block</p><h2 id="请解释-CSS-sprites，以及你要如何在页面或"><a href="#请解释-CSS-sprites，以及你要如何在页面或" class="headerlink" title="请解释 CSS sprites，以及你要如何在页面或"></a>请解释 CSS sprites，以及你要如何在页面或</h2><ul><li>CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。</li><li>CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。</li></ul><h2 id="margin叠加几种情况"><a href="#margin叠加几种情况" class="headerlink" title="margin叠加几种情况"></a>margin叠加几种情况</h2><p>margin叠加的意思是：当两个或者更多的margin相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距中高度较大者。</p><ol><li><p>当一个元素出现在另一个元素上面时，第一个元素的底边外边距与第二个元素的顶边外边距发生叠加。如图：<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/HmfhpRiWOBUiqhWg7nSjo8JdKXTfAM3LotdEYntiRLg!/b/dAcBAAAAAAAA&bo=5gKqAQAAAAADB20!&rf=viewer_4" alt=""></p></li><li><p>一个元素在另一个元素中时，它们的顶边距和低边距也会发生叠加<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/UiHoQ6RDkWO.LfVZIG5bem*UjUZOg1z0kFIrKQ94KEc!/b/dL8AAAAAAAAA&bo=1wINAQAAAAADF.s!&rf=viewer_4" alt=""></p></li><li><p>果一个元素是空元素（即一个元素没有内容，内边距和边框），这种情况外边距的顶边距和低边距碰在一起也会发生叠加<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/rGiGnulgayVLLScrCfPXfr48PlAlDPhZaz5S*RhN*aY!/b/dLgAAAAAAAAA&bo=ywKiAAAAAAADF1k!&rf=viewer_4" alt=""></p></li><li><p>在上面那种空元素的情况，如果该空元素与另一个元素的外边距碰在一起，也会发生叠加。<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/g9JbXTvs5iHtLE3lZdF.b04G4xmre5IYTTXNJ8z4CMk!/b/dL8AAAAAAAAA&bo=BgO1AAAAAAADF4I!&rf=viewer_4" alt=""></p></li></ol><p>以上4种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加，同样水平方向也不会发生叠加。</p><h2 id="水平居中和垂直居中"><a href="#水平居中和垂直居中" class="headerlink" title="水平居中和垂直居中"></a>水平居中和垂直居中</h2><h2 id="css问题"><a href="#css问题" class="headerlink" title="css问题"></a>css问题</h2><ul><li>css优先级<ul><li>权重：id>class>tag</li><li>!important: 最高</li><li>内联样式高</li><li>后写的优先级高</li></ul></li><li>伪类和伪元素的区别<ul><li>伪类表状态 hoover等</li><li>伪元素是真的元素 before after 在页面中会显示</li><li>前者单冒号 后者双冒号</li></ul></li><li>实现两栏（三栏）布局的方法<ul><li>表格布局</li><li>float+margin 清楚浮动</li><li>inline-block 处理间隙</li><li>flexbox 兼容性差</li></ul></li><li>absolute和fix有什么区别<ul><li>absolute相对于最近的absolute/relative来定位</li><li>fix相对于屏幕/viewport定位</li></ul></li><li>inlineblock为什么有间隙<ul><li>空白字符</li><li>解决：消灭字符；父元素字体设为0</li></ul></li><li>清除浮动<ul><li>为什么有浮动：浮动的元素不会占据父元素的布局空间，父元素不会管浮动元素，所以可能会高度塌陷</li><li>清除：给父元素加定高宽；父元素加overflowhidden；给父元素加:after{clearboth}；最后加一行空行clearboth</li></ul></li><li>如何适配移动端页面<ul><li>viewport</li><li>rem/viewport/media query</li><li>设计上：隐藏/折行/自适应<br>visibility: hidden;<br>display: block;<br>font-size: 0;<br>content: “ “;<br>clear: both;<br>height: 0;</li></ul></li></ul>]]></content>
<summary type="html">
<h2 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h2><p>标签：p{}<br>class: .class{}<br>id：#id {}<br>同一标签，多个类：p.c
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="css" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/css/"/>
<category term="css" scheme="http://yoursite.com/tags/css/"/>
</entry>
<entry>
<title>Alexnet图像分类</title>
<link href="http://yoursite.com/2019/05/22/Alexnet%E5%9B%BE%E5%83%8F%E5%88%86%E7%B1%BB/"/>
<id>http://yoursite.com/2019/05/22/Alexnet图像分类/</id>
<published>2019-05-22T13:12:11.000Z</published>
<updated>2019-09-19T09:45:17.230Z</updated>
<content type="html"><![CDATA[<p>github链接：<a href="https://github.com/tedqin/Alexnet_Imagenet" target="_blank" rel="noopener">https://github.com/tedqin/Alexnet_Imagenet</a></p><h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><ul><li><p>概述</p><ul><li>Alexnet是Hinton小组在ImageNet图像处理大赛ISVRC2012中使用的神经网络模型，并获得了第一名，测试错误率相比往年的第一名都有大幅度的提升，top5测试错误率是15.3%，第二名是26.2%。Alexnet有60M个参数，650,000个神经元，5个卷积层和3个全连接层（1000类的softmax分类器）。Alexnet模型由Alex Krizhevsky 等人在两个GTX 580 3GB GPU上训练5、6天左右得到。目前是深度学习图像处理领域当中最常用的模型之一。<br>AlexNet相比于以前的一些网络模型来说，做出了很多创新，主要包括以下几点</li></ul></li><li><p>框架</p><ul><li>使用激活函数ReLu</li><li>多GPU并行训练</li><li>局部影响标准化</li><li>重叠池化</li></ul></li></ul><h3 id="模型结构"><a href="#模型结构" class="headerlink" title="模型结构"></a>模型结构</h3><p>Alexnet有5个卷积层和3个全连接层，并且Alex发现移除任意一层都会降低最终的效果。网络结构如图</p><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/MDI.lWfmb18X9HJ8Z9Z8wW2rzZpaVeOGvTdioB70oT0!/b/dL4AAAAAAAAA&bo=KQK3AAAAAAARB6w!&rf=viewer_4" alt=""></p><p>这个网络前面5层是卷积层，后面三层是全连接层，最终softmax输出是1000类。</p><ul><li>第三卷积层用384个3<em>3</em>256的卷积核,得到13<em>13</em>192*2的卷积层。 </li><li>第四卷积层用384个3<em>3</em>192的卷积核，得到13<em>13</em>192*2的卷积层。 </li><li>第五卷积层用256个3<em>3</em>192的卷积核，得到13<em>13</em>128*2的卷积层。<br>每个全连接层有4096个神经元。</li></ul><p>总体而言，Alexnet网络的结构如下：<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/v1PDIDyPpakIA.VFTtFuNauV8xNbFsDq1fxoAv54csA!/b/dL8AAAAAAAAA&bo=KwEuAQAAAAARBzU!&rf=viewer_4" alt=""></p><h3 id="数据集"><a href="#数据集" class="headerlink" title="数据集"></a>数据集</h3><p><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/Tdt6xdlo.9zf*.y5KUjYTKADk2Ni3Ljk9p6pbMSioUA!/b/dLsAAAAAAAAA&bo=sgHaAAAAAAARB1k!&rf=viewer_4" alt=""></p><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><p>caffe提供的预训练模型一共包括了1000类图像，涵盖了生物、天文、自然、科技等多个方面的相关图像，具体在caffe_classes.py下，由于文件本身较大就没放在github上，可以很容易在网上找到<br>测试集包括1000张图像，共200类，标签存储在lable.txt当中。取测试图像概率最大类的下标作为测试的分类结果（即top-1测试），并且与label对比，最后计算得出整个测试集得precision在75%左右，算是比较好的结果。<br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/Y6zGEfjfPaAqty*cwwmXV0bvwVgfvNPZFjUwZEgPBTg!/b/dLgAAAAAAAAA&bo=TQFRAAAAAAARFz0!&rf=viewer_4" alt=""><br><img src="http://m.qpic.cn/psb?/V12vH3Ht0pjpx3/yOEEimKxBk**qfEFj8joIpFiUHAQl2xnRDDayqC*h8I!/b/dMMAAAAAAAAA&bo=sQFJAAAAAAARF9k!&rf=viewer_4" alt=""></p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>AlexNet可以说是深度神经网络的鼻祖，相比于后来的VGG和googlenet而言，它的构造更加简单，而且结构也已经非常的成熟和稳固。<br>作为学校的大创项目用alexnet有点蠢，但是时间紧迫，也分享下自己学习cnn的过程。</p>]]></content>
<summary type="html">
<p>github链接：<a href="https://github.com/tedqin/Alexnet_Imagenet" target="_blank" rel="noopener">https://github.com/tedqin/Alexnet_Imagenet</
</summary>
<category term="machine learning" scheme="http://yoursite.com/categories/machine-learning/"/>
<category term="cnn" scheme="http://yoursite.com/categories/machine-learning/cnn/"/>
<category term="python" scheme="http://yoursite.com/tags/python/"/>
<category term="machine learning" scheme="http://yoursite.com/tags/machine-learning/"/>
</entry>
<entry>
<title>learningJS</title>
<link href="http://yoursite.com/2018/12/13/learningJS/"/>
<id>http://yoursite.com/2018/12/13/learningJS/</id>
<published>2018-12-13T09:02:36.000Z</published>
<updated>2019-07-31T01:51:16.146Z</updated>
<content type="html"><![CDATA[<h5 id="output-is-the-best-input，以下每一项都可以单独写一篇文章"><a href="#output-is-the-best-input，以下每一项都可以单独写一篇文章" class="headerlink" title="output is the best input，以下每一项都可以单独写一篇文章"></a>output is the best input，以下每一项都可以单独写一篇文章</h5><h2 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h2><ul><li>原型、原型链</li><li>闭包</li><li>es6的新特性</li><li><p>作用域 </p><ul><li>全局和局部环境 </li><li>var let const的区别</li></ul></li><li><p>ajax xhr</p></li><li>this 箭头函数</li><li>事件绑定、监听、委托、代理</li><li>继承</li><li>常用数组方法</li><li>defer和async</li><li>虚拟dom</li></ul><h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><ul><li>html的语义标签</li><li>html5新特性</li><li>canvas</li></ul><h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><ul><li>bootstrap</li></ul><h2 id="dom"><a href="#dom" class="headerlink" title="dom"></a>dom</h2><ul><li>定位元素的几种方法</li><li>遍历</li></ul><h2 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h2><ul><li>渲染和绘制</li><li>兼容性</li><li>布局</li></ul><h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><ul><li>webpack</li></ul><h2 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h2>]]></content>
<summary type="html">
<h5 id="output-is-the-best-input，以下每一项都可以单独写一篇文章"><a href="#output-is-the-best-input，以下每一项都可以单独写一篇文章" class="headerlink" title="output is th
</summary>
<category term="前端" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="javascript" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF/javascript/"/>
<category term="javascript" scheme="http://yoursite.com/tags/javascript/"/>
<category term="前端" scheme="http://yoursite.com/tags/%E5%89%8D%E7%AB%AF/"/>
</entry>
<entry>
<title>c++tips笔记</title>
<link href="http://yoursite.com/2018/10/18/cpp%E7%AC%94%E8%AE%B0/"/>
<id>http://yoursite.com/2018/10/18/cpp笔记/</id>
<published>2018-10-18T08:19:02.000Z</published>
<updated>2019-07-28T17:52:43.745Z</updated>
<content type="html"><![CDATA[<h2 id="指针"><a href="#指针" class="headerlink" title="指针"></a>指针</h2><h3 id=""><a href="#" class="headerlink" title="*"></a>*</h3><ul><li><ul><li>是取值运算符，对地址使用可以获得地址中储存的数值。对于指针a，*a表示取a中的值</li></ul></li><li>在 <em>定义</em> 时，<em> 是一个标识符，声明该变量是一个指针，比如说int </em>p; 那p就是一个指向int型的指针</li><li>在 <em>调用</em> 时，<em> p是指针p指向的那个变量，比如说之前有int a=5；int </em> p=&a；那么p的值是a的地址，也就是指针p指向a，<em> p则等于a的值，即</em>p=5。</li></ul><h3 id="amp"><a href="#amp" class="headerlink" title="&"></a>&</h3><ul><li>&在 <em>定义</em> 时则是引用，比如说有定义int a=5；再定义int b=&a；那么这里的b则引用a的值，即b=5，而再给b赋值：b=10，a的值也会变为10。</li><li>&在 <em>调用</em> 是地址运算符，对变量使用可以获得该变量的地址, 对于变量b，&b表示取b的地址</li></ul><h3 id="example"><a href="#example" class="headerlink" title="example"></a>example</h3><ul><li>先定义有int x = 0；int *p = &x；</li><li>若定义函数： void fun1（int a）{ a=5；} ，则调用：fun1(x); 之后，x还等于0；因为fun1函数只改变了形参a的值，a只是fun1函数里的局部变量，调用fun1(x)相当于是“a=x;a=5;”，x没变；</li><li>若定义函数：void fun2（int &a）{ a=5；} ， 则调用：fun2(x); 之后，x等于5；因为这里的a引用了x的值；</li><li>若定义函数：void fun3（int <em> a）{ </em> a=5；} ， 则调用：fun3(p); 之后，x也等于5；因为fun3函数的参数a是一个指针，相当于a=p；<em> a则与</em> p指向同一地址，改变<em> a即改变</em>p即x</li><li>return *this:</li><li></li></ul><h2 id="strcpy和strncpy："><a href="#strcpy和strncpy：" class="headerlink" title="strcpy和strncpy："></a>strcpy和strncpy：</h2><p><code>strcpy(char *ch1, char *ch2)</code>：</p><ul><li>直接将ch2指向的由”\0”结束的字符串复制到ch1，ch1必须有足够的空间来存储ch2</li><li>若ch2长于ch1，还是会复制，但是ch1会溢出<br>*</li></ul><p><code>strncpy(char *ch1, char *ch2, n)</code>:</p><ul><li>将ch2中最多n个字符复制到ch1</li><li>如果n>ch1长度，ch1溢出</li><li>如果n<ch1长度，且如果<ul><li>ch2长度<=ch1长度，则ch2前n个字符复制到ch1</li><li>ch2长度>ch1长度，出错</li></ul></li><li>建议：将n设置为ch1长度</li></ul>]]></content>
<summary type="html">
<h2 id="指针"><a href="#指针" class="headerlink" title="指针"></a>指针</h2><h3 id=""><a href="#" class="headerlink" title="*"></a>*</h3><ul>
<li><ul
</summary>
<category term="cpp" scheme="http://yoursite.com/categories/cpp/"/>
<category term="cpp" scheme="http://yoursite.com/tags/cpp/"/>
</entry>
<entry>
<title>mac常用指令</title>
<link href="http://yoursite.com/2018/10/10/mac%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4/"/>
<id>http://yoursite.com/2018/10/10/mac常用指令/</id>
<published>2018-10-09T18:55:04.000Z</published>
<updated>2019-07-28T17:57:50.521Z</updated>
<content type="html"><![CDATA[<p>ps: * 指令名称 <code>指令</code> <code>实例</code></p><p>参考：<a href="https://www.jianshu.com/p/8803bf591956" target="_blank" rel="noopener">https://www.jianshu.com/p/8803bf591956</a></p><h1 id="基本指令"><a href="#基本指令" class="headerlink" title="基本指令"></a>基本指令</h1><h2 id="目录操作"><a href="#目录操作" class="headerlink" title="目录操作"></a>目录操作</h2><ul><li>创建目录 <code>mkdir</code> <code>mkdir dirname</code></li><li>删除目录 <code>rmdir</code> <code>rmdir dirname</code></li><li>移动或重命名一个目录 <code>mvdir</code> <code>mvdir dir1 dir2</code></li><li>改变当前目录 <code>rmdir</code> <code>rmdir dirname</code></li><li>显示当前目录的路径名 <code>pwd</code> <code>pwd</code></li><li>显示当前目录的内容 <code>ls</code> <code>ls -la</code></li></ul><h2 id="文件操作"><a href="#文件操作" class="headerlink" title="文件操作"></a>文件操作</h2><ul><li>显示文件内容或连接文件 <code>cat</code> <code>cat filename</code></li><li>显示非文本文件的内容 <code>od</code> <code>od -c filename</code></li><li>复制文件或目录 <code>cp</code> <code>cp file1 file2</code></li><li>删除文件或目录 <code>rm</code> <code>rm filename</code></li><li>改变文件名或所在目录 <code>mv</code> <code>mv file1 file2</code></li><li>使用匹配表达式查找文件 <code>find</code> <code>find . -name "*.c" -print</code></li><li>显示文件类型 <code>file</code> <code>file filename</code></li></ul><h2 id="选择操作"><a href="#选择操作" class="headerlink" title="选择操作"></a>选择操作</h2><ul><li>显示文件的最初几行 <code>head</code> <code>head -20 filename</code></li><li>显示文件的最后几行 <code>tail</code> <code>tail -15 filename</code></li><li>显示文件每行中的某些域 <code>cut</code> <code>cut -f1,7 -d: /etc/passwd</code></li><li>从标准输入中删除若干列 <code>colrm</code> <code>colrm 8 20 file2</code></li><li>排序或归并文件 <code>sort</code> <code>sort -d -f -u file1</code></li><li>去掉文件中的重复行 <code>uniq</code> <code>uniq file1 file2</code></li><li>显示两有序文件的公共和非公共行 <code>comm</code> <code>comm file1 file2</code></li><li>统计文件的字符数、词数和行数 <code>wc</code> <code>wc filename</code></li><li>给文件加上行号 <code>nl</code> <code>nl file1 >file2</code></li></ul><h2 id="进程操作"><a href="#进程操作" class="headerlink" title="进程操作"></a>进程操作</h2><ul><li>显示进程当前状态 <code>ps</code> <code>ps u</code></li><li>终止进程 <code>kill</code> <code>kill -9 30142</code></li></ul><h2 id="时间操作"><a href="#时间操作" class="headerlink" title="时间操作"></a>时间操作</h2><ul><li>显示系统的当前日期和时间 <code>diff</code> <code>diff file1 file2</code></li><li>显示⽇日历 <code>cal</code> <code>cal 8 1996</code></li><li>统计程序的执⾏行行时间 <code>time</code> <code>time a.out</code></li></ul><h2 id="网络与通信操作"><a href="#网络与通信操作" class="headerlink" title="网络与通信操作"></a>网络与通信操作</h2><ul><li>远程登录 <code>telnet</code> <code>telnet hpc.sp.net.edu.cn</code></li><li>远程登录 <code>rlogin</code> <code>rlogin hostname -l username</code></li><li>在远程主机执⾏行行指定命令 <code>rsh</code> <code>rsh f01n03 date</code></li><li>在本地主机与远程主机之间传输⽂文件 <code>ftp</code> <code>ftp[ftp.sp.net.edu.cn]</code></li><li>在本地主机与远程主机之间复制⽂文件 <code>rcp</code> <code>rcp[ftp.sp.net.edu.cn]</code></li><li>给⼀一个⽹网络主机发送 回应请求 <code>ping</code> <code>ping hpc.sp.net.edu.cn</code></li><li>阅读和发送电⼦子邮件 <code>mail</code> <code>mail</code></li><li>允许或拒绝接收报⽂文 <code>mesg</code> <code>mesg n</code></li></ul><h2 id="core-shell-指令"><a href="#core-shell-指令" class="headerlink" title="core shell 指令"></a>core shell 指令</h2><ul><li>列列出最近执⾏行行过的⼏条命令及编号 <code>history</code> <code>history</code></li><li>重复执⾏行行最近执⾏过的某条命令 <code>r</code> <code>r-2</code></li><li>给某个命令定义别名 <code>alias</code> <code>alias del=rm -i</code></li><li>取消对某个别名的定义 <code>diff</code> <code>diff file1 file2</code></li><li>比较并显示两个文件的差异 <code>unalias</code> <code>unalias del</code></li></ul><h2 id="其它命令"><a href="#其它命令" class="headerlink" title="其它命令"></a>其它命令</h2><ul><li>显示操作系统的有关信息 <code>uname</code> <code>uname -a</code></li><li>清除屏幕或窗⼝口内容 <code>clear</code> <code>clear</code></li><li>显示当前所有设置过的环境变量量 <code>env</code> <code>env</code></li><li>列列出当前登录的所有⽤用户 <code>who</code> <code>who</code></li><li>显示当前正进⾏行行操作的⽤用户名 <code>whoami</code> <code>whoami</code></li><li>显示终端或伪终端的名称 <code>tty</code> <code>tty</code></li><li>显示或重置控制键定义 <code>stty</code> <code>stty -a</code></li><li>查询磁盘使⽤用情况 <code>du</code> <code>du -k subdirdf</code></li><li>显示⽂文件系统的总空间和可⽤用空间 <code>/tmp</code> </li><li>显示当前系统活动的总信息 <code>w</code> </li><li>在本地主机与远程主机之间复制⽂文件 <code>rcp</code> <code>rcp[ftp.sp.net.edu.cn]</code></li><li>给⼀一个⽹网络主机发送 回应请求 <code>ping</code> </li></ul><h2 id="sudo命令"><a href="#sudo命令" class="headerlink" title="sudo命令"></a>sudo命令</h2><ul><li>临时使⽤用root权限来编辑/etc/shadow密码⽂文件 <code>sudo gedit /etc/shadow</code> </li><li>注意$和#的变化，#表示你在最⾼高权限root⾥里里⾯面</li></ul>]]></content>
<summary type="html">
<p>ps: * 指令名称 <code>指令</code> <code>实例</code></p>
<p>参考：<a href="https://www.jianshu.com/p/8803bf591956" target="_blank" rel="noopener">http
</summary>
<category term="基础知识" scheme="http://yoursite.com/categories/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/"/>
<category term="基础" scheme="http://yoursite.com/tags/%E5%9F%BA%E7%A1%80/"/>
</entry>
<entry>
<title>hexo搭建blog常用命令</title>
<link href="http://yoursite.com/2018/10/10/hexo%E6%90%AD%E5%BB%BAblog%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/"/>
<id>http://yoursite.com/2018/10/10/hexo搭建blog常用命令/</id>
<published>2018-10-09T18:29:32.000Z</published>
<updated>2019-07-28T17:55:28.956Z</updated>
<content type="html"><![CDATA[<h2 id="常规搭建"><a href="#常规搭建" class="headerlink" title="常规搭建"></a>常规搭建</h2><h2 id="常规指令"><a href="#常规指令" class="headerlink" title="常规指令"></a>常规指令</h2><p><code>hexo new "blogname" #新建博客</code></p><p><code>hexo g #生成</code></p><p><code>hexo s #启动服务器预览</code></p><p><code>hexo d #部署</code> </p><p><code>hexo clean #清除缓存</code> </p><h2 id="更换设备搭建"><a href="#更换设备搭建" class="headerlink" title="更换设备搭建"></a>更换设备搭建</h2><p>参考：<a href="https://www.zhihu.com/question/21193762/answer/103097754" target="_blank" rel="noopener">https://www.zhihu.com/question/21193762/answer/103097754</a></p><ul><li>打开git bash，在用户主目录下运行：</li></ul><p><code>ssh-keygen -t rsa -C "[email protected]"</code> </p><p>把其中的邮件地址换成自己的邮件地址，然后一路回车</p><ul><li><p>最后完成后，会在用户主目录下生成.ssh目录，里面有id_rsa和id_rsa.pub两个文件，这两个就是SSH key密钥对，id_rsa是私钥，千万不能泄露出去，id_rsa.pub是公钥，可以放心地告诉任何人。</p></li><li><p>登陆GitHub，打开「Settings」->「SSH and GPG keys」，然后点击「new SSH key」，填上任意Title，在Key文本框里粘贴公钥id_rsa.pub文件的内容（千万不要粘贴成私钥了！），最后点击「Add SSH Key」，你就应该看到已经添加的Key。<br>注意：不要在git版本库中运行ssh，然后又将它提交，这样就把密码泄露出去了。</p></li><li>下载Node.js，并安装.</li><li>打开git bash客户端，输入 npm install hexo-cli -g，开始安装hexo</li><li><p>下面就将原来的文件拷贝到新电脑中，但是要注意哪些文件是必须的，哪些文件是可以删除的。</p><pre><code> 1）讨论下哪些文件是必须拷贝的：首先是之前自己修改的文 件，像站点配置_config.yml，theme文件夹里面的主题， 以及source里面自己写的博客文件，这些肯定要拷贝的。除 此之外，还有 三个文件需要有，就是scaffolds文件夹（文章的模板）、 package.json（说明使用哪些包）和.gitignore（限定在 提交的时候哪些文件可以忽略）。其实，这三个文件不是我们 修改的，所以即使丢失了，也没有关系，我们可以建立一个新 的文件夹，然后在里面执行hexo init，就会生成这三个文 件，我们只需要将它们拷贝过来使用即可。总结： _config.yml，theme/，source/，scaffolds/， package.json，.gitignore，是需要拷贝的。</code></pre><p> </p><pre><code> （2）再讨论下哪些文件是不必拷贝的，或者说可以删除的： 首先是.git文件，无论是在站点根目录下，还是主题目录下 的.git文件，都可以删掉。然后是文件夹 node_modules（在用npm install会重新生成）， public（这个在用hexo g时会重新生成），.deploy_git 文件夹（在使用hexo d时也会重新生成），db.json文件。 其实上面这些文件也就是.gitignore文件里面记载的可以忽 略的内容。总结：.git/，node_modules/， public/，.deploy_git/，db.json文件需要删除。</code></pre></li><li><p>在git bash中切换目录到新拷贝的文件夹里，使用 npm install 命令，进行模块安装。很明显我们这里没用hexo init初始化，因为有的文件我们已经拷贝生成过来了，所以不必用hexo init去整体初始化，如果不慎在此时用了hexo init，则站点的配置文件_config.yml里面内容会被清空使用默认值，所以这一步一定要慎重，不要用hexo init。</p></li><li><p>安装其他的一些必要组件，如果在node_modules里面有的，就不要重复安装了：</p><pre><code> （1）为了使用hexo d来部署到git上，需要安装</code></pre><p> <code>npm install hexo-deployer-git --save</code></p><pre><code> （2）为了建立RSS订阅，需要安装</code></pre><p> <code>npm install hexo-generator-feed --save</code></p><pre><code> （3）为了建立站点地图，需要安装</code></pre><p> <code>npm install hexo-generator-sitemap --save</code></p><p> 插件安装后，有的需要对配置文件_config.yml进行配置，具体怎么配置，可以参考上面插件在github主页上的具体说明</p></li><li><p>使用hexo g，然后使用hexo d进行部署，如果都没有出错，就转移成功了！</p></li></ul>]]></content>
<summary type="html">
<h2 id="常规搭建"><a href="#常规搭建" class="headerlink" title="常规搭建"></a>常规搭建</h2><h2 id="常规指令"><a href="#常规指令" class="headerlink" title="常规指令"></a
</summary>
<category term="blog" scheme="http://yoursite.com/categories/blog/"/>
<category term="hexo" scheme="http://yoursite.com/categories/blog/hexo/"/>
<category term="hexo" scheme="http://yoursite.com/tags/hexo/"/>
</entry>
<entry>
<title>用CNN实现深度生成对抗网络GAN</title>
<link href="http://yoursite.com/2018/09/10/%E7%94%A8CNN%E5%AE%9E%E7%8E%B0%E6%B7%B1%E5%BA%A6%E7%94%9F%E6%88%90%E5%AF%B9%E6%8A%97%E7%BD%91%E7%BB%9CGAN/"/>
<id>http://yoursite.com/2018/09/10/用CNN实现深度生成对抗网络GAN/</id>
<published>2018-09-10T14:32:01.000Z</published>
<updated>2019-09-19T09:01:00.912Z</updated>
<content type="html"><![CDATA[<h2 id="GAN"><a href="#GAN" class="headerlink" title="GAN"></a>GAN</h2><p>生成对抗网络（Generative Adversarial Network，GAN）是近几年很热门的一种深度学习神经网络模型，是目前在复杂分布上进行无监督学习最前沿的模型之一，这个概念由Ian Goodfellow和Yoshua Bengio等人在2014年提出，GAN的核心思想源自博弈论，它通过构造生成器（Generator）和判别器（Discriminator）在训练过程中互相博弈学习，最终得到理想的结果。其中生成器的目的在于生成虚假的样本分布，判别器的目的在于判别出输入的样本是否真实。由于GAN模型“博弈”的这一特点，它已经开始被应用到语音和语言处理、电脑病毒监测、棋类比赛程序等问题的研究当中。另外，GAN最常用的领域还是图像处理和计算机视觉，进行图像生成，构成各种逼真的室内外场景。</p><h2 id="GAN的基本模型"><a href="#GAN的基本模型" class="headerlink" title="GAN的基本模型"></a>GAN的基本模型</h2><p><img src="./img/model.png" alt="avatar"></p><h2 id="CNN实现GAN"><a href="#CNN实现GAN" class="headerlink" title="CNN实现GAN"></a>CNN实现GAN</h2><p>GAN提出的是一种对抗模型的思想，而要实现它，目前流行的是使用感知器或者多层神经网络。而用CNN来实现，可以大大解决GAN难以训练和不够稳定的问题，并且可以提高生成样本的质量、收敛速度，以及拓展维度。<br>CNN实现的改进：</p><ul><li>去掉了G和D中的池化层（pooling layer），并用微步幅卷积替代，能够分别使得G和D的下采样和上采样效率更高。</li><li>在G和D中使用批量规范化（Batch Normalization），通过将输入的每个样本单元标准化为0均值和单位方差来稳定学习，这有助于处理初始化不良导致的训练问题，也有助于梯度流向更深的网络层。</li><li>去掉最后一层卷积层后面的全连接层（fully layer），将生成器和判别器直接相连，能够有效提高模型收敛速率。</li><li>生成器中除了输出层采用Tanh激活函数，其余所有层都采用ReLU激活函数。</li><li>判别器中所有层都采用Leaky ReLU激活函数。</li></ul><h2 id="模型设计"><a href="#模型设计" class="headerlink" title="模型设计"></a>模型设计</h2><h3 id="生成器模型"><a href="#生成器模型" class="headerlink" title="生成器模型"></a>生成器模型</h3><p>生成器的网络由4层卷积层构成</p><ul><li>第1层：卷积核大小为5”×” 5，步长2，“same”填充，深度512，输出样本尺寸8”×” 8，生成函数ReLU</li><li>第2层：卷积核大小为5”×” 5，步长2，“same”填充，深度256，输出样本尺寸16”×” 16，生成函数ReLU</li><li>第3层：卷积核大小为5”×” 5，步长2，“same”填充，深度128，输出样本尺寸32”×” 32，生成函数ReLU</li><li>第4层：卷积核大小为5”×” 5，步长2，“same”填充，深度3，输出样本尺寸64”×” 64，生成函数Tanh</li></ul><p><img src="https://i.imgur.com/3mgI8Vf.png" alt=""></p><h3 id="判别器模型"><a href="#判别器模型" class="headerlink" title="判别器模型"></a>判别器模型</h3><p>判别器的4层卷积层具体如下：</p><ul><li>第1层：卷积核大小为5”×” 5，步长2，“same”填充，深度64，输出样本尺寸32”×” 32，生成函数Leaky ReLU。</li><li>第2层：卷积核大小为5”×” 5，步长2，“same”填充，深度128，输出样本尺寸16”×” 16，生成函数Leaky ReLU。</li><li>第3层：卷积核大小为5”×” 5，步长2，“same”填充，深度256，输出样本尺寸8”×” 8，生成函数Leaky ReLU。</li><li>第4层：卷积核大小为5”×” 5，步长2，“same”填充，深度512，输出样本尺寸4”×” 4，生成函数Sigmoid。</li></ul><p><img src="https://i.imgur.com/Olp9lpp.png" alt=""></p><h3 id="构建模型"><a href="#构建模型" class="headerlink" title="构建模型"></a>构建模型</h3><ul><li><p>构建生成器模型<br><pre>def generator(self, z):<br> self.z_, self.h0_w, self.h0_b = linear(z, self.gf_dim<em>8</em>4*4,</pre></p><pre><code> 'g_h0_lin', with_w=True)</code></pre><p> self.h0 = tf.reshape(self.z_, [-1, 4, 4, self.gf_dim * 8])<br>h0 = tf.nn.relu(self.g_bn0(self.h0))</p></li></ul><p>//第1层微步幅卷积层<br> self.h1, self.h1_w, self.h1_b = conv2d_transpose(h0,[self.batch_size, 8, 8, self.gf_dim*4], name=’g_h1’, with_w=True)<br>h1 = tf.nn.relu(self.g_bn1(self.h1))</p><p>//第2层微步幅卷积层<br> h2, self.h2_w, self.h2_b = conv2d_transpose(h1,<br> [self.batch_size, 16, 16, self.gf_dim*2], name=’g_h2’, with_w=True)<br>h2 = tf.nn.relu(self.g_bn2(h2))</p><p>//第3层微步幅卷积层<br> h3, self.h3_w, self.h3_b = conv2d_transpose(h2,<br> [self.batch_size, 32, 32, self.gf_dim*1], name=’g_h3’, with_w=True)<br> h3 = tf.nn.relu(self.g_bn3(h3))</p><p>//第4层微步幅卷积层，4层微步幅卷积后，矩阵维度变为（64, 64, 3）<br> h4, self.h4_w, self.h4_b = conv2d_transpose(h3,<br> [self.batch_size, 64, 64, 3], name=’g_h4’, with_w=True)<br> return tf.nn.tanh(h4)</p><p></p><ul><li>构建判别器模型<br><pre><br>def discriminator(self, image, reuse=False):<br>//第1层卷积<br>h0 = lrelu(conv2d(image, self.df_dim, name=’d_h0_conv’))</pre></li></ul><p>//第2层卷积<br>h1 = lrelu(self.d_bn1(conv2d(h0, self.df_dim*2, name=’d_h1_conv’)))</p><p>//第3层卷积<br>h2 = lrelu(self.d_bn2(conv2d(h1, self.df_dim*4, name=’d_h2_conv’)))</p><p>//第4层卷积<br> h3 = lrelu(self.d_bn3(conv2d(h2, self.df_dim*8, name=’d_h3_conv’)))<br> h4 = linear(tf.reshape(h3, [-1, 8192]), 1, ‘d_h3_lin’)<br> return tf.nn.sigmoid(h4), h4<br></p><ul><li>构建优化器<br><pre><br>//判别器优化器，最小化损失函数<br>d_optim = tf.train.AdamOptimizer(config.learning_rate, beta1=config.beta1) \<pre><code> .minimize(self.d_loss, var_list=self.d_vars)</code></pre>//判别器优化器，最小化损失函数<br>g_optim = tf.train.AdamOptimizer(config.learning_rate, beta1=config.beta1) \<pre><code> .minimize(self.g_loss, var_list=self.g_vars)</code></pre></pre></li></ul><p></p>]]></content>
<summary type="html">
<h2 id="GAN"><a href="#GAN" class="headerlink" title="GAN"></a>GAN</h2><p>生成对抗网络（Generative Adversarial Network，GAN）是近几年很热门的一种深度学习神经网络模型，是目前
</summary>
<category term="machine learning" scheme="http://yoursite.com/categories/machine-learning/"/>
<category term="gan" scheme="http://yoursite.com/categories/machine-learning/gan/"/>
<category term="python" scheme="http://yoursite.com/tags/python/"/>
<category term="machine learning" scheme="http://yoursite.com/tags/machine-learning/"/>
</entry>
</feed>