-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
858 lines (479 loc) · 32.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鱼池</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="My Own Blog on Hexo">
<meta property="og:type" content="website">
<meta property="og:title" content="鱼池">
<meta property="og:url" content="http://yaochiqkl.github.io/index.html">
<meta property="og:site_name" content="鱼池">
<meta property="og:description" content="My Own Blog on Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="鱼池">
<meta name="twitter:description" content="My Own Blog on Hexo">
<link rel="alternative" href="/atom.xml" title="鱼池" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" href="/css/style.css" type="text/css">
</head>
<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="/leehom.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">烙鱼</a></h1>
</hgroup>
<p class="header-subtitle">我的个人博客</p>
<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="/about">关于</a></li>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/yaochiqkl" title="github">github</a>
<a class="rss" target="_blank" href="/atom.xml" title="rss">rss</a>
<a class="douban" target="_blank" href="http://www.douban.com/people/rhythmfish/" title="douban">douban</a>
<a class="weibo" target="_blank" href="http://weibo.com/rhythmfish" title="weibo">weibo</a>
</div>
</nav>
</section>
<section class="switch-part switch-part2">
<div class="widget tagcloud" id="js-tagcloud">
<a href="/tags/CSS/" style="font-size: 10px;">CSS</a> <a href="/tags/ES6/" style="font-size: 10px;">ES6</a> <a href="/tags/ES7-JavaScript/" style="font-size: 10px;">ES7 JavaScript</a> <a href="/tags/HTML5/" style="font-size: 10px;">HTML5</a> <a href="/tags/Node/" style="font-size: 10px;">Node</a> <a href="/tags/WordPress/" style="font-size: 10px;">WordPress</a> <a href="/tags/ajax/" style="font-size: 15px;">ajax</a> <a href="/tags/books/" style="font-size: 10px;">books</a> <a href="/tags/essay/" style="font-size: 15px;">essay</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/https/" style="font-size: 10px;">https</a> <a href="/tags/interview/" style="font-size: 20px;">interview</a> <a href="/tags/jQuery/" style="font-size: 10px;">jQuery</a> <a href="/tags/实习总结/" style="font-size: 10px;">实习总结</a> <a href="/tags/求职/" style="font-size: 10px;">求职</a> <a href="/tags/网站性能优化/" style="font-size: 10px;">网站性能优化</a> <a href="/tags/面经/" style="font-size: 10px;">面经</a>
</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">烙鱼</h1>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img lazy-src="/leehom.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author">烙鱼</h1>
</hgroup>
<p class="header-subtitle">我的个人博客</p>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">归档</a></li>
<li><a href="/about">关于</a></li>
<div class="clearfix"></div>
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/yaochiqkl" title="github">github</a>
<a class="rss" target="_blank" href="/atom.xml" title="rss">rss</a>
<a class="douban" target="_blank" href="http://www.douban.com/people/rhythmfish/" title="douban">douban</a>
<a class="weibo" target="_blank" href="http://weibo.com/rhythmfish" title="weibo">weibo</a>
</div>
</nav>
</header>
</div>
</nav>
<div class="body-wrap">
<article id="post-JobSeekingExperience" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/10/13/JobSeekingExperience/" class="article-date">
<time datetime="2016-10-13T09:27:59.000Z" itemprop="datePublished">2016-10-13</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/10/13/JobSeekingExperience/">校招求职心得与感想</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>十月金秋，正是收获的季节，同时也是成电大四的莘莘学子求职、深造的关键期，意向工作的我在这个阶段很幸运地拿到了理想中的offer，求职路也尘埃落定。先说下整体情况，作为成电信软2013级数字动漫方向的一名普通学生，没有特别厉害的竞赛成绩或者工作室经历，在大三以前，进大公司也一直是遥不可及的梦想，大三的时间里，通过自学、实习等一系列途径极大地锻炼和提升了自己的工程能力，宛如咸鱼翻身，找到了自己的定位。秋招以来，所投的几家大公司基本都有斩获，目前拿到了阿里巴巴、百度、网易互联网和搜狐的offer，职位都是前端开发工程师，其中网易是通过一段时间的实习通过考核顺利转正。下面分享一下自己求职以来获得的心得和感悟，希望对大家有所帮助。<br>
</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/求职/">求职</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/面经/">面经</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2016/10/13/JobSeekingExperience/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="_post-intership-summary" class="article article-type-_post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/08/12/intership-summary/" class="article-date">
<time datetime="2016-08-12T14:52:50.000Z" itemprop="datePublished">2016-08-12</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/08/12/intership-summary/">网易半年实习总结&收获&感想</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>自一月来网易实习以来，掐指一数已经实习了大半年了。实习内容主要是对内测试平台相关前端开发。这半年时间里，无论是从技能还是心智上，我都成长了很多。总的来说，我所接触的有两个大的项目，下面以项目入手，总结下所学所做、锻炼的能力和遇到的一些问题。<br>
</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/实习总结/">实习总结</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2016/08/12/intership-summary/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-What-is-Symbol-in-ES6" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/08/10/What-is-Symbol-in-ES6/" class="article-date">
<time datetime="2016-08-10T15:24:08.000Z" itemprop="datePublished">2016-08-10</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/08/10/What-is-Symbol-in-ES6/">What is Symbol in ES6?</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>I used to be asked in an interview : Do you know Symbol in ES6? And I answered nope and explained other features such as lamda and ClASS. But it doesn’t help, however, the interviwer doesn’t care at all. :’(<br>Recent days I’ve tried to learn about <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol" target="_blank" rel="external">Symbol</a>.<br>MDN define it as below:</p>
<blockquote>
<p>A symbol is a unique and immutable data type and may be used as an identifier for object properties. The Symbol object is an implicit object wrapper for the symbol primitive data type. </p>
</blockquote>
<p>It makes me confused at first. I screamed inside my heart : What the fxxt is it ?<br>What is <code>an implicit object wrapper</code> ? The 7th basic type of data in JavaScript? Where should we use it? </p>
<p>And I tried to read some <a href="http://bubkoo.com/2015/07/24/es6-in-depth-symbols/" target="_blank" rel="external">articles</a>, most of that were same and translated into Chinese form English apparently. Bad translating and making people confused. What is <code>这里也有几个可能的问题。他们都与这样的事实相关，那就是你的代码不是唯一一个使用 DOM 的代码。</code>? What does this sentence mean? I couldn’t read it once more.<br>I’d better read it from English cause it’ll be easier for me to understand.<br>I tried to use <a href="https://babeljs.io/repl/" target="_blank" rel="external">BABEL</a> to translate symbol to ES5, but it doesn’t help either. It won’t compile this feature.<br>Finally I chose to try this feature in Chrome Devtool and figured out the usage of <code>SYMBOL</code>.</p>
<p>Practice is the best way to comprehend the<br><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable"><span class="keyword">var</span> people_I_know</span> = {}</span><br><span class="line"><span class="variable"><span class="keyword">var</span> friend1</span> = Symbol(<span class="string">"friend"</span>);</span><br><span class="line">people_I_know[friend1] = {name: <span class="string">"Jude Law"</span>, gender: <span class="string">"male"</span>}</span><br><span class="line"><span class="variable"><span class="keyword">var</span> friend2</span> = Symbol(<span class="string">"friend"</span>);</span><br><span class="line">people_I_know[friend2] = {name: <span class="string">"Theo James"</span>, gender: <span class="string">"male"</span>}</span><br><span class="line"><span class="variable"><span class="keyword">var</span> uncle1</span> = Symbol(<span class="string">"relative"</span>);</span><br><span class="line">people_I_know[uncle1] = {name: <span class="string">"Bradley Cooper"</span>, gender: <span class="string">"male"</span>}</span><br><span class="line"></span><br><span class="line"><span class="comment">//Object {Symbol(friend): Object, Symbol(friend): Object, Symbol(relative): Object}</span></span><br><span class="line">console.log(people_I_know);</span><br><span class="line"><span class="comment">//even if I set variable friend1 or friend2 free. It won't influence object at all.</span></span><br><span class="line"><span class="comment">//The only difference is that I cannot access people named 'Jude Law'</span></span><br><span class="line"><span class="comment">//Luckily, ES6 also provides us **Object.getOwnPropertySymbols** to loop through all the symbols of an object </span></span><br><span class="line"><span class="comment">//and another one is **Reflect.ownKeys**. It will return an array in which includes all the property name of object</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable"><span class="keyword">var</span> friend3</span> = <span class="string">"friend"</span>,</span><br><span class="line"> friend4 = <span class="string">"friend"</span>;</span><br><span class="line">people_I_know[friend3] = {name: <span class="string">"f3"</span>};</span><br><span class="line">people_I_know[friend4] = {name: <span class="string">"f4"</span>};</span><br><span class="line"><span class="comment">//Aparently in this case object will only have a property "friend" and value "{name: 'f4'}"</span></span><br></pre></td></tr></table></figure></p>
<p>We introduce <code>Symbol</code> in order to prevent the conflict of same property name. Everytime we call the <code>Symbol</code>, it will return a exclusive value for you. You’ll never need to worry about this issue.</p>
<blockquote>
<p>参考链接<br><a href="https://segmentfault.com/a/1190000003854407" target="_blank" rel="external">ES6学习笔记3—Symbol</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/ES6/">ES6</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-javascript-upgrade-will-nix-object-observation-feature" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/07/30/javascript-upgrade-will-nix-object-observation-feature/" class="article-date">
<time datetime="2016-07-29T16:10:52.000Z" itemprop="datePublished">2016-07-30</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/07/30/javascript-upgrade-will-nix-object-observation-feature/">关于前端模板引擎和曾经被看好的Object.observe的那些事儿</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近在看一些前端MV<em>框架的实现原理，按照我的理解来看，在模板渲染方式上实现方式有以下几种：<br>1.基于脏检查的模式，包括熟悉的RegularJS和AngularJS<br>2.基于defineOwnProperty的getter和setter模式，比如avalon vue1<br>3.基于Vitual Dom的diff并局部替换真实DOM Tree的模式，大名鼎鼎的React<br>4.基于<em>*Object.observe(O.o)</em></em>直接监听数据的变化（下面讨论的重点）</p>
<p>===<br>在去年的这个时候，Chrome的V8引擎实现了(O.o)，被认为对将来的前端框架的一次革新，它更新页面模板性能上提高了很多倍。<br>相关文章诸如<a href="http://www.w3ctech.com/topic/1097" target="_blank" rel="external">Object.observe() 引爆数据绑定革命</a>，在RegularJS中，其作者（郑海波大神）甚至还在Regular上留下了待更新的部分。<br><code>regular正是在这种百花齐放的时候产生, 最终在实现上采取了angular的数据更新策略(但是提取了表达式的依赖关系以便在Object.observe正式到来时切换到脏检查+observe的形式)提倡极致的声明式和裸数据操作, 依赖于基于字符串的模板描述结构结合更规范性的类式继承的组件体系来定义数据层的业务逻辑.</code><br><a href="http://www.tuicool.com/articles/uMZzU3j" target="_blank" rel="external">RegularJS —— 来自网易的JavaScript MVC框架</a><br>当我在 <a href="www.canIuse.com">CanIuse</a> 去查询它的实现的范围时，发现只有Chrome的特定版本（45）实现，并在其后的版本删除了这个特性。<br>然而却尴尬地发现这个特性已经被移除草案了。详见：<a href="https://www.zhihu.com/question/39224538" target="_blank" rel="external">Object.observe是否被移除ES7草案？</a> </p>
<p><a href="http://www.infoworld.com/article/3002186/javascript/javascript-upgrade-will-nix-object-observation-feature.html" target="_blank" rel="external">JavaScript upgrade will nix object observation feature</a>这篇文章中介绍了其背景。</p>
<p>===</p>
<p>大概的意思是说情况有所变更，导致其不再适用，随着三年过去，基于数据绑定的组件是很难去匹配(O.o)的，这将会导致前端更混乱的场面。</p>
<p>Object.observe, a planned feature for JavaScript that would allow for direct observation of changes to objects, will be removed from a planned update to the ECMAScript specification under a plan floated this week.</p>
<p>The plan, offered by Object.observe proponent Adam Klein on the ECMAScript discussion archives site, says circumstances surrounding the technology have changed, making it unfeasible.</p>
<p>Object-observe has been slated for inclusion in ECMAScript 7, also known as ECMAScript 2016. Klein wants to withdraw Object.observe from the TC39 committee, which has jurisdiction over ECMAScript, the technical specification underlying JavaScript. He also said he’ll remove support for it from Google’s V8 JavaScript engine.</p>
<p>“Over three years ago, Rafael Weinstein, Erik Arvidsson, and I set out to design and implement what we believed to be the primitive underlying the data-binding system of MDV (model-driven views),” Klein said in a blog post. “We prototyped an implementation in a branch of V8, then got agreement from the V8 team to build a real version upstream, while pushing Object.observe (O.o) as a part of the upcoming ES7 standard and working with the Polymer team to build their data-binding system on top of O.o.</p>
<p>“Three years later, the world has changed in a variety of ways,” he said. While data-binding frameworks such as Ember and Angular showed interest, it was difficult to see how they could evolve their existing model to match O.o. “Polymer rewrote from the ground up for its 1.0 release, and in that rebuilding did not utilize O.o. And React’s processing model, which tries to avoid the mutable state inherent in data-binding systems, has become quite popular on the Web.”</p>
<p>Klein recommends developers who have experimented with Object.observe instead consider a polyfill such as MaxArt2501/object-observe or a wrapper library such as polymer/observe-js, for observing changes in JavaScript data.</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/ES7-JavaScript/">ES7 JavaScript</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-FunctionCurryingAndBindInJavascript" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/15/FunctionCurryingAndBindInJavascript/" class="article-date">
<time datetime="2016-03-15T15:38:22.000Z" itemprop="datePublished">2016-03-15</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/15/FunctionCurryingAndBindInJavascript/">FunctionCurryingAndBindInJavascript</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>函数柯里化及bind相关<br>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a href="/2016/03/15/FunctionCurryingAndBindInJavascript/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-iqiyi-interview" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/01/07/iqiyi-interview/" class="article-date">
<time datetime="2016-01-07T13:31:28.000Z" itemprop="datePublished">2016-01-07</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/07/iqiyi-interview/">爱奇艺面试</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>爱奇艺也毕竟是大厂，百度的子厂，投了在线的简历，没有注意到地点，岗位是在上海，而爱奇艺（上海）只是一其个分部。<br>
</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/interview/">interview</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2016/01/07/iqiyi-interview/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-mei-tuan-interview" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/01/07/mei-tuan-interview/" class="article-date">
<time datetime="2016-01-07T13:31:10.000Z" itemprop="datePublished">2016-01-07</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/07/mei-tuan-interview/">美团面经</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>面试的难度很大，无论是从广度还是深度，都要求很高。<br>
</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/interview/">interview</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2016/01/07/mei-tuan-interview/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-books" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/25/books/" class="article-date">
<time datetime="2015-12-25T13:45:35.000Z" itemprop="datePublished">2015-12-25</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/25/books/">2015下半年书单</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="2015下半年书单">2015下半年书单</h2><h3 id="前端类">前端类</h3><p>Head First HTML&CSS (已读)<br>JavaScript DOM 编程艺术（2E)(已读)<br>Head First Ajax(已读)<br>高性能网站建设指南（已读）<br>精通正则表达式（3E)（已读）<br>Node.js开发指南（已读）<br>Head First PHP & MySQL (已读)<br>锋利的jQuery（2E)（已读）<br>HTML5与CSS3基础教程（7E）[最新版：8E]（已读）<br>PHP和MySQL程序开发（4E）（已读）</p>
<p>HTTP权威指南（粗略已读）<br>CSS权威指南（3E)（粗略已读）<br>HTM5程序设计（2E)（粗略已读）<br>——————————————————————————————————<br>JavaScript 高级程序设计（3E)(反复研读) ★★★★★<br>高性能网站建设进阶指南（在读）<br>JavaScript语言精粹（在读）<br>JavaScript设计模式（在读）<br>——————————————————————————————————<br>JavaScript权威指南（6E）（已购）★★★★★<br>深入浅出Node.js（过难）</p>
<hr>
<h3 id="前端相关框架">前端相关框架</h3><ul>
<li>JQuery (已学)</li>
<li>Bootsrap (粗略已学)</li>
<li>VUE.js (在学)</li>
<li>Angular.js</li>
<li>Backbone.js</li>
<li>React.js (在学)</li>
<li>Require.js</li>
<li>Gulp.js</li>
<li>Grunt Yoman Bower</li>
<li>Webpack</li>
</ul>
<hr>
<h3 id="程序类">程序类</h3><p>算法导论（在读）<br>编程之美 + 编程珠玑 + 算法导论 + 剑指offer【程序员必读经典】<br>编译原理<br>计算机科学导论</p>
<hr>
<h3 id="人文类">人文类</h3><p><strong>已读</strong><br>围城<br>欧亨利短篇精选<br>莫泊桑短篇精选<br>雪国<br>白夜行<br>——————————————————————————————————<br><strong>在读</strong><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/books/">books</a></li></ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-WangYi-Interview" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/22/WangYi-Interview/" class="article-date">
<time datetime="2015-12-22T13:30:42.000Z" itemprop="datePublished">2015-12-22</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/22/WangYi-Interview/">网易面经</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>尽管已经在百词斩实习了，尽管百词斩的待遇也很好，但是心中仍有一个大公司的梦。<br>
</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/interview/">interview</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2015/12/22/WangYi-Interview/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<article id="post-cross-domain" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2015/12/20/cross-domain/" class="article-date">
<time datetime="2015-12-20T07:41:02.000Z" itemprop="datePublished">2015-12-20</time>
</a>
</div>
<div class="article-inner">
<input type="hidden" class="isFancy" />
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/12/20/cross-domain/">js实用的跨域方法及原理详解</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。</p>
<p>下表给出了相对<a href="http://store.company.com/dir/page.html同源检测的结果">http://store.company.com/dir/page.html同源检测的结果</a>:<br><img src="http://images.cnitblog.com/blog/130623/201307/15184525-747de461b3b14f938b443e72ea25b25a.png" alt=""><br>
</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/ajax/">ajax</a></li></ul>
</div>
<p class="article-more-link">
<a href="/2015/12/20/cross-domain/#more">more >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/">Next »</a>
</nav>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
© 2016 烙鱼
</div>
<div class="footer-right">
<a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
</div>
</div>
</div>
</footer>
</div>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
<script>
var yiliaConfig = {
fancybox: true,
mathjax: true,
animate: true,
isHome: true,
isPost: false,
isArchive: false,
isTag: false,
isCategory: false,
open_in_new: false
}
</script>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;z-index:2000;">
<a title="返回顶部"><img src="/images/scrollup.png"/></a>
</div>
<script src="/js/totop.js"></script>
</div>
</body>
</html>