-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1077 lines (679 loc) · 113 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
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>前端自由者</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="最可怕的生活不是今天不知道明天怎样，而是现在就看到了自己一生的全部，而且无法改变。">
<meta property="og:type" content="website">
<meta property="og:title" content="前端自由者">
<meta property="og:url" content="http://farmanyu.github.io/index.html">
<meta property="og:site_name" content="前端自由者">
<meta property="og:description" content="最可怕的生活不是今天不知道明天怎样，而是现在就看到了自己一生的全部，而且无法改变。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端自由者">
<meta name="twitter:description" content="最可怕的生活不是今天不知道明天怎样，而是现在就看到了自己一生的全部，而且无法改变。">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
<script type='text/javascript'>window._ty_rum||function(t){function e(t){switch(typeof t){case"object":if(!t)return"null";if(t instanceof Array){for(var r="[",n=0;n<t.length;n++)r+=(n>0?",":"")+e(t[n]);return r+"]"}var r="{",n=0;for(var a in t)if("function"!=typeof t[a]){var o=e(t[a]);r+=(n>0?",":"")+e(a)+":"+o,n++}return r+"}";case"string":return'"'+t.replace(/([\"\\])/g,"\\$1")+'"';case"number":return t.toString();case"boolean":return t?"true":"false";case"function":return"[function]";case"undefined":default:return"undefined"}}function r(e){return t.encodeURIComponent?encodeURIComponent(e):e}function n(){return Date.now?Date.now():(new Date).valueOf()}function a(t){return function(t,e){}}function o(){b.initend()}function i(){"complete"===y.readyState&&b.initend()}function s(t){function e(){b.send()}return v.load_time?!0:(b.initend(),v.load_time=n(),void(9===t?e():setTimeout(e,0)))}function u(){E||s(9),E=1}function c(){b.touch||(b.touch=n())}function f(t){var e=arguments,r="unknown",a=[n()];if(0!=e.length){if("string"==typeof t){var o=e.length<4?e.length:4;a[1]=e[0],o>2&&(a[2]=e[2],a[3]=0,a[4]=e[1]),o>3&&e[3]&&(a[3]=e[3])}else if(t instanceof Event&&(a[1]=t.message||(t.error&&t.error.constructor.name)+(t.error&&t.error.message)||"",a[2]=t.lineno?t.lineno:0,a[3]=t.colno?t.colno:0,a[4]=t.filename||t.error&&t.error.fileName||t.target&&t.target.baseURI||"",a[4]==y.URL&&(a[4]="#"),a[1]===r&&a[4]===r))return;b.errors.push(a)}}function d(t,e,r){for(var n="o."+e+"(",a=0;a<r.length;a++)n+=(a>0?",":"")+"a["+a+"]";return n+=");",new Function(n)()}function l(t){return function(){var e=arguments;if(!this._ty_wrap){var r=T.args.apply(this,e);this._ty_rum={method:r[0],url:r[1],start:n()}}try{return t.apply(this,e)}catch(a){return this.open=t,d(this,"open",e)}}}function h(e){return"string"==typeof e?e.length:t.ArrayBuffer&&e instanceof ArrayBuffer?e.byteLength:t.Blob&&e instanceof Blob?e.size:e&&e.length?e.length:0}function p(e){return function(){function r(t){var e,r,a=c._ty_rum;if(a){if(4!==a.readyState&&(a.end=n()),a.s=c.status,""==c.responseType||"text"==c.responseType)a.res=h(c.responseText);else if(c.response)a.res=h(c.response);else try{a.res=h(c.responseText)}catch(i){a.res=0}if(a.readyState=c.readyState,a.cb_time=f,e=[a.method+" "+a.url,a.s>0?a.end-a.start:0,f,a.s,a.s>0?0:t,a.res,a.req],a.r&&(r=o(c),r&&(r=r.xData)&&(e.push(r.id),e.push(r.action),e.push(r.time&&r.time.duration),e.push(r.time&&r.time.qu))),v.aa.push(e),v.server.custom_urls&&v.server.custom_urls.length&&!b.ct){if(!v.pattern){v.pattern=[];for(var s=0;s<v.server.custom_urls.length;s++)v.pattern.push(new RegExp(v.server.custom_urls[s]))}for(var s=0;s<v.pattern.length;s++)if(a.url.match(v.pattern[s])){b.ct=a.end+f;break}}b.sa(),c._ty_rum=null}}function a(){4==c.readyState&&r(0)}function o(e){var r;if(e.getResponseHeader){var n=T.parseJSON(e.getResponseHeader("X-Tingyun-Tx-Data"));n&&n.r&&e._ty_rum&&n.r+""==e._ty_rum.r+""&&(r={name:e._ty_rum.url,xData:n},w&&t._ty_rum.c_ra.push(r))}return r}function i(t){return function(){var e;4==c.readyState&&c._ty_rum&&(c._ty_rum.end=e=n(),c._ty_rum.readyState=4);var r=t.apply(this,arguments);return 4==c.readyState&&(f=n()-e),a(),r}}function s(t){return function(){var e=c._ty_rum;return e?"progress"==t?!0:("abort"==t?r(905):"loadstart"==t?e.start=n():"error"==t?r(990):"timeout"==t&&r(903),!0):!0}}function u(t,e){e instanceof Array||(e=[e]);for(var r=0;r<e.length;r++){var n=e[r];T.sh(t,n,s(n),!1)}}if(!this._ty_wrap){this._ty_rum.start=n(),this._ty_rum.req=arguments[0]?h(arguments[0]):0;var c=this,f=0,l=T.wrap(!1,this,"onreadystatechange",i);l||T.sh(this,"readystatechange",a,!1),u(this,["error","progress","abort","load","loadstart","loadend","timeout"]),l||setTimeout(function(){T.wrap(!1,c,"onreadystatechange",i)},0)}var p=function(){function t(t){var e={},r=/^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?/.exec(t);return r&&(e.protocol=r[1]?r[1]+":":"http:",e.hostname=r[3],e.port=r[4]||""),e}return function(e){var r=location;if(e=T.trim(e)){if(e=e.toLowerCase(),e.startsWith("//")&&(e=r.protocol+e),!e.startsWith("http"))return!0;var n=t(e),a=n.protocol===r.protocol&&n.hostname===r.hostname;return a&&(a=n.port===r.port?!0:!r.port&&("http:"===r.protocol&&"80"===n.port||"https:"===r.protocol&&"443"===n.port)),a}return!1}}(),m=arguments;try{try{var y=v.server;y&&y.id&&this._ty_rum&&p(this._ty_rum.url)&&(this._ty_rum.r=(new Date).getTime()%1e8,this.setRequestHeader&&this.setRequestHeader("X-Tingyun-Id",y.id+";r="+this._ty_rum.r))}catch(g){}return e.apply(this,m)}catch(g){return this.send=e,d(this,"send",m)}}}var m=t.XMLHttpRequest,y=document,v=t._ty_rum={st:n(),ra:[],c_ra:[],aa:[],snd_du:function(){return this.server.adu?1e3*this.server.adu:1e4},cc:function(){return this.server.ac?this.server.ac:10}};var ty_rum=v;ty_rum.server = {id:'sHhT9G5G0I8',beacon:'beacon.tingyun.com',beacon_err:'beacon-err.tingyun.com',key:'nfXygaUNX1o',trace_threshold:7000,custom_urls:[],sr:1.0};if(v.server&&!(v.server.sr&&Math.random()>=v.server.sr)){var g=String.prototype.trim;String.prototype.startsWith||(String.prototype.startsWith=function(t,e){return e=e||0,this.indexOf(t,e)===e});var _=/^http/i,S=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return t()+"-"+t()+t()}(),T={wrap:function(t,e,r,n,a){try{var o=e[r]}catch(i){if(!t)return!1}if(!o&&!t)return!1;if(o&&o._ty_wrap)return!1;try{e[r]=n(o,a)}catch(i){return!1}return e[r]._ty_wrap=[o],!0},mkurl:function(t,e){var a=arguments,o=/^https/i.test(y.URL)?"https":"http";if(o=o+"://"+t+"/"+e+"?av=1.0.0&v=1.3.1&key="+r(v.server.key)+"&ref="+r(y.URL)+"&rand="+n()+"&pvid="+S,"pf"!==e&&v&&v.agent&&v.agent.n&&(o+="&n="+r(v.agent.n)),a.length>2){var i=a[2];for(var s in i)o+="&"+s+"="+i[s]}return o},GET:function(t,e){function r(){e&&e.apply(this,arguments),n.parentNode&&n.parentNode.removeChild(n)}if(navigator&&navigator.sendBeacon&&_.test(t))return navigator.sendBeacon(t,null);var n=y.createElement("img");return n.setAttribute("src",t),n.setAttribute("style","display:none"),this.sh(n,"readystatechange",function(){("loaded"==n.readyState||4==n.readyState)&&r("loaded")},!1),this.sh(n,"load",function(){return r("load"),!0},!1),this.sh(n,"error",function(){return r("error"),!0},!1),y.body.appendChild(n)},fpt:function(t,e,r){function n(t,e,r){var n=y.createElement(t);try{for(var a in e)n[a]=e[a]}catch(o){var i="<"+t;for(var a in e)i+=" "+a+'="'+e[a]+'"';i+=">",r||(i+="</"+t+">"),n=y.createElement(i)}return n}var a=n("div",{style:"display:none"},!1),o=n("iframe",{name:"_ty_rum_frm",width:0,height:0,style:"display:none"},!1),i=n("form",{style:"display:none",action:t,enctype:"application/x-www-form-urlencoded",method:"post",target:"_ty_rum_frm"},!1),s=n("input",{name:"data",type:"hidden"},!0);return s.value=e,i.appendChild(s),a.appendChild(o),a.appendChild(i),y.body.appendChild(a),i.submit(),o.onreadystatechange=function(){("complete"===o.readyState||4===o.readyState)&&(r(null,o.innerHTML),y.body.removeChild(a))},!0},POST:function(e,r,n,a){if(this.ie)return this.fpt(e,r,a);if(navigator&&navigator.sendBeacon&&_.test(e))return navigator.sendBeacon(e,r);var o;if(t.XDomainRequest)return o=new XDomainRequest,o.open("POST",e),o.onload=function(){a(null,o.responseText)},this.sh(o,"load",function(){a(null,o.responseText)},!1),this.sh(o,"error",function(){a("POST("+e+")error")},!1),this.wrap(!0,o,"onerror",function(t){return function(){return a&&a("post error",o.responseText),!0}}),o.send(r),!0;if(!m)return!1;o=new m,o.overrideMimeType&&o.overrideMimeType("text/html");try{o._ty_wrap=1}catch(i){}var s=0;o.onreadystatechange=function(){4==o.readyState&&200==o.status&&(0==s&&a(null,o.responseText),s++)},o.onerror&&this.wrap(!0,o,"onerror",function(t){return function(){return a("post error",o.responseText),"function"==typeof t?t.apply(this,arguments):!0}});try{o.open("POST",e,!0)}catch(i){return this.fpt(e,r,a)}for(var u in n)o.setRequestHeader(u,n[u]);return o.send(r),!0},sh:function(t,e,r,n){return t.addEventListener?t.addEventListener(e,r,n):t.attachEvent?t.attachEvent("on"+e,r):!1},args:function(){for(var t=[],e=0;e<arguments.length;e++)t.push(arguments[e]);return t},stringify:e,parseJSON:function(e){if(e&&"string"==typeof e){var r=t.JSON?t.JSON.parse:function(t){return new Function("return "+t)()};return r(e)}return null},trim:g?function(t){return null==t?"":g.call(t)}:function(t){return null==t?"":t.toString().replace(/^\s+/,"").replace(/\s+$/,"")}},w=t.performance?t.performance:t.Performance;w&&(T.sh(w,"resourcetimingbufferfull",function(){var t=w.getEntriesByType("resource");t&&(v.ra=v.ra.concat(t),w.clearResourceTimings())},!1),T.sh(w,"webkitresourcetimingbufferfull",function(){var t=w.getEntriesByType("resource");t&&(v.ra=v.ra.concat(t),w.webkitClearResourceTimings())},!1));for(var b=v.metric={ready:function(){return v.load_time},initend:function(){function t(){b.sa()}v.end_time||(v.end_time=n(),this._h=setInterval(t,2e3))},send:function(){function n(){function e(t){return a[t]>0?a[t]-s:0}var n={};if(w&&w.timing){var a=w.timing;s=a.navigationStart;var o=e("domainLookupStart"),i=e("domainLookupEnd"),u=e("redirectStart"),c=e("redirectEnd"),f=e("connectStart"),d=e("connectEnd");n={f:e("fetchStart"),qs:e("requestStart"),rs:e("responseStart"),re:e("responseEnd"),os:e("domContentLoadedEventStart"),oe:e("domContentLoadedEventEnd"),oi:e("domInteractive"),oc:e("domComplete"),ls:e("loadEventStart"),le:e("loadEventEnd")},d-f>0&&(n.cs=f,n.ce=d),i-o>0&&(n.ds=o,n.de=i),(c-u>0||c>0)&&(n.es=u,n.ee=c),0==n.le&&(n.ue=v.load_time-s);var l;if(a.msFirstPaint)l=a.msFirstPaint;else if(t.chrome&&chrome.loadTimes){var h=chrome.loadTimes();h&&h.firstPaintTime&&(l=1e3*h.firstPaintTime)}else v.firstPaint&&(l=v.firstPaint);l&&(n.fp=Math.round(l-s)),a.secureConnectionStart&&(n.sl=e("secureConnectionStart"))}else n={t:s,os:v.end_time-s,ls:v.load_time-s};n.je=b.errors.length,b.ct&&(n.ct=b.ct-s),b.touch&&(n.fi=b.touch-s);var p=v.agent;return p&&(n.id=r(p.id),n.a=p.a,n.q=p.q,n.tid=r(p.tid),n.n=r(p.n)),n}function o(e){var r=t._ty_rum.c_ra;if(e)for(var n=r.length-1;n>=0;n--)if(e.indexOf(r[n].name)>-1)return r[n].xData;return null}function i(t){function e(t){return f[t]>0?f[t]:0}if(t<v.server.trace_threshold)return null;var n=w;if(n&&n.getEntriesByType){var a={tr:!0,tt:r(y.title),charset:y.characterSet},i=v.ra,u=n.getEntriesByType("resource");u&&(i=i.concat(u),n.webkitClearResourceTimings&&n.webkitClearResourceTimings(),n.clearResourceTimings&&n.clearResourceTimings()),a.res=[];for(var c=0;c<i.length;c++){var f=i[c],d={o:e("startTime"),rt:f.initiatorType,n:f.name,f:e("fetchStart"),ds:e("domainLookupStart"),de:e("domainLookupEnd"),cs:e("connectStart"),ce:e("connectEnd"),sl:e("secureConnectionStart"),qs:e("requestStart"),rs:e("responseStart"),re:e("responseEnd")},l=o(f.name);l&&(d.aid=l.id,d.atd=l.trId,d.an=l.action,d.aq=l.time&&l.time.qu,d.as=l.time&&l.time.duration),a.res.push(d)}if(b.errors.length){a.err=[];for(var c=0,h=b.errors;c<h.length;c++)a.err.push({o:Math.round(h[c][0]-s),e:h[c][1],l:h[c][2],c:h[c][3],r:h[c][4]})}return a}return null}if(this.sended)return!1;if(!this.ready())return!1;var s=v.st,u={};try{pf=n(),u=i(pf.ls>0?pf.ls:v.load_time-s)}catch(c){}u=u?T.stringify(u):"";var f=T.mkurl(v.server.beacon,"pf",pf);if(0!=u.length&&T.POST(f,u,{},a("POST"))||T.GET(f),this.errors.length>0){var c=b.errors[0];T.GET(T.mkurl(v.server.beacon_err,"err",{data:r(e([c[1],c[2],c[3],"#"==c[4]?y.URL:c[4],b.errors.length]))}),a("GET err"))}return this.sended=!0,this.sa(1),!0},sa:function(t){(this.ready()||t)&&(t||(t=!this._last_send||n()-this._last_send>v.snd_du()||v.aa.length>=v.cc()),v.aa.length>0&&t&&(this._last_send=n(),T.POST(T.mkurl(v.server.beacon,"xhr"),T.stringify({xhr:v.aa}),{},a("POST")),v.aa=[]))},errors:[]},E=null,R=[["load",s],["beforeunload",u],["pagehide",u],["unload",u],["error",f]],x=0;x<R.length;x++)T.sh(t,R[x][0],R[x][1],!1);for(var q=[["scroll",c],["keypress",c],["click",c],["DOMContentLoaded",o],["readystatechange",i]],x=0;x<q.length;x++)T.sh(y,q[x][0],q[x][1],!1);if(T.wrap(!1,t,"requestAnimationFrame",function(e){return function(){return v.firstPaint=n(),t.requestAnimationFrame=e,e.apply(this,arguments)}}),m)if(m.prototype)T.wrap(!1,m.prototype,"open",l),T.wrap(!1,m.prototype,"send",p);else{T.ie=7;var C=m;t.XMLHttpRequest=function(){var t=new C;return T.wrap(!1,t,"open",l),T.wrap(!1,t,"send",p),t}}else t.ActiveXObject&&(T.ie=6);}}(window);</script>
<body>
<div id="container">
<div class="left-col">
<div class="overlay"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img lazy-src="https://avatars2.githubusercontent.com/u/741048?v=3&s=460" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">Farman</a></h1>
</hgroup>
<div class="switch-btn">
<div class="icon">
<div class="icon-ctn">
<div class="icon-wrap icon-house" data-idx="0">
<div class="birdhouse"></div>
<div class="birdhouse_holes"></div>
</div>
<div class="icon-wrap icon-ribbon hide" data-idx="1">
<div class="ribbon"></div>
</div>
<div class="icon-wrap icon-me hide" data-idx="3">
<div class="user"></div>
<div class="shoulder"></div>
</div>
</div>
</div>
<div class="tips-box hide">
<div class="tips-arrow"></div>
<ul class="tips-inner">
<li>菜单</li>
<li>标签</li>
<li>关于我</li>
</ul>
</div>
</div>
<div class="switch-area">
<div class="switch-wrap">
<section class="switch-part switch-part1">
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags/life">生活</a></li>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/FarmanYu" title="github">github</a>
<a class="weibo" target="_blank" href="http://weibo.com/gghongfei" title="weibo">weibo</a>
<a class="rss" target="_blank" href="/#" title="rss">rss</a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/farman-6" title="zhihu">zhihu</a>
</div>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<a href="/tags/canvas/" style="font-size: 10px;">canvas</a> <a href="/tags/child-process/" style="font-size: 10px;">child_process</a> <a href="/tags/css3/" style="font-size: 10px;">css3</a> <a href="/tags/frontend/" style="font-size: 17.14px;">frontend</a> <a href="/tags/game/" style="font-size: 11.43px;">game</a> <a href="/tags/git/" style="font-size: 12.86px;">git</a> <a href="/tags/gulp/" style="font-size: 10px;">gulp</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/html5/" style="font-size: 12.86px;">html5</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/js/" style="font-size: 15.71px;">js</a> <a href="/tags/life/" style="font-size: 20px;">life</a> <a href="/tags/linux/" style="font-size: 10px;">linux</a> <a href="/tags/mac/" style="font-size: 10px;">mac</a> <a href="/tags/node/" style="font-size: 14.29px;">node</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/rss/" style="font-size: 10px;">rss</a> <a href="/tags/soft/" style="font-size: 10px;">soft</a> <a href="/tags/tools/" style="font-size: 18.57px;">tools</a>
</div>
</section>
<section class="switch-part switch-part3">
<div id="js-aboutme">最可怕的生活不是今天不知道明天怎样，而是现在就看到了自己一生的全部，而且无法改变。</div>
</section>
</div>
</div>
</header>
</div>
</div>
<div class="mid-col">
<nav id="mobile-nav">
<div class="overlay">
<div class="slider-trigger"></div>
<h1 class="header-author js-mobile-header hide">Farman</h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img lazy-src="https://avatars2.githubusercontent.com/u/741048?v=3&s=460" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author">Farman</h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tags/life">生活</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/FarmanYu" title="github">github</a>
<a class="weibo" target="_blank" href="http://weibo.com/gghongfei" title="weibo">weibo</a>
<a class="rss" target="_blank" href="/#" title="rss">rss</a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/farman-6" title="zhihu">zhihu</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap">
<article id="post-frontend-learning" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/14/frontend-learning/" class="article-date">
<time datetime="2016-03-14T01:32:16.000Z" itemprop="datePublished">2016-03-14</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/14/frontend-learning/">前端工程师的学习规划</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h1 id="u80CC_u666F"><a href="#u80CC_u666F" class="headerlink" title="背景"></a>背景</h1><p>总结前端学习的经验和知识点，提供给新人学习，已经有前端经验的同学提高.</p>
<h1 id="u524D_u7AEF_u5404_u65B9_u5411_u5B66_u4E60_u89C4_u5212"><a href="#u524D_u7AEF_u5404_u65B9_u5411_u5B66_u4E60_u89C4_u5212" class="headerlink" title="前端各方向学习规划"></a>前端各方向学习规划</h1><p>加粗的需要重点掌握</p>
<h3 id="u539F_u751FJS"><a href="#u539F_u751FJS" class="headerlink" title="原生JS"></a>原生JS</h3><ul>
<li><strong>了解JS中的各种对象的含义 (Array、 String、Number、 RegExp、Function、Object、NULL、undefined、NaN)</strong></li>
<li><strong>了解JS中的各种运算符 (+、-、/、*、~、!、|、||、&、&&、%、[]、{}、=、>、<)</strong></li>
<li><strong>熟悉并学会使用 Array、 String、Number、 RegExp、Function、Object 的原生方法</strong></li>
<li><strong>掌握JS Dom相关API,（增、删、替换、复制等）</strong></li>
<li>掌握JS对象的简单克隆和深度克隆</li>
<li>掌握JS对象的类型转换</li>
<li><strong>掌握JS中的各类原生事件，以及事件代理</strong></li>
<li><strong>了解JS中的prototype属性的作用</strong></li>
<li><strong>熟悉JS中如何实现类，并了解实现继承的几种方法</strong></li>
<li><strong>熟悉this在各种场景下的所代表的含义</strong></li>
<li><strong>熟悉常用框架的API（代表框架: <a href="http://underscorejs.org/" target="_blank" rel="external">underscore</a> \ <a href="https://github.com/jquery/jquery" target="_blank" rel="external">jQuery</a> \ <a href="https://github.com/wycats/handlebars.js" target="_blank" rel="external">handlebarsjs</a> \ <a href="https://github.com/nolimits4web/Swiper" target="_blank" rel="external">swiper</a> )</strong></li>
<li>熟悉JS中的各种设计模式，熟练使用几种设计模式（单例模式、工厂模式等），知道不同场景如何选择使用不同的设计模式。</li>
<li>熟悉JS中的模块化（模块化: CMD \ AMD）,以及几个代表性的框架的使用 <a href="http://seajs.org/docs/" target="_blank" rel="external">seajs</a>、<a href="http://www.requirejs.cn/" target="_blank" rel="external">requirejs</a>、<a href="https://github.com/fex-team/mod" target="_blank" rel="external">modjs</a>.</li>
</ul>
<h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><ul>
<li>了解CSS各种属性的含义</li>
<li><strong>了解页面主流布局实现方式. (左右等分，左右定宽中自由，左定宽右自由，12等分页面，自由组合布局)</strong></li>
<li><strong>了解CSS sprite的原理和实现方式</strong></li>
<li><strong>了解各大主流浏览器的CSS差别和css hack，能写出兼容各类浏览器的CSS.</strong></li>
<li>了解CSS font的原理和实现方式.</li>
<li>了解CSS3新增的各类属性含义.</li>
<li><strong>了解CSS3 flex布局原理.</strong></li>
<li>了解CSS3动画原理，会使用一些常用CSS动画</li>
<li>了解CSS动画和JS相结合的框架</li>
<li>掌握前端动画技巧，熟悉动画原理，知道常用的JS/CSS动画库，了解各类动画库原理并使用</li>
<li>掌握sass,less,stylus等css构建语言，并会使用</li>
</ul>
<h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><ul>
<li><strong>了解HTML语意化，并知道在合适的位置正确使用</strong></li>
<li>了解HTML5新的标签和新特性</li>
<li>掌握canvas绘图</li>
<li>掌握localStorage本地数据存储</li>
<li>掌握HTML5多媒体标签的使用(audio、video)</li>
<li>掌握各类标签属性的含义</li>
</ul>
<h3 id="u6D41_u7A0B_u6784_u5EFA_u5DE5_u5177"><a href="#u6D41_u7A0B_u6784_u5EFA_u5DE5_u5177" class="headerlink" title="流程构建工具"></a>流程构建工具</h3><ul>
<li>了解前端为什么需要流程构建工具，要解决的问题是什么</li>
<li><strong>掌握 <a href="https://github.com/gruntjs/grunt" target="_blank" rel="external">Grunt</a>\ <a href="https://github.com/gulpjs/gulp" target="_blank" rel="external">Gulp</a> 这类流程构建工具的原理并使用</strong></li>
<li><strong>掌握 <a href="https://github.com/webpack/webpack" target="_blank" rel="external">webpack</a> \ <a href="http://fis.baidu.com" target="_blank" rel="external">fis</a> 这类前端集成解决方案的原理并使用</strong></li>
<li>知道选择各类流程构建为自己的项目做项目构建</li>
<li>熟悉使用babel将es6代码转换到es5，放到浏览器运行</li>
</ul>
<h3 id="u524D_u7AEF_u6846_u67B6_u53CA_u6269_u5C55"><a href="#u524D_u7AEF_u6846_u67B6_u53CA_u6269_u5C55" class="headerlink" title="前端框架及扩展"></a>前端框架及扩展</h3><ul>
<li>了解前端各类开发模式，完成从面向过程编程到面向对象编程的转变</li>
<li><strong>了解使用MVC模式开发，代表框架 <a href="https://github.com/jashkenas/backbone" target="_blank" rel="external">Backbone</a>.</strong></li>
<li><strong>了解使用MVVM模式开发，代表框架 <a href="https://github.com/angular/angular" target="_blank" rel="external">angularjs</a>、<a href="https://github.com/facebook/react" target="_blank" rel="external">React</a>、<a href="https://github.com/vuejs/vue" target="_blank" rel="external">Vue</a>.</strong></li>
<li>熟悉组件化开发优势，知道 React\Vue\angularjs 中几种开发模式.</li>
<li>熟悉各类框架的组件编写方式.</li>
<li>会使用npm来管理各种前端模块.</li>
<li>掌握<a href="https://github.com/facebook/react-native" target="_blank" rel="external">React-Native</a>, <a href="https://github.com/driftyco/ionic" target="_blank" rel="external">ionic</a>，<a href="https://github.com/dcloudio/mui" target="_blank" rel="external">mui</a>，<a href="http://www.html5plus.org/doc/zh_cn/android.html" target="_blank" rel="external">native.js</a>, <a href="http://phonegap.com/" target="_blank" rel="external">phonegap</a>等工具和框架原理</li>
</ul>
<h3 id="Hybird"><a href="#Hybird" class="headerlink" title="Hybird"></a>Hybird</h3><ul>
<li>了解Hybrid App原理</li>
<li>了解Hybrid和正常H5页面的区别</li>
<li><strong>熟练掌握bridge js的原理以及使用(先熟悉公司的bridgejs)</strong></li>
<li>掌握开发调试Hybrid页面的技巧</li>
</ul>
<h3 id="Node"><a href="#Node" class="headerlink" title="Node"></a>Node</h3><ul>
<li>了解Node的运行环境, 熟悉window, Linux/Unix下不同的运行原理</li>
<li>了解Node与浏览器JS不同的各类全局变量(<a href="https://nodejs.org/dist/latest-v5.x/docs/api/process.html" target="_blank" rel="external">process</a>, <a href="https://nodejs.org/dist/latest-v5.x/docs/api/globals.html" target="_blank" rel="external">golbal</a> )</li>
<li>了解Node中各类对象的含义（如: <a href="https://nodejs.org/dist/latest-v5.x/docs/api/buffer.html" target="_blank" rel="external">Buffer</a>, Events）</li>
<li>了解CommonJs规范，熟悉JS模块化的含义</li>
<li><strong>知道通过<a href="http://nodejs.org" target="_blank" rel="external">node官网</a>来查看API返回</strong></li>
<li>了解并会使用Node常用框架和类库（如: <a href="https://github.com/expressjs/express" target="_blank" rel="external">express</a>, <a href="http://socket.io/" target="_blank" rel="external">sockit.io</a>, <a href="https://github.com/koajs/koa" target="_blank" rel="external">koa</a>, <a href="https://github.com/tj/co" target="_blank" rel="external">co</a> ）</li>
<li><strong>熟悉nodejs的开发和调试技巧</strong></li>
<li>熟悉使用node搭建简单http服务器</li>
<li><strong>熟练使用express框架，并使用来搭建网站</strong></li>
<li>熟练使用其他第三方库来辅助网站开发</li>
<li>会使用npm来管理各种模块，了解需要使用的模块源代码</li>
</ul>
<h3 id="u5DE5_u5177"><a href="#u5DE5_u5177" class="headerlink" title="工具"></a>工具</h3><ul>
<li><strong>熟练掌握Chrome调试工具.</strong></li>
<li><strong>熟悉Photoshop切图, 并会使用Photoshop制作css sprite.</strong></li>
<li><strong>熟练使用svn\git等版本管理工具</strong></li>
<li><strong>熟悉各类编辑器(vim, sublime, webstorm)，并掌握自己最常用编辑器的各类插件扩展（语法高亮、代码提示等插件）</strong></li>
<li>熟悉Github的使用，会找到其他人写的优秀代码来借鉴.</li>
<li>了解shell常用命令，会配置Nginx.</li>
<li>掌握Markdown等语言，熟练编写各类文档文章.</li>
<li>熟悉各类平台的辅助开发工具</li>
<li>了解前端的前沿技术，会搭建简单demo并运行，会比较各类工具优势劣势，以及使用场景</li>
</ul>
<h3 id="u5408_u4F5C_u5F00_u53D1"><a href="#u5408_u4F5C_u5F00_u53D1" class="headerlink" title="合作开发"></a>合作开发</h3><ul>
<li>了解开发过程中代码流向，由 本地电脑 -> 开发服务器 -> 测试服务器 -> 预发布服务器 -> 线上服务器.</li>
<li><strong>掌握浏览器cookie的读写，了解http-only的含义</strong></li>
<li><strong>熟悉前后端调试的原理，知道怎么和后端程序员进行调试，知道熟悉怎么本地mock</strong></li>
<li><strong>熟悉整个项目的发布部署原理，知道本地代码和编译后代码的区别.</strong></li>
<li>了解CDN原理，指导CDN的带来的好处和弊端，会发布代码到CDN.</li>
</ul>
<h3 id="u8BED_u8A00_u6269_u5C55"><a href="#u8BED_u8A00_u6269_u5C55" class="headerlink" title="语言扩展"></a>语言扩展</h3><ul>
<li>熟练使用 <a href="https://babeljs.io/docs/learn-es2015/" target="_blank" rel="external">es6</a> 语法，掌握es6语法带来的代码变化</li>
<li>了解flash语法以及编写</li>
<li>了解php\python\java语法，会使用编写简单功能</li>
<li>更深入其他语言语法.</li>
</ul>
<h2 id="u524D_u7AEF_u4E66_u7C4D_u63A8_u8350"><a href="#u524D_u7AEF_u4E66_u7C4D_u63A8_u8350" class="headerlink" title="前端书籍推荐"></a>前端书籍推荐</h2><p>参考如下链接:</p>
<blockquote>
<p><a href="https://www.zhihu.com/question/19809484" target="_blank" rel="external">知乎大神的整理</a><br><a href="https://github.com/lisposter/frontend-books" target="_blank" rel="external">github上其他人整理</a></p>
</blockquote>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css3/">css3</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/frontend/">frontend</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li><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/node/">node</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-mac-tools" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/02/29/mac-tools/" class="article-date">
<time datetime="2016-02-29T10:20:00.000Z" itemprop="datePublished">2016-02-29</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/02/29/mac-tools/">这些生产力 OS X APP 帮助我提供工作效率</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h4 id="u5199_u5728_u524D_u9762"><a href="#u5199_u5728_u524D_u9762" class="headerlink" title="写在前面"></a>写在前面</h4><p>使用 MacBook Pro 也2年多了，慢慢地积累了一些工作中好用的 APP，帮助自己更高效的工作。正版化也一直在进行着，除了 IDE 用的是教育版订阅之外，其他已经都是正版了（但我不排除 License 授权不支持工作用），力所能及的支持正版吧，毕竟自己也是软件开发从业者。</p>
<h4 id="u66F4_u65B0_u65E5_u5FD7"><a href="#u66F4_u65B0_u65E5_u5FD7" class="headerlink" title="更新日志"></a>更新日志</h4><blockquote>
<p>2016.02.29 - 整理常用的生产力 APP</p>
</blockquote>
<h4 id="APP__u5408_u96C6"><a href="#APP__u5408_u96C6" class="headerlink" title="APP 合集"></a>APP 合集</h4><p>每个 APP 对应一段简单的描述，数量还不多，就暂时不分类了，大概的排一下。</p>
<ul>
<li>Dropbox - 云存储服务，用来同步代码及本机一些开发配置，需要科学上网才可使用</li>
<li>iTerm - Mac OS 终端增强，配合 Oh My Zsh 效果更佳</li>
<li>Evernote - 多功能笔记类应用，我比较喜欢它在 Chrome 下的剪藏功能</li>
<li>GapDebug - Hybrid APP 调试利器，不过也可以调试普通的 Mobile Web 页面及 APP 内嵌页</li>
<li>iStat Menus - 系统菜单栏增强，可以显示实时网速、CPU 内存使用情况、配件温度、电池状态等等…</li>
<li>licecap - 跨平台的屏幕录制及 GIF 生成工具</li>
<li>Dash - API 文档浏览器及代码片段管理器，IAP 后启动就不用读秒了</li>
<li>ReadKit - RSS 订阅器，写代码写类了就看看圈内新闻吧</li>
<li>1Password - 密码管理器，以后你只需要记住一个主密码就行了，其他都随机生成吧</li>
<li>MWeb - 优秀的 Markdown 编辑器，这篇文章就是在这个软件里写的哦</li>
<li>WebStorm - 前端工程师必备的 IDE，杀牛就要用牛刀</li>
<li>Sublime Text - 一款非常优秀的编辑器，有时候杀鸡焉用牛刀</li>
<li>Chrome - 可能是世界上最好用的浏览器了</li>
<li>Microsoft Office 2016 - 工作套件，有时候还是用得到的</li>
<li>MPlayerX - 优秀的、支持格式广泛的播放器</li>
<li>Sequel Pro - MySQL 数据库管理工具</li>
<li>Foxmail - 邮件客户端，还是不错的</li>
<li>Caffeine - 一款可以让你的 Mac 屏幕一直亮到没电的小软件</li>
<li>Alfred - Mac 平台上最为传奇的效率作品,誉为神兵利器毫不为过,只能说到这里了</li>
<li>Postman - 一款优秀的调试 API 的 Chrome APP</li>
<li>Cakebrew - Brew 可视化管理工具</li>
<li>SourceTree - Git 可视化管理工具</li>
<li>BetterZip - 一款优秀的解压缩软件</li>
<li>Moom - 一款优秀的窗口布局智能管理软件，用得好，很是能提供工作效率</li>
<li>Bartender - 菜单栏的常住 APP icon 越来越多，是时候收起来一些了</li>
<li>Mark Man - 标颜色、拉尺寸什么的，还是前端自己来好了</li>
<li>Polarr Photo Editor - 泼辣修图，PS 卸载之后，就只能靠它简单的修图了</li>
<li>Code Runner - 可直接跑多种编程语言的代码段，开发必备</li>
<li>Surge for Mac - 网络调试及开发工具，还有的核心功能你懂的</li>
</ul>
</div>
<div class="article-info article-info-index">
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-Happy-New-Year" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/01/29/Happy-New-Year/" class="article-date">
<time datetime="2016-01-29T04:03:44.000Z" itemprop="datePublished">2016-01-29</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/01/29/Happy-New-Year/">2015年总结</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>整整2015年都没有写文章了，人都变得懒惰了，其实2015年做了不少事情，工作换到了离家只有20分钟路程的虎扑。终于到了年末，才得空来写篇自己的总结。看看2015年做的事情，自己的长进在哪里。</p>
<h2 id="u5173_u4E8E_u9879_u76EE"><a href="#u5173_u4E8E_u9879_u76EE" class="headerlink" title="关于项目"></a>关于项目</h2><p>2015年算是做的项目比较多的了，离家近了反而更多的加班，前辈用经验告诉我，不要离公司太近，家和公司很容易分不清，现在终于体会到了。</p>
<blockquote>
<ul>
<li>搭了一个知识分享平台</li>
<li>拉小伙伴搭了一个API平台</li>
<li>推动m站、Hybrid、PC站的前端框架统一化</li>
<li>和客户端开发了一个我们自己的bridge js</li>
<li>开发了js watch平台，临末做了几个活动。</li>
</ul>
</blockquote>
<p>事情确实不少，但是来到这里也非常开心，认识了一群开朗乐观的同事，团队也有了自己的每周例会，能和大家一起获得公司的认可，更是难能可贵的回忆，我们的团队终于知道要做什么，而不是把时间浪费在各种稀奇古怪的诡异框架里，可以最大限度的关注项目本身，这正是一个团队最大的正能量。</p>
<h2 id="u5173_u4E8E_u56E2_u961F_u76842016"><a href="#u5173_u4E8E_u56E2_u961F_u76842016" class="headerlink" title="关于团队的2016"></a>关于团队的2016</h2><p>第一件事就是，继续保持高效的开发能力，也要对新生事物保持一颗学习的心，再次祭出乔帮主的话</p>
<blockquote>
<p>keep hungry keep foolish</p>
</blockquote>
<p>时刻保持自己饥渴的学习能力，比自己能力牛的且更努力的人大有人在，天道酬勤，积极完成团队的转型，让每个成员都有清晰的产品意识，对技术有清晰的原件，而不是一味的沉浸在每个项目中不能自拔。我们要做出伟大的产品，否则我们的技术将失去意义。</p>
<p>另外要做的一件事，也是对一个高速前进团队必不可少的东西，流程和规范。既要保证流程顺畅，又要保证代码规范可控，提高代码的质量，减少项目的耦合，先设计再编码。加强review机制和代码设计的交流。让大家认识到代码规范的重要性，提高代码的可维护性。</p>
<h2 id="u5173_u4E8E_u81EA_u5DF1"><a href="#u5173_u4E8E_u81EA_u5DF1" class="headerlink" title="关于自己"></a>关于自己</h2><p>2015年虽然换了新的环境，但是两件事并没有做好，一是健身，二是读书，健身因为天冷荒废了，坚持两个月，效果并不明显，在新的一年的春天还要继续，目前依然是6块腹肌。关于读书，总在找借口逃避，临末总算找到两本看完，看书比较失败，2016年有新的读书计划，把自己的知识面再提升一个层次。 </p>
<p>对于想去学习的，不能懈怠，提高自己的效能，想去做的就马上去做。想去学习的就马上动手，畏首畏脚往往错过最佳的时期。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/life/">life</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-programmer" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/12/18/programmer/" class="article-date">
<time datetime="2014-12-17T16:00:00.000Z" itemprop="datePublished">2014-12-18</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/12/18/programmer/">面对新语言和跳槽，程序员如何保持技术优势？</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 程序员知识的半衰期有多长？通常人们经常说是5年。换句话说，你所知道编程知识的一半将会在5年内被淘汰。类似的观点是，“编程很糟糕，因为你几年前知道的东西现在都用不上了”。 </p>
<p> 咋一看，这似乎合情合理。毕竟，总有新的编程语言和技术源源不断地冒出来。不过，我却认为上面的观点是不正确的。编程知识比一些人所意识到的有更长的实用期。</p>
<h2 id="u8BED_u6CD5_u5E76_u4E0D_u96BE"><a href="#u8BED_u6CD5_u5E76_u4E0D_u96BE" class="headerlink" title="语法并不难"></a>语法并不难</h2><p>着手学习一门新的编程语言。对非程序员来说，当你知道Java的时候学习Python就好像在你知道英语的前提下去学习法语一样。当然，但编程学习也并不是完全这个样子的，会有新的语法要学习，但这仅仅是表面上看起来有点难，所有编程语言的核心概念都是相同的。 </p>
<p> 使用任何一门语言编写一个程序，你会使用到像类型、数据结构和逻辑这样的基础知识。如果你已经了解了布尔函数、整型、浮点数和字符串，这些类型在新语言里也是类似的用法。当然像列表、集、字典和目录树这样的数据结构也是一样的，并且你使用的逻辑也将是算数运算、if语句、循环以及函数调用等等。 </p>
<p> 此外，像该使用哪一种算法、如何分解问题以及变量和函数的命名等关键技巧都能在新语言里面直接套用。这些都是在各种编程语言之中通用的编程知识。借用“没有银弹”里的术语：“语言的语法是偶然的知识，但如何编程才是至关重要的知识。” </p>
<p> 库和工具也是这样。即使你一点也不明白新语言里的正则表达式应该怎么用，你也知道它们最可能都支持什么。找到关于怎么使用它们的知识并不难，难的是怎么使用它们，这才是有价值的知识。对于像IDE这样的工具也是这样的道理，你可能并不知道细节，但你就是知道它们能够做什么。 </p>
<p> 所以学习一门新语言并不是什么了不起的事情，但如果你跳槽了，可能仍有很多知识需要学习。我把知识分为以下3个维度： </p>
<h2 id="3_u4E2A_u7EF4_u5EA6_u7684_u77E5_u8BC6"><a href="#3_u4E2A_u7EF4_u5EA6_u7684_u77E5_u8BC6" class="headerlink" title="3个维度的知识"></a>3个维度的知识</h2><p>编程：这个层次的知识是编程语言、范式、技术和工具。就像我上面所说的，即使像语法这样的细节可能完全不同，但各种编程语言中的很多核心概念是相同的。 </p>
<p>域：这就是你知道的编程里用到关于环境的知识。例如，如果你在电信工作，就是关于各种协议如何工作、如何处理短信、如何计费和监控等之类的知识。你在某个部门工作的时间越长，你对这块了解的就越多，你对工作的贡献可能就越大。 </p>
<p>代码库：这个是要看公司的。当你已经在某个公司工作了很长时间时，你就会明白你的编程方式：你明白哪些事情做完了，哪些部分是棘手和无法凭直觉做出判断的，为什么某件事情要用某种方式来做的整个过程等等。 </p>
<h2 id="u6D3B_u5230_u8001_uFF0C_u5B66_u5230_u8001"><a href="#u6D3B_u5230_u8001_uFF0C_u5B66_u5230_u8001" class="headerlink" title="活到老，学到老"></a>活到老，学到老</h2><p>作为一个程序员，当你在以上3个维度的知识都很健全时，你才是最有价值的。如果你这时候跳槽，不可避免的是你一开始将会对新的代码库一无所知，你就不得不开始认真工作和学习。 </p>
<p>然而，即使你跳槽后，你学到的编程和域的知识还是有用的。掌握几门编程语言会给你更多的参考意见，让你明白事情是怎么用不同的方式来完成的（即使基本原理一样）。通常来说多读点软件开发的好书也是不错的。 </p>
<p>最后，我认为能让软件开发变得有意思和让人兴奋的部分原因是总能学到新的东西。你永远都不会厌烦，所以保持学习的状态吧。你学到的大部分只是都会让你变成一个更优秀的程序员，即使每年都有新的编程语言不断被发明出来。 </p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/life/">life</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-jsdoc" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/12/16/jsdoc/" class="article-date">
<time datetime="2014-12-15T16:00:00.000Z" itemprop="datePublished">2014-12-16</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/12/16/jsdoc/">jsdoc使用说明文档</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。 基于java的注释规则来生成文档。后来有人开发出来了nodejs版本。 </p>
<h3 id="u6CE8_u91CA_u89C4_u8303"><a href="#u6CE8_u91CA_u89C4_u8303" class="headerlink" title="注释规范"></a>注释规范</h3><p>完整规范参考地址:<a href="http://usejsdoc.org/" target="_blank" rel="external">http://usejsdoc.org/</a> </p>
<figure class="highlight javascript"><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><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/***</span><br><span class="line"> @abstract (synonyms: @virtual)</span><br><span class="line"> This member must be implemented (or overridden) by the inheritor.</span><br><span class="line"> @access</span><br><span class="line"> Specify the access level of this member (private, public, or protected).</span><br><span class="line"> @alias</span><br><span class="line"> Treat a member as if it had a different name.</span><br><span class="line"> @augments (synonyms: @extends)</span><br><span class="line"> This object adds onto a parent object.</span><br><span class="line"> @author</span><br><span class="line"> Identify the author of an item.</span><br><span class="line"> @borrows</span><br><span class="line"> This object uses something from another object.</span><br><span class="line"> @callback</span><br><span class="line"> Document a callback function.</span><br><span class="line"> @class (synonyms: @constructor)</span><br><span class="line"> This function is intended to be called with the "new" keyword.</span><br><span class="line"> @classdesc</span><br><span class="line"> Use the following text to describe the entire class.</span><br><span class="line"> @constant (synonyms: @const)</span><br><span class="line"> Document an object as a constant.</span><br><span class="line"> @constructs</span><br><span class="line"> This function member will be the constructor for the previous class.</span><br><span class="line"> @copyright</span><br><span class="line"> Document some copyright information.</span><br><span class="line"> @default (synonyms: @defaultvalue)</span><br><span class="line"> Document the default value.</span><br><span class="line"> @deprecated</span><br><span class="line"> Document that this is no longer the preferred way.</span><br><span class="line"> @description (synonyms: @desc)</span><br><span class="line"> Describe a symbol.</span><br><span class="line"> @enum</span><br><span class="line"> Document a collection of related properties.</span><br><span class="line"> @event</span><br><span class="line"> Document an event.</span><br><span class="line"> @example</span><br><span class="line"> Provide an example of how to use a documented item.</span><br><span class="line"> @exports</span><br><span class="line"> Identify the member that is exported by a JavaScript module.</span><br><span class="line"> @external (synonyms: @host)</span><br><span class="line"> Document an external class/namespace/module.</span><br><span class="line"> @file (synonyms: @fileoverview, @overview)</span><br><span class="line"> Describe a file.</span><br><span class="line"> @fires (synonyms: @emits)</span><br><span class="line"> Describe the events this method may fire.</span><br><span class="line"> @function (synonyms: @func, @method)</span><br><span class="line"> Describe a function or method.</span><br><span class="line"> @global</span><br><span class="line"> Document a global object.</span><br><span class="line"> @ignore</span><br><span class="line"> Omit a symbol from the documentation.</span><br><span class="line"> @inner</span><br><span class="line"> Document an inner object.</span><br><span class="line"> @instance</span><br><span class="line"> Document an instance member.</span><br><span class="line"> @kind</span><br><span class="line"> What kind of symbol is this?</span><br><span class="line"> @lends</span><br><span class="line"> Document properties on an object literal as if they belonged to a symbol with a given name.</span><br><span class="line"> @license</span><br><span class="line"> Identify the license that applies to this code.</span><br><span class="line"> @link</span><br><span class="line"> Inline tag - create a link.</span><br><span class="line"> @member (synonyms: @var)</span><br><span class="line"> Document a member.</span><br><span class="line"> @memberof</span><br><span class="line"> This symbol belongs to a parent symbol.</span><br><span class="line"> @mixes</span><br><span class="line"> This object mixes in all the members from another object.</span><br><span class="line"> @mixin</span><br><span class="line"> Document a mixin object.</span><br><span class="line"> @module</span><br><span class="line"> Document a JavaScript module.</span><br><span class="line"> @name</span><br><span class="line"> Document the name of an object.</span><br><span class="line"> @namespace</span><br><span class="line"> Document a namespace object.</span><br><span class="line"> @param (synonyms: @arg, @argument)</span><br><span class="line"> Document the parameter to a function.</span><br><span class="line"> @private</span><br><span class="line"> This symbol is meant to be private.</span><br><span class="line"> @property (synonyms: @prop)</span><br><span class="line"> Document a property of an object.</span><br><span class="line"> @protected</span><br><span class="line"> This member is meant to be protected.</span><br><span class="line"> @public</span><br><span class="line"> This symbol is meant to be public.</span><br><span class="line"> @readonly</span><br><span class="line"> This symbol is meant to be read-only.</span><br><span class="line"> @requires</span><br><span class="line"> This file requires a JavaScript module.</span><br><span class="line"> @returns (synonyms: @return)</span><br><span class="line"> Document the return value of a function.</span><br><span class="line"> @see</span><br><span class="line"> Refer to some other documentation for more information.</span><br><span class="line"> @since</span><br><span class="line"> When was this feature added?</span><br><span class="line"> @static</span><br><span class="line"> Document a static member.</span><br><span class="line"> @summary</span><br><span class="line"> A shorter version of the full description.</span><br><span class="line"> @this</span><br><span class="line"> What does the 'this' keyword refer to here?</span><br><span class="line"> @throws (synonyms: @exception)</span><br><span class="line"> Describe what errors could be thrown.</span><br><span class="line"> @todo</span><br><span class="line"> Document tasks to be completed.</span><br><span class="line"> @tutorial</span><br><span class="line"> Insert a link to an included tutorial file.</span><br><span class="line"> @type</span><br><span class="line"> Document the type of an object.</span><br><span class="line"> @typedef</span><br><span class="line"> Document a custom type.</span><br><span class="line"> @variation</span><br><span class="line"> Distinguish different objects with the same name.</span><br><span class="line"> @version</span><br><span class="line"> Documents the version number of an item. </span><br><span class="line"> **/</span></span><br></pre></td></tr></table></figure>
<h3 id="u793A_u4F8Bjs"><a href="#u793A_u4F8Bjs" class="headerlink" title="示例js"></a>示例js</h3><figure class="highlight javascript"><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><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//示例一</span></span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @namespace 简单的方法标注示例 </span><br><span class="line"> * @author <[email protected]></span><br><span class="line"> * @version 0.1 </span><br><span class="line"> */</span> </span><br><span class="line"></span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description 加法运算 </span><br><span class="line"> * @param {number} num1 加数 </span><br><span class="line"> * @param {number} num2 被加数 </span><br><span class="line"> * @return {number} result 结果 </span><br><span class="line"> */</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">num1,num2</span>)</span>{ </span><br><span class="line"> <span class="keyword">return</span> num1 + num2; </span><br><span class="line">} </span><br><span class="line"></span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description 减法运算 </span><br><span class="line"> * @param {Num} num1 减数 </span><br><span class="line"> * @param {Num} num2 被减数 </span><br><span class="line"> * @return {Num} result 结果 </span><br><span class="line"> */</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">minus</span>(<span class="params">num1,num2</span>)</span>{ </span><br><span class="line"> <span class="keyword">return</span> num1 - num2; </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="comment">/** </span><br><span class="line"> * @class 简单的类对象标注示例 </span><br><span class="line"> * @author <[email protected]> </span><br><span class="line"> * @version 0.1 </span><br><span class="line"> */</span> </span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @author <[email protected]> </span><br><span class="line"> * @constructor Person </span><br><span class="line"> * @description 一个Person类 </span><br><span class="line"> * @see The <a href="#">llying</a >. </span><br><span class="line"> * @example new Parent(“张三”,15); </span><br><span class="line"> * @since version 0.1 </span><br><span class="line"> * @param {String} username 姓名 </span><br><span class="line"> * @param {Num} age 年龄 </span><br><span class="line"> */</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">username,age</span>) </span><br><span class="line"></span>{ </span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description {Sting} 姓名 </span><br><span class="line"> * @field </span><br><span class="line"> */</span> </span><br><span class="line"> <span class="keyword">this</span>.username = username; </span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description {Num} 年龄 </span><br><span class="line"> * @field </span><br><span class="line"> */</span> </span><br><span class="line"> <span class="keyword">this</span>.age = age </span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description 弹出say内容 </span><br><span class="line"> * @param {String} content 内容 </span><br><span class="line"> */</span> </span><br><span class="line"> <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params">content</span>) </span><br><span class="line"> </span>{ </span><br><span class="line"> alert(<span class="keyword">this</span>.username+<span class="string">" say :"</span>+content); </span><br><span class="line"> } </span><br><span class="line"><span class="comment">/** </span><br><span class="line"> * @description 返回json格式的对象 </span><br><span class="line"> * @return {String} json格式 </span><br><span class="line"> * @see Person#say </span><br><span class="line"> */</span> </span><br><span class="line"> <span class="keyword">this</span>.getJson = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ </span><br><span class="line"> <span class="keyword">return</span> <span class="string">"{name:"</span>+<span class="keyword">this</span>.username+<span class="string">",age"</span>+<span class="keyword">this</span>.age+<span class="string">"}"</span>; </span><br><span class="line"> } </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="u4E0B_u8F7D_u5B89_u88C5"><a href="#u4E0B_u8F7D_u5B89_u88C5" class="headerlink" title="下载安装"></a>下载安装</h3><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">npm install -g jsdoc</span><br></pre></td></tr></table></figure>
<p>github项目地址:<a href="https://github.com/jsdoc3/jsdoc" target="_blank" rel="external">https://github.com/jsdoc3/jsdoc</a><br>jsdoc官网: <a href="http://usejsdoc.org/" target="_blank" rel="external">http://usejsdoc.org/</a><br>google项目地址:<a href="http://code.google.com/p/jsdoc-toolkit-ant-task/" target="_blank" rel="external">http://code.google.com/p/jsdoc-toolkit-ant-task/</a> (经常被墙，无法访问，也是没办法，只好用这个nodejs版了)</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/tools/">tools</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-keep" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/12/16/keep/" class="article-date">
<time datetime="2014-12-15T16:00:00.000Z" itemprop="datePublished">2014-12-16</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/12/16/keep/">信念</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>应该是对于没有很好的方法挣钱而感到特别着急，当下最要紧的还是学习，做好最要紧的事情，掌握更多技能，打好扎实的基础。贸然四处乱投医，难有成效。</p>
<blockquote>
<p>戒骄戒躁，多看书，多写代码，让自己的情绪平稳下来。</p>
</blockquote>
<p>最近去研究一下jsdoc，把公共文件的注释补充起来。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/life/">life</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-grep-commander" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/05/grep-commander/" class="article-date">
<time datetime="2014-11-04T16:00:00.000Z" itemprop="datePublished">2014-11-05</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/05/grep-commander/">linux grep命令</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1-_u4F5C_u7528"><a href="#1-_u4F5C_u7528" class="headerlink" title="1.作用"></a>1.作用</h2><p>Linux系统中grep命令是一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹 配的行打印出来。grep全称是Global Regular Expression Print，表示全局正则表达式版本，它的使用权限是所有用户。</p>
<h2 id="2-_u683C_u5F0F"><a href="#2-_u683C_u5F0F" class="headerlink" title="2.格式"></a>2.格式</h2><p>grep [options]</p>
<h2 id="3-_u4E3B_u8981_u53C2_u6570"><a href="#3-_u4E3B_u8981_u53C2_u6570" class="headerlink" title="3.主要参数"></a>3.主要参数</h2><p>[options]主要参数：<br>－c：只输出匹配行的计数。<br>－I：不区分大 小写(只适用于单字符)。<br>－h：查询多文件时不显示文件名。<br>－l：查询多文件时只输出包含匹配字符的文件名。<br>－n：显示匹配行及 行号。<br>－s：不显示不存在或无匹配文本的错误信息。<br>－v：显示不包含匹配文本的所有行。<br>pattern正则表达式主要参数：<br>\： 忽略正则表达式中特殊字符的原有含义。<br>^：匹配正则表达式的开始行。<br>$: 匹配正则表达式的结束行。<br>\<：从匹配正则表达 式的行开始。<br>>：到匹配正则表达式的行结束。<br>[ ]：单个字符，如[A]即A符合要求 。<br>[ - ]：范围，如[A-Z]，即A、B、C一直到Z都符合要求 。<br>。：所有的单个字符。 </p>
<ul>
<li>：有字符，长度可以为0。 </li>
</ul>
<h2 id="4-grep_u547D_u4EE4_u4F7F_u7528_u7B80_u5355_u5B9E_u4F8B"><a href="#4-grep_u547D_u4EE4_u4F7F_u7528_u7B80_u5355_u5B9E_u4F8B" class="headerlink" title="4.grep命令使用简单实例"></a>4.grep命令使用简单实例</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">$ grep ‘<span class="built_in">test</span>’ d*</span><br></pre></td></tr></table></figure>
<p>显示所有以d开头的文件中包含 test的行。 </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 ‘<span class="built_in">test</span>’ aa bb cc</span><br></pre></td></tr></table></figure>
<p>显示在aa，bb，cc文件中匹配test的行。 </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 ‘[a-z]\{<span class="number">5</span>\}’ aa</span><br></pre></td></tr></table></figure>
<p>显示所有包含每个字符串至少有5个连续小写字符的字符串的行。<br><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 ‘w\(es\)t.*\<span class="number">1</span>′ aa</span><br></pre></td></tr></table></figure></p>
<p>如果west被匹配，则es就被存储到内存中，并标记为1，然后搜索任意个字符(.<em>)，这些字符后面紧跟着 另外一个es(\1)，找到就显示该行。如果用egrep或grep -E，就不用”\”号进行转义，直接写成’w(es)t.</em>\1′就可以了。 </p>
<h2 id="5-grep_u547D_u4EE4_u4F7F_u7528_u590D_u6742_u5B9E_u4F8B"><a href="#5-grep_u547D_u4EE4_u4F7F_u7528_u590D_u6742_u5B9E_u4F8B" class="headerlink" title="5.grep命令使用复杂实例"></a>5.grep命令使用复杂实例</h2><p>假设您正在’/usr/src/Linux/Doc’目录下搜索带字符 串’magic’的文件： </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 magic /usr/src/Linux/Doc/*</span><br></pre></td></tr></table></figure>
<p>sysrq.txt:<em> How do I enable the magic SysRQ key?<br>sysrq.txt:</em> How do I use the magic SysRQ key?<br>其中文件’sysrp.txt’包含该字符串，讨论的是 SysRQ 的功能。<br>默认情况下，’grep’只搜索当前目录。如果 此目录下有许多子目录，’grep’会以如下形式列出：<br>grep: sound: Is a directory<br>这可能会使’grep’ 的输出难于阅读。这里有两种解决的办法：<br>明确要求搜索子目录：grep -r<br>或忽略子目录：grep -d skip<br>如果有很多 输出时，您可以通过管道将其转到’less’上阅读： </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 magic /usr/src/Linux/Documentation/* | less</span><br></pre></td></tr></table></figure>
<p>这样，您就可以更方便地阅读。 </p>
<p>有一点要注意，您必需提供一个文件过滤方式(搜索全部文件的话用 *)。如果您忘了，’grep’会一直等着，直到该程序被中断。如果您遇到了这样的情况，按 <ctrl c=""> ，然后再试。 </ctrl></p>
<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><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">grep -i pattern files <span class="comment">#不区分大小写地搜索。默认情况区分大小写， </span></span><br><span class="line">grep <span class="operator">-l</span> pattern files <span class="comment">#只列出匹配的文件名， </span></span><br><span class="line">grep -L pattern files <span class="comment">#列出不匹配的文件名， </span></span><br><span class="line">grep -w pattern files <span class="comment">#只匹配整个单词，而不是字符串的一部分(如匹配’magic’，而不是’magical’)， </span></span><br><span class="line">grep -C number pattern files <span class="comment">#匹配的上下文分别显示[number]行， </span></span><br><span class="line">grep pattern1 | pattern2 files <span class="comment">#显示匹配 pattern1 或 pattern2 的行， </span></span><br><span class="line">grep pattern1 files | grep pattern2 <span class="comment">#显示既匹配 pattern1 又匹配 pattern2 的行。 </span></span><br><span class="line">grep -n pattern files <span class="comment">#即可显示行号信息 </span></span><br><span class="line">grep -c pattern files <span class="comment">#即可查找总行数</span></span><br></pre></td></tr></table></figure>
<p>这里还有些用于搜索的特殊符号：<br>\< 和 > 分别标注单词的开始与结尾。<br>例如： </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></pre></td><td class="code"><pre><span class="line">grep man * <span class="comment">#会匹配 ‘Batman’、’manic’、’man’等， </span></span><br><span class="line">grep ‘\<man’ * <span class="comment">#匹配’manic’和’man’，但不是’Batman’， </span></span><br><span class="line">grep ‘\<man\>’ <span class="comment">#只匹配’man’，而不是’Batman’或’manic’等其他的字符串。</span></span><br></pre></td></tr></table></figure>
<p>‘^’：指匹配的字符串在行首，<br>‘$’：指匹配的字符串在行 尾， </p>
<h1 id="Grep__u547D_u4EE4__u7528_u6CD5_u5927_u5168"><a href="#Grep__u547D_u4EE4__u7528_u6CD5_u5927_u5168" class="headerlink" title="Grep 命令 用法大全"></a>Grep 命令 用法大全</h1><h2 id="1_u3001__u53C2_u6570_uFF1A"><a href="#1_u3001__u53C2_u6570_uFF1A" class="headerlink" title="1、 参数："></a>1、 参数：</h2><p>-I ：忽略大小写<br>-c ：打印匹配的行数<br>-l ：从多个文件中查找包含匹配项<br>-v ：查找不包含匹配项的行<br>-n：打印包含匹配项的行和行标 </p>
<h2 id="2_u3001RE_uFF08_u6B63_u5219_u8868_u8FBE_u5F0F_uFF09"><a href="#2_u3001RE_uFF08_u6B63_u5219_u8868_u8FBE_u5F0F_uFF09" class="headerlink" title="2、RE（正则表达式）"></a>2、RE（正则表达式）</h2><p>\ 忽略正则表达式中特殊字符的原有含义<br>^ 匹配正则表达式的开始行<br>$ 匹配正则表达式的结束行<br>\< 从匹配正则表达式的行开始<br>> 到匹配正则表达式的行结束<br>[ ] 单个字符；如[A] 即A符合要求<br>[ - ] 范围 ；如[A-Z]即A，B，C一直到Z都符合要求<br>. 所有的单个字符 </p>
<ul>
<li>所有字符，长度可以为0 </li>
</ul>
<h2 id="3_u3001_u4E3E_u4F8B"><a href="#3_u3001_u4E3E_u4F8B" class="headerlink" title="3、举例"></a>3、举例</h2><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><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><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br></pre></td><td class="code"><pre><span class="line">ps -ef | grep in.telnetd </span><br><span class="line">root <span class="number">19955</span> <span class="number">181</span> <span class="number">0</span> <span class="number">13</span>:<span class="number">43</span>:<span class="number">53</span> ? <span class="number">0</span>:<span class="number">00</span> in.telnetd </span><br><span class="line"></span><br><span class="line">more size.txt size <span class="comment">#文件的内容 </span></span><br><span class="line">b124230 </span><br><span class="line">b034325 </span><br><span class="line">a081016 </span><br><span class="line">m7187998 </span><br><span class="line">m7282064 </span><br><span class="line">a022021 </span><br><span class="line">a061048 </span><br><span class="line">m9324822 </span><br><span class="line">b103303 </span><br><span class="line">a013386 </span><br><span class="line">b044525 </span><br><span class="line">m8987131 </span><br><span class="line">B081016 </span><br><span class="line">M45678 </span><br><span class="line">B103303 </span><br><span class="line">BADc2345 </span><br><span class="line"></span><br><span class="line">more size.txt | grep <span class="string">'[a-b]'</span> <span class="comment">#范围 ；如[A-Z]即A，B，C一直到Z都符合要求 </span></span><br><span class="line">b124230 </span><br><span class="line">b034325 </span><br><span class="line">a081016 </span><br><span class="line">a022021 </span><br><span class="line">a061048 </span><br><span class="line">b103303 </span><br><span class="line">a013386 </span><br><span class="line">b044525 </span><br><span class="line"></span><br><span class="line">more size.txt | grep <span class="string">'[a-b]'</span>* </span><br><span class="line">b124230 </span><br><span class="line">b034325 </span><br><span class="line">a081016 </span><br><span class="line">m7187998 </span><br><span class="line">m7282064 </span><br><span class="line">a022021 </span><br><span class="line">a061048 </span><br><span class="line">m9324822 </span><br><span class="line">b103303 </span><br><span class="line">a013386 </span><br><span class="line">b044525 </span><br><span class="line">m8987131 </span><br><span class="line">B081016 </span><br><span class="line">M45678 </span><br><span class="line">B103303 </span><br><span class="line">BADc2345 </span><br><span class="line"></span><br><span class="line">more size.txt | grep <span class="string">'b'</span> <span class="comment">#单个字符；如[A] 即A符合要求 </span></span><br><span class="line">b124230 </span><br><span class="line">b034325 </span><br><span class="line">b103303 </span><br><span class="line">b044525 </span><br><span class="line"></span><br><span class="line">more size.txt | grep <span class="string">'[bB]'</span> </span><br><span class="line">b124230 </span><br><span class="line">b034325 </span><br><span class="line">b103303 </span><br><span class="line">b044525 </span><br><span class="line">B081016 </span><br><span class="line">B103303 </span><br><span class="line">BADc2345 </span><br><span class="line"></span><br><span class="line">grep <span class="string">'root'</span> /etc/group </span><br><span class="line">root::<span class="number">0</span>:root </span><br><span class="line">bin::<span class="number">2</span>:root,bin,daemon </span><br><span class="line">sys::<span class="number">3</span>:root,bin,sys,adm </span><br><span class="line">adm::<span class="number">4</span>:root,adm,daemon </span><br><span class="line">uucp::<span class="number">5</span>:root,uucp </span><br><span class="line">mail::<span class="number">6</span>:root </span><br><span class="line">tty::<span class="number">7</span>:root,tty,adm </span><br><span class="line">lp::<span class="number">8</span>:root,lp,adm </span><br><span class="line">nuucp::<span class="number">9</span>:root,nuucp </span><br><span class="line">daemon::<span class="number">12</span>:root,daemon </span><br><span class="line"></span><br><span class="line">grep <span class="string">'^root'</span> /etc/group <span class="comment">#匹配正则表达式的开始行 </span></span><br><span class="line">root::<span class="number">0</span>:root </span><br><span class="line"></span><br><span class="line">grep <span class="string">'uucp'</span> /etc/group </span><br><span class="line">uucp::<span class="number">5</span>:root,uucp </span><br><span class="line">nuucp::<span class="number">9</span>:root,nuucp </span><br><span class="line"></span><br><span class="line">grep <span class="string">'\<uucp'</span> /etc/group </span><br><span class="line">uucp::<span class="number">5</span>:root,uucp </span><br><span class="line"></span><br><span class="line">grep <span class="string">'root /etc/group #匹配正则表达式的结束行 </span><br><span class="line">root::0:root </span><br><span class="line">mail::6:root </span><br><span class="line"></span><br><span class="line">more size.txt | grep -i '</span>b1..*<span class="number">3</span><span class="string">' -i #忽略大小写 </span><br><span class="line">b124230 </span><br><span class="line">b103303 </span><br><span class="line">B103303 </span><br><span class="line"></span><br><span class="line">more size.txt | grep -iv '</span>b1..*<span class="number">3</span><span class="string">' -v #查找不包含匹配项的行 </span><br><span class="line">b034325 </span><br><span class="line">a081016 </span><br><span class="line">m7187998 </span><br><span class="line">m7282064 </span><br><span class="line">a022021 </span><br><span class="line">a061048 </span><br><span class="line">m9324822 </span><br><span class="line">a013386 </span><br><span class="line">b044525 </span><br><span class="line">m8987131 </span><br><span class="line">B081016 </span><br><span class="line">M45678 </span><br><span class="line">BADc2345 </span><br><span class="line"></span><br><span class="line">more size.txt | grep -in '</span>b1..*<span class="number">3</span><span class="string">' </span><br><span class="line">1:b124230 </span><br><span class="line">9:b103303 </span><br><span class="line">15:B103303 </span><br><span class="line"></span><br><span class="line">grep '</span> /etc/init.d/nfs.server | wc <span class="operator">-l</span> </span><br><span class="line"><span class="number">128</span> </span><br><span class="line"></span><br><span class="line">grep <span class="string">'\ /etc/init.d/nfs.server | wc –l #忽略正则表达式中特殊字符的原有含义 </span><br><span class="line">15 </span><br><span class="line"></span><br><span class="line">grep '</span>\ /etc/init.d/nfs.server </span><br><span class="line"></span><br><span class="line"><span class="keyword">case</span> <span class="string">"<span class="variable">$1</span>"</span> <span class="keyword">in</span> </span><br><span class="line">>/tmp/sharetab.$ </span><br><span class="line">[ <span class="string">"x<span class="variable">$fstype</span>"</span> != xnfs ] && </span><br><span class="line"><span class="built_in">echo</span> <span class="string">"<span class="variable">$path</span>\t<span class="variable">$res</span>\t<span class="variable">$fstype</span>\t<span class="variable">$opts</span>\t<span class="variable">$desc</span>"</span> </span><br><span class="line">>>/tmp/sharetab.$ </span><br><span class="line">/usr/bin/touch -r /etc/dfs/sharetab /tmp/sharetab.$ </span><br><span class="line">/usr/bin/mv <span class="operator">-f</span> /tmp/sharetab.$ /etc/dfs/sharetab </span><br><span class="line"><span class="keyword">if</span> [ <span class="operator">-f</span> /etc/dfs/dfstab ] && /usr/bin/egrep -v <span class="string">'^[ ]*(#|$)'</span> </span><br><span class="line"><span class="keyword">if</span> [ <span class="variable">$startnfsd</span> <span class="operator">-eq</span> <span class="number">0</span> <span class="operator">-a</span> <span class="operator">-f</span> /etc/rmmount.conf ] && </span><br><span class="line"><span class="keyword">if</span> [ <span class="variable">$startnfsd</span> <span class="operator">-ne</span> <span class="number">0</span> ]; <span class="keyword">then</span> </span><br><span class="line"><span class="keyword">elif</span> [ ! -n <span class="string">"<span class="variable">$_INIT_RUN_LEVEL</span>"</span> ]; <span class="keyword">then</span> </span><br><span class="line"><span class="keyword">while</span> [ <span class="variable">$wtime</span> <span class="operator">-gt</span> <span class="number">0</span> ]; <span class="keyword">do</span> </span><br><span class="line">wtime=`expr <span class="variable">$wtime</span> - <span class="number">1</span>` </span><br><span class="line"><span class="keyword">if</span> [ <span class="variable">$wtime</span> <span class="operator">-eq</span> <span class="number">0</span> ]; <span class="keyword">then</span> </span><br><span class="line"><span class="built_in">echo</span> <span class="string">"Usage: <span class="variable">$0</span> { start | stop }"</span> </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">more size.txt </span><br><span class="line"></span><br><span class="line">the <span class="built_in">test</span> file </span><br><span class="line">their are files </span><br><span class="line">The end </span><br><span class="line"></span><br><span class="line">grep <span class="string">'the'</span> size.txt </span><br><span class="line">the <span class="built_in">test</span> file </span><br><span class="line">their are files </span><br><span class="line"></span><br><span class="line">grep <span class="string">'\<the'</span> size.txt </span><br><span class="line">the <span class="built_in">test</span> file </span><br><span class="line">their are files </span><br><span class="line"></span><br><span class="line">grep <span class="string">'the\>'</span> size.txt </span><br><span class="line">the <span class="built_in">test</span> file </span><br><span class="line"></span><br><span class="line">grep <span class="string">'\<the\>'</span> size.txt </span><br><span class="line">the <span class="built_in">test</span> file </span><br><span class="line"></span><br><span class="line">grep <span class="string">'\<[Tt]he\>'</span> size.txt </span><br><span class="line">the <span class="built_in">test</span> file</span><br></pre></td></tr></table></figure>
<h3 id="u7B80_u4ECB"><a href="#u7B80_u4ECB" class="headerlink" title="简介"></a>简介</h3><p>使用正则表达式的一个多用途文本搜索工具.这个php?name=%C3%FC%C1%EE” onclick=”tagshow(event)” class=”t_tag”>命令本来是ed行编辑器中的一个php?name=%C3%FC%C1%EE” onclick=”tagshow(event)” class=”t_tag”>命令/过滤器:</p>
<pre><code>g/re/p -- global - regular expression - print.
</code></pre><p>基本格式<br>grep pattern [file…]<br>(1)grep 搜索字符串 [filename]<br>(2)grep 正则表达式 [filename]<br>在文件中搜索所有 pattern 出现的位置, pattern 既可以是要搜索的字符串,也可以是一个正则表达式.<br>注意：在输入要搜索的字符串时最好使用双引号/而在模式匹配使用正则表达式时，注意使用单引号 </p>
<h3 id="grep_u7684_u9009_u9879"><a href="#grep_u7684_u9009_u9879" class="headerlink" title="grep的选项"></a>grep的选项</h3><pre><code>-c 只输出匹配行的计数
-i 不区分大小写（用于单字符）
-n 显示匹配的行号
-v 不显示不包含匹配文本的所以有行
-s 不显示错误信息
-E 使用扩展正则表达式
更多的选项请查看：man grep
</code></pre><h3 id="u5E38_u7528grep_u5B9E_u4F8B"><a href="#u5E38_u7528grep_u5B9E_u4F8B" class="headerlink" title="常用grep实例"></a>常用grep实例</h3><p>(1)多个文件查询 </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 <span class="string">"sort"</span> *.doc <span class="comment">#见文件名的匹配</span></span><br></pre></td></tr></table></figure>
<p>(2)行匹配:输出匹配行的计数</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 -c <span class="string">"48"</span> data.doc <span class="comment">#输出文档中含有48字符的行数</span></span><br></pre></td></tr></table></figure>
<p>(3)显示匹配行和行数</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 -n <span class="string">"48"</span> data.doc <span class="comment">#显示所有匹配48的行和行号</span></span><br></pre></td></tr></table></figure>
<p>(4)显示非匹配的行</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 -vn <span class="string">"48"</span> data.doc <span class="comment">#输出所有不包含48的行</span></span><br></pre></td></tr></table></figure>
<p>(4)显示非匹配的行</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 -vn <span class="string">"48"</span> data.doc <span class="comment">#输出所有不包含48的行</span></span><br></pre></td></tr></table></figure>
<p>(5)大小写敏感</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 -i <span class="string">"ab"</span> data.doc <span class="comment">#输出所有含有ab或Ab的字符串的行</span></span><br></pre></td></tr></table></figure>
<h3 id="u6B63_u5219_u8868_u8FBE_u5F0F_u7684_u5E94_u7528"><a href="#u6B63_u5219_u8868_u8FBE_u5F0F_u7684_u5E94_u7528" class="headerlink" title="正则表达式的应用"></a>正则表达式的应用</h3><p>(1)正则表达式的应用 (注意：最好把正则表达式用单引号括起来)</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 <span class="string">'[239].'</span> data.doc <span class="comment">#输出所有含有以2,3或9开头的，并且是两个数字的行</span></span><br></pre></td></tr></table></figure>
<p>(2)不匹配测试</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 <span class="string">'^[^48]'</span> data.doc <span class="comment">#不匹配行首是48的行</span></span><br></pre></td></tr></table></figure>
<p>(3)使用扩展模式匹配</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 -E <span class="string">'219|216'</span> data.doc</span><br></pre></td></tr></table></figure>
<p>(4) …</p>
<pre><code>这需要在实践中不断应用和总结，熟练掌握正则表达式。
</code></pre><h3 id="u4F7F_u7528_u7C7B_u540D"><a href="#u4F7F_u7528_u7C7B_u540D" class="headerlink" title="使用类名"></a>使用类名</h3><p>可以使用国际模式匹配的类名：<br>[[:upper:]] [A-Z]<br>[[:lower:]] [a-z]<br>[[:digit:]] [0-9]<br>[[:alnum:]] [0-9a-zA-Z]<br>[[:space:]] 空格或tab<br>[[:alpha:]] [a-zA-Z]</p>
<p>(1)使用</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 <span class="string">'5[[:upper:]][[:upper:]]'</span> data.doc <span class="comment">#查询以5开头以两个大写字母结尾的行</span></span><br></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/linux/">linux</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/tools/">tools</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-gulp-task" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/11/01/gulp-task/" class="article-date">
<time datetime="2014-10-31T16:00:00.000Z" itemprop="datePublished">2014-11-01</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/11/01/gulp-task/">前端工程化：在gulp中顺序执行任务</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>gulp 是前端开发过程中对代码进行构建(Build)的工具，类似于Java世界中的Ant或者Maven。与Ant或Maven类似，在用gulp进行build时，经常需要顺序执行任务：在前一个任务彻底结束后才开始下一个任务。比如，在进行新的一次LESS编译前，首先需要保证删除上一次编译的结果。也即，对于以下两个gulp任务：</p>
<figure class="highlight javascript"><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">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>),</span><br><span class="line"> less = <span class="built_in">require</span>(<span class="string">'gulp-less'</span>),</span><br><span class="line"> clean = <span class="built_in">require</span>(<span class="string">'gulp-clean'</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'compileLESS'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> gulp.src(<span class="string">'sample.less'</span>)</span><br><span class="line"> .pipe(less())</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'sample.css'</span>));</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'clean'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> gulp.src(<span class="string">'sample.css'</span>, { read:<span class="literal">false</span> })</span><br><span class="line"> .pipe(clean());</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>必须保证’clean’任务执行完毕后才开始进行’compileLESS’任务。</p>
<h2 id="gulp_u4E2D_u7684_u987A_u5E8F_u6267_u884C_u65B9_u6848"><a href="#gulp_u4E2D_u7684_u987A_u5E8F_u6267_u884C_u65B9_u6848" class="headerlink" title="gulp中的顺序执行方案"></a>gulp中的顺序执行方案</h2><p>在gulp对任务的定义中(gulp.task)，可以声明任务之间的依赖。比如，可以声明任务’compileLESS’依赖于’clean’:</p>
<figure class="highlight javascript"><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">gulp.task(<span class="string">'compileLESS'</span>, [<span class="string">'clean'</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//compile LESS file...</span></span><br><span class="line">});</span><br><span class="line">gulp.task(<span class="string">'clean'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> gulp.src(<span class="string">'sample.css'</span>, { read:<span class="literal">false</span> })</span><br><span class="line"> .pipe(clean());</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>在声明任务依赖后，可以保证’clean’定义的function执行完毕后，’compileLESS’定义的function才开始执行。<br>不过，即使定义了任务依赖，对于上述例子我们依然会发现：有时，需要清理的文件尚未删除干净，用于编译的任务就已经开始生成文件了；这在文件较多的项目环境下尤为常见。原因在于，对’clean’定义的function而言，虽然函数本身已经执行完毕了，但是文件删除操作可能仍在进行 — gulp任务中的操作大多数都是数据流(Stream)的操作，其操作进度与函数执行无关。<br>如果需要在文件彻底清理后才开始执行’compileLESS’任务，则需要在’clean’任务中进行特殊编码：令其返回最终的数据流(Stream)对象： </p>
<figure class="highlight javascript"><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">gulp.task(<span class="string">'compileLESS'</span>, [<span class="string">'clean'</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//compile LESS file...</span></span><br><span class="line">});</span><br><span class="line">gulp.task(<span class="string">'clean'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'sample.css'</span>, { read:<span class="literal">false</span> })</span><br><span class="line"> .pipe(clean());</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="u95EE_u9898_u6839_u6E90"><a href="#u95EE_u9898_u6839_u6E90" class="headerlink" title="问题根源"></a>问题根源</h2><p>应该承认，这样的一种依赖定义方式是不直观的、令人困惑的。然而思考之后会发现，对于这个问题，不能简单的用”bug”来进行总结。<br>问题的难点在于：如何在一个任务运行系统中监听数据流的结束？对于数据流而言，代码语句的执行结束仅仅意味着数据操作的开始，唯一能确定数据操作结束的是最后一个数据流所触发的end事件；因此，只有想办法监听到这个end事件，才有可能实现真正意义上的任务依赖。而在任务定义的函数中返回最后一个数据流，是一个相对来说使用起来最方便的方案。<br>事实上，gulp中的任务运行系统并不是自己实现的，而是直接使用了 orchestrator 。在gulp的源代码中可以发现，gulp继承了orchestrator，而gulp.task仅仅只是orchestrator.add的别名而已：</p>
<figure class="highlight javascript"><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="comment">//gulp source code</span></span><br><span class="line"><span class="keyword">var</span> util = <span class="built_in">require</span>(<span class="string">'util'</span>);</span><br><span class="line"><span class="keyword">var</span> Orchestrator = <span class="built_in">require</span>(<span class="string">'orchestrator'</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Gulp</span>(<span class="params"></span>) </span>{</span><br><span class="line"> Orchestrator.call(<span class="keyword">this</span>);</span><br><span class="line">}</span><br><span class="line">util.inherits(Gulp, Orchestrator);</span><br><span class="line"></span><br><span class="line">Gulp.prototype.task = Gulp.prototype.add;</span><br></pre></td></tr></table></figure>
<p>在orchestrator中，解决上述任务依赖的方式有三种： </p>
<ol>
<li>在任务定义的function中返回一个数据流，当该数据流的end事件触发时，任务结束。 </li>
<li>在任务定义的function中返回一个promise对象，当该promise对象resolve时，任务结束。 </li>
<li>在任务定义的function中传入callback变量，当callback()执行时，任务结束。 </li>
</ol>
<p>gulp脚本中可以使用这三种方法来实现任务依赖，不过由于gulp中的任务大多是数据流操作，因此以第一种方法为主。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/frontend/">frontend</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/gulp/">gulp</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-mac-must-install-soft" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/10/28/mac-must-install-soft/" class="article-date">
<time datetime="2014-10-27T16:00:00.000Z" itemprop="datePublished">2014-10-28</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/10/28/mac-must-install-soft/">mac电脑安装的软件</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>先声明哦，我其实也算是一个新手，非常喜欢在mac下开发，这里只是简单罗列一下我mac上一些用的很爽的软件，只是针对程序开发来说的，如果你有不同意见或者补充，也欢迎来评论。</p>
<h3 id="Chrome"><a href="#Chrome" class="headerlink" title="Chrome"></a>Chrome</h3><p>google的浏览器，可以使用safari下载一个，是开发的利器，也是我最喜欢的浏览器，必须排名第一，顺便说一句云同步书签和插件，实在太爽了。</p>
<h3 id="Xcode"><a href="#Xcode" class="headerlink" title="Xcode"></a>Xcode</h3><p>作为apple的王道的编辑器，手机和pc的应用开发，都离不开的一个编辑器，非常重要，如果不安装，可能连wget都没法安装使用.就不在详细说明了，非常强大的编辑器，正好我也在学习object-c开发。在苹果商店就可以直接下载，不过非常慢，可以搜索个靠谱的CDN下载。</p>
<h3 id="Sublime_text"><a href="#Sublime_text" class="headerlink" title="Sublime text"></a>Sublime text</h3><p>非常好用的文本编辑器，强大的不可思议，很多插件，很多主题，非常让人喜欢，所以也是我必须安装的软件之一，不解释。</p>
<h3 id="Office_u5957_u4EF6"><a href="#Office_u5957_u4EF6" class="headerlink" title="Office套件"></a>Office套件</h3><p>一直很鄙视ms，但是不得不说Office的强大，强大到每个人都用他们来写文档，处理表格，这个也是必须安装的软件套装，word, excel, outlook,onenote等等。</p>
<h3 id="QQ"><a href="#QQ" class="headerlink" title="QQ"></a>QQ</h3><p>日常软件，为什么需要？你懂的。</p>
<h3 id="iStat_Menus"><a href="#iStat_Menus" class="headerlink" title="iStat Menus"></a>iStat Menus</h3><p>一款非常好用的mac插件，可以看到电脑的性能的一切情况，内存，硬盘，网络，CPU，电源等。可以看到什么软件比较耗电，比较耗资源，也看到自己电脑的不足，快速修复。</p>
<h3 id="keynote"><a href="#keynote" class="headerlink" title="keynote"></a>keynote</h3><p>不同于windows上的演示软件，比Office ppt更赞的演示软件，大家不妨试试。</p>
<h3 id="iExplorer"><a href="#iExplorer" class="headerlink" title="iExplorer"></a>iExplorer</h3><p>这是一款管理手机app的软件，类似window下面的itools，至于怎么好用，需要大家去摸索了。</p>
<h3 id="Charles"><a href="#Charles" class="headerlink" title="Charles"></a>Charles</h3><p>一款mac下的代理软件，类似window下的fiddler.</p>
<h3 id="qq_u8F93_u5165_u6CD5"><a href="#qq_u8F93_u5165_u6CD5" class="headerlink" title="qq输入法"></a>qq输入法</h3><p>mac下不错的中文输入法，让你可以在mac也打字如飞.</p>
<h3 id="u5176_u4ED6"><a href="#u5176_u4ED6" class="headerlink" title="其他"></a>其他</h3><p>mac下面有很多好用的功能和软件，比如说任务清单，会议邀请，日历等，让你水果手机和电脑，无障碍连通，感觉云的便利。<br>欢迎留言补充。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mac/">mac</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/soft/">soft</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-nodeptt" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2014/10/27/nodeptt/" class="article-date">
<time datetime="2014-10-26T16:00:00.000Z" itemprop="datePublished">2014-10-27</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2014/10/27/nodeptt/">nodeppt学习</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p><a href="https://github.com/ksky521/nodePPT" target="_blank" rel="external">nodeppt项目地址</a> ，周末在网上闲逛，看到 @三水清 写了一个nodeppt项目，看了<a href="http://qdemo.sinaapp.com/" target="_blank" rel="external">demo</a>以后，顿时感觉非常炫酷，兴奋之余，想学习一下。<br>看了一遍nodeppt下面的介绍，了解了他的功能，ppt可以使用markdown来写，通过[slide]来区分ppt的每页，这之前倒是不难理解，把markdown解析成html，通过js库来控制ppt的切换动画。使用一些css3和html5的特效。<br>之后看了这个ppt具有的其他功能，分屏幕，还有socket控制切屏动画，可以在手机上控制pc的ppt切屏，这个功能非常好，很有创意，看到项目在github上有500+的star，心中十分感慨，都是熟悉的技术，把他们整合起来就是很好的很有创意的东西。 </p>
<p>大家不妨使用</p>
<pre><code>npm install nodeppt -g
</code></pre><p>安装体验下。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/frontend/">frontend</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/tools/">tools</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>