-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
621 lines (540 loc) · 103 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[鱼池]]></title>
<subtitle><![CDATA[我的个人博客]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yaochiqkl.github.io/"/>
<updated>2016-10-17T03:32:42.257Z</updated>
<id>http://yaochiqkl.github.io/</id>
<author>
<name><![CDATA[烙鱼]]></name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title><![CDATA[校招求职心得与感想]]></title>
<link href="http://yaochiqkl.github.io/2016/10/13/JobSeekingExperience/"/>
<id>http://yaochiqkl.github.io/2016/10/13/JobSeekingExperience/</id>
<published>2016-10-13T09:27:59.000Z</published>
<updated>2016-10-17T03:32:42.257Z</updated>
<content type="html"><![CDATA[<p>十月金秋，正是收获的季节，同时也是成电大四的莘莘学子求职、深造的关键期，意向工作的我在这个阶段很幸运地拿到了理想中的offer，求职路也尘埃落定。先说下整体情况，作为成电信软2013级数字动漫方向的一名普通学生，没有特别厉害的竞赛成绩或者工作室经历，在大三以前，进大公司也一直是遥不可及的梦想，大三的时间里，通过自学、实习等一系列途径极大地锻炼和提升了自己的工程能力，宛如咸鱼翻身，找到了自己的定位。秋招以来，所投的几家大公司基本都有斩获，目前拿到了阿里巴巴、百度、网易互联网和搜狐的offer，职位都是前端开发工程师，其中网易是通过一段时间的实习通过考核顺利转正。下面分享一下自己求职以来获得的心得和感悟，希望对大家有所帮助。<br><a id="more"></a><br><strong>首先是长期的准备。</strong>有一句名言说的好，博观而约取，厚积而薄发。尽早地为自己求职做准备，是得到好工作的不二法门。<br>1、实习很重要，尽早地出去实习，信软学院的卓越工程师计划就是很好的机会，实习能够系统和集中地训练某个确切的岗位所需要的技能，也是求职时的加分点。如果有可能，也尽量去大公司实习，大公司难度高，而且普遍被大家认可。<br>2、打好计算机相关学科基础。在面试过程中无论什么技术岗，都会或多或少地会考察计算机网络、算法和数据结构的一些知识，这些知识在工作以后也会有深远的影响，及时是前端。<br>3、针对不同的岗位深入学习相关的语言基础和特性，就好比我作为一个前端，首先是熟练Javascript的原型链、闭包内容，其次对热门的一些前端框架Angular、React有所了解和学习，对比其他岗位诸如后台开发，要熟练掌握一门主流的后台开发语言等等。<br>4、学好英语很重要，新技术、框架出来，往往都是先有完善的英文文档。中文文档不一定全面、完全正确，逼着自己看英文文档，久而久之，相信有很大提升。<br><strong>其次是校招时的临阵磨枪。</strong>临阵磨枪，不快也光。<br>1、包装好自己的简历，突出自己的核心竞争力，尽量少写与求职岗位无关的内容，如果是投递技术岗位，写上编程项目经验总要好过放上去自己某段时间去山区支教的经历。没有大项目，也可以写上小项目、放上自己的github地址，抑或是自学过程中做的Demo来充实简历；<br>2、多刷别人的面试经验，多看相关的面试题，利用好搜索引擎，我们得承认面试有时就像期末考试一般，“书读百遍其义自见”。在一些OnlineJudge平台（比如牛客网、leetcode）上，多多练习相关笔试、面试题，做题的过程也是对只是的查漏补缺；<br>3、懂得一定的面试技巧，学会如何去引导面试官对自己擅长的领域进行考察，对于不会、没有接触过的面试题尝试讲一下自己的思路，询问面试官的提示等。不能太诚恳地回答“听说你们公司开的高所以想进你们公司”，其他详见各个面经。<br>4、抓住机遇，多多留意公司的招聘渠道，包括但不限于公司的官方招聘网站、招聘消息群、相关公众号等等。同时要对自己进行合理定位，如果机会不大，不要抓着BAT不放，好公司还能很多。利用手里的资源，比如说找到在公司实习的师兄，在正式校招前先内推一波，往往能够多一次招聘的机会，有时也可以免掉复杂的笔试。</p>
<hr>
<p>总的来说，找到工作只是另一阶段的开始。要保持不断的学习，培养强大的自学能力，才能够保持自己的核心竞争力。涉足一门领域还不够深的时候，就先不要去担忧不好找工作、程序员吃“青春饭”等等的问题， 要相信技术岗是脑力活，社会只会淘汰那些不思进取的人。切忌投机取巧，克服懒惰，勤奋起来，坚持下去，相信有一天，offer自会手到擒来。<br>本人行文水平有限，知之甚浅，上面只是个人的一些想法，并不是金科玉律，适用于每个人，一定要根据的特点，结合自己的目标，制定好相关的计划，做好完善的准备。最后，祝愿大家能够找到心仪的工作，加油！</p>
]]></content>
<summary type="html">
<![CDATA[<p>十月金秋，正是收获的季节，同时也是成电大四的莘莘学子求职、深造的关键期，意向工作的我在这个阶段很幸运地拿到了理想中的offer，求职路也尘埃落定。先说下整体情况，作为成电信软2013级数字动漫方向的一名普通学生，没有特别厉害的竞赛成绩或者工作室经历，在大三以前，进大公司也一直是遥不可及的梦想，大三的时间里，通过自学、实习等一系列途径极大地锻炼和提升了自己的工程能力，宛如咸鱼翻身，找到了自己的定位。秋招以来，所投的几家大公司基本都有斩获，目前拿到了阿里巴巴、百度、网易互联网和搜狐的offer，职位都是前端开发工程师，其中网易是通过一段时间的实习通过考核顺利转正。下面分享一下自己求职以来获得的心得和感悟，希望对大家有所帮助。<br>]]>
</summary>
<category term="求职" scheme="http://yaochiqkl.github.io/tags/%E6%B1%82%E8%81%8C/"/>
<category term="面经" scheme="http://yaochiqkl.github.io/tags/%E9%9D%A2%E7%BB%8F/"/>
</entry>
<entry>
<title><![CDATA[网易半年实习总结&收获&感想]]></title>
<link href="http://yaochiqkl.github.io/2016/08/12/intership-summary/"/>
<id>http://yaochiqkl.github.io/2016/08/12/intership-summary/</id>
<published>2016-08-12T14:52:50.000Z</published>
<updated>2016-08-12T14:57:39.774Z</updated>
<content type="html"><![CDATA[<p>自一月来网易实习以来，掐指一数已经实习了大半年了。实习内容主要是对内测试平台相关前端开发。这半年时间里，无论是从技能还是心智上，我都成长了很多。总的来说，我所接触的有两个大的项目，下面以项目入手，总结下所学所做、锻炼的能力和遇到的一些问题。<br><a id="more"></a></p>
<hr>
<h3 id="渠道发布平台">渠道发布平台</h3><p>前两个月参与制作渠道发布平台的后期迭代开发，该项目采用的是原生的rails erb模板，前端方面采用的是JQuery和JQuery UI框架，该项目是移动应用一键发布更新的平台，为App上线各大主流市场提供了极大的便利。 </p>
<h4 id="锻炼的能力">锻炼的能力</h4><p>1.<strong>阅读他人源码的能力</strong>：项目已成型，相关目录结构、代码繁杂，代码也几经人手，不是每一段代码都能简单、易读抑或有良好的封装和注释，部分代码甚至让人摸不清头脑，在这样的情况下，如何快速上手、熟悉项目便是成了重中之重。尽管给了一个看似普通的需求，但是如何在正确的位置采用正确的方式来编程还是需要探究一番的。<br>2.<strong>快速适应新的环境</strong>：对代码的规范、相关流程、相关业务等有所熟悉。对git仓库的一些规范，如何提PR，如何去测试和review。<br>3.<strong>快速学习的能力</strong>：这边采用的是JQueryUI框架，中文文档不是很全面（像Highcharts中文网一样坑），调用的时候只能去看官网的文档，这时候发现自己的英语特长发挥了很大的作用。从下拉组件开始到日历组件等，保持新增的页面和内容与之前保持一致。</p>
<h4 id="遇到的问题">遇到的问题</h4><p>1.阅读英文文档的能力有待提高，尽管四六级考出了excellent的成绩，发现读一些框架的文档时还是有一些吃力，吃力的原因在于对一些计算机专用术语的名词不熟悉，不过这不是问题，只要多读下去，相关术语的词汇量一定会有极大的提高。</p>
<hr>
<h3 id="测试用例管理平台">测试用例管理平台</h3><h4 id="锻炼的能力-1">锻炼的能力</h4><p>1.<strong>独立解决问题的能力</strong>：遇到看似难以完成的需求，该去如何实现，不能饭来张手地求人，毕竟每个人都有自己的任务和需求要完成。学会使用搜索引擎，能够找到解决问题的正确方式，不一定一开始就能一蹴而就，踩些坑是很可能的，所以边踩坑边学习边思考。将一个庞大、复杂的问题进行拆分，一步步攻破，以实现最终要解决的问题，在实现的过程中也会突发灵感想到横好的方案，可能会对之前的部分代码重构。能做到，给我一个复杂的问题，我不会随意地说不会，会进行深入的思考和调研，努力去尝试解决，独当一面。</p>
<p>2.<strong>思考并主动交涉的能力</strong>：一些需求给下来并没有确切的实习方案，这时候需要主动去和别人探讨一些细节问题。一开始的时候我还是比较胆小，怕自己一个小小的前端实习，给个需求，有什么好找那么忙碌的leader交流的，担心会打扰到他。但事实证明并没有，主管是很欢迎我去主动找他交流的，逐渐我也放开了戒备心。当然，去探讨前，还是得做好准备，对一些问题进行一个深入的思考，自己会给出一个大概的解决方案，去询问意见和可行性，听取主管的意见，最后确认最终的方案。</p>
<h4 id="遇到的问题-1">遇到的问题</h4><p>1.<strong>数据统计页面</strong>：时间短 需求复杂 还是第一次接触前端MV*的大型项目，从前也就是写写Demo没有深入地理解其原理和本质。对于全部组件化+MVVM+Ajax+Restful前后端分离的单页应用，难以直接上手。由于人手的缺少和不知名的原因，也没有一个Mentor抑或导师来带我、给我指点或进行引导，只是给了时间、给了需求，一切都是自己做。我真的能做到吗？在种种压力下仿佛爆发了某种力量，内心的小宇宙开始燃烧：从学习Regualr开始，阅读它的文档，了解它的语法。了解项目的结构和代码，理解组件化的流程和调用方法，学习其路由的方式。熟悉原先调用接口的规则并在内部的NEI平台制定接口规范。熟悉需求并确认实现方案、规划任务的进度。需求并不简单，新增项目的一个数据统计页面，来展示一些统计信息。要实现一个数据展示表格，该表格集成了分条展示、分页、排序、筛选等功能，该表格原先是在另一个项目中通过erb模板+jQuery表格组件来完成的，所以对于此项目来说，不能引入jQuery，没有任何参考性作用，一切都是从头做。如果是用原生js或者jQuery，我一开始就能明确其实现流程，但是放在MV*的模板中实现，一开始我是一头雾水的。从分页开始实现、到排序、到最后的筛选，在实现过程中，我发现了<strong>数据驱动项目</strong>所采用的MV*框架所带来的便利，可以说，进一步解放了生产力，让前端开发人员不再把大量时间花在DOM的选择和代码的拼接等。筛选最后我选用了自己较为擅长的正则来判断，将每一行的数据组织成字符串，匹配的时候筛选出留下的内容展示出来。</p>
<p>2.<strong>单元测试</strong>： 新领域 新内容<br>Mocha、Karma、Chai？？？一下子涌入三个不熟悉的名词，从一点点开始熟悉，两天的时间学会了前端单元测试的相关内容并开始补偿单元测试。从测试执行管理工具到测试框架，再到断言库、覆盖率，从前看似高神和莫名其妙的，也能从了解个大概开始逐渐上手。</p>
<p>3.<strong>遗留bug修改</strong><br>修补了大量从前留下来，俗称“填坑”。包括一些浏览器的兼容性bug，一些小细节的bug。其实修bug是不轻松的的。修一些只是样式导致的bug还好，但很多时候会碰到疑难bug，几经转手，如何去复现、去定位bug是第一步，如何去解决、修改是其次，bug修复后又户不会引入新的回归性bug也是一个重要的课题。要做到以最优雅的方式去修复bug，尽力避免hack的方式，很多bug从表面掩盖不如从源头解决，在一些函数代码处理中要做一个整体的调整。</p>
<p>4.<strong>脑图相关</strong><br>由于缺乏文档、只能直接阅读源码，从源码中找接口和一些实现。从git上拷过来，大致浏览基于angular开发的脑图核心代码实现，解读部分原理，尝试修改部分代码并重新打包，以探究内部实质。</p>
<hr>
<p> 很幸运能遇上当前的主管，主管技术精湛，为人也十分幽默风趣，实习的过程中充满欢乐，也很愉快，得到了很多指点，有所长进。愿来日有机会继续合作。</p>
]]></content>
<summary type="html">
<![CDATA[<p>自一月来网易实习以来，掐指一数已经实习了大半年了。实习内容主要是对内测试平台相关前端开发。这半年时间里，无论是从技能还是心智上，我都成长了很多。总的来说，我所接触的有两个大的项目，下面以项目入手，总结下所学所做、锻炼的能力和遇到的一些问题。<br>]]>
</summary>
<category term="实习总结" scheme="http://yaochiqkl.github.io/tags/%E5%AE%9E%E4%B9%A0%E6%80%BB%E7%BB%93/"/>
</entry>
<entry>
<title><![CDATA[What is Symbol in ES6?]]></title>
<link href="http://yaochiqkl.github.io/2016/08/10/What-is-Symbol-in-ES6/"/>
<id>http://yaochiqkl.github.io/2016/08/10/What-is-Symbol-in-ES6/</id>
<published>2016-08-10T15:24:08.000Z</published>
<updated>2016-08-10T16:25:15.554Z</updated>
<content type="html"><![CDATA[<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>
]]></content>
<summary type="html">
<![CDATA[<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.]]>
</summary>
<category term="ES6" scheme="http://yaochiqkl.github.io/tags/ES6/"/>
</entry>
<entry>
<title><![CDATA[关于前端模板引擎和曾经被看好的Object.observe的那些事儿]]></title>
<link href="http://yaochiqkl.github.io/2016/07/30/javascript-upgrade-will-nix-object-observation-feature/"/>
<id>http://yaochiqkl.github.io/2016/07/30/javascript-upgrade-will-nix-object-observation-feature/</id>
<published>2016-07-29T16:10:52.000Z</published>
<updated>2016-08-10T16:01:57.879Z</updated>
<content type="html"><![CDATA[<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>
]]></content>
<summary type="html">
<![CDATA[<p>最近在看一些前端MV<em>框架的实现原理，按照我的理解来看，在模板渲染方式上实现方式有以下几种：<br>1.基于脏检查的模式，包括熟悉的RegularJS和AngularJS<br>2.基于defineOwnProperty的getter和setter模式，比如avalo]]>
</summary>
<category term="ES7 JavaScript" scheme="http://yaochiqkl.github.io/tags/ES7-JavaScript/"/>
</entry>
<entry>
<title><![CDATA[FunctionCurryingAndBindInJavascript]]></title>
<link href="http://yaochiqkl.github.io/2016/03/15/FunctionCurryingAndBindInJavascript/"/>
<id>http://yaochiqkl.github.io/2016/03/15/FunctionCurryingAndBindInJavascript/</id>
<published>2016-03-15T15:38:22.000Z</published>
<updated>2016-07-29T16:41:33.929Z</updated>
<content type="html"><![CDATA[<p>函数柯里化及bind相关<br><a id="more"></a><br>TODO</p>
]]></content>
<summary type="html">
<![CDATA[<p>函数柯里化及bind相关<br>]]>
</summary>
</entry>
<entry>
<title><![CDATA[爱奇艺面试]]></title>
<link href="http://yaochiqkl.github.io/2016/01/07/iqiyi-interview/"/>
<id>http://yaochiqkl.github.io/2016/01/07/iqiyi-interview/</id>
<published>2016-01-07T13:31:28.000Z</published>
<updated>2016-01-08T01:15:30.377Z</updated>
<content type="html"><![CDATA[<p>爱奇艺也毕竟是大厂，百度的子厂，投了在线的简历，没有注意到地点，岗位是在上海，而爱奇艺（上海）只是一其个分部。<br><a id="more"></a><br>接到面试官的电话，问我会不会Java，我没有学过…然后说待会儿找其他面试官来跟我面试。</p>
<h2 id="一面">一面</h2><p>Bootstrap 栅格系统<br>JS this<br>Jquery each $(this) this<br>Ajax 回调<br>Promise ★ （不知道怎么用，面试官建议我回去可以学下，异步调用顺序相关的）<br>HTTP 2.0 1.主动缓存<br>LESS & SASS 的特性 1.继承 2.变量<br>SEO 1.meta 2.反向代理静态页面 3.商务合作<br>MV* 框架的意义<br>前端性能优化<br>数据库相关 MongoDB NoSQL<br>实际问题<br>分页 左边不出现滚动条 右边固定 scroll=no 滚动监听<br>多选框过多 想到了映射 面试官提示搜索 其实我没弄清楚问题是啥<br>感觉都挺简单的<br>20min，速战速决</p>
<h2 id="二面">二面</h2><p>二面是在一周后了，之前还以为自己挂掉了。<br>面试官说之前一直没打通，我很抱歉地说自己手机信号不好。（其实是自己当成骚扰电话了，我的天）<br>项目相关<br>HTML5相关 各种API canvas SVG区别<br>数据获取相关<br>我能感觉到面试官不是职业的前端，是一面前联系我的技术官。</p>
<p>次日HR来电，给我说了相关的信息，询问我有没有拿到其它的offer，问我是否接受这个岗位。并希望在一天后得到我的答复。</p>
<p>面试官人真的很Nice，之前手机接到爱奇艺（上海）的电话，软件提示被多少人标记为骚扰电话…我就拒接了很多很多次，结果面试官很耐心地换电话打给我，拿到offer当天傍晚的时候还用自己的手机打电话询问我的意见，讲了些岗位的吸引，挺感动的。二面的时候给我讲了好多他们部门的内容，内部的平台，目前部门没有一个专门的前端，都是后端兼职做前端，希望我可以将他们的数据进行一个美化和展示，想起了大二在网阔实习的那一个月，当时的导师挺好的，什么没有专门的前端，他们都是全栈的大神好么（233）。数次问了我的定位，目前是打算在前端的路上越走越远，即使是后端，或许也是从Node开始，我更希望到一个更专业的前端团队。</p>
<p>说实话，没有网易的吸引力大，无论是从环境还是说导师的配置来说。不过自己真的很内疚，面试官人那么诚恳，我却不想去。</p>
]]></content>
<summary type="html">
<![CDATA[<p>爱奇艺也毕竟是大厂，百度的子厂，投了在线的简历，没有注意到地点，岗位是在上海，而爱奇艺（上海）只是一其个分部。<br>]]>
</summary>
<category term="interview" scheme="http://yaochiqkl.github.io/tags/interview/"/>
</entry>
<entry>
<title><![CDATA[美团面经]]></title>
<link href="http://yaochiqkl.github.io/2016/01/07/mei-tuan-interview/"/>
<id>http://yaochiqkl.github.io/2016/01/07/mei-tuan-interview/</id>
<published>2016-01-07T13:31:10.000Z</published>
<updated>2016-01-07T13:47:55.827Z</updated>
<content type="html"><![CDATA[<p>面试的难度很大，无论是从广度还是深度，都要求很高。<br><a id="more"></a></p>
<h2 id="面试相关内容">面试相关内容</h2><p>HTTP2.0相关，新特性<br>ES5 && ES6 相关，了解多少<br>Bootstrap相关 栅格系统以及用原生的CSS怎么如何实现<br>JQuery源码 DOM查询如何实现（没答出来，是有看过的，没有研究透彻）<br>HTTP协议相关 状态请求码 以及各种方法<br>CSS相关 display 盒模型（如何改变没答出来，我以为是什么技巧，结果就是文档类型的声明…）<br>CSS3新特性 用了什么 做过什么联系<br>JavaScript相关 闭包 作用域 如何拓展作用域（call apply bind with)<br>前端框架相关 MV* 实话坦诚，有在学VUE、React，但是资质尚浅，没有大规模运用。<br>前端模块化的工具 ，实话坦诚：学习过Gulp Grunt Yoman Bower 但是实际没有使用过（真不该这么坦诚啊233）<br>然后就是项目相关的问题<br>后来问了两个非技术问题，首先是个人爱好，然后是大学期间最成功的一件事儿，答的不好，急中生智把前端的学习精力说了一遭，貌似没有让面试官很满意。后来看美团官网招聘的需求，真的是有相关的要求。大概是为了考察一个人的综合能力水平。</p>
<p>前后持续了半个来小时，一点也不水，面试官的北京腔也让我印象深刻。 </p>
<hr>
<h2 id="后续">后续</h2><p>次日HR来消息：面试官表示不太合适，发给了我一个连接，问这是不是我最近的一个项目。<br>我看到KDECM的首页就知道要遭，大二初期接触前端所着手做的项目，代码惨不忍睹，更别提什么兼容效果，连谷歌打开都是有问题的。着重地标在了简历上。HR说可以让我补发一些项目连接，回去整理了下最近的项目内容，补发了过去。然后就没了后续，挺不甘心的，也受到了一些打击。只能说技艺不精吧，要继续努力才行。</p>
]]></content>
<summary type="html">
<![CDATA[<p>面试的难度很大，无论是从广度还是深度，都要求很高。<br>]]>
</summary>
<category term="interview" scheme="http://yaochiqkl.github.io/tags/interview/"/>
</entry>
<entry>
<title><![CDATA[2015下半年书单]]></title>
<link href="http://yaochiqkl.github.io/2015/12/25/books/"/>
<id>http://yaochiqkl.github.io/2015/12/25/books/</id>
<published>2015-12-25T13:45:35.000Z</published>
<updated>2016-07-29T16:45:14.023Z</updated>
<content type="html"><![CDATA[<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>
]]></content>
<summary type="html">
<![CDATA[<h2 id="2015下半年书单">2015下半年书单</h2><h3 id="前端类">前端类</h3><p>Head First HTML&CSS (已读)<br>JavaScript DOM 编程艺术（2E)(已读)<br>Head First Ajax(已读)<]]>
</summary>
<category term="books" scheme="http://yaochiqkl.github.io/tags/books/"/>
</entry>
<entry>
<title><![CDATA[网易面经]]></title>
<link href="http://yaochiqkl.github.io/2015/12/22/WangYi-Interview/"/>
<id>http://yaochiqkl.github.io/2015/12/22/WangYi-Interview/</id>
<published>2015-12-22T13:30:42.000Z</published>
<updated>2016-01-10T14:43:30.770Z</updated>
<content type="html"><![CDATA[<p>尽管已经在百词斩实习了，尽管百词斩的待遇也很好，但是心中仍有一个大公司的梦。<br><a id="more"></a><br>问到我对前端哪块领域掌握较好，答JS，然后就是各种JS了，CSS其实还是不错的，CSS3那些和HTML5的新API都挺感兴趣的，结果没问到。无法像其他大神那样，能够去主动引导面试官对于自己擅长的某些领域进行提问。</p>
<h2 id="【JS相关】">【JS相关】</h2><p>单线程，call、reply、bind区别，W3C定义的事件模型，GET&POST区别，闭包相关，原型的运用（问实际项目的运行，自己扯了扯最近的项目），然后就是拖动的实现，自己开始脑子听糊涂的，什么绑定click事件什么的，最后在面试官的引导下，onmousedown绑定添加onmousemove事件，该事件完成鼠标指针查询和窗口大小改变，onmouseup解绑该事件。还有问了回车提交的实现，这挺巧，最近的项目才实现了这个功能：不过自己的onkeypress、onkeyup、onkeydown没解释清…直说了onkeypress和onkeydown没啥区别…SESSION和COOKIE的区别。问了MV*框架的学习和使用，以及实现的意义，只是说什么数据模型分离什么的，答的也挺水。</p>
<h2 id="【其他】">【其他】</h2><p>计网问了几个自顶向下的分层问题，挺擅长的领域，答了两句不问了。（喂！好不容易是我掌握的比较好的好吗）问到数据结构就要爆炸，问队列、栈的基本概念还好，可是给我出什么两个队列实现链表是什么鬼（事后想想还是挺简单的，只是自己想都没想就觉得“不行自己好久没专门去看数据结构了，肯定不会”的想法禁锢了自己），还有单项链表长度什么的…好久没碰数据结构了，掌握还好的排序没问到。问到编译原理，只是把脚本语言和其他语言的运行的机制大概讲了讲，细节什么的追问我根本不会好嘛！</p>
<h2 id="【项目】">【项目】</h2><p>聊了项目相关，简历上只写了大二的两个项目，没展示大三上学期以来接触的几个项目。问了项目负责多少，实习时间长短问题，问我有什么问题要问，我问了下前端实习生的实习内容，但是面试官表示不太清楚，只说了涉及全端的开发（纳尼？）并告诉我一周之内会回复。<br>此次面试凶多极少啊，杭州的网易研究院……<br>美团周四面，祝我好运！</p>
<p><strong> 【后记】 </strong><br>网易前端实习Offer已拿，真是没想到，而且还没有二面和HR面！毕竟面试的半个小时对很多问题没有答得那么如鱼得水，小激动！目前还不知道部门和所接触的项目内容，期待ING。</p>
]]></content>
<summary type="html">
<![CDATA[<p>尽管已经在百词斩实习了，尽管百词斩的待遇也很好，但是心中仍有一个大公司的梦。<br>]]>
</summary>
<category term="interview" scheme="http://yaochiqkl.github.io/tags/interview/"/>
</entry>
<entry>
<title><![CDATA[js实用的跨域方法及原理详解]]></title>
<link href="http://yaochiqkl.github.io/2015/12/20/cross-domain/"/>
<id>http://yaochiqkl.github.io/2015/12/20/cross-domain/</id>
<published>2015-12-20T07:41:02.000Z</published>
<updated>2015-12-20T07:57:21.028Z</updated>
<content type="html"><![CDATA[<p>这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。</p>
<p>下表给出了相对<a href="http://store.company.com/dir/page.html同源检测的结果" target="_blank" rel="external">http://store.company.com/dir/page.html同源检测的结果</a>:<br><img src="http://images.cnitblog.com/blog/130623/201307/15184525-747de461b3b14f938b443e72ea25b25a.png" alt=""><br><a id="more"></a></p>
<h2 id="1_:_通过jsonp跨域">1 : 通过jsonp跨域</h2><p>在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。</p>
<p>比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是<a href="http://example.com/data.php,那么a.html中的代码就可以这样：" target="_blank" rel="external">http://example.com/data.php,那么a.html中的代码就可以这样：</a></p>
<p><img src="http://images.cnitblog.com/blog/130623/201307/15184526-bcc1971f27094439b746cb1f52a715be.png" alt=""></p>
<p>我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。</p>
<p>因为是当做一个js文件来引入的，所以<a href="http://example.com/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的" target="_blank" rel="external">http://example.com/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的</a>:<br><img src="http://images.cnitblog.com/blog/130623/201307/15184527-28a9558c3caa424683980a50b8371134.png" alt=""><br>所以通过<a href="http://example.com/data.php?callback=dosomething得到的js文件，就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。" target="_blank" rel="external">http://example.com/data.php?callback=dosomething得到的js文件，就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。</a></p>
<p>这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。</p>
<p>知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了，而不用特意的手动的书写那些script标签。如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。<br><img src="http://images.cnitblog.com/blog/130623/201307/15184529-f4a5efe2881a40eebbdca2b463e264bf.png" alt=""><br>原理是一样的，只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。</p>
<hr>
<h2 id="2_：通过修改document-domain来跨子域">2 ：通过修改document.domain来跨子域</h2><p>浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。比如，有一个页面，它的地址是<a href="http://www.example.com/a.html" target="_blank" rel="external">http://www.example.com/a.html</a> ， 在这个页面里面有一个iframe，它的src是<a href="http://example.com/b.html" target="_blank" rel="external">http://example.com/b.html</a>, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：<br><img src="http://images.cnitblog.com/blog/130623/201307/15184530-8b5ff5011fc24c7a9949eac174a4dc73.png" alt=""><br>这个时候，document.domain就可以派上用场了，我们只要把<a href="http://www.example.com/a.html" target="_blank" rel="external">http://www.example.com/a.html</a> 和 <a href="http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com" target="_blank" rel="external">http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com</a> 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。</p>
<p>在页面 <a href="http://www.example.com/a.html" target="_blank" rel="external">http://www.example.com/a.html</a> 中设置document.domain:<br><img src="http://images.cnitblog.com/blog/130623/201307/15184531-49f512a730204cab803ce03833e4b554.png" alt=""><br>在页面 <a href="http://example.com/b.html" target="_blank" rel="external">http://example.com/b.html</a> 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：<br><img src="http://images.cnitblog.com/blog/130623/201307/15184533-f10eef95c6994d09bc2d595325f45759.png" alt=""><br>这样我们就可以通过js访问到iframe中的各种属性和对象了。</p>
<p>不过如果你想在<a href="http://www.example.com/a.html" target="_blank" rel="external">http://www.example.com/a.html</a> 页面中通过ajax直接请求<a href="http://example.com/b.html" target="_blank" rel="external">http://example.com/b.html</a> 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。</p>
<hr>
<h2 id="3_：使用window-name来进行跨域">3 ：使用window.name来进行跨域</h2><p>window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。<br>比如：有一个页面a.html,它里面有这样的代码<br><img src="" alt=""><br>再看看b.html页面的代码：<br><img src="" alt=""><br>a.html页面载入后3秒，跳转到了b.html页面，结果为：<br><img src="" alt=""><br>我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。</p>
<p>上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理。</p>
<p>下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。</p>
<p>比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。</p>
<p>data.html页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。data.html里的代码：<br><img src="http://images.cnitblog.com/blog/130623/201307/15184538-f329d65db57d49c3b89bef6d413e34ad.png" alt=""><br>那么在a.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面，因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。</p>
<p>充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟a.html页面同一个域才行，不然根据前面讲的同源策略，a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。</p>
<p>看下a.html页面的代码：<br><img src="http://images2015.cnblogs.com/blog/130623/201512/130623-20151207161022652-2118622654.png" alt=""><br>上面的代码只是最简单的原理演示代码，你可以对使用js封装上面的过程，比如动态的创建iframe,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的iframe。网上也有很多类似的现成代码，有兴趣的可以去找一下。</p>
<p>通过window.name来进行跨域，就是这样子的。</p>
<hr>
<h2 id="4_：使用HTML5中新引进的window-postMessage方法来跨域传送数据">4 ：使用HTML5中新引进的window.postMessage方法来跨域传送数据</h2><p>window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。</p>
<p>调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。</p>
<p>需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。</p>
<p>上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。下面看一个简单的示例，有两个页面<br>![](<a href="http://images.cnitblog.com/blog/130623/201307/15184544-594f30a8bacd4da0a4a2293f63f53534.png" target="_blank" rel="external">http://images.cnitblog.com/blog/130623/201307/15184544-594f30a8bacd4da0a4a2293f63f53534.png</a></p>
<p><img src="http://images.cnitblog.com/blog/130623/201307/15184545-4285b632b74c4abea9aba5ecb2587f5a.png" alt=""><br>我们运行a页面后得到的结果:<br><img src="http://images.cnitblog.com/blog/130623/201307/15184547-b7a7e7b771054807b112248f39201e53.png" alt=""><br>我们看到b页面成功的收到了消息。</p>
<p>使用postMessage来跨域传送数据还是比较直观和方便的，但是缺点是IE6、IE7不支持，所以用不用还得根据实际需要来决定。</p>
<hr>
<h3 id="结语">结语</h3><p>除了以上几种方法外，还有flash、在服务器上设置代理页面等跨域方式，这里就不做介绍了。</p>
<p>以上四种方法，可以根据项目的实际情况来进行选择应用，个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。</p>
<p>(转)</p>
]]></content>
<summary type="html">
<![CDATA[<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>]]>
</summary>
<category term="ajax" scheme="http://yaochiqkl.github.io/tags/ajax/"/>
</entry>
<entry>
<title><![CDATA[百词斩面试经历]]></title>
<link href="http://yaochiqkl.github.io/2015/12/03/BCZ-interview/"/>
<id>http://yaochiqkl.github.io/2015/12/03/BCZ-interview/</id>
<published>2015-12-03T06:25:14.000Z</published>
<updated>2015-12-04T11:19:29.817Z</updated>
<content type="html"><![CDATA[<p>顺利通过百词斩技术面试，小激动，HR答应周五前联系我，百词斩的实习Offer已经十拿九稳了（但愿HR面不会被刷掉）（高兴过头了，又开始担忧HR这一关了233，论悲观主义者的日常）<br><a id="more"></a><br>这两天都是一个比较焦虑的状态，总担心失败。下午三点的面试，把握不好时间的我竟又早了一个多小时到天府软件园，真是的，地铁干嘛跑那么快啊。（地铁：怪我咯？）</p>
<hr>
<p>面试我的技术官居然是位美女程序员，天了噜，掐指一算还真没见到过几个女程序员，很和蔼。考察的内容也比较基础，也比较负责，有看我的Github和百词斩测试题的代码。</p>
<p><strong>JS</strong>方面的面试题包括执行上下文的this（闭着眼睛就把答案写出来了，this对我来说已经是小case了），词法作用域，闭包（blahblah一大堆环境对象变量对象作用域链，解释得还算顺畅），全局变量，后面还考察了对象的创建和继承（大概我写了三四种创建对象的方法后面试官看我比较熟就过了）<br><strong>CSS</strong>方面我可能没有那么熟悉，问起我文本垂直居中我答了vertical-align，用CSS画心形和三角，这个我倒是没什么思路，回家查了才发现原始来通过border来设置。面试官很和善的说没关系我们来看一下题。问起了CSS的层叠规则（艾玛这个最熟悉了，从important讲到来源，讲到权重…面试官看起来也比较满意）<br>问起了前端的优化，这道题感觉答得不是很好，直说了些蓝大家的减少请求数量（合并脚本，雪碧图，内联图像）、使用缓存、CSS和JS文件的位置就不了了之了，而没有涉及压缩、精简以及从个人的角度的理解，如果重新答一次，我会讲起在编程的过程中提现的优化准则，比如少用css表达式，减少DOM查询次数，JS用时间代理等等。总而言之，优化就是一种良好的习惯，无时不在。<br>到后面问起了些数据库的内容，这一块不是很熟悉，对后端语言还是稍微了解一下，数据库仅限于使用，问到我数据库的索引优化，我完全没有什么概念。（事后重新看招聘的要求才发现上面真的有写对数据库的了解，看来要求是该重视的）随后问了些如何解决问题，我扯了几句查文献看英文文档后联系起做笔试题用正则的过程，愉快的面试就匆匆结束啦！<br>面试官说看了我的Github，我就知道完蛋露馅了，因为上面根本没有什么内容，我还贴上去，排前几位的还有什么前端面试题总结…看来Github上没什么东西就不要到处乱show了。面试官说看重的是我的学习能力问了一些前端库和框架的内容，最近算是把手头的旧书看的差不多了，打算开始学Angular、Require.js等，时不我待啊。</p>
<hr>
<p> 总而言之，考察的都很基础，比我相信的要简单。还是比较顺利的，心里的一块大石头落地，静候HR佳音。<br> 前端学习之路任重道远，加油吧。<br> 有些题自己准备的不错但是没有问到的：</p>
<p> -为什么喜欢前端？<br> -前端工程师的职责？<br> -数据结构与算法方面<br> -为什么选择百词斩<br> -js库的一些优点</p>
]]></content>
<summary type="html">
<![CDATA[<p>顺利通过百词斩技术面试，小激动，HR答应周五前联系我，百词斩的实习Offer已经十拿九稳了（但愿HR面不会被刷掉）（高兴过头了，又开始担忧HR这一关了233，论悲观主义者的日常）<br>]]>
</summary>
<category term="interview" scheme="http://yaochiqkl.github.io/tags/interview/"/>
</entry>
<entry>
<title><![CDATA[公钥私钥数字证书（转）]]></title>
<link href="http://yaochiqkl.github.io/2015/12/01/PublicKeyAndSecretKey/"/>
<id>http://yaochiqkl.github.io/2015/12/01/PublicKeyAndSecretKey/</id>
<published>2015-12-01T11:46:56.000Z</published>
<updated>2015-12-03T06:47:03.981Z</updated>
<content type="html"><![CDATA[<p>经常听到有人说，在使用公钥密码学加密与签名时，一定要知道是使用公钥还是使用私钥，否则容易闹笑话。可是，对于一个学过一点密码学的人来说，真的就那么难吗？下面就来讨论一下这个问题。<br><a id="more"></a><br> 密码学中要使用Key，而在公钥密码学中，有两个Key，一个公钥PK(Public Key)，一个私钥SK(Secret Key)，其中公钥PK公开，任何人都可以查到，而私钥SK保密，理论上只应该有你一个人知道。这一点是与分组密码算法(DES,AES)不同的(DES的实现可以看我以前的一篇博文)，因为在分组密码算法中，只有一个KEY，且是在通信双方共享的，并且需要保密。下面以公钥密码算法RSA为例（RSA的小数情况实现也可以看我的另一篇文章），来讲一讲在公钥密码学，加密与签名时，key的选择问题。<br> 首先要说一说通信，通信自然要涉及通信双方，当然，你也可以自己和自己通信（如果你这时还加密签名的话，你这是闲得……）。密码学的大师给了通信双方两个好听的名字A(lice)，B(ob)。下面约定一下PK(A),PK(B)分别代表Alice和Bob的公钥，是完全公开的，任何人都可以查到；SK(A)为Alice的私钥，只有Alice自己知道，SK(B)为Bob的私钥，只有Bob一个人知道。下面从Bob的角度来讨论。<br> 加密：<br> 加密，为什么要加密？因为通信的双方使用的是公开的信道，而信道上是可能有窃听者的，如果使用明文传输消息，即不加密，那么窃听者就可以知道消息的内容了，如果你传输的是什么消息的话，你就悲剧了。所以为防止消息被不应该知道的人知道，传输时要加密。<br> 在公钥密码学中，一个消息M，在key1的控制下，经过密码算法，得到密文C，是为加密；而密文C，在另一个Key2的控制下，经过密码算法，可以得到对应的明文M，是为解密。其中一个是公钥PK，一个是私钥SK，这是与分组密码不同的。下面来说Bob要传输消息给Alice，该使用那个Key。这里使用枚举，这个办法很好用。总共用四个key。（你不会还想用其他人的key吧。。。）<br> 1）使用PK(B)吗（自己的公钥）？这个，来分析分析。使用PK(B)加密的消息，只能使用对于的SK(B)来解密，而SK(B)只有你自己知道，Alice不知道，窃听者也不知道。使用这个Key的效果最好，别的人都不能知道消息的内容，窃听者也拿它没办法，但是，通信的另一方Alice也不知道消息的内容了，这样的通信就没有意义了。所以，否定掉。<br> 2）使用SK(B)吗（自己的私钥）？我们来看看，使用SK(B)加密的消息，要使用PK(B)来加密。而PK(B)是公开的，Alice知道，恩，Alice可以解密消息了，这个可以吧！这个真的可以吗？正是因为PK(B)是公开的，Alice知道，窃听者也知道，所以Alice能解密，窃听者也能解密，所以根本就没有保密性。和明文传输没多大的差别了。这个一个悲剧的选择。Pass掉。<br> 3）使用SK(A)吗（对方的私钥）？SK(A)是Alice的私钥，只有Alice知道，Bob不知道，这个不行。假设Alice将私钥偷偷告诉了你，这样你就可以使用了吧。原理和结局同2中的分析。同样……<br> 4）使用PK(A)吗（对方的公钥）？排除法告诉我们，只有这个可以选了，那就选它吧。原理什么的就不用讲了吧，大家也没兴趣的。不行，老夫子教导我们，知其然必知其所以然。我们要知道原理。好吧，讲一讲。使用PK(A)加密的消息，要使用SK(A)来解密，而SK(A)对方是知道的，所以消息是可以解密的；而又因为SK(A)只有Alice知道，别的人包括窃听者是不知道的，所以消息的保密性是可以保证的。满足要求。恩，终于弄懂了。<br> 讲了这么多，口都渴了，喝口水了再来讲。。。。。。下面将签名。<br> 签名：<br> 签名，现实生活中，我们可以使用自己的笔迹来签名的。而电子世界呢？签名，这个是公钥密码学提供的而分组密码是无法与他比的特性。签名，为什么要签名？举个例子，假如你发送一条消息给银行，从你的账号中转1亿出去（反正是举例子，说这么大的数额也没什么关系），银行执行了这条消息，转了账，事后，你跟银行说，你没有转过账，要让银行赔偿，如果银行拿不出证据，那银行就悲剧了、破产了，而银行是可以拿出证据的，证据就在那条消息中，因为你对它签名了，而签名在法律上是有效的证据的。好吧。那么，Bob要对消息签名，他该使用哪个key？枚举法再次闪亮登场……<br> 1）使用PK(A)吗（对方的公钥）？假设可以的话，由于PK(A)是公开的，那么任何都是可以伪造你的签名的，你的银行卡就爆了。。。<br> 2）使用SK(A)吗（对方是私钥）？同样这个你是不知道的。就是对方告诉了你，还是有问题的，因为这个和你的另一个key不匹配，签名是不能验证的，这个问题同样出现在1中。所以，不妥。。。<br> 3）使用PK(B)吗（自己的公钥）？同样有问题，第一，原理同1，由于是公开的，任何人都可以伪造，银行卡再次爆掉了；第二，原理同2，要验证，就需要使用你的另一个key，即你的私钥，而这个只有你自己知道，所以签名无法验证。这又是一个失败的例子。。。<br> 4）私钥SK(B)吗（自己的私钥）？还是说说原理吧。签名要使用唯一能确认是你的东西来签名，譬如笔迹。因为SK(B)只有你自己知道，所以满足要求的；其次，使用SK(B)签名的东西，是可以用PK(B)验证的，因为它是公开的。所以也满足要求。Jackpot！<br> 写了这么多，终于写完了。由于昨天的失误，今天算是重新敲了一遍，我还以为只有几百字呢，没想到竟有2k多的字。不过上面的都是废话，下面来总结一下，接下来的这句才是重点。<br> <strong>在公钥密码学中，加密使用对方的公钥，签名使用自己的私钥。</strong></p>
]]></content>
<summary type="html">
<![CDATA[<p>经常听到有人说，在使用公钥密码学加密与签名时，一定要知道是使用公钥还是使用私钥，否则容易闹笑话。可是，对于一个学过一点密码学的人来说，真的就那么难吗？下面就来讨论一下这个问题。<br>]]>
</summary>
<category term="https" scheme="http://yaochiqkl.github.io/tags/https/"/>
</entry>
<entry>
<title><![CDATA[当我们访问网站的时候，我们在访问什么]]></title>
<link href="http://yaochiqkl.github.io/2015/11/26/when-we-vist-web/"/>
<id>http://yaochiqkl.github.io/2015/11/26/when-we-vist-web/</id>
<published>2015-11-26T14:12:52.000Z</published>
<updated>2015-12-03T06:46:55.495Z</updated>
<content type="html"><![CDATA[<p>突发奇想想出了这个题目，想聊一聊我的理解。<br><a id="more"></a><br>未完待续。</p>
]]></content>
<summary type="html">
<![CDATA[<p>突发奇想想出了这个题目，想聊一聊我的理解。<br>]]>
</summary>
</entry>
<entry>
<title><![CDATA[锋利的jQuery]]></title>
<link href="http://yaochiqkl.github.io/2015/11/06/SharpJQuery/"/>
<id>http://yaochiqkl.github.io/2015/11/06/SharpJQuery/</id>
<published>2015-11-06T12:12:02.000Z</published>
<updated>2015-12-03T06:47:32.522Z</updated>
<content type="html"><![CDATA[<p><img src="http://img4.douban.com/lpic/s28026858.jpg" alt="锋利的jQuery"><br>每天都在图书馆查这本书，这两天终于等到别人还过来了，这几天借的书还不少，有十本，都快达上限了，就不能借一本自习看一本么！？<br>想起之前在一家IT公司实习的时候用jQuery的随意，殊不知jQuery是如此这般强大！看了两天图书馆已然有人归还第二版，速速换之。<br>书中很多实例很有趣，很值得自己去实现。<br><a id="more"></a></p>
<h2 id="选择器">选择器</h2><p>1.基本选择器<br>2.层次选择器 > + ~<br>3.过滤选择器<br> 1.基本过滤 :first :not() :qe() :qt() :animated<br> 2.内容过滤 :contains(text) :empty :has() :parent<br> 3.可见性过滤 :hidden :visible<br> 4.属性过滤 [attribute] [attribute^=value]<br> 5.子元素过滤 nth-child(index) :first-child<br> 6.表单对象过滤 :enabled :disabled<br>4.表单选择器 :input(input+button+textarea) :hidden</p>
<hr>
<h2 id="DOM操作">DOM操作</h2><p>1.节点操作<br> 1.创建节点<br> 2.插入节点 append() prepend() apendTo() after() before()<br> 3.删除节点 remove() empty()<br> 4.复制节点 clone()<br> 5.替换节点 replaceWith() replaceAll()<br> 6.包裹节点 wrap()<br>2.属性操作 attr() removeAttr()<br>3.样式操作 addClass() removeClass() toggleClass() hasClass()</p>
<hr>
<h2 id="事件">事件</h2><p>1.DOM就绪后执行<br><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></pre></td><td class="code"><pre><span class="line">$(ducument).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}) </span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{})</span><br><span class="line">$().ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{})</span><br></pre></td></tr></table></figure></p>
<p>2.事件绑定<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#a"</span>).bind(<span class="string">"mouseover"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{});</span><br><span class="line">$(<span class="string">"#a"</span>).mouseover(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}); 简写</span><br></pre></td></tr></table></figure></p>
<p>可以<strong>一次性绑定多个事件</strong><br><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></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#a"</span>).bind(<span class="string">"mouseover mouseout"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="keyword">this</span>).toggleClass(<span class="string">"over"</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>3.合成事件<br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">hover</span><span class="params">(enter,leave)</span></span></span><br><span class="line"><span class="function"><span class="title">toggle</span><span class="params">(f1,f2,...)</span></span></span><br></pre></td></tr></table></figure></p>
<p>4.事件冒泡 </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></pre></td><td class="code"><pre><span class="line">$(<span class="string">'span'</span>).bind(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> event.stopPropagation(); 停止事件冒泡</span><br><span class="line"> event.preventDefault(); 阻止默认行为（如超链接的跳转）</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>5.事件对象<br>event.type<br>event.target<br>event.pageX 获取光标的坐标<br>event.which 鼠标单击的左中右键<br>6.移除事件<br><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></pre></td><td class="code"><pre><span class="line">$(<span class="string">'button'</span>).unbind();</span><br><span class="line">最好在事件绑定时指定变量 </span><br><span class="line">$(<span class="string">'button'</span>).bind(<span class="string">"click"</span>,myFun1=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> ...</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>One方法：触发一次，立即解绑<br><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></pre></td><td class="code"><pre><span class="line">$(<span class="string">'button'</span>).one(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> ...</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>
<p>7.模拟操作 触发函数<br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'button'</span>).<span class="function"><span class="title">trigger</span><span class="params">(<span class="string">"click"</span>)</span></span></span><br></pre></td></tr></table></figure></p>
<p><strong>△添加命名空间 </strong>方便管理<br><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></pre></td><td class="code"><pre><span class="line">$(<span class="string">'button'</span>).bind(<span class="string">"click.plugin"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> ..</span><br><span class="line">});</span><br><span class="line">$(<span class="string">'button'</span>).unbind(<span class="string">".plugin"</span>);</span><br></pre></td></tr></table></figure></p>
<hr>
<h2 id="动画">动画</h2><p>1.show() & hide()<br>2.fadeIn() & fadeOut()<br>3.slideUp() & slideDown()<br>4.<strong>animate()</strong><br><figure class="highlight sqf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">animate</span>(<span class="built_in">params</span>,<span class="built_in">speed</span>,callback);</span><br></pre></td></tr></table></figure></p>
<p>5.stop() & delay()<br>停止动画 stop()<br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">stop</span><span class="params">(ClearQueue,gotoEnd)</span></span></span><br><span class="line">Boolean值，前者清空队列，后者跳到当前动画的末状态</span><br></pre></td></tr></table></figure></p>
<p>延迟动画 delay()<br>后借时间，单位<strong>ms</strong><br>6.<strong>其他</strong><br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">toggle</span><span class="params">()</span></span></span><br><span class="line"><span class="function"><span class="title">slideToggle</span><span class="params">()</span></span></span><br><span class="line"><span class="function"><span class="title">fadeTo</span><span class="params">()</span></span></span><br><span class="line"><span class="function"><span class="title">fageToggle</span><span class="params">()</span></span></span><br></pre></td></tr></table></figure></p>
<p><div class="a"><br> <a href="/images/1.jpg" class="tip" title="Prompt1"><img src="/images/1.jpg" style="heiht:100px;width:200px;"></a><br><br> <a href="/images/2.jpg" class="tip" title="Prompt2"><img src="/images/2.jpg" style="heiht:100px;width:200px;"></a><br><br> <a href="/images/3.jpg" class="tip" title="Prompt3"><img src="/images/3.jpg" style="heiht:100px;width:200px;"></a><br></div></p>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$(".tip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>this.myTitle":"";
var tip = "<div id='tip'><img src='"+this.href+"' alt='fuckme'>"+imgTitle+"</div>";
$("body").append(tip);
$("#tip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px",
"border":"1px solid black",
"blackground":"yellow",
"position":"absolute"
}).show("slow");
}).mouseout(function(){
this.title = this.myTitle;
$("#tip").remove();
}).mousemove(function(e){
$("#tip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>]]></content>
<summary type="html">
<![CDATA[<p><img src="http://img4.douban.com/lpic/s28026858.jpg" alt="锋利的jQuery"><br>每天都在图书馆查这本书，这两天终于等到别人还过来了，这几天借的书还不少，有十本，都快达上限了，就不能借一本自习看一本么！？<br>想起之前在一家IT公司实习的时候用jQuery的随意，殊不知jQuery是如此这般强大！看了两天图书馆已然有人归还第二版，速速换之。<br>书中很多实例很有趣，很值得自己去实现。<br>]]>
</summary>
<category term="jQuery" scheme="http://yaochiqkl.github.io/tags/jQuery/"/>
</entry>
<entry>
<title><![CDATA[高性能网站建设指南(雅虎优化前端14条准则)]]></title>
<link href="http://yaochiqkl.github.io/2015/11/06/HighPerfomanceWebSites/"/>
<id>http://yaochiqkl.github.io/2015/11/06/HighPerfomanceWebSites/</id>
<published>2015-11-06T10:59:10.000Z</published>
<updated>2015-12-03T06:48:17.131Z</updated>
<content type="html"><![CDATA[<p><img src="http://img4.douban.com/lpic/s5914296.jpg" alt="High Performance Web Sites"><br>高性能网站建设指南<br><a href="http://stevesouders.com/hpws/rules.php" target="_blank" rel="external">相关例子测试官网</a><br>我真是太爱博文视点O’Reilly系列的书了，很幸运能在前端的领域有这样的一系列经典的书籍。<br>原来雅虎的14条前端优化准则尽在这本书中！</p>
<hr>
<p><q>性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。</q><br><a id="more"></a></p>
<hr>
<h3 id="法则1：减少HTTP请求次数">法则1：减少HTTP请求次数</h3><p>1.图片地图 Image Map<br>2.雪碧图 CSS Sprites<br>3.内联图片<br><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="setting">src=<span class="value"><span class="string">"data:image/gif;base64,R01···"</span></span></span></span><br></pre></td></tr></table></figure></p>
<p>4.合并脚本、样式表</p>
<hr>
<h3 id="法则2：CDN_(Content_Delivery_Network)">法则2：CDN (Content Delivery Network)</h3><p>CDN是地理上分布的Web Server的集合<br>将占据主要带宽的静态资源通过CDN发布</p>
<hr>
<h3 id="法则3：增加Expires_Header">法则3：增加Expires Header</h3><p>通过Expires进行缓存，间接减少HTTP请求。<br>Cache-Control</p>
<hr>
<h3 id="法则4：压缩组件">法则4：压缩组件</h3><p>这里的压缩不是指JS脚本文件的精简和并行，而指的是通过Web客户端在HTTP请求中通过的<strong>“Accept-Encoding”</strong>来指定压缩类型，让Web服务器发送编码后的文件，一般通过<strong>Gzip</strong>使内容减少70%。</p>
<hr>
<h3 id="法则5：样式表放头部">法则5：样式表放头部</h3><p>在IE中样式表放底部会导致白屏等问题，而其他浏览器会导致闪烁等糟糕的体验。<br><strong>使用LINK标签将样式表嵌入HEAD中</strong>，而@import则会使样式表最后加载。</p>
<hr>
<h3 id="法则6：脚本文件放底部">法则6：脚本文件放底部</h3><p>1.HTTP1.1规范建议浏览器从每个主机名并行下载两个组件，所以建议将组件分布在两个主机下。<br>2.脚本会<strong>阻塞</strong>下载，原因一等待其有可能的重新布局，其次保证脚本的顺序执行。<br>3.使用defer延迟脚本：异步加载 延迟执行，而asyn则是异步加载，立即执行。</p>
<hr>
<h3 id="法则7：避免CSS表达式">法则7：避免CSS表达式</h3><p>或者用一次性表达式，CSS表达式执行次数过多。</p>
<hr>
<h3 id="法则8：使用外部JS和CSS文件">法则8：使用外部JS和CSS文件</h3><p>使用外部的文件可以将之缓存，而HTML页面不会缓存。但是也要视情况而定，内嵌方式可以取得更快的响应时间，因为会减少HTTP请求数量。</p>
<hr>
<h3 id="法则9：减少DNS查询次数">法则9：减少DNS查询次数</h3><p>设置DNS缓存，减少主机名可减少DNS查询次数<br>折中的方法是将内容分布在2-4个主机上，同时能到提高并行下载的数量。HTTP1.1规范<strong>建议</strong>：从每个主机名并行下载的数量不应该超过两个。</p>
<hr>
<h3 id="法则10：精简、混淆JS">法则10：精简、混淆JS</h3><p>在压缩之前精简，可以达到更优的效果</p>
<hr>
<h3 id="法则11：避免重定向">法则11：避免重定向</h3><p>浏览器自动重定向请求到Location指定的URL上<br>URL最后缺少“/”也会造成该问题</p>
<hr>
<h3 id="法则12：删除重复的脚本">法则12：删除重复的脚本</h3><p>使用模块系统建立脚本管理模块</p>
<hr>
<h3 id="法则13：配置ETags">法则13：配置ETags</h3><p>ETag用于唯一标示元素版本的字符串<br><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> HTTP/<span class="number">1.1</span> <span class="number">200</span> OK </span><br><span class="line"> Last-Modified: Tue, <span class="number">12</span> Dec <span class="number">2006</span> <span class="number">03</span>:<span class="number">03</span>:<span class="number">59</span> GMT </span><br><span class="line"> ETag: <span class="string">"10c24bc-4ab-457e1c1f"</span> </span><br><span class="line"> Content-Length: <span class="number">12195</span></span><br></pre></td></tr></table></figure></p>
<hr>
<h3 id="法则14：缓存Ajax">法则14：缓存Ajax</h3><p>为Ajax请求的url增加一个时间戳</p>
<hr>
<p>更多进阶内容：<strong>《高性能网站建设进阶指南》</strong></p>
]]></content>
<summary type="html">
<![CDATA[<p><img src="http://img4.douban.com/lpic/s5914296.jpg" alt="High Performance Web Sites"><br>高性能网站建设指南<br><a href="http://stevesouders.com/hpws/rules.php">相关例子测试官网</a><br>我真是太爱博文视点O’Reilly系列的书了，很幸运能在前端的领域有这样的一系列经典的书籍。<br>原来雅虎的14条前端优化准则尽在这本书中！</p>
<hr>
<p><q>性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。</q><br>]]>
</summary>
<category term="网站性能优化" scheme="http://yaochiqkl.github.io/tags/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
</entry>
<entry>
<title><![CDATA[HTML5程序设计]]></title>
<link href="http://yaochiqkl.github.io/2015/11/05/HTML5Programming/"/>
<id>http://yaochiqkl.github.io/2015/11/05/HTML5Programming/</id>
<published>2015-11-05T11:04:52.000Z</published>
<updated>2015-12-03T06:48:30.736Z</updated>
<content type="html"><![CDATA[<p>HTML程序设计（第二版）<br><img src="http://img3.douban.com/lpic/s9066310.jpg" alt="Pro HTML% Programming"></p>
<p>曾以为HTML5不过是多了几个语义化的标签，读了这部经典之作，改变了我对HTML5的看法。第一遍只是粗略地概览，并不深入，了解HTML5的新特性，体会到了HTML5提供的新的API的强大之处。<br><a id="more"></a></p>
<h3 id="Summary">Summary</h3><p>What’s WHATWG<br>1.<!DOCTYPE html> <meta charset="utf-8"><br>2.Semantization tagments:<header><footer><section><article><aside><nav><br>3.Selectors API : <strong>QuerySelector()</strong> **QuerySelectorALL()</nav></aside></article></section></footer></header></p>
<h3 id="Canvas_API">Canvas API</h3><p>苹果公司提出的位图画布并按照W3C的免版税专利许可条款公开了专利。<br><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="title">canvas</span>></span>Your Bo<span class="tag"></<span class="title">canvas</span>></span></span><br></pre></td></tr></table></figure></p>
<h3 id="SVG_–Scalable_Vector_Graphics">SVG –Scalable Vector Graphics</h3><p>标准矢量图形</p>
<h3 id="Audio_&_Vidio">Audio & Vidio</h3><p>目前依然没有同意的编码器</p>
<h3 id="Geolocation_API">Geolocation API</h3><p>强大的地理位置定位</p>
<h3 id="Communication_API">Communication API</h3><h4 id="跨文档消息通信">跨文档消息通信</h4><h4 id="XHR_Level2">XHR Level2</h4><h3 id="WebSockets_API">WebSockets API</h3><p>全双工通信信道，仅通过一个Soket即可通信。</p>
<h3 id="Forms_API">Forms API</h3><h3 id="Drag">Drag</h3><h3 id="Web_Workers_API">Web Workers API</h3><h3 id="Web_Storage_API">Web Storage API</h3><p>###</p>
]]></content>
<summary type="html">
<![CDATA[<p>HTML程序设计（第二版）<br><img src="http://img3.douban.com/lpic/s9066310.jpg" alt="Pro HTML% Programming"></p>
<p>曾以为HTML5不过是多了几个语义化的标签，读了这部经典之作，改变了我对HTML5的看法。第一遍只是粗略地概览，并不深入，了解HTML5的新特性，体会到了HTML5提供的新的API的强大之处。<br>]]>
</summary>
<category term="HTML5" scheme="http://yaochiqkl.github.io/tags/HTML5/"/>
</entry>
<entry>
<title><![CDATA[CSS权威指南读书笔记]]></title>
<link href="http://yaochiqkl.github.io/2015/10/29/CSS-TheDefinitiveGuide/"/>
<id>http://yaochiqkl.github.io/2015/10/29/CSS-TheDefinitiveGuide/</id>
<published>2015-10-29T12:05:39.000Z</published>
<updated>2015-12-03T06:48:38.303Z</updated>
<content type="html"><![CDATA[<p>CSS权威指南（第三版）<br><img src="http://img3.douban.com/lpic/s2921314.jpg" alt="CSS:The Definitive Guide (The 3rd Edition)"></p>
<h2 id="选择器">选择器</h2><h3 id="属性选择器">属性选择器</h3><p>简单属性选择 h1[class]{color:silver;}</p>
<p>根据部分属性选择 p[class~=”warning”]{font-weight:bold;}<br>(子串匹配属性选择器 [foo^=”bar”] \ [foo$=”bar” \ foo*=”bar”])<br><a id="more"></a></p>
<h3 id="选择相邻兄弟元素">选择相邻兄弟元素</h3><p>li+li{font-weight:bold;} 紧跟在一个li后面出现的所有兄弟li元素</p>
<h3 id="伪类">伪类</h3><h4 id="选择第一个子元素">选择第一个子元素</h4><p>p:first-child{font-weight:bold;} <strong>作为第一个子元素的p元素</strong><br>（将规则关联到<strong>前一个</strong>规则）</p>
<blockquote>
<p>:link :first-child …</p>
</blockquote>
<h3 id="伪元素">伪元素</h3><p>首字母样式 p:first-letter{color:red;}</p>
<p>第一行样式 p:first-line{color:blue;}</p>
<p>之前/之后样式 h2:before {content:”aa”;color:silver;} 插入生成内容</p>
<blockquote>
<p>:first-line :first-letter :before :after </p>
</blockquote>
<hr>
<h2 id="结构和层叠">结构和层叠</h2><h3 id="特殊性">特殊性</h3><p>特殊性值表述为四个部分：[0 0 0 0]<br>分别对应着 <strong>内联样式 / ID属性 / 类、属性选择、伪类/元素、伪元素</strong><br>通配符<br>重要性 !important 放置声明之后</p>
<h3 id="继承">继承</h3><p>继承值<strong>无</strong>特殊性<br>0特殊性 > 无特殊性</p>
<h3 id="层叠">层叠</h3><p>规则</p>
<div style="border:2px solid black;background:#FFF;"> 1.样式表来源和重要性 创作人员>读者>用户代理（浏览器）【!important读者最强】<br> 2.特殊性排序<br> 3.出现的顺序排序<br></div>
<blockquote>
<p>LVHA规则: link visited hover active</p>
</blockquote>
<p>第七章以后很多内容太枯燥、难以理解了。需要多动手实际操作，加深理解。</p>
]]></content>
<summary type="html">
<![CDATA[<p>CSS权威指南（第三版）<br><img src="http://img3.douban.com/lpic/s2921314.jpg" alt="CSS:The Definitive Guide (The 3rd Edition)"></p>
<h2 id="选择器">选择器</h2><h3 id="属性选择器">属性选择器</h3><p>简单属性选择 h1[class]{color:silver;}</p>
<p>根据部分属性选择 p[class~=”warning”]{font-weight:bold;}<br>(子串匹配属性选择器 [foo^=”bar”] \ [foo$=”bar” \ foo*=”bar”])<br>]]>
</summary>
<category term="CSS" scheme="http://yaochiqkl.github.io/tags/CSS/"/>
</entry>
<entry>
<title><![CDATA[Node.js开发指南读书笔记]]></title>
<link href="http://yaochiqkl.github.io/2015/10/28/Node_js_DevelopmentGuides/"/>
<id>http://yaochiqkl.github.io/2015/10/28/Node_js_DevelopmentGuides/</id>
<published>2015-10-28T15:10:00.000Z</published>
<updated>2015-12-03T06:48:47.167Z</updated>
<content type="html"><![CDATA[<p>Node.js开发指南-BYVoid</p>
<h1 id=""><img src="http://img3.doubanio.com/lpic/s10307479.jpg" alt="Node.js开发指南"></h1><p>本打算看朴灵的《深入浅出Node.js》，无奈已被借走，查阅过后找到了这本书。</p>
<p>前四章干货多，难以消化，国内教材的通病，后面的实际例子很不错，最让我惊喜的是关于JS高级特性的附录，讲解很到位，解决了我之前一直困扰许久的疑惑。<br>网上查了相关资料，才知道作者BYVoid有多牛逼，这本书是他在清华大二时编著的，我不想说什么了，只叹牛人处处有，唯我是闲人。<br><a id="more"></a><br>编程更迭太快，之前的工具可能都已更新，书中案例已无法使用。在豆瓣评论上找到别人写的例子。有空自己尝试搭建迷你博客。<br><a href="https://github.com/lizijie1993/microblog" target="_blank" rel="external">最新实例</a></p>
<blockquote>
<p><strong>附录A JavaSript高级特性</strong> 摘录<br>1.函数作用域：JS的静态作用域（词法作用域）决定了函数作用域的嵌套关系由定义时决定，而非调用时决定。<br>2.上下文对象：被调用函数所处环境，即是this指针。JS的任何函数都是被某个对象所调用。此之外有call() apply() bind()更改作用域。<br>3.对象的深浅拷贝：（待完成）</p>
</blockquote>
]]></content>
<summary type="html">
<![CDATA[<p>Node.js开发指南-BYVoid</p>
<h1 id=""><img src="http://img3.doubanio.com/lpic/s10307479.jpg" alt="Node.js开发指南"></h1><p>本打算看朴灵的《深入浅出Node.js》，无奈已被借走，查阅过后找到了这本书。</p>
<p>前四章干货多，难以消化，国内教材的通病，后面的实际例子很不错，最让我惊喜的是关于JS高级特性的附录，讲解很到位，解决了我之前一直困扰许久的疑惑。<br>网上查了相关资料，才知道作者BYVoid有多牛逼，这本书是他在清华大二时编著的，我不想说什么了，只叹牛人处处有，唯我是闲人。<br>]]>
</summary>
<category term="Node" scheme="http://yaochiqkl.github.io/tags/Node/"/>
</entry>
<entry>
<title><![CDATA[Head First Ajax 读书笔记]]></title>
<link href="http://yaochiqkl.github.io/2015/10/27/AjaxReadingNotes/"/>
<id>http://yaochiqkl.github.io/2015/10/27/AjaxReadingNotes/</id>
<published>2015-10-27T14:36:49.000Z</published>
<updated>2015-12-03T06:47:20.787Z</updated>
<content type="html"><![CDATA[<p>Reading Notes</p>
<h1 id=""><img src="http://img3.douban.com/lpic/s4245583.jpg" alt="Head First Ajax"></h1><p>总的来说，延续了一贯的HeadFirst风格，文章诙谐幽默，不适令人忍俊不禁，难得一见的好书。</p>
<h2 id="AJAX_(_Asynchronous_JacaScript_and_XML_)">AJAX ( Asynchronous JacaScript and XML )</h2><p>核心是XHR对象，以异步方式从服务器获取信息<br><a id="more"></a><br><strong>工具函数-创建请求对象（uils.js）</strong> </p>
<blockquote>
<p>DRY原则<br><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createRequest</span><span class="params">()</span></span>{</span><br><span class="line"> <span class="keyword">try</span>{</span><br><span class="line"> request = <span class="keyword">new</span> XMLHttpRequest(); 兼容大多数非IE浏览器</span><br><span class="line"> } <span class="keyword">catch</span> (tryMS) {</span><br><span class="line"> request = <span class="keyword">new</span> ActiveXObject(<span class="string">"Msxm12.XMLHTTP"</span>); 兼容IE7以前的版本</span><br><span class="line"> } <span class="keyword">catch</span> (OtherMS) {</span><br><span class="line"> request = <span class="keyword">new</span> ActiveObject(<span class="string">"Microsoft.XMLHTTP"</span>);兼容IE7以前的版本</span><br><span class="line"> } <span class="keyword">catch</span> (faild) {</span><br><span class="line"> request = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<p><strong>XHR用法</strong><br><figure class="highlight vbscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">request</span>.open(<span class="string">"get"</span>,url,<span class="literal">false</span>); 调用请求</span><br><span class="line"><span class="built_in">request</span>.send(<span class="literal">null</span>); 发送请求</span><br><span class="line"><span class="built_in">request</span>.responseTest;</span><br><span class="line"><span class="built_in">request</span>.responseXML;</span><br><span class="line"></span><br><span class="line"><span class="built_in">request</span>.status; <span class="number">1</span>、<span class="number">2</span>、<span class="number">3</span>、<span class="number">4</span></span><br><span class="line"><span class="built_in">request</span>.readyState; HTTP状态码</span><br><span class="line"><span class="built_in">request</span>.onreadyStateChange; 回调函数</span><br></pre></td></tr></table></figure></p>
<h2 id="XML_&&_JSON_(还有罕见的CSV)">XML && JSON (还有罕见的CSV)</h2><blockquote>
<p><strong>XML</strong> (Extensive Markup Language)<br>创建无类型的XML-DOM树<br><strong>JSON</strong>（JavaScript Standard Object Notation)<br>对JavaScript友好，速度快，轻量级数据格式。创建标准的JS对象。</p>
</blockquote>
<h2 id="表单验证">表单验证</h2><p>正则表达式</p>
<blockquote>
<p>更详尽内容参考《精通正则表达式》</p>
</blockquote>
<h2 id="GET_&&_POST">GET && POST</h2><p>GET 常用于查询信息。直接将数据追加到URL末尾，但必须经过正确的编码”encodeURIComponent()”。<br><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addURLparam</span>(<span class="params">url,name,value</span>)</span>{</span><br><span class="line"> url += (url.indexOf(<span class="string">"?"</span>)) == -<span class="number">1</span> ? <span class="string">"?"</span> : <span class="string">"&"</span> ); 问号是否存在</span><br><span class="line"> url += <span class="built_in">encodeURIComponent</span>(name) + <span class="string">"="</span> + <span class="built_in">encodeURIComponent</span>(value);</span><br><span class="line"> <span class="keyword">return</span> url;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>POST 常用于应被保存的数据。加密，在浏览器中编码，并在服务器上解码。传递到Request.send()之中。消耗资源比GET多。<br>额外添加<em>Content-Type</em>属性名/值对时使用<strong>“application/x-www-form-urlencoded”</strong>。</p>
<blockquote>
<p>等详尽内容参考JS红宝书<br>后记：适合入门，循序渐进。提供的相关的例子很经典，值得揣摩。</p>
</blockquote>
]]></content>
<summary type="html">
<![CDATA[<p>Reading Notes</p>
<h1 id=""><img src="http://img3.douban.com/lpic/s4245583.jpg" alt="Head First Ajax"></h1><p>总的来说，延续了一贯的HeadFirst风格，文章诙谐幽默，不适令人忍俊不禁，难得一见的好书。</p>
<h2 id="AJAX_(_Asynchronous_JacaScript_and_XML_)">AJAX ( Asynchronous JacaScript and XML )</h2><p>核心是XHR对象，以异步方式从服务器获取信息<br>]]>
</summary>
<category term="ajax" scheme="http://yaochiqkl.github.io/tags/ajax/"/>
</entry>
<entry>
<title><![CDATA[初入江湖之前端有感]]></title>
<link href="http://yaochiqkl.github.io/2015/10/23/%E5%88%9D%E5%85%A5%E6%B1%9F%E6%B9%96%E4%B9%8B%E5%89%8D%E7%AB%AF%E6%9C%89%E6%84%9F/"/>
<id>http://yaochiqkl.github.io/2015/10/23/初入江湖之前端有感/</id>
<published>2015-10-23T14:12:28.000Z</published>
<updated>2015-12-03T06:47:55.055Z</updated>
<content type="html"><![CDATA[<p>学习前端有一段时间了，从开始的一无所知，到现在开始入门、自学、并成功地搭建了个人博客，收获了不少。逐渐对这一领域也有了不同的认识和感想。就此记录下来，小弟见解有限，目光短浅，如有贻误，欢迎各路大神指点一二！<br><img src="/images/Shane.jpg" alt="Shane"><br><a id="more"></a></p>
<hr>
<h3 id="一不小心">一不小心</h3><p>第一次接触前端是比较<strong>偶然</strong>的，大二下学期刚开学的时候，在年级群里看到了刘老师发布的一个通知，是他的教研室的宣讲会。我抓住了机会，按时去了教研室听宣讲，一起去的有八九个人，都是同年级的。教研室的全程是中医与数据工程实验室(KDECM)，在学姐甜姐的安排下，我们开始了教研室官方网站建设的任务。 </p>
<hr>
<h3 id="一无所知">一无所知</h3><p>那时的我是一无所知，建网站？可是我分明啥都不会，上大学以来学到的大部分都是基础的知识，很少实际运用过。学姐公布了网站的架构图和任务分布，基于JSP，分组的时候进了前端组，原因比较简单。在场的就我一个人没学过JAVA（学的是C++），其次，以为前端很简单，于是乎，就开启了前端的旅程。我以为一切都是SO EASY，连“前台”和”前端”都分不清的我是信誓旦旦。</p>
<hr>
<h3 id="一鼓作气">一鼓作气</h3><p>图书馆拿起基本厚书就跑（放心，刷过卡了），气势汹汹地翻开书，以为就像看小说一样随意地看一遍就能叱咤风云了，结果还没翻两页我就崩溃了。我当时心里不断飘着：“这是啥！？”、“这他妈又是啥！??””写的什么鬼玩意!”强行推锅给书借的不好把书扔一边就回去上网查资料学习了。好在发现了“慕课网”，体验深入人心，开始了HTML的基础教程。边看教程边敲代码，实时呈现效果，挺好玩的。</p>
<hr>
<h3 id="一筹莫展">一筹莫展</h3><p>前端组本来是有大神的，结果他参加完会议之后当天就说嫌简单，表示不再去了。我的心中万马奔腾，第二次会议的时候不知怎么的我就成了新的前端组长。赶鸭子上架似的就开始了代码的编写，一开始编写出的效果是惨目认读的，别说效果了，其实看起来就和纯的HTML文档差不多，哭瞎啊，我已经很努力了好吗！可是编出来的都是什么鬼！</p>
<hr>
<h3 id="一线生机">一线生机</h3><p>多亏同组的学长陈强解救，托同学做了一个精美的页面，切片，通过PS的一个工具，刷刷刷地完成了一个静态页面，效果精美之极。周五一到，开开心心地上交成果去，没过多久，学姐回话：页面全都是图片，没法实现要求的功能和效果，重做！又陷入了一片迷茫，开始继续编看不出来效果的HTML文档。后来还是强哥解围，提供了几个模板，在模板的基础上修改。我竟不知道人世间居然有这么神奇的存在——模板！</p>
<hr>
<h3 id="一飞冲天">一飞冲天</h3><p>自此，开始不断地修改代码，调整效果，还是编起代码学得快，迅速地掌握了HTML和CSS的很多知识。期间也遇到了很多问题，但总体还是比较顺畅。不过前端页面和后端整合的时候遇上了问题，我本以为这不归我管的。不过后来才知，MVC架构，我是负责VIEW这一层的，所以JSP页面上的JSP代码还是应该由我来写。</p>
<hr>
<h3 id="一无所措">一无所措</h3><p>尼玛，JSP代码，我又要去学那本厚而笨重的书了吗？看球不懂好么！？当时写的代码也很乱，在水深火热之中挣扎的时候学姐说了个好消息：技术大神加盟！教研室的运哥加盟网站建设任务，自此我们的网站又有了希望。实在是感谢运哥，帮助了我们很多，牺牲了好多休息时间，耐心地教我，重新编纂我们的代码，最后完成了主体的架构，让我们去调整细节。遇到解决不了问题的时候也很热心地帮忙解决。多亏运哥，网站建设的任务才如期地进行。</p>
<hr>
<h3 id="一丝一缕">一丝一缕</h3><p>也是机缘巧合，大二下所上的一门课程（人机交互）的结课作业也是制作一个学院官网的网站。这门课的老师是难得遇上的好老师，我也咨询了很多与课程无关的问题。找了很多模板，开始制作并修改，KDECM网站的建设也如火如荼地进行着。最终交上了很满意的结课作业，甚至要比KDECM的那一套更喜欢。</p>
<hr>
<h3 id="一意孤行">一意孤行</h3><p>到头来，我开始喜欢上了前端。也不再迷茫，确立了未来的路，不再在出国、读研的选择中纠结。在知乎上看到很多大神的见解，开始步入“正轨”，开始看一些经典教材，比如《Head First HTML and CSS》，这本书实在是太有趣了，很生动！比起之前借的一些枯燥无味的书，差别实在是太大了，知乎上也有相关评论，国内教材基本上都是干货，而国外的经典教材除了干货还有许多亮点，循循善诱。第二本《JavaScript DOM 编程艺术》也是一本好书，纠正了我许多错误的看法。看了好久的《JavaScript 高级程序设计》，到现在还没有看完，终于对JS这本语言有了一定的认识，想想当初以为JS语言没什么大不了了，定时要让人笑掉大牙了。JS有很完善的一套系统，所拥有的语法的不比其他高级程序语言简单。</p>
<hr>
<h3 id="一入佛门">一入佛门</h3><p>前端好可怕！谁说前端简单的！给我站出来！前端的内容实在是太繁杂了，HTML和CSS你可以说没太多技术含量，可是HTML5的一个canvas就强大到不行，一门JS的难度也是不小，何况这只是小小的一方面。要不会用几个框架诸如Bootsrap，别人都会笑话你，光会用JQuery，说自己是前端工程师都丢人。Node.JS可以将JS实现为后台语言。目前还在努力看红宝书，得空学会Angular.JS。这学期空闲时间比较多，不过没能加入创新工坊参与项目。<br>过两天就是关于下学期的实习招聘了，之前一直打算去深圳，想来想去还是留在成都吧。一来比较方便，二来有照应，专心学习为主。<br>努力经营自己的技术博客（这真的是技术博客吗。。），熟练使用Github，有空刷刷StackOverflow，但愿结果不会太差！</p>
]]></content>
<summary type="html">
<![CDATA[<p>学习前端有一段时间了，从开始的一无所知，到现在开始入门、自学、并成功地搭建了个人博客，收获了不少。逐渐对这一领域也有了不同的认识和感想。就此记录下来，小弟见解有限，目光短浅，如有贻误，欢迎各路大神指点一二！<br><img src="/images/Shane.jpg" alt="Shane"><br>]]>
</summary>
<category term="essay" scheme="http://yaochiqkl.github.io/tags/essay/"/>
</entry>
</feed>