17 |
前端进阶
18 |Phodal
19 | 20 |
21 |
152 |
180 | 
前端应用的生命周期
181 |
182 |
260 | 
嵌入式系统工程师图谱
261 |
262 |
283 | 
选型因素
284 |
285 |
318 | 
前端应用的开发流程
319 |
320 |
330 | 
前端构建流程
331 |
332 |
440 | 
PhantomCSS
441 |
442 |
547 | 
未来趋势
548 |
549 |
621 | 
Gartner 技术成熟曲线
622 |
623 |
634 |
635 |
639 |
640 |
641 |
--------------------------------------------------------------------------------
/listings-setup.tex:
--------------------------------------------------------------------------------
1 | % Contents of listings-setup.tex
2 | \usepackage{xcolor}
3 |
4 | \lstset{
5 | basicstyle=\ttfamily,
6 | numbers=left,
7 | keywordstyle=\color[rgb]{0.13,0.29,0.53}\bfseries,
8 | stringstyle=\color[rgb]{0.31,0.60,0.02},
9 | commentstyle=\color[rgb]{0.56,0.35,0.01}\itshape,
10 | numberstyle=\footnotesize,
11 | stepnumber=1,
12 | numbersep=5pt,
13 | backgroundcolor=\color[RGB]{248,248,248},
14 | showspaces=false,
15 | showstringspaces=false,
16 | showtabs=false,
17 | tabsize=2,
18 | captionpos=b,
19 | breaklines=true,
20 | breakatwhitespace=true,
21 | breakautoindent=true,
22 | escapeinside={\%*}{*)},
23 | linewidth=\textwidth,
24 | basewidth=0.5em,
25 | }
--------------------------------------------------------------------------------
/log/coral.log:
--------------------------------------------------------------------------------
1 | [16:21:28] Starting 'compile'...
2 | [16:21:28] Starting 'compile.clean'...
3 | [16:21:28] Finished 'compile.clean' after 211 ms
4 | [16:21:28] Starting 'install.bower'...
5 | (node:25435) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
6 | bower angular-animate extra-resolution Unnecessary resolution: angular-animate#~1.5.3
7 | bower angular-sanitize extra-resolution Unnecessary resolution: angular-sanitize#1.5.3
8 | [16:21:29] Finished 'install.bower' after 961 ms
9 | [16:21:29] Starting 'plugin'...
10 | plugin => 尚未添加cordova plugin，如果需要，请编辑/plugins.conf.js文件
11 | [16:21:29] Finished 'plugin' after 2.57 ms
12 | [16:21:29] Starting 'install.plugin'...
13 | [16:21:29] Finished 'install.plugin' after 4.41 μs
14 | [16:21:29] Starting 'compile.jade'...
15 | [16:21:30] Finished 'compile.jade' after 466 ms
16 | [16:21:30] Starting 'compile.font.icon'...
17 | [16:21:31] gulp-svgicons2svgfont: Font created
18 | [16:21:33] Finished 'compile.font.icon' after 2.8 s
19 | [16:21:33] Starting 'compile.glyph.icon'...
20 | [16:21:33] Finished 'compile.glyph.icon' after 441 ms
21 | [16:21:33] Starting 'compile.sass'...
22 | [16:21:35] Finished 'compile.sass' after 1.98 s
23 | [16:21:35] Starting 'compile.coffee'...
24 | [16:21:35] Finished 'compile.coffee' after 309 ms
25 | [16:21:35] Starting 'compile.es6'...
26 | [16:21:40] Finished 'compile.es6' after 4.42 s
27 | [16:21:40] Starting 'compile.typescript'...
28 | [16:21:40] Finished 'compile.typescript' after 496 ms
29 | [16:21:40] Starting 'copy.css'...
30 | [16:21:40] Finished 'copy.css' after 61 ms
31 | [16:21:40] Starting 'copy.images'...
32 | [16:21:40] Finished 'copy.images' after 12 ms
33 | [16:21:40] Starting 'copy.assets'...
34 | [16:21:40] Finished 'copy.assets' after 791 μs
35 | [16:21:40] Starting 'copy.bower'...
36 | [16:21:41] Finished 'copy.bower' after 210 ms
37 | [16:21:41] Starting 'copy.root.files'...
38 | [16:21:41] Finished 'copy.root.files' after 11 ms
39 | [16:21:41] Starting 'wire.app.js'...
40 | [16:21:41] Starting 'wire.app.scss'...
41 | [16:21:41] gulp-inject 67 files into _app.scss.
42 | [16:21:41] Finished 'wire.app.scss' after 183 ms
43 | [16:21:41] gulp-inject 164 files into index.html.
44 | [16:21:41] Finished 'wire.app.js' after 447 ms
45 | [16:21:41] Starting 'wire.app'...
46 | [16:21:41] Finished 'wire.app' after 3.25 μs
47 | [16:21:41] Starting 'install.bower'...
48 | (node:25436) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
49 | bower angular-animate extra-resolution Unnecessary resolution: angular-animate#~1.5.3
50 | bower angular-sanitize extra-resolution Unnecessary resolution: angular-sanitize#1.5.3
51 | [16:21:42] Finished 'install.bower' after 947 ms
52 | [16:21:42] Starting 'wire.bower.js'...
53 | [16:21:42] Starting 'wire.bower.css'...
54 | [16:21:42] Finished 'wire.bower.css' after 140 ms
55 | [16:21:42] Finished 'wire.bower.js' after 194 ms
56 | [16:21:42] Starting 'wire.bower'...
57 | [16:21:42] Finished 'wire.bower' after 3.57 μs
58 | [16:21:42] Starting 'copy.html'...
59 | [16:21:42] Finished 'copy.html' after 250 ms
60 | [16:21:42] Starting 'compile.templates'...
61 | [16:21:43] Finished 'compile.templates' after 646 ms
62 | [16:21:43] Finished 'compile' after 15 s
63 | [16:21:43] Starting 'watch'...
64 | [16:21:43] Finished 'watch' after 30 ms
65 | [16:21:43] Starting 'serve'...
66 | [16:21:43] Finished 'serve' after 56 ms
67 | [16:21:43] Starting 'server'...
68 | [16:21:43] Finished 'server' after 11 μs
69 | [
70 |
--------------------------------------------------------------------------------
/material/Hybrid-Automation-Testing-Scenario.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/fed/2ef56a5a9431c5144b1017e9fd962e3b8ba3ac32/material/Hybrid-Automation-Testing-Scenario.jpg
--------------------------------------------------------------------------------
/material/agile_pyramid2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/fed/2ef56a5a9431c5144b1017e9fd962e3b8ba3ac32/material/agile_pyramid2.jpg
--------------------------------------------------------------------------------
/material/chaplin-lifecycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/fed/2ef56a5a9431c5144b1017e9fd962e3b8ba3ac32/material/chaplin-lifecycle.png
--------------------------------------------------------------------------------
/material/crossbrowser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/fed/2ef56a5a9431c5144b1017e9fd962e3b8ba3ac32/material/crossbrowser.png
--------------------------------------------------------------------------------
/material/test-serv-copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phodal/fed/2ef56a5a9431c5144b1017e9fd962e3b8ba3ac32/material/test-serv-copy.png
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | h1,
2 | h2,
3 | h3,
4 | h4,
5 | h5,
6 | h6,
7 | p,
8 | blockquote {
9 | margin: 0;
10 | padding: 0;
11 | }
12 |
13 | body {
14 | font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
15 | font-size: 18px;
16 | line-height: 1.4;
17 | color: #000000;
18 | margin: 10px 13px 10px 13px;
19 | }
20 |
21 | a {
22 | color: #0069d6;
23 | }
24 |
25 | a:hover {
26 | color: #0050a3;
27 | text-decoration: none;
28 | }
29 |
30 | a img {
31 | border: none;
32 | }
33 |
34 | p {
35 | text-indent: 2em;
36 | margin-bottom: 12px;
37 | }
38 |
39 | h1,
40 | h2,
41 | h3,
42 | h4,
43 | h5,
44 | h6 {
45 | color: #404040;
46 | line-height: 36px;
47 | }
48 |
49 | h1 {
50 | margin-bottom: 32px;
51 | margin-top: 32px;
52 | font-size: 30px;
53 | color: #0050a3;
54 | }
55 |
56 | h1 a {
57 | margin-top: 100px;
58 | display: block;
59 | }
60 |
61 | h2 {
62 | font-size: 24px;
63 | margin-bottom: 28px;
64 | }
65 |
66 | h3 {
67 | font-size: 18px;
68 | margin-bottom: 24px;
69 | }
70 |
71 | h4 {
72 | font-size: 16px;
73 | }
74 |
75 | h5 {
76 | font-size: 14px;
77 | }
78 |
79 | h6 {
80 | font-size: 13px;
81 | }
82 |
83 | hr {
84 | margin: 0 0 19px;
85 | border: 0;
86 | border-bottom: 1px solid #ccc;
87 | }
88 |
89 | blockquote {
90 | padding: 2px 13px 21px 2px;
91 | margin-bottom: 12px;
92 | font-family: georgia,serif;
93 | font-style: italic;
94 | }
95 |
96 | blockquote:before {
97 | content: "\201C";
98 | font-size: 40px;
99 | margin-left: -10px;
100 | font-family: georgia,serif;
101 | color: #eee;
102 | }
103 |
104 | blockquote p {
105 | font-size: 14px;
106 | font-weight: 300;
107 | line-height: 18px;
108 | margin-bottom: 0;
109 | font-style: italic;
110 | }
111 |
112 | code, pre {
113 | font-family: Monaco, Andale Mono, Courier New, monospace;
114 | }
115 |
116 | code {
117 | background-color: #fee9cc;
118 | color: rgba(0, 0, 0, 0.75);
119 | padding: 1px 3px;
120 | font-size: 12px;
121 | -webkit-border-radius: 3px;
122 | -moz-border-radius: 3px;
123 | border-radius: 3px;
124 | }
125 |
126 | pre {
127 | display: block;
128 | padding: 14px;
129 | margin: 0 0 18px;
130 | line-height: 16px;
131 | font-size: 11px;
132 | border: 1px solid #d9d9d9;
133 | white-space: pre-line;
134 | word-wrap: break-word;
135 | }
136 |
137 | pre code {
138 | background-color: #fff;
139 | color: #737373;
140 | font-size: 11px;
141 | padding: 0;
142 | white-space: pre-wrap;
143 | }
144 |
145 |
146 | figure img {
147 | display: block;
148 | margin: 0 auto;
149 | max-width: 100%;
150 | }
151 |
152 | figcaption {
153 | text-align: center;
154 | }
155 |
156 | ul li a {
157 | font-weight: bold;
158 | }
159 |
160 | ul li ul a {
161 | font-weight: normal;
162 | }
163 |
164 | @media screen and (min-width: 768px) {
165 | body {
166 | width: 748px;
167 | margin: 40px auto;
168 | }
169 | }
170 |
171 |
172 | table {
173 | margin: 10px auto;
174 | }
175 |
176 | thead {
177 | font-size: 120%;
178 | font-weight: 1000;
179 | cursor: pointer;
180 | background: #c9dff0
181 | }
182 |
183 | thead tr th {
184 | text-align: center;
185 | font-weight: bold;
186 | padding: 12px 30px;
187 | padding-left: 42px
188 | }
189 |
190 | thead tr th span {
191 | padding-right: 20px;
192 | background-repeat: no-repeat;
193 | background-position: 100% 100%
194 | }
195 |
196 | tbody tr td {
197 | padding: 15px 10px
198 | }
199 |
200 | tbody tr td.lalign {
201 | text-align: left
202 | }
203 |
204 | tbody tr:nth-child(even) {
205 | background: #fff
206 | }
207 |
208 | tbody tr:nth-child(odd) {
209 | background: #eee
210 | }
211 |
212 | td,th {
213 | border-left: 1px solid #cbcbcb;
214 | border-width: 0 0 0 1px;
215 | font-size: inherit;
216 | margin: 0;
217 | overflow: visible;
218 | padding: .5em 1em
219 | }
220 |
221 |
222 |
223 | /* 如果你的项目仅支持 IE9+ | Chrome | Firefox 等，推荐在 中添加 .borderbox 这个 class */
224 | html.borderbox *, html.borderbox *:before, html.borderbox *:after {
225 | -moz-box-sizing: border-box;
226 | -webkit-box-sizing: border-box;
227 | box-sizing: border-box;
228 | }
229 |
230 | /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
231 | article, aside, details, figcaption, figure, footer, header, menu, nav, section {
232 | display: block;
233 | }
234 |
235 | /* HTML5 媒体文件跟 img 保持一致 */
236 | audio, canvas, video {
237 | display: inline-block;
238 | }
239 |
240 | /* 要注意表单元素并不继承父级 font 的问题 */
241 | body, button, input, select, textarea {
242 | font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
243 | }
244 |
245 | button::-moz-focus-inner,
246 | input::-moz-focus-inner {
247 | padding: 0;
248 | border: 0;
249 | }
250 |
251 | /* 去掉各Table cell 的边距并让其边重合 */
252 | table {
253 | border-collapse: collapse;
254 | border-spacing: 0;
255 | }
256 |
257 | /* 去除默认边框 */
258 | fieldset, img {
259 | border: 0;
260 | }
261 |
262 | /* 块/段落引用 */
263 | blockquote {
264 | position: relative;
265 | color: #999;
266 | font-weight: 400;
267 | border-left: 1px solid #1abc9c;
268 | padding-left: 1em;
269 | margin: 1em 3em 1em 2em;
270 | }
271 |
272 | @media only screen and ( max-width: 640px ) {
273 | blockquote {
274 | margin: 1em 0;
275 | }
276 | }
277 |
278 | /* Firefox 以外，元素没有下划线，需添加 */
279 | acronym, abbr {
280 | border-bottom: 1px dotted;
281 | font-variant: normal;
282 | }
283 |
284 | /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
285 | abbr {
286 | cursor: help;
287 | }
288 |
289 | /* 一致的 del 样式 */
290 | del {
291 | text-decoration: line-through;
292 | }
293 |
294 | address, caption, cite, code, dfn, em, th, var {
295 | font-style: normal;
296 | font-weight: 400;
297 | }
298 |
299 | /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */
300 | ul, ol {
301 | list-style: none;
302 | }
303 |
304 | /* 对齐是排版最重要的因素, 别让什么都居中 */
305 | caption, th {
306 | text-align: left;
307 | }
308 |
309 | q:before, q:after {
310 | content: '';
311 | }
312 |
313 | /* 统一上标和下标 */
314 | sub, sup {
315 | font-size: 75%;
316 | line-height: 0;
317 | position: relative;
318 | }
319 |
320 | :root sub, :root sup {
321 | vertical-align: baseline; /* for ie9 and other modern browsers */
322 | }
323 |
324 | sup {
325 | top: -0.5em;
326 | }
327 |
328 | sub {
329 | bottom: -0.25em;
330 | }
331 |
332 | /* 让链接在 hover 状态下显示下划线 */
333 | a {
334 | color: #1abc9c;
335 | }
336 |
337 | a:hover {
338 | text-decoration: underline;
339 | }
340 |
341 | a {
342 | border-bottom: 1px solid #1abc9c;
343 | }
344 |
345 | a:hover {
346 | border-bottom-color: #555;
347 | color: #555;
348 | text-decoration: none;
349 | }
350 |
351 | /* 默认不显示下划线，保持页面简洁 */
352 | ins, a {
353 | text-decoration: none;
354 | }
355 |
356 | /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
357 | * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
358 | * 关于 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
359 | * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
360 | * 一篇关于 标签的很好文章：http://html5doctor.com/u-element/
361 | */
362 | u, .typo-u {
363 | text-decoration: underline;
364 | }
365 |
366 | /* 标记，类似于手写的荧光笔的作用 */
367 | mark {
368 | background: #fffdd1;
369 | border-bottom: 1px solid #ffedce;
370 | padding: 2px;
371 | margin: 0 5px;
372 | }
373 |
374 | /* 代码片断 */
375 | pre, code, pre tt {
376 | font-family: Courier, 'Courier New', monospace;
377 | }
378 |
379 | pre {
380 | background: #f8f8f8;
381 | border: 1px solid #ddd;
382 | padding: 1em 1.5em;
383 | display: block;
384 | -webkit-overflow-scrolling: touch;
385 | }
386 |
387 | /* 一致化 horizontal rule */
388 | hr {
389 | border: none;
390 | border-bottom: 1px solid #cfcfcf;
391 | margin-bottom: 0.8em;
392 | height: 10px;
393 | }
394 |
395 | /* 底部印刷体、版本等标记 */
396 | small, .typo-small,
397 | /* 图片说明 */
398 | figcaption {
399 | font-size: 0.9em;
400 | color: #888;
401 | }
402 |
403 | strong, b {
404 | font-weight: bold;
405 | color: #000;
406 | }
407 |
408 | /* 可拖动文件添加拖动手势 */
409 | [draggable] {
410 | cursor: move;
411 | }
412 |
413 | .clearfix:before, .clearfix:after {
414 | content: "";
415 | display: table;
416 | }
417 |
418 | .clearfix:after {
419 | clear: both;
420 | }
421 |
422 | .clearfix {
423 | zoom: 1;
424 | }
425 |
426 | /* 强制文本换行 */
427 | .textwrap, .textwrap td, .textwrap th {
428 | word-wrap: break-word;
429 | word-break: break-all;
430 | }
431 |
432 | .textwrap-table {
433 | table-layout: fixed;
434 | }
435 |
436 | /* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */
437 | .serif {
438 | font-family: Palatino, Optima, Georgia, serif;
439 | }
440 |
441 | /* 保证块/段落之间的空白隔行 */
442 | p, pre, ul, ol, dl, form, hr, table,
443 | .typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote {
444 | margin-bottom: 1.2em
445 | }
446 |
447 | h1, h2, h3, h4, h5, h6 {
448 | font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
449 | font-weight: 100;
450 | color: #000;
451 | line-height: 1.35;
452 | }
453 |
454 | /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
455 | h1, h2, h3, h4, h5, h6,
456 | .typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 {
457 | margin-top: 1.2em;
458 | margin-bottom: 0.6em;
459 | line-height: 1.35;
460 | }
461 |
462 | h1, .typo-h1 {
463 | font-size: 2em;
464 | }
465 |
466 | h2, .typo-h2 {
467 | font-size: 1.8em;
468 | }
469 |
470 | h3, .typo-h3 {
471 | font-size: 1.6em;
472 | }
473 |
474 | h4, .typo-h4 {
475 | font-size: 1.4em;
476 | }
477 |
478 | h5, h6, .typo-h5, .typo-h6 {
479 | font-size: 1.2em;
480 | }
481 |
482 | /* 在文章中，应该还原 ul 和 ol 的样式 */
483 | ul, .typo-ul {
484 | margin-left: 1.3em;
485 | list-style: disc;
486 | }
487 |
488 | ol, .typo-ol {
489 | list-style: decimal;
490 | margin-left: 1.9em;
491 | }
492 |
493 | li ul, li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol {
494 | margin-bottom: 0.8em;
495 | margin-left: 2em;
496 | }
497 |
498 | li ul, .typo-ul ul, .typo-ol ul {
499 | list-style: circle;
500 | }
501 |
502 | /* 同 ul/ol，在文章中应用 table 基本格式 */
503 | table th, table td, .typo-table th, .typo-table td, table caption {
504 | border: 1px solid #ddd;
505 | padding: 0.5em 1em;
506 | color: #666;
507 | }
508 |
509 | table th, .typo-table th {
510 | background: #fbfbfb;
511 | }
512 |
513 | table thead th, .typo-table thead th {
514 | background: #f1f1f1;
515 | }
516 |
517 | table caption {
518 | border-bottom: none;
519 | }
520 |
521 | /* 去除 webkit 中 input 和 textarea 的默认样式 */
522 | .typo-input, .typo-textarea {
523 | -webkit-appearance: none;
524 | border-radius: 0;
525 | }
526 |
527 | .typo-em, em, legend, caption {
528 | color: #000;
529 | font-weight: inherit;
530 | }
531 |
532 | /* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */
533 | .typo-em {
534 | position: relative;
535 | }
536 |
537 | .typo-em:after {
538 | position: absolute;
539 | top: 0.65em;
540 | left: 0;
541 | width: 100%;
542 | overflow: hidden;
543 | white-space: nowrap;
544 | content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
545 | }
546 |
547 | /* Responsive images */
548 | img {
549 | max-width: 100%;
550 | }
551 |
--------------------------------------------------------------------------------
/template/template.tex:
--------------------------------------------------------------------------------
1 | \documentclass[a4paper, 11pt]{article}
2 | \usepackage{geometry} % 設定邊界
3 | \geometry{
4 | top=1in,
5 | inner=1in,
6 | outer=1in,
7 | bottom=1in,
8 | headheight=3ex,
9 | headsep=2ex
10 | }
11 | \usepackage{tabu}
12 | \usepackage[T1]{fontenc}
13 | \usepackage{lmodern}
14 | \usepackage{booktabs}
15 | \usepackage{amssymb,amsmath}
16 | \usepackage{ifxetex,ifluatex}
17 | \usepackage{fixltx2e} % provides \textsubscript
18 | % use upquote if available, for straight quotes in verbatim environments
19 | \IfFileExists{upquote.sty}{\usepackage{upquote}}{}
20 | \ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
21 | \usepackage[utf8]{inputenc}
22 | $if(euro)$
23 | \usepackage{eurosym}
24 | $endif$
25 | \else % if luatex or xelatex
26 | \usepackage{fontspec} % 允許設定字體
27 | \usepackage{xeCJK} % 分開設置中英文字型
28 | \setCJKmainfont{STSong} % 設定中文字型
29 | \setmainfont[Mapping=tex-text]{Times New Roman}%\rmfamily 使用的字体,默认英文和数字的字体。 % 設定英文字型
30 | \setromanfont{Georgia} % 字型
31 | \setmonofont{Courier New}
32 | \linespread{1.2}\selectfont % 行距
33 | \XeTeXlinebreaklocale "zh" % 針對中文自動換行
34 | \XeTeXlinebreakskip = 0pt plus 1pt % 字與字之間加入0pt至1pt的間距，確保左右對整齊
35 | \parindent 0em % 段落縮進
36 | \setlength{\parskip}{20pt} % 段落之間的距離
37 | \ifxetex
38 | \usepackage{xltxtra,xunicode}
39 | \fi
40 | \defaultfontfeatures{Mapping=tex-text,Scale=MatchLowercase}
41 | \newcommand{\euro}{€}
42 | $if(mainfont)$
43 | \setmainfont{$mainfont$}
44 | $endif$
45 | $if(sansfont)$
46 | \setsansfont{$sansfont$}
47 | $endif$
48 | $if(monofont)$
49 | \setmonofont{$monofont$}
50 | $endif$
51 | $if(mathfont)$
52 | \setmathfont{$mathfont$}
53 | $endif$
54 | \fi
55 | % use microtype if available
56 | \IfFileExists{microtype.sty}{\usepackage{microtype}}{}
57 | $if(geometry)$
58 | \usepackage[$for(geometry)$$geometry$$sep$,$endfor$]{geometry}
59 | $endif$
60 | $if(natbib)$
61 | \usepackage{natbib}
62 | \bibliographystyle{plainnat}
63 | $endif$
64 | $if(biblatex)$
65 | \usepackage{biblatex}
66 | $if(biblio-files)$
67 | \bibliography{$biblio-files$}
68 | $endif$
69 | $endif$
70 | $if(listings)$
71 | \usepackage{listings}
72 | $endif$
73 | $if(lhs)$
74 | \lstnewenvironment{code}{\lstset{language=Haskell,basicstyle=\small\ttfamily}}{}
75 | $endif$
76 | $if(highlighting-macros)$
77 | $highlighting-macros$
78 | $endif$
79 | $if(verbatim-in-note)$
80 | \usepackage{fancyvrb}
81 | $endif$
82 | $if(tables)$
83 | \usepackage{longtable}
84 | $endif$
85 |
86 | \usepackage{graphicx}
87 | \usepackage{caption}
88 | % We will generate all images so they have a width \maxwidth. This means
89 | % that they will get their normal width if they fit onto the page, but
90 | % are scaled down if they would overflow the margins.
91 | \makeatletter
92 | \def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth
93 | \else\Gin@nat@width\fi}
94 | \makeatother
95 | \let\Oldincludegraphics\includegraphics
96 | \renewcommand{\includegraphics}[1]{\Oldincludegraphics[width=\maxwidth]{#1}}
97 | \ifxetex
98 | \usepackage[setpagesize=false, % page size defined by xetex
99 | unicode=false, % unicode breaks when used with xetex
100 | xetex]{hyperref}
101 | \else
102 | \usepackage[unicode=true]{hyperref}
103 | \fi
104 | \hypersetup{breaklinks=true,
105 | bookmarks=true,
106 | pdfauthor={$author-meta$},
107 | pdftitle={$title-meta$},
108 | colorlinks=true,
109 | urlcolor=$if(urlcolor)$$urlcolor$$else$blue$endif$,
110 | linkcolor=$if(linkcolor)$$linkcolor$$else$magenta$endif$,
111 | pdfborder={0 0 0}}
112 | \urlstyle{same} % don't use monospace font for urls
113 | $if(links-as-notes)$
114 | % Make links footnotes instead of hotlinks:
115 | \renewcommand{\href}[2]{#2\footnote{\url{#1}}}
116 | $endif$
117 | $if(strikeout)$
118 | \usepackage[normalem]{ulem}
119 | % avoid problems with \sout in headers with hyperref:
120 | \pdfstringdefDisableCommands{\renewcommand{\sout}{}}
121 | $endif$
122 | \setlength{\parindent}{0pt}
123 | %\setlength{\parskip}{6pt plus 2pt minus 1pt}
124 | \setlength{\emergencystretch}{3em} % prevent overfull lines
125 | \usepackage{titling}
126 | \setlength{\droptitle}{-8em} % 將標題移動至頁面的上面
127 |
128 | \usepackage{fancyhdr}
129 | \usepackage{lastpage}
130 | \pagestyle{fancyplain}
131 |
132 | $if(numbersections)$
133 | \setcounter{secnumdepth}{5}
134 | $else$
135 | \setcounter{secnumdepth}{0}
136 | $endif$
137 | $if(verbatim-in-note)$
138 | \VerbatimFootnotes % allows verbatim text in footnotes
139 | $endif$
140 | $if(lang)$
141 | \ifxetex
142 | \usepackage{polyglossia}
143 | \setmainlanguage{$mainlang$}
144 | \else
145 | \usepackage[$lang$]{babel}
146 | \fi
147 | $endif$
148 | $for(header-includes)$
149 | $header-includes$
150 | $endfor$
151 |
152 | $if(title)$
153 | \title{$title$}
154 | $endif$
155 | \author{$for(author)$$author$$sep$ \and $endfor$}
156 | \date{$date$}
157 |
158 | %%%% 段落首行缩进两个字 %%%%
159 | \makeatletter
160 | \let\@afterindentfalse\@afterindenttrue
161 | \@afterindenttrue
162 | \makeatother
163 | \setlength{\parindent}{2em} %中文缩进两个汉字位
164 |
165 |
166 | %%%% 下面的命令重定义页面边距，使其符合中文刊物习惯 %%%%
167 | \addtolength{\topmargin}{-2pt}
168 | \setlength{\oddsidemargin}{0.63cm} % 3.17cm - 1 inch
169 | \setlength{\evensidemargin}{\oddsidemargin}
170 | \setlength{\textwidth}{14.66cm}
171 | \setlength{\textheight}{24.00cm} % 24.62
172 |
173 | %%%% 下面的命令设置行间距与段落间距 %%%%
174 | \linespread{1.4}
175 | % \setlength{\parskip}{1ex}
176 | \setlength{\parskip}{0.5\baselineskip}
177 |
178 |
179 | \begin{document}
180 | %%%% 定理类环境的定义 %%%%
181 | \newtheorem{example}{例} % 整体编号
182 | \newtheorem{algorithm}{算法}
183 | \newtheorem{theorem}{定理}[section] % 按 section 编号
184 | \newtheorem{definition}{定义}
185 | \newtheorem{axiom}{公理}
186 | \newtheorem{property}{性质}
187 | \newtheorem{proposition}{命题}
188 | \newtheorem{lemma}{引理}
189 | \newtheorem{corollary}{推论}
190 | \newtheorem{remark}{注解}
191 | \newtheorem{condition}{条件}
192 | \newtheorem{conclusion}{结论}
193 | \newtheorem{assumption}{假设}
194 |
195 | \newcommand{\tightlist}{%
196 | \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
197 |
198 | %%%% 重定义 %%%%
199 | \renewcommand{\contentsname}{目录} % 将Contents改为目录
200 | \renewcommand{\abstractname}{摘要} % 将Abstract改为摘要
201 | \renewcommand{\refname}{参考文献} % 将References改为参考文献
202 | \renewcommand{\indexname}{索引}
203 | \renewcommand{\figurename}{图}
204 | \renewcommand{\tablename}{表}
205 | \renewcommand{\appendixname}{附录}
206 |
207 | $for(include-before)$
208 | $include-before$
209 |
210 | $endfor$
211 | $if(toc)$
212 | {
213 | \newpage
214 | \hypersetup{linkcolor=black}
215 | \setcounter{tocdepth}{$toc-depth$}
216 | \tableofcontents
217 | }
218 | \newpage
219 | $endif$
220 | $body$
221 |
222 | $if(natbib)$
223 | $if(biblio-files)$
224 | $if(biblio-title)$
225 | $if(book-class)$
226 | \renewcommand\bibname{$biblio-title$}
227 | $else$
228 | \renewcommand\refname{$biblio-title$}
229 | $endif$
230 | $endif$
231 | \bibliography{$biblio-files$}
232 |
233 | $endif$
234 | $endif$
235 | $if(biblatex)$
236 | \printbibliography$if(biblio-title)$[title=$biblio-title$]$endif$
237 |
238 | $endif$
239 | $for(include-after)$
240 | $include-after$
241 |
242 | $endfor$
243 | \end{document}
--------------------------------------------------------------------------------
前端进阶指南
153 |什么是前端
154 |作为一本前端进阶的书，没有理由去强调一下什么是前端？可是，当你说前端的时候，我也说前端的时候，我们说的是同一个前端吗？
155 |我理解下的前端，指广泛意义上的前端。又可以称为『客户端』，泛指：与用户做交互的应用。如桌面浏览器上的浏览器、图形用户界面，移动设备上的应用程序、浏览器，又或者是各种智能、联网设备的交互都可以归属于前端。
156 |因而，在这种意义上来说，前端要做的不仅仅是 Web，还可以是混合应用，原生应用等等。
157 |这就意味着：
158 |-
159 |
- 你可以使用 CSS Layout + React Native 编写移动程序 160 |
- 你可以使用 Electron 来编写桌面应用 161 |
- 你可以使用 React VR 来编写 VR 应用 162 |
- 等等 163 |
这种时候，前端指的是，我们使用 样式（类CSS） + 类JavaScript + 模板（HTML、XML等 编写的应用。
165 |如果那些用 JavaScript 编写的应用，也划分到前端的范畴，那么：
166 |-
167 |
- 你还可以使用 JavaScript 与 Ruff、 Tessel 对硬件进行编程 168 |
- 你还可以使用 Node.js 来编写后台应用，又或者是 BFF （backend for frontend）层 169 |
在这里，我们将前端定义为 类CSS + 类 JavaScript + 模板。因为没有图形应用的应用，难以直观的与用户进行交互，做不了『客户端』应用。在这一定义下，这一类型的应用有，桌面应用、桌面网页、移动网页、移动应用等等，现在发展的有 VR 技术等等。
171 |本书内容
172 |硬技能篇
173 |前端知识要点
174 |罗列一下，一些必要的知识点
175 |希望读者都是知道的，以便于
176 |作为一个领域，它拥有相当多的知识点。
177 |如果读者已经知道了这些，那么可以跳过这一章的内容。
178 |前端应用的生命周期
179 |入门
183 |在我理解下的基础知识，就是我们可以写一些基本的样式，并能对页面的元素进行操作。举例来说，就是我们用Spring和JSP写了一个博客，然后我们可以用jQuery来对页面进行一些简单的操作，并可以调用一些API。因此，我们需要基本的HTML / CSS知识。只是要写好CSS并不是一件简单的事，这需要很多实战经验。随后，我们还需要有JavaScript的经验，要不怎么做前端呢？
184 |同时，我们还需要对DOM有一些基础的了解，才能做一些基本的操作，如修改颜色等等。在这种情况下，最简单的方案就是使用jQuery这样的工具。不过，如果可以自己操作DOM是再好不过的了。
185 |中级篇
186 |中级篇就更有意思了，现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必须的，当我们要动态的改变页面的元素时，我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器，RESTful就是必须要学会的技能。未来我们还需要Fetch API，ReactiveX这些技能。
187 |除此我们还需要掌握好HTML的语义化，像DIV / CSS这也会必须会的技能，我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说，我们开始使用Node.js来完成前端的构建等等的一系列动作，这时候必须学会使用命令行这类工具。并且，在这时候我们已经开始构建单页面应用了。
188 |高级篇
189 |JavaScript是一门易上手的语言，也充满了相当多的糟粕的用法。几年前人们使用CoffeeScript编成成JavaScript来编写更好的前端代码，现在人们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器支持不完善，但是他们是未来。同样的还有某些CSS3的特性，其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的，要写好代码，我们还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师，我们还需要把握好安全性（如跨域），做好 授权（如HTTP Basic、JWT等等）。
190 |工程化
191 |这个标题好像是放错了，这部分的内容主要都是自动构建的内容。首先，我们需要有基本的构建工具，无论你是使用gulp、grunt，还是只使用npm，这都不重要。重要的是，你可以自动化的完成构建的工具，编译、静态代码分析（JSLint、CSS Lint、TSLint）、对代码质量进行分析（如Code Climate，可以帮你检测出代码中的Bad Smell）、运行代码中的测试，并生成测试覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。
192 |兼容性
193 |虽然我们离兼容IE6的时代已越来越远了，但是我们仍然有相当多的兼容性工作要做。基本的兼容性测试就是跨浏览器的测试，即Chrome，IE，Firefox，Safari等等。除此还有在不同的操作系统上对同一浏览器的测试，某些情况下可能表现不一致。如不同操作系统的字体大小，可能会导致一些细微的问题。而随着移动设备的流行，我们还需要考虑下不同Android版本下的浏览器内核的表现不致，有时候还要一下不成器的Windows Phone。除此，还有同一个浏览器的不同版本问题，常见于IE。。
194 |前端特定
195 |除了正常的编码之外，前端还有一些比较有意思的东西，如CSS3和JavaScript动画。使用Web字体，可惜这个不太适合汉字使用。还有Icon字体，毕竟这种字体是矢量的。不过Icon字体还有一些问题，如浏览器对其的抗锯齿优化，还有一个痛是你得准备四种不同类型的字体文件。因此，产生了一种东西SVG Sprite，在以前这就是CSS Sprite，只是CSS Sprite不能缩放。最后，我们还需要掌握一些基本的图形和图表框架的使用。
196 |软件工程
197 |这一点上和大部分语言的项目一样，我们需要使用版本管理软件，如git、svn，又或者是一些内部的工具。总之你肯定要有一个，而不是 2016.07.31.zip这种文件。然后，你还需要一些依赖管理工具，对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说，npm还是挺好用的。不过就个人来说，对于传统的项目来说我总觉得bower有些难用。我们还需要模块化我们的源码文件，才能使其他人更容易开始项目。
198 |调试
199 |作为一个工程师来说，调试是必备的技能。大部分浏览器都自带有调试工具，他们都不错——如果你使用过的话。在调试的过程中，直接用Console就可以输出值、计算值等等。如果你的项目在构建的过程中有一些问题，你就需要debugger这一行代码了。在一些调用远程API的项目里，我们还需要一些更复杂的工具，即抓包工具。在调试移动设备时，像Wireshark、Charles这一类的工具，就可以让我们看到是否有一些异常的请求。当然在这个时候，还有一个不错的工具就是像Chrome自带的远程设备调试。对于移动网站来说，还要有Responsive视图。
200 |测试
201 |我遇到的很多前端工程师都是不写测试的，于是我便把它单独地抽了出现。对于一个前端项目来说，正常情况下，我们要有单元测试、功能测试，还有要一些UI测试来验证页面间是否可以跳转。对于依赖于第三方服务的应用来说，还要有一个Mock的服务来方便我们测试。如果是前后端分离的项目，我们还需要有集成测试。
202 |性能与优化
203 |要对Web应用进行性能优化，可能不是一件容易的事，有时候我们还知道哪些地方可以优化。这时候人们就可以使用Yahoo的YSlow，或者我最喜欢的Google PageSpeed来检测页面的一些问题，如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。我们还应该借助于NetWork这一类的工具，查看页面加载时，一些比较漫的资源文件，并对其进行优化。在一些情况下，我们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。
204 |设计
205 |前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图，如果是一个完整的页面，我们就需要快速分割页面布局。而依赖于不同的页面布局，如响应式、网格、FlexBox布局也会有不同的设计。而有些时候，我们就需要自己规划，制作一个基本的线框图（Wireframe）等等。
206 |SEO
207 |如果以搜索引擎作为流量来源，我们还需要考虑页面的内容，除非你用的是竞争排名。像Sitemap可能就不是我们考虑的内容，而我们还要考虑很多点。首先，我们需要保证页面的内容是对于搜索引擎是可见的，并且对应的页面还要有基本的Title、Description和Keyword。然后在一些关键的字体，如栏目标题等等可以用H2之类的大字的地方就不要放过。同时在页面设计的过程中，我们还需要考虑一些内部链接的建设。它即可以提供页面的可见度，又可以提高排名。最后，如果你是面向的是Google等支持结构化数据的搜索引擎，你还需要考虑一下MicroData / MicroFormat这一类东西。
208 |快速学习新的框架
209 |今天很流行的 Web 框架，半年以后，可能就会在市场上被『淘汰』——技术选型的时候，不被开发人员推荐；又或者它已经推出了全新的版本，使用了全新的 API，我们便需要更新现有应用。
210 |前端框架丰富多彩的今天，快速学习新的框架是每个前端程序员的必备技能。
211 |快速学习是基本能力
212 |后端程序员，开始一个新的 Web 项目时：
213 |-
214 |
- 使用 Java 语言，八成会选用 Spring 框架。 215 |
- 使用 Ruby 语言，八成会选用 Rails 框架。 216 |
- 使用 Scala 语言，八成会先用 Play 框架。 217 |
而只使用 JavaScript 的前端程序员，开始一个前端项目时。你有几成的把握，能判断他/她出会使用哪个框架？
219 |后端程序员在有限的时间内，只会使用固定的技术栈，固定的框架。对于大部分的公司来说，使用相同的后台语言，是一个更好的选择——即可以减少带成本，又可以沉淀下技术积累。
220 |而前端则不一样，不同的项目都有各自的需求，因此采用使用不同的技术栈。简单的，可以直接使用原生的 JavaScript 完成，又或者是使用 jQuery 完成开发。稍微复杂一点的项目，采用容易上手的 Vue.js 是一个不错的选择。更复杂的项目，便可以使用 Angular，可以方便后台程序员转到前端。
221 |因此，工作一定年限的程序员，都使用过不同的框架。可是，不同的程序员上手新框架的速度，总会存在一定的差异。
222 |那么，怎样才能快速上手一个新的框架呢？
223 |学习新的前端框架，要么该框架很火——即热闹驱动开发（Hype Driven Development，HDD），要么你们将采用该框架。在采用新框架的动机里，有一种是：技术演进。使用新的技术、框架，来替换现有的框架。旧的框架在某些地方上，存在着明显的缺陷。
224 |这种情形下，业务知识本身是不变的，只是要由框架本身来应对业务的变化。因此，使用新的技术来替换旧有的框架，就相当的容易——重写，我们甚至可以直接复制、粘贴，大量原有的代码。只是，仅仅做到重写业务逻辑是不够的。我们还要掌握新的框架的核心，并探索更多的可能性。
225 |如何学习新框架：守-破-离
226 |我在学校的时候，看到一个关于编程语言的学习建议：学习三种以上的编程语言，并且它们最好是三种不同类型的语言。如面向过程的编程语言 C 、脚本语言 JavaScript、Python，面向对象的编程语言 Java、再加上个近年来火热的函数式编程语言，到底也就差不多了。当我们学习了一门语言，再上手一门相似风格的语言，也是相当轻松地一件事。当我们学习了不同类型的几种语言，未来就可以轻松地绝大多数的语言。
227 |相似的，学习使用 Web 框架也是如此的。现在，对于我而来，使用一个『新框架的姿势』是：
228 |-
229 |
- 买本中文书或者找个教程、官方的 Guide，花个十几分钟了解一下框架的『知识图谱』。 230 |
- 直接找个官方的示例，运行一下 Demo。 231 |
- 上手写写应用。 232 |
- 查看官方文档，看看自己是不是漏掉了什么重要的东西。 233 |
它与我在公司接受培训的时候，学习到的『守破离』观点相似。在保留原来业务的情况下，一步步向前演进。
235 |守：应用业务知识
236 |在现有的业务上，使用新的框架是一件容易的事。拿上一份框架的说明书、一份需求文档、一个搜索引擎，就可以很容易地复制出一个产品。唯一的门槛是，你需要会读懂这些内容。这有点像新的知识阶级，只是门槛不再是识字与否，而在于是否能懂编程的知识。
237 |正如维基百科上，对于『守』的介绍一样：
238 |239 |241 |最初阶段须遵从老师教诲，认真练习基础，达到熟练的境界。
240 |
新手期的我们，拿到一个新的框架，要一下子对它了运用自如，是一件很难的事。我们只能在一个又一个的练习中，尝试去掌握框架的知识。如，原先我们使用的是 Backbone + jQuery 完成的前端应用，现在要切换到 Vue.js。我们要做的便是尝试使用 Vue.js，并不断地练习一些相关的用法。而在熟练之后，我们也会练习我们的基本套路，如在上文中说到的『新框架的姿势』。
242 |而如果不考虑练习本身的时间因素，便只剩下的一个问题是：如何找到一个合适的练习项目。然而，这样的项目在 GitHub 上有很多。可是即使它能满足我们的需求，我们有时候也不知道怎么练习？
243 |我想问题的关键在于：我们手上没有一个已经成型的业务系统。因此，我建议大家可以从创建一个博客开始做起，先使用现有的技术，再使用新的技术，慢慢的一点点往上添加内容。如我的博客，最早是基于 Django + Bootstrap，慢慢的我添加了一些新的东西：
244 |-
245 |
- 用于为搜索提供建议的 AutoSuggest 246 |
- 移动应用 API 及博客搜索 API 247 |
- 微信搜索支持功能 248 |
- 支持 Google AMP 来快速加载页面 249 |
- Google Micro Data 250 |
尽管越来越多的功能，有一些已经不再维护、关闭了。可是，它让我有机会去练习一些新的技术，掌握一些技术背后的思想，得到一些框架相关的结论。而不是每次与别人讨论时，说：xx 说 xx 框架有这样的问题，而是我试过这个框架，它有这样的问题。
252 |破：学习框架核心
253 |254 |256 |基础熟练后，试着突破原有规范让自己得到更高层次的进化。
255 |
转换技术栈，本身没有什么技术含量，但是能帮助稳固知识。当我们已经熟悉使用这个框架完成业务时，便可以细入相关思想。
257 |了解这个框架的能力，生成一份与框架有关的索引，也可以用脑图的形势来整理这些内容。
258 |如：
259 |举例，如 Angular + TypeScript，还有其他更多的可能性
263 |同时，我们还应该理解框架背后的原理。不一定深入，但是觉得去探究。如：
264 |-
265 |
- MV* 思想 266 |
- 双向数据绑定的基本原理 267 |
这些都在我的知乎专栏上《我的职业是前端工程师》有深入的介绍，有时候的读者建议多阅读相关的内容。
269 |离：探索更多可能性
270 |271 |273 |在更高层次得到新的认识并总结，自创新招数另辟出新境界。
272 |
在那之上，创造出一些新的框架。
274 |如 Redux，最早是运行的 React.js 之上。Angular 2 出来了后，有了 xx。小程序出来后，有了 xx。
275 |同理于此，当出现微信小程序的一两个星期内，我写了几篇原理相关的文章，并介绍了如何创建一个属于自己的小程序应用框架 WINV。又或者是我在对 Virtual Dom 有一定的了解后，便深入 Virtual Dom 的代码，写了一个基于 Virtual Dom 的测试辅助框架 Luffa。
276 |而这些，只有我们理解他们的原理之后，我们才可能做到这样的事。
277 |小结
278 |寻找心流
279 |这些方法适用于大部分的人，但是不一定适合你。你只需要寻找到适合你的路，然后学习。
280 |选择合适的前端框架
281 |在《全栈应用开发：精益实践》一书中，我曾提到过影响技术选型的几个因素：
282 |锤子定律：寻找更大视野
286 |年轻的时候，学会了 A 框架，总觉得 Z 网站用 A 框架来实现会更好，一定不会像今天这样经常崩溃、出Bug。**时间一长，有时候就会发现，Z 网站使用 A 不合适，他们的问题并不是框架的问题，而是运维的问题。
287 |在《咨询的奥秘》一书中，提到一个有意思的定律“锤子定律”（又称为工具定律）——圣诞节收到一把锤子的孩子，会发现所有东西都需要敲打。 出现这种情况的主要原因是，开发者对一个熟悉的工具过度的依赖。
288 |认真观察，就会发现这个现象随处可见。当一个新手程序员学会了某个最新的框架，通常来说这个框架有着更多的优点，这个时候最容易出现的想法是：替换现有的框架。可是，现有的框架并没有什么大的问题。并且凭估不充分时，新的框架则存在更多的风险。
289 |并且，对于某个熟悉工具的过度依赖，特别容易影响到技术决策——看不到更多的可能性。这时候，我们就需要头脑风暴。但是这种情况下，头脑风暴很难帮助解决问题。在这个时候，拥有更多项目、框架经验的人，可能会做出更好的选择。
290 |Angular，一站式提高生产力
291 |与 Backbone 同一时代诞生的 Angular 便是一个大而全的 MVC 框架。在这个框架里，它提供了我们所需要的各种功能，如模块管理、双向绑定等等。它涵盖了开发中的各个层面，并且层与层之间都经过了精心调适。
292 |我们所需要做的便是遵循其设计思想，来一步步完善我们的应用。Angular.js 的创建理念是：即声明式编程应该用于构建用户界面以及编写软件构件，而命令式编程非常适合来表示业务逻辑。
293 |我开始使用 Angular.js 的原因是，我使用 Ionic 来创建混合应用。出于对制作移动应用的好奇，我创建了一个又一个的移动应用，也在这时学会了 Angular.js。对于我而言，选择合适的技术栈，远远比选择流行的技术栈要重要得多，这也是我喜欢使用 Ionic 的原因。当我们在制作一个应用，它对性能要求不是很高的时候，那么我们应该选择开发速度更快的技术栈。
294 |对于复杂的前端应用来说，基于 Angular.js 应用的运行效率，仍然有大量地改进空间。在应用运行的过程中，需要不断地操作 DOM，会造成明显的卡顿。对于 WebView 性能较差或早期的移动设备来说，这就是一个致命伤。
295 |幸运的是在 2016 年底，Angular 团队推出了 Angular 2，它使用 Zone.js 实现变化的自动检测、
296 |而迟来的 Angular 2 则受奥斯本效应1的影响，逼得相当多的开发者们开始转向其它的框架。
297 |React，组件化提高复用
298 |从 Backbone 和 Angular.js 的性能问题上来看，我们会发现 DOM 是单页面应用急需改善的问题——主要是DOM 的操作非常慢。而在单页面应用中，我们又需要处理大量的 DOM，性能就更是问题了。于是，采用 Virtual DOM 的 React 的诞生，让那些饱受性能苦恼的开发者欢迎。
299 |传统的 DOM 操作是直接在 DOM 上操作的，当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说，采用 Virtual DOM 并不会有优势。开发者就可以创建出可交互的 UI。
300 |除了编写应用时，不需要对 DOM 进行直接操作，提高了应用的性能。React 还有一个重要思想是组件化，即 UI 中的每个组件都是独立封装的。与此同时，由于这些组件独立于 HTML，使它们不仅仅可以运行在浏览器里，还能作为原生应用的组件来运行。
301 |同时，在 React 中还引入了 JSX 模板，即在 JS 中编写模板，还需要使用 ES 6。令人遗憾的是 React 只是一个 View 层，它是为了优化 DOM 的操作而诞生的。为了完成一个完整的应用，我们还需要路由库、执行单向流库、web API 调用库、测试库、依赖管理库等等，这简直是一场噩梦。因此为了完整搭建出一个完整的 React 项目，我们还需要做大量的额外工作。
302 |大量的人选择 React 还有一个原因是：React Native、React VR 等等，可以让 React 运行在不同的平台之上。我们还能通过 React 轻松编写出原生应用，还有 VR 应用。
303 |在看到 Angular 2 升级以及 React 复杂性的时候，我相信有相当多的开发者转而选择 Vue.js。
304 |Vue.js，简单也是提高效率
305 |引自官网的介绍，Vue.js 是一套构建用户界面的渐进式框架，专注于MVVM 模型的 ViewModel 层。Vue.js 不仅简单、容易上手、配置设施齐全，同时拥有中文文档。
306 |对于使用 Vue.js 的开发者来说，我们仍然可以使用 熟悉的 HTML 和 CSS 来编写代码。并且，Vue.js 也使用了 Virtual DOM、Reactive 及组件化的思想，可以让我们集中精力于编写应用，而不是应用的性能。
307 |对于没有 Angular 和 React 经验的团队，并且规模不大的前端项目来说，Vue.js 是一个非常好的选择。
308 |虽然 Vue.js 的生态与 React 相比虽然差上一截，但是配套设施还是相当齐全的，如 Vuex 、 VueRouter。只是，这些组件配套都由官方来提供、维护，甚至连 awesome-vue 也都是官方项目，总觉得有些奇怪。
309 |除此，Vue.js 中定义了相当多的规矩，这种风格似乎由 jQuery 时代遗留下来的。照着这些规矩来写代码，让人觉得有些不自在。
310 |和 React 相似的是，Vue.js 也有相应的 Native 方案 Weex，仍然值得我们期待。
311 |构建系统：资深分界线
312 |Yeoman 生成脚手架，并且现在的主流前端框架都提供了相似的工
313 |打包 -> 压缩 -> 上传 -> 解压 -> 替换 -> 重启
314 |重点在于：提高工作效率
315 |为什么构建很重要
316 |过去我们打开编辑器、浏览器、修改代码、刷新页面，如下图所示：
317 |这个过程仍然没有发生太大的变化，只是很多的步骤都被自动化了：
321 |我们只需要修改代码，诸如 watchman 这样的工具就检测到修改，而 Browsersync 则可以帮助我们自动刷新页面。
322 |构建工具
323 |取决于你所使用的技术栈
324 |SASS、SCSS 因不同的情况而异
325 |webpack
326 |npm
327 |grunt / gulp
328 |构建流程
329 |LiveReload
333 |Bower
334 |concat -> init -> lint -> min -> qunit -> server -> test -> watch
335 |构建示例
336 |如下是混合应用框架 Ionic 执行 ionic serve 时的启动日志：
[11:43:58] ionic-app-scripts 1.3.4
338 | [11:43:58] watch started ...
339 | [11:43:58] build dev started ...
340 | [11:43:58] clean started ...
341 | [11:43:58] clean finished in 1 ms
342 | [11:43:58] copy started ...
343 | [11:43:58] transpile started ...
344 | [11:44:03] transpile finished in 5.17 s
345 | [11:44:03] preprocess started ...
346 | [11:44:03] deeplinks started ...
347 | [11:44:03] deeplinks finished in 132 ms
348 | [11:44:03] preprocess finished in 132 ms
349 | [11:44:03] webpack started ...
350 | [11:44:03] copy finished in 5.49 s
351 | [11:44:26] webpack finished in 22.94 s
352 | [11:44:26] sass started ...
353 | [11:44:29] sass finished in 3.21 s
354 | [11:44:29] postprocess started ...
355 | [11:44:29] postprocess finished in 85 ms
356 | [11:44:29] lint started ...
357 | [11:44:29] build dev finished in 31.57 s
358 | [11:44:29] watch ready in 31.69 s这个过程中，它会完成如下的步骤：
360 |watch -> build dev -> clean -> copy -> transpile -> preprocess (deeplinks) -> webpack (copy) -> sass -> postprocess -> build dev
361 |自动刷新
362 |转译
363 |预处理
364 |什么是前端的架构能力
365 |366 |368 |远离最佳实践，除非你能接受其带来的成本
367 |
当我们谈及『前端的架构』时，我们讨论的是复杂前端应用的架构——如果只是一个 jQuery + Bootstrap 完成的应用，那么它的架构想必是『散弹式』的应用，没有复杂的逻辑可言。
369 |“标准”的 SPA 构架实践
370 |复杂的前端应用，多数是 SPA（单页面应用），这就意味着系统的架构是前后端分离的。可前后端分离并意味着，
371 |前后端分离
372 |无状态 API
373 |workflow
374 |前后端分离的工作方式
375 |实现上，它主要关注点是：API 的设计。API 设计应该由前端开发者来驱动的。后台只提供前端想要的数据，而不是反过来的。后台提供数据，前端从中选择需要的内容。
376 |-
377 |
- 使用文档规范 API 378 |
- 契约测试：基于持续集成与自动化测试 379 |
- 前端测试与 API 适配器 380 |
风格指南：StyleGuide
382 |与之前的构建系统相比，StyleGuide 便是一种无法用工具强制执行的规范。尽管可以采用工具来做类似的事情，但是并非应该强制去做。
383 |-
384 |
- 代码规范 385 |
- 函数限制。Java -> 30 行 386 |
演进
388 |当前技术栈，未来技术栈，切换。
389 |使用了 Backbone，性能上出现一些瓶颈。
390 |是不是要重写服务。
391 |后台不能满足一些需求，考虑使用 BFF 吗
392 |选用合适的策略，并保证没有问题。
393 |最佳实践：框架
394 |在这个领域，并不存在最佳的实践。首先的问题是，要找出我们真正想实现的功能，在这之后再去完成下一个步骤。而不是先找行业中最好的实践，再将这些实践应用
395 |jQuery 在简单的前端页面里，仍然是最好的选择。
396 |jQuery + TinyMCE
397 |jQuery + Vue
398 |不久前，我需要一个 UI 框架及前端框架来实现简单的逻辑功能，并且它还应该相当的小。因此，我首先排队了 jQuery + Bootstrap，它们在体积上不太符合我的要求。
399 |-
400 |
- 发出一个 Ajax 请求，验证 Token 401 |
- 如果返回的 Token 是有效的，则生成 402 |
提炼出核心技术，
404 |对于大的公司来讲，都会要求拥有自己的核心技术。
405 |在网上，各式各样的前端开发最佳实践层出不穷，
406 |最意味着，在某些方面已经是到了极致。
407 |自动化提高效率
408 |自动化测试加快上线流程
409 |测试
410 |测试页面的输出结果，保证元素的准确性~
411 |stub: 结果，返回预期的结果。
412 |mock: 行为，预期方法被调用。
413 |ui 测试
414 |React Test Renderer
415 |<Modal
416 | animationType="fade"
417 | hardwareAccelerated={false}
418 | onRequestClose={[Function]}
419 | transparent={true}
420 | visible={false}
421 | >
422 | <View>
423 | <View
424 | style={
425 | Object {
426 | "alignItems": "center",
427 | "backgroundColor": "rgba(0,0,0,.1)",
428 | "height": 1334,
429 | "justifyContent": "center",
430 | }
431 | }
432 | >
433 | ... 截屏测试，
435 |对于那些 UI 改动较小的系统来说，这
436 |而我们知道页面截图尽管可以作为版本管理的一部分，但是一个不可比对的结果
437 |而诸如，react-test-render， Virtual Dom 测试
438 |那么，对于普通的 HTML 结构的
439 |自动构建
443 |在之前的构建系统一节里，我们讲了 xx。剩下要做的就是生成打包好的源码
444 |Gulp、Grunt
445 |自动化部署
446 |只需要一些 持续集成 的基础，如 Jenkins
447 |持续集成
448 |前端应用的架构与设计模式
449 |散弹式架构 -> jQuery
450 |项目达到一定的程度，jQuery 便有些难以管理，我们不知道哪个地方还操作了 DOM。修改了 A 处的 selector，可能会影响 B 处的 selector。
451 |这样的修改方式称为『散弹式架构』，它来自于 散弹式修改（shotgun surgery，出处《重构：改善既有代码的设计》），
452 |在使用 Backbone 的过程中，如果你采用了继承 View 的方式，你也会遇到这种遇到问题。
453 |分层结构 MV*
454 |典型的 SPA 应该会具有的模式，如 Angular，Vue.js
455 |处理数据 pipe and filter
456 |fetch、ajax、RxJS 从 API 处获取到数据
457 |这个时候的数据首先会被转换为 JSON，再过滤到需要的字段，再对字段进行特殊的处理，如 HtmlEncoded，最后再 Render 到元素上。
458 |当我们从服务器
459 |数据显示 观察者模式
460 |双向绑定，即观察者模式，又可以称为发布订阅模式（Publish/Subscribe）
461 |数据通讯
462 |除了常规的数据获取，还有在不同的框架间传输数据，如 React Native 和 WebView 的 postMessage，Cordova 的 WebView 与原生插件间
463 |消息通讯
464 |数据通讯：shared repository
465 |其他消息通讯
466 |数据通讯：local storage
467 |??? black board
468 |软技能篇
469 |在做业务的过程中提升技术
470 |471 |473 |“三个月经验，重复了五年”
472 |
测试
474 |代码可读性
475 |476 |478 |与性能相比，可读性更加重要——绝大多数的软件，并不是写完就结束周期了。当然，倒掉的创业公司的软件除外。
477 |
有意图的提升
479 |在一家大的公司里，不同的人总会有不同的运气：
480 |运气好的人遇上一个好的项目，升职加薪，从此就走上了人生的巅峰。 运气差的人摊上一个差的项目，升不了职，少加了薪，并且还获得不了技术成长。 我刚毕业那会儿，所在团队的主要工作是，维护一个『又老又旧』的系统。比起写业务代码更不幸的是，我们的主要工作是修 Bug，bug，buG, bUg。
481 |那一年多里，尽管都是维护旧系统和少量的新需求，我们还是在飞速的成长~~。而来源主要是：
482 |-
483 |
- 组内技术活动 484 |
- 花时间投入练习 485 |
- 假想项目的重构 486 |
当你在有限的条件下，还能做出一定的成绩，到底还是相当有成就感的。
488 |如果你觉得你的项目技术栈老旧，那么你一定在脑子里使用了 N 种技术栈，对他们进行重构了。并且当你有一些时间可以分配到上面，如下班前的一个小时时间，又或者黑客马拉松等等。那么，你一定会开始去做这样的事。
489 |与上面的技术活动相比，这是一个对于业务（我的意思是，对于公司来说）更有价值，并且更容易说服别人的方式。
490 |-
491 |
- 学习别的项目的技术栈，然后将之应用到现有的系统上。 492 |
- 使用一个新的技术栈练习， 以此作为技术支撑，在未来替换现有的系统。 493 |
持续学习：走出下一个『jQuery』
495 |不，仍然没有，
496 |jQuery 的最大问题在于，简单如果上手，如 Vue 有可能便会流行，然后成为下一个 jQuery
497 |jQuery 已经落后了？下一个 jQuery 已经出现了
498 |预测未来，不，我不可能。
499 |对于，大公司或者内部系统的开发者来说，由于框架能满足应用的开发，因此很容易长期采用一个框架。当然，这本身并不是问题，你有了一份的工作，一个稳定的。可是，你可能会失去学习的勇气与能力。
500 |持续学习
501 |掌握思想
502 |-
503 |
- 路由：页面跳转与模块关系 504 |
- 数据：获取与鉴权 505 |
- 数据展示：模板引擎 506 |
- 交互：事件与状态管理 507 |
后端技能
509 |阅读后端代码的能力
510 |软技能
511 |原本打算写一些时间管理，及
512 |篇幅所限
513 |知识管理
514 |将输入的知识变为输出
515 |以输出的方式来输入。
516 |Debug: 发现问题
517 |编程时，我们大部分时候都是在解决问题，即求解已知的问题。
518 |除此，我们还需要花费很多的时间在 Debug 上，即如何去发现问题所在。
519 |最后，如果仍然不能解决问题，那么就找个人、地方提问吧。
520 |扩展篇
521 |前端知识体系的广度与深度
522 |前端与后台的对比
523 |后台对于深度要求高，而前端对于广度要求高。
524 |-
525 |
- 用户体验设计 526 |
前端：用户喜爱的产品
528 |基础 HTML + JS + CSS
529 |广度 -> 用户体验、浏览器差异 -> 知识碎片
530 |jQuery + Backbone + xxx
531 |后台：高并发高可用
532 |纠结于 事务一致 锁
533 |Spring + Mybatis + Flyway
534 |数据库 + ORM + MVC
535 |论技术上的深度，自然是后台更深
536 |论用户体验上，自然是前端更深 两种很难衡量
537 |常见问题：Ops 运维 -> 环境问题
538 |对于前端来说，广度 First -> 深度。熟悉框架的相似之处，并且完成任务。
539 |对于后端来说，选定语言，基本上就已经选好一切了，Java -> Spring，Scala -> Play，Ruby -> Rails
540 |用户体验设计
541 |前端的广度
542 |在中大型规模的公司里，会有建议使用的后台语言，他们也主要使用一个后台语言。因为它已经可以很稳定地运行
543 |除非，旧的语言在应用上存在一些缺陷。或者，正在尝试使用新的技术。
544 |而对于前端来说，如果不能选择使用自己的轮子，那么就会是一片混乱。他们会使用不同的框架，不同的团队都有不同的业务场景。
545 |前端的趋势
546 |微服务与微前端
550 |551 |553 |对于后台采用微服务架构来说，在一个不同的组成部分中，使用不同的技术栈是一种不错的体验；而对于一个前端团队来说，在同一个系统的使用不同的技术栈就不是一种不错的体验。
552 |
可以使用 Web 存储技术，如 LocalStorage 来转移状态。又或者是诸如 Redux 的方式
554 |BFF
555 |状态管理
556 |Redux
557 |跨平台
558 |Angular 可以移动应用和桌面Web应用，可是它并没有像 React 有那么广泛的用途。
559 |React、React VR、React Native
560 |UI 生成
561 |过去有 DreamWeaver 这样的软件，现在也有一些强大的 UI 工具，可以直接将设计转化为代码。
562 |转型前端指南
563 |职业转型，放弃你现在的工作、相关行业经验，进入一个“新的环境”。这就意味着，当你想转到前端时，你需要面临一系列的挑战。你的老板并不会关心你的过程是怎样的，只要你能达到当前的能力要求，并有能力适应未来的变化即可。
564 |565 |567 |跳槽穷半年，转行穷三年。
566 |
在过去的两三年里，随着前端领域的火热，市场上有越来越多的、不同行业的人加入了前端大军。人们出于不同的目的，选择上了前端开发。
568 |有的是，大学里喜欢上前端这个行业，在找工作的时候，便选择了相应的岗位；有的是，不喜欢传统的编译型语言，如电子信息工程；有的是，大学上的专业找不到合适的工作，诸如数学等，并且有些专业与编程相比，拥有同等的逻辑能力要求；有的是，看前端行业很赚钱，便报了个培训班，来到了这个行业。
569 |前端这个职业吧，入门快，上手也简单。简单的网页吧，拉上几个初学者便也能完成。可一旦遇上复杂的前端应用，就会暴露出各种各样的问题。于是，那些原先由非编程领域转行过来的人，便容易招至不满。
570 |究其原因吧，是因为能力上达不到要求。我们到是可以看看，有多少人会转向人工智能，下一个行业热点。
571 |改变
572 |一点点慢慢改变，时间长，成本高，但是痛苦小
573 |主要问题：
574 |-
575 |
- 生活压力 576 |
- 经济来源 577 |
change -> 改变 -> 痛苦
579 |-
580 |
- 实验 -> 尝试写代码 -> 意义 581 |
- 培训或者 workshop 582 |
- 人脉 <-> 相似的人 583 |
- 意义 <-> 584 |
编程世界，比现实世界简单，有严格的对错。
586 |如果你是一个没有编程经验的新手，那么你应该去报一个培训班。他可以在短期内帮你提高技术，但是与之相对应的，会带来一些问题。培训机构出来的学员，都存在一定的简历造假。由于数量众多，质量上参差不齐，导致人们普遍对培训机构出来的学员，存在一定的能力怀疑。说到底，你只能把培训机构当成一个入门，它距离你找到一份工作，还有相当大差距。
587 |但是，你是真心的喜欢编程这个职业吗？
588 |我见过一些后来者，他们在开始的时候问一些愚蠢的问题，慢慢的他们意识到这些问题，都是自己搜索就能解决的。他们会加入一些小组，来提高自己。建立一些信心，并去回答一些别人的问题。
589 |后台转前端的挑战
590 |Angular 2 -> 是一个不错的选择
591 |-
592 |
- 强类型语言 TypeScript 593 |
- 依赖注入等等的设计模式思维 594 |
唯一遗憾的是，它不使用 XML 来配置
596 |Node.js 应用也是一个不错的选择
597 |其他编程领域转前端
598 |移动端到 React Native，再到 React
599 |其他行业转前端
600 |劝退
601 |编程并不是一件容易的事，如果你有业余兴趣便还好，如果没有的话，就算了。
602 |主要原因：它并不是一个赚钱的行业，你是在时间换金钱。。
603 |不妨考虑，投资，或者产生一个千万级的 idea，再找个风投
604 |万一，你又一次选错行了呢？
605 |立意已决
606 |首先，打开浏览器、下载 IDE、然后写一行 HTML 试一试
607 |简单的入门书，如 Head First HTML
608 |找一个小的项目
609 |-
610 |
- 成功的复制一些小网站到本地 611 |
- 然后，再是模拟一些小的项目 612 |
-
614 |
- 不要预期薪水可以达到市场水平。没有人关心你是谁，你只要能干活，并且小公司、外包公司可能是一个更简单的入门。 615 |
外包公司 -> 门槛低 -> 相对比较多的成功案例
617 |寻找合适的工作 -> 起步类型
618 |查看相应类型的工作，看看工作介绍
619 |事实上，按照『技术成熟曲线』理论，前端正在进入低谷期。而人工智能才是，现在，乃至未来一段时间的 IT 高薪领域。
620 |如果你真的喜欢前端，那么：Just do it!
624 |如果你爱请深爱~。
625 |前端跨行指南
626 |JavaScript 应用领域
627 |挑战：要学会新的领域的知识，以及其对应的语言知识。如开发混合应用时，在 iOS 方面，你需要有些许 Objective-C 或者 Swift 的开发能力，在 Android 方面，你还需要些许的 Java 经验。
628 |移动开发：混合开发
629 |桌面应用
630 |VR
631 |硬件
632 |其它？
633 |635 |
-
636 |
颇受欢迎的个人电脑厂商奥斯本，其公司的创新式便携电脑还没有上市，就宣布他们要推出的更高档的机器，而又迟迟无法交货，消费者闻风纷纷停止下单订购现有机种，最后导致奥斯本因收入枯竭而宣布破产。↩
637 |