-
Notifications
You must be signed in to change notification settings - Fork 3
/
atom.xml
511 lines (292 loc) · 165 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>XinFei's Notes</title>
<link href="/atom.xml" rel="self"/>
<link href="http://blog.sunxinfei.com/"/>
<updated>2018-06-11T01:48:17.890Z</updated>
<id>http://blog.sunxinfei.com/</id>
<author>
<name>XinFei</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>博客迁移</title>
<link href="http://blog.sunxinfei.com/2018/06/11/NewBlog/"/>
<id>http://blog.sunxinfei.com/2018/06/11/NewBlog/</id>
<published>2018-06-11T01:42:37.000Z</published>
<updated>2018-06-11T01:48:17.890Z</updated>
<content type="html"><![CDATA[<p>本博客地址将迁移到<a href="https://github.com/SunXinFei/sunxinfei.github.io/issues" target="_blank" rel="noopener"><em>Github的issue</em></a>中。之前的博客blog.sunxinfei.com，是用hexo搭建的，流量统计、评论系统、图床、发布等等还是比较齐全的，只不过有个弊端就是更换设备，或者临时产生想法不能及时去书写，所以这点相比github的issue就显得有点花哨，github的issue里面包含加入图片和MD语法书写以及评论与回复，还可以加入不同的Labels标签方便文章的管理，对于一般的技术文章足以，之前的blog可以作为一些代码运行效果的展示，纯技术的还是更新在github的issue中，更方便。</p>]]></content>
<summary type="html">
<p>本博客地址将迁移到<a href="https://github.com/SunXinFei/sunxinfei.github.io/issues" target="_blank" rel="noopener"><em>Github的issue</em></a>中。之前的博
</summary>
</entry>
<entry>
<title>promise实现</title>
<link href="http://blog.sunxinfei.com/2018/02/01/promise%E5%AE%9E%E7%8E%B0/"/>
<id>http://blog.sunxinfei.com/2018/02/01/promise实现/</id>
<published>2018-02-01T12:08:01.000Z</published>
<updated>2018-03-23T08:10:37.881Z</updated>
<content type="html"><![CDATA[<p>思路就是把then的所有方法都加到一个队列里面，然后resolve的时候依次执行，<br><a id="more"></a></p><h3 id="基础实现"><a href="#基础实现" class="headerlink" title="基础实现"></a>基础实现</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserID</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>)</span>{</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">resolve(<span class="number">123</span>);</span><br><span class="line">},<span class="number">100</span>);</span><br><span class="line">});</span><br><span class="line">}</span><br><span class="line">getUserID().then(<span class="function"><span class="keyword">function</span>(<span class="params">id</span>)</span>{</span><br><span class="line"><span class="built_in">console</span>.log(id);</span><br><span class="line">});</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Promise</span>(<span class="params">fn</span>) </span>{</span><br><span class="line"><span class="keyword">var</span> deferreds = [];</span><br><span class="line"><span class="keyword">this</span>.then = <span class="function"><span class="keyword">function</span>(<span class="params">onFulfilled</span>)</span>{</span><br><span class="line">deferreds.push(onFulfilled);</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> resolve = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>{</span><br><span class="line">deferreds.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">deferred</span>)</span>{</span><br><span class="line">deferred(value);</span><br><span class="line">});</span><br><span class="line">};</span><br><span class="line">fn(resolve);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="Promise内如果是同步代码会有问题，会直接走resove"><a href="#Promise内如果是同步代码会有问题，会直接走resove" class="headerlink" title="Promise内如果是同步代码会有问题，会直接走resove"></a>Promise内如果是同步代码会有问题，会直接走resove</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUserID</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>)</span>{</span><br><span class="line">resolve(<span class="number">123</span>);</span><br><span class="line">});</span><br><span class="line">}</span><br><span class="line">getUserID().then(<span class="function"><span class="keyword">function</span>(<span class="params">id</span>)</span>{</span><br><span class="line"><span class="built_in">console</span>.log(id);</span><br><span class="line">});</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Promise</span>(<span class="params">fn</span>) </span>{</span><br><span class="line"><span class="keyword">var</span> deferreds = [];</span><br><span class="line"><span class="keyword">this</span>.then = <span class="function"><span class="keyword">function</span>(<span class="params">onFulfilled</span>)</span>{</span><br><span class="line">deferreds.push(onFulfilled);</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> resolve = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>{</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="comment">//加入任务队列，让主线程先执行</span></span><br><span class="line">deferreds.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">deferred</span>)</span>{</span><br><span class="line">deferred(value);</span><br><span class="line">});</span><br><span class="line">},<span class="number">0</span>);</span><br><span class="line">};</span><br><span class="line">fn(resolve);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="如果promise已经完成，之后then的回调不再执行，引入状态pending（等待）、fulfilled（完成）、rejected（拒绝）"><a href="#如果promise已经完成，之后then的回调不再执行，引入状态pending（等待）、fulfilled（完成）、rejected（拒绝）" class="headerlink" title="如果promise已经完成，之后then的回调不再执行，引入状态pending（等待）、fulfilled（完成）、rejected（拒绝）"></a>如果promise已经完成，之后then的回调不再执行，引入状态pending（等待）、fulfilled（完成）、rejected（拒绝）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Promise</span>(<span class="params">fn</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> deferreds = [];</span><br><span class="line"><span class="keyword">var</span> status = <span class="string">"pending"</span>;</span><br><span class="line"><span class="keyword">var</span> value = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">this</span>.then = <span class="function"><span class="keyword">function</span>(<span class="params">onFulfilled</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(status === <span class="string">"pending"</span>){</span><br><span class="line">deferreds.push(onFulfilled);\\加入队列</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">}</span><br><span class="line">onFulfilled(value);\\直接执行</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resolove</span>(<span class="params">newValue</span>)</span>{</span><br><span class="line">value = newValue;</span><br><span class="line">status = <span class="string">"fulfilled"</span>;</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">deferreds.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">deferred</span>)</span>{</span><br><span class="line">deferred(value);</span><br><span class="line">});</span><br><span class="line">},<span class="number">0</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">fn(resolve);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>思路就是把then的所有方法都加到一个队列里面，然后resolve的时候依次执行，<br>
</summary>
<category term="web前端" scheme="http://blog.sunxinfei.com/categories/web%E5%89%8D%E7%AB%AF/"/>
<category term="web前端" scheme="http://blog.sunxinfei.com/tags/web%E5%89%8D%E7%AB%AF/"/>
<category term="造轮子" scheme="http://blog.sunxinfei.com/tags/%E9%80%A0%E8%BD%AE%E5%AD%90/"/>
</entry>
<entry>
<title>JavaScript中的一些方法实现</title>
<link href="http://blog.sunxinfei.com/2018/01/24/JavaScript%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0/"/>
<id>http://blog.sunxinfei.com/2018/01/24/JavaScript中的一些方法实现/</id>
<published>2018-01-24T14:50:45.000Z</published>
<updated>2018-03-23T08:10:37.849Z</updated>
<content type="html"><![CDATA[<p>关于call、apply、bind、自定义事件、DOM事件绑定….等等原生实现</p><h3 id="实现call方法"><a href="#实现call方法" class="headerlink" title="实现call方法"></a>实现call方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//fun.call(thisArg, arg1, arg2, ...)</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.call = <span class="built_in">Function</span>.prototype.call || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line">context.fn = <span class="keyword">this</span>; <span class="comment">// 获取调用call的函数</span></span><br><span class="line"><span class="keyword">var</span> args = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>, len=<span class="built_in">arguments</span>.length ; i<len ; i++){</span><br><span class="line">args.push(<span class="built_in">arguments</span>[i]);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">eval</span>(<span class="string">'context.fn('</span> + args +<span class="string">')'</span>);</span><br><span class="line"><span class="keyword">delete</span> context.fn;</span><br><span class="line"><span class="keyword">return</span> result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><a id="more"></a><h3 id="实现apply"><a href="#实现apply" class="headerlink" title="实现apply"></a>实现apply</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//fun.apply(thisArg,[args]);</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.apply = <span class="built_in">Function</span>.prototype.apply || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line">context.fn = <span class="keyword">this</span>;</span><br><span class="line"><span class="comment">// var args = [];</span></span><br><span class="line"><span class="comment">// for(var i=1, len=arguments.length ; i<len ; i++){</span></span><br><span class="line"><span class="comment">// args.push(arguments[i]);</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="keyword">var</span> args = <span class="built_in">arguments</span>[<span class="number">1</span>];</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">eval</span>(<span class="string">'context.fn('</span>+args+<span class="string">')'</span>);</span><br><span class="line"><span class="keyword">delete</span> context.fn;</span><br><span class="line"><span class="keyword">return</span> result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="实现bind"><a href="#实现bind" class="headerlink" title="实现bind"></a>实现bind</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//fun.bind(thisArg[, arg1[, arg2[, ...]]])</span></span><br><span class="line"><span class="comment">//基础版本</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.bind = <span class="built_in">Function</span>.prototype.bind || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> self = <span class="keyword">this</span>;<span class="comment">//调用bind的方法</span></span><br><span class="line"><span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line"><span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">return</span> self.apply(context);</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"><span class="comment">//基础版本加上参数</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.bind = <span class="built_in">Function</span>.prototype.bind || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line"><span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line"><span class="keyword">var</span> bindArgs = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>,<span class="number">1</span>);</span><br><span class="line"><span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">var</span> tmpArgs = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>);</span><br><span class="line"><span class="keyword">var</span> newArgs = bindArgs.concat(tmpArgs);</span><br><span class="line"><span class="keyword">return</span> self.apply(context, newArgs);</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"><span class="comment">//满足构造函数版本</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.bind = <span class="built_in">Function</span>.prototype.bind || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line"> <span class="keyword">var</span> bindArgs = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>); <span class="comment">//bind函数的参数</span></span><br><span class="line"> <span class="keyword">var</span> fBound = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> tmpArgs = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>);<span class="comment">//返回的匿名函数中传入的参数</span></span><br><span class="line"> <span class="keyword">var</span> newArgs = bindArgs.concat(tmpArgs)</span><br><span class="line"> <span class="comment">// return self.apply(context, newArgs);</span></span><br><span class="line"> <span class="keyword">return</span> self.apply(<span class="keyword">this</span> <span class="keyword">instanceof</span> fBound ? <span class="keyword">this</span> : context, newArgs);<span class="comment">//满足构造函数需求</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> tmpFun = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{};</span><br><span class="line"> tmpFun.prototype = self.prototype;</span><br><span class="line"> rBound.prototype = <span class="keyword">new</span> tmpFun();<span class="comment">//修改返回的函数的prototype对象</span></span><br><span class="line"> <span class="keyword">return</span> rBound;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="实现new"><a href="#实现new" class="headerlink" title="实现new"></a>实现new</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var person = new Person();</span></span><br><span class="line"><span class="comment">// var person = newFactory(Person,arg1,...);</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">newFactory</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">var</span> obj = {};</span><br><span class="line"><span class="keyword">var</span> <span class="keyword">constructor</span> = Array.prototype.shift.call(arguments);</span><br><span class="line">obj.__proto__ = <span class="keyword">constructor</span>.prototype;</span><br><span class="line">var result = <span class="keyword">constructor</span>.apply(obj, arguments);</span><br><span class="line">return typeof result === 'object' ? result : obj;//构造函数如果自带返回值，需要检查</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="实现Object-create"><a href="#实现Object-create" class="headerlink" title="实现Object.create"></a>实现Object.create</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.create = <span class="function"><span class="keyword">function</span>(<span class="params">prototype</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> _Base = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</span><br><span class="line">_Base.prototype = prototype;</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> Base();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>###实现JS中的自定义事件<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">CustomerEvent</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">var</span> eventMap = {};</span><br><span class="line"><span class="keyword">this</span>.addEvent = <span class="function"><span class="keyword">function</span>(<span class="params">type, handler</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> eventMap[type] === <span class="string">"undefined"</span>){</span><br><span class="line">eventMap[type] = [];</span><br><span class="line">}</span><br><span class="line">eventMap[type].push(handler);</span><br><span class="line">};</span><br><span class="line"><span class="keyword">this</span>.removeEvent = <span class="function"><span class="keyword">function</span>(<span class="params">type, handler</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> eventMap[type] !== <span class="string">"undefined"</span>){</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < eventMap[type].length; i++) {</span><br><span class="line"><span class="keyword">if</span>(eventMap[type][i] === handler){</span><br><span class="line">eventMap[type].splice(i,<span class="number">1</span>);</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">};</span><br><span class="line"><span class="keyword">this</span>.fireEvent = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"><span class="keyword">var</span> type = event.type;</span><br><span class="line"><span class="keyword">if</span>(eventMap&&eventMap[type]){</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < eventMap[type].length; i++) {</span><br><span class="line">eventMap[type][i](event);</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">};</span><br><span class="line">}</span><br><span class="line"><span class="comment">//测试用例</span></span><br><span class="line"><span class="keyword">var</span> custom = <span class="keyword">new</span> CustomEvent();</span><br><span class="line"><span class="keyword">var</span> a = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"A"</span>,event.data.name)</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> b = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"B"</span>,event.data.name)</span><br><span class="line">};</span><br><span class="line">custom.addEvent(<span class="string">"changeColor"</span>,a);</span><br><span class="line">custom.addEvent(<span class="string">"changeColor"</span>,b);</span><br><span class="line"><span class="keyword">var</span> eventObj = {<span class="attr">type</span>:<span class="string">"changeColor"</span>,<span class="attr">data</span>: {<span class="attr">name</span>: <span class="string">"sxf"</span>} }</span><br><span class="line">custom.fireEvent(eventObj);</span><br><span class="line">custom.removeEvent(<span class="string">"changeColor"</span>,b);</span><br></pre></td></tr></table></figure></p><h3 id="实现DOM兼容浏览器的自定义事件"><a href="#实现DOM兼容浏览器的自定义事件" class="headerlink" title="实现DOM兼容浏览器的自定义事件"></a>实现DOM兼容浏览器的自定义事件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> domEvent = {</span><br><span class="line">addEvent:<span class="function"><span class="keyword">function</span>(<span class="params">element,event,handler</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(element.addEventListener){</span><br><span class="line">element.addEventListener(event,handler,<span class="literal">false</span>);</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(element.attachEvent){</span><br><span class="line">element.attachEvent(<span class="string">"on"</span>+event,handler);</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">element[<span class="string">"on"</span>+event] = handler;</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line">removeEvent:<span class="function"><span class="keyword">function</span>(<span class="params">element,event,handler</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(element.removeEventListener){</span><br><span class="line">element.removeEventListener(event,handler,<span class="literal">false</span>);</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(element.detachEvent){</span><br><span class="line">element.detachEvent(<span class="string">"on"</span>+event,handler);</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">element[<span class="string">"on"</span>+event] = <span class="literal">null</span>;</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line">stopPropagation:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(event.stopPropagation){</span><br><span class="line">event.stopPropagation();</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">event.cancelBubble = <span class="literal">true</span>;</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line">preventDefault:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"><span class="keyword">if</span>(event.preventDefault){</span><br><span class="line">event.preventDefault();</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">event.returnValue = <span class="literal">false</span>;</span><br><span class="line">}</span><br><span class="line">},</span><br><span class="line">getElement:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"><span class="keyword">return</span> event.target||event.srcElement;</span><br><span class="line">},</span><br><span class="line">getEvent:<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"><span class="keyword">return</span> event?event:<span class="built_in">window</span>.evnet;</span><br><span class="line">},</span><br><span class="line">getType:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="keyword">return</span> event.type;</span><br><span class="line">}</span><br><span class="line">};</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>关于call、apply、bind、自定义事件、DOM事件绑定….等等原生实现</p>
<h3 id="实现call方法"><a href="#实现call方法" class="headerlink" title="实现call方法"></a>实现call方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//fun.call(thisArg, arg1, arg2, ...)</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.call = <span class="built_in">Function</span>.prototype.call || <span class="function"><span class="keyword">function</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line"> <span class="keyword">var</span> context = context || <span class="built_in">window</span>;</span><br><span class="line"> context.fn = <span class="keyword">this</span>; <span class="comment">// 获取调用call的函数</span></span><br><span class="line"> <span class="keyword">var</span> args = [];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>, len=<span class="built_in">arguments</span>.length ; i&lt;len ; i++)&#123;</span><br><span class="line"> args.push(<span class="built_in">arguments</span>[i]);</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">var</span> result = <span class="built_in">eval</span>(<span class="string">'context.fn('</span> + args +<span class="string">')'</span>);</span><br><span class="line"> <span class="keyword">delete</span> context.fn;</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</summary>
<category term="web前端" scheme="http://blog.sunxinfei.com/categories/web%E5%89%8D%E7%AB%AF/"/>
<category term="web前端" scheme="http://blog.sunxinfei.com/tags/web%E5%89%8D%E7%AB%AF/"/>
<category term="造轮子" scheme="http://blog.sunxinfei.com/tags/%E9%80%A0%E8%BD%AE%E5%AD%90/"/>
</entry>
<entry>
<title>移动H5前端性能优化指南</title>
<link href="http://blog.sunxinfei.com/2018/01/23/%E7%BD%91%E9%A1%B5%E4%BC%98%E5%8C%96/"/>
<id>http://blog.sunxinfei.com/2018/01/23/网页优化/</id>
<published>2018-01-23T03:57:46.000Z</published>
<updated>2018-03-23T08:10:37.916Z</updated>
<content type="html"><![CDATA[<p>15年的为知笔记，有些还很值得参考，来自腾讯ISUX的分享，主要内容涉及加载优化、图片优化、脚本优化、CSS优化、渲染优化<br><a id="more"></a><br><img src="http://op3cmr9ix.bkt.clouddn.com/blog/web-optimizer/h5.png" alt="移动H5前端性能优化指南"><br>概述</p><ol><li>PC优化手段在Mobile同样适用</li><li>在Mobile侧我们提出三秒种渲染完成首屏指标</li><li>基于第二点，首屏加载3秒完成或使用Loading</li><li>基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB</li><li>Mobile侧因手机配置原因，除加载外渲染速度也是优化重点</li><li>基于第五点，要合理处理代码减少渲染损耗</li><li>基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置</li><li>加载完成后用户交互使用时也需注意性能<br>优化指南</li></ol><h3 id="加载优化"><a href="#加载优化" class="headerlink" title="[加载优化]"></a>[加载优化]</h3><p>加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点</p><p>· 减少HTTP请求<br>众所周知 ，在 HTTP/1.1 协议中 「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。一些站点会有多个静态资源 CDN 域名的原因之一。因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个<br>a) 合并CSS、JavaScript<br>b) 合并小图片，使用雪碧图</p><p>· 缓存<br>使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）<br>a) 缓存一切可缓存的资源<br>b) 使用长Cache（使用时间戳更新Cache）<br>c) 使用外联式引用CSS、JavaScript</p><p>· 压缩HTML、CSS、JavaScript<br>减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip<br>a) 压缩（例如，多余的空格、换行符和缩进）<br>b) 启用GZip</p><p>· 无阻塞<br>写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载</p><p>· 使用首屏加载<br>首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化</p><p>· 按需加载<br>将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量<br>PS：按需加载会导致大量重绘，影响渲染性能<br>a) LazyLoad<br>b) 滚屏加载<br>c) 通过Media Query加载</p><p>· 预加载<br>大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失<br>对用户行为分析，可以在当前页加载下一页资源，提升速度<br>a) 可感知Loading(如进入空间游戏的Loading)<br>b) 不可感知的Loading（如提前加载下一页）</p><p>· 压缩图片<br>图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示<br>PS：过度压缩图片大小影响图片显示效果<br>a) 使用智图（ <a href="http://zhitu.tencent.com/" target="_blank" rel="noopener">http://zhitu.tencent.com/</a> ）<br>b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)<br>c) 使用Srcset<br>d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)<br>e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））</p><p>· 减少Cookie<br>Cookie会影响加载速度，所以静态资源域名不使用Cookie</p><p>· 避免重定向<br>重定向会影响加载速度，所以在服务器正确设置避免重定向</p><p>· 异步加载第三方资源<br>第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源</p><h3 id="脚本执行优化"><a href="#脚本执行优化" class="headerlink" title="[脚本执行优化]"></a>[脚本执行优化]</h3><p>脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意</p><p>· CSS写在头部，JavaScript写在尾部或异步</p><p>· 避免图片和iFrame等的空Src<br>空Src会重新加载当前页面，影响速度和效率</p><p>· 尽量避免重设图片大小<br>重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能</p><p>· 图片尽量避免使用DataURL<br>DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长</p><h3 id="CSS优化"><a href="#CSS优化" class="headerlink" title="[CSS优化]"></a>[CSS优化]</h3><p>· 尽量避免写在HTML标签中写Style属性</p><p>· 避免CSS表达式<br>CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式</p><p>· 移除空的CSS规则<br>空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则</p><p>· 正确使用Display的属性<br>Display属性会影响页面的渲染，因此请合理使用<br>a) display:inline后不应该再使用width、height、margin、padding以及float<br>b) display:inline-block后不应该再使用float<br>c) display:block后不应该再使用vertical-align<br>d) display:table-*后不应该再使用margin或者float</p><p>· 不滥用Float<br>Float在渲染时计算量比较大，尽量减少使用</p><p>· 不滥用Web字体<br>Web字体需要下载，解析，重绘当前页面，尽量减少使用</p><p>· 不声明过多的Font-size<br>过多的Font-size引发CSS树的效率</p><p>· 值为0时不需要任何单位<br>为了浏览器的兼容性和性能，值为0时不要带单位</p><p>· 标准化各种浏览器前缀<br>a) 无前缀应放在最后<br>b) CSS动画只用 （-webkit- 无前缀）两种即可<br>c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）</p><p>· 避免让选择符看起来像正则表达式<br>高级选择器执行耗时长且不易读懂，避免使用</p><h3 id="JavaScript执行优化"><a href="#JavaScript执行优化" class="headerlink" title="[JavaScript执行优化]"></a>[JavaScript执行优化]</h3><p>· 减少重绘和回流<br>a) 避免不必要的Dom操作<br>b) 尽量改变Class而不是Style，使用classList代替className<br>c) 避免使用document.write<br>d) 减少drawImage</p><p>· 缓存Dom选择与计算<br>每次Dom选择都要计算，缓存他</p><p>· 缓存列表.length<br>每次.length都要计算，用一个变量保存这个值</p><p>· 尽量使用事件代理，避免批量绑定事件</p><p>· 尽量使用ID选择器<br>ID选择器是最快的</p><p>· TOUCH事件优化<br>使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作</p><h3 id="渲染优化"><a href="#渲染优化" class="headerlink" title="[渲染优化]"></a>[渲染优化]</h3><p>· HTML使用Viewport<br>Viewport可以加速页面的渲染，请使用以下代码</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”viewport”</span> <span class="attr">content</span>=<span class="string">”width</span>=<span class="string">device-width,</span> <span class="attr">initial-scale</span>=<span class="string">1″</span>></span></span><br></pre></td></tr></table></figure><p>· 减少Dom节点<br>Dom节点太多影响页面的渲染，应尽量减少Dom节点</p><p>· 动画优化<br>a) 尽量使用CSS3动画<br>b) 合理使用requestAnimationFrame动画代替setTimeout<br>c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）</p><p>· 高频事件优化<br>Touchmove、Scroll 事件可导致多次渲染<br>a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染<br>b) 增加响应变化的时间间隔，减少重绘次数</p><p>· GPU加速<br>CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用<br>PS：过渡使用会引发手机过耗电增加</p><h3 id="文章中未提到的"><a href="#文章中未提到的" class="headerlink" title="文章中未提到的"></a>文章中未提到的</h3><p>memcache是一套分布式的高速缓存系统，MemCache的工作流程如下：先检查客户端的请求数据是否在memcached中，如有，直接把请求数据返回，不再对数据库进行任何操作；如果请求的数据不在memcached中，就去查数据库，把从数据库中获取的数据返回给客户端，同时把数据缓存一份到memcached中（memcached客户端不负责，需要程序明确实现）；每次更新数据库的同时更新memcached中的数据，保证一致性；当分配给memcached内存空间用完之后，会使用LRU（Least Recently Used，最近最少使用）策略加上到期失效策略，失效数据首先被替换，然后再替换掉最近未使用的数据。</p>]]></content>
<summary type="html">
<p>15年的为知笔记，有些还很值得参考，来自腾讯ISUX的分享，主要内容涉及加载优化、图片优化、脚本优化、CSS优化、渲染优化<br>
</summary>
<category term="web前端" scheme="http://blog.sunxinfei.com/categories/web%E5%89%8D%E7%AB%AF/"/>
<category term="web前端" scheme="http://blog.sunxinfei.com/tags/web%E5%89%8D%E7%AB%AF/"/>
<category term="优化" scheme="http://blog.sunxinfei.com/tags/%E4%BC%98%E5%8C%96/"/>
</entry>
<entry>
<title>GroupBy与SUM与DISTINCT</title>
<link href="http://blog.sunxinfei.com/2018/01/16/GroupBy%E4%B8%8ESUM%E4%B8%8EDISTINCT/"/>
<id>http://blog.sunxinfei.com/2018/01/16/GroupBy与SUM与DISTINCT/</id>
<published>2018-01-16T05:02:59.000Z</published>
<updated>2018-03-23T08:10:37.827Z</updated>
<content type="html"><![CDATA[<p>我们有时候会遇到一种sql查询，里面有groupBy，但是SUM求和的时候还有DISTINCT，这种情况比较特殊，会求出一些值不是我们想要的。这种情况数据一般在连一些表之后会出现，这个例子很简单，只说明sql，不代表实际遇到的情况。<br><a id="more"></a><br>+—-+——+——+<br>| id | name | time |<br>+—-+——+——+<br>| 1 | A | 1 |<br>| 2 | B | 3 |<br>| 3 | A | 4 |<br>| 4 | B | 3 |<br>+—-+——+——+</p><p>我们运行下面sql</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span></span><br><span class="line">test1.NAME,</span><br><span class="line"><span class="keyword">SUM</span>(<span class="keyword">DISTINCT</span> test1.time) <span class="keyword">AS</span> SumTime</span><br><span class="line"><span class="keyword">FROM</span></span><br><span class="line">test1</span><br><span class="line"><span class="keyword">GROUP</span> <span class="keyword">BY</span></span><br><span class="line">test1.NAME;</span><br><span class="line">+<span class="comment">------+---------+</span></span><br><span class="line">| NAME | SumTime |</span><br><span class="line">+<span class="comment">------+---------+</span></span><br><span class="line">| A | 5 |</span><br><span class="line">| B | 3 |</span><br><span class="line">+<span class="comment">------+---------+</span></span><br></pre></td></tr></table></figure><p>这里我们注意到SumTime的值,其中A的值没有问题，但是B所计算的值由于DISTINCT，所以产生去重效果，让B计算出3，所以我们要人为的进行拼接一些值，让他们产生不同。</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span></span><br><span class="line">test1.NAME,</span><br><span class="line"><span class="keyword">SUM</span>(</span><br><span class="line"><span class="keyword">DISTINCT</span> (</span><br><span class="line"><span class="keyword">CAST</span>( test1.time <span class="keyword">AS</span> <span class="built_in">DECIMAL</span> (<span class="number">20</span>, <span class="number">10</span>) ) </span><br><span class="line">+ <span class="keyword">CAST</span>( </span><br><span class="line"><span class="keyword">CONCAT</span>(<span class="string">'0.00000'</span>, <span class="keyword">CAST</span>(test1.id <span class="keyword">AS</span> <span class="built_in">CHAR</span>(<span class="number">50</span>))) </span><br><span class="line"><span class="keyword">AS</span> <span class="built_in">DECIMAL</span> (<span class="number">20</span>, <span class="number">10</span>) )</span><br><span class="line">)</span><br><span class="line">) <span class="keyword">AS</span> SumTime</span><br><span class="line"><span class="keyword">FROM</span></span><br><span class="line">test1</span><br><span class="line"><span class="keyword">GROUP</span> <span class="keyword">BY</span></span><br><span class="line">test1. <span class="keyword">NAME</span>;</span><br><span class="line">+<span class="comment">------+--------------+</span></span><br><span class="line">| NAME | SumTime |</span><br><span class="line">+<span class="comment">------+--------------+</span></span><br><span class="line">| A | 5.0000040000 |</span><br><span class="line">| B | 6.0000060000 |</span><br><span class="line">+<span class="comment">------+--------------+</span></span><br></pre></td></tr></table></figure><p>这里我们用每个数据的ID加上要求和的字段，让它尽可能的小，不影响我们数值的计算结果，这样我们就能得到我们想要的计算的数值和。这里多说一句就是DECIMAL常常用于银行报账等要求小数精度很高的地方，因为其他的浮点数类型容易产生和JS很像的浮点数异常的情况。</p>]]></content>
<summary type="html">
<p>我们有时候会遇到一种sql查询，里面有groupBy，但是SUM求和的时候还有DISTINCT，这种情况比较特殊，会求出一些值不是我们想要的。这种情况数据一般在连一些表之后会出现，这个例子很简单，只说明sql，不代表实际遇到的情况。<br>
</summary>
<category term="MySQL" scheme="http://blog.sunxinfei.com/categories/MySQL/"/>
<category term="MySQL" scheme="http://blog.sunxinfei.com/tags/MySQL/"/>
<category term="SQL语句" scheme="http://blog.sunxinfei.com/tags/SQL%E8%AF%AD%E5%8F%A5/"/>
</entry>
<entry>
<title>监听黄金价格变化的任务计划程序</title>
<link href="http://blog.sunxinfei.com/2017/10/19/%E7%9B%91%E5%90%AC%E9%BB%84%E9%87%91%E4%BB%B7%E6%A0%BC%E5%8F%98%E5%8C%96%E7%9A%84%E4%BB%BB%E5%8A%A1%E8%AE%A1%E5%88%92%E7%A8%8B%E5%BA%8F/"/>
<id>http://blog.sunxinfei.com/2017/10/19/监听黄金价格变化的任务计划程序/</id>
<published>2017-10-19T02:10:55.000Z</published>
<updated>2018-03-23T08:10:37.908Z</updated>
<content type="html"><![CDATA[<p>这个任务计划程序是7月中旬写的，现在想起来了就分享下思路和一些代码，讲述下从需求到最后实现的整个过程，实现起来还是比较简单的，遇到几个难点地方也很快摸索通过了，大概花了一个晚上就出来了。当时买了写京东金融的黄金，但是很明显有个问题，我要实时关注黄金的价格，特别影响我的精力，所以我就想能不能有个服务器程序帮我监听价格变化。<br><a id="more"></a><br>大致思路就是首先我们需要一个后台程序能够完成24小时的监听，这里我们使用服务器的任务计划程序，将所需要运行的脚本或者程序添加到任务计程序中即可。然后另一边我们需要一个接口，能够很方便的获得产品的价格变化，我这里当时买的是京东金融APP上的黄金，它的价格和实际API市场所获得的黄金价格还是有些区别，所以如何获得京东金融APP中的黄金价格，这个画个重点，如果获得不了，那我们就退而求其次，选择去API市场买一般的黄金API。</p><p>###捕捉京东金融APP中的黄金价格<br>京东金融APP能显示实时黄金价格，也是靠服务器定时给的接口数据，所以我们需要找到这个接口，如果没有任何验证之类拦截，我们就能顺利无限制的请求到京东金融APP中的黄金价格，这里我们使用Fiddler这个工具，将手机配置WLAN的静态IP，使电脑和手机在同一个共享网络下，如何配置Fiddler监听手机请求（还包括如何配置Fiddler捕捉Https请求），这里可以去网上找一些教程或者我单独写一篇文章来写。我们配置好Fiddler之后，我们用手机打开京东金融APP，我们就会看到很多请求，其中有一条值得我们注意，===> <a href="https://ms.jr.jd.com/gw/generic/hj/h5/m/currentGoldPrice" target="_blank" rel="noopener">https://ms.jr.jd.com/gw/generic/hj/h5/m/currentGoldPrice</a> ,我们可以看到这个请求没有任何验证，里面的返回值正是我们想要的黄金价格的JSON。</p><p>###发送短信功能<br>刚才我们顺利地获得了黄金价格，那么我还缺少一个轮子，就是关于短信的发送提醒功能，这个在阿里云的市场里面可以买到，几分钱几条，可以满足我们的需求，官方文档说的很清楚，这里只稍微说一下，代码放置在Github中，需要两个比较重要的Dll，aliyun-net-sdk-core.dll和aliyun-net-sdk-core.dll，在API购买的地方会给你身份验证的accessKeyId和accessKeySecret，还需要设置短信模板，短信签名，并且进行审核。</p><figure class="highlight vbnet"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">Public</span> <span class="keyword">Shared</span> <span class="keyword">Sub</span> SendMessage(<span class="keyword">ByVal</span> phoneNumber <span class="keyword">As</span> <span class="built_in">String</span>, <span class="keyword">ByVal</span> price <span class="keyword">As</span> <span class="built_in">String</span>, <span class="keyword">ByVal</span> change <span class="keyword">As</span> <span class="built_in">String</span>)</span><br><span class="line"><span class="keyword">Dim</span> product = <span class="string">"Dysmsapi"</span></span><br><span class="line"> <span class="keyword">Dim</span> domain = <span class="string">"dysmsapi.aliyuncs.com"</span></span><br><span class="line"> <span class="keyword">Dim</span> accessKeyId = <span class="string">"accessKeyIdXXXX"</span></span><br><span class="line"> <span class="keyword">Dim</span> accessKeySecret = <span class="string">"accessKeySecretXXXXX"</span></span><br><span class="line"> <span class="keyword">Dim</span> profile <span class="keyword">As</span> IClientProfile = DefaultProfile.GetProfile(<span class="string">"cn-hangzhou"</span>, accessKeyId, accessKeySecret)</span><br><span class="line"> DefaultProfile.AddEndpoint(<span class="string">"cn-hangzhou"</span>, <span class="string">"cn-hangzhou"</span>, product, domain)</span><br><span class="line"> <span class="keyword">Dim</span> acsClient <span class="keyword">As</span> IAcsClient = <span class="keyword">New</span> DefaultAcsClient(profile)</span><br><span class="line"> <span class="keyword">Dim</span> request <span class="keyword">As</span> SendSmsRequest = <span class="keyword">New</span> SendSmsRequest()</span><br><span class="line"> <span class="keyword">Try</span></span><br><span class="line"> request.PhoneNumbers = phoneNumber</span><br><span class="line"> request.SignName = <span class="string">"SignNameXXX"</span></span><br><span class="line"> request.TemplateCode = <span class="string">"TemplateCodeXXX"</span></span><br><span class="line"> request.TemplateParam = <span class="string">"{"</span><span class="string">"name"</span><span class="string">":"</span><span class="string">""</span> & change & <span class="string">""</span><span class="string">","</span><span class="string">"time"</span><span class="string">":"</span><span class="string">""</span> & price & <span class="string">""</span><span class="string">"}"</span></span><br><span class="line"> request.OutId = <span class="string">"21212121211"</span></span><br><span class="line"> <span class="keyword">Dim</span> SendSmsResponse <span class="keyword">As</span> SendSmsResponse = acsClient.GetAcsResponse(request)</span><br><span class="line"> System.Console.WriteLine(SendSmsResponse.Message)</span><br><span class="line"> <span class="keyword">Catch</span> myException <span class="keyword">As</span> ServerException</span><br><span class="line"> System.Console.WriteLine(<span class="string">"Hello World!"</span>)</span><br><span class="line"> <span class="keyword">Catch</span> myException <span class="keyword">As</span> ClientException</span><br><span class="line"> System.Console.WriteLine(<span class="string">"Hello World!"</span>)</span><br><span class="line"> <span class="keyword">End</span> <span class="keyword">Try</span></span><br><span class="line"><span class="keyword">End</span> <span class="keyword">Sub</span></span><br></pre></td></tr></table></figure><p>###功能和拓展<br>到此为止我们有了黄金价格和发送短信，那么我们可以将价格存放到数据库或者本地的一个文档中，我们根据当前价格和历史价格的比较来提醒价格的涨跌。<br>其实这个功能还能写得更完善更好一些，比如：</p><ol><li>加入预期值，用户设置好预期的购买/售卖价格来短信提醒用户；</li><li>现在AI算法特别火，可以建立相应的模型，通过历史价格和当前的美联储/朝鲜/中东的一些新闻等重要影响黄金价格的因素来预期一些未来的黄金价格走势和今年的黄金价格最高&最低点，都是可以的。</li></ol>]]></content>
<summary type="html">
<p>这个任务计划程序是7月中旬写的，现在想起来了就分享下思路和一些代码，讲述下从需求到最后实现的整个过程，实现起来还是比较简单的，遇到几个难点地方也很快摸索通过了，大概花了一个晚上就出来了。当时买了写京东金融的黄金，但是很明显有个问题，我要实时关注黄金的价格，特别影响我的精力，所以我就想能不能有个服务器程序帮我监听价格变化。<br>
</summary>
<category term="程序开发" scheme="http://blog.sunxinfei.com/categories/%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/"/>
<category term="工具" scheme="http://blog.sunxinfei.com/tags/%E5%B7%A5%E5%85%B7/"/>
<category term="Fiddler" scheme="http://blog.sunxinfei.com/tags/Fiddler/"/>
<category term="任务计划程序" scheme="http://blog.sunxinfei.com/tags/%E4%BB%BB%E5%8A%A1%E8%AE%A1%E5%88%92%E7%A8%8B%E5%BA%8F/"/>
</entry>
<entry>
<title>使用Fiddler修改调试生产服务器的前端代码</title>
<link href="http://blog.sunxinfei.com/2017/07/28/Fiddler/"/>
<id>http://blog.sunxinfei.com/2017/07/28/Fiddler/</id>
<published>2017-07-28T05:51:28.000Z</published>
<updated>2018-03-23T08:10:37.823Z</updated>
<content type="html"><![CDATA[<p>有时候工作中会遇到这种情况:<1>修改了前台代码（Css/JS/HTML）想在生产服务器看下效果，但是又不能升级服务器，这时候就可以用Fiddler工具，将本地修改过的前端代码运行，提前查看升级后的效果。<2>本地没有想要的数据或者本地数据库不能使用，但是服务器上代码又不是想要的。<3>手机端代码遇到上述两种情况也同样适用。<br><a id="more"></a></3></2></1></p>]]></content>
<summary type="html">
<p>有时候工作中会遇到这种情况:<1>修改了前台代码（Css/JS/HTML）想在生产服务器看下效果，但是又不能升级服务器，这时候就可以用Fiddler工具，将本地修改过的前端代码运行，提前查看升级后的效果。<2>本地没有想要的数据或者本地数据库不能使用，但是服务器上代码又不是想要的。<3>手机端代码遇到上述两种情况也同样适用。<br>
</summary>
<category term="工具" scheme="http://blog.sunxinfei.com/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="工具" scheme="http://blog.sunxinfei.com/tags/%E5%B7%A5%E5%85%B7/"/>
<category term="Fiddler" scheme="http://blog.sunxinfei.com/tags/Fiddler/"/>
</entry>
<entry>
<title>MySQL获取组内排序的排名(Seq)</title>
<link href="http://blog.sunxinfei.com/2017/07/02/Mysql-get-sequence-in-group/"/>
<id>http://blog.sunxinfei.com/2017/07/02/Mysql-get-sequence-in-group/</id>
<published>2017-07-02T07:55:43.000Z</published>
<updated>2018-03-23T08:10:37.853Z</updated>
<content type="html"><![CDATA[<p>平时我们在后台查询中可能有这种需求：有N个组，需要各个组内的工资排名。有男女两种性别，需要男女性别之内的票数排名。总结下就是我们需要SQL查询出各个组内的排名Sequence/RowNum。<br><a id="more"></a><br>数据呢随便造了几个，主要是性别字段和票数字段，id代表每个人，当然了性别和票数你可以换成组别和工资。</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">drop</span> <span class="keyword">table</span> <span class="keyword">if</span> <span class="keyword">exists</span> <span class="keyword">test</span>; </span><br><span class="line"><span class="keyword">create</span> <span class="keyword">table</span> <span class="keyword">test</span> (<span class="keyword">id</span> <span class="built_in">int</span>, ticket <span class="built_in">int</span>,sex <span class="built_in">int</span> ); </span><br><span class="line"></span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">1</span>, <span class="number">18</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">4</span>, <span class="number">5</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">5</span>, <span class="number">7</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">6</span>, <span class="number">2</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">7</span>, <span class="number">3</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">8</span>, <span class="number">2</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">9</span>, <span class="number">4</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">10</span>, <span class="number">5</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">11</span>, <span class="number">6</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">12</span>, <span class="number">8</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">13</span>, <span class="number">11</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">14</span>, <span class="number">13</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">15</span>, <span class="number">13</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">16</span>, <span class="number">5</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">17</span>, <span class="number">7</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">18</span>, <span class="number">8</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">19</span>, <span class="number">12</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">20</span>, <span class="number">13</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">21</span>, <span class="number">14</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">22</span>, <span class="number">15</span>, <span class="number">0</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">23</span>, <span class="number">16</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`test`</span> <span class="keyword">VALUES</span> (<span class="number">24</span>, <span class="number">17</span>, <span class="number">2</span>);</span><br></pre></td></tr></table></figure><p>首先我们查询出想要的数据，即每个性别下，按照票数从大到小排序：</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> *</span><br><span class="line"><span class="keyword">FROM</span> <span class="keyword">test</span> </span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> </span><br><span class="line">test.sex,</span><br><span class="line">test.ticket <span class="keyword">DESC</span>,</span><br><span class="line">test.id;</span><br></pre></td></tr></table></figure><p>然后呢，我们将刚才的SQL查询的结果再进行查询，获得排名rank或者rowNum，这里说下主要注意地方，BBB是别名，主要是用来设置初始化的两个变量值@sex和@rank，还有一点是rank的值（第四行）和下面@sex变量的设置（第五行），这两句话的先后位置很重要，如果顺序换了就不起作用了，意思就是先if判断，再变量赋值。</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">SELECT</span> AAA.id,</span><br><span class="line">AAA.ticket,</span><br><span class="line">AAA.sex,</span><br><span class="line"><span class="keyword">if</span>(@sex = AAA.sex, @<span class="keyword">rank</span>:=@<span class="keyword">rank</span>+<span class="number">1</span>,@<span class="keyword">rank</span>:=<span class="number">1</span>) <span class="keyword">as</span> <span class="keyword">rank</span>,</span><br><span class="line">@sex:=AAA.sex</span><br><span class="line"><span class="keyword">FROM</span></span><br><span class="line">(<span class="keyword">SELECT</span> *</span><br><span class="line"><span class="keyword">FROM</span> <span class="keyword">test</span> </span><br><span class="line"><span class="keyword">ORDER</span> <span class="keyword">BY</span> </span><br><span class="line">test.sex,</span><br><span class="line">test.ticket <span class="keyword">DESC</span>,</span><br><span class="line">test.id) <span class="keyword">AS</span> AAA ,(<span class="keyword">Select</span> @sex:=<span class="literal">null</span>,@<span class="keyword">rank</span>:=<span class="number">0</span> ) <span class="keyword">AS</span> BBB</span><br></pre></td></tr></table></figure><p>结果集如下，我们就能获得分组内的排名rank：</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">+<span class="comment">------+--------+------+------+---------------+</span></span><br><span class="line">| id | ticket | sex | rank | @sex:=AAA.sex |</span><br><span class="line">+<span class="comment">------+--------+------+------+---------------+</span></span><br><span class="line">| 1 | 18 | 0 | 1 | 0 |</span><br><span class="line">| 22 | 15 | 0 | 2 | 0 |</span><br><span class="line">| 19 | 12 | 0 | 3 | 0 |</span><br><span class="line">| 13 | 11 | 0 | 4 | 0 |</span><br><span class="line">| 4 | 5 | 0 | 5 | 0 |</span><br><span class="line">| 10 | 5 | 0 | 6 | 0 |</span><br><span class="line">| 16 | 5 | 0 | 7 | 0 |</span><br><span class="line">| 7 | 3 | 0 | 8 | 0 |</span><br><span class="line">| 23 | 16 | 1 | 1 | 1 |</span><br><span class="line">| 14 | 13 | 1 | 2 | 1 |</span><br><span class="line">| 20 | 13 | 1 | 3 | 1 |</span><br><span class="line">| 5 | 7 | 1 | 4 | 1 |</span><br><span class="line">| 17 | 7 | 1 | 5 | 1 |</span><br><span class="line">| 11 | 6 | 1 | 6 | 1 |</span><br><span class="line">| 8 | 2 | 1 | 7 | 1 |</span><br><span class="line">| 2 | 1 | 1 | 8 | 1 |</span><br><span class="line">| 24 | 17 | 2 | 1 | 2 |</span><br><span class="line">| 21 | 14 | 2 | 2 | 2 |</span><br><span class="line">| 15 | 13 | 2 | 3 | 2 |</span><br><span class="line">| 12 | 8 | 2 | 4 | 2 |</span><br><span class="line">| 18 | 8 | 2 | 5 | 2 |</span><br><span class="line">| 9 | 4 | 2 | 6 | 2 |</span><br><span class="line">| 6 | 2 | 2 | 7 | 2 |</span><br><span class="line">+<span class="comment">------+--------+------+------+---------------+</span></span><br><span class="line">23 rows in <span class="keyword">set</span> (<span class="number">0.00</span> sec)</span><br></pre></td></tr></table></figure><p>在这个基础上，在外层再嵌套一层，比如select…where id=4，就可以查询出id为4的这个人，所属的组内排名。</p>]]></content>
<summary type="html">
<p>平时我们在后台查询中可能有这种需求：有N个组，需要各个组内的工资排名。有男女两种性别，需要男女性别之内的票数排名。总结下就是我们需要SQL查询出各个组内的排名Sequence/RowNum。<br>
</summary>
<category term="MySQL" scheme="http://blog.sunxinfei.com/categories/MySQL/"/>
<category term="MySQL" scheme="http://blog.sunxinfei.com/tags/MySQL/"/>
<category term="SQL语句" scheme="http://blog.sunxinfei.com/tags/SQL%E8%AF%AD%E5%8F%A5/"/>
</entry>
<entry>
<title>VS中Ctrl+Shift+F全局搜索的快捷键失效</title>
<link href="http://blog.sunxinfei.com/2017/06/28/Win10-Ctrl-Shift-F/"/>
<id>http://blog.sunxinfei.com/2017/06/28/Win10-Ctrl-Shift-F/</id>
<published>2017-06-28T02:09:20.000Z</published>
<updated>2018-03-23T08:10:37.865Z</updated>
<content type="html"><![CDATA[<p>Win10有个问题，对于使用VS或者其他开发工具的开发者来说，以VS为例，Ctrl+Shift+F的全局搜索的快捷键居然失效了，原因非常有意思，Win10自带的微软输入法的缘故，在微软拼音输入法中Ctrl+Shift+F是用来切换繁/简体中文的，这么常用的快捷键居然冲突，真是尴尬。解决方案是安装一个其他的输入法，或者是记得切换到英语（美国）英式键盘的输入法进行快捷键搜索。一般VS这种编辑器出现快捷键不能使用，90%是因为快捷键冲突。</p>]]></content>
<summary type="html">
<p>Win10有个问题，对于使用VS或者其他开发工具的开发者来说，以VS为例，Ctrl+Shift+F的全局搜索的快捷键居然失效了，原因非常有意思，Win10自带的微软输入法的缘故，在微软拼音输入法中Ctrl+Shift+F是用来切换繁/简体中文的，这么常用的快捷键居然冲突，真
</summary>
<category term="解决问题" scheme="http://blog.sunxinfei.com/categories/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/"/>
<category term="WIN10" scheme="http://blog.sunxinfei.com/tags/WIN10/"/>
</entry>
<entry>
<title>Visual Studio（VS2013）的F12跳转到元数据，不跳转定义</title>
<link href="http://blog.sunxinfei.com/2017/06/28/VS2013-config-error/"/>
<id>http://blog.sunxinfei.com/2017/06/28/VS2013-config-error/</id>
<published>2017-06-28T01:58:51.000Z</published>
<updated>2018-03-23T08:10:37.861Z</updated>
<content type="html"><![CDATA[<p>最近配置了个新的项目IIS项目，发现使用VS的F12无法转到指定的方法，而是转到一个元数据文件的页面，找了好多方法也没有解决掉，最后终于搞定。<br>原因是：项目中引用不对，只需要把原先的跳转不正确的引用删掉，右击-添加引用-项目-把需要引用的东西添加，重新生成解决方案一切就OK了。属于比较恶心人的小问题。</p>]]></content>
<summary type="html">
<p>最近配置了个新的项目IIS项目，发现使用VS的F12无法转到指定的方法，而是转到一个元数据文件的页面，找了好多方法也没有解决掉，最后终于搞定。<br>原因是：项目中引用不对，只需要把原先的跳转不正确的引用删掉，右击-添加引用-项目-把需要引用的东西添加，重新生成解决方案一切
</summary>
<category term="解决问题" scheme="http://blog.sunxinfei.com/categories/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/"/>
<category term="VS2013" scheme="http://blog.sunxinfei.com/tags/VS2013/"/>
<category term="Visual Studio" scheme="http://blog.sunxinfei.com/tags/Visual-Studio/"/>
</entry>
<entry>
<title>chrome地址栏百度搜索跳转百度首页</title>
<link href="http://blog.sunxinfei.com/2017/06/13/chrome-Tab-Search/"/>
<id>http://blog.sunxinfei.com/2017/06/13/chrome-Tab-Search/</id>
<published>2017-06-13T15:39:28.000Z</published>
<updated>2018-03-23T08:10:37.869Z</updated>
<content type="html"><![CDATA[<p>众所周知，chrome浏览器中的地址栏是可以直接进行第三方搜索的，比如百度、谷歌、京东、知乎、天猫等等，只要输入对应地址，比如baidu.com或者zhihu.com，按下Tab键，就可以看到<strong>使用百度搜索</strong>或<strong>使用知乎搜索</strong>的字样，但是有时候会感觉有些抽风，好好的百度搜索，输入关键词搜索，却直接跳转到百度首页。<br><a id="more"></a><br>这个问题主要是因为默认的搜索地址被改了，这个地址是在chrome浏览器中的<strong>设置（setting）</strong>-><strong>搜索</strong> -><strong>管理搜索引擎…</strong> ，在这个页面，可以看到各种各样的地址，以及可触发的关键字，比如直接输入baidu，按下tab键就可以触发百度搜索，但是如果搜索有问题是因为后面的网址被改了，我们需要修改成<strong><a href="https://www.baidu.com/s?wd=%s" target="_blank" rel="noopener">https://www.baidu.com/s?wd=%s</a></strong> ，保存之后，百度搜索就又可以直接使用了。</p>]]></content>
<summary type="html">
<p>众所周知，chrome浏览器中的地址栏是可以直接进行第三方搜索的，比如百度、谷歌、京东、知乎、天猫等等，只要输入对应地址，比如baidu.com或者zhihu.com，按下Tab键，就可以看到<strong>使用百度搜索</strong>或<strong>使用知乎搜索</strong>的字样，但是有时候会感觉有些抽风，好好的百度搜索，输入关键词搜索，却直接跳转到百度首页。<br>
</summary>
<category term="解决问题" scheme="http://blog.sunxinfei.com/categories/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/"/>
<category term="Chrome" scheme="http://blog.sunxinfei.com/tags/Chrome/"/>
</entry>
<entry>
<title>SQL优化小探</title>
<link href="http://blog.sunxinfei.com/2017/05/31/sql-optimize/"/>
<id>http://blog.sunxinfei.com/2017/05/31/sql-optimize/</id>
<published>2017-05-31T01:48:08.000Z</published>
<updated>2018-03-23T08:10:37.885Z</updated>
<content type="html"><![CDATA[<p>由于不是专业搞SQL优化的，可能会显得班门弄斧，请谅解。正在写AngualrJS的我，最近接到一个Task任务，是关于SQL优化的，这个SQL直接拿过来，有500多行，涉及十几个表，其中有五个表的数据最大，测试库的单表大概有几十万以上的数据，这个客户的数据库有400G以上。整个页面运行速度也很感人，优化之前用难听的话叫做垃圾SQL。纯SQL运行时间大概需要90s，经过几天的查资料和实验等等一番优化之后，所有SQL运行下来，控制在2秒左右。<br><a id="more"></a><br>Customers Table 177930 data. Stops Table 246710 data. Routes Table 20906 data. Users Tabale 14w data. 还有一个invoice订单表就更大了，由于那个表不是关键因素，所以就不谈了。<br>具体SQL由于业务耦合度很高，并且将近500多行，容易看得人一头雾水，就不贴出来了，主要说下分析思路。拿到一个相对复杂的SQL，经验不足的特别容易慌张，感觉无从下手，应该怎么处理，尤其是对SQL并不是很了解的新人或前端(lll￢ω￢)：</p><h3 id="explain-SQL"><a href="#explain-SQL" class="headerlink" title="explain SQL"></a>explain SQL</h3><p>使用方法很简单，只要在select语句之前加上explain就可以，主要显示表读取顺序，索引等系列的信息，对我们优化sql，很有帮助，主要显示的字段有:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">id</span><br><span class="line">select_type</span><br><span class="line">table</span><br><span class="line">type 这一列很重要，我单独拿出来说一下，表示表的链接方式，从好到差依次是1.system、2.const、3. eq_reg、4. ref、5. range、6.index、7. all(全表扫描)</span><br><span class="line">possible_keys</span><br><span class="line">key</span><br><span class="line">key_len</span><br><span class="line">ref</span><br><span class="line">rows Mysql会扫描多少行</span><br><span class="line">extra 查询的详细信息</span><br></pre></td></tr></table></figure><p>其中我要优化的SQL解析中，如图<img src="http://op3cmr9ix.bkt.clouddn.com/blog/sql-optimize/explain-sql.png" alt="explain-sql">就出现了type=All的两条数据, 先给这些All的表创建索引。</p><h3 id="给临时表创建索引"><a href="#给临时表创建索引" class="headerlink" title="给临时表创建索引"></a>给临时表创建索引</h3><p>索引就像一本书的目录，创建索引的标准为 where字句， order by字句， group by字句， inner join 字句出现的字段。</p><h3 id="对大量的链接表进行拆分，并避免Left-Join"><a href="#对大量的链接表进行拆分，并避免Left-Join" class="headerlink" title="对大量的链接表进行拆分，并避免Left Join"></a>对大量的链接表进行拆分，并避免Left Join</h3><p>根据业务上的需求，就是需要查询哪些字段，如果可以拆分的，单独拆分出来，这里我将最后的主查询那里(涉及到Routes、Stops、Customers、Users)，拆分出来了两个大表（Users和Customers），将这两个大表查询的结果汇集成一个临时表，再添加到主查询中，依据是：单独拆出来，作为临时表，不影响之前的主查询逻辑。Left Join是效率非常差的，所以从业务上分析，如果需要才会使用的一个字段。</p><h3 id="排除网络传输的干扰"><a href="#排除网络传输的干扰" class="headerlink" title="排除网络传输的干扰"></a>排除网络传输的干扰</h3><p>我在实际的优化过程中，使用的本地连接的测试服务器，有几次按照SQL语句分析是优化成功的，但是本地却跑出来的时间比优化之前更慢，结果我看了下mysql的运行结果发现，原来是传输的时间，当前网络环境不稳定导致的，干扰了我们优化，所以建议使用本地数据库，或者将优化的SQL在测试服务器上运行查看时间。</p><h3 id="使用DataWareHouse"><a href="#使用DataWareHouse" class="headerlink" title="使用DataWareHouse"></a>使用DataWareHouse</h3><p>这个已经不属于个人的优化范围了，属于工作环境的范畴。简单来说DataWareHouse，大家都知道Mysql是关系数据库管理系统。DataWareHouse主要是分析数据，主要进行数据查询，从DataBase中提取数据，所以不是DataBase的拷贝，会有定时的任务进行数据刷新，由于没有深入研究，具体可以去网上查找资料，这里再提一句就是DataWareHouse的聚合函数执行特别快。</p><h3 id="使用ReportHistory"><a href="#使用ReportHistory" class="headerlink" title="使用ReportHistory"></a>使用ReportHistory</h3><p>我们会有重复的SQL查询，尤其数据量大时占用数据库非常明显，然后说下ReportHistory，这是一个封装的方法，方法的参数是SQL的内容、过期时间。思路就是，我们创建临时表，将该SQL查询数据存放到物理临时表中，我们将SQL文本进行MD5编码之后，放置到一个表中（该表的结构是SQLMD5编码、SQL方法体、SQL结果物理临时表表名、过期时间）。如果我们找到MD5之后相同的，那么我们就直接拿到SQL的临时表表名，然后去读取数据库存放的临时表的结果即可。这个ReportHistory方法还可以结合刚才提到的DataWareHouse一起使用，也就是说开发者使用时，自己控制好想要的过期时间和是否使用DataWareHouse，然后SQL传入调用即可，</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><blockquote><p><1>创建索引的标准为 where字句 order by字句 group by字句 inner join 字句等 主，与where字句中的使用顺序无关</1></p><p><2>Inner join替代子查询</2></p><p><3>Insert 语句中Group By之后，要加上order by null，因为默认会排序</3></p><p><4>INSERT 语句一定不要加order by 字段XXX</4></p><p><5>如果确定关联不会产生重复值，不要使用GROUP BY去重</5></p><p><6>尽量不使用NOT IN和<>操作和LIKE</6></p><p><7>INNER JOIN + UPDATE 不一定比LEFT JOIN 快 ，这个是我在实际测试出来的结果，因为最后的Update又消耗了时间，原因可能是INNER Join和LEFT JOIN最后的结果集数量上是一样的。</7></p><p><8>子查询不一定比创建临时表速度慢，<7><8>两种情况在网上优化教程中经常提起，但是我在试验中发现并非如此，所以我加上了“不一定”，这两条需要实际数据去测试执行时间。</8></7></8></p><p><9>没用的字段不出现在SELECT后</9></p><p><10>能卡掉大数据行的操作放到前面， Where子句中条件的顺序对性能没有影响</10></p><p><11>Explain查看是否使用了索引，尤其是Type属性：是索引扫描还是全表扫描…，检查是否使用了合适的索引<br>不是特别专业的DBA，学习了一番，略显班门弄斧，敬请见谅。</11></p></blockquote><p>关于第七点我单独解释下，免得一些人可能会不清楚什么意思：<br>比如我们有一个A表</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">drop</span> <span class="keyword">table</span> <span class="keyword">if</span> <span class="keyword">exists</span> aTable; </span><br><span class="line"><span class="keyword">create</span> <span class="keyword">table</span> aTable (aid <span class="built_in">varchar</span>(<span class="number">10</span>), aname <span class="built_in">varchar</span>(<span class="number">10</span>) ); </span><br><span class="line"></span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`aTable`</span> <span class="keyword">VALUES</span> (<span class="string">'A'</span>, <span class="string">'赵'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`aTable`</span> <span class="keyword">VALUES</span> (<span class="string">'B'</span>, <span class="string">'钱'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`aTable`</span> <span class="keyword">VALUES</span> (<span class="string">'C'</span>, <span class="string">'孙'</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`aTable`</span> <span class="keyword">VALUES</span> (<span class="string">'D'</span>, <span class="string">'李'</span>);</span><br><span class="line">+<span class="comment">-----+-------+</span></span><br><span class="line">| aid | aname |</span><br><span class="line">+<span class="comment">-----+-------+</span></span><br><span class="line">| A | 赵 |</span><br><span class="line">| B | 钱 |</span><br><span class="line">| C | 孙 |</span><br><span class="line">| D | 李 |</span><br><span class="line">+<span class="comment">-----+-------+</span></span><br></pre></td></tr></table></figure><p>还有一个B表</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">drop</span> <span class="keyword">table</span> <span class="keyword">if</span> <span class="keyword">exists</span> bTable; </span><br><span class="line"><span class="keyword">create</span> <span class="keyword">table</span> bTable (bid <span class="built_in">varchar</span>(<span class="number">10</span>), bscore <span class="built_in">int</span> ); </span><br><span class="line"></span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`bTable`</span> <span class="keyword">VALUES</span> (<span class="string">'A'</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`bTable`</span> <span class="keyword">VALUES</span> (<span class="string">'B'</span>, <span class="number">15</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`bTable`</span> <span class="keyword">VALUES</span> (<span class="string">'D'</span>, <span class="number">12</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> <span class="string">`bTable`</span> <span class="keyword">VALUES</span> (<span class="string">'E'</span>, <span class="number">11</span>);</span><br><span class="line">+<span class="comment">-----+--------+</span></span><br><span class="line">| bid | bscore |</span><br><span class="line">+<span class="comment">-----+--------+</span></span><br><span class="line">| A | 18 |</span><br><span class="line">| B | 15 |</span><br><span class="line">| D | 12 |</span><br><span class="line">| E | 11 |</span><br><span class="line">+<span class="comment">-----+--------+</span></span><br></pre></td></tr></table></figure><p>我们一般left Join的话就是：</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">select</span> </span><br><span class="line">atable.aid,</span><br><span class="line">atable.aname,</span><br><span class="line">btable.bscore</span><br><span class="line"><span class="keyword">FROM</span> atable</span><br><span class="line"><span class="keyword">LEFT</span> <span class="keyword">JOIN</span> btable <span class="keyword">ON</span> btable.bid=atable.aid;</span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br><span class="line">| aid | aname | bscore |</span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br><span class="line">| A | 赵 | 18 |</span><br><span class="line">| B | 钱 | 15 |</span><br><span class="line">| D | 李 | 12 |</span><br><span class="line">| C | 孙 | NULL |</span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br></pre></td></tr></table></figure><p>这里当表的结构特别大的时候，我们先创建一个临时表tmpTable里面有aid，aname，bscore三个字段，然后使用INNER JOIN + UPDATE 可以得到同样的结果集：</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> ctable(</span><br><span class="line"><span class="string">`aid`</span> <span class="built_in">varchar</span>(<span class="number">10</span>) ,</span><br><span class="line"><span class="string">`aname`</span> <span class="built_in">varchar</span>(<span class="number">10</span>),</span><br><span class="line"><span class="string">`bscore`</span> <span class="built_in">int</span>);</span><br><span class="line"><span class="keyword">INSERT</span> <span class="keyword">INTO</span> </span><br><span class="line">ctable(aid,aname) </span><br><span class="line"><span class="keyword">Select</span> </span><br><span class="line">atable.aid, </span><br><span class="line">atable.aname </span><br><span class="line"><span class="keyword">from</span> atable;</span><br><span class="line">或者</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> ctable(</span><br><span class="line"><span class="string">`aid`</span> <span class="built_in">varchar</span>(<span class="number">10</span>),</span><br><span class="line"><span class="string">`aname`</span> <span class="built_in">varchar</span>(<span class="number">10</span>),</span><br><span class="line"><span class="string">`bscore`</span> <span class="built_in">int</span>) <span class="keyword">AS</span> <span class="keyword">Select</span> </span><br><span class="line">atable.aid, </span><br><span class="line">atable.aname </span><br><span class="line"><span class="keyword">from</span> atable;</span><br></pre></td></tr></table></figure><p>得到结果集：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">+-----+-------+--------+</span><br><span class="line">| aid | aname | bscore |</span><br><span class="line">+-----+-------+--------+</span><br><span class="line">| A | 赵 | NULL |</span><br><span class="line">| B | 钱 | NULL |</span><br><span class="line">| C | 孙 | NULL |</span><br><span class="line">| D | 李 | NULL |</span><br><span class="line">+-----+-------+--------+</span><br></pre></td></tr></table></figure><p>然后UPDATE + INNER JOIN</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">UPDATE</span> ctable</span><br><span class="line"><span class="keyword">INNER</span> <span class="keyword">JOIN</span> btable <span class="keyword">ON</span> btable.bid = ctable.aid</span><br><span class="line"><span class="keyword">SET</span> ctable.bscore = Btable.bscore</span><br><span class="line">;</span><br><span class="line"></span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br><span class="line">| aid | aname | bscore |</span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br><span class="line">| A | 赵 | 18 |</span><br><span class="line">| B | 钱 | 15 |</span><br><span class="line">| C | 孙 | NULL |</span><br><span class="line">| D | 李 | 12 |</span><br><span class="line">+<span class="comment">-----+-------+--------+</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>由于不是专业搞SQL优化的，可能会显得班门弄斧，请谅解。正在写AngualrJS的我，最近接到一个Task任务，是关于SQL优化的，这个SQL直接拿过来，有500多行，涉及十几个表，其中有五个表的数据最大，测试库的单表大概有几十万以上的数据，这个客户的数据库有400G以上。整个页面运行速度也很感人，优化之前用难听的话叫做垃圾SQL。纯SQL运行时间大概需要90s，经过几天的查资料和实验等等一番优化之后，所有SQL运行下来，控制在2秒左右。<br>
</summary>
<category term="MySQL" scheme="http://blog.sunxinfei.com/categories/MySQL/"/>
<category term="MySQL" scheme="http://blog.sunxinfei.com/tags/MySQL/"/>
<category term="SQL优化" scheme="http://blog.sunxinfei.com/tags/SQL%E4%BC%98%E5%8C%96/"/>
</entry>
<entry>
<title>解决win10不定时弹窗问题</title>
<link href="http://blog.sunxinfei.com/2017/05/30/win10-cmd-popwindow/"/>
<id>http://blog.sunxinfei.com/2017/05/30/win10-cmd-popwindow/</id>
<published>2017-05-30T15:29:14.000Z</published>
<updated>2018-03-23T08:10:37.889Z</updated>
<content type="html"><![CDATA[<p>在windows10四月份至五月份的某次更新之后，尤其是2017/5/12日之后，wncry勒索病毒爆发，win用户纷纷开启了补丁更新，但是更新完之后，电脑时而出现又瞬间消失的CMD命令窗口，尤其是全屏游戏的时候，弹窗时瞬间退出全屏模式，特别烦心，这里如果有遇到这个问题的，给大家提供解决方案。<br><a id="more"></a><br>其实我在五月中旬一次更新之后，突然发现这个问题，就是win10系统时不时地弹出窗口又消失，非常快，都没有时间反应截图，看不清什么程序，我当时下意识以为中病毒了，然后打开任务管理器把服务和进程看了看，没有发现特别的异常，感觉特别诡异，今天无意中发现了这个任务计划程序，搜了一下，果然是因为它。<br><strong>解决方案</strong><br>右键屏幕左下角，选择<strong>计算机管理</strong>，在该页面选择<strong>系统工具</strong>-><strong>任务计划程序</strong>-><strong>任务计划程序库</strong>-><strong>Microsoft</strong>，选择<strong>Office</strong>，这里可以在主页面看到一些任务计划，其中问题就是在于OfficeBackgroundTaskHandlerRegistration这个任务，你可以看到他的触发器和频率，这里我们右键选择OfficeBackgroundTaskHandlerRegistration这个任务-属性-更改用户或组，输入System，然后确定，这样就不会出现烦人的弹窗了。<br>这是关于这个问题的链接<a href="https://answers.microsoft.com/en-us/msoffice/forum/msoffice_officeinsider-mso_win10/officebackgroundtaskhandlerregistration-flashes-a/2600497e-78e4-41a1-9040-461cd2c3ea13" target="_blank" rel="noopener"><em>微软问答社区</em></a></p>]]></content>
<summary type="html">
<p>在windows10四月份至五月份的某次更新之后，尤其是2017/5/12日之后，wncry勒索病毒爆发，win用户纷纷开启了补丁更新，但是更新完之后，电脑时而出现又瞬间消失的CMD命令窗口，尤其是全屏游戏的时候，弹窗时瞬间退出全屏模式，特别烦心，这里如果有遇到这个问题的，给大家提供解决方案。<br>
</summary>
<category term="解决问题" scheme="http://blog.sunxinfei.com/categories/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/"/>
<category term="WIN10" scheme="http://blog.sunxinfei.com/tags/WIN10/"/>
</entry>
<entry>
<title>AngualarJS项目实战部署之企业应用</title>
<link href="http://blog.sunxinfei.com/2017/05/09/AngualarJS-Start/"/>
<id>http://blog.sunxinfei.com/2017/05/09/AngualarJS-Start/</id>
<published>2017-05-09T07:17:54.000Z</published>
<updated>2018-03-23T08:10:37.819Z</updated>
<content type="html"><![CDATA[<p>预告篇，如有兴趣请留言评论–<br>最近准备整理从2015年11月份开始到现在，已经服役20个月的AngualarJS(1.x)的教程，以及AngualarJS在企业项目的实战部署。</p>]]></content>
<summary type="html">
<p>预告篇，如有兴趣请留言评论–<br>最近准备整理从2015年11月份开始到现在，已经服役20个月的AngualarJS(1.x)的教程，以及AngualarJS在企业项目的实战部署。</p>
</summary>
<category term="AngularJS1.x" scheme="http://blog.sunxinfei.com/categories/AngularJS1-x/"/>
<category term="AngularJS" scheme="http://blog.sunxinfei.com/tags/AngularJS/"/>
<category term="前端框架" scheme="http://blog.sunxinfei.com/tags/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/"/>
</entry>
<entry>
<title>使用Git备份博客工程文件</title>
<link href="http://blog.sunxinfei.com/2017/05/06/%E4%BD%BF%E7%94%A8Git%E5%A4%87%E4%BB%BDHexo%E5%B7%A5%E7%A8%8B%E6%96%87%E4%BB%B6/"/>
<id>http://blog.sunxinfei.com/2017/05/06/使用Git备份Hexo工程文件/</id>
<published>2017-05-06T03:43:10.000Z</published>
<updated>2018-03-23T08:10:37.893Z</updated>
<content type="html"><![CDATA[<p>之前我们说的是将静态博客的内容部署到Github上，关于我们辛苦配置了半天的工程文件，我们本地可以保存，但是换了电脑就一些从新开始配置了，为了避免这种情况，我们可以将工程文件备份到云端，当然你可以选择云盘，这里给大家推荐部署到私有的Git项目中。<br><a id="more"></a><br>可以创建私有的Git项目有很多，比如Github，Coding等等，看个人资金和喜好，Github私有项目是需要收费，这里我选择的是<a href="https://bitbucket.org/" target="_blank" rel="noopener">bitbucket</a>，支持小团队免费管理和免费私有项目。</p><h3 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h3><p>bitbucket更新了新的UI界面，我们注册登录上bitbucket，创建新的Repository，起名为Blog，并创建为<strong>私有</strong>。</p><h3 id="上传备份"><a href="#上传备份" class="headerlink" title="上传备份"></a>上传备份</h3><p>这里我们复制该项目的HTTPS的url： <a href="https://xinfei_sun@bitbucket.org/xinfei_sun/blog.git" target="_blank" rel="noopener">https://xinfei_sun@bitbucket.org/xinfei_sun/blog.git</a></p><blockquote><ul><li>删除博客项目根目录中的.git文件夹，同时删除主题目录（themes/next）文件夹下的.git文件夹，这两步很重要</li><li>在博客项目根目录运行以下git命令<blockquote><ul><li>git init</li><li>git add .</li><li>git commit -m ‘first commit’</li><li>git remote add origin <a href="https://xinfei_sun@bitbucket.org/xinfei_sun/blog.git" target="_blank" rel="noopener">https://xinfei_sun@bitbucket.org/xinfei_sun/blog.git</a></li><li>git push -u origin master<br>这样，我们就把我们本地已有的git项目，提交到自己私有的项目中</li></ul></blockquote></li></ul></blockquote>]]></content>
<summary type="html">
<p>之前我们说的是将静态博客的内容部署到Github上，关于我们辛苦配置了半天的工程文件，我们本地可以保存，但是换了电脑就一些从新开始配置了，为了避免这种情况，我们可以将工程文件备份到云端，当然你可以选择云盘，这里给大家推荐部署到私有的Git项目中。<br>
</summary>
<category term="博客" scheme="http://blog.sunxinfei.com/categories/%E5%8D%9A%E5%AE%A2/"/>
<category term="Hexo" scheme="http://blog.sunxinfei.com/tags/Hexo/"/>
<category term="Git" scheme="http://blog.sunxinfei.com/tags/Git/"/>
</entry>
<entry>
<title>让百度收录Github中的博客（第三方托管和CDN加速）</title>
<link href="http://blog.sunxinfei.com/2017/05/06/%E8%AE%A9%E7%99%BE%E5%BA%A6%E6%94%B6%E5%BD%95Github%E4%B8%AD%E7%9A%84%E5%8D%9A%E5%AE%A2/"/>
<id>http://blog.sunxinfei.com/2017/05/06/让百度收录Github中的博客/</id>
<published>2017-05-06T03:09:48.000Z</published>
<updated>2018-03-23T08:10:37.920Z</updated>
<content type="html"><![CDATA[<p>像Github这一类的禁止了百度爬虫，具体原因可以去搜索，所以即使你将你的博客网址加入了百度站长，提交百度站点地图，也是报抓取失败，这里有两种方法补救。<br><a id="more"></a></p><h3 id="第三方托管"><a href="#第三方托管" class="headerlink" title="第三方托管"></a>第三方托管</h3><p>也就是说我们同时提交到Github和第三方的平台，我选择的是<a href="https://coding.net" target="_blank" rel="noopener">Coding</a>。<br>这里我们和Github使用一样，_config.yml配置文件提交代码那里修改为：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">deploy: </span><br><span class="line">- type: git</span><br><span class="line"> repo: https://github.com/SunXinFei/sunxinfei.github.io.git</span><br><span class="line"> branch: master</span><br><span class="line">- type: git</span><br><span class="line"> repo: https://git.coding.net/sunxinfei/sunxinfei.git</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure></p><h4 id="开启Pages服务"><a href="#开启Pages服务" class="headerlink" title="开启Pages服务"></a>开启Pages服务</h4><p>然后我们点击我们coding项目中的<strong>Pages服务</strong></p><blockquote><p>1.开启Coding Pages服务<br>2.自定义域名那里我们绑定我们的域名blog.sunxinfei.com<br>我们需要设置一个自己的域名给coding（需要白银会员权限），不然的话，依旧不会被百度爬到，这个划重点，也就是你最后给CNAME设置的时候不能用xxx.coding.me。</p></blockquote><h4 id="域名解析修改配置"><a href="#域名解析修改配置" class="headerlink" title="域名解析修改配置"></a>域名解析修改配置</h4><p>我们打开域名的解析服务，增加一条CNAME记录，也就是我们将国内项目（或者将搜索引擎，或者单独给百度）分配Coding的网址，非百度的分配github（或者CDN）这样可以顺利解决百度蜘蛛爬不到githubPage的问题。</p><h4 id="弊端"><a href="#弊端" class="headerlink" title="弊端"></a>弊端</h4><p>Coding如果免费的，需要先跳转到他的首页，再跳转到你的博客页，这样对用户和SEO都非常不友好，百度的站长工具，抓取测试一下会发现，工具的状态是抓取成功 (有跳转)，所以建议域名解析设置时候，如果支持的话，单独将百度搜索引擎指向Coding，其他设置成GitHub，这种方法是有效的。</p><h3 id="使用CDN加速服务"><a href="#使用CDN加速服务" class="headerlink" title="使用CDN加速服务"></a>使用CDN加速服务</h3><p>这里我发现的是CDN并不能根本解决百度这个问题，CDN倒是可以解决国内访问Github博客慢的问题。顺带吐槽一下备案的速度。</p><h4 id="CDN加速原理"><a href="#CDN加速原理" class="headerlink" title="CDN加速原理"></a>CDN加速原理</h4><p>原理说简单点就是：不是去原服务器上获取数据，而是从CDN加速商给你分配的，一般是最近的服务器上跑流量，这样就是说是静态页面，而Github上的博客是静态页，所以比较符合CDN加速的情况。</p><h4 id="验证CDN是否生效"><a href="#验证CDN是否生效" class="headerlink" title="验证CDN是否生效"></a>验证CDN是否生效</h4><p>CDN配置好之后，服务商会给一个CNAME让我们去解析，这里注意所给的CNAME域名是不能直接访问的，这里不同的DNS服务商，CNAME生效的时间略有不同，一般会在半个小时之内生效。您也可以通过PING的方式来查询是CNAME是否生效，如果PING到后缀为xxxcdntip.com的域名表示CDN的CNAME生效。</p><h4 id="弊端-1"><a href="#弊端-1" class="headerlink" title="弊端"></a>弊端</h4><p>对于用户来说弊端就是如果更新速度不够，很有可能看到旧的页面，当然你可以在CDN加速配置界面去自己配置刷新数据时间。对于百度蜘蛛来说，CDN出现不同IP，也就是说不但不会起到SEO，反而可能会降权或者收录索引减少，所以这里比如腾讯云的CDN加速有个高级设置选项，<strong>SEO优化配置</strong>是为了自定义搜索引擎回源，大致意思是当蜘蛛过来爬虫的时候，CDN将它引向你设置的源地址，这样就保证了IP的稳定性。详情见这个<a href="https://www.qcloud.com/document/product/228/6297" target="_blank" rel="noopener"><em>CDN的SEO优化配置</em></a>。<br>关于CDN对百度蜘蛛的影响与否，我找到了具体的官方解读，可以了解下<a href="http://zhanzhang.baidu.com/college/articleinfo?id=884" target="_blank" rel="noopener"><em>【官方解读】CDN对网站在搜索引擎中的影响</em></a></p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>到目前为止，主流的网上教程让百度收录Github中的项目的方法就是这两种，Github在今后很长一段时间都会屏蔽百度爬虫，所以既不想丢掉Github又想在百度排名里面不丢，就可以尝试这两种方法。我最后使用的是在域名解析那里给百度设置的Coding的网址，给默认设置的CDN网址，这样百度蜘蛛过来的话就去爬虫coding上的项目，但是注意这里会有个coding的跳转页面，其他用户访问的话就是CDN加速网址。</p>]]></content>
<summary type="html">
<p>像Github这一类的禁止了百度爬虫，具体原因可以去搜索，所以即使你将你的博客网址加入了百度站长，提交百度站点地图，也是报抓取失败，这里有两种方法补救。<br>
</summary>
<category term="博客" scheme="http://blog.sunxinfei.com/categories/%E5%8D%9A%E5%AE%A2/"/>
<category term="SEO" scheme="http://blog.sunxinfei.com/tags/SEO/"/>
<category term="Github" scheme="http://blog.sunxinfei.com/tags/Github/"/>
<category term="CDN" scheme="http://blog.sunxinfei.com/tags/CDN/"/>
</entry>
<entry>
<title>Blog + SEO</title>
<link href="http://blog.sunxinfei.com/2017/05/04/Hexo-SEO/"/>
<id>http://blog.sunxinfei.com/2017/05/04/Hexo-SEO/</id>
<published>2017-05-04T15:46:40.000Z</published>
<updated>2018-03-23T08:10:37.831Z</updated>
<content type="html"><![CDATA[<p>写了博客，迟迟让大家都搜索不到，没有足够的曝光率是非常着急的，关于静态博客的一些SEO的一些东西分享给大家。<br><a id="more"></a><br>首先这里要说明一下，备案与否对网站收录排行影响不大，不过会影响网站的用户点击。<br>Google和百度的收录风格相反，Google是先收录，就是通过<a href="https://www.google.com/webmasters/tools/home?hl=zh-CN&pli=1" target="_blank" rel="noopener">Search Console</a>，这样就会发现第二天谷歌搜索里面就有了自己的文章，但是别高兴太早，因为谷歌是先收录再监听，查看你网站的更新频率。如果上不了谷歌可以查看这里–<a href="http://blog.sunxinfei.com/2017/04/30/%E7%A7%91%E5%AD%A6%E4%B8%8A%E7%BD%91%E5%B7%A5%E5%85%B7/">科学上网工具篇</a>，<br>而百度相反先监听，是收录很慢，可能好几个星期你在百度搜索里面搜不到自己的网站，<a href="http://zhanzhang.baidu.com/" target="_blank" rel="noopener">百度站长平台</a>。<br>所以呢就需要我们做一些seo相关工作：</p><h3 id="持续性地更新自己的网站"><a href="#持续性地更新自己的网站" class="headerlink" title="持续性地更新自己的网站"></a>持续性地更新自己的网站</h3><p>因为无论哪两个搜索引擎，都是在看你是不是一个死的僵尸网站，当然你可以选择原创or伪原创，网站的持续更新对任何搜索蜘蛛来说都是很好的。</p><h3 id="Url尽量不要出现中文"><a href="#Url尽量不要出现中文" class="headerlink" title="Url尽量不要出现中文"></a>Url尽量不要出现中文</h3><p>因为中文会被转码，所以这里我们在用hexo创建新文章的时候，尽量用英文。</p><h3 id="添加站点地图sitemap"><a href="#添加站点地图sitemap" class="headerlink" title="添加站点地图sitemap"></a>添加站点地图sitemap</h3><p>先添加两个工具<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-sitemap --save</span><br><span class="line">npm install hexo-generator-baidu-sitemap --save</span><br></pre></td></tr></table></figure></p><p>然后打开根目录下的_config.yml添加如下代码，注意缩进<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">#hexo sitemap网站地图</span><br><span class="line">sitemap:</span><br><span class="line"> path: sitemap.xml</span><br><span class="line">baidusitemap:</span><br><span class="line"> path: baidusitemap.xml</span><br></pre></td></tr></table></figure></p><p>编译生成会在网站目录出现sitemap.xml和baidusitemap.xml，sitemap.xml我们提交给<a href="https://www.google.com/webmasters/tools/home?hl=zh-CN&pli=1" target="_blank" rel="noopener">Search Console</a>，baidusitemap.xml我们提交给<a href="http://zhanzhang.baidu.com/" target="_blank" rel="noopener">百度站长平台</a>，这里如果你的网站放在了Github上，那么恭喜你，你将永远不会被百度收录了，具体咱们去看另一篇博文<a href="http://blog.sunxinfei.com/2017/05/06/%E8%AE%A9%E7%99%BE%E5%BA%A6%E6%94%B6%E5%BD%95Github%E4%B8%AD%E7%9A%84%E5%8D%9A%E5%AE%A2/">让百度收录Github中的博客</a></p><h3 id="给你的hexo网站添加蜘蛛协议robots-txt"><a href="#给你的hexo网站添加蜘蛛协议robots-txt" class="headerlink" title="给你的hexo网站添加蜘蛛协议robots.txt"></a>给你的hexo网站添加蜘蛛协议robots.txt</h3><p>主要是告诉所有的蜘蛛，允许访问所有文件夹和站点地图位置<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">User-agent: *</span><br><span class="line">Allow: /</span><br><span class="line"></span><br><span class="line">Sitemap: http://blog.sunxinfei.com/sitemap.xml</span><br><span class="line">Sitemap: http://blog.sunxinfei.com/baidusitemap.xml</span><br></pre></td></tr></table></figure></p><h3 id="交换友情链接"><a href="#交换友情链接" class="headerlink" title="交换友情链接"></a>交换友情链接</h3><p>这个是很画一个重点，这个最早是谷歌在优化了蜘蛛算法之后，提出的核心的算法，防止之前各种刷seo的后门方法，后来各大搜引擎都使用的方法，这个也是最快提升seo，网上白色seo商店，卖的就是他们手里的权重比较高的网站，去给你做一个友情链接，咱们可以设想下，有个百度权重也就是排名非常靠前的网站里面有你的链接，那你这个网站权重是不是也相应地提升了。</p><h3 id="开启自动推送"><a href="#开启自动推送" class="headerlink" title="开启自动推送"></a>开启自动推送</h3><p>开启百度自动推送，修改主题配置文件_config.yml中的该代码,设置为true<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">baidu_push: true</span><br></pre></td></tr></table></figure></p><h3 id="最新更新2017-5-11"><a href="#最新更新2017-5-11" class="headerlink" title="最新更新2017/5/11"></a>最新更新2017/5/11</h3><p>网站于2017/5/9日完成百度收录，用时5天，不到一周被收录，从收录速度，说明是坚持更新有效果的，不过前提是你需要让百度爬虫爬到。</p>]]></content>
<summary type="html">
<p>写了博客，迟迟让大家都搜索不到，没有足够的曝光率是非常着急的，关于静态博客的一些SEO的一些东西分享给大家。<br>
</summary>
<category term="博客" scheme="http://blog.sunxinfei.com/categories/%E5%8D%9A%E5%AE%A2/"/>
<category term="SEO" scheme="http://blog.sunxinfei.com/tags/SEO/"/>
<category term="Hexo" scheme="http://blog.sunxinfei.com/tags/Hexo/"/>
<category term="Next" scheme="http://blog.sunxinfei.com/tags/Next/"/>
<category term="静态博客" scheme="http://blog.sunxinfei.com/tags/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/"/>
</entry>
<entry>
<title>安装Next主题</title>
<link href="http://blog.sunxinfei.com/2017/05/03/%E5%AE%89%E8%A3%85Next%E4%B8%BB%E9%A2%98/"/>
<id>http://blog.sunxinfei.com/2017/05/03/安装Next主题/</id>
<published>2017-05-03T13:57:48.000Z</published>
<updated>2018-03-23T08:10:37.903Z</updated>
<content type="html"><![CDATA[<p>2017最新Hexo + 最新的版本<a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="noopener"><em>Next5.0</em></a>按照官方链接中的，从<strong>开始使用</strong>到<strong>常见问题</strong>，可以非常简单地实现所有基本的功能。这里主要说一些注意点。<br><a id="more"></a><br>我们首先按照官方的步骤实现Next主题的部署，这个很简单，不再赘述。</p><h3 id="关于-config-yml主题配置文件"><a href="#关于-config-yml主题配置文件" class="headerlink" title="关于_config.yml主题配置文件"></a>关于_config.yml主题配置文件</h3><blockquote><ul><li>这个新手容易把之前提的<strong>站点配置文件</strong>（根目录下）和<strong>主题配置文件</strong>（主题目录下themes\next），这俩搞混。另外landscape里的那个_config.yml文件不用动。</li><li>有时候我们修改站点配置文件和主题配置文件，发现不起作用，尝试<strong>关闭服务，重新hexo s一下</strong>。</li></ul></blockquote><h3 id="添加评论系统"><a href="#添加评论系统" class="headerlink" title="添加评论系统"></a><a href="http://theme-next.iissnan.com/third-party-services.html#comment-system" target="_blank" rel="noopener"><em>添加评论系统</em></a></h3><blockquote><ul><li>对于评论系统来说，匿名评论功能其实也很重要，这里我尝试了主题推荐的几款：DISQUS、HyperComments、网易云跟帖、来必力、畅言，下面我就简单点评下</li><li><a href="https://disqus.com/" target="_blank" rel="noopener">DISQUS</a> 这个是国外很火的评论系统，可以匿名，缺点：被墙挡着，影响网页加载速度。</li><li><a href="https://www.hypercomments.com/" target="_blank" rel="noopener">HyperComments</a> 我安装的这个，可以匿名，颜值高，缺点：登陆没有国内社交软件</li><li><a href="https://gentie.163.com/experience.html" target="_blank" rel="noopener"><em>网易云跟帖</em></a>、<a href="http://changyan.kuaizhan.com/static/help/" target="_blank" rel="noopener"><em>畅言</em></a> 这两个类似，具体样式可以去官网体验 缺点：不能匿名，样式老感觉是在看新闻下的评论</li><li><a href="https://livere.com/city-demo" target="_blank" rel="noopener">来必力</a> 这个相比前两个国外的和国内的比，优点在于本土化的很出色，社交媒体支持多 缺点：技术无国界，但是纯属担心以后会被拦住，匿名有限制</li><li>多说已经停了，替换方案就是如上几个评论系统。</li><li><strong>所以综上所述，面向国内国外交流的话，HyperComments和来必力是比较不错的选择，如果不追求匿名评论功能可以选择网易云跟帖和畅言</strong></li><li>关于配置HyperComments，这里需要我们在HyperComments的<strong>管理台 - Setting - WIDGET - CODE</strong>,这里我们拿到页面中的ID（五位数字，字体非常小，）或者URL中最后几位也是ID</li><li>关于开启HyperComments的匿名功能，这里需要我们在HyperComments的<strong>管理台 - Setting - WIDGET - GENERAL</strong>，这里我们勾选<strong>Allows to hide comments left on the website in the users’ profiles.</strong></li><li>如果哪一个页面不想加评论系统，则在该md文件中的开始页头加入comments: false。</li></ul></blockquote><h3 id="添加「标签」和「分类」页面"><a href="#添加「标签」和「分类」页面" class="headerlink" title="添加「标签」和「分类」页面"></a><a href="http://theme-next.iissnan.com/theme-settings.html#tags-page" target="_blank" rel="noopener"><em>添加「标签」和「分类」页面</em></a></h3><blockquote><ul><li>如果不进行这个操作，就会出现主题中点击首页的标签或者分类会出现<strong>Cannot GET /categories/</strong>或者<strong>Cannot GET /tags/</strong>这样的空白页面，导致<strong>hexo 下的分类和表签无法显示</strong></li><li>这里还需要注意的是单词一定不要拼写错误</li></ul></blockquote><h3 id="添加数据统计"><a href="#添加数据统计" class="headerlink" title="添加数据统计"></a><a href="http://theme-next.iissnan.com/third-party-services.html#analytics-system" target="_blank" rel="noopener"><em>添加数据统计</em></a></h3><blockquote><ul><li>我添加了Google分析，但是考虑到大部分可能不会<a href="http://blog.sunxinfei.com/2017/04/30/%E7%A7%91%E5%AD%A6%E4%B8%8A%E7%BD%91%E5%B7%A5%E5%85%B7/"><em>科学上网</em></a>，所以我又添加了百度统计</li></ul></blockquote><h3 id="添加阅读次数统计（LeanCloud"><a href="#添加阅读次数统计（LeanCloud" class="headerlink" title="添加阅读次数统计（LeanCloud)"></a><a href="https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud" target="_blank" rel="noopener"><em>添加阅读次数统计（LeanCloud)</em></a></h3><blockquote><ul><li>这个功能就可以实现首页和每个文章页的阅读次数显示。</li><li>这里说下不蒜子统计，这个可以实现首页显示出眼睛和小人的图标来表示游客访问数，以及文章的阅读次数。</li></ul></blockquote><h3 id="标签-分类数量统计不准确"><a href="#标签-分类数量统计不准确" class="headerlink" title="标签/分类数量统计不准确"></a><a href="http://theme-next.iissnan.com/faqs.html#count-incorrect-for-tags-categories" target="_blank" rel="noopener"><em>标签/分类数量统计不准确</em></a></h3><blockquote><ul><li>如果我们出现了统计标签等数量不正确的时候，按照链接中的步骤操作，可以清除缓存</li></ul></blockquote><h3 id="修改Next主题的页脚"><a href="#修改Next主题的页脚" class="headerlink" title="修改Next主题的页脚"></a>修改Next主题的页脚</h3><blockquote><ul><li>有些人不喜欢页脚的<strong>由Hexo强力驱动 | 主题 - NexT.Pisces</strong>，那就需要修改找到 <strong>themes\next\layout_partials</strong>中的<strong>footer.swig</strong>和<strong>themes\next\languages</strong>中的<strong>zh-Hans.yml</strong></li></ul></blockquote><h3 id="添加Rss功能"><a href="#添加Rss功能" class="headerlink" title="添加Rss功能"></a>添加Rss功能</h3><p>这个功能对SEO友好，官方说得并不清楚，我这里具体说下</p><blockquote><ul><li><strong>npm install hexo-generator-feed –save</strong>执行该命令，安装插件</li><li>编辑<strong>主题配置文件</strong>_config.yml， rss修改为如下</li><li>rss: /atom.xml</li><li>执行生成命令即可</li></ul></blockquote><h3 id="添加sitemap站点地图"><a href="#添加sitemap站点地图" class="headerlink" title="添加sitemap站点地图"></a>添加sitemap站点地图</h3><p>这里可以查看另一篇博客，<a href="http://blog.sunxinfei.com/2017/05/04/Hexo-SEO/">Blog + SEO</a></p><h3 id="修改文章内链接文本样式"><a href="#修改文章内链接文本样式" class="headerlink" title="修改文章内链接文本样式"></a>修改文章内链接文本样式</h3><p>修改为蓝色，修改文件themes\next\source\css_common\components\post\post.styl，添加如下css样式：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">p</span> <span class="selector-tag">a</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#0593d3</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: none;</span><br><span class="line"></span><br><span class="line"> &:hover {</span><br><span class="line"> <span class="selector-tag">color</span>: <span class="selector-id">#0477ab</span>;</span><br><span class="line"> <span class="selector-tag">text-decoration</span>: <span class="selector-tag">underline</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="作者头像变成圆形"><a href="#作者头像变成圆形" class="headerlink" title="作者头像变成圆形"></a>作者头像变成圆形</h3><p>打开自定义CSS： \themes\next\source\css_custom\custom.styl 加入</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-author-image</span> {</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> dashed <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">animation</span>: cycle <span class="number">2s</span> <span class="number">0.5s</span> forwards;</span><br><span class="line"> <span class="attribute">transition</span>: border-radius <span class="number">2s</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>修改博主名字号大小,也在该文件</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-author-name</span> {</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="添加版权信息"><a href="#添加版权信息" class="headerlink" title="添加版权信息"></a>添加版权信息</h3><p>效果就是博客最下面的版权信息和结束语，这里参考了一些教程，顺便看了下工程文件中swig的源码，下面提供给大家参考：</p><h4 id="新建passage-end-tag-swig文件"><a href="#新建passage-end-tag-swig文件" class="headerlink" title="新建passage-end-tag.swig文件"></a>新建passage-end-tag.swig文件</h4><p>在路径 \themes\next\layout\_macro 中添加 passage-end-tag.swig 文件，代码不需解释意思很明显，其内容为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">{% if theme.passage_end_tag.enabled %}</span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center;color: #ccc;font-size:14px;"</span>></span></span><br><span class="line">------ 本文结束 感谢阅读------<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">br</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span> </span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"post-copyright"</span> <span class="attr">style</span>=<span class="string">"border-left:3px solid #ff1700;list-style:none;margin:2em 0 0;padding:0.5em 1em;background-color:#f9f9f9"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"post-copyright-author"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">strong</span>></span>本文作者：<span class="tag"></<span class="name">strong</span>></span></span><br><span class="line"> XinFei</span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"post-copyright-link"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">strong</span>></span>本文链接：<span class="tag"></<span class="name">strong</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"{{ page.permalink }}"</span> <span class="attr">title</span>=<span class="string">"{{ page.title }}"</span>></span>{{ page.permalink }}<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"post-copyright-license"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">strong</span>></span>声明： <span class="tag"></<span class="name">strong</span>></span></span><br><span class="line"> 原创文章，有问题请评论中留言。支持友情链接。非商业转载请注明作者及出处。商业转载请联系作者本人。</span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><h4 id="修改-post-swig-文件"><a href="#修改-post-swig-文件" class="headerlink" title="修改 post.swig 文件"></a>修改 post.swig 文件</h4><p>在 \themes\next\layout\_macro\post.swig 中， post-body标签 之后， post-footer标签之前的两个DIV之前添加，代码含义很简单就是判断下是不是首页，从而引入文件，如下代码为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> {% if not is_index %}</span><br><span class="line"> {% include 'passage-end-tag.swig' %}</span><br><span class="line"> {% endif %}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h4 id="启用功能"><a href="#启用功能" class="headerlink" title="启用功能"></a>启用功能</h4><p>在主题配置文件 _config.yml 中添加以下字段开启此功能：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">#文章末尾是否添加“本文结束”标记</span><br><span class="line">passage_end_tag:</span><br><span class="line"> enabled: true</span><br></pre></td></tr></table></figure><h3 id="添加自定义页面和菜单按钮"><a href="#添加自定义页面和菜单按钮" class="headerlink" title="添加自定义页面和菜单按钮"></a>添加自定义页面和菜单按钮</h3><p>在菜单栏添加例如”H5作品”之类的，非Hexo自带页面。<br>修改Hexo 目录下的_config.yml文件，找到skip_render，添加跳过渲染的目标文件或者目标路径：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">skip_render: </span><br><span class="line"> - README.md</span><br><span class="line"> - H5/*</span><br></pre></td></tr></table></figure><p>修改主题配置文件_config.yml，即h/themes/next/_config.yml，添加 h5 到 menu 中：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line"> home: /</span><br><span class="line"> archives: /archives</span><br><span class="line"> #categories: /categories</span><br><span class="line"> #about: /about</span><br><span class="line"> tags: /tags</span><br><span class="line"> h5: /H5</span><br></pre></td></tr></table></figure><p>但是图标会是一个问号，需要我们设置下icon，图标名称 是<a href="http://fontawesome.dashgame.com/" target="_blank" rel="noopener"><em> Font Awesome </em></a>图标的名字（不必带 fa- 前缀）：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">menu_icons:</span><br><span class="line"> enable: true</span><br><span class="line"> #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome</span><br><span class="line"> home: home</span><br><span class="line"> about: user</span><br><span class="line"> categories: th</span><br><span class="line"> schedule: calendar</span><br><span class="line"> tags: tags</span><br><span class="line"> archives: archive</span><br><span class="line"> sitemap: sitemap</span><br><span class="line"> commonweal: heartbeat</span><br><span class="line"> h5: html5</span><br></pre></td></tr></table></figure><p>修改NexT主题zh-Hans.yml文件，即/themes/next/languages/zh-Hans.yml，添加对应文本到 menu 中：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line"> home: 首页</span><br><span class="line"> archives: 归档</span><br><span class="line"> categories: 分类</span><br><span class="line"> tags: 标签</span><br><span class="line"> about: 关于</span><br><span class="line"> search: 搜索</span><br><span class="line"> schedule: 日程表</span><br><span class="line"> sitemap: 站点地图</span><br><span class="line"> commonweal: 公益404</span><br><span class="line"> h5: H5作品</span><br></pre></td></tr></table></figure><p>到此按钮添加完毕了，在H5文件夹下面可以添加自定义的html页就可以了。<br>但是如果我们想添加例如博客中的H5的那种既有Next风格，页面内容是自定义的话，就可以先在H5文件夹下创建一个md文件，然后用命令生成html页面，复制出来生成文件的源代码替换了之前的md文件，并且命名成html页面，重新设置上skip_render，这样我们就得到具有Next风格的html静态页了，里面的content内容我们随意书写，和普通html页一样。</p><h3 id="使用第三方图片存储器"><a href="#使用第三方图片存储器" class="headerlink" title="使用第三方图片存储器"></a>使用第三方图片存储器</h3><p>专业上这个叫做图床，是储存图片的服务器，因为一般我们博客无论是放到github上还是自己的服务器上，下载多媒体和存储多媒体是比较费资源，所以一般我们需要找一个稳定好用的图床来存储这些多媒体，我们只需要在博文中添加图片的网址即可，而且图床一般也自带防盗链，图片识别，图片压缩等丰富的功能来方便用户使用，这里我使用的是<a href="https://portal.qiniu.com/signup?code=3l7nswu330w9e" target="_blank" rel="noopener"><em>七牛云</em></a>，这种免费的图床服务器有很多，大家看心情挑选即可，很简单，就不再赘述了。</p>]]></content>
<summary type="html">
<p>2017最新Hexo + 最新的版本<a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="noopener"><em>Next5.0</em></a>按照官方链接中的，从<strong>开始使用</strong>到<strong>常见问题</strong>，可以非常简单地实现所有基本的功能。这里主要说一些注意点。<br>
</summary>
<category term="博客" scheme="http://blog.sunxinfei.com/categories/%E5%8D%9A%E5%AE%A2/"/>
<category term="Hexo" scheme="http://blog.sunxinfei.com/tags/Hexo/"/>
<category term="Next" scheme="http://blog.sunxinfei.com/tags/Next/"/>
<category term="静态博客" scheme="http://blog.sunxinfei.com/tags/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/"/>
</entry>
<entry>
<title>Sublime + Markdown</title>
<link href="http://blog.sunxinfei.com/2017/05/02/Sublime-Markdown/"/>
<id>http://blog.sunxinfei.com/2017/05/02/Sublime-Markdown/</id>
<published>2017-05-02T13:37:10.000Z</published>
<updated>2018-03-23T08:10:37.857Z</updated>
<content type="html"><![CDATA[<p>写静态博客的工具，我们选择Sublime，这个神器很多人都耳熟能详，不再多做介绍，不过值得一提的就是，Sublime本身对Markdown的语法不友好，需要我们配置一些东西。<br><a id="more"></a><br><a href="http://www.sublimetext.com/3" target="_blank" rel="noopener"><em>Sublime</em></a>：根据系统下载并安装自己需要的版本，这里值得一提的就是，安装过程中记得勾选一项是关于将Sublime添加到右键菜单的。 </p><h3 id="安装Package-Control"><a href="#安装Package-Control" class="headerlink" title="安装Package Control"></a>安装Package Control</h3><p>我们通过Sublime的包管理器Package Control来给Sublime安装插件。</p><blockquote><ul><li>Ctrl + Shift + P调出命令面板，输入”Package”，选择”<strong>Install Package Control</strong>“</li><li>等待一段时间之后会看到安装成功的提示框 </li></ul></blockquote><p><strong>以后需要注意，如果插件安装成功后，没有任何变化，记得重启下Sublime</strong></p><h3 id="安装Monokai-Extended-和-Markdown-Extended插件"><a href="#安装Monokai-Extended-和-Markdown-Extended插件" class="headerlink" title="安装Monokai Extended 和 Markdown Extended插件"></a>安装Monokai Extended 和 Markdown Extended插件</h3><p>由于Markdown 格式在 Sublime 中默认无高亮，所以我们为了美观…</p><blockquote><ul><li>Ctrl+ Shift + P 调出命令面板，输入 “install”，选择”<strong>Package Control: Install Package</strong>“回车，等待弹出输入框，输入插件名称、回车，等待安装，。 </li><li>我们安装好Monokai Extended 和 Markdown Extended两个插件之后，选择Monokai Extended的主题 <strong>菜单Preferences - Color Scheme - Monokai Extended - Monokai Extended Bright</strong> </li><li>打开一个md结尾的文件，点击 Sublime 右下角文档格式，在列表最上方名为<strong> Open all with current extension as</strong> 二级列表中选择 <strong>Markdown Extended</strong>，这样我们就把Markdown 的文件格式与 Markdown Extended 这种语法关联起来</li><li>到此我们的编辑器就变得有颜色了</li><li><img src="http://op3cmr9ix.bkt.clouddn.com/blog/Sublime+Markdown/Sublime+Markdown6.png" alt="Markdown Color"> </li></ul></blockquote><h3 id="安装OmniMarkupPreviewer"><a href="#安装OmniMarkupPreviewer" class="headerlink" title="安装OmniMarkupPreviewer"></a>安装OmniMarkupPreviewer</h3><p>这个插件主要是实现了<strong>实时预览</strong>你的Markdown页面，安装方法跟一般的插件一样，安装成功后，打开一个md的文件，右击或者Ctrl + Alt + O，就能弹出实时预览的页面。</p><h3 id="安装MarkdownEditing"><a href="#安装MarkdownEditing" class="headerlink" title="安装MarkdownEditing"></a>安装MarkdownEditing</h3><p>这个插件看个人需求，<a href="https://github.com/SublimeText-Markdown/MarkdownEditing" target="_blank" rel="noopener"><em>Markdown Editing</em></a>主要是方便输入一些MarkDown特定的语法，比如自动补齐语法符号和语法快捷键，它也提供配色方案（惨白色，非常不推荐）<br>常用的几个快捷键是：</p><blockquote><ul><li>Ctrl + Win + V 创建文本超级链接格式</li><li>Shift + Win + K 创建图片链接格式</li></ul></blockquote><p><strong>这里需要注意一点的是，如果安装了MarkdownEditing，md文件主题变成惨白色，这时在菜单Preferences修改主题配色是没有作用的，我们需要手动点击 Sublime 右下角文档格式，选择Markdown Extended，这样就能修正过来颜色搭配。</strong></p><h3 id="关于语言和缩写标记对应表"><a href="#关于语言和缩写标记对应表" class="headerlink" title="关于语言和缩写标记对应表"></a>关于语言和缩写标记对应表</h3><table><thead><tr><th>Language</th><th style="text-align:center">language_key</th></tr></thead><tbody><tr><td>1C</td><td style="text-align:center">1c</td></tr><tr><td>ActionScript</td><td style="text-align:center">actionscript</td></tr><tr><td>Apache</td><td style="text-align:center">apache</td></tr><tr><td>AppleScript a</td><td style="text-align:center">pplescript</td></tr><tr><td>AsciiDoc</td><td style="text-align:center">asciidoc</td></tr><tr><td>AspectJ</td><td style="text-align:center">asciidoc</td></tr><tr><td>AutoHotkey</td><td style="text-align:center">autohotkey</td></tr><tr><td>AVR Assembler</td><td style="text-align:center">avrasm</td></tr><tr><td>Axapta</td><td style="text-align:center">axapta</td></tr><tr><td>Bash</td><td style="text-align:center">bash</td></tr><tr><td>BrainFuck</td><td style="text-align:center">brainfuck</td></tr><tr><td>Cap’n Proto</td><td style="text-align:center">capnproto</td></tr><tr><td>Clojure REPL</td><td style="text-align:center">clojure</td></tr><tr><td>Clojure</td><td style="text-align:center">clojure</td></tr><tr><td>CMake</td><td style="text-align:center">cmake</td></tr><tr><td>CoffeeScript</td><td style="text-align:center">coffeescript</td></tr><tr><td>C++</td><td style="text-align:center">cpp</td></tr><tr><td>C# c</td><td style="text-align:center">s</td></tr><tr><td>CSS</td><td style="text-align:center">css</td></tr><tr><td>D</td><td style="text-align:center">d</td></tr><tr><td>Dart</td><td style="text-align:center">d</td></tr><tr><td>Delphi</td><td style="text-align:center">delphi</td></tr><tr><td>Diff</td><td style="text-align:center">diff</td></tr><tr><td>Django</td><td style="text-align:center">django</td></tr><tr><td>DOS .bat</td><td style="text-align:center">dos</td></tr><tr><td>Dust</td><td style="text-align:center">dust</td></tr><tr><td>Elixir</td><td style="text-align:center">elixir</td></tr><tr><td>ERB (Embedded Ruby)</td><td style="text-align:center">erb</td></tr><tr><td>Erlang REPL erlang-</td><td style="text-align:center">repl</td></tr><tr><td>Erlang</td><td style="text-align:center">erlang</td></tr><tr><td>FIX</td><td style="text-align:center">fix</td></tr><tr><td>F#</td><td style="text-align:center">fsharp</td></tr><tr><td>G-code (ISO 6983)</td><td style="text-align:center">gcode</td></tr><tr><td>Gherkin</td><td style="text-align:center">gherkin</td></tr><tr><td>GLSL</td><td style="text-align:center">glsl</td></tr><tr><td>Go</td><td style="text-align:center">go</td></tr><tr><td>Gradle</td><td style="text-align:center">gradle</td></tr><tr><td>Groovy</td><td style="text-align:center">groovy</td></tr><tr><td>Haml</td><td style="text-align:center">haml</td></tr><tr><td>Handlebars</td><td style="text-align:center">handlebars</td></tr><tr><td>Haskell</td><td style="text-align:center">haskell</td></tr><tr><td>Haxe</td><td style="text-align:center">haxe</td></tr><tr><td>HTTP</td><td style="text-align:center">http</td></tr><tr><td>Ini file</td><td style="text-align:center">ini</td></tr><tr><td>Java</td><td style="text-align:center">java</td></tr><tr><td>JavaScript</td><td style="text-align:center">javascript</td></tr><tr><td>JSON j</td><td style="text-align:center">son</td></tr><tr><td>Lasso</td><td style="text-align:center">lasso</td></tr><tr><td>Less</td><td style="text-align:center">less</td></tr><tr><td>Lisp</td><td style="text-align:center">lisp</td></tr><tr><td>LiveCode</td><td style="text-align:center">livecodeserver</td></tr><tr><td>LiveScript</td><td style="text-align:center">livescript</td></tr><tr><td>Lua</td><td style="text-align:center">lua</td></tr><tr><td>Makefile</td><td style="text-align:center">makefile</td></tr><tr><td>Markdown</td><td style="text-align:center">markdown</td></tr><tr><td>Mathematica</td><td style="text-align:center">mathematica</td></tr><tr><td>Matlab</td><td style="text-align:center">matlab</td></tr><tr><td>MEL (Maya Embedded Language)</td><td style="text-align:center">mel</td></tr><tr><td>Mercury</td><td style="text-align:center">mercury</td></tr><tr><td>Mizar</td><td style="text-align:center">mizar</td></tr><tr><td>Monkey</td><td style="text-align:center">monkey</td></tr><tr><td>nginx</td><td style="text-align:center">nginx</td></tr><tr><td>Nimrod</td><td style="text-align:center">nimrod</td></tr><tr><td>Nix</td><td style="text-align:center">nix</td></tr><tr><td>NSIS</td><td style="text-align:center">nsis</td></tr><tr><td>Objective C</td><td style="text-align:center">objectivec</td></tr><tr><td>OCaml</td><td style="text-align:center">ocaml</td></tr><tr><td>Oxygene</td><td style="text-align:center">oxygene</td></tr><tr><td>Parser 3</td><td style="text-align:center">parser3</td></tr><tr><td>Perl</td><td style="text-align:center">perl</td></tr><tr><td>PHP</td><td style="text-align:center">php</td></tr><tr><td>PowerShell</td><td style="text-align:center">powershell</td></tr><tr><td>Processing</td><td style="text-align:center">processing</td></tr><tr><td>Python’s profiler output</td><td style="text-align:center">profile</td></tr><tr><td>Protocol Buffers</td><td style="text-align:center">protobuf</td></tr><tr><td>Puppet</td><td style="text-align:center">puppet</td></tr><tr><td>Python</td><td style="text-align:center">python</td></tr><tr><td>Q</td><td style="text-align:center">q</td></tr><tr><td>R</td><td style="text-align:center">r</td></tr><tr><td>RenderMan RIB</td><td style="text-align:center">rib</td></tr><tr><td>Roboconf</td><td style="text-align:center">roboconf</td></tr><tr><td>RenderMan RSL</td><td style="text-align:center">rsl</td></tr><tr><td>Ruby</td><td style="text-align:center">ruby</td></tr><tr><td>Oracle Rules Language</td><td style="text-align:center">ruleslanguage</td></tr><tr><td>Rust</td><td style="text-align:center">rust</td></tr><tr><td>Scala</td><td style="text-align:center">scala</td></tr><tr><td>Scheme</td><td style="text-align:center">scheme</td></tr><tr><td>Scilab</td><td style="text-align:center">scilab</td></tr><tr><td>SCSS</td><td style="text-align:center">scss</td></tr><tr><td>Smali</td><td style="text-align:center">smali</td></tr><tr><td>SmallTalk</td><td style="text-align:center">smalltalk</td></tr><tr><td>SML</td><td style="text-align:center">sml</td></tr><tr><td>SQL</td><td style="text-align:center">sql</td></tr><tr><td>Stata</td><td style="text-align:center">stata</td></tr><tr><td>STEP Part 21 (ISO 10303-21)</td><td style="text-align:center">step21</td></tr><tr><td>Stylus</td><td style="text-align:center">stylus</td></tr><tr><td>Swift</td><td style="text-align:center">swift</td></tr><tr><td>Tcl</td><td style="text-align:center">tcl</td></tr><tr><td>TeX</td><td style="text-align:center">tex</td></tr><tr><td>Thrift</td><td style="text-align:center">thrift</td></tr><tr><td>Twig</td><td style="text-align:center">twig</td></tr><tr><td>TypeScript</td><td style="text-align:center">typescript</td></tr><tr><td>Vala</td><td style="text-align:center">vala</td></tr><tr><td>VB.NET</td><td style="text-align:center">vbnet</td></tr><tr><td>VBScript in HTML vbscript-</td><td style="text-align:center">html</td></tr><tr><td>VBScript</td><td style="text-align:center">vbscript</td></tr><tr><td>Verilog</td><td style="text-align:center">verilog</td></tr><tr><td>VHDL</td><td style="text-align:center">vhdl</td></tr><tr><td>Vim Script</td><td style="text-align:center">vim</td></tr><tr><td>Intel x86 Assembly</td><td style="text-align:center">x86asm</td></tr><tr><td>XL</td><td style="text-align:center">xl</td></tr><tr><td>XML, HTML</td><td style="text-align:center">xml</td></tr></tbody></table>]]></content>
<summary type="html">
<p>写静态博客的工具，我们选择Sublime，这个神器很多人都耳熟能详，不再多做介绍，不过值得一提的就是，Sublime本身对Markdown的语法不友好，需要我们配置一些东西。<br>
</summary>
<category term="博客" scheme="http://blog.sunxinfei.com/categories/%E5%8D%9A%E5%AE%A2/"/>
<category term="工具" scheme="http://blog.sunxinfei.com/tags/%E5%B7%A5%E5%85%B7/"/>
<category term="静态博客" scheme="http://blog.sunxinfei.com/tags/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/"/>
</entry>
<entry>
<title>科学上网工具</title>
<link href="http://blog.sunxinfei.com/2017/04/30/%E7%A7%91%E5%AD%A6%E4%B8%8A%E7%BD%91%E5%B7%A5%E5%85%B7/"/>
<id>http://blog.sunxinfei.com/2017/04/30/科学上网工具/</id>
<published>2017-04-30T03:18:09.000Z</published>
<updated>2018-03-23T08:10:37.911Z</updated>
<content type="html"><![CDATA[<p>你告诉我作为一个开发者，你还在用百度来搜索？GitHub、stackoverflow、google你不经常使用？那我只能表示很无奈，良好的搜索习惯养成之后为你以后解决各种开发问题等等等，反正就是各种有好处…<br><a id="more"></a><br>这个应该是我第一个长期坚持付费的软件了，现在基本离不开。所以关于科学上网，为了方便快速地查询一些开发方面的知识，上网工具也有很多，免费的or收费的，稳定or不稳定的，我只推荐我这几年一直用的==><a href="https://portal.shadowsocks.com.hk/aff.php?aff=6928" target="_blank" rel="noopener"><em>shadowsocks这个软件和节点</em></a><br>由于十月份马上要开一个会议，所以官方网站变成了==><a href="https://portal.shadowsocks.la/aff.php?aff=6928" target="_blank" rel="noopener"><em>没学会科学上网之前的最新官方链接，更新于2017/10/10</em></a><br>理由只要就是这么几点:</p><blockquote><ul><li>价格合理,15美元（100RMB左右）一年</li><li>流量不限制</li><li>时间不限制</li><li>无需配置</li><li>稳定</li><li>手机、电脑、智能路由都可以用</li><li>shadowsocks软件支持自动切换国内外网络，避免VPN中的手动繁琐切换，这个划重点，非常方便，</li></ul></blockquote>]]></content>
<summary type="html">
<p>你告诉我作为一个开发者，你还在用百度来搜索？GitHub、stackoverflow、google你不经常使用？那我只能表示很无奈，良好的搜索习惯养成之后为你以后解决各种开发问题等等等，反正就是各种有好处…<br>
</summary>
<category term="工具" scheme="http://blog.sunxinfei.com/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="工具" scheme="http://blog.sunxinfei.com/tags/%E5%B7%A5%E5%85%B7/"/>
<category term="科学上网" scheme="http://blog.sunxinfei.com/tags/%E7%A7%91%E5%AD%A6%E4%B8%8A%E7%BD%91/"/>
</entry>
</feed>