-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
825 lines (548 loc) · 35.6 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>hussion</title>
<meta name="author" content="hussion">
<meta name="description" content="前端开发, Node.js, html, html5, css, css3, mongoDB, redis, SEO, java, struts, hibernate, spring, mybatis">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:site_name" content="hussion"/>
<meta property="og:image" content="undefined"/>
<link href="/favicon.png" rel="icon">
<link rel="alternate" href="/atom.xml" title="hussion" type="application/atom+xml">
<link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43093196-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="bgdiv">
<img src="http://ww3.sinaimg.cn/large/6cdc22a9gw1e8rv2ehbsjj21400mi76a.jpg" alt="">
</div>
<header id="header" class="inner"><div class="alignleft top-title">
<h1><a href="/">hussion</a></h1>
<h2><a href="/">热爱前，后端开发，关注互联网，分享技术和生活</a></h2>
</div>
<nav id="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/about">About</a></li>
<li><a href="http://weibo.com/hussion">Weibo</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div></header>
<div id="content" class="inner">
<div id="main-col" class="alignleft"><div id="wrapper">
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-11-10T13:29:14.000Z"><a href="/2013/11/10/front-end-sence/">Nov 10th, 2013</a></time>
<div class="post-tags">
<span class="tag-前端开发">
<a href="/tags/前端开发/">前端开发</a>
</span>
</div>
<h1 class="title"><a href="/2013/11/10/front-end-sence/">前端MV*框架的意义</a></h1>
</header>
<div class="entry">
<p>经常有人质疑，在前端搞MV*有什么意义？也有人提出这样的疑问：以AngularJS，Knockout，BackBone为代表的MV*框架，它跟jQuery这样的框架有什么区别？我jQuery用得好好的，有什么必要再引入这种框架？</p>
<p>回答这些问题之前，先要理清一些历史，前端从什么时候开始有框架的？</p>
<p>早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，这个时期每个界面上只有很少的JavaScript逻辑，基本不太需要框架。随着AJAX的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了，以jQuery为代表，针对界面上常见的DOM操作，远程请求，数据处理等作了封装，也有专注于处理数据的Underscore，严格来说，这些都不能算框架，而是算库。</p>
<p>库和框架是有一些区别的：库是一种工具，我提供了，你可以不用，即使你用了，也没影响你自己的代码结构。框架则是面向一个领域，提供一套解决方案，如果你用我，就得按照我的方式办事。按照这个定义，jQuery和Underscore都只能算是库，ExtJS和dojo算框架。</p>
<p>MV*框架又是为什么兴起的呢？它的出现，伴随着一些Web产品逐渐往应用方向发展，遇到了在C/S领域相同的问题：由于前端功能的增强、代码的膨胀，导致不得不做“前端的架构”这个事情了。</p>
<p>很多做后端开发的人对前端架构很不屑，认为前端只是很薄的一层东西，做架构干什么？什么，不但要搞架构，还要搞MVC？Java Struts的MVC中，整个前端都只能算是View而已，你还要在这个View里面划分模型和控制器等其他东西？他们中的多数对这个很不屑，但Web前端随着复杂度的增加，很多地方跟客户端已经没有本质区别了。</p>
</div>
<footer>
<div class="alignleft readMore">
<a href="/2013/11/10/front-end-sence/#more" class="more-link">Read More</a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-10-20T02:48:12.000Z"><a href="/2013/10/20/angularjs-style-guide/">Oct 20th, 2013</a></time>
<div class="post-tags">
<span class="tag-AngularJS">
<a href="/tags/AngularJS/">AngularJS</a>
</span>
</div>
<h1 class="title"><a href="/2013/10/20/angularjs-style-guide/">AngularJs编程风格指南</a></h1>
</header>
<div class="entry">
<h3>简介</h3>
<p>本风格指南的目的是展示AngularJS应用的最佳实践和风格指南。<br>这些最佳实践来自于：</p>
<ol>
<li>AngularJS项目源码</li>
<li>本人阅读过的源码和文章</li>
<li>本人的实践经历</li>
</ol>
<p><strong>说明</strong>: 这只是风格指南的草案，主要目的是通过交流以消除分歧，进而被社区广泛采纳。</p>
<p>在本指南中不会包含基本的JavaScript开发指南。这些基本的指南可以在下面的列表中找到：</p>
<ol>
<li><a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" target="_blank">Google's JavaScript style guide</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style" target="_blank">Mozilla's JavaScript style guide</a></li>
<li><a href="https://github.com/styleguide/javascript" target="_blank">GitHub's JavaScript style guide</a></li>
<li><a href="http://javascript.crockford.com/code.html" target="_blank">Douglas Crockford's JavaScript style guide</a></li>
</ol>
<p>对于AngularJS开发，推荐 <a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" target="_blank">Google's JavaScript style guide</a>.</p>
<p>在AngularJS的Github wiki中有一个相似的章节 <a href="https://github.com/ProLoser" target="_blank">ProLoser</a>, you can check it <a href="https://github.com/angular/angular.js/wiki" target="_blank">here</a>.</p>
</div>
<footer>
<div class="alignleft readMore">
<a href="/2013/10/20/angularjs-style-guide/#more" class="more-link">Read More</a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-10-19T10:53:06.000Z"><a href="/2013/10/19/promises-a/">Oct 19th, 2013</a></time>
<div class="post-tags">
<span class="tag-Javascript">
<a href="/tags/Javascript/">Javascript</a>
</span>
<span class="tag-前端开发">
<a href="/tags/前端开发/">前端开发</a>
</span>
</div>
<h1 class="title"><a href="/2013/10/19/promises-a/">Promises/A+ 规范</a></h1>
</header>
<div class="entry">
<h3>1. 术语</h3>
<ul>
<li>promise是拥有<code>then</code>方法，其行为符合此规范的对象或者函数。 </li>
<li>thenable是定义<code>then</code>方法的对象或者函数。 </li>
<li>value是任何合法的javascript值(包括undefined, 一个thenable, 一个promise) </li>
<li>exception是一个值，通过<code>throw</code>语句抛出。 </li>
<li>reason是一个值，表明promise被reject的原因。</li>
</ul>
<h3>2. 要求</h3>
<p><strong>2.1 promise状态</strong></p>
<p>一个promise必须是下面三种状态之一：<code>pending</code>, <code>fulfilled</code>, <code>rejected</code></p>
<ul>
<li>当一个promise是<code>pending</code>状态：</li>
</ul>
<blockquote>
<p>可以转变到fulfilled状态或者rejected状态</p>
</blockquote>
<ul>
<li>当一个promise是<code>fulfilled</code>状态：</li>
</ul>
<blockquote>
<p>1. 不可以转变到其他任何状态<br>2. 必须有一个不能改变的value</p>
</blockquote>
<ul>
<li>当一个promise是<code>rejected</code>状态：</li>
</ul>
<blockquote>
<p>1. 不可以转变到其他任何状态<br>2. 必须有一个不可改变的reason</p>
</blockquote>
<p>在这里，“不能改变”意味着不可改变身份(即 ===)，但并不意味着深不变性。</p>
</div>
<footer>
<div class="alignleft readMore">
<a href="/2013/10/19/promises-a/#more" class="more-link">Read More</a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-26T15:15:34.000Z"><a href="/2013/09/26/javascript-object-function/">Sep 26th, 2013</a></time>
<div class="post-tags">
<span class="tag-Javascript">
<a href="/tags/Javascript/">Javascript</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/26/javascript-object-function/">Object.prototype & Function.prototype</a></h1>
</header>
<div class="entry">
<p><img src="http://ww2.sinaimg.cn/large/6cdc22a9gw1e90ceow8m1j20gz0l4q5r.jpg" alt="Javascript Object Layout"></p>
<p><strong>Object.prototype</strong></p>
<p>javascript是基于原型继承的，任何一个对象都有一个prototype属性。Object.prototype是所有对象的根，并且不可改变。</p>
<figure class="highlight lang-javascript"><pre>Object.prototype = <span class="literal">null</span>;
console.log(Object.prototype); <span class="comment">// [object Object]</span>
</pre></figure>
<p><strong>Object与Object.prototype</strong></p>
<p>Object继承于Object.prototype，增加一个属性给Object.prototype，同时也会反应到Object上。</p>
<figure class="highlight lang-javascript"><pre>Object.prototype.sayHello = <span class="keyword">function</span>() {
<span class="keyword">return</span> <span class="string">'Hello World'</span>;
};
alert(Object.sayHello());<span class="comment">// Hello World</span>
</pre></figure>
<p><strong>Function.prototype与Object.prototype</strong></p>
<p>由于Object.prototype是javascript中的万物之根，所以Function.prototype也同时会继承Object.prototype的所有属性，当然了Function也不会例外。</p>
<figure class="highlight lang-javascript"><pre>Object.prototype.sayHello = <span class="keyword">function</span>() {
<span class="keyword">return</span> <span class="string">'Hello World'</span>;
};
alert(Function.prototype.sayHello());<span class="comment">// Hello World</span>
alert(Function.sayHello());<span class="comment">// Hello World</span>
</pre></figure>
<p><strong>Object/Function/String/Number/Boolean/Array/Date</strong></p>
<p>Object/Function/String/Number/Boolean/Array/Date都是函数，函数又继承于Function.prototype, 所以更改Function.prototype一样会影响到Object/Function/String/Number/Boolean/Array/Date。</p>
<figure class="highlight lang-javascript"><pre>Function.prototype.initType=<span class="string">'Function Type'</span>;
Function.prototype.getType=<span class="keyword">function</span>(){<span class="keyword">return</span> <span class="keyword">this</span>.initType};
<span class="comment">//alert(Object.getType());//Function Type </span>
<span class="comment">//alert(Date.getType());//Function Type </span>
<span class="comment">//alert(Number.getType());//Function Type </span>
<span class="comment">//alert(String.getType());//Function Type </span>
<span class="comment">//alert(Boolean.getType());//Function Type </span>
alert(Array.getType());<span class="comment">//Function Type</span>
</pre></figure>
<p>同样Function.prototype也会把所受Object.prototype的影响，传递给它的下一层级。</p>
<figure class="highlight lang-javascript"><pre>Object.prototype.nameStr=<span class="string">"Object Prototype"</span>;
Object.prototype.getName=<span class="keyword">function</span>(){<span class="keyword">return</span> <span class="keyword">this</span>.nameStr};
alert(Function.prototype.getName());<span class="comment">//Object Prototype </span>
alert(Array.getName());<span class="comment">//Object Prototype </span>
alert(Boolean.prototype.getName());<span class="comment">//Object Prototype</span>
</pre></figure>
<p><strong>Array/Array.prototype与Function.prototype/Object.prototype</strong></p>
<p>Array是函数对象，受Function.prototype的影响，而Array.prototype不是函数对象,所以不受Function.prototype的影响，但是所有的对象都受Object.prototype的影响，所以Array.prototype也会受Object.prototype的影响。</p>
<figure class="highlight lang-javascript"><pre>Object.prototype.nameStr=<span class="string">"Object Prototype"</span>;
Object.prototype.getName=<span class="keyword">function</span>(){<span class="keyword">return</span> <span class="keyword">this</span>.nameStr};
<span class="comment">//alert(Function.prototype.getName());//Object Prototype </span>
<span class="comment">//alert(Boolean.prototype.getName());//Object Prototype </span>
Function.prototype.initFun=<span class="keyword">function</span>(){
<span class="keyword">return</span> <span class="string">'Function.prototype.initFun'</span>;
}
alert(Array.initFun());<span class="comment">//Function.prototype.initFun </span>
<span class="keyword">var</span> arr=[<span class="string">'a'</span>,<span class="string">'b'</span>];
alert(arr.getName());<span class="comment">//Object Prototype </span>
alert(arr.initFun());<span class="comment">//Error: arr.initFun is not a function </span>
alert(arr.initFun);<span class="comment">//undefined</span>
</pre></figure>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-19T05:14:43.000Z"><a href="/2013/09/19/shell-echo-color/">Sep 19th, 2013</a></time>
<div class="post-tags">
<span class="tag-Linux">
<a href="/tags/Linux/">Linux</a>
</span>
<span class="tag-Mac">
<a href="/tags/Mac/">Mac</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/19/shell-echo-color/">Shell中echo输出样式</a></h1>
</header>
<div class="entry">
<p><strong>示例</strong></p>
<figure class="highlight lang-bash"><pre><span class="keyword">echo</span> -e <span class="string">"\033[44;37;5m I am color \033[0m No color"</span>
</pre></figure>
<p>以上命令设置背景成为蓝色，前景白色，闪烁光标，输出字符<code>I am color</code>，然后重新设置屏幕到缺省设置，输出字符 “No color”。“e”是命令 echo 的一个可选项，它用于激活特殊字符的解析器。“\033”引导非常规字符序列。“m”意味着设置属性然后结束非常规字符序列，这个例子里真正有效的字符是 “44;37;5” 和“0”。</p>
<p>修改“44;37;5”可以生成不同颜色的组合，数值和编码的前后顺序没有关系。可以选择的编码如下所示：</p>
<p><strong>编码 颜色/动作</strong></p>
<p>0 重新设置属性到缺省设置<br>1 设置粗体<br>2 设置一半亮度（模拟彩色显示器的颜色）<br>4 设置下划线（模拟彩色显示器的颜色）<br>5 设置闪烁<br>7 设置反向图象<br>22 设置一般密度<br>24 关闭下划线<br>25 关闭闪烁<br>27 关闭反向图象<br>30 设置黑色前景<br>31 设置红色前景<br>32 设置绿色前景<br>33 设置棕色前景<br>34 设置蓝色前景<br>35 设置紫色前景<br>36 设置青色前景<br>37 设置白色前景<br>38 在缺省的前景颜色上设置下划线<br>39 在缺省的前景颜色上关闭下划线<br>40 设置黑色背景<br>41 设置红色背景<br>42 设置绿色背景<br>43 设置棕色背景<br>44 设置蓝色背景<br>45 设置紫色背景<br>46 设置青色背景<br>47 设置白色背景<br>49 设置缺省黑色背景</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-19T04:54:27.000Z"><a href="/2013/09/19/node-error-handle/">Sep 19th, 2013</a></time>
<div class="post-tags">
<span class="tag-NodeJs">
<a href="/tags/NodeJs/">NodeJs</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/19/node-error-handle/">Node.js 异常以及错误的处理</a></h1>
</header>
<div class="entry">
<p>在编程过程中，处理好错误，并且有一个明确的、有效率的处理策略，是一个非常好的编程习惯和规则。 Node.js也不例外，在不同的应用场景中提供了多种不同的错误处理方案。</p>
<p><strong>异常</strong></p>
<p>异步执行代码的错误处理会有点棘手，示例： </p>
<figure class="highlight lang-javascript"><pre><span class="keyword">try</span>
{
setTimeout(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
<span class="keyword">throw</span> <span class="keyword">new</span> Error(<span class="string">'who will catch me?'</span>);
}, <span class="number">1</span>);
}
<span class="keyword">catch</span> (e) {
console.log(<span class="string">'not me'</span>);
}
</pre></figure>
<p>由于<code>setTimeout</code>是异步的，它会安排好待执行的方法然后就立即返回，不抛出任何异常。因此导致<code>catch</code>会直接被忽略，执行结果如下：</p>
<figure class="highlight lang-javascript"><pre>posts/errors » node first.js
timers.js:<span class="number">103</span>
<span class="keyword">if</span> (!process.listeners(<span class="string">'uncaughtException'</span>).length) <span class="keyword">throw</span> e;
^
Error: who will <span class="keyword">catch</span> me?
at Object._onTimeout (<span class="regexp">/Users/g</span>ustavo/code/posts/errors/first.js:<span class="number">4</span>:<span class="number">18</span>)
at Timer.list.ontimeout (timers.js:<span class="number">101</span>:<span class="number">19</span>)
</pre></figure>
<p>这将会导致进程退出，然后打印出堆栈跟踪的错误。那么我们该如何捕获这种未捕获异常呢？</p>
</div>
<footer>
<div class="alignleft readMore">
<a href="/2013/09/19/node-error-handle/#more" class="more-link">Read More</a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-14T02:44:24.000Z"><a href="/2013/09/14/mac-gemini/">Sep 14th, 2013</a></time>
<div class="post-tags">
<span class="tag-Mac">
<a href="/tags/Mac/">Mac</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/14/mac-gemini/">Gemini 查找删除重复文件</a></h1>
</header>
<div class="entry">
<p>Gemini 是一款由MacPaw出品，找寻Mac中重复文件清理删除给电脑腾出更多硬盘空间的实用工具。只需轻松点击就能自动扫描系统并删除重复的文件，界面华丽好用。</p>
<p>功能特点：<br>重复扫描特定的文件夹，简单容易；自动选择不必要的副本；内置预览重复归类有助于删除不必要的副本；独特的算法使扫描和清除的速度更快；为安全起见，Gemini将确保每个重复项目至少留有一个</p>
<p><img src="http://ww1.sinaimg.cn/large/6cdc22a9gw1e8lu19ekh3j20m80dwtbe.jpg" alt=""></p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-14T02:18:16.000Z"><a href="/2013/09/14/mac-wallpaper_wizard/">Sep 14th, 2013</a></time>
<div class="post-tags">
<span class="tag-Mac">
<a href="/tags/Mac/">Mac</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/14/mac-wallpaper_wizard/">Wallpaper Wizard 最好的壁纸应用</a></h1>
</header>
<div class="entry">
<p><code>Wallpaper Wizard</code>是mac上为数不多的壁纸应用中最为突出的，漂亮简洁的界面，以及海量高清壁纸，不同分类，任你下载，推荐指数5颗星 ★★★★★。</p>
<p><img src="http://ww3.sinaimg.cn/large/6cdc22a9gw1e8ltcod0b0j20uo0msgrd.jpg" alt=""><br><img src="http://ww2.sinaimg.cn/large/6cdc22a9gw1e8ltdwpx9ij20uo0msn2q.jpg" alt=""></p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-10T15:37:08.000Z"><a href="/2013/09/10/angular-controller/">Sep 10th, 2013</a></time>
<div class="post-tags">
<span class="tag-AngularJS">
<a href="/tags/AngularJS/">AngularJS</a>
</span>
<span class="tag-前端开发">
<a href="/tags/前端开发/">前端开发</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/10/angular-controller/">Angular中Controller的几种注册方式</a></h1>
</header>
<div class="entry">
<p><strong>1.最直接最简单的方式</strong></p>
<figure class="highlight lang-javascript"><pre><span class="function"><span class="keyword">function</span> <span class="title">MyCtrl</span><span class="params">($scope)</span> {</span>
$scope.xxx = <span class="string">'balabala'</span>;
}
</pre></figure>
<p>其对应的<code>view</code>如下：</p>
<figure class="highlight lang-html"><pre><span class="doctype"><!DOCTYPE html></span>
<span class="tag"><<span class="title">html</span> <span class="attribute">ng-app</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"path/to/angular.min.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">utf-8</span> /></span>
<span class="tag"><<span class="title">title</span>></span>JS Bin<span class="tag"></<span class="title">title</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">ng-controller</span>=<span class="value">"MyCtrl"</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</pre></figure>
<p>这种写法虽然简单，但是有点小问题，就是在javascript最小化(Minification)的时候，参数<code>$scope</code>是区域参数，所以名称会被改变成类似a/b/…,而AngularJS在执行注入的时候就会找不到<code>$scope</code>,因此无法正常注入。解决方案有两个，如下所示：</p>
<figure class="highlight lang-javascript"><figcaption><span>方式一</span></figcaption><pre><span class="function"><span class="keyword">function</span> <span class="title">MyCtrl</span><span class="params">($scope)</span> {</span>
$scope.xxx = <span class="string">'balabala'</span>;
}
<span class="comment">//加上这句</span>
MyCtrl.$inject = [<span class="string">'$scope'</span>];
</pre></figure>
<figure class="highlight lang-javascript"><figcaption><span>方式二</span></figcaption><pre><span class="keyword">var</span> MyCtrl = [<span class="string">'$scope'</span>, <span class="keyword">function</span>($scope) {
$scope.xxx = <span class="string">'balabala'</span>;
}];
</pre></figure>
<p><em>推荐方式二这种写法。</em></p>
<p><strong>2.通过自定义一个Module,并将Controller声明注册在这个Module内</strong></p>
<p>这种方式，其实跟第一种方式差不多。但是这种方式，是模块化的写法，随着项目的逐渐复杂，会更容易管理。</p>
<figure class="highlight lang-javascript"><pre><span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);
app.controller(<span class="string">'MyCtrl'</span>, <span class="function"><span class="keyword">function</span> <span class="title">MyCtrl</span><span class="params">($scope)</span> {</span>
$scope.xxx = <span class="string">'balabala'</span>;
});
</pre></figure>
<p>当你自定义了<code>myApp</code>模块，也就意味着controller只会存在于<code>myApp</code>模块内，所以在view模板html上，就必须修改np-app的属性值为<code>myApp</code>。</p>
<figure class="highlight lang-html"><pre><span class="doctype"><!DOCTYPE html></span>
<span class="tag"><<span class="title">html</span> <span class="attribute">ng-app</span>=<span class="value">"myApp"</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"path/to/angular.min.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">utf-8</span> /></span>
<span class="tag"><<span class="title">title</span>></span>JS Bin<span class="tag"></<span class="title">title</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">ng-controller</span>=<span class="value">"MyCtrl"</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</pre></figure>
<p>但是这种方式在js最小化的时候，一样存在注入失败的问题，我们可以仿照方式一的解决方案来解决。</p>
<figure class="highlight lang-javascript"><pre><span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);
app.controller(<span class="string">'MyCtrl'</span>, [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span> <span class="title">MyCtrl</span><span class="params">($scope)</span> {</span>
$scope.xxx = <span class="string">'balabala'</span>;
}]);
<span class="comment">//同时还可以这样写，并且可以声明多个</span>
<span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);
app.controller({
<span class="string">'MyCtrl'</span>: [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span> <span class="title">MyCtrl</span><span class="params">($scope)</span> {</span>$scope.xxx = <span class="string">'balabala'</span>;}],
<span class="string">'MyCtrl2'</span>: [<span class="string">'$scope'</span>, <span class="function"><span class="keyword">function</span> <span class="title">MyCtrl2</span><span class="params">($scope)</span> {</span>$scope.xxx = <span class="string">'balabala'</span>;}]
});
</pre></figure>
<p><strong>3.通过$controllerProvider注册控制器</strong></p>
<p>这种注册方式更加底层一些，比以上两种看起来要复杂。</p>
<figure class="highlight lang-javascript"><pre><span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);
app.config([<span class="string">'$controllerProvider'</span>, <span class="keyword">function</span>($controllerProvider) {
$controllerProvider.register(<span class="string">'MyCtrl'</span>, [<span class="string">'$scope'</span>, <span class="keyword">function</span>($scope) {
$scope.xxx = <span class="string">'balabala'</span>;
}]);
}]);
</pre></figure>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<!-- <div class="icon"></div> -->
<time class="index-post-time" datetime="2013-09-10T13:46:27.000Z"><a href="/2013/09/10/angular-ngswitch/">Sep 10th, 2013</a></time>
<div class="post-tags">
<span class="tag-AngularJS">
<a href="/tags/AngularJS/">AngularJS</a>
</span>
<span class="tag-前端开发">
<a href="/tags/前端开发/">前端开发</a>
</span>
</div>
<h1 class="title"><a href="/2013/09/10/angular-ngswitch/">关于AngularJs中ngSwitch进行切换时，获取不到Model</a></h1>
</header>
<div class="entry">
<figure class="highlight lang-javascript"><figcaption><span>Controller</span></figcaption><pre><span class="function"><span class="keyword">function</span> <span class="title">myCtrl</span><span class="params">($scope)</span> {</span>
$scope.stage = <span class="number">1</span>;
$scope.switchStage = <span class="keyword">function</span>() {
$scope.stage = ($scope.stage == <span class="number">1</span>) ? <span class="number">2</span> : <span class="number">1</span>;
}
}
</pre></figure>
<figure class="highlight lang-html"><figcaption><span>View</span></figcaption><pre><span class="tag"><<span class="title">div</span> <span class="attribute">ng-controller</span>=<span class="value">"myCtrl"</span>></span>
<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">value</span>=<span class="value">"switch"</span> <span class="attribute">ng-click</span>=<span class="value">"switchStage()"</span>/></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">ng-switch</span> <span class="attribute">on</span>=<span class="value">"stage"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">ng-switch-when</span>=<span class="value">"1"</span>></span>
<span class="tag"><<span class="title">select</span> <span class="attribute">ng-model</span>=<span class="value">"selectModel"</span>></span>
<span class="tag"><<span class="title">option</span>></span>please select one<span class="tag"></<span class="title">option</span>></span>
<span class="tag"><<span class="title">option</span>></span>xxx<span class="tag"></<span class="title">option</span>></span>
<span class="tag"><<span class="title">option</span>></span>xxxxxx<span class="tag"></<span class="title">option</span>></span>
<span class="tag"></<span class="title">select</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">span</span> <span class="attribute">ng-bind</span>=<span class="value">"selectModel"</span>></span><span class="tag"></<span class="title">span</span>></span>
<span class="tag"></<span class="title">div</span>></span>
</pre></figure>
<p>如上面代码，在选择<code>option</code>的时候，我们发现，在<code>ng-switch</code>外面的<code>span</code>标签里，<code>ng-bind</code>里绑定的同一个<code>model</code>却没有抓到值，这是为什么呢？官网的Api上说了这么一句话：</p>
<blockquote>
<p>This directive creates new scope </p>
</blockquote>
<p>意思就是：ng-switch这个标签创建了一个新的scope，也就是在controller-“myCtrl”下面创建了一个subScope，所以导致ng-bind的model取不到值，这是ng-switch的一个坑，解决办法也很简单：</p>
<blockquote>
<p>把ng-model=“selectModel”改为：ng-model=“$parent.selectModel” </p>
</blockquote>
<p>这样，咱们的ng-bind中的selectModel就可以正常取回值了。</p>
</div>
<footer>
<div class="clearfix"></div>
</footer>
</div>
</article>
<nav id="pagination">
<a href="/page/2/" class="alignright next">Next</a>
<div class="clearfix"></div>
</nav></div></div>
<!-- <aside id="sidebar" class="alignright"></aside> -->
<div class="clearfix"></div>
</div>
<footer id="footer" class="inner"><div>
copyright © 2013 hussion
</div>
<div id="scrollBtn"></div>
<div class="clearfix"></div></footer>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/easing.1.3.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('#scrollBtn').fadeIn('slow');
} else {
$('#scrollBtn').fadeOut('slow');
}
});
$('#scrollBtn').click(function(e) {
$('html, body').animate({
scrollTop: 0},
1500,
'easeOutBounce');
});
$('.fancybox').fancybox({
'titleShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'easingIn': 'easeOutBack',
'easingOut': 'easeInBack'
});
})(jQuery);
</script>
</body>
</html>