-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
963 lines (682 loc) · 79.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>徐豪杰写字的地方</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="徐豪杰写字的地方">
<meta property="og:url" content="http://blog.jayxhj.com/index.html">
<meta property="og:site_name" content="徐豪杰写字的地方">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="徐豪杰写字的地方">
<meta name="twitter:description">
<meta name="twitter:creator" content="@jayxhj">
<link rel="alternate" href="/atom.xml" title="徐豪杰写字的地方" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<!--<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="author" href="/humans.txt" />
<!-- Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-27843739-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-27843739-2');
</script>
<!-- End Google Analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?762045bf95459c1fd6be1a6889224746";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">徐豪杰写字的地方</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">历史文章</a>
<a class="main-nav-link" href="https://github.com/jayxhj">GitHub</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://blog.jayxhj.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-migrate-images-from-qiniu-to-github" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018/02/migrate-images-from-qiniu-to-github/" class="article-date">
<time datetime="2018-02-06T11:10:31.000Z" itemprop="datePublished">2018-02-06</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/blog/">blog</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/02/migrate-images-from-qiniu-to-github/">把图床从七牛迁移到 GitHub</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>事情是这样，国内的域名是需要备案的，备案其实是备案服务器，这样通信管理局就能知道你的网站在哪里托管，在哪台服务器。这里有详细介绍为何要备案 <del><a href="https://help.aliyun.com/knowledge_detail/36907.html?spm=a2c4g.11174283.6.539.HMkMNn" target="_blank" rel="external">为什么要备案</a></del> 这实在是个神奇的规定，哪些网站能访问，居然是别人替你做决定。</p>
<p>问题就来了，没备案，不仅解析会有问题，连 CDN 都是用不了的，人在屋檐下不得不低头？所以就有了这篇，如何将七牛的图片迁移至 GitHub。</p>
<p>共有以下几个步骤：</p>
<ol>
<li>获取文章中的图片 url</li>
<li>将 CDN 上的图片下载下来</li>
<li>移动至 Hexo source/images 目录</li>
<li>推送至 GitHub</li>
</ol>
<p>问题有几个（方案放括号里）：</p>
<ol>
<li>博客的链接需要更改，如 img.jayxhj.com 需要改为 blog.jayxhj.com/images （sed 替换）</li>
<li>图片 url 在 Markdown 文件内 （grep 就好）</li>
<li>由于域名下线，那么直接按原有的 url 访问获取不到对应图片的 （将域名替换为七牛分配的 CDN 加速域名）</li>
<li>显然手动一个个下载图片是不好的 （awk 循环顺序下载）</li>
</ol>
<p>以上问题，用命令解释就是</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grep -ohE <span class="string">"\!\[.*\]\(.*\)"</span> ./<span class="built_in">source</span>/_posts/* | grep -oE <span class="string">"blog.jayxhj.com/images[a-zA-Z0-9./?=_-]*"</span> | sed <span class="string">'s/blog.jayxhj.com\/images/oiiz5quoo.qnssl.com/g'</span> | awk <span class="string">'{sysetm("curl -O"$0)}'</span></span><br></pre></td></tr></table></figure>
<p>下面一步步说明。</p>
<h2 id="获取文章中的图片 -url"><a href="# 获取文章中的图片 -url" class="headerlink" title="获取文章中的图片 url"></a>获取文章中的图片 url</h2><p>由于 Hexo 的文章源文档都是 Markdown 文档，因此需要将所有的图片地址获取出来，命令如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grep -ohE <span class="string">"\!\[.*\]\(.*\)"</span> ./<span class="built_in">source</span>/_posts/* | grep -oE <span class="string">"blog.jayxhj.com/images[a-zA-Z0-9./?=_-]*"</span></span><br></pre></td></tr></table></figure>
<p>第一件事，是匹配 MarkDown 中的图片 url，<code>grep -ohE "\!\[.*\]\(.*\)" ./source/_posts/*</code> 命令的作用是匹配 <code>![]()</code> 这样的 url，再提取链接。</p>
<p>由于我们的目的是获取对应 url，现在是知道了域名的链接及前缀 <strong>blog.jayxhj.com/images</strong>，那么做以下事情，使用正则表达式匹配 url，对应 <code>-E "blog.jayxhj.com/images[a-zA-Z0-9./?=_-]*"</code>，仅截取匹配到的部分，那就是 -o，表示 –only-matching ，-h 表示 –no-filename ，这样获取从多个文件获取时，就不会有文件名了。</p>
<h2 id="将 -CDN- 上的图片下载下来"><a href="# 将 -CDN- 上的图片下载下来" class="headerlink" title="将 CDN 上的图片下载下来"></a>将 CDN 上的图片下载下来 </h2><p> 所有文章的 url 获取到了，但是这些图片没法访问，因为域名未备案，七牛会将资源屏蔽，但是通过七牛提供的 CDN 域名是可以下载的，我的是 <strong>oiiz5quoo.qnssl.com</strong> 。</p>
<p>前面获取到了，那么现在只需要替换域名，curl 下载即可。命令为 <code>sed 's/blog.jayxhj.com\/images/oiiz5quoo.qnssl.com/g' | awk '{sysetm("curl -O" $0)}</code></p>
<p>此处有提醒：如果图片存放在七牛的文件夹里，那么应该按照在七牛定义的分割符来拼接出目录名，再递归创建目录，mkdir -p 即可。</p>
<h2 id="将文章内的图片域名替换"><a href="# 将文章内的图片域名替换" class="headerlink" title="将文章内的图片域名替换"></a>将文章内的图片域名替换</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gsed -i <span class="string">'s/http:\/\/img.jayxhj.com/\/\/blog.jayxhj.com\/images/g'</span> ./<span class="built_in">source</span>/_posts/*</span><br></pre></td></tr></table></figure>
<p>希望以后备案这个词可以消失 😊 。</p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2018/02/migrate-images-from-qiniu-to-github/" data-id="cjdbnolcb00314w6vzgyfzmll" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2018/02/migrate-images-from-qiniu-to-github/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/blog/">blog</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/迁移/">迁移</a></li></ul>
</footer>
</div>
</article>
<article id="post-ways-to-debug-js-files-online" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/12/ways-to-debug-js-files-online/" class="article-date">
<time datetime="2016-12-15T10:16:20.000Z" itemprop="datePublished">2016-12-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/12/ways-to-debug-js-files-online/">调试线上 JS 的几种姿势</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>线上某个页面出问题时，我们需要查看日志，需要看页面表现，需要定位问题在哪里以便及时修复。一般后端会通过打日志的形式来确定 bug 的起源，前端就不一样了，上线前 JS 经过混淆、压缩、合并，代码已经不是原来的样子了，无疑给调试带来了困难。那么如何定位问题呢？本文希望从两方面解释，一方面是如何去复现问题，第二步是根据第一步的信息，如何更快更科学地 debug 。</p>
<h1 id="问题的定位"><a href="# 问题的定位" class="headerlink" title="问题的定位"></a>问题的定位 </h1><h2 id="本地复现、调试、解决、上线"><a href="# 本地复现、调试、解决、上线" class="headerlink" title="本地复现、调试、解决、上线"></a> 本地复现、调试、解决、上线 </h2><p> 有些问题其实不用在线上调试，如果场景容易满足，case 容易在线下构造，那么直接在本地改就好了，这种方式比较适合简单的问题，无需特定场景和环境，bug 就能修复。</p>
<h2 id="使用 -Chrome- 浏览器进行 -debug"><a href="# 使用 -Chrome- 浏览器进行 -debug" class="headerlink" title="使用 Chrome 浏览器进行 debug"></a>使用 Chrome 浏览器进行 debug</h2><p>调试页面的问题，使用最多的浏览器就是 Chrome 和 Firefox ，而我习惯于使用 Chrome ，就介绍一下使用 Chrome debug JS 的姿势。</p>
<p>Google 官方给出了 <a href="https://developers.google.com/web/tools/chrome-devtools/" target="_blank" rel="external">DevTools</a> 的介绍，里面有很多案例介绍及使用方法介绍，以博客的形式给出，很方便。</p>
<p>下面介绍的内容实际上就是从 <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints" target="_blank" rel="external">Set Breakpoints</a> 这个小节学习的。摘录某个调试方法。</p>
<h3 id="设置 -DOM- 改变时的断点"><a href="# 设置 -DOM- 改变时的断点" class="headerlink" title="设置 DOM 改变时的断点"></a>设置 DOM 改变时的断点 </h3><p> 你代码的某个地方出现了 bug ，它错误地改变、删除或者增加一个 DOM 点。DevTools 提供了一个快速找到 bug 根源的工具：针对 DOM 改变的断点。</p>
<p>DevTools 让你可以在某个节点上打断点，让你不用手动地在代码里四处寻找是哪里导致了 DOM 的变化。无论在哪个节点，或是节点的子节点，当它们背添加、删除、改变时，DevTools 都能让页面暂停，然后把你带到引起 DOM 改变的具体代码行。</p>
<p>添加 DOM 改变的断点 的方式： 右键单击要监控的节点，选择要监控的行为，当节点发生改变时，JS 将停止执行，页面将显示引起监控的 DOM 节点改变的 JS 代码行。另外，从 Call Stack 可以查看引发当前监控 DOM 发生改变的 JS 调用栈。</p>
<p>监控节点断点类型：</p>
<p>以下是各个类型的 DOM 节点改变时的断点详细说明：</p>
<ul>
<li><p><strong>Subtree modifications</strong> .</p>
<p>当当前选择的节点的子节点被删除、添加、或者内容发生变化时触发。当子节点的属性改变或者当前节点发生改变时不会触发。</p>
</li>
<li><p><strong>Attributes modifications</strong>.</p>
<p>当当前节点的属性被添加或者删除，或者当前节点的某个属性的值发生变化时触发。</p>
</li>
<li><p><strong>Node Removal</strong>.</p>
<p>当当前节点被删除时触发。</p>
</li>
</ul>
<p>设置 DOM change 相关的断点最大的好处在于，能准确定位到是哪里引起了改变，缺点在于，当出现不对 DOM 产生改变的 bug 时，这种方法就失效了。这种情况，就得确定 bug 的代码范围，再使用断点逐步追踪。</p>
<h1 id="JS- 的调试"><a href="#JS- 的调试" class="headerlink" title="JS 的调试"></a>JS 的调试 </h1><p> 众所周知，静态文件会存在缓存问题。一个页面的加载，如果包含多个 JS ，如何定位到具体的 JS 以及如何使用修改后的 JS 来查看页面效果就很是问题了。下面介绍的方式可以解决前面的问题，原理都是使用本地的 JS 做代理，来接管线上的 JS ，这样线上的调试就转移到本地了。由于线上的 JS 一般都经过压缩、混淆、合并，故最好本地有合成线上 JS 的子 JS ，下面介绍的方式是直接用本地的 JS 替代线上的 JS ，如果是前面说的那种情况，用合并后的 JS 替换线上 JS 即可。</p>
<h2 id="使用代理软件"><a href="# 使用代理软件" class="headerlink" title="使用代理软件"></a>使用代理软件</h2><p>macOS 系统下，Web 调试代理软件一般使用 <a href="https://www.charlesproxy.com/" target="_blank" rel="external">Charles</a> , 使用代理软件的好处是，网络请求的所有资源，请求的细节，都能记录下来，另外它能作为系统代理接管浏览器的网络访问，将这些请求记录下来，是 Web debugging 的利器。</p>
<p>下面要介绍的方式就是 Charles 的代理功能，使用本地的 JS 代理线上的 JS 。</p>
<ol>
<li><p>设置 Charles 为系统代理，代理 Chrome 的网络连接。</p>
<p>这个步骤，需要开启 Charles ，并设置 Charles 为系统代理。Firefox 可以直接设置，Chrome 网络设置实际上就是修改的系统的网络设置，步骤为 <strong>系统偏好设置 -> 网络 -> 高级 -> 代理</strong> 一图胜千言 <img src="//blog.jayxhj.com/images/ServeAsSystemProxy.jpeg" alt="系统代理"></p>
</li>
<li><p>Map Local</p>
<p>使用 Chrome 请求网页， 即可在 Charles 中查看到当前网页所有资源对应的请求，将某个 JS 文件映射到要用作代理的本地 JS 文件，或者粗暴点，直接代理目录，就可以代理文件夹下的所有 JS 了。</p>
<p><img src="//blog.jayxhj.com/images/MapLocal.jpeg" alt="map local"></p>
</li>
</ol>
<p>这个方式下，当在本地修改 JS 后，能直接在线上环境看到效果，最重要的是，免去了修改 JS 后上线 JS 不生效的问题。归根结底，本地修改，上线再看效果这种原始的方式，本该淘汰。</p>
<p>但此方式有个缺点，需要来回切换，你需要切换到编辑器或者 IDE 改好后再回 Chrome 刷新页面看效果，而且不能实时编辑，下面的使用 <strong>Chrome workspace</strong> 的方式无疑是效果最好而且最省时省力的。</p>
<h2 id="使用 -Chrome-workspace"><a href="# 使用 -Chrome-workspace" class="headerlink" title="使用 Chrome workspace"></a>使用 <a href="https://developers.google.com/web/tools/setup/setup-workflow" target="_blank" rel="external">Chrome workspace</a></h2><p>此方式实际上也是使用本地的文件做代理，但区别于其他方式的是，它与 Chrome 无缝集成，是 Chrome DevTools 提供的功能，支持断点，支持将修改持久化到本地。下面介绍配置方式。</p>
<ol>
<li><p>将本地文件添加到 workspace</p>
<ul>
<li>开启调试面板，切换至 Sources 选项卡</li>
<li>右击选择 <strong>Add Folder to Workspace</strong> <img src="//blog.jayxhj.com/images/addfolder.png" alt="Add Folder to Workspace"></li>
<li>选择要代理的本地的文件夹</li>
<li>点击地址栏下方弹出来的窗口，选择 <strong>允许</strong> ，Chrome 才能获得访问本地文件的权限</li>
</ul>
</li>
<li><p>Map to File System Resource</p>
<p>选择要代理的文件，Chrome 将自动列出可以映射的文件，此时就建立了远程文件与本地文件的映射。 <img src="//blog.jayxhj.com/images/maptoresource.png" alt="Map to File System Resource"></p>
</li>
</ol>
<p>设置好之后当 debug 好之后，可以直接将修改持久化到本地的文件，再也不用复制粘贴了。</p>
<p>其他用法见官方介绍：<a href="https://developers.google.com/web/tools/setup/setup-workflow" target="_blank" rel="external">https://developers.google.com/web/tools/setup/setup-workflow</a></p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/12/ways-to-debug-js-files-online/" data-id="cjdbnol4p00074w6vg4nh0ogd" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/12/ways-to-debug-js-files-online/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">JS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/debugging/">debugging</a></li></ul>
</footer>
</div>
</article>
<article id="post-ways-to-convert-tabs-to-spaces" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/08/ways-to-convert-tabs-to-spaces/" class="article-date">
<time datetime="2016-08-20T10:15:46.000Z" itemprop="datePublished">2016-08-20</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/08/ways-to-convert-tabs-to-spaces/">将文件内的 tab 转化为空格</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>tab 与 space 孰好孰坏这个问题是程序界的圣战之一。StackExchange 旗下的 programmers 就有关于这个问题的 <a href="http://programmers.stackexchange.com/questions/57/tabs-versus-spaces-what-is-the-proper-indentation-character-for-everything-in-e" target="_blank" rel="external">讨论</a> , 没有必要大打出手，倒是可以了解下各种情况下使用这两者的差异及各自的优势。不过本篇不准备讨论这个问题，本篇只想解决日常开发中的需求：将 tab 转化为空格。</p>
<p>总结了一下，大概有以下几种思路：</p>
<ol>
<li>通过程序进行替换</li>
<li>通过重定向输入替换，生成新文件</li>
</ol>
<p>第一个思路适合大批量的替换，也适合大文件的替换，第二个思路实际上是读取文件替换后生成新文件，和第一种差别其实不大，但是很多软件支持指定参数，就非常适合通过管道及重定向来进行替换了。</p>
<h2 id="通过 -vim"><a href="# 通过 -vim" class="headerlink" title="通过 vim"></a>通过 vim</h2><h3 id="通过配置去格式化"><a href="# 通过配置去格式化" class="headerlink" title="通过配置去格式化"></a>通过配置去格式化 </h3><p> 在 ~/.vimrc 中加入以下配置</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">set tabstop=4 set shiftwidth=4 set expandtab</span><br></pre></td></tr></table></figure>
<p>打开要格式化的文件，运行 <code>:retab</code> 即可格式化。</p>
<p>或者一行搞定：<code>:set tabstop=4 shiftwidth=4 expandtab | :retab</code></p>
<p>这种配置方式对所有的文件都生效，如果需要添加例外，添加下面的配置即可 <code>autocmd FileType make setlocal noexpandtab</code> FileType 后接文件类型名称。</p>
<p>这种方式是通过配置的方式来格式化文本，定制性比较高。</p>
<h3 id="通过正则替换"><a href="# 通过正则替换" class="headerlink" title="通过正则替换"></a>通过正则替换 </h3><p> 打开文件，直接运行下面的命令即可：<code>:%s/\t/ /g</code> 。</p>
<h2 id="通过 -expand"><a href="# 通过 -expand" class="headerlink" title="通过 expand"></a>通过 expand</h2><p>由于 expand 是通过读取文件或标准输入并重定向至标准输出，故要达到更改的效果，需重新写入原文件。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">expand -t <span class="number">4</span> input > output <span class="comment"># 间隔默认为 8</span></span><br></pre></td></tr></table></figure>
<h2 id="通过 -col"><a href="# 通过 -col" class="headerlink" title="通过 col"></a>通过 col</h2><p>原理同 expand ：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat -vt tab_file | col -x > output</span><br></pre></td></tr></table></figure>
<h2 id="通过 -sed"><a href="# 通过 -sed" class="headerlink" title="通过 sed"></a>通过 sed</h2><p>大杀器登场，通过 sed 来处理文本替换这种事情无疑是科学有效又简洁的姿势。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sed -iE <span class="string">'s/\t/ /g'</span> file <span class="comment"># 从头换到底</span></span><br></pre></td></tr></table></figure>
<hr>
<p>不过在我看来，为什么这么做，比怎么做到更有价值，网上的讨论还是很多的，在我看来最主要的是习惯问题，以及涉及到团队合作时，统一格式及风格，再就是涉及到文件交换及接口约定时，使用符合特定领域约定俗成的规范。基本就是这样的原则。</p>
<p>看看西乔给的问卷及统计结果 <a href="http://mp.weixin.qq.com/s?__biz=MzAxMzMxNDIyOA==&mid=216031001&idx=2&sn=977df68e90ebce478fe0c14ffc33530b&scene=1&srcid=08209I9tmAKiZMwzhAfEIwUx#rd" target="_blank" rel="external">缩进圣战的统计结果</a> 。</p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/08/ways-to-convert-tabs-to-spaces/" data-id="cjdbnol6v000c4w6v620twjau" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/08/ways-to-convert-tabs-to-spaces/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/bash/">bash</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/tab/">tab</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vim/">vim</a></li></ul>
</footer>
</div>
</article>
<article id="post-brogue-of-nanrenwa" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/08/brogue-of-nanrenwa/" class="article-date">
<time datetime="2016-08-10T14:47:58.000Z" itemprop="datePublished">2016-08-10</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/life/">life</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/08/brogue-of-nanrenwa/">男人袜布洛克牛皮鞋，买买买</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>我喜欢 <a href="http://t.cn/RZ9OcKw">男人袜</a> 的产品，他们给我带来了惊喜和良好的体验，以及不错的产品。我会向我的朋友们推荐它。</p>
<p class="article-more-link">
<a href="/2016/08/brogue-of-nanrenwa/">阅读全文</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/08/brogue-of-nanrenwa/" data-id="cjdbnolit005k4w6v7paxxr1i" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/08/brogue-of-nanrenwa/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/brogue/">brogue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/nanrenwa/">nanrenwa</a></li></ul>
</footer>
</div>
</article>
<article id="post-configure-xdebug-in-phpstorm" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/configure-xdebug-in-phpstorm/" class="article-date">
<time datetime="2016-07-01T08:04:05.000Z" itemprop="datePublished">2016-07-01</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/php/">PHP</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/07/configure-xdebug-in-phpstorm/">在 PHPStorm 中配置 Xdebug</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>在 <a href="/2016/01/using-json-viewer-for-debugging/">使用 Chrome 扩展程序 JSON Viewer 进行调试</a> 这片文章中我曾介绍过，使用 <code>echo json_encode()</code> 的方式进行调试，再配合 Chrome 浏览器插件 <del>JSON Viewer</del> (建议使用 JSON Handler 代替)。</p>
<h2 id="调试方式的对比"><a href="# 调试方式的对比" class="headerlink" title="调试方式的对比"></a>调试方式的对比 </h2><p> 手动调试的方式实际上局限性很大，缺点很明显：</p>
<ol>
<li>复杂的程序变量的中间状态无法跟踪，只能得到最终结果</li>
<li>要 debug 的变量或者对象较多时不方便打印</li>
<li>调试代码与程序代码混杂在一起，容易出错，而且来回切换成本还挺高，效率上就低多了</li>
</ol>
<p>上面的缺点中，</p>
<p>1 可以通过 Xdebug 的单步调试解决，通过打断点，一步步追踪，可以深入某个 function 或者一步步执行，来查看变量的整个状态变化。</p>
<p>2 这个缺点可以通过 <code>error_log()</code> 函数写入文件中，再配合 <code>tail -f log_file</code> 来调试，当然在 Xdebug 中也能一步步查看变量状态。</p>
<p>3 也是我决定用 Xdebug 的原因，打断点很方便管理，不用的断点暂时反选，这样可以在需要启用时启用，而且无需写调试代码，这种调试方式是非侵入式的。</p>
<h2 id="开发中的痛点及思考"><a href="# 开发中的痛点及思考" class="headerlink" title="开发中的痛点及思考"></a>开发中的痛点及思考 </h2><p> 以上是我在开发过程中遇到的痛点，而解决方法很简单：</p>
<ol>
<li>类与类之间低耦合，这样可以将 bug 缩小范围，且代码也更健壮，方便后续修改</li>
<li><a href="https://en.wikipedia.org/wiki/SOLID_(object-oriented_design" target="_blank" rel="external">SOLID 原则</a></li>
<li>引入单元测试覆盖大部分的功能及类的测试</li>
</ol>
<p>其中 2 是需要在类的设计上下功夫的，需要长时间的代码编写与逐步改善，1 则可以使用设计模式来解决，3 则可以让你将注意力放在各个功能的衔接点上，通过上面的三个方法，基本能解决平常的小 bug 了。</p>
<p>下面来介绍 debug 工具 Xdebug ，并介绍如何在 PHPStorm 中配置使用。</p>
<h2 id="Xdebug- 的安装与配置"><a href="#Xdebug- 的安装与配置" class="headerlink" title="Xdebug 的安装与配置"></a>Xdebug 的安装与配置</h2><p>Xdebug 有很多安装的方式，这个页面 <a href="https://xdebug.org/docs/install" target="_blank" rel="external">https://xdebug.org/docs/install</a> 给出了常用的安装方式。 另外有个更好的页面，给出了一步步的步骤，<a href="https://xdebug.org/wizard.php" target="_blank" rel="external">https://xdebug.org/wizard.php</a> ，会告诉你如何编译安装指定的版本。</p>
<p>安装步骤如下：</p>
<ol>
<li>下载对应的 Xdebug 压缩包；</li>
<li><p>编译</p>
<figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> /path/to/xdebug</span><br><span class="line">phpize</span><br><span class="line">./configure</span><br><span class="line">make</span><br></pre></td></tr></table></figure>
</li>
<li><p>复制 so 文件到扩展目录</p>
</li>
<li><p>修改 php.ini 加上以下配置</p>
<figure class="highlight"><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">[Xdebug]</span><br><span class="line">zend_extension = /path/to/extensions/xdebug.so</span><br><span class="line">xdebug.remote_enable=1</span><br><span class="line">xdebug.profiler_enable=1</span><br><span class="line">xdebug.remote_port=9000</span><br><span class="line">xdebug.profiler_output_dir= /tmp/xdebug</span><br></pre></td></tr></table></figure>
</li>
</ol>
<blockquote>
<p>phpize 命令是用来准备 PHP 扩展库的编译环境的。</p>
</blockquote>
<p>使用 <code>php -m</code> 查看扩展是否加载，再重启 php-fpm 。</p>
<p>下面介绍如何在 PHPStorm 中集成 Xdebug 。</p>
<h2 id="PHPStorm- 里配置 -Xdebug"><a href="#PHPStorm- 里配置 -Xdebug" class="headerlink" title="PHPStorm 里配置 Xdebug"></a>PHPStorm 里配置 Xdebug</h2><p>PHPStorm 文档里介绍了如何配置 Xdebug <a href="https://www.jetbrains.com/help/phpstorm/10.0/configuring-xdebug.html" target="_blank" rel="external">https://www.jetbrains.com/help/phpstorm/10.0/configuring-xdebug.html</a></p>
<p>介绍下几个主要的步骤：</p>
<ol>
<li>设置 PHP 解释器。位于 Preferences > Languages & Frameworks > PHP 右侧的 Interpreter ，点击 … 按钮，设置本地的 PHP 环境</li>
<li><p>配置 Xdebug 的行为。</p>
<ol>
<li>配置 <strong>Debug Port</strong> ，让其与 php.ini 中的 <code>xdebug.remote_port</code>端口号相同。</li>
<li>接收 Xdebug 与 PHPStorm 的连接，<strong>Can accept external connections</strong></li>
</ol>
</li>
<li><p>监听外部的 debug 连接，开启这个选项 <strong>Run | Start Listening for PHP debug connections</strong></p>
</li>
</ol>
<p>通过上面的配置，就可以在 PHPStorm 运行 Xdebug 了。不过这还不够，需要配置具体的项目，这样 Xdebug 才知道如何运行，并在指定的断点处停止并通知 PHPStorm 。</p>
<h2 id="配置实例运行具体的 -debug- 项目"><a href="# 配置实例运行具体的 -debug- 项目" class="headerlink" title="配置实例运行具体的 debug 项目"></a>配置实例运行具体的 debug 项目 </h2><p> 下图中显示了如何配置某个 debug 项目。</p>
<p><img src="//blog.jayxhj.com/images/add-debug-configuration.png" alt="debug configuration"></p>
<p>选择 <strong>PHP Web Application</strong> 即可配置某个 web 项目，设置项目的 url 及当前配置的名称即可。</p>
<p>以上这些步骤走完，一个 web 项目的 Xdebug 配置就做好了，只需设置断点，再点击 Run -> Debug ‘你的 debug 项目名称’ ，即可开始 debug 之旅了。</p>
<p>Enjoy it.</p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/07/configure-xdebug-in-phpstorm/" data-id="cjdbnolic00574w6v30wk3da7" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/07/configure-xdebug-in-phpstorm/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/">PHP</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/xdebug/">Xdebug</a></li></ul>
</footer>
</div>
</article>
<article id="post-post-array-data-in-php-curl" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/post-array-data-in-php-curl/" class="article-date">
<time datetime="2016-06-03T02:42:03.000Z" itemprop="datePublished">2016-06-03</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/php/">PHP</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/post-array-data-in-php-curl/">PHP 发起 curl POST 请求时传递数组</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 使用 PHP 的 curl 可以发起 HTTP 外部请求，但是发起 POST 请求时，是无法直接传递数组的，从 curl 层面来说，也没有所谓的数组的概念，而更加通用也更合理的传递数据的格式其实是键值对（key value pair）。</p>
<p> 那么，我们先得知道，为什么要传递数组。</p>
<p>HTTP 协议规定了 HTTP 请求的三个部分：状态行、请求头、消息主体。消息主体实际上是没有规定格式的。平常主要用到的几个请求头 Content-Type 为 </p>
<figure class="highlight markdown"><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></pre></td><td class="code"><pre><span class="line">application/x-www-form-urlencoded</span><br><span class="line">multipart/form-data</span><br><span class="line">application/json</span><br><span class="line">text/xml</span><br></pre></td></tr></table></figure>
<p> 所以问题的答案很明白了，传递什么样的数据类型得看需要发送什么样的请求。</p>
<p> 一个典型的 curl POST 请求是下面这样：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -X POST --data <span class="string">'params[]=check1&params[]=check2'</span> <span class="string">'http://jayxhj.com/test/curl.php'</span></span><br></pre></td></tr></table></figure>
<p> 上面的请求将发送一个 Content-Type 为 application/x-www-form-urlencoded 的请求，请求的 body 为 <code>params[]=check1&params[]=check2</code> ，在服务端，只需使用 <code>$_POST</code> 即可获取。</p>
<p> 那么回到 curl ，我们只需设置 option 为 <strong>CURLOPT_POSTFIELDS</strong> 的 VALUE 为 key/value pair ，即可将数组以字符串的形式传递至服务端，并直接由 <code>$_POST</code> 获取。</p>
<figure class="highlight php"><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></pre></td><td class="code"><pre><span class="line"><span class="preprocessor"><?php</span></span><br><span class="line"><span class="variable">$curl</span> = curl_init();</span><br><span class="line"></span><br><span class="line">curl_setopt(<span class="variable">$curl</span>, CURLOPT_URL, <span class="string">'http://jayxhj.com/test/curl.php'</span>);</span><br><span class="line">curl_setopt(<span class="variable">$curl</span>, CURLOPT_HEADER, <span class="number">0</span>);</span><br><span class="line">curl_setopt(<span class="variable">$curl</span>, CURLOPT_RETURNTRANSFER, <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable">$array</span> = [</span><br><span class="line"> <span class="string">'jayxhj'</span>,</span><br><span class="line"> <span class="string">'pt'</span></span><br><span class="line">];</span><br><span class="line"><span class="variable">$str</span> = http_build_query(<span class="variable">$array</span>);</span><br><span class="line"></span><br><span class="line">curl_setopt(<span class="variable">$curl</span>, CURLOPT_POSTFIELDS, <span class="variable">$str</span>);</span><br><span class="line"><span class="variable">$data</span> = curl_exec(<span class="variable">$curl</span>);</span><br><span class="line"></span><br><span class="line">curl_close(<span class="variable">$curl</span>);</span><br><span class="line"></span><br><span class="line">var_dump(<span class="variable">$data</span>);</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/06/post-array-data-in-php-curl/" data-id="cjdbnolbi002b4w6vrmbxata0" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/06/post-array-data-in-php-curl/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/curl/">curl</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/">php</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/tips/">tips</a></li></ul>
</footer>
</div>
</article>
<article id="post-jayxhjs-chrome-extensions" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/05/jayxhjs-chrome-extensions/" class="article-date">
<time datetime="2016-05-26T08:27:35.000Z" itemprop="datePublished">2016-05-26</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/05/jayxhjs-chrome-extensions/">常用 Chrome 扩展介绍及使用</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Chrome 浏览器和 Firefox 浏览器为何大受欢迎，其中一个重要原因就是因为有数量巨大的扩展库，而 360 之类的浏览器内核也是基于 Chromium 内核和 IE 内核，因为这些扩展，可以让应用（浏览器就是应用）的功能变得无比丰富和强大。</p>
<p>这篇文章会列举本人平常使用的插件，并介绍常用的用法，但由于扩展使用的主观性太强，每个人都有不同的偏好，所以此篇会把重点放在扩展的使用上，并会不定时更新。扩展排名不分先后。</p>
<p>每个扩展介绍会包含其简要介绍，下载地址及基本用法，默认给出的是 Chrome webstore 的下载地址，如果有托管在 GitHub 会给出其托管地址。</p>
<h2 id="Avatars-for-Github"><a href="#Avatars-for-Github" class="headerlink" title="Avatars for Github"></a>Avatars for Github</h2><p>一句话介绍：在 GitHub feed 页展示你关注人的头像。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/avatars-for-github/pgjmdbklnfklcjfbonjfkdhaonlfogbb" target="_blank" rel="external">https://chrome.google.com/webstore/detail/avatars-for-github/pgjmdbklnfklcjfbonjfkdhaonlfogbb</a></p>
<p>开发者网站：<a href="https://github.com/anasnakawa/chrome-github-avatars" target="_blank" rel="external">https://github.com/anasnakawa/chrome-github-avatars</a></p>
<p><img src="//blog.jayxhj.com/images/GitHub-feed-before.png" alt="GitHub-feed-before"></p>
<p><img src="//blog.jayxhj.com/images/GitHub-feed-before.png" alt="GitHub-feed-after"></p>
<h2 id="Axure-RP-Extension-for-Chrome"><a href="#Axure-RP-Extension-for-Chrome" class="headerlink" title="Axure RP Extension for Chrome"></a>Axure RP Extension for Chrome</h2><p>一句话介绍：web 版的 Axure 客户端。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/dogkpdfcklifaemcdfbildhcofnopogp" target="_blank" rel="external">https://chrome.google.com/webstore/detail/dogkpdfcklifaemcdfbildhcofnopogp</a></p>
<p>开发者网站：<a href="http://www.axure.com/" target="_blank" rel="external">http://www.axure.com/</a></p>
<p>使用：安装此插件后，即可在不安装 Axure 下的情况下，打开原型，直接在浏览器中运行。</p>
<h2 id="Chrome-Sniffer-Plus"><a href="#Chrome-Sniffer-Plus" class="headerlink" title="Chrome Sniffer Plus"></a>Chrome Sniffer Plus</h2><p>一句话介绍：网页下的类库探测器。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh" target="_blank" rel="external">https://chrome.google.com/webstore/detail/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh</a></p>
<p>开发者网站：<a href="http://justjavac.com/" target="_blank" rel="external">http://justjavac.com/</a></p>
<p>使用：探测当前网页正在使用的开源软件或者 JS 类库。其实一个网站或者应用，技术栈一般会涉及到很多的技术，这个扩展可以检测一些基本的开源类库，作为日常的探测够用了。</p>
<h2 id="hosts 文件管理工具"><a href="#hosts 文件管理工具" class="headerlink" title="hosts 文件管理工具"></a>hosts 文件管理工具 </h2><p> 一句话介绍：host 管理及切换工具。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/kpfmckjjpabojdhlncnccfhkfhbmnjfi" target="_blank" rel="external">https://chrome.google.com/webstore/detail/kpfmckjjpabojdhlncnccfhkfhbmnjfi</a></p>
<p>开发者网站：<a href="https://github.com/gbk/chrome-hosts-manager" target="_blank" rel="external">https://github.com/gbk/chrome-hosts-manager</a></p>
<p>使用：主要用来进行 ip 与 host 之间的绑定，另外可以对域名 ip 进行分组，非常适合用来进行切换环境。另外一个主要功能就是显示当前 ip ，在没有挂代理的情况下，可以显示当前页面的服务器 ip 。</p>
<p><img src="//blog.jayxhj.com/images/chrome-hosts-manager.jpg" alt="显示当前页面 ip"></p>
<h2 id="JSON-Editor"><a href="#JSON-Editor" class="headerlink" title="JSON Editor"></a>JSON Editor</h2><p>一句话介绍：JSON 在线解析及编辑器。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/lhkmoheomjbkfloacpgllgjcamhihfaj" target="_blank" rel="external">https://chrome.google.com/webstore/detail/lhkmoheomjbkfloacpgllgjcamhihfaj</a></p>
<p>开发者网站：<a href="http://jsoneditoronline.org/" target="_blank" rel="external">http://jsoneditoronline.org/</a></p>
<p>使用：<a href="http://jsoneditoronline.org/" target="_blank" rel="external">http://jsoneditoronline.org/</a> 的 chrome 扩展版本，可以用来修改 JSON 数据，并实时验证 JSON 数据的合法性，构造复杂的 JSON 数组、对象、字符串。</p>
<h2 id="JSONView"><a href="#JSONView" class="headerlink" title="JSONView"></a>JSONView</h2><p>一句话介绍：JSON 查看器。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc" target="_blank" rel="external">https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc</a></p>
<p>开发者网站：<a href="https://github.com/gildas-lormeau/JSONView-for-Chrome" target="_blank" rel="external">https://github.com/gildas-lormeau/JSONView-for-Chrome</a></p>
<p>使用：适合用来查看 JSON ，但是由于在解析当前页面时，如果发现是 JSON ，会再次请求一次页面，所以不适合查看、测试对多次请求结果不一致的 api 。之前写过一篇文章，介绍的就是 <a href="/2016/01/using-json-viewer-for-debugging/">使用 JSONView 配合进行 Debug</a> 。</p>
<h2 id="OneTab"><a href="#OneTab" class="headerlink" title="OneTab"></a>OneTab</h2><p>一句话介绍：可以节省 95% 内存使用的标签页管理工具。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/chphlpgkkbolifaimnlloiipkdnihall" target="_blank" rel="external">https://chrome.google.com/webstore/detail/chphlpgkkbolifaimnlloiipkdnihall</a></p>
<p>开发者网站：<a href="http://one-tab.com/" target="_blank" rel="external">http://one-tab.com/</a></p>
<p>用法：使用 OneTab 可以将暂时不需要处理的网页集中到一起，大大减小 Chrome 吃内存的问题。使用它可以对网页进行分组，可以随意更改标签页顺序，能分享自己的标签页给他人，并且让人放心的是，即使关闭浏览器，或者重启电脑， OneTab 里的内容还在，可以放心地使用，开发团队表示，后续将引入云端功能，保持多设备的同步，大快人心。使用 <code>Alt + Shift + 1</code> 即可呼出 OneTab 。</p>
<h2 id="Proxy-SwitchyOmega"><a href="#Proxy-SwitchyOmega" class="headerlink" title="Proxy SwitchyOmega"></a>Proxy SwitchyOmega</h2><p>一句话介绍：代理管理及切换工具。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/padekgcemlokbadohgkifijomclgjgif" target="_blank" rel="external">https://chrome.google.com/webstore/detail/padekgcemlokbadohgkifijomclgjgif</a></p>
<p>开发者网站：<a href="https://github.com/FelisCatus/SwitchyOmega" target="_blank" rel="external">https://github.com/FelisCatus/SwitchyOmega</a></p>
<h2 id="Search-by-Image-by-Google"><a href="#Search-by-Image-by-Google" class="headerlink" title="Search by Image (by Google)"></a>Search by Image (by Google)</h2><p>一句话介绍：Google 搜图工具。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/search-by-image-by-google/dajedkncpodkggklbegccjpmnglmnflm" target="_blank" rel="external">https://chrome.google.com/webstore/detail/search-by-image-by-google/dajedkncpodkggklbegccjpmnglmnflm</a></p>
<p>开发者网站：<a href="https://chrome.google.com/webstore/category/ext/15-by-google" target="_blank" rel="external">https://chrome.google.com/webstore/category/ext/15-by-google</a></p>
<p>使用：选中某个图片，右键，点击 <strong>Search Google with this image</strong>，即可搜索与此图类似的图片。其实就是调用的 Google Images 的服务。国内百度的 <a href="http://image.baidu.com/" target="_blank" rel="external">以图搜图</a> 做的也挺不错。</p>
<h2 id="Wikiwand-Wikipedia-Modernized"><a href="#Wikiwand-Wikipedia-Modernized" class="headerlink" title="Wikiwand: Wikipedia Modernized"></a>Wikiwand: Wikipedia Modernized</h2><p>一句话介绍：更美的维基百科。</p>
<p>地址：<a href="http://www.wikiwand.com/#/install" target="_blank" rel="external">http://www.wikiwand.com/#/install</a></p>
<p>开发者网站：<a href="http://www.wikiwand.com/" target="_blank" rel="external">http://www.wikiwand.com/</a></p>
<h2 id="印象笔记·剪藏"><a href="# 印象笔记·剪藏" class="headerlink" title="印象笔记·剪藏"></a>印象笔记·剪藏 </h2><p> 一句话介绍： 智能归类、剪辑、收藏、悦读并提供关键字搜索功能的印象笔记工具。</p>
<p>地址：<a href="https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc" target="_blank" rel="external">https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc</a></p>
<p>开发者网站：<a href="http://evernote.com/" target="_blank" rel="external">http://evernote.com/</a></p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/05/jayxhjs-chrome-extensions/" data-id="cjdbnold6003p4w6vk8mrq95j" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/05/jayxhjs-chrome-extensions/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/chrome/">chrome</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/extensions/">extensions</a></li></ul>
</footer>
</div>
</article>
<article id="post-basic-composer-package-development" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/05/basic-composer-package-development/" class="article-date">
<time datetime="2016-05-13T07:28:41.000Z" itemprop="datePublished">2016-05-13</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/php/">PHP</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/05/basic-composer-package-development/">动手开发自己的第一个 composer 包</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>composer 是 PHP 的依赖管理工具，本篇文章就来说明如何构建一个包，并提交到 <a href="https://packagist.org/" target="_blank" rel="external">Packagist</a> ，这样别人就可以方便地通过 composer 使用你的包了。</p>
<p>开发 composer 包有以下几个步骤：</p>
<ol>
<li>初始化 composer.json 文件</li>
<li>定义命名空间及包名</li>
<li>实现包需要实现的功能</li>
<li>提交到 GitHub</li>
<li>在 Packagist 注册包</li>
</ol>
<h2 id="初始化 -composer-json- 文件"><a href="# 初始化 -composer-json- 文件" class="headerlink" title="初始化 composer.json 文件"></a>初始化 composer.json 文件 </h2><p> 安装好 composer 后即可在本地运行 <code>composer init</code> 通过交互式命令行设置 composer.json 。</p>
<p>下面介绍其中的几个属性，以及常规的设置：</p>
<ol>
<li>name<br><br>此属性定义包名，以 <code>/</code> 隔开，前面的为供应商名字，后面为包名，供应商代表 Packagist 网站为开发者提供的唯一的名字，用来组织包以及防止命名冲突。所以提交时最好先访问 <a href="https://packagist.org/packages/yourvendorname" target="_blank" rel="external">https://packagist.org/packages/yourvendorname</a> 将 url 中的 yourvendorname 替换为你想要取的名字，如果页面没有 404 ，说明已经被注册了。</li>
<li>license<br><br>许可证。关于许可证，建议看两篇文章，<a href="http://choosealicense.com/" target="_blank" rel="external">开源项目 license 介绍 </a> 、<a href="http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html" target="_blank" rel="external"> 如何选择 license</a></li>
<li>require<br><br>安装当前包所需的依赖。只有所有依赖被安装当前包才会被安装。</li>
<li>autoload<br><br>此配置下主要是 <strong>PSR-4</strong> 或者 <strong>PSR-0</strong> 设置，更推荐使用 PSR-4 标准。</li>
</ol>
<p><a href="http://json-schema.org/" target="_blank" rel="external">http://json-schema.org/</a> 上介绍了 JSON Schema 的定义以及各个语言对其各种功能的实现，有 validator 的实现，其中 <a href="http://www.jsonschemavalidator.net/" target="_blank" rel="external">JSON Schema Validator</a> 是在线的验证服务。其实最简单的就是使用 <code>composer validate composer.json</code> 来验证文件是否是有错误。</p>
<p>这是我演示的设置 composer.json 的视频</p>
<script type="text/javascript" src="https://asciinema.org/a/45460.js" id="asciicast-45460" async>
</script>
<h2 id="项目结构"><a href="# 项目结构" class="headerlink" title="项目结构"></a>项目结构 </h2><p> 以我开发的 <a href="https://packagist.org/packages/geosso/geosso" target="_blank" rel="external">单点登录 SDK</a> 为例，此项目基于 Laravel ，实现了站点接入单点登录系统的简单接入，应用只需在服务端注册并实现指定接口，即可接入 SSO 。</p>
<p>项目结构是典型的 MVC 结构，</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">. └── geo └── geosso ├── LICENSE ├── README.md ├── composer.json └── src ├── Contracts ├── Http │ ├── Controllers │ ├── Middleware │ └── Requests ├── ParamsBean ├── Providers ├── Support └── config 12 directories</span><br></pre></td></tr></table></figure>
<p>LICENSE、README.md 及 composer.json 是运行 <code>tree -d</code> 之后手工添加上去的。</p>
<p>项目根目录定义在 src 下，在 composer.json 中也有定义，这样当 composer 加载这个包时就知道如何通过命名空间去解析文件路径。</p>
<p>Http 目录代表请求响应，之下的 Controllers 表示合法请求的控制器，Middleware 代表请求的第一道关卡，通过中间件去拦截请求，Requests 去获取前端请求并对请求过滤。</p>
<p>Contracts 代表接口定义。ParamsBean 代表应用层与底层服务沟通时的参数封装，通过 Bean 去获取各个参数，而不是传递 array 使得调用一致，并且强制接口调用时做类型检测，可以很大程度上统一各层之间的参数传递。</p>
<p>Providers 代表 Laravel 的服务容器，通过服务容器，可以注册路由与配置，加载助手类，绑定接口与其实现。</p>
<p>Support 就是一些助手类，对常用的与逻辑无关的功能的封装，config 代表应用自己的配置，通过 config 可以方便地将配置设置并使用全局函数 <code>config()</code> 调用。</p>
<h2 id="提交至 -GitHub"><a href="# 提交至 -GitHub" class="headerlink" title="提交至 GitHub"></a>提交至 GitHub</h2><p>按照前面的步骤，一个包就有了基本的骨架，接下来就是上传至 GitHub ，配置项目，集成持续集成服务，发布开源项目许可证。</p>
<p>GitHub 初始化项目时可以选择生成 .gitignore 文件，选择许可证，初始化 README.md 文件，切换至本地的项目目录后，按如下步骤即可将目录上传至 GitHub：</p>
<figure class="highlight bash"><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">>git init <span class="comment"># 初始化仓库</span></span><br><span class="line">>git remote <span class="built_in">set</span>-url origin --push --add git@github.com:jayxhj/geosso.git <span class="comment"># 添加远程追踪仓库地址</span></span><br><span class="line">> git add .</span><br><span class="line">> git commit</span><br><span class="line">> git push origin master</span><br></pre></td></tr></table></figure>
<h2 id="提交至 -Packagist"><a href="# 提交至 -Packagist" class="headerlink" title="提交至 Packagist"></a>提交至 Packagist</h2><p>Packagist 为 composer 默认获取包元数据信息的地址，从 Packagist 获取到元数据信息后，再从 GitHub 上拉取代码。因此，当把你开发的包上传至 GitHub 后还需要将其在 Packagist 注册，这样全世界的人都能通过 composer 去拉去你的代码了。</p>
<p>提交至 Packagist 只需三个步骤：</p>
<ol>
<li>注册帐号</li>
<li>在 <a href="https://packagist.org/packages/submit" target="_blank" rel="external">https://packagist.org/packages/submit</a> 提交开发包</li>
<li>设置 webhook 以便提交包更新后能及时地同步至 Packagist</li>
</ol>
<p>自此，一个基本的包开发就结束了。通过 composer 来管理 PHP 的依赖，通过编写 composer package 去扩展自己的类库，通过引入其他的类库来填充自己的功能，就不用重复造轮子了。</p>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/05/basic-composer-package-development/" data-id="cjdbnolix005r4w6vcn76pdyv" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/05/basic-composer-package-development/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/">PHP</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/composer/">composer</a></li></ul>
</footer>
</div>
</article>
<article id="post-get-week-number-in-month-from-date-in-php" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/get-week-number-in-month-from-date-in-php/" class="article-date">
<time datetime="2016-04-26T11:44:42.000Z" itemprop="datePublished">2016-04-26</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/php/">php</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/get-week-number-in-month-from-date-in-php/">获取当前日期在本月的第几周</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="获取当前日期在本月的第几周"><a href="# 获取当前日期在本月的第几周" class="headerlink" title="获取当前日期在本月的第几周"></a>获取当前日期在本月的第几周 </h1><p> 使用 <strong>date()</strong> 函数可以获取某个日期的当前星期数，此星期数为当前日期在一整年中的星期数。假如要获取当前日期在当前月份的星期数，只需用当前日期的星期数减去当前月份第一天的星期数加 1 即可。</p>
<h2 id="获取当前日期的星期数"><a href="# 获取当前日期的星期数" class="headerlink" title="获取当前日期的星期数"></a>获取当前日期的星期数</h2><figure class="highlight php"><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"><span class="preprocessor"><?php</span></span><br><span class="line"><span class="keyword">echo</span> date(<span class="string">'W'</span>,time());</span><br></pre></td></tr></table></figure>
<h2 id="获取当前日期是本月的第几周"><a href="# 获取当前日期是本月的第几周" class="headerlink" title="获取当前日期是本月的第几周"></a>获取当前日期是本月的第几周</h2><figure class="highlight php"><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"><span class="preprocessor"><?php</span></span><br><span class="line"><span class="comment">/**</span><br><span class="line"> * <span class="doctag">@param</span> int $date 时间戳</span><br><span class="line"> * <span class="doctag">@return</span> int 当前日期在本月的第几周</span><br><span class="line"> *</span><br><span class="line"> * */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">weekOfMonth</span><span class="params">(<span class="variable">$date</span>)</span> </span>{</span><br><span class="line"> <span class="variable">$firstOfMonth</span> = strtotime(date(<span class="string">"Y-m-01"</span>, <span class="variable">$date</span>));</span><br><span class="line"> <span class="keyword">return</span> intval(date(<span class="string">"W"</span>, <span class="variable">$date</span>)) - intval(date(<span class="string">"W"</span>, <span class="variable">$firstOfMonth</span>)) + <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/04/get-week-number-in-month-from-date-in-php/" data-id="cjdbnolfv004m4w6vzs1pb4nu" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/04/get-week-number-in-month-from-date-in-php/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/">php</a></li></ul>
</footer>
</div>
</article>
<article id="post-lumen-tricks" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/04/lumen-tricks/" class="article-date">
<time datetime="2016-04-09T14:09:26.000Z" itemprop="datePublished">2016-04-09</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/php/">PHP</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/lumen-tricks/">Lumen 常用开发技巧</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="密码加密与验证"><a href="# 密码加密与验证" class="headerlink" title="密码加密与验证"></a>密码加密与验证 </h1><p> 加密</p>
<figure class="highlight php"><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"><span class="preprocessor"><?php</span></span><br><span class="line"><span class="comment">/**</span><br><span class="line">* 密码入库加密</span><br><span class="line">* <span class="doctag">@param</span> string $password</span><br><span class="line">* <span class="doctag">@return</span> string</span><br><span class="line">*</span><br><span class="line">* */</span></span><br><span class="line"><span class="keyword">public</span> <span class="function"><span class="keyword">function</span> <span class="title">passwordEncrypt</span><span class="params">(<span class="variable">$password</span>)</span></span><br><span class="line"></span>{</span><br><span class="line"> <span class="keyword">return</span> app(<span class="string">'hash'</span>)->make(<span class="variable">$password</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>密码验证</p>
<figure class="highlight php"><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="preprocessor"><?php</span></span><br><span class="line"><span class="comment">/**</span><br><span class="line">* 密码验证</span><br><span class="line">* <span class="doctag">@param</span> string $password</span><br><span class="line">* <span class="doctag">@param</span> string $hashedPassword 加密后的密码</span><br><span class="line">* <span class="doctag">@return</span> bool</span><br><span class="line">*</span><br><span class="line">* */</span></span><br><span class="line"><span class="keyword">public</span> <span class="function"><span class="keyword">function</span> <span class="title">passwordValidate</span><span class="params">(<span class="variable">$password</span>, <span class="variable">$hashedPassword</span>)</span></span><br><span class="line"></span>{</span><br><span class="line"> <span class="keyword">return</span> app(<span class="string">'hash'</span>)->check(<span class="variable">$password</span>, <span class="variable">$hashedPassword</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="查询数据库判断是否有记录"><a href="# 查询数据库判断是否有记录" class="headerlink" title="查询数据库判断是否有记录"></a>查询数据库判断是否有记录 </h2><p> 如果使用 Eloquent 的 <a href="https://laravel.com/docs/5.2/eloquent#query-scopes" target="_blank" rel="external">Query Scopes</a> ，查询时使用链式方法调用，通常是这么查询，<code>$modelObj = Model::id($id)->get()</code> 来查询指定条件的结果集。但是这么查出来的，实际上返回的是 <code>Illuminate\Support\Collection</code> 对象。那么下面的方法，比较适合判断查出来的结果是否存在。</p>
<figure class="highlight php"><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"><span class="preprocessor"><?php</span></span><br><span class="line"><span class="variable">$modelObj</span> = Model::id(<span class="variable">$id</span>)->get();</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (! <span class="variable">$modelObj</span>->isEmpty()) {</span><br><span class="line"> <span class="variable">$modelObj</span>->toArray();</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 或者这样</span></span><br><span class="line"><span class="keyword">if</span> (<span class="variable">$modelObj</span>->count()) {</span><br><span class="line"> <span class="variable">$modelObj</span>->toArray();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://blog.jayxhj.com/2016/04/lumen-tricks/" data-id="cjdbnolcf00384w6vgvvqulcc" class="article-share-link">分享</a>
<a href="http://blog.jayxhj.com/2016/04/lumen-tricks/#disqus_thread" class="article-comment-link">留言</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/lumen/">lumen</a></li></ul>
</footer>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">…</span><a class="page-number" href="/page/5/">5</a><a class="extend next" rel="next" href="/page/2/">下一页 »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">最近文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2018/02/migrate-images-from-qiniu-to-github/">把图床从七牛迁移到 GitHub</a>
</li>
<li>
<a href="/2016/12/ways-to-debug-js-files-online/">调试线上 JS 的几种姿势</a>
</li>
<li>
<a href="/2016/08/ways-to-convert-tabs-to-spaces/">将文件内的 tab 转化为空格</a>
</li>
<li>
<a href="/2016/08/brogue-of-nanrenwa/">男人袜布洛克牛皮鞋，买买买</a>
</li>
<li>
<a href="/2016/07/configure-xdebug-in-phpstorm/">在 PHPStorm 中配置 Xdebug</a>
</li>
<li>
<a href="/2016/06/post-array-data-in-php-curl/">PHP 发起 curl POST 请求时传递数组</a>
</li>
<li>
<a href="/2016/05/jayxhjs-chrome-extensions/">常用 Chrome 扩展介绍及使用</a>
</li>
<li>
<a href="/2016/05/basic-composer-package-development/">动手开发自己的第一个 composer 包</a>
</li>
<li>
<a href="/2016/04/get-week-number-in-month-from-date-in-php/">获取当前日期在本月的第几周</a>
</li>
<li>
<a href="/2016/04/lumen-tricks/">Lumen 常用开发技巧</a>
</li>
</ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">标签云</h3>
<div class="widget tagcloud">
<a href="/tags/aop/" style="font-size: 13.33px;">AOP</a> <a href="/tags/annotation/" style="font-size: 10px;">Annotation</a> <a href="/tags/apache/" style="font-size: 10px;">Apache</a> <a href="/tags/aspectj/" style="font-size: 10px;">Aspectj</a> <a href="/tags/dao，action，service/" style="font-size: 10px;">DAO，ACTION，SERVICE</a> <a href="/tags/git/" style="font-size: 10px;">Git</a> <a href="/tags/http/" style="font-size: 10px;">HTTP</a> <a href="/tags/hibernate/" style="font-size: 10px;">Hibernate</a> <a href="/tags/js/" style="font-size: 10px;">JS</a> <a href="/tags/master/" style="font-size: 10px;">Master</a> <a href="/tags/mysql/" style="font-size: 16.67px;">MySQL</a> <a href="/tags/oracle/" style="font-size: 13.33px;">Oracle</a> <a href="/tags/php/" style="font-size: 20px;">PHP</a> <a href="/tags/php5-5/" style="font-size: 10px;">PHP5.5</a> <a href="/tags/sqlexception/" style="font-size: 10px;">SQLException</a> <a href="/tags/slave/" style="font-size: 10px;">Slave</a> <a href="/tags/xdebug/" style="font-size: 10px;">Xdebug</a> <a href="/tags/bash/" style="font-size: 13.33px;">bash</a> <a href="/tags/blog/" style="font-size: 10px;">blog</a> <a href="/tags/brogue/" style="font-size: 10px;">brogue</a> <a href="/tags/chrome/" style="font-size: 10px;">chrome</a> <a href="/tags/composer/" style="font-size: 10px;">composer</a> <a href="/tags/curl/" style="font-size: 10px;">curl</a> <a href="/tags/debugging/" style="font-size: 10px;">debugging</a> <a href="/tags/email/" style="font-size: 10px;">email</a> <a href="/tags/exit-code/" style="font-size: 10px;">exit code</a> <a href="/tags/extensions/" style="font-size: 10px;">extensions</a> <a href="/tags/google搜索技巧/" style="font-size: 10px;">google搜索技巧</a> <a href="/tags/header/" style="font-size: 10px;">header()</a> <a href="/tags/index/" style="font-size: 10px;">index</a> <a href="/tags/instantclient/" style="font-size: 10px;">instantclient</a> <a href="/tags/jsp路径/" style="font-size: 10px;">jsp路径</a> <a href="/tags/laravel/" style="font-size: 10px;">laravel</a> <a href="/tags/lumen/" style="font-size: 13.33px;">lumen</a> <a href="/tags/markdown/" style="font-size: 10px;">markdown</a> <a href="/tags/mb-strcut/" style="font-size: 10px;">mb_strcut()</a> <a href="/tags/mb-substr/" style="font-size: 10px;">mb_substr()</a> <a href="/tags/nanrenwa/" style="font-size: 10px;">nanrenwa</a> <a href="/tags/php/" style="font-size: 16.67px;">php</a> <a href="/tags/quote/" style="font-size: 10px;">quote</a> <a href="/tags/shell/" style="font-size: 10px;">shell</a> <a href="/tags/spring/" style="font-size: 10px;">spring</a> <a href="/tags/tab/" style="font-size: 10px;">tab</a> <a href="/tags/timezone/" style="font-size: 10px;">timezone</a> <a href="/tags/tips/" style="font-size: 10px;">tips</a> <a href="/tags/vim/" style="font-size: 10px;">vim</a> <a href="/tags/web/" style="font-size: 10px;">web</a> <a href="/tags/技能/" style="font-size: 10px;">技能</a> <a href="/tags/无法转化为内部格式/" style="font-size: 10px;">无法转化为内部格式</a> <a href="/tags/术语/" style="font-size: 10px;">术语</a> <a href="/tags/杏林地儿/" style="font-size: 10px;">杏林地儿</a> <a href="/tags/核心价值/" style="font-size: 10px;">核心价值</a> <a href="/tags/求职/" style="font-size: 13.33px;">求职</a> <a href="/tags/网页跳转/" style="font-size: 10px;">网页跳转</a> <a href="/tags/迁移/" style="font-size: 10px;">迁移</a> <a href="/tags/面试/" style="font-size: 10px;">面试</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">2018 年 02 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">2016 年 12 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">2016 年 08 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">2016 年 07 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">2016 年 06 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/05/">2016 年 05 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">2016 年 04 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">2016 年 03 月</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/02/">2016 年 02 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/01/">2016 年 01 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/12/">2015 年 12 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">2015 年 09 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/08/">2014 年 08 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/07/">2014 年 07 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">2014 年 05 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">2014 年 03 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">2013 年 11 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">2013 年 09 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">2013 年 08 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">2013 年 05 月</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/04/">2013 年 04 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">2013 年 03 月</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/02/">2013 年 02 月</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">2013 年 01 月</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/12/">2012 年 12 月</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">2012 年 11 月</a><span class="archive-list-count">1</span></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">朋友们</h3>
<div class="widget">
<ul>
<li>
<a href="http://ceix.top/" target="_blank">顺流而下，把梦做完。</a>
</li>
<li>
<a href="http://likangjun.com/" target="_blank">嗨军</a>
</li>
<li>
<a href="http://www.ecli2h.net/" target="_blank">张辉 | Ecli2h</a>
</li>
<li>
<a href="http://www.aishan100.com/" target="_blank">艾山 | S & J</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2018 jayxhj<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">历史文章</a>
<a href="https://github.com/jayxhj" class="mobile-nav-link">GitHub</a>
</nav>
<script>
var disqus_shortname = 'githubiojayxhj';
(function(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<script src="//apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="/js/script.js" type="text/javascript"></script>
</div>
</body>
</html>