Home Explore Help
Register Sign In
david
/
growth-ebook
mirror of https://github.com/phodal/growth-ebook.git
1
0
Fork 0
Files Issues 0 Wiki
Branch: gh-pages
Branches Tags
growth-ebook
/
index.html

index.html 366 KB
Permalink History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta charset="utf-8">
    5. 

  5.   <meta name="generator" content="pandoc">
    6. 

  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    7. 

  7.   <title>Growth: 全栈增长工程师指南 – </title>
    8. 

  8.   <style type="text/css">code{white-space: pre;}</style>
    9. 

  9.   <style type="text/css">
    10. 

  10. div.sourceCode { overflow-x: auto; }
    11. 

  11. table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
    12. 

  12.   margin: 0; padding: 0; vertical-align: baseline; border: none; }
    13. 

  13. table.sourceCode { width: 100%; line-height: 100%; }
    14. 

  14. td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
    15. 

  15. td.sourceCode { padding-left: 5px; }
    16. 

  16. code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
    17. 

  17. code > span.dt { color: #902000; } /* DataType */
    18. 

  18. code > span.dv { color: #40a070; } /* DecVal */
    19. 

  19. code > span.bn { color: #40a070; } /* BaseN */
    20. 

  20. code > span.fl { color: #40a070; } /* Float */
    21. 

  21. code > span.ch { color: #4070a0; } /* Char */
    22. 

  22. code > span.st { color: #4070a0; } /* String */
    23. 

  23. code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
    24. 

  24. code > span.ot { color: #007020; } /* Other */
    25. 

  25. code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
    26. 

  26. code > span.fu { color: #06287e; } /* Function */
    27. 

  27. code > span.er { color: #ff0000; font-weight: bold; } /* Error */
    28. 

  28. code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
    29. 

  29. code > span.cn { color: #880000; } /* Constant */
    30. 

  30. code > span.sc { color: #4070a0; } /* SpecialChar */
    31. 

  31. code > span.vs { color: #4070a0; } /* VerbatimString */
    32. 

  32. code > span.ss { color: #bb6688; } /* SpecialString */
    33. 

  33. code > span.im { } /* Import */
    34. 

  34. code > span.va { color: #19177c; } /* Variable */
    35. 

  35. code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
    36. 

  36. code > span.op { color: #666666; } /* Operator */
    37. 

  37. code > span.bu { } /* BuiltIn */
    38. 

  38. code > span.ex { } /* Extension */
    39. 

  39. code > span.pp { color: #bc7a00; } /* Preprocessor */
    40. 

  40. code > span.at { color: #7d9029; } /* Attribute */
    41. 

  41. code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
    42. 

  42. code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
    43. 

  43. code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
    44. 

  44. code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
    45. 

  45.   </style>
    46. 

  46.   <link rel="stylesheet" href="style.css">
    47. 

  47.   <!--[if lt IE 9]>
    48. 

  48.     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    49. 

  49.   <![endif]-->
    50. 

  50.   <meta name="viewport" content="width=device-width">
    51. 

  51. </head>
    52. 

  52. <body>
    53. 

  53. <h1>Growth: 全栈增长工程师指南</h1>
    54. 

  54. <p>By <a href="https://www.phodal.com/">Phodal</a> (Follow Me: <a href="http://weibo.com/phodal">微博</a>、<a href="https://www.zhihu.com/people/phodal">知乎</a>、<a href="https://segmentfault.com/u/phodal">SegmentFault</a>)
    55. 

  55. </p>
    56. 

  56. 

  57. <p>GitHub: <a href="https://github.com/phodal/growth-ebook">Growth: 全栈增长工程师指南</a></p>
    58. 

  58. 

  59. <p>
    60. 

  60. <strong>下载</strong>：
    61. 

  61. <a href="https://github.com/phodal/growth-ebook/releases/download/0.9.9/growth.epub">Epub版</a>、<a href="https://github.com/phodal/growth-ebook/releases/download/0.9.9/growth.mobi">Mobi版</a>、<a href="https://github.com/phodal/growth-ebook/releases/download/0.9.9/growth.pdf">PDF版</a>、<a href="https://github.com/phodal/growth-ebook/releases/download/0.9.9/growth.rtf">RTF版</a>	
    62. 

  62. <p>
    63. 

  63. 

  64. <h3>购买纸质版 Growth：《全栈应用开发：精益实践》</h3>
    65. 

  65. <p><img src="./marketing/growth-paper.jpeg" alt=""/></p>
    66. 

  66. <p>京东：<a href="http://item.jd.com/12195442.html">http://item.jd.com/12195442.html</a></p>
    67. 

  67. <p>当当： <a href="http://product.dangdang.com/25077858.html">http://product.dangdang.com/25077858.html</a></p>
    68. 

  68. <p>
    69. 

  69. 	亚马逊： <a href="https://www.amazon.cn/dp/B0722YJR89">https://www.amazon.cn/dp/B0722YJR89</a>
    70. 

  70. </p>
    71. 

  71. 

  72. <h3>
    73. 

  73. Warning: 请与
    74. 

  74. <a href="https://github.com/phodal/growth-in-action-django">《Growth：全栈增长工程师实战》</a> 一起阅读
    75. 

  75. </h3>
    76. 

  76. <p>
    77. 

  77. 阅读过程中遇到语法错误、拼写错误、技术错误等等，不妨来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。
    78. 

  78. </p>
    79. 

  79. 

  80. <p>我的其他电子书：</p>
    81. 

  81. <ul>
    82. 

  82. <li>《<a href="https://github.com/phodal/designiot">一步步搭建物联网系统</a>》</li>
    83. 

  83. <li>《<a href="https://github.com/phodal/github-roam">GitHub 漫游指南</a>》</li>
    84. 

  84. <li>《<a href="https://github.com/phodal/repractise">RePractise</a>》</li>
    85. 

  85. <li>《<a href="https://github.com/phodal/ideabook">一个全栈增长工程师的练手项目集</a>》</li>
    86. 

  86. </ul>
    87. 

  87. <p>
    88. 

  88. 	<p>微信公众号</p>
    89. 

  89. <p><img src="./marketing/wp.jpg" alt=""/></p>
    90. 

  90. <p>
    91. 

  91. <div style="width:800px">
    92. 

  92. 

  93. <iframe src="http://ghbtns.com/github-btn.html?user=phodal&repo=growth-ebook&type=watch&count=true"
    94. 

  94.         allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
    95. 

  95. </div>
    96. 

  96. <nav id="TOC">
    97. 

  97. <ul>
    98. 

  98. <li><a href="#growth-全栈增长工程师指南">Growth: 全栈增长工程师指南</a><ul>
    99. 

  99. <li><a href="#关于作者">关于作者</a></li>
    100. 

  100. <li><a href="#全栈工程师是未来">全栈工程师是未来</a><ul>
    101. 

  101. <li><a href="#技术的革新史">技术的革新史</a></li>
    102. 

  102. <li><a href="#软件开发的核心难题沟通">软件开发的核心难题：沟通</a></li>
    103. 

  103. <li><a href="#大公司的专家与小公司的全栈">大公司的专家与小公司的全栈</a></li>
    104. 

  104. <li><a href="#全栈工程师的未来无栈">全栈工程师的未来：无栈</a></li>
    105. 

  105. </ul></li>
    106. 

  106. </ul></li>
    107. 

  107. <li><a href="#基础知识篇">基础知识篇</a><ul>
    108. 

  108. <li><a href="#工具只是辅助">工具只是辅助</a><ul>
    109. 

  109. <li><a href="#webstorm-还是-sublime">WebStorm 还是 Sublime?</a></li>
    110. 

  110. <li><a href="#语言也是一种工具">语言也是一种工具</a></li>
    111. 

  111. </ul></li>
    112. 

  112. <li><a href="#提高效率的工具">提高效率的工具</a><ul>
    113. 

  113. <li><a href="#快速启动软件">快速启动软件</a></li>
    114. 

  114. <li><a href="#ide">IDE</a></li>
    115. 

  115. <li><a href="#debug-工具">DEBUG 工具</a></li>
    116. 

  116. <li><a href="#终端或命令提示符">终端或命令提示符</a></li>
    117. 

  117. <li><a href="#包管理">包管理</a></li>
    118. 

  118. </ul></li>
    119. 

  119. <li><a href="#环境搭建">环境搭建</a><ul>
    120. 

  120. <li><a href="#os-x">OS X</a></li>
    121. 

  121. <li><a href="#windows">Windows</a></li>
    122. 

  122. <li><a href="#gnulinux">GNU/Linux</a></li>
    123. 

  123. </ul></li>
    124. 

  124. <li><a href="#学好一门语言的艺术">学好一门语言的艺术</a><ul>
    125. 

  125. <li><a href="#一次语言学习体验">一次语言学习体验</a></li>
    126. 

  126. <li><a href="#输出是最好的输入">输出是最好的输入</a></li>
    127. 

  127. <li><a href="#如何应用一门新的技术">如何应用一门新的技术</a></li>
    128. 

  128. </ul></li>
    129. 

  129. <li><a href="#web-编程基础">Web 编程基础</a><ul>
    130. 

  130. <li><a href="#从浏览器到服务器">从浏览器到服务器</a></li>
    131. 

  131. <li><a href="#从-html-到页面显示">从 HTML 到页面显示</a></li>
    132. 

  132. </ul></li>
    133. 

  133. <li><a href="#html">HTML</a><ul>
    134. 

  134. <li><a href="#helloworld">hello,world</a></li>
    135. 

  135. <li><a href="#中文">中文？</a></li>
    136. 

  136. <li><a href="#其它-html-标记">其它 HTML 标记</a></li>
    137. 

  137. <li><a href="#小结-1">小结</a></li>
    138. 

  138. </ul></li>
    139. 

  139. <li><a href="#css">CSS</a><ul>
    140. 

  140. <li><a href="#简介">简介</a></li>
    141. 

  141. <li><a href="#样式与目标">样式与目标</a></li>
    142. 

  142. <li><a href="#选择器">选择器</a></li>
    143. 

  143. <li><a href="#更有趣的-css">更有趣的 CSS</a></li>
    144. 

  144. </ul></li>
    145. 

  145. <li><a href="#javascript">JavaScript</a><ul>
    146. 

  146. <li><a href="#helloworld-1">hello,world</a></li>
    147. 

  147. <li><a href="#javascriptful">JavaScriptFul</a></li>
    148. 

  148. <li><a href="#面向对象">面向对象</a></li>
    149. 

  149. <li><a href="#其他">其他</a></li>
    150. 

  150. </ul></li>
    151. 

  151. </ul></li>
    152. 

  152. <li><a href="#前端与后台">前端与后台</a><ul>
    153. 

  153. <li><a href="#后台语言选择">后台语言选择</a><ul>
    154. 

  154. <li><a href="#javascript-1">JavaScript</a></li>
    155. 

  155. <li><a href="#python">Python</a></li>
    156. 

  156. <li><a href="#java">Java</a></li>
    157. 

  157. <li><a href="#php">PHP</a></li>
    158. 

  158. <li><a href="#其他-1">其他</a></li>
    159. 

  159. </ul></li>
    160. 

  160. <li><a href="#mvc">MVC</a><ul>
    161. 

  161. <li><a href="#model">Model</a></li>
    162. 

  162. <li><a href="#view">View</a></li>
    163. 

  163. <li><a href="#controller">Controller</a></li>
    164. 

  164. <li><a href="#更多-1">更多</a></li>
    165. 

  165. </ul></li>
    166. 

  166. <li><a href="#后台即服务">后台即服务</a><ul>
    167. 

  167. <li><a href="#api-演进史">API 演进史</a></li>
    168. 

  168. <li><a href="#后台即服务-1">后台即服务</a></li>
    169. 

  169. </ul></li>
    170. 

  170. <li><a href="#数据持久化">数据持久化</a><ul>
    171. 

  171. <li><a href="#文件存储">文件存储</a></li>
    172. 

  172. <li><a href="#数据库">数据库</a></li>
    173. 

  173. <li><a href="#搜索引擎">搜索引擎</a></li>
    174. 

  174. </ul></li>
    175. 

  175. <li><a href="#前端框架选择">前端框架选择</a><ul>
    176. 

  176. <li><a href="#angular">Angular</a></li>
    177. 

  177. <li><a href="#react">React</a></li>
    178. 

  178. <li><a href="#vue">Vue</a></li>
    179. 

  179. <li><a href="#jquery-系">jQuery 系</a></li>
    180. 

  180. </ul></li>
    181. 

  181. <li><a href="#前台与后台交互">前台与后台交互</a><ul>
    182. 

  182. <li><a href="#ajax">Ajax</a></li>
    183. 

  183. <li><a href="#json">JSON</a></li>
    184. 

  184. <li><a href="#websocket">WebSocket</a></li>
    185. 

  185. </ul></li>
    186. 

  186. </ul></li>
    187. 

  187. <li><a href="#编码">编码</a><ul>
    188. 

  188. <li><a href="#编码过程">编码过程</a></li>
    189. 

  189. <li><a href="#web-应用的构建系统">Web 应用的构建系统</a><ul>
    190. 

  190. <li><a href="#web-应用的构建过程">Web 应用的构建过程</a></li>
    191. 

  191. <li><a href="#web-应用的构建实战">Web 应用的构建实战</a></li>
    192. 

  192. </ul></li>
    193. 

  193. <li><a href="#git-与版本控制">Git 与版本控制</a><ul>
    194. 

  194. <li><a href="#版本控制">版本控制</a></li>
    195. 

  195. <li><a href="#git">Git</a></li>
    196. 

  196. </ul></li>
    197. 

  197. <li><a href="#tasking">Tasking</a><ul>
    198. 

  198. <li><a href="#如何-tasking-一本书">如何 Tasking 一本书</a></li>
    199. 

  199. <li><a href="#tasking-开发任务">Tasking 开发任务</a></li>
    200. 

  200. </ul></li>
    201. 

  201. <li><a href="#写代码只是在码字">写代码只是在码字</a></li>
    202. 

  202. <li><a href="#内置索引与外置引擎">内置索引与外置引擎</a><ul>
    203. 

  203. <li><a href="#门户网站">门户网站</a></li>
    204. 

  204. <li><a href="#内置索引与外置引擎-1">内置索引与外置引擎</a></li>
    205. 

  205. </ul></li>
    206. 

  206. <li><a href="#如何编写测试">如何编写测试</a><ul>
    207. 

  207. <li><a href="#测试金字塔">测试金字塔</a></li>
    208. 

  208. <li><a href="#如何测试">如何测试</a></li>
    209. 

  209. </ul></li>
    210. 

  210. <li><a href="#测试替身">测试替身</a><ul>
    211. 

  211. <li><a href="#stub">Stub</a></li>
    212. 

  212. <li><a href="#mock">Mock</a></li>
    213. 

  213. </ul></li>
    214. 

  214. <li><a href="#测试驱动开发">测试驱动开发</a><ul>
    215. 

  215. <li><a href="#红-绿-重构">红-绿-重构</a></li>
    216. 

  216. <li><a href="#测试先行">测试先行</a></li>
    217. 

  217. </ul></li>
    218. 

  218. <li><a href="#可读的代码">可读的代码</a><ul>
    219. 

  219. <li><a href="#命名">命名</a></li>
    220. 

  220. <li><a href="#函数长度">函数长度</a></li>
    221. 

  221. <li><a href="#其他-2">其他</a></li>
    222. 

  222. </ul></li>
    223. 

  223. <li><a href="#代码重构">代码重构</a><ul>
    224. 

  224. <li><a href="#重命名">重命名</a></li>
    225. 

  225. <li><a href="#提取变量">提取变量</a></li>
    226. 

  226. <li><a href="#提炼函数">提炼函数</a></li>
    227. 

  227. </ul></li>
    228. 

  228. <li><a href="#intellij-idea-重构">Intellij Idea 重构</a><ul>
    229. 

  229. <li><a href="#提炼函数-1">提炼函数</a></li>
    230. 

  230. <li><a href="#内联函数">内联函数</a></li>
    231. 

  231. <li><a href="#查询取代临时变量">查询取代临时变量</a></li>
    232. 

  232. </ul></li>
    233. 

  233. <li><a href="#重构到设计模式">重构到设计模式</a><ul>
    234. 

  234. <li><a href="#过度设计与设计模式">过度设计与设计模式</a></li>
    235. 

  235. </ul></li>
    236. 

  236. </ul></li>
    237. 

  237. <li><a href="#上线">上线</a><ul>
    238. 

  238. <li><a href="#隔离与运行环境">隔离与运行环境</a><ul>
    239. 

  239. <li><a href="#隔离硬件虚拟机">隔离硬件：虚拟机</a></li>
    240. 

  240. <li><a href="#隔离操作系统容器虚拟化">隔离操作系统：容器虚拟化</a></li>
    241. 

  241. <li><a href="#隔离底层servlet-容器">隔离底层：Servlet 容器</a></li>
    242. 

  242. <li><a href="#隔离依赖版本虚拟环境">隔离依赖版本：虚拟环境</a></li>
    243. 

  243. <li><a href="#隔离运行环境语言虚拟机">隔离运行环境：语言虚拟机</a></li>
    244. 

  244. <li><a href="#隔离语言dsl">隔离语言：DSL</a></li>
    245. 

  245. </ul></li>
    246. 

  246. <li><a href="#lnmp-架构">LNMP 架构</a><ul>
    247. 

  247. <li><a href="#gnulinux-1">GNU/Linux</a></li>
    248. 

  248. <li><a href="#http-服务器">HTTP 服务器</a></li>
    249. 

  249. </ul></li>
    250. 

  250. <li><a href="#web-缓存">Web 缓存</a><ul>
    251. 

  251. <li><a href="#数据库端缓存">数据库端缓存</a></li>
    252. 

  252. <li><a href="#应用层缓存">应用层缓存</a></li>
    253. 

  253. <li><a href="#前端缓存">前端缓存</a></li>
    254. 

  254. <li><a href="#客户端缓存">客户端缓存</a></li>
    255. 

  255. <li><a href="#html5-离线缓存">HTML5 离线缓存</a></li>
    256. 

  256. </ul></li>
    257. 

  257. <li><a href="#可配置">可配置</a><ul>
    258. 

  258. <li><a href="#环境配置">环境配置</a></li>
    259. 

  259. <li><a href="#运行机制">运行机制</a></li>
    260. 

  260. <li><a href="#功能开关">功能开关</a></li>
    261. 

  261. </ul></li>
    262. 

  262. <li><a href="#自动化部署">自动化部署</a><ul>
    263. 

  263. <li><a href="#依赖与包仓库">依赖与包仓库</a></li>
    264. 

  264. <li><a href="#构建软件包">构建软件包</a></li>
    265. 

  265. <li><a href="#上传和安装软件包">上传和安装软件包</a></li>
    266. 

  266. </ul></li>
    267. 

  267. </ul></li>
    268. 

  268. <li><a href="#数据分析">数据分析</a><ul>
    269. 

  269. <li><a href="#构建-衡量-学习">构建-衡量-学习</a><ul>
    270. 

  270. <li><a href="#想法-构建">想法-构建</a></li>
    271. 

  271. <li><a href="#产品-衡量">产品-衡量</a></li>
    272. 

  272. <li><a href="#数据-学习">数据-学习</a></li>
    273. 

  273. </ul></li>
    274. 

  274. <li><a href="#数据分析-1">数据分析</a><ul>
    275. 

  275. <li><a href="#识别需求">识别需求</a></li>
    276. 

  276. <li><a href="#收集数据">收集数据</a></li>
    277. 

  277. <li><a href="#分析数据">分析数据</a></li>
    278. 

  278. <li><a href="#展示数据">展示数据</a></li>
    279. 

  279. </ul></li>
    280. 

  280. <li><a href="#用户数据分析google-analytics">用户数据分析：Google Analytics</a><ul>
    281. 

  281. <li><a href="#受众群体">受众群体</a></li>
    282. 

  282. <li><a href="#流量获取">流量获取</a></li>
    283. 

  283. <li><a href="#移动应用">移动应用</a></li>
    284. 

  284. </ul></li>
    285. 

  285. <li><a href="#网站性能">网站性能</a><ul>
    286. 

  286. <li><a href="#网站性能监测">网站性能监测</a></li>
    287. 

  287. <li><a href="#网站性能-1">网站性能</a></li>
    288. 

  288. </ul></li>
    289. 

  289. <li><a href="#seo">SEO</a><ul>
    290. 

  290. <li><a href="#爬虫与索引">爬虫与索引</a></li>
    291. 

  291. <li><a href="#什么样的网站需要-seo">什么样的网站需要 SEO？</a></li>
    292. 

  292. <li><a href="#seo-基础知识">SEO 基础知识</a></li>
    293. 

  293. <li><a href="#内容">内容</a></li>
    294. 

  294. </ul></li>
    295. 

  295. <li><a href="#ux-入门">UX 入门</a><ul>
    296. 

  296. <li><a href="#什么是-ux">什么是 UX</a></li>
    297. 

  297. <li><a href="#什么是简单">什么是简单？</a></li>
    298. 

  298. <li><a href="#进阶">进阶</a></li>
    299. 

  299. <li><a href="#用户体验要素">用户体验要素</a></li>
    300. 

  300. </ul></li>
    301. 

  301. <li><a href="#认知设计">认知设计</a><ul>
    302. 

  302. <li><a href="#流">流</a></li>
    303. 

  303. </ul></li>
    304. 

  304. </ul></li>
    305. 

  305. <li><a href="#持续交付">持续交付</a><ul>
    306. 

  306. <li><a href="#持续集成">持续集成</a><ul>
    307. 

  307. <li><a href="#持续集成系统">持续集成系统</a></li>
    308. 

  308. <li><a href="#持续集成流程">持续集成流程</a></li>
    309. 

  309. </ul></li>
    310. 

  310. <li><a href="#持续交付-1">持续交付</a><ul>
    311. 

  311. <li><a href="#基础设施">基础设施</a></li>
    312. 

  312. <li><a href="#持续部署">持续部署</a></li>
    313. 

  313. </ul></li>
    314. 

  314. <li><a href="#持续学习">持续学习</a><ul>
    315. 

  315. <li><a href="#持续阅读">持续阅读</a></li>
    316. 

  316. <li><a href="#持续编程">持续编程</a></li>
    317. 

  317. <li><a href="#持续写作">持续写作</a></li>
    318. 

  318. </ul></li>
    319. 

  319. </ul></li>
    320. 

  320. <li><a href="#遗留系统与修改代码">遗留系统与修改代码</a><ul>
    321. 

  321. <li><a href="#遗留代码">遗留代码</a><ul>
    322. 

  322. <li><a href="#遗留代码-1">遗留代码</a></li>
    323. 

  323. </ul></li>
    324. 

  324. <li><a href="#如何修改遗留代码">如何修改遗留代码</a><ul>
    325. 

  325. <li><a href="#修改遗留代码">修改遗留代码</a></li>
    326. 

  326. </ul></li>
    327. 

  327. <li><a href="#网站重构">网站重构</a><ul>
    328. 

  328. <li><a href="#速度优化">速度优化</a></li>
    329. 

  329. <li><a href="#功能加强">功能加强</a></li>
    330. 

  330. <li><a href="#模块重构">模块重构</a></li>
    331. 

  331. </ul></li>
    332. 

  332. </ul></li>
    333. 

  333. <li><a href="#回顾与架构设计">回顾与架构设计</a><ul>
    334. 

  334. <li><a href="#自我总结">自我总结</a><ul>
    335. 

  335. <li><a href="#吾日三省吾身">吾日三省吾身</a></li>
    336. 

  336. </ul></li>
    337. 

  337. <li><a href="#retro">Retro</a><ul>
    338. 

  338. <li><a href="#retro-的过程">Retro 的过程</a></li>
    339. 

  339. <li><a href="#三个维度">三个维度</a></li>
    340. 

  340. </ul></li>
    341. 

  341. <li><a href="#架构模式">架构模式</a><ul>
    342. 

  342. <li><a href="#预设计式架构">预设计式架构</a></li>
    343. 

  343. <li><a href="#演进式架构拥抱变化">演进式架构：拥抱变化</a></li>
    344. 

  344. </ul></li>
    345. 

  345. <li><a href="#浮现式设计">浮现式设计</a><ul>
    346. 

  346. <li><a href="#意图导向">意图导向</a></li>
    347. 

  347. <li><a href="#重构">重构</a></li>
    348. 

  348. <li><a href="#模式与演进">模式与演进</a></li>
    349. 

  349. </ul></li>
    350. 

  350. <li><a href="#每个人都是架构师">每个人都是架构师</a><ul>
    351. 

  351. <li><a href="#如何构建一个博客系统">如何构建一个博客系统</a></li>
    352. 

  352. <li><a href="#相关阅读资料">相关阅读资料</a></li>
    353. 

  353. </ul></li>
    354. 

  354. <li><a href="#架构解耦">架构解耦</a><ul>
    355. 

  355. <li><a href="#从-mvc-到微服务">从 MVC 到微服务</a></li>
    356. 

  356. <li><a href="#cqrs">CQRS</a></li>
    357. 

  357. <li><a href="#cqrs-结合微服务">CQRS 结合微服务</a></li>
    358. 

  358. </ul></li>
    359. 

  359. </ul></li>
    360. 

  360. </ul>
    361. 

  361. </nav>
    362. 

  362. <h1 id="growth-全栈增长工程师指南">Growth: 全栈增长工程师指南</h1>
    363. 

  363. <h2 id="关于作者">关于作者</h2>
    364. 

  364. <p>黄峰达（Phodal Huang）是一个创客、工程师、咨询师和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks 深圳。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。</p>
    365. 

  365. <p>作为一个开源软件作者，著有 Growth、Stepping、Lan、Echoesworks 等软件。其中开源学习应用 Growth，广受读者和用户好评，可在 APP Store 及各大 Android 应用商店下载。</p>
    366. 

  366. <p>作为一个技术作者，著有《自己动手设计物联网》（电子工业出版社）、《全栈应用开发：精益实践》（电子工业出版社，正在出版）。并在 GitHub 上开源有《Growth: 全栈增长工程师指南》、《GitHub 漫游指南》等七本电子书。</p>
    367. 

  367. <p>作为技术专家，他为英国 Packt 出版社审阅有物联网书籍《Learning IoT》、《Smart IoT》，前端书籍《Angular 2 Serices》、《Getting started with Angular》等技术书籍。</p>
    368. 

  368. <p>他热爱编程、写作、设计、旅行、hacking，你可以从他的个人网站：<a href="https://www.phodal.com/" class="uri">https://www.phodal.com/</a> 了解到更多的内容。</p>
    369. 

  369. <p>其它相关信息：</p>
    370. 

  370. <ul>
    371. 

  371. <li>微博：<a href="http://weibo.com/phodal" class="uri">http://weibo.com/phodal</a></li>
    372. 

  372. <li>GitHub： <a href="https://github.com/phodal" class="uri">https://github.com/phodal</a></li>
    373. 

  373. <li>知乎：<a href="https://www.zhihu.com/people/phodal" class="uri">https://www.zhihu.com/people/phodal</a></li>
    374. 

  374. <li>SegmentFault：<a href="https://segmentfault.com/u/phodal" class="uri">https://segmentfault.com/u/phodal</a></li>
    375. 

  375. </ul>
    376. 

  376. <p>当前为预览版，在使用的过程中遇到任何问题请及时与我联系。阅读过程中的问题，不妨在GitHub上提出来： <a href="https://github.com/phodal/fe/issues">Issues</a></p>
    377. 

  377. <p>阅读过程中遇到语法错误、拼写错误、技术错误等等，不妨来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。</p>
    378. 

  378. <p>我的电子书：</p>
    379. 

  379. <ul>
    380. 

  380. <li>《<a href="https://github.com/phodal/github-roam">GitHub 漫游指南</a>》</li>
    381. 

  381. <li>《<a href="https://github.com/phodal/fe">我的职业是前端工程师</a>》</li>
    382. 

  382. <li>《<a href="https://github.com/phodal/serverless">Serverless 架构应用开发指南</a>》</li>
    383. 

  383. <li>《<a href="https://github.com/phodal/growth-ebook">Growth: 全栈增长工程师指南</a>》</li>
    384. 

  384. <li>《<a href="https://github.com/phodal/ideabook">Phodal’s Idea实战指南</a>》</li>
    385. 

  385. <li>《<a href="https://github.com/phodal/designiot">一步步搭建物联网系统</a>》</li>
    386. 

  386. <li>《<a href="https://github.com/phodal/repractise">RePractise</a>》</li>
    387. 

  387. <li>《<a href="https://github.com/phodal/growth-in-action">Growth: 全栈增长工程师实战</a>》</li>
    388. 

  388. </ul>
    389. 

  389. <p>我的微信公众号:</p>
    390. 

  390. <figure>
    391. 

  391. <img src="assets/article/prelude/wechat.jpg" alt="微信公众号：phodal-weixin" /><figcaption>微信公众号：phodal-weixin</figcaption>
    392. 

  392. </figure>
    393. 

  393. <p>支持作者，可以加入作者的小密圈:</p>
    394. 

  394. <figure>
    395. 

  395. <img src="assets/article/prelude/xiaomiquan.jpg" alt="小密圈" /><figcaption>小密圈</figcaption>
    396. 

  396. </figure>
    397. 

  397. <p>或者转账：</p>
    398. 

  398. <figure>
    399. 

  399. <img src="assets/article/prelude/alipay.png" alt="支付宝" /><figcaption>支付宝</figcaption>
    400. 

  400. </figure>
    401. 

  401. <figure>
    402. 

  402. <img src="assets/article/prelude/wechat-pay.png" alt="微信" /><figcaption>微信</figcaption>
    403. 

  403. </figure>
    404. 

  404. <p>这是一本不止于全栈工程师的学习手册，它也包含了如何成为一个 Growth Hacker 的知识。</p>
    405. 

  405. <h2 id="全栈工程师是未来">全栈工程师是未来</h2>
    406. 

  406. <blockquote>
    407. 

  407. <p>谨以此文献给每一个为成为优秀全栈工程师奋斗的人。</p>
    408. 

  408. </blockquote>
    409. 

  409. <p>技术在过去的几十年里进步很快，也将在未来的几十年里发展得更快。今天技术的门槛下降得越来越快，原本需要一个团队做出来的 Web 应用，现在只需要一两个人就可以了。</p>
    410. 

  410. <p>同时，由于公司组织结构的变迁，以及到变化的适应度，也决定了赋予每个人的职责将会越来越多。尽管我们看到工厂化生产带来的优势，但是我们也看到了<strong>精益思想</strong>带来的变革。正是这种变革让越来越多的专家走向全栈，让组织内部有更好的交流。</p>
    411. 

  411. <p>你还将看到专家和全栈的两种不同的学习模式，以及全栈工程师的未来。</p>
    412. 

  412. <h3 id="技术的革新史">技术的革新史</h3>
    413. 

  413. <p>从开始的 CGI 到 MVC 模式，再到前后端分离的架构模式，都在不断地降低技术的门槛。而这些门槛的降低，已经足以让一两个人来完成大部分的工作了。</p>
    414. 

  414. <h4 id="cgi">CGI</h4>
    415. 

  415. <p>二十年前的网站以静态的形式出现，这样的网站并不需要太多的人去维护、管理。接着，人们发明了 CGI (通用网关接口，英语：Common Gateway Interface)来实现动态的网站。下图是一个早期网站的架构图：</p>
    416. 

  416. <figure>
    417. 

  417. <img src="assets/article/prelude/cgi-arch.gif" alt="CGI 网站架构" /><figcaption>CGI 网站架构</figcaption>
    418. 

  418. </figure>
    419. 

  419. <p>当时这种网站的URL类似于：</p>
    420. 

  420. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">https</span>://www.phodal.com/cgi-bin/getblog</code></pre></div>
    421. 

  421. <p>(PS：这个链接是为了讲解而存在的，并没有真实存在。)</p>
    422. 

  422. <p>用户访问上面的网页的时候就会访问，cgi-bin 的路径下对应的 getblog 脚本。你可以用 Shell 返回这个网页：</p>
    423. 

  423. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="co">#!/bin/sh</span>
    424. 

  424. <span class="bu">echo</span> Content-type: text/plain
    425. 

  425. <span class="bu">echo</span> hello,world</code></pre></div>
    426. 

  426. <p>Blabla，各种代码混乱地夹杂在一起。不得不说一句：这样的代码在2012年，我也看了有一些。简单地来说，这个时代的代码结构就是这样的：</p>
    427. 

  427. <figure>
    428. 

  428. <img src="assets/article/prelude/cgi-script.png" alt="CGI脚本文件" /><figcaption>CGI脚本文件</figcaption>
    429. 

  429. </figure>
    430. 

  430. <p>这简直就是一场恶梦。不过，在今天好似那些 PHP 新手也是这样写代码的。</p>
    431. 

  431. <p>好了，这时候我们就可以讨论讨论 MVC 模式了。</p>
    432. 

  432. <h4 id="mvc架构">MVC架构</h4>
    433. 

  433. <p>我有理由相信 Martin Fowler 的《企业应用架构模式》在当时一定非常受欢迎。代码从上面的耦合状态变成了：</p>
    434. 

  434. <figure>
    435. 

  435. <img src="assets/article/prelude/caf_mvc_arch.png" alt="MVC 架构" /><figcaption>MVC 架构</figcaption>
    436. 

  436. </figure>
    437. 

  437. <p>相似大家也已经对这样的架构很熟悉了，我们就不多解释了。如果你还不是非常了解的话，可以看看这本书后面的部分。</p>
    438. 

  438. <h4 id="后台服务化与前端一致化架构">后台服务化与前端一致化架构</h4>
    439. 

  439. <p>在今天看来，我们可以看到如下图所示的架构：</p>
    440. 

  440. <figure>
    441. 

  441. <img src="assets/article/prelude/oneui-serviceful-arch.png" alt="后台服务化与前台一致化架构" /><figcaption>后台服务化与前台一致化架构</figcaption>
    442. 

  442. </figure>
    443. 

  443. <p>后台在不知不觉中已经被服务化了，即只提供API接口和服务。前端在这时已经尽量地和 APP 端在结合，使得他们可以保持一致。</p>
    444. 

  444. <h3 id="软件开发的核心难题沟通">软件开发的核心难题：沟通</h3>
    445. 

  445. <p>软件开发在过去的几十年里都是大公司的专利，小公司根本没有足够的能力去做这样的事。在计算机发明后的几十年里，开发软件是大公司才能做得起的。一般的非技术公司无法定制自己的软件系统，只能去购买现有的软件。而随着技术成本的下降，到了今天一般的小公司也可以雇佣一两个人来做同样的事。这样的演进过程还真是有意思：</p>
    446. 

  446. <figure>
    447. 

  447. <img src="assets/article/prelude/develop-history.png" alt="开发演进" /><figcaption>开发演进</figcaption>
    448. 

  448. </figure>
    449. 

  449. <p>在这其中的每一个过程实质上都是为了解决沟通的问题。从瀑布到敏捷是为了解决组织内沟通的问题，从敏捷到精益不仅仅优化了组织内的沟通问题，还强化了与外部的关系。换句话说，精益结合了一部分的互联网思维。</p>
    450. 

  450. <h4 id="瀑布式">瀑布式</h4>
    451. 

  451. <p>在最开始的时候，我们预先设计好我们的功能，然后编码，在适当的时候发布我们的软件：</p>
    452. 

  452. <figure>
    453. 

  453. <img src="assets/article/prelude/old-se.jpg" alt="预先式设计的瀑布流" /><figcaption>预先式设计的瀑布流</figcaption>
    454. 

  454. </figure>
    455. 

  455. <p>然而这种开发方式很难应对市场的变化——当我们花费了几年的时间开发出了一个软件，而这个软件是几年前人们才需要的。同时，由于软件开发本身的复杂度的限制，复制的系统在后期需要大量的系统集成工作。这样的集成工作可能要花费上大量的时间——几星期、几个月。</p>
    456. 

  456. <figure>
    457. 

  457. <img src="assets/article/prelude/waterfall-process.png" alt="瀑布流的沟通模型" /><figcaption>瀑布流的沟通模型</figcaption>
    458. 

  458. </figure>
    459. 

  459. <p>当人们意识到这个问题的时候，开始改进工作流程。出现了敏捷软件开发，这可以解释为什么产品经理会经常改需求。如果一个功能本身是没必要出现的话，那么为什么要花功夫去开发。但是如果一个功能在设计的初期就没有好好设计，那么改需求也是必然的。</p>
    460. 

  460. <h4 id="敏捷式">敏捷式</h4>
    461. 

  461. <p>现有的互联网公司的工作流程和敏捷软件开发在很多部分上是相似的，都有迭代、分析等等的过程：</p>
    462. 

  462. <figure>
    463. 

  463. <img src="assets/article/prelude/scrum.png" alt="敏捷软件开发" /><figcaption>敏捷软件开发</figcaption>
    464. 

  464. </figure>
    465. 

  465. <p>但是据我的所知：国内的多数互联网公司是不写测试的、没有 Code Review 等等。当然，这也不是一篇关于如何实践敏捷的文章。敏捷与瀑布式开发在很大的区别就是：沟通问题。传统的软件开发在调研完毕后就是分析、开发等等。而敏捷开发则会强调这个过程中的沟通问题：</p>
    466. 

  466. <figure>
    467. 

  467. <img src="assets/article/prelude/scrum-communication.png" alt="敏捷软件开发的沟通模型" /><figcaption>敏捷软件开发的沟通模型</figcaption>
    468. 

  468. </figure>
    469. 

  469. <p>在整个过程中都不断地强调沟通问题，然而这时还存在一个问题：组织结构本身的问题。这样的组织结构，如下图所示：</p>
    470. 

  470. <figure>
    471. 

  471. <img src="assets/article/prelude/scrum-issues.png" alt="组织结构" /><figcaption>组织结构</figcaption>
    472. 

  472. </figure>
    473. 

  473. <p>如果市场部门/产品经理没有与研发团队坐一起来分析问题，那么问题就多了。当一个需求在实现的过程中遇到问题，到底是哪个部门的问题？</p>
    474. 

  474. <p>同样的如果我们的研发部门是这样子的结构：</p>
    475. 

  475. <figure>
    476. 

  476. <img src="assets/article/prelude/tech-org.png" alt="研发部门" /><figcaption>研发部门</figcaption>
    477. 

  477. </figure>
    478. 

  478. <p>那么在研发、上线的过程中仍然会遇到各种的沟通问题。</p>
    479. 

  479. <p>现在，让我们回过头来看看大公司的专家与小公司的全栈。</p>
    480. 

  480. <h3 id="大公司的专家与小公司的全栈">大公司的专家与小公司的全栈</h3>
    481. 

  481. <p>如果你经常看一些关于全栈和专家的技术文章的时候，你就会发现不同的人在强调不同的方向。大公司的文章喜欢强调成为某个领域的专家，小公司喜欢小而美的团队——全栈工程师。</p>
    482. 

  482. <p>如我们所见的：大公司和小公司都在解决不同类型的问题。大公司要解决性能问题，小公司要活下去需要依赖于近乎全能的人。并且，大公司和小公司都在加班。如果从这种意义上来说，我们可以发现其实大公司是在剥削劳动力。</p>
    483. 

  483. <p><strong>专家</strong></p>
    484. 

  484. <p>我们所见到的那些关于技术人员应该成为专家的文章，多数是已经成为某个技术领域里的专家写的文章。并且我们可以发现很有意思的一点是：他们都是<strong>管理者</strong>。管理者出于招聘的动机，因此更需要细分领域的专家来帮助他们解决问题。</p>
    485. 

  485. <p><strong>全栈</strong></p>
    486. 

  486. <p>相似的，我们所看到的那些关于成为全栈工程师的文章，多数是初创公司的 CTO 写的。而这些初创公司的 CTO 也多数是全栈工程师，他们需要招聘全栈工程师来帮助他们解决问题。</p>
    487. 

  487. <h4 id="两种不同的学习模型">两种不同的学习模型</h4>
    488. 

  488. <p>而不知你是否也注意到一点：专家们也在强调<strong>“一专多长”</strong>。因为单纯依靠于一个领域的技术而存在的专家已经很少了，技术专家们不得不依据于公司的需求去开拓不同的领域。毕竟“公司是指全部资本由股东出资构成，以营利为目的而依法设立的一种企业组织形式；”，管理人们假设技术本身是相通的，既然你在技术领域里有相当高的长板，那么进入一个新的技术也不是一件难事。</p>
    489. 

  489. <p>作为一个技术人员，我们是这个领域中的某个子领域专家。而作为这样一个专家，我们要扩展向另外一个领域的学习也不是一件很难的事。借鉴于我们先前的学习经验，我们可以很快的掌握这个新子域的知识。如我们所见，我们可以很快地补齐图中的短板：</p>
    490. 

  490. <figure>
    491. 

  491. <img src="assets/article/prelude/bucket.jpg" alt="木桶" /><figcaption>木桶</figcaption>
    492. 

  492. </figure>
    493. 

  493. <p>在近来的探索中发现有一点非常有意思：如果依赖于20/80法则的话，那么成为专家和全栈的学习时间是相当的。在最开始的时候，我们要在我们的全栈工程和专家都在某个技术领域达到80分的水平。</p>
    494. 

  494. <p>那么专家，还需要80%的时间去深入这个技术领域。而全栈工程师，则可以依赖于这80%的时候去开拓四个新的领域：</p>
    495. 

  495. <figure>
    496. 

  496. <img src="assets/article/prelude/expert-vs-fullstack.png" alt="全栈与专家学习时间" /><figcaption>全栈与专家学习时间</figcaption>
    497. 

  497. </figure>
    498. 

  498. <p>尽管理论上是如此，但是专家存在跨领域的学习障碍——套用现有模式。而全栈也存在学习障碍——如何成为专家，但是懂得如何学习新的领域。</p>
    499. 

  499. <h4 id="解决问题的思路不同的方式">解决问题的思路：不同的方式</h4>
    500. 

  500. <p>有意思的是——成为专家还是成为全栈，取决于人的天性，这也是两种不同的性格决定的。成为管理者还是技术人员看上去就像一种简单的划分，而在技术人员里成为专家还是全栈就是另外一种划分。这取决于人们对于一个问题的思考方式：这件事情是借由外部来解决，还是由内部解决。下面这张图刚好可以表达我的想法：</p>
    501. 

  501. <figure>
    502. 

  502. <img src="assets/article/prelude/in-out-thinking.jpeg" alt="内向与外向思维" /><figcaption>内向与外向思维</figcaption>
    503. 

  503. </figure>
    504. 

  504. <p>而这种思维依据于不同的事情可能会发生一些差异，但是总体上来说是相似的。当遇到一个需要创轮子的问题时，我们就会看到两种不同的方式。</p>
    505. 

  505. <p>对于全栈工程师来说，他们喜欢依赖于外部的思维，用于产生颠覆式思维。如 AngularJS 这样的框架便是例子，前端结合后端开发语言 Java 的思维而产生。而专家则依赖于内部的条件，创造出不一样的适应式创新。如之前流行的 Backbone 框架，适应当时的情况而产生。</p>
    506. 

  506. <h3 id="全栈工程师的未来无栈">全栈工程师的未来：无栈</h3>
    507. 

  507. <p>全栈工程师本身不应该仅仅局限于前端和后台的开发，而可以尝试去开拓更广泛的领域——因为全栈本身是依赖于工程师本身的学习能力，正是这种优秀的学习能力可以让他们接触更广泛的知识。</p>
    508. 

  508. <h4 id="全栈的短板">全栈的短板</h4>
    509. 

  509. <p>如果你也尝试过面试过全栈工程师，你会怎么去面试他们呢？把你知道的所有的不同领域的问题都拿出来问一遍。是的，这就是那些招聘全栈工程师的公司会问你的问题。</p>
    510. 

  510. <p>人们以为全栈工程师什么都会，这是一个明显的误区——然而要改变这个误区很难。最后，导致的结果是大家觉得全栈工程师的水平也就那样。换句来说，人们根本不知道什么是全栈工程师。在平时的工作里，你的队伍都知道你在不同领域有丰富的知识。而在那些不了解你的人的印象里，就是猜测你什么都会。</p>
    511. 

  511. <p>因此，这就会变成一个骂名，也是一个在目前看来很难改变的问题。在这方面只能尽可能地去了解一些通用的问题，并不能去了解所有的问题。在一次被面试全栈工程师的过程中，有一个面试官准备了几个不同语言（JavaScript、Java、Python、Ruby)的问题来问我，我只想说 Ciao —— 意大利语：你好！</p>
    512. 

  512. <p>除了这个问题——人们不了解什么是全栈工程师。还有一个问题，就是刚才我们说的成为专家的老大难问题。</p>
    513. 

  513. <h4 id="无栈">无栈</h4>
    514. 

  514. <p>让我毫不犹豫地选择当全栈工程师有两个原因：</p>
    515. 

  515. <ol type="1">
    516. 

  516. <li>这个世界充满了未解的迷，但是我只想解开我感兴趣的部分。</li>
    517. 

  517. <li>没有探索，哪来的真爱？你都没有探索过世界，你就说这是你最喜欢的领域。</li>
    518. 

  518. </ol>
    519. 

  519. <p>当我第一次看到全栈工程师这个名字的时候，我发现我已然是一个全栈工程师。因为我的学习路线比较独特：</p>
    520. 

  520. <ul>
    521. 

  521. <li>中小学，因为比赛，开始学习编程</li>
    522. 

  522. <li>高中，因为兴趣，开始学习操作系统内核设计以及游戏编程</li>
    523. 

  523. <li>大学，因为专业走向硬件的道路，因为生活拮据，用Web开发来赚钱</li>
    524. 

  524. <li>工作：主要工作领域便是：Java后端、前后端分离、SPA前端，业余还写写APP、游戏、写作</li>
    525. 

  525. </ul>
    526. 

  526. <p>而在当时我对 SEO 非常感兴趣，我发现这分析和 Marketing 似乎做得还可以。然后便往 Growth Hacking 发展了：</p>
    527. 

  527. <figure>
    528. 

  528. <img src="assets/article/prelude/growth-hacking.jpg" alt="Growth Hacking" /><figcaption>Growth Hacking</figcaption>
    529. 

  529. </figure>
    530. 

  530. <p>而这就是全栈学习带来的优势，学过的东西多，学习能力就变强。学习能力往上提的同时，你就更容易进入一个新的领域。</p>
    531. 

  531. <p>参考书籍</p>
    532. 

  532. <ul>
    533. 

  533. <li>《精益企业： 高效能组织如何规模化创新》</li>
    534. 

  534. <li>《企业应用架构模式》</li>
    535. 

  535. <li>《敏捷软件开发》</li>
    536. 

  536. <li>《技术的本质》</li>
    537. 

  537. </ul>
    538. 

  538. <h1 id="基础知识篇">基础知识篇</h1>
    539. 

  539. <p>在我们第一次开始写程序的时候，都是以 Hello World 开始的。或者：</p>
    540. 

  540. <div class="sourceCode"><pre class="sourceCode c"><code class="sourceCode c">printf(<span class="st">&quot;hello,world&quot;</span>);</code></pre></div>
    541. 

  541. <p>又或许：</p>
    542. 

  542. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="at">alert</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span></code></pre></div>
    543. 

  543. <p>过去的十几年里，试过用二十几种不同的语言，每个都是以 hello,world 作为开头。在一些特定的软件，如 Nginx，则是 <strong>It Works</strong>。</p>
    544. 

  544. <p>这是一个很长的故事，这个程序最早出现于1972年，由贝尔实验室成员布莱恩·柯林汉撰写的内部技术文件《A Tutorial Introduction to the Language B》之中。不久，同作者于1974年所撰写的《Programming in C: A Tutorial》，也延用这个范例；而以本文件扩编改写的《C语言程序设计》也保留了这个范例程式。工作时，我们也会使用类似于 hello,world 的 boilerplate 来完成基本的项目创建。</p>
    545. 

  545. <p>同时需要注意的一点是，在每个大的项目开始之前我们应该去找寻好开发环境。搭建环境是一件非常重要的事，它决定了你能不能更好地工作。毕竟环境是生产率的一部分。高效的程序员和低效程序员间的十倍差距，至少有三倍是因为环境差异。</p>
    546. 

  546. <p>因此在这一章里，我们将讲述几件事情：</p>
    547. 

  547. <ol type="1">
    548. 

  548. <li>使用怎样的操作系统</li>
    549. 

  549. <li>如何去选择工具</li>
    550. 

  550. <li>如何搭建相应操作系统上的环境</li>
    551. 

  551. <li>如何去学习一门语言</li>
    552. 

  552. </ol>
    553. 

  553. <h2 id="工具只是辅助">工具只是辅助</h2>
    554. 

  554. <p>一个好的工具确实有助于编程，但是他只会给我们带来的是帮助。我们写出来的代码还是和我们的水平保持着一致的。</p>
    555. 

  555. <p>什么是好的工具，这个说法就有很多了，但是有时候我们往往沉迷于事物的表面。有些时候 Vim 会比 Visual Studio 强大，当你只需要修改的是一个配置文件的时候，简单且足够快捷——在我们还未用 VS 打开的时候，我们已经用 Vim 做完这个活了。</p>
    556. 

  556. <blockquote>
    557. 

  557. <p>“好的装备确实能带来一些帮助，但事实是，你的演奏水平是由你自己的手指决定的。” – 《REWORK》</p>
    558. 

  558. </blockquote>
    559. 

  559. <h3 id="webstorm-还是-sublime">WebStorm 还是 Sublime?</h3>
    560. 

  560. <p>作为一个 IDE 有时候忽略的因素会过多，一开始的代码由类似于 Sublime text 之类的编辑器开始会比较合适。于是我们又开始陷入 IDE 及 Editor 之战了，无聊的时候讨论一下这些东西是有点益处的。相互了解一下各自的优点，也是不错的，偶尔可以换个环境试试。</p>
    561. 

  561. <p>刚开始学习的时候，我们只需要普通的工具，或者我们习惯了的工具去开始我们的工作。我们要的是把主要精力放在学习的东西上，而不是工具。刚开始学习一种新的语言的时候，我们不需要去讨论哪个是最好的开发工具，如 Java，有时候可能是 Eclipse，有时候可能是 Vim，如果我们为的只是去写一个 hello,world。在 Eclipse 上浪费太多的时间是不可取的，因为他用起来的效率可不比你在键盘上敲打来得快，当你移动你的手指去动你的鼠标的时候，我想你可以用那短短的时间完成编译，运行了。</p>
    562. 

  562. <h4 id="工具是为了效率">工具是为了效率</h4>
    563. 

  563. <p>寻找工具的目的和寻找捷径是一样的，我们需要更快更有效率地完成我们的工作，换句话说，我们为了获取更多的时间用于其他的事情。而这个工具的用途是要看具体的事物的，如果我们去写一个小说、博客的时候，word 或者 web editor 会比 tex studio 来得快，不是么。我们用 TEX 来排版的时候会比我们用 WORD 排版的时候来得更快，所以这个工具是相对而论的。有时候用一个顺手的工具会好很多，但是不一定会是事半功倍的。我们应该将我们的目标专注于我们的内容，而不是我们的工具上。</p>
    564. 

  564. <p>我们用 Windows 自带的画图就可以完成裁剪的时候，我们就没必要运行起 GIMP 或者 Photoshop 去完成这个简单的任务。效率在某些时候的重要性，会比你选择的工具有用得多，学习的开始就是要去了解那些大众推崇的东西。</p>
    565. 

  565. <h4 id="了解熟悉你的工具">了解、熟悉你的工具</h4>
    566. 

  566. <p>Windows 的功能很强大，只是大部分人用的是只是小小一部分。而不是一小部分，即使我们天天用着，我们也没有学习到什么新的东西。和这个就如同我们的工具一样，我们天天用着他们，如果我们只用 Word 来写写东西，那么我们可以用 Abiword 来替换他。但是明显不太可能，因为强大的工具对于我们来说有些更大的吸引力。</p>
    567. 

  567. <p>如果你负担得起你手上的工具的话，那么就尽可能去了解他能干什么。即使他是一些无关仅要的功能，比如 Emacs 的煮咖啡。有一本手册是最好不过的，手册在手边可以即时查阅，不过出于环保的情况下，就不是这样子的。手册没有办法即时同你的软件一样更新，电子版的更新会比你手上用的那个手册更新得更快。</p>
    568. 

  568. <p>Linux 下面的命令有一大堆，只是我们常用的只有一小部分——20%的命令能够完成80%的工作。如同 CISC 和 RISC 一样，我们所常用的指令会让我们忘却那些不常用的指令。而那些是最实用的，如同我们日常工作中使用的 Linux 一样，记忆过多的不实用的东西，不比把他们记在笔记上实在。我们只需要了解有那些功能，如何去用他。</p>
    569. 

  569. <h3 id="语言也是一种工具">语言也是一种工具</h3>
    570. 

  570. <p>越来越多的框架和语言出现、更新得越来越快。特别是这样一个高速发展的产业，每天都在涌现新的名词。如同我们选择语言一样，选择合适的有时候会比选得顺手的来得重要。然而，这个可以不断地被推翻。</p>
    571. 

  571. <p>当我们熟悉用 Python、Ruby、PHP 等去构建一个网站的时候，JavaScript 用来做网站后台，这怎么可能——于是 Node.js 火了。选择工具本身是一件很有趣的事，因为有着越来越多的可能性。</p>
    572. 

  572. <p>过去 PHP 是主流的开发，不过现在也是，PHP 为 WEB 而生。有一天 Ruby on Rails 出现了，一切就变了，变得高效，变得更 Powerful。MVC 一直很不错，不是么？于是越来越多的框架出现了，如 Django，Laravel 等等。不同的语言有着不同的框架，JavaScript 上也有着合适的框架，如 AngularJS。不同语言的使用者们用着他们合适的工具，因为学习新的东西，对于多数的人来说就是一种新的挑战。在学面向对象语言的时候，人们很容易把程序写成过程式的。</p>
    573. 

  573. <p>没有合适的工具，要么创造一个，要么选择一个合适的。</p>
    574. 

  574. <h4 id="小结">小结</h4>
    575. 

  575. <p>学习 Django 的时候习惯了有一个后台，于是开始使用 Laravel 的时候，寻找 Administartor。需要编译的时候习惯用 IDE，不需要的时候用 Editor，只是因为有效率，嵌入式的时候 IDE 会有效率一点。</p>
    576. 

  576. <p>以前不知道 WebStorm 的时候，习惯用 DW 来格式化 HTML，Aptana 来格式化 JavaScript。</p>
    577. 

  577. <p>以前，习惯用 WordPress 来写博客，因为可以有移动客户端，使用电脑时就不喜欢打开浏览器去写。</p>
    578. 

  578. <p>等等</p>
    579. 

  579. <p>等</p>
    580. 

  580. <h2 id="提高效率的工具">提高效率的工具</h2>
    581. 

  581. <p>在提高效率的 N 种方法里：有一个很重要的方法是使用快捷键。熟练掌握快捷键可以让我们随着自己的感觉编写程序——有时候如果我们手感不好，是不是就说明今天不适合写代码！笑~~</p>
    582. 

  582. <p>由于我们可能使用不同的操作系统来完成不同的工具。下面就先说说一些通用的、不限操作的工具：</p>
    583. 

  583. <h3 id="快速启动软件">快速启动软件</h3>
    584. 

  584. <p>在我还不和道有这样的工具的时候，我都是把图标放在下面的任务栏里：</p>
    585. 

  585. <figure>
    586. 

  586. <img src="assets/article/chapter1/windows-launch.png" alt="Windows任务栏" /><figcaption>Windows任务栏</figcaption>
    587. 

  587. </figure>
    588. 

  588. <p>直到有一天，我知道有这样的工具。这里不得不提到一本书《卓有成效的程序员》，在书中提到了很多提高效率的工具。使用快捷键是其中的一个，而还有一个是使用快速启动软件。于是，我在 Windows 上使用了 Launcy:</p>
    589. 

  589. <figure>
    590. 

  590. <img src="assets/article/chapter1/launchy.png" alt="Launchy" /><figcaption>Launchy</figcaption>
    591. 

  591. </figure>
    592. 

  592. <p>通过这个软件，我们可以在电脑上通过输入软件名，然后运行相关的软件。我们不再需要点击某个菜单，再从菜单里选中某个软件打开。</p>
    593. 

  593. <h3 id="ide">IDE</h3>
    594. 

  594. <p>尽管在上一篇中，我们说过 IDE 和编辑器没有什么好争论的。但是如果是从头开始搭建环境的话，IDE 是最好的——编辑器还需要安装相应的插件。所以，这也就是为什么面试的时候会用编辑器的原因。</p>
    595. 

  595. <p>IDE 的全称是集成开发环境，顾名思义即它集成了你需要用到的一些工具。而如果是编辑器的话，你需要自己去找寻合适的工具来做这件事。不过，这也意味着使用编辑器会有更多的自由度。如果你没有足够的时间去打造自己的开发环境就使用 IDE 吧。</p>
    596. 

  596. <p>一般来说，他们都应该有下面的一些要素：</p>
    597. 

  597. <ul>
    598. 

  598. <li><strong>shortcut（快捷键）</strong></li>
    599. 

  599. <li><strong>Code HighLight（代码高亮）</strong></li>
    600. 

  600. <li><strong>Auto Complete（自动补全）</strong></li>
    601. 

  601. <li><strong>Syntax Check（语法检查）</strong></li>
    602. 

  602. </ul>
    603. 

  603. <p>而如果是编辑器的话，就需要自己去找寻这些相应的插件。</p>
    604. 

  604. <p>IDE 一般是针对特定语言才产生的，并且优化更好。而，编辑器则需要自己去搭配。这也意味着如果你需要在多个语言上工作时，并且喜欢折腾，你可以考虑使用编辑器。</p>
    605. 

  605. <h3 id="debug-工具">DEBUG 工具</h3>
    606. 

  606. <p>不得不提及的是在有些 IDE 自带了 Debug 工具，这点可能使得使用 IDE 更有优势。在简单的项目里，我们可能不需要这样的 Debug 工具。因为我们对我们的代码库比较熟悉，一个简单的问题一眼就知道是哪里的问题。而对于那些复杂的项目来说，可能就没有那么简单了。特别是当你来到一个新的大中型项目，一个简单的逻辑在实现上可能要经过一系列的函数才能处理完。</p>
    607. 

  607. <p>这时候我们就需要 Debug 工具——对于前端开发来说，我们可能使用 Chrome 的 Dev Tools。但是对于后端来说，我们就需要使用别的工具。如下图所示的是 Intellij Idea 的 Debug 界面：</p>
    608. 

  608. <figure>
    609. 

  609. <img src="assets/article/chapter1/idea-debug.png" alt="Intellij Idea Debug" /><figcaption>Intellij Idea Debug</figcaption>
    610. 

  610. </figure>
    611. 

  611. <p>在 Debug 的过程中，我们可以根据代码的执行流程一步步向下执行。这也意味着，当出现 Bug 的时候我们可以更容易找到 Bug。这就是为什么他叫 Debug 工具的原因了。</p>
    612. 

  612. <h3 id="终端或命令提示符">终端或命令提示符</h3>
    613. 

  613. <p>在开始写代码的时候，使用 GUI 可能是难以戒掉的一个习惯。但是当你习惯了使用终端之后，或者说使用终端的工具，你会发现这是另外一片天空。对于 GUI 应用上同样的菜单来说，在终端上也会有同样的工具——只是你觉得记住更多的命令。而且不同的工具对于同一实现可能会不同的规范，而 GUI 应用则会有一致的风格。不过，总的来说使用终端是一个很有益的习惯——从速度、便捷性。忘了提到一点，当你使用 Linux 服务器的时候，你不得不使用终端。</p>
    614. 

  614. <figure>
    615. 

  615. <img src="assets/article/chapter1/linux-server-console.jpg" alt="Linux 终端截图" /><figcaption>Linux 终端截图</figcaption>
    616. 

  616. </figure>
    617. 

  617. <p>使用终端的优点在于我们可以摆脱鼠标的操作——这可以让我们更容易集中精力于完成任务。而这也是两种不同的选择，便捷还是更快。虽是如此，但是这也意味着学习 Linux 会越来越轻松。</p>
    618. 

  618. <figure>
    619. 

  619. <img src="assets/article/chapter1/linux-learn-line.png" alt="Linux 与 Windows 的学习曲线" /><figcaption>Linux 与 Windows 的学习曲线</figcaption>
    620. 

  620. </figure>
    621. 

  621. <p>虽然这是以 Linux 和 Windows 作了两个不同的对比，但是两个系统在终端工具上的差距是很大的。Linux 自身的哲学鼓励使用命令行来完成任务，这也意味着在 Linux 上会有更多的工具可以在命令行下使用。虽然 Windows 上也可以——如使用 CygWin 来完成，但是这看上去并不是那么让人满意！</p>
    622. 

  622. <h3 id="包管理">包管理</h3>
    623. 

  623. <p>虽然包管理不仅仅存在于操作系统中，还存在着语言的包管理工具。在操作系统中安装软件，最方便的东西莫过于包管理了。引自 OpenSUSE 官网的说明及图片:</p>
    624. 

  624. <figure>
    625. 

  625. <img src="assets/article/chapter1/pm.png" alt="包管理" /><figcaption>包管理</figcaption>
    626. 

  626. </figure>
    627. 

  627. <p>Linux 发行版无非就是一堆软件包 (package) 形式的应用程序加上整体地管理这些应用程序的工具。通常这些 Linux 发行版，包括 OpenSUSE，都是由成千上万不同的软件包构成的。</p>
    628. 

  628. <ul>
    629. 

  629. <li><p>软件包: 软件包不止是一个文件，内含构成软件的所有文件，包括程序本身、共享库、开发包以及使用说明等。</p></li>
    630. 

  630. <li><p>元数据 (metadata) 包含于软件包之中，包含软件正常运行所需要的一些信息。软件包安装之后，其元数据就存储于本地的软件包数据库之中，以用于软件包检索。</p></li>
    631. 

  631. <li><p>依赖关系 (dependencies) 是软件包管理的一个重要方面。实际上每个软件包都会涉及到其他的软件包，软件包里程序的运行需要有一个可执行的环境（要求有其他的程序、库等），软件包依赖关系正是用来描述这种关系的。</p></li>
    632. 

  632. </ul>
    633. 

  633. <p>我们经常会使用各式各样的包管理工具，来加速我们地日常使用。而不是 Google 某个软件，然后下载，接着安装。</p>
    634. 

  634. <h2 id="环境搭建">环境搭建</h2>
    635. 

  635. <p>由于我近期工作在 Mac OS X 上，所以先以 Mac OS X 为例。</p>
    636. 

  636. <h3 id="os-x">OS X</h3>
    637. 

  637. <p><strong><a href="http://brew.sh/">Homebrew</a></strong></p>
    638. 

  638. <blockquote>
    639. 

  639. <p>包管理工具，官方称之为 The missing package manager for OS X。</p>
    640. 

  640. </blockquote>
    641. 

  641. <p><strong><a href="https://caskroom.github.io/">Homebrew Cask</a></strong></p>
    642. 

  642. <blockquote>
    643. 

  643. <p>brew-cask 允许你使用命令行安装 OS X 应用。</p>
    644. 

  644. </blockquote>
    645. 

  645. <p><strong><a href="https://www.iterm2.com/">iTerm2</a></strong></p>
    646. 

  646. <blockquote>
    647. 

  647. <p>iTerm2 是最常用的终端应用，是 Terminal 应用的替代品。</p>
    648. 

  648. </blockquote>
    649. 

  649. <p><strong><a href="http://www.zsh.org/">Zsh</a></strong></p>
    650. 

  650. <p>Zsh 是一款功能强大终端（shell）软件，既可以作为一个交互式终端，也可以作为一个脚本解释器。它在兼容 Bash 的同时 (默认不兼容，除非设置成 emulate sh) 还有提供了很多改进，例如：</p>
    651. 

  651. <ul>
    652. 

  652. <li>更高效</li>
    653. 

  653. <li>更好的自动补全</li>
    654. 

  654. <li>更好的文件名展开（通配符展开）</li>
    655. 

  655. <li>更好的数组处理</li>
    656. 

  656. <li>可定制性高</li>
    657. 

  657. </ul>
    658. 

  658. <p><strong><a href="http://ohmyz.sh/">Oh My Zsh</a></strong></p>
    659. 

  659. <blockquote>
    660. 

  660. <p>Oh My Zsh 同时提供一套插件和工具，可以简化命令行操作。</p>
    661. 

  661. </blockquote>
    662. 

  662. <p><strong><a href="https://www.sublimetext.com/">Sublime Text 2</a></strong></p>
    663. 

  663. <blockquote>
    664. 

  664. <p>强大的文件编辑器。</p>
    665. 

  665. </blockquote>
    666. 

  666. <p><strong><a href="http://macdown.uranusjr.com/">MacDown</a></strong></p>
    667. 

  667. <blockquote>
    668. 

  668. <p>MacDown 是 Markdown 编辑器。</p>
    669. 

  669. </blockquote>
    670. 

  670. <p><strong><a href="https://www.mediaatelier.com/CheatSheet/">CheatSheet</a></strong></p>
    671. 

  671. <blockquote>
    672. 

  672. <p>CheatSheet 能够显示当前程序的快捷键列表，默认的快捷键是长按⌘。</p>
    673. 

  673. </blockquote>
    674. 

  674. <p><strong><a href="https://www.sourcetreeapp.com/">SourceTree</a></strong></p>
    675. 

  675. <blockquote>
    676. 

  676. <p>SourceTree 是 Atlassian 公司出品的一款优秀的 Git 图形化客户端。</p>
    677. 

  677. </blockquote>
    678. 

  678. <p><strong><a href="https://www.alfredapp.com/">Alfred</a></strong></p>
    679. 

  679. <blockquote>
    680. 

  680. <p>Mac 用户不用鼠标键盘的必备神器，配合大量 Workflows，习惯之后可以大大减少操作时间。</p>
    681. 

  681. </blockquote>
    682. 

  682. <p>上手简单，调教成本在后期自定义 Workflows，不过有大量雷锋使用者提供的现成扩展，访问这里挑选喜欢的，并可以极其简单地根据自己的需要修改。</p>
    683. 

  683. <p><strong><a href="https://vimium.github.io/">Vimium</a></strong></p>
    684. 

  684. <blockquote>
    685. 

  685. <p>Vimium 是一个 Google Chrome 扩展，让你可以纯键盘操作 Chrome。</p>
    686. 

  686. </blockquote>
    687. 

  687. <p>相关参考：</p>
    688. 

  688. <ul>
    689. 

  689. <li><a href="https://gist.github.com/erikreagan/3259442">Mac web developer apps</a></li>
    690. 

  690. <li><a href="https://github.com/macdao/ocds-guide-to-setting-up-mac">强迫症的 Mac 设置指南</a></li>
    691. 

  691. </ul>
    692. 

  692. <h3 id="windows">Windows</h3>
    693. 

  693. <p><strong><a href="https://chocolatey.org/">Chocolatey</a></strong></p>
    694. 

  694. <blockquote>
    695. 

  695. <p>Chocolatey 是一个软件包管理工具，类似于 Ubuntu 下面的 apt-get,不过是运行在 Windows 环境下面。</p>
    696. 

  696. </blockquote>
    697. 

  697. <p><strong><a href="http://www.getwox.com/">Wox</a></strong></p>
    698. 

  698. <blockquote>
    699. 

  699. <p>Wox 是一个高效的快速启动器工具，通过快捷键呼出，然后输入关键字来搜索程序进行快速启动，或者搜索本地硬盘的文件，打开百度、Google 进行搜索，甚至是通过一些插件的功能实现单词翻译、关闭屏幕、查询剪贴板历史、查询编程文档、查询天气等更多功能。它最大的特点是可以支持中文拼音的模糊匹配。</p>
    700. 

  700. </blockquote>
    701. 

  701. <p><strong><a href="https://msdn.microsoft.com/en-us/powershell/mt173057.aspx">PowerShell</a></strong></p>
    702. 

  702. <blockquote>
    703. 

  703. <p>Windows PowerShell 是微软公司为 Windows 环境所开发的壳程序（shell）及脚本语言技术，采用的是命令行界面。这项全新的技术提供了丰富的控制与自动化的系统管理能力。</p>
    704. 

  704. </blockquote>
    705. 

  705. <p><strong><a href="http://cmder.net/">cmder</a></strong></p>
    706. 

  706. <blockquote>
    707. 

  707. <p>cmder 把 conemu，msysgit 和 clink 打包在一起，让你无需配置就能使用一个真正干净的 Linux 终端！她甚至还附带了漂亮的 monokai 配色主题。</p>
    708. 

  708. </blockquote>
    709. 

  709. <p><strong><a href="http://www.ghisler.com/">Total Commander</a></strong></p>
    710. 

  710. <blockquote>
    711. 

  711. <p>Total Commander 是一款应用于 Windows 平台的文件管理器 ，它包含两个并排的窗口，这种设计可以让用户方便地对不同位置的“文件或文件夹”进行操作，例如复制、移动、删除、比较等，相对 Windows 资源管理器而言方便很多，极大地提高了文件操作的效率，被广大软件爱好者亲切地简称为：TC 。</p>
    712. 

  712. </blockquote>
    713. 

  713. <h3 id="gnulinux">GNU/Linux</h3>
    714. 

  714. <p><strong><a href="http://www.zsh.org/">Zsh</a></strong></p>
    715. 

  715. <p>Zsh 是一款功能强大终端（shell）软件，既可以作为一个交互式终端，也可以作为一个脚本解释器。它在兼容 Bash 的同时 (默认不兼容，除非设置成 emulate sh) 还有提供了很多改进，例如：</p>
    716. 

  716. <ul>
    717. 

  717. <li>更高效</li>
    718. 

  718. <li>更好的自动补全</li>
    719. 

  719. <li>更好的文件名展开（通配符展开）</li>
    720. 

  720. <li>更好的数组处理</li>
    721. 

  721. <li>可定制性高</li>
    722. 

  722. </ul>
    723. 

  723. <p><strong><a href="http://ohmyz.sh/">Oh My Zsh</a></strong></p>
    724. 

  724. <blockquote>
    725. 

  725. <p>Oh My Zsh 同时提供一套插件和工具，可以简化命令行操作。</p>
    726. 

  726. </blockquote>
    727. 

  727. <p><strong><a href="https://github.com/retext-project/retext">ReText</a></strong></p>
    728. 

  728. <blockquote>
    729. 

  729. <p>ReText 是一个使用 Markdown 语法和 reStructuredText (reST) 结构的文本编辑器，编辑的内容支持导出到 PDF、ODT 和 HTML 以及纯文本，支持即时预览、网页生成以及 HTML 语法高亮、全屏模式，可导出文件到 Google Docs 等。</p>
    730. 

  730. </blockquote>
    731. 

  731. <p><strong><a href="http://www.launchy.net/">Launchy</a></strong></p>
    732. 

  732. <blockquote>
    733. 

  733. <p>Launchy 是一款免费开源的协助您摒弃 Windows “运行”的 Dock 式替代工具，既方便又实用，自带多款皮肤，作为美化工具也未尝不可。</p>
    734. 

  734. </blockquote>
    735. 

  735. <p>环境搭建完毕！现在，就让我们来看看如何学好一门语言！</p>
    736. 

  736. <h2 id="学好一门语言的艺术">学好一门语言的艺术</h2>
    737. 

  737. <h3 id="一次语言学习体验">一次语言学习体验</h3>
    738. 

  738. <p>在我们开始学习一门语言或者技术的时候，我们可能会从一门 “hello,world” 开始。</p>
    739. 

  739. <p>好了，现在我是 Scala 语言的初学者，接着我用搜索引擎去搜索『Scala』来看看『Scala』是什么鬼：</p>
    740. 

  740. <blockquote>
    741. 

  741. <p>Scala 是一门类 Java 的编程语言，它结合了面向对象编程和函数式编程。</p>
    742. 

  742. </blockquote>
    743. 

  743. <p>接着又开始看『Scala ‘hello,world’』，然后找到了这样的一个示例：</p>
    744. 

  744. <pre><code>object HelloWorld {
    745. 

  745.   def main(args: Array[String]): Unit = {
    746. 

  746.     println(&quot;Hello, world!&quot;)
    747. 

  747.   }
    748. 

  748. }</code></pre>
    749. 

  749. <p>GET 到了5%的知识。</p>
    750. 

  750. <p>看上去这门语言相比于 Java 语言来说还行。然后我找到了一本名为『Scala 指南』的电子书，有这样的一本目录：</p>
    751. 

  751. <ul>
    752. 

  752. <li>表达式和值</li>
    753. 

  753. <li>函数是一等公民</li>
    754. 

  754. <li>借贷模式</li>
    755. 

  755. <li>按名称传递参数</li>
    756. 

  756. <li>定义类</li>
    757. 

  757. <li>鸭子类型</li>
    758. 

  758. <li>柯里化</li>
    759. 

  759. <li>范型</li>
    760. 

  760. <li>Traits</li>
    761. 

  761. <li>…</li>
    762. 

  762. </ul>
    763. 

  763. <p>看上去还行， 又 GET 到了5%的知识点。接着，依照上面的代码和搭建指南在自己的电脑上安装了 Scala 的环境：</p>
    764. 

  764. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brew</span> install scala</code></pre></div>
    765. 

  765. <p>Windows 用户可以用:</p>
    766. 

  766. <pre><code>choco install scala</code></pre>
    767. 

  767. <p>然后开始写一个又一个的 Demo，感觉自己 GET 到了很多特别的知识点。</p>
    768. 

  768. <p>到了第二天忘了！</p>
    769. 

  769. <figure>
    770. 

  770. <img src="assets/article/chapter1/wrong.jpg" alt="Bro Wrong" /><figcaption>Bro Wrong</figcaption>
    771. 

  771. </figure>
    772. 

  772. <p>接着，你又重新把昨天的知识过了一遍，还是没有多大的作用。突然间，你听到别人在讨论什么是<strong>这个世界上最好的语言</strong>——你开始加入讨论了。</p>
    773. 

  773. <p>于是，你说出了 Scala 这门语言可以：</p>
    774. 

  774. <ul>
    775. 

  775. <li>支持高阶函数。lambda，闭包…</li>
    776. 

  776. <li>支持偏函数。 match..</li>
    777. 

  777. <li>mixin，依赖注入..</li>
    778. 

  778. <li>等等</li>
    779. 

  779. </ul>
    780. 

  780. <p>虽然隔壁的 Python 小哥赢得了这次辩论，然而你发现你又回想起了 Scala 的很多特性。</p>
    781. 

  781. <figure>
    782. 

  782. <img src="assets/article/chapter1/popular.jpg" alt="最流行的语言" /><figcaption>最流行的语言</figcaption>
    783. 

  783. </figure>
    784. 

  784. <p>你发现隔壁的 Python 小哥之所以赢得了这场辩论是因为他把 Python 语言用到了各个地方——机器学习、人工智能、硬件、Web开发、移动应用等。而你还没有用 Scala 写过一个真正的应用。</p>
    785. 

  785. <p>让我想想我能做什么？我有一个博客。对，我有一个博客，可以用 Scala 把我的博客重写一遍：</p>
    786. 

  786. <ol type="1">
    787. 

  787. <li>先找一 Scala 的 Web 框架，Play 看上去很不错，就这个了。这是一个 MVC 框架，原来用的 Express 也是一个 MVC 框架。Router 写这里，Controller 类似这个，就是这样的。</li>
    788. 

  788. <li>既然已经有 PyJS，也会有 Scala-js，前端就用这个了。</li>
    789. 

  789. </ol>
    790. 

  790. <p>好了，博客重写了一遍了。</p>
    791. 

  791. <p>感觉还挺不错的，我决定向隔壁的 Java 小弟推销这门语言，以解救他于火海之中。</p>
    792. 

  792. <p>『让我想想我有什么杀手锏？』</p>
    793. 

  793. <p>『这里的知识好像还缺了一点，这个是什么？』</p>
    794. 

  794. <p>好了，你已经 GET 到了90%了。如下图所示：</p>
    795. 

  795. <figure>
    796. 

  796. <img src="assets/article/chapter1/learn.jpg" alt="Learn" /><figcaption>Learn</figcaption>
    797. 

  797. </figure>
    798. 

  798. <p>希望你能从这张图上 GET 到很多点。</p>
    799. 

  799. <h3 id="输出是最好的输入">输出是最好的输入</h3>
    800. 

  800. <p>上面那张图『学习金字塔』就是在说明——输出是最好的输入。</p>
    801. 

  801. <p>如果你不试着去写点博客、整理资料、准备分享，那么你可能并没有意识到你缺少了多少东西。虽然你已经有了很多的实践，然并卵。</p>
    802. 

  802. <p>因为你一直在完成功能、完成工作，你总会有意、无意地漏掉一些知识，而你也没有意识到这些知识的重要性。</p>
    803. 

  803. <figure>
    804. 

  804. <img src="assets/article/chapter1/output-input.png" alt="Output is Input" /><figcaption>Output is Input</figcaption>
    805. 

  805. </figure>
    806. 

  806. <p>从我有限的（500+）博客写作经验里，我发现多数时候我需要更多地参考资料才能更好也向人们展示这个过程。为了输出我们需要更多的输入，进而加速这个过程。</p>
    807. 

  807. <p>而如果是写书的时候则是一个更高水平的学习，你需要发现别人在他们的书中欠缺的一些知识点。并且你还要展示一些在别的书中没有，而这本书会展现这个点的知识，这意味着你需要挖掘得更深。</p>
    808. 

  808. <p>所以，如果下次有人问你如何学一门新语言、技术，那么答案就是写一本书。</p>
    809. 

  809. <h3 id="如何应用一门新的技术">如何应用一门新的技术</h3>
    810. 

  810. <p>对于多数人来说，写书不是一件容易的事，而应用新的技术则是一件迫在眉睫的事。</p>
    811. 

  811. <p>通常来说，技术出自于对现有的技术的改进。这就意味着，在掌握现有技术的情况下，我们只需要做一些小小的改动就更可以实现技术升级。</p>
    812. 

  812. <p>而学习一门新的技术的最好实践就是用这门技术对现有的系统行重写。</p>
    813. 

  813. <p>第一个系统(v1)： <code>Spring MVC</code> + <code>Bootstrap</code> + <code>jQuery</code></p>
    814. 

  814. <p>那么在那个合适的年代里， 我们需要单页面应用，就使用了Backbone。然后，我们就可以用 Mustache + HTML 来替换掉 JSP。</p>
    815. 

  815. <p>第二个系统(v2)： <code>Spring MVC</code> + <code>Backbone</code> + <code>Mustache</code></p>
    816. 

  816. <p>在这时我们已经实现了前后端分离了，这时候系统实现上变成了这样。</p>
    817. 

  817. <p>第二个系统(v2.2)： <code>RESTful  Services</code> + <code>Backbone</code> + <code>Mustache</code></p>
    818. 

  818. <p>或者</p>
    819. 

  819. <p>第二个系统(v2.2)： <code>RESTful Services</code> + <code>AngularJS 1.x</code></p>
    820. 

  820. <p>Spring 只是一个 RESTful 服务，我们还需要一些问题，比如 DOM 的渲染速度太慢了。</p>
    821. 

  821. <p>第三个系统(v3)： <code>RESTful  Services</code> + <code>React</code></p>
    822. 

  822. <p>系统就是这样一步步演进过来的。</p>
    823. 

  823. <p>尽管在最后系统的架构已经不是当初的架构，而系统本身的业务逻辑变化并没有发生太大的变化。</p>
    824. 

  824. <p>特别是对于如博客这一类的系统来说，他的一些技术实现已经趋于稳定，而且是你经常使用的东西。所以，下次试试用新的技术的时候，可以先从对你的博客的重写开始。</p>
    825. 

  825. <h2 id="web-编程基础">Web 编程基础</h2>
    826. 

  826. <h3 id="从浏览器到服务器">从浏览器到服务器</h3>
    827. 

  827. <p>如果你的操作系统带有 cURL 这个软件(在 GNU/Linux、Mac OS 都自带这个工具，Windows 用户可以从<a href="http://curl.haxx.se/download.html" class="uri">http://curl.haxx.se/download.html</a>下载到)，那么我们可以直接用下面的命令来看这看这个过程(-v 参数可以显示一次 http 通信的整个过程)：</p>
    828. 

  828. <pre><code>curl -v https://www.phodal.com</code></pre>
    829. 

  829. <p>我们就会看到下面的响应过程:</p>
    830. 

  830. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">*</span> Rebuilt URL to: https://www.phodal.com/
    831. 

  831. <span class="ex">*</span>   Trying 54.69.23.11...
    832. 

  832. <span class="ex">*</span> Connected to www.phodal.com (54.69.23.11) <span class="ex">port</span> 443 (#0)
    833. 

  833. <span class="ex">*</span> TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384
    834. 

  834. <span class="ex">*</span> Server certificate: www.phodal.com
    835. 

  835. <span class="ex">*</span> Server certificate: COMODO RSA Domain Validation Secure Server CA
    836. 

  836. <span class="ex">*</span> Server certificate: COMODO RSA Certification Authority
    837. 

  837. <span class="ex">*</span> Server certificate: AddTrust External CA Root
    838. 

  838. <span class="op">&gt;</span> <span class="ex">GET</span> / HTTP/1.1
    839. 

  839. <span class="op">&gt;</span> <span class="ex">Host</span>: www.phodal.com
    840. 

  840. <span class="op">&gt;</span> <span class="ex">User-Agent</span>: curl/7.43.0
    841. 

  841. <span class="op">&gt;</span> <span class="ex">Accept</span>: */*
    842. 

  842. <span class="op">&gt;</span>
    843. 

  843. <span class="op">&lt;</span> <span class="ex">HTTP/1.1</span> 403 Forbidden
    844. 

  844. <span class="op">&lt;</span> <span class="ex">Server</span>: phodal/0.19.4
    845. 

  845. <span class="op">&lt;</span> <span class="ex">Date</span>: Tue, 13 Oct 2015 05:32:13 GMT
    846. 

  846. <span class="op">&lt;</span> <span class="ex">Content-Type</span>: text/html<span class="kw">;</span> <span class="va">charset=</span>utf-8
    847. 

  847. <span class="op">&lt;</span> <span class="ex">Content-Length</span>: 170
    848. 

  848. <span class="op">&lt;</span> <span class="ex">Connection</span>: keep-alive
    849. 

  849. <span class="op">&lt;</span>
    850. 

  850. <span class="op">&lt;</span><span class="ex">html</span><span class="op">&gt;</span>
    851. 

  851. <span class="op">&lt;</span><span class="fu">head</span><span class="op">&gt;&lt;</span>title<span class="op">&gt;</span>403 Forbidden<span class="op">&lt;</span>/title<span class="op">&gt;&lt;</span>/head<span class="op">&gt;</span>
    852. 

  852. <span class="op">&lt;</span><span class="ex">body</span> bgcolor=<span class="st">&quot;white&quot;</span><span class="op">&gt;</span>
    853. 

  853. <span class="op">&lt;</span><span class="ex">center</span><span class="op">&gt;&lt;</span>h1<span class="op">&gt;</span>403 Forbidden<span class="op">&lt;</span>/h1<span class="op">&gt;&lt;</span>/center<span class="op">&gt;</span>
    854. 

  854. <span class="op">&lt;</span><span class="ex">hr</span><span class="op">&gt;&lt;</span>center<span class="op">&gt;</span>phodal/0.19.<span class="op">4&lt;</span>/center<span class="op">&gt;</span>
    855. 

  855. <span class="op">&lt;</span>/<span class="ex">body</span><span class="op">&gt;</span>
    856. 

  856. <span class="op">&lt;</span>/<span class="ex">html</span><span class="op">&gt;</span>
    857. 

  857. <span class="ex">*</span> Connection <span class="co">#0 to host www.phodal.com left intact</span></code></pre></div>
    858. 

  858. <p>我们尝试用 cURL 去访问我的网站，会根据访问的域名找出其 IP，通常这个映射关系是来源于 ISP 缓存 DNS（英语：Domain Name System）服务器[^DNSServer]。</p>
    859. 

  859. <p>以“*”开始的前8行是一些连接相关的信息，称为<strong>响应首部</strong>。我们向域名 <a href="https://www.phodal.com/" class="uri">https://www.phodal.com/</a>发出了请求，接着 DNS服务器告诉了我们网站服务器的 IP，即54.69.23.11。出于安全考虑，在这里我们的示例，我们是以 HTTPS 协议为例，所以在这里连接的端口是 443。因为使用的是 HTTPS 协议，所以在这里会试图去获取服务器证书，接着获取到了域名相关的证书信息。</p>
    860. 

  860. <p>随后以“&gt;”开始的内容，便是向Web服务器发送请求。Host 即是我们要访问的主机的域名，GET / 则代表着我们要访问的是根目录，如果我们要访问 <a href="https://www.phodal.com/about/" class="uri">https://www.phodal.com/about/</a>页面在这里，便是 GET 资源文件 /about。紧随其后的是 HTTP 的版本号（HTTP/1.1）。User-Agent 通常指向的是使用者行为的软件，通常会加上硬件平台、系统软件、应用软件和用户个人偏好等等的一些信息。Accept 则指的是告知服务器发送何种媒体类型。</p>
    861. 

  861. <p>这个过程，大致如下图所示：</p>
    862. 

  862. <figure>
    863. 

  863. <img src="assets/article/chapter1/server-dns-forward.jpg" alt="DNS 到服务器的过程" /><figcaption>DNS 到服务器的过程</figcaption>
    864. 

  864. </figure>
    865. 

  865. <p>在图中，我们会发现解析 DNS 的时候，我们需要先本地 DNS 服务器查询。如果没有的话，再向根域名服务器查询——这个域名由哪个服务器来解析。直至最后拿到真正的服务器IP才能获取页面。</p>
    866. 

  866. <p>当我们拿到相应的 HTML、JS、CSS 后，我们就开始渲染这个页面了。</p>
    867. 

  867. <h4 id="http-协议">HTTP 协议</h4>
    868. 

  868. <p>说到这里，我们不得不说说 HTTP 协议——超文本传输协议。它也是一个基于文本的传输协议，这就是为什么你在上面看到的都是文本的传输过程。</p>
    869. 

  869. <h3 id="从-html-到页面显示">从 HTML 到页面显示</h3>
    870. 

  870. <p>而浏览器接收到文本的时候，就要开始着手将 HTML 变成屏幕上显示的内容。下图是 Chrome 渲染页面的一个时间线：</p>
    871. 

  871. <figure>
    872. 

  872. <img src="assets/article/chapter1/chrome-timeline.jpg" alt="Chrome 渲染的 Timeline" /><figcaption>Chrome 渲染的 Timeline</figcaption>
    873. 

  873. </figure>
    874. 

  874. <p>及其整个渲染过程如下图所示：</p>
    875. 

  875. <figure>
    876. 

  876. <img src="assets/article/chapter1/render-html.png" alt="Render HTML" /><figcaption>Render HTML</figcaption>
    877. 

  877. </figure>
    878. 

  878. <p>（PS: 需要注意的是这里用的是 WebKit 内核的渲染过程，即 Chrome 和 Safari 等浏览器所使用的内核。）</p>
    879. 

  879. <p>从上面的两图可以看出来第一步都 Parse HTML，而 Parse HTML 实质上就是将其将解析为 DOM Tree。与此同时，CSS 解析器会解析 CSS 会产生 CSS 规则树。</p>
    880. 

  880. <p>随后会根据生成的 DOM 树和 CSS 规则树来构建 Render Tree，接着生成 Render Tree的布局，最后就是绘制出 Render Tree。</p>
    881. 

  881. <p>详细的内容还得参见相关的书籍~~。</p>
    882. 

  882. <p>相关内容：</p>
    883. 

  883. <ul>
    884. 

  884. <li>《<a href="http://taligarsiel.com/Projects/howbrowserswork1.htm">How browsers work</a>》</li>
    885. 

  885. </ul>
    886. 

  886. <h2 id="html">HTML</h2>
    887. 

  887. <p>让我们先从身边的语言下手，也就是现在无处不在的 HTML+Javascript+CSS。</p>
    888. 

  888. <p>之所以从 HTML 开始，是因为我们不需要配置一个复杂的开发环境，也许你还不知道开发环境是什么东西，不过这也没关系，毕竟这些知识需要慢慢的接触才能有所了解，尤其是对于普通的业余爱好者来说，当然，对于专业选手而言自然不是问题。HTML 是 Web 的核心语言，也算是比较基础的语言。</p>
    889. 

  889. <h3 id="helloworld">hello,world</h3>
    890. 

  890. <p>hello,world 是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情其实很简单，虽然也有一点点 hack 的感觉。——让我们先来新建一个文件并命名为“helloworld.html”。</p>
    891. 

  891. <p>(PS:大部分人应该都是在 Windows 环境下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里我们推荐用 <strong>Sublime Text</strong> 。破解不破解，注册不注册都不会对你的使用有太多的影响。)</p>
    892. 

  892. <ol type="1">
    893. 

  893. <li><p>新建文件</p></li>
    894. 

  894. <li>输入
    895. 

  895. <pre><code class="html">hello,world</code></pre></li>
    896. 

  896. <li><p>保存为-&gt;“helloworld.html”，</p></li>
    897. 

  897. <li><p>双击打开这个文件。 正常情况下都应该是用你的默认浏览器打开。只要是一个正常工作的现代浏览器，都应该可以看到上面显示的是“Hello,world”。</p></li>
    898. 

  898. </ol>
    899. 

  899. <p>这才是最短的 hello,world 程序，但是呢？在 Ruby 中会是这样子的</p>
    900. 

  900. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">2.0.0-p353</span> :001 <span class="op">&gt;</span> p <span class="st">&quot;hello,world&quot;</span>
    901. 

  901. <span class="st">&quot;hello,world&quot;</span>
    902. 

  902.     =<span class="op">&gt;</span> <span class="st">&quot;hello,world&quot;</span>
    903. 

  903. <span class="ex">2.0.0-p353</span> :002 <span class="op">&gt;</span></code></pre></div>
    904. 

  904. <p>等等，如果你了解过 HTML 的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完 Nginx 后看到 It works! 更让人激动了。</p>
    905. 

  905. <p>遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的 bug。</p>
    906. 

  906. <h4 id="调试-helloworld">调试 hello,world</h4>
    907. 

  907. <p>我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是 Chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。</p>
    908. 

  908. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    909. 

  909.     <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    910. 

  910.     <span class="kw">&lt;body&gt;</span>hello,world<span class="kw">&lt;/body&gt;</span>
    911. 

  911. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    912. 

  912. <p>这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。</p>
    913. 

  913. <h4 id="说说-helloworld">说说 hello,world</h4>
    914. 

  914. <p>我很不喜欢其中的&lt;*&gt;&lt;/*&gt;，但是我也没有找到别的方法来代替它们，所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言，不过 HTML 的原义是</p>
    915. 

  915. <blockquote>
    916. 

  916. <p>超文本标记语言</p>
    917. 

  917. </blockquote>
    918. 

  918. <p>所以我们可以发现其中的关键词是标记——markup，也就是说 html 是一个 markup，head 是一个 markup，body 也是一个 markup。</p>
    919. 

  919. <p>然而，我们真正工作的代码是在 body 里面，至于为什么是在这里面，这个问题就太复杂了。打个比方来说：</p>
    920. 

  920. <ol type="1">
    921. 

  921. <li><p>我们所使用的汉语是人类用智慧创造的，我们所正在学的这门语言同样也是人类创造的。</p></li>
    922. 

  922. <li><p>我们在自己的语言里遵循着 <strong>桌子是桌子，凳子是凳子</strong> 的原则，很少有人会问为什么。</p></li>
    923. 

  923. </ol>
    924. 

  924. <h3 id="中文">中文？</h3>
    925. 

  925. <p>所以我们也可以把计算机语言与现实世界里用于交流沟通的语言划上一个等号。而我们所要学习的语言，并不是我们最熟悉的汉语语言，所以我们便觉得这些很复杂，但是如果我们试着用汉语替换掉上面的代码的话</p>
    926. 

  926. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt;
    927. 

  927.     <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>结束头&gt;
    928. 

  928.     <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>结束身体&gt;
    929. 

  929. <span class="er">&lt;</span>结束语言&gt;</code></pre></div>
    930. 

  930. <p>这看上去很奇怪，只是因为是直译过去的原因，也许你会觉得这样会好理解一点，但是输入上可就一点儿也不方便，因为这键盘本身就不适合我们去输入汉字，同时也意味着可能你输入的会有问题。</p>
    931. 

  931. <p>让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果</p>
    932. 

  932. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt; <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>结束头&gt; <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>结束身体&gt; <span class="er">&lt;</span>结束语言&gt;</code></pre></div>
    933. 

  933. <p>更不幸的结果可能是</p>
    934. 

  934. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>璇█&gt; <span class="er">&lt;</span>澶�&gt;<span class="er">&lt;</span>缁撴潫澶�&gt; <span class="er">&lt;</span>韬綋&gt;浣犲ソ锛屼笘鐣�<span class="er">&lt;</span>缁撴潫韬綋&gt; <span class="er">&lt;</span>缁撴潫璇█&gt;</code></pre></div>
    935. 

  935. <p>这是一个编码问题，对中文支持不友好。</p>
    936. 

  936. <p>我们把上面的代码改为和标记语言一样的结构</p>
    937. 

  937. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt;
    938. 

  938.     <span class="er">&lt;</span>头&gt;<span class="er">&lt;</span>/头&gt;
    939. 

  939.     <span class="er">&lt;</span>身体&gt;你好，世界<span class="er">&lt;</span>/身体&gt;
    940. 

  940. <span class="er">&lt;</span>/语言&gt;</code></pre></div>
    941. 

  941. <p>于是我们看到的结果便是</p>
    942. 

  942. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="er">&lt;</span>语言&gt; <span class="er">&lt;</span>头&gt; <span class="er">&lt;</span>身体&gt;你好，世界</code></pre></div>
    943. 

  943. <p>被 Chrome 浏览器解析成什么样了？</p>
    944. 

  944. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;</span><span class="er">&lt;</span>语言&gt;
    945. 

  945.         <span class="er">&lt;</span>头&gt;<span class="co">&lt;!--头--&gt;</span>
    946. 

  946.         <span class="er">&lt;</span>身体&gt;你好，世界<span class="co">&lt;!--身体--&gt;</span>
    947. 

  947.     <span class="co">&lt;!--语言--&gt;</span>
    948. 

  948. <span class="kw">&lt;/body&gt;&lt;/html&gt;</span>      </code></pre></div>
    949. 

  949. <p>以<code>&lt;!--</code>开头，<code>--&gt;</code>结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。</p>
    950. 

  950. <p>但是当我们把代码改成</p>
    951. 

  951. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;whatwewanttosay&gt;</span>你好世界<span class="kw">&lt;/whatwewanttosay&gt;</span></code></pre></div>
    952. 

  952. <p>浏览器上面显示的内容就变成了</p>
    953. 

  953. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html">你好世界</code></pre></div>
    954. 

  954. <p>或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。</p>
    955. 

  955. <p>结论:</p>
    956. 

  956. <ol type="1">
    957. 

  957. <li>浏览器对中文支持不友好。</li>
    958. 

  958. <li>浏览器对英文支持友好。</li>
    959. 

  959. </ol>
    960. 

  960. <p>刚开始的时候不要对中文编程有太多的想法，这是很不现实的:</p>
    961. 

  961. <ol type="1">
    962. 

  962. <li>现有的系统都是基于英语语言环境构建的，对中文支持不是很友好。</li>
    963. 

  963. <li>中文输入的速度在某种程度上来说没有英语快。</li>
    964. 

  964. </ol>
    965. 

  965. <p>我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，而这些就要将 CPU、软件、硬件都包含在内，甚至我们还需要考虑重新设计 CPU 的结构，在某种程度上来说会有些不现实。或许，需要一代又一代人的努力。忘记那些吧，师夷之长技以制夷。</p>
    966. 

  966. <h3 id="其它-html-标记">其它 HTML 标记</h3>
    967. 

  967. <p>添加一个标题，</p>
    968. 

  968. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    969. 

  969.     <span class="kw">&lt;head&gt;</span>
    970. 

  970.         <span class="kw">&lt;title&gt;</span>标题<span class="kw">&lt;/title&gt;</span>
    971. 

  971.     <span class="kw">&lt;/head&gt;</span>
    972. 

  972.     <span class="kw">&lt;body&gt;</span>hello,world<span class="kw">&lt;/body&gt;</span>
    973. 

  973. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    974. 

  974. <p>我们便可以在浏览器的最上方看到“标题”二字，就像我们常用的淘宝网，也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。</p>
    975. 

  975. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;html&gt;</span>
    976. 

  976. <span class="kw">&lt;head&gt;</span>
    977. 

  977.     <span class="kw">&lt;title&gt;</span>标题<span class="kw">&lt;/title&gt;</span>
    978. 

  978. <span class="kw">&lt;/head&gt;</span>
    979. 

  979. <span class="kw">&lt;body&gt;</span>
    980. 

  980. hello,world
    981. 

  981. <span class="kw">&lt;h1&gt;</span>大标题<span class="kw">&lt;/h1&gt;</span>
    982. 

  982. <span class="kw">&lt;h2&gt;</span>次标题<span class="kw">&lt;/h2&gt;</span>
    983. 

  983. <span class="kw">&lt;h3&gt;</span>...<span class="kw">&lt;/h3&gt;</span>
    984. 

  984. <span class="kw">&lt;ul&gt;</span>
    985. 

  985.     <span class="kw">&lt;li&gt;</span>列表1<span class="kw">&lt;/li&gt;</span>
    986. 

  986.     <span class="kw">&lt;li&gt;</span>列表2<span class="kw">&lt;/li&gt;</span>
    987. 

  987. <span class="kw">&lt;/ul&gt;</span>
    988. 

  988. <span class="kw">&lt;/body&gt;</span>
    989. 

  989. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    990. 

  990. <p>更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其它的东西都和这些类似。</p>
    991. 

  991. <h3 id="小结-1">小结</h3>
    992. 

  992. <h4 id="美妙之处">美妙之处</h4>
    993. 

  993. <p>我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有 C 和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如 Python，我们所要做的就是</p>
    994. 

  994. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="ex">python</span> file.py
    995. 

  995. =<span class="op">&gt;</span><span class="ex">hello</span>,world</code></pre></div>
    996. 

  996. <p>然后在终端上返回结果。只是因为在我看来学会 HTML 是有意义的，简单的上手，然后再慢慢地深入，如果一开始我们就去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了</p>
    997. 

  997. <ol type="1">
    998. 

  998. <li>中文编程语言在当前意义不大，不现实，效率不高兼容性差</li>
    999. 

  999. <li>语言的语法是固定的。（ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。）</li>
    1000. 

  1000. <li>已经开始写代码，而不是还在配置开发环境。</li>
    1001. 

  1001. <li>随身的工具才是最好的，最常用的 code 也才是实在的。</li>
    1002. 

  1002. </ol>
    1003. 

  1003. <h4 id="更多">更多</h4>
    1004. 

  1004. <p>我们还没有试着去解决“某商店里的糖一颗5块钱，小明买了3颗糖，小明一共花了多少钱”的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西，比如 JavaScript, CSS。我们可以将 JavaScript 理解为解决问题的语言，HTML 则是前端显示，CSS 是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚刚学习了一下怎么在前端显示那些代码的行为，于是我们还需要 JavaScript。</p>
    1005. 

  1005. <h2 id="css">CSS</h2>
    1006. 

  1006. <p>如果说 HTML 是建筑的框架，CSS 就是房子的装修。那么 JavaScript 呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。</p>
    1007. 

  1007. <p>下面就是我们之前说到的代码，CSS 将 Red 三个字母变成了红色。</p>
    1008. 

  1008. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1009. 

  1009. <span class="kw">&lt;html&gt;</span>
    1010. 

  1010. <span class="kw">&lt;head&gt;</span>
    1011. 

  1011. <span class="kw">&lt;/head&gt;</span>
    1012. 

  1012. <span class="kw">&lt;body&gt;</span>
    1013. 

  1013.     <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span>
    1014. 

  1014. <span class="kw">&lt;/body&gt;</span>
    1015. 

  1015.     <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    1016. 

  1016. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1017. 

  1017. <p>只是，</p>
    1018. 

  1018. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;para&quot;</span>)<span class="op">;</span>
    1019. 

  1019. <span class="va">para</span>.<span class="va">style</span>.<span class="at">color</span><span class="op">=</span><span class="st">&quot;blue&quot;</span><span class="op">;</span></code></pre></div>
    1020. 

  1020. <p>将字体变成了蓝色，CSS+HTML 让页面有序的工作着，但是 JavaScript 却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于 JavaScript 没有好感了——不过这里要讲的是正室，也就是 CSS，这时还没有 JavaScript。</p>
    1021. 

  1021. <figure>
    1022. 

  1022. <img src="assets/article/chapter1/redfonts.png" alt="Red Fonts" /><figcaption>Red Fonts</figcaption>
    1023. 

  1023. </figure>
    1024. 

  1024. <h3 id="简介">简介</h3>
    1025. 

  1025. <p>这不是一篇专业讲述 CSS 的书籍，所以我不会去说 CSS 是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。</p>
    1026. 

  1026. <p>到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的 CSS 来说也不会有例外的。</p>
    1027. 

  1027. <p>CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS 还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制 Web 页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到 CSS。HTML 一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢 DreamWeaver 那也不错，不过一开始使用 IDE 可无助于我们写出良好的代码。</p>
    1028. 

  1028. <p>忘说了，CSS 也是有版本的，和 Windows，Linux 内核等等一样，但是更新可能没有那么频繁，HTML 也是有版本的，JavaScript 也是有版本的，复杂的东西不是当前考虑的内容。</p>
    1029. 

  1029. <h4 id="代码结构">代码结构</h4>
    1030. 

  1030. <p>对于我们的上面的 Red 示例来说，如果没有一个好的结构，那么以后可能就是这样子。</p>
    1031. 

  1031. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1032. 

  1032. <span class="kw">&lt;html&gt;</span>
    1033. 

  1033. <span class="kw">&lt;head&gt;</span>
    1034. 

  1034. <span class="kw">&lt;/head&gt;</span>
    1035. 

  1035. <span class="kw">&lt;body&gt;</span>
    1036. 

  1036.     <span class="kw">&lt;p</span><span class="ot"> style=</span><span class="st">&quot;font-size: 22px;color: #f00;text-align: center;padding-left: 20px;&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    1037. 

  1037.     <span class="kw">&lt;p</span><span class="ot"> style=</span><span class="st">&quot;font-size: 44px;color: #3ed;text-indent: 2em;padding-left: 2em;&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1038. 

  1038. <span class="kw">&lt;/body&gt;</span>
    1039. 

  1039. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1040. 

  1040. <p>虽然我们看到的还是一样的:</p>
    1041. 

  1041. <figure>
    1042. 

  1042. <img src="assets/article/chapter1/nostyle.png" alt="No Style" /><figcaption>No Style</figcaption>
    1043. 

  1043. </figure>
    1044. 

  1044. <p>于是我们就按各种书上的建议重新写了上面的代码</p>
    1045. 

  1045. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1046. 

  1046. <span class="kw">&lt;html&gt;</span>
    1047. 

  1047. <span class="kw">&lt;head&gt;</span>
    1048. 

  1048.     <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    1049. 

  1049.     <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span>
    1050. 

  1050.         <span class="fl">.para</span><span class="kw">{</span>
    1051. 

  1051.             <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    1052. 

  1052.             <span class="kw">color:</span> <span class="dt">#f00</span><span class="kw">;</span>
    1053. 

  1053.             <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    1054. 

  1054.             <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
    1055. 

  1055.         <span class="kw">}</span>
    1056. 

  1056.         <span class="fl">.para2</span><span class="kw">{</span>
    1057. 

  1057.             <span class="kw">font-size:</span> <span class="dt">44px</span><span class="kw">;</span>
    1058. 

  1058.             <span class="kw">color:</span> <span class="dt">#3ed</span><span class="kw">;</span>
    1059. 

  1059.             <span class="kw">text-indent:</span> <span class="dt">2em</span><span class="kw">;</span>
    1060. 

  1060.             <span class="kw">padding-left:</span> <span class="dt">2em</span><span class="kw">;</span>
    1061. 

  1061.         <span class="kw">}</span>
    1062. 

  1062.     <span class="kw">&lt;/style&gt;</span>
    1063. 

  1063. <span class="kw">&lt;/head&gt;</span>
    1064. 

  1064. <span class="kw">&lt;body&gt;</span>
    1065. 

  1065.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    1066. 

  1066.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1067. 

  1067. <span class="kw">&lt;/body&gt;</span>
    1068. 

  1068. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1069. 

  1069. <p>总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:</p>
    1070. 

  1070. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1071. 

  1071. <span class="kw">&lt;html&gt;</span>
    1072. 

  1072. <span class="kw">&lt;head&gt;</span>
    1073. 

  1073.     <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    1074. 

  1074.     <span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="ot"> href=</span><span class="st">&quot;style.css&quot;</span><span class="kw">&gt;&lt;/style&gt;</span>
    1075. 

  1075. <span class="kw">&lt;/head&gt;</span>
    1076. 

  1076. <span class="kw">&lt;body&gt;</span>
    1077. 

  1077.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    1078. 

  1078.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1079. 

  1079. <span class="kw">&lt;/body&gt;</span>
    1080. 

  1080. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1081. 

  1081. <p>我们需要</p>
    1082. 

  1082. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1083. 

  1083. <span class="kw">&lt;html&gt;</span>
    1084. 

  1084. <span class="kw">&lt;head&gt;</span>
    1085. 

  1085.     <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    1086. 

  1086.     <span class="kw">&lt;link</span><span class="ot"> href=</span><span class="st">&quot;./style.css&quot;</span><span class="ot"> rel=</span><span class="st">&quot;stylesheet&quot;</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span> <span class="kw">/&gt;</span>
    1087. 

  1087. <span class="kw">&lt;/head&gt;</span>
    1088. 

  1088. <span class="kw">&lt;body&gt;</span>
    1089. 

  1089.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    1090. 

  1090.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1091. 

  1091. <span class="kw">&lt;/body&gt;</span>
    1092. 

  1092. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1093. 

  1093. <p>然后我们有一个像 app.js 一样的 style.css 放在同目录下，而他的内容便是</p>
    1094. 

  1094. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para</span><span class="kw">{</span>
    1095. 

  1095.     <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    1096. 

  1096.     <span class="kw">color:</span> <span class="dt">#f00</span><span class="kw">;</span>
    1097. 

  1097.     <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    1098. 

  1098.     <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
    1099. 

  1099. <span class="kw">}</span>
    1100. 

  1100. <span class="fl">.para2</span><span class="kw">{</span>
    1101. 

  1101.     <span class="kw">font-size:</span> <span class="dt">44px</span><span class="kw">;</span>
    1102. 

  1102.     <span class="kw">color:</span> <span class="dt">#3ed</span><span class="kw">;</span>
    1103. 

  1103.     <span class="kw">text-indent:</span> <span class="dt">2em</span><span class="kw">;</span>
    1104. 

  1104.     <span class="kw">padding-left:</span> <span class="dt">2em</span><span class="kw">;</span>
    1105. 

  1105. <span class="kw">}</span></code></pre></div>
    1106. 

  1106. <p>这代码和 JS 的代码有如此多的相似</p>
    1107. 

  1107. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">={</span>
    1108. 

  1108.     <span class="dt">font_size</span><span class="op">:</span> <span class="st">&#39;22px&#39;</span><span class="op">,</span>
    1109. 

  1109.     <span class="dt">color</span><span class="op">:</span> <span class="st">&#39;#f00&#39;</span><span class="op">,</span>
    1110. 

  1110.     <span class="dt">text_align</span><span class="op">:</span> <span class="st">&#39;center&#39;</span><span class="op">,</span>
    1111. 

  1111.     <span class="dt">padding_left</span><span class="op">:</span> <span class="st">&#39;20px&#39;</span><span class="op">,</span>
    1112. 

  1112. <span class="op">}</span></code></pre></div>
    1113. 

  1113. <p>而22px、20px以及#f00都是数值，因此：</p>
    1114. 

  1114. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">={</span>
    1115. 

  1115.     <span class="dt">font_size</span><span class="op">:</span> 22px<span class="op">,</span>
    1116. 

  1116.     <span class="dt">color</span><span class="op">:</span> #f00<span class="op">,</span>
    1117. 

  1117.     <span class="dt">text_align</span><span class="op">:</span> center<span class="op">,</span>
    1118. 

  1118.     <span class="dt">padding_left</span><span class="op">:</span> 20px<span class="op">,</span>
    1119. 

  1119. <span class="op">}</span></code></pre></div>
    1120. 

  1120. <p>目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:</p>
    1121. 

  1121. <div class="sourceCode"><pre class="sourceCode lisp"><code class="sourceCode commonlisp">(<span class="kw">dotimes</span> (i <span class="dv">4</span>) (<span class="kw">print</span> i))</code></pre></div>
    1122. 

  1122. <p>总的来说我们减少了符号的使用，但是用 lisp 便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。</p>
    1123. 

  1123. <pre><code>\d{2}/[A-Z][a-z][a-z]/\d{4}</code></pre>
    1124. 

  1124. <p>上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。</p>
    1125. 

  1125. <p>这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。</p>
    1126. 

  1126. <h3 id="样式与目标">样式与目标</h3>
    1127. 

  1127. <p>如下所示，就是我们的样式</p>
    1128. 

  1128. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para</span><span class="kw">{</span>
    1129. 

  1129.     <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    1130. 

  1130.     <span class="kw">color:</span> <span class="dt">#f00</span><span class="kw">;</span>
    1131. 

  1131.     <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    1132. 

  1132.     <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
    1133. 

  1133. <span class="kw">}</span></code></pre></div>
    1134. 

  1134. <p>我们的目标就是</p>
    1135. 

  1135. <blockquote>
    1136. 

  1136. <p>如果没有一个好的结构</p>
    1137. 

  1137. </blockquote>
    1138. 

  1138. <p>所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是 CSS 与 HTML 沟通的重点所在了:</p>
    1139. 

  1139. <h3 id="选择器">选择器</h3>
    1140. 

  1140. <p>我们用到的选择器叫做类选择器，也就是 class，或者说应该称之为 class 选择器更合适。与类选择器最常一起出现的是 ID 选择器，不过这个适用于比较高级的场合，诸如用 JS 控制 DOM 的时候就需要用到 ID 选择器。而基本的选择器就是如下面的例子:</p>
    1141. 

  1141. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css">p<span class="fl">.para</span><span class="kw">{</span>
    1142. 

  1142.     <span class="kw">color:</span> <span class="dt">#f0f</span><span class="kw">;</span>
    1143. 

  1143. <span class="kw">}</span></code></pre></div>
    1144. 

  1144. <p>将代码添加到 style.css 的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法</p>
    1145. 

  1145. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css">p&gt;<span class="fl">.para</span><span class="kw">{</span>
    1146. 

  1146.     <span class="kw">color:</span> <span class="dt">#f0f</span><span class="kw">;</span>
    1147. 

  1147. <span class="kw">}</span></code></pre></div>
    1148. 

  1148. <p>为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的权重比上面高，也因此有更高的优先规则。</p>
    1149. 

  1149. <p>而通常我们可以通过一个</p>
    1150. 

  1150. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css">p<span class="kw">{</span>
    1151. 

  1151.     <span class="kw">text-align:</span> <span class="dt">left</span><span class="kw">;</span>
    1152. 

  1152. <span class="kw">}</span></code></pre></div>
    1153. 

  1153. <p>这样的元素选择器来给予所有的 p 元素一个左对齐。</p>
    1154. 

  1154. <p>还有复杂一点的复合型选择器，下面的是 HTML 文件</p>
    1155. 

  1155. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1156. 

  1156. <span class="kw">&lt;html&gt;</span>
    1157. 

  1157. <span class="kw">&lt;head&gt;</span>
    1158. 

  1158.     <span class="kw">&lt;title&gt;</span>CSS example<span class="kw">&lt;/title&gt;</span>
    1159. 

  1159.     <span class="kw">&lt;link</span><span class="ot"> href=</span><span class="st">&quot;./style.css&quot;</span><span class="ot"> rel=</span><span class="st">&quot;stylesheet&quot;</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span> <span class="kw">/&gt;</span>
    1160. 

  1160. <span class="kw">&lt;/head&gt;</span>
    1161. 

  1161. <span class="kw">&lt;body&gt;</span>
    1162. 

  1162.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para&quot;</span><span class="kw">&gt;</span>如果没有一个好的结构<span class="kw">&lt;/p&gt;</span>
    1163. 

  1163.     <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="kw">&gt;</span>
    1164. 

  1164.         <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1165. 

  1165.     <span class="kw">&lt;/div&gt;</span>
    1166. 

  1166. <span class="kw">&lt;/body&gt;</span>
    1167. 

  1167. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1168. 

  1168. <p>还有 CSS 文件</p>
    1169. 

  1169. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para</span><span class="kw">{</span>
    1170. 

  1170.     <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    1171. 

  1171.     <span class="kw">color:</span> <span class="dt">#f00</span><span class="kw">;</span>
    1172. 

  1172.     <span class="kw">text-align:</span> <span class="dt">center</span><span class="kw">;</span>
    1173. 

  1173.     <span class="kw">padding-left:</span> <span class="dt">20px</span><span class="kw">;</span>
    1174. 

  1174. <span class="kw">}</span>   
    1175. 

  1175. <span class="fl">.para2</span><span class="kw">{</span>
    1176. 

  1176.     <span class="kw">font-size:</span> <span class="dt">44px</span><span class="kw">;</span>
    1177. 

  1177.     <span class="kw">color:</span> <span class="dt">#3ed</span><span class="kw">;</span>
    1178. 

  1178.     <span class="kw">text-indent:</span> <span class="dt">2em</span><span class="kw">;</span>
    1179. 

  1179.     <span class="kw">padding-left:</span> <span class="dt">2em</span><span class="kw">;</span>
    1180. 

  1180. <span class="kw">}</span>
    1181. 

  1181. 

  1182. p<span class="fl">.para</span><span class="kw">{</span>
    1183. 

  1183.     <span class="kw">color:</span> <span class="dt">#f0f</span><span class="kw">;</span>
    1184. 

  1184. <span class="kw">}</span>
    1185. 

  1185. div<span class="fl">#content</span> p <span class="kw">{</span>
    1186. 

  1186.     <span class="kw">font-size:</span> <span class="dt">22px</span><span class="kw">;</span>
    1187. 

  1187. <span class="kw">}</span></code></pre></div>
    1188. 

  1188. <h3 id="更有趣的-css">更有趣的 CSS</h3>
    1189. 

  1189. <p>一个包含了 para2 以及 para_bg 的例子</p>
    1190. 

  1190. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="kw">&gt;</span>
    1191. 

  1191.     <span class="kw">&lt;p</span><span class="ot"> class=</span><span class="st">&quot;para2 para_bg&quot;</span><span class="kw">&gt;</span>那么以后可能就是这样子。。。。<span class="kw">&lt;/p&gt;</span>
    1192. 

  1192. <span class="kw">&lt;/div&gt;</span></code></pre></div>
    1193. 

  1193. <p>我们只是添加了一个黑色的背景</p>
    1194. 

  1194. <div class="sourceCode"><pre class="sourceCode css"><code class="sourceCode css"><span class="fl">.para_bg</span><span class="kw">{</span>
    1195. 

  1195.     <span class="kw">background-color:</span> <span class="dt">#000</span><span class="kw">;</span>
    1196. 

  1196. <span class="kw">}</span></code></pre></div>
    1197. 

  1197. <p>重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。</p>
    1198. 

  1198. <p>我们还可以用 CSS3 做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是 be a geek。</p>
    1199. 

  1199. <p>或许我们写的代码都是那么的简单，从 HTML 到 JavaScript，还有现在的 CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。</p>
    1200. 

  1200. <h2 id="javascript">JavaScript</h2>
    1201. 

  1201. <p>JavaScript 现在已经无处不在了，也许你正打开的某个网站，他便可能是 node.js+json+javascript+mustache.js 完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是你只要知道 JavaScript 已经无处不在了，它可能就在你手机上的某个 app 里，就在你浏览的网页里，就运行在你 IDE 中的某个进程里。</p>
    1202. 

  1202. <h3 id="helloworld-1">hello,world</h3>
    1203. 

  1203. <p>这里我们还需要有一个 helloworld.html，JavaScript 是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的 helloworld.html</p>
    1204. 

  1204. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1205. 

  1205. <span class="kw">&lt;html&gt;</span>
    1206. 

  1206.     <span class="kw">&lt;head&gt;&lt;/head&gt;</span>
    1207. 

  1207.     <span class="kw">&lt;body&gt;&lt;/body&gt;</span>
    1208. 

  1208. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1209. 

  1209. <p>然后开始融入我们的 JavaScript，向 HTML 中插入JavaScript 的方法，就需要用到 HTML 中的 &lt;script&gt; 标签，我们先用页面嵌入的方法来写 helloworld。</p>
    1210. 

  1210. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1211. 

  1211. <span class="kw">&lt;html&gt;</span>
    1212. 

  1212.     <span class="kw">&lt;head&gt;</span>
    1213. 

  1213.         <span class="kw">&lt;script&gt;</span>
    1214. 

  1214.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    1215. 

  1215.         <span class="kw">&lt;/script&gt;</span>
    1216. 

  1216.     <span class="kw">&lt;/head&gt;</span>
    1217. 

  1217.     <span class="kw">&lt;body&gt;&lt;/body&gt;</span>
    1218. 

  1218. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1219. 

  1219. <p>按照标准的写法，我们还需要声明这个脚本的类型</p>
    1220. 

  1220. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1221. 

  1221. <span class="kw">&lt;html&gt;</span>
    1222. 

  1222.     <span class="kw">&lt;head&gt;</span>
    1223. 

  1223.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
    1224. 

  1224.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    1225. 

  1225.         <span class="kw">&lt;/script&gt;</span>
    1226. 

  1226.     <span class="kw">&lt;/head&gt;</span>
    1227. 

  1227.     <span class="kw">&lt;body&gt;&lt;/body&gt;</span>
    1228. 

  1228. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1229. 

  1229. <p>没有显示 hello,world ?试试下面的代码</p>
    1230. 

  1230. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1231. 

  1231. <span class="kw">&lt;html&gt;</span>
    1232. 

  1232.     <span class="kw">&lt;head&gt;</span>
    1233. 

  1233.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
    1234. 

  1234.             <span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span>
    1235. 

  1235.         <span class="kw">&lt;/script&gt;</span>
    1236. 

  1236.     <span class="kw">&lt;/head&gt;</span>
    1237. 

  1237.     <span class="kw">&lt;body&gt;</span>
    1238. 

  1238.         <span class="kw">&lt;noscript&gt;</span>
    1239. 

  1239.             disable Javascript
    1240. 

  1240.         <span class="kw">&lt;/noscript&gt;</span>
    1241. 

  1241.     <span class="kw">&lt;/body&gt;</span>
    1242. 

  1242. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1243. 

  1243. <h3 id="javascriptful">JavaScriptFul</h3>
    1244. 

  1244. <p>我们需要让我们的代码看上去更像是 js，同时是以 js 结尾。就像 C 语言的源码是以 C 结尾的，我们也同样需要让我们的代码看上去更正式一点。于是我们需要在 helloworld.html 的同一文件夹下创建一个 app.js 文件，在里面写着</p>
    1245. 

  1245. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="st">&#39;hello,world&#39;</span>)<span class="op">;</span></code></pre></div>
    1246. 

  1246. <p>同时我们的 helloworld.html 还需要告诉我们的浏览器 js 代码在哪里</p>
    1247. 

  1247. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1248. 

  1248. <span class="kw">&lt;html&gt;</span>
    1249. 

  1249.     <span class="kw">&lt;head&gt;</span>
    1250. 

  1250.         <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    1251. 

  1251.     <span class="kw">&lt;/head&gt;</span>
    1252. 

  1252.     <span class="kw">&lt;body&gt;</span>
    1253. 

  1253.         <span class="kw">&lt;noscript&gt;</span>
    1254. 

  1254.             disable Javascript
    1255. 

  1255.         <span class="kw">&lt;/noscript&gt;</span>
    1256. 

  1256.     <span class="kw">&lt;/body&gt;</span>
    1257. 

  1257. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1258. 

  1258. <h4 id="从数学出发">从数学出发</h4>
    1259. 

  1259. <p>让我们回到第一章讲述的小明的问题，<strong>从实际问题下手编程，更容易学会编程</strong>。小学时代的数学题最喜欢这样子了——某商店里的糖一个5块钱，小明买了3个糖，小明一共花了多少钱。在编程方面，也许我们还算是小学生。最直接的方法就是直接计算 3x5=?</p>
    1260. 

  1260. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="dv">3</span><span class="op">*</span><span class="dv">5</span>)<span class="op">;</span></code></pre></div>
    1261. 

  1261. <p>document.write 实际也我们可以理解为输出，也就是往页面里写入 3*5 的结果，在有双引号的情况下会输出字符串。我们便会在浏览器上看到15，这便是一个好的开始，也是一个糟糕的开始。</p>
    1262. 

  1262. <h4 id="设计和编程">设计和编程</h4>
    1263. 

  1263. <p>对于实际问题，如果我们只是止于所要得到的结果，很多年之后，我们就成为了 code monkey。对这个问题进行再一次设计，所谓的设计有些时候会把简单的问题复杂化，有些时候会使以后的扩展更加简单。这一天因为这家商店的糖价格太高了，于是店长将价格降为了4块钱。</p>
    1264. 

  1264. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="dv">3</span><span class="op">*</span><span class="dv">4</span>)<span class="op">;</span></code></pre></div>
    1265. 

  1265. <p>于是我们又得到了我们的结果，但是下次我们看到这些代码的时候没有分清楚哪个是糖的数量，哪个是价格，于是我们重新设计了程序</p>
    1266. 

  1266. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">price<span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    1267. 

  1267. num<span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    1268. 

  1268. <span class="va">document</span>.<span class="at">write</span>(price<span class="op">*</span>num)<span class="op">;</span></code></pre></div>
    1269. 

  1269. <p>这才能叫得上是程序设计，或许你注意到了“;”这个符号的存在，我想说的是这是另外一个标准，我们不得不去遵守，也不得不去 fuck。</p>
    1270. 

  1270. <h4 id="函数">函数</h4>
    1271. 

  1271. <p>记得刚开始学三角函数的时候，我们会写</p>
    1272. 

  1272. <pre><code>sin 30=0.5</code></pre>
    1273. 

  1273. <p>而我们的函数也是类似于此，换句话说，因为很多搞计算机的先驱都学好了数学，都把数学世界的规律带到了计算机世界，所以我们的函数也是类似于此，让我们从一个简单的开始。</p>
    1274. 

  1274. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">hello</span>()<span class="op">{</span>
    1275. 

  1275.     <span class="cf">return</span> <span class="va">document</span>.<span class="at">write</span>(<span class="st">&quot;hello,world&quot;</span>)<span class="op">;</span>
    1276. 

  1276. <span class="op">}</span>
    1277. 

  1277. <span class="at">hello</span>()<span class="op">;</span></code></pre></div>
    1278. 

  1278. <p>当我第一次看到函数的时候，有些小激动终于出现了。我们写了一个叫 hello 的函数，它返回了往页面中写入 hello,world 的方法，然后我们调用了 hello 这个函数，于是页面上有了 hello,world。</p>
    1279. 

  1279. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">sin</span>(degree)<span class="op">{</span>
    1280. 

  1280.     <span class="cf">return</span> <span class="va">document</span>.<span class="at">write</span>(<span class="va">Math</span>.<span class="at">sin</span>(degree))<span class="op">;</span>
    1281. 

  1281. <span class="op">}</span>
    1282. 

  1282. <span class="at">sin</span>(<span class="dv">30</span>)<span class="op">;</span></code></pre></div>
    1283. 

  1283. <p>在这里 degree 就称之为变量。 于是输出了 -0.9880316240928602，而不是 0.5，因为这里用的是弧度制，而不是角度制。</p>
    1284. 

  1284. <pre><code>sin(30)</code></pre>
    1285. 

  1285. <p>的输出结果有点类似于sin 30。写括号的目的在于，括号是为了方便解析，这个在不同的语言中可能是不一样的，比如在 Ruby 中我们可以直接用类似于数学中的表达:</p>
    1286. 

  1286. <div class="sourceCode"><pre class="sourceCode ruby"><code class="sourceCode ruby"><span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">004</span> &gt; <span class="dt">Math</span>.sin <span class="dv">30</span>
    1287. 

  1287. =&gt; -<span class="fl">0.9880316240928618</span>
    1288. 

  1288. <span class="fl">2.0</span>.<span class="dv">0</span>-p353 :<span class="dv">005</span> &gt;</code></pre></div>
    1289. 

  1289. <p>我们可以在函数中传入多个变量，于是我们再回到小明的问题，就会这样去编写代码。</p>
    1290. 

  1290. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(price<span class="op">,</span>num)<span class="op">{</span>
    1291. 

  1291.     result<span class="op">=</span>price<span class="op">*</span>num<span class="op">;</span>
    1292. 

  1292.     <span class="va">document</span>.<span class="at">write</span>(result)<span class="op">;</span>
    1293. 

  1293. <span class="op">}</span>
    1294. 

  1294. <span class="at">calc</span>(<span class="dv">3</span><span class="op">,</span><span class="dv">4</span>)<span class="op">;</span></code></pre></div>
    1295. 

  1295. <p>但是从某种程度上来说，我们的 calc 做了计算的事又做了输出的事，总的来说设计上有些不好。</p>
    1296. 

  1296. <h4 id="重新设计">重新设计</h4>
    1297. 

  1297. <p>我们将输出的工作移到函数的外面，</p>
    1298. 

  1298. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(price<span class="op">,</span>num)<span class="op">{</span>
    1299. 

  1299.     <span class="cf">return</span> price<span class="op">*</span>num<span class="op">;</span>
    1300. 

  1300. <span class="op">}</span>
    1301. 

  1301. <span class="va">document</span>.<span class="at">write</span>(<span class="at">calc</span>(<span class="dv">3</span><span class="op">,</span><span class="dv">4</span>))<span class="op">;</span></code></pre></div>
    1302. 

  1302. <p>接着我们用一种更有意思的方法来写这个问题的解决方案</p>
    1303. 

  1303. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">calc</span>(price<span class="op">,</span>num)<span class="op">{</span>
    1304. 

  1304.     <span class="cf">return</span> price<span class="op">*</span>num<span class="op">;</span>
    1305. 

  1305. <span class="op">}</span>
    1306. 

  1306. <span class="kw">function</span> <span class="at">printResult</span>(price<span class="op">,</span>num)<span class="op">{</span>
    1307. 

  1307.     <span class="va">document</span>.<span class="at">write</span>(<span class="at">calc</span>(price<span class="op">,</span>num))<span class="op">;</span>
    1308. 

  1308. <span class="op">}</span>
    1309. 

  1309. <span class="at">printResult</span>(<span class="dv">3</span><span class="op">,</span> <span class="dv">4</span>)</code></pre></div>
    1310. 

  1310. <p>看上去更专业了一点点，如果我们只需要计算的时候我们只需要调用 calc，如果我们需要输出的时候我们就调用 printResult 的方法。</p>
    1311. 

  1311. <h4 id="object-和函数">object 和函数</h4>
    1312. 

  1312. <p>我们还没有说清楚之前我们遇到过的 document.write 以及 Math.sin 的语法为什么看上去很奇怪，所以让我们看看他们到底是什么，修改 app.js 为以下内容</p>
    1313. 

  1313. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> document)<span class="op">;</span>
    1314. 

  1314. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> Math)<span class="op">;</span></code></pre></div>
    1315. 

  1315. <p>typeof document 会返回 document 的数据类型，就会发现输出的结果是</p>
    1316. 

  1316. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">object object</code></pre></div>
    1317. 

  1317. <p>所以我们需要去弄清楚什么是 object。对象的定义是</p>
    1318. 

  1318. <blockquote>
    1319. 

  1319. <p>无序属性的集合，其属性可以包含基本值、对象或者函数。</p>
    1320. 

  1320. </blockquote>
    1321. 

  1321. <p>创建一个 object，然后观察这便是我们接下来要做的</p>
    1322. 

  1322. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">store<span class="op">={};</span>
    1323. 

  1323. <span class="va">store</span>.<span class="at">candyPrice</span><span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    1324. 

  1324. <span class="va">store</span>.<span class="at">candyNum</span><span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    1325. 

  1325. <span class="va">document</span>.<span class="at">write</span>(<span class="va">store</span>.<span class="at">candyPrice</span> <span class="op">*</span> <span class="va">store</span>.<span class="at">candyNum</span>)<span class="op">;</span></code></pre></div>
    1326. 

  1326. <p>我们就有了和 document.write 一样的用法，这也是对象的美妙之处，只是这里的对象只是包含着基本值，因为</p>
    1327. 

  1327. <pre><code>typeof store.candyPrice=&quot;number&quot;</code></pre>
    1328. 

  1328. <p>一个包含对象的对象应该是这样子的。</p>
    1329. 

  1329. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">store<span class="op">={};</span>
    1330. 

  1330. <span class="va">store</span>.<span class="at">candyPrice</span><span class="op">=</span><span class="dv">4</span><span class="op">;</span>
    1331. 

  1331. <span class="va">store</span>.<span class="at">candyNum</span><span class="op">=</span><span class="dv">3</span><span class="op">;</span>
    1332. 

  1332. <span class="va">document</span>.<span class="at">writeln</span>(<span class="va">store</span>.<span class="at">candyPrice</span> <span class="op">*</span> <span class="va">store</span>.<span class="at">candyNum</span>)<span class="op">;</span>
    1333. 

  1333. 

  1334. <span class="kw">var</span> wall<span class="op">=</span><span class="kw">new</span> <span class="at">Object</span>()<span class="op">;</span>
    1335. 

  1335. <span class="va">wall</span>.<span class="at">store</span><span class="op">=</span>store<span class="op">;</span>
    1336. 

  1336. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> <span class="va">wall</span>.<span class="at">store</span>)<span class="op">;</span></code></pre></div>
    1337. 

  1337. <p>而我们用到的 document.write 和上面用到的 document.writeln 都是属于这个无序属性集合中的函数。</p>
    1338. 

  1338. <p>下面代码说的就是这个无序属性集合中的函数。</p>
    1339. 

  1339. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> IO<span class="op">=</span><span class="kw">new</span> <span class="at">Object</span>()<span class="op">;</span>
    1340. 

  1340. <span class="kw">function</span> <span class="at">print</span>(result)<span class="op">{</span>
    1341. 

  1341.     <span class="va">document</span>.<span class="at">write</span>(result)<span class="op">;</span>
    1342. 

  1342. <span class="op">};</span>
    1343. 

  1343. <span class="va">IO</span>.<span class="at">print</span><span class="op">=</span>print<span class="op">;</span>
    1344. 

  1344. <span class="va">IO</span>.<span class="at">print</span>(<span class="st">&quot;a obejct with function&quot;</span>)<span class="op">;</span>
    1345. 

  1345. <span class="va">IO</span>.<span class="at">print</span>(<span class="kw">typeof</span> <span class="va">IO</span>.<span class="at">print</span>)<span class="op">;</span></code></pre></div>
    1346. 

  1346. <p>我们定义了一个叫 IO 的对象，声明对象可以用</p>
    1347. 

  1347. <pre><code>var store={};</code></pre>
    1348. 

  1348. <p>又或者是</p>
    1349. 

  1349. <pre><code>var store=new Object();</code></pre>
    1350. 

  1350. <p>两者是等价的，但是用后者的可读性会更好一点，我们定义了一个叫print的函数，他的作用也就是 document.write，IO 中的print 函数是等价于 print() 函数，这也就是对象和函数之间的一些区别，对象可以包含函数，对象是无序属性的集合，其属性可以包含基本值、对象或者函数。</p>
    1351. 

  1351. <p>复杂一点的对象应该是下面这样的一种情况。</p>
    1352. 

  1352. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">={</span><span class="dt">name</span><span class="op">:</span><span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dt">weight</span><span class="op">:</span><span class="dv">50</span><span class="op">,</span><span class="dt">height</span><span class="op">:</span><span class="dv">166</span><span class="op">};</span>
    1353. 

  1353. <span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    1354. 

  1354.     future<span class="op">;</span>
    1355. 

  1355. <span class="op">};</span>
    1356. 

  1356. <span class="va">Person</span>.<span class="at">future</span><span class="op">=</span>dream<span class="op">;</span>
    1357. 

  1357. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> Person)<span class="op">;</span>
    1358. 

  1358. <span class="va">document</span>.<span class="at">write</span>(<span class="va">Person</span>.<span class="at">future</span>)<span class="op">;</span></code></pre></div>
    1359. 

  1359. <p>而这些会在我们未来的实际编程过程中用得更多。</p>
    1360. 

  1360. <h3 id="面向对象">面向对象</h3>
    1361. 

  1361. <p>开始之前先让我们简化上面的代码，</p>
    1362. 

  1362. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">Person</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    1363. 

  1363.     future<span class="op">;</span>
    1364. 

  1364. <span class="op">}</span></code></pre></div>
    1365. 

  1365. <p>看上去比上面的简单多了，不过我们还可以简化为下面的代码。。。</p>
    1366. 

  1366. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    1367. 

  1367.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span><span class="st">&quot;phodal&quot;</span><span class="op">;</span>
    1368. 

  1368.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span><span class="dv">50</span><span class="op">;</span>
    1369. 

  1369.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span><span class="dv">166</span><span class="op">;</span>
    1370. 

  1370.     <span class="kw">this</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span> <span class="at">dream</span>()<span class="op">{</span>
    1371. 

  1371.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    1372. 

  1372.     <span class="op">};</span>
    1373. 

  1373. <span class="op">};</span>
    1374. 

  1374. <span class="kw">var</span> person<span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>()<span class="op">;</span>
    1375. 

  1375. <span class="va">document</span>.<span class="at">write</span>(<span class="va">person</span>.<span class="at">name</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1376. 

  1376. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> person<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1377. 

  1377. <span class="va">document</span>.<span class="at">write</span>(<span class="kw">typeof</span> <span class="va">person</span>.<span class="at">future</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1378. 

  1378. <span class="va">document</span>.<span class="at">write</span>(<span class="va">person</span>.<span class="at">future</span>()<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span></code></pre></div>
    1379. 

  1379. <p>只是在这个时候 Person 是一个函数，但是我们声明的 person 却变成了一个对象 <strong>一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数。</strong> 这里的“&lt;br&gt;”是 HTML 中的元素，称之为 DOM，在这里起的是换行的作用，我们会在稍后介绍它，这里我们先关心下 this。this 关键字表示函数的所有者或作用域，也就是这里的 Person。</p>
    1380. 

  1380. <p>上面的方法显得有点不可取，换句话说和一开始的</p>
    1381. 

  1381. <pre><code>document.write(3*4);</code></pre>
    1382. 

  1382. <p>一样，不具有灵活性，因此在我们完成功能之后，我们需要对其进行优化，这就是程序设计的真谛——解决完实际问题后，我们需要开始真正的设计，而不是解决问题时的编程。</p>
    1383. 

  1383. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>(name<span class="op">,</span>weight<span class="op">,</span>height)<span class="op">{</span>
    1384. 

  1384.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span>name<span class="op">;</span>
    1385. 

  1385.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span>weight<span class="op">;</span>
    1386. 

  1386.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span>height<span class="op">;</span>
    1387. 

  1387.     <span class="kw">this</span>.<span class="at">future</span><span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    1388. 

  1388.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    1389. 

  1389.     <span class="op">};</span>
    1390. 

  1390. <span class="op">};</span>
    1391. 

  1391. <span class="kw">var</span> phodal<span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>(<span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dv">50</span><span class="op">,</span><span class="dv">166</span>)<span class="op">;</span>
    1392. 

  1392. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">name</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1393. 

  1393. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">weight</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1394. 

  1394. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">height</span><span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span>
    1395. 

  1395. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">future</span>()<span class="op">+</span><span class="st">&quot;&lt;br&gt;&quot;</span>)<span class="op">;</span></code></pre></div>
    1396. 

  1396. <p>于是，产生了这样一个可重用的 JavaScript 对象, this 关键字确立了属性的所有者。</p>
    1397. 

  1397. <h3 id="其他">其他</h3>
    1398. 

  1398. <p>JavaScript 还有一个很强大的特性，也就是原型继承，不过这里我们先不考虑这些部分，用尽量少的代码及关键字来实际我们所要表达的核心功能，这才是这里的核心，其他的东西我们可以从其他书本上学到。</p>
    1399. 

  1399. <p>所谓的继承，</p>
    1400. 

  1400. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Chinese<span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    1401. 

  1401.     <span class="kw">this</span>.<span class="at">country</span><span class="op">=</span><span class="st">&quot;China&quot;</span><span class="op">;</span>
    1402. 

  1402. <span class="op">}</span>
    1403. 

  1403. 

  1404. <span class="kw">var</span> Person<span class="op">=</span><span class="kw">function</span>(name<span class="op">,</span>weight<span class="op">,</span>height)<span class="op">{</span>
    1405. 

  1405.     <span class="kw">this</span>.<span class="at">name</span><span class="op">=</span>name<span class="op">;</span>
    1406. 

  1406.     <span class="kw">this</span>.<span class="at">weight</span><span class="op">=</span>weight<span class="op">;</span>
    1407. 

  1407.     <span class="kw">this</span>.<span class="at">height</span><span class="op">=</span>height<span class="op">;</span>
    1408. 

  1408.     <span class="kw">this</span>.<span class="at">futrue</span><span class="op">=</span><span class="kw">function</span>()<span class="op">{</span>
    1409. 

  1409.         <span class="cf">return</span> <span class="st">&quot;future&quot;</span><span class="op">;</span>
    1410. 

  1410.     <span class="op">}</span>
    1411. 

  1411. <span class="op">}</span>
    1412. 

  1412. <span class="va">Chinese</span>.<span class="at">prototype</span><span class="op">=</span><span class="kw">new</span> <span class="at">Person</span>()<span class="op">;</span>
    1413. 

  1413. 

  1414. <span class="kw">var</span> phodal<span class="op">=</span><span class="kw">new</span> <span class="at">Chinese</span>(<span class="st">&quot;phodal&quot;</span><span class="op">,</span><span class="dv">50</span><span class="op">,</span><span class="dv">166</span>)<span class="op">;</span>
    1415. 

  1415. <span class="va">document</span>.<span class="at">write</span>(<span class="va">phodal</span>.<span class="at">country</span>)<span class="op">;</span></code></pre></div>
    1416. 

  1416. <p>完整的 JavaScript 应该由下列三个部分组成:</p>
    1417. 

  1417. <ul>
    1418. 

  1418. <li>核心(ECMAScript)——核心语言功能</li>
    1419. 

  1419. <li>文档对象模型(DOM)——访问和操作网页内容的方法和接口</li>
    1420. 

  1420. <li>浏览器对象模型(BOM)——与浏览器交互的方法和接口</li>
    1421. 

  1421. </ul>
    1422. 

  1422. <p>我们在上面讲的都是 ECMAScript，也就是语法相关的，但是 JS 真正强大的，或者说我们最需要的可能就是对 DOM 的操作，这也就是为什么 jQuery 等库可以流行的原因之一，而核心语言功能才是真正在哪里都适用的，至于 BOM，真正用到的机会很少，因为没有完善的统一的标准。</p>
    1423. 

  1423. <p>一个简单的 DOM 示例,</p>
    1424. 

  1424. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span>
    1425. 

  1425. <span class="kw">&lt;html&gt;</span>
    1426. 

  1426. <span class="kw">&lt;head&gt;</span>
    1427. 

  1427. <span class="kw">&lt;/head&gt;</span>
    1428. 

  1428. <span class="kw">&lt;body&gt;</span>
    1429. 

  1429.     <span class="kw">&lt;noscript&gt;</span>
    1430. 

  1430.         disable Javascript
    1431. 

  1431.     <span class="kw">&lt;/noscript&gt;</span>
    1432. 

  1432.     <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span>
    1433. 

  1433. <span class="kw">&lt;/body&gt;</span>
    1434. 

  1434.     <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;app.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
    1435. 

  1435. <span class="kw">&lt;/html&gt;</span></code></pre></div>
    1436. 

  1436. <p>我们需要修改一下 helloworld.html 添加</p>
    1437. 

  1437. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;para&quot;</span><span class="ot"> style=</span><span class="st">&quot;color:red&quot;</span><span class="kw">&gt;</span>Red<span class="kw">&lt;/p&gt;</span></code></pre></div>
    1438. 

  1438. <p>同时还需要将 script 标签移到 body 下面，如果没有意外的话我们会看到页面上用红色的字体显示 Red，修改 app.js。</p>
    1439. 

  1439. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> para<span class="op">=</span><span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;para&quot;</span>)<span class="op">;</span>
    1440. 

  1440. <span class="va">para</span>.<span class="va">style</span>.<span class="at">color</span><span class="op">=</span><span class="st">&quot;blue&quot;</span><span class="op">;</span></code></pre></div>
    1441. 

  1441. <p>接着，字体就变成了蓝色，有了 DOM 我们就可以对页面进行操作，可以说我们看到的绝大部分的页面效果都是通过 DOM 操作实现的。</p>
    1442. 

  1442. <h4 id="美妙之处-1">美妙之处</h4>
    1443. 

  1443. <p>这里说到的 JavaScript 仅仅只是其中的一小小部分，忽略掉的东西很多，只关心的是如何去设计一个实用的 app，作为一门编程语言，它还有其他强大的内制函数，要学好需要一本有价值的参考书。这里提到的只是其中不到20%的东西，其他的80%或者更多会在你解决问题的时候出现。</p>
    1444. 

  1444. <ul>
    1445. 

  1445. <li>我们可以创建一个对象或者函数，它可以包含基本值、对象或者函数。</li>
    1446. 

  1446. <li>我们可以用 JavaScript 修改页面的属性，虽然只是简单的示例。</li>
    1447. 

  1447. <li>我们还可以去解决实际的编程问题。</li>
    1448. 

  1448. </ul>
    1449. 

  1449. <h1 id="前端与后台">前端与后台</h1>
    1450. 

  1450. <blockquote>
    1451. 

  1451. <p>前端 Front-end 和后端 Back-end 是描述进程开始和结束的通用词汇。前端作用于采集输入信息，后端进行处理。</p>
    1452. 

  1452. </blockquote>
    1453. 

  1453. <p>这种说法给人一种很模糊的感觉，但是他说得又很对，它负责视觉展示。在 MVC 或者 MVP 结构中，负责视觉显示的部分只有 View 层，而今天大多数所谓的 View 层已经超越了 View 层。前端是一个很神奇的概念，但是而今的前端已经发生了很大的变化。你引入了 Backbone、Angluar，你的架构变成了 MVP、MVVM。尽管发生了一些架构上的变化，但是项目的开发并没有因此而发生变化。这其中涉及到了一些职责的问题，如果某一个层级中有太多的职责，那么它是不是加重了一些人的负担？</p>
    1454. 

  1454. <p>后台在过去的岁月里起着很重要的作用，当然在未来也是。就最近几年的解耦趋势来看，它在变得更小，变成一系列的服务。并向前台提供很多 RESTful API，看上去有点像提供一些辅助性的工作。</p>
    1455. 

  1455. <p>因此在这一章里，我们将讲述详细介绍：</p>
    1456. 

  1456. <ol type="1">
    1457. 

  1457. <li>后台语言与选型</li>
    1458. 

  1458. <li>前端框架与选型</li>
    1459. 

  1459. <li>前端一致化，后台服务化的趋势</li>
    1460. 

  1460. <li>前后端通讯</li>
    1461. 

  1461. </ol>
    1462. 

  1462. <h2 id="后台语言选择">后台语言选择</h2>
    1463. 

  1463. <p>如何选择一门好的后台语言似乎是大家都很感兴趣的问题？大概只是因为他们想要在一开始的时候去学一门很实用的语言——至少会经常用到，而不是学好就被遗弃了。或者它不会因为一门新的语言的出现而消亡。</p>
    1464. 

  1464. <h3 id="javascript-1">JavaScript</h3>
    1465. 

  1465. <p>在现在看来，JavaScript 似乎是一个性价比非常高的语言。只要是 Web 就会有前端，只要有前端就需要有 JavaScript。与此同时 Node.js 在后台中的地位已经愈发重要了。</p>
    1466. 

  1466. <p>对于 JavaScript 来说，它可以做很多类型的应用。这些应用都是基于浏览器来运行的，有：</p>
    1467. 

  1467. <ul>
    1468. 

  1468. <li>Electron + Node.js + JavaScript 做桌面应用</li>
    1469. 

  1469. <li>Ionic + JavaScript 做移动应用</li>
    1470. 

  1470. <li>Node.js + JavaScript 网站前后台</li>
    1471. 

  1471. <li>JavaScript + Tessl 做硬件</li>
    1472. 

  1472. </ul>
    1473. 

  1473. <p>So，这是一门很有应用前景的语言。</p>
    1474. 

  1474. <h3 id="python">Python</h3>
    1475. 

  1475. <p>Python 诞生得比较早，其语言特性——<strong>做一件事情有且只有一种方法</strong>，也决定了这门语言很简单。在 ThoughtWorks University 的学习过程中，接触了一些外国小伙伴，这是大多数人学习的第一门语言。</p>
    1476. 

  1476. <p>Python 在我看来和 JavaScript 是相当划算的语言，除了它不能在前端运行，带来了一点劣势。Python 是一门简洁的语言，而且有大量的数学、科学工具，这意味着在不远的将来它会发挥更大的作用。我喜欢在我的各种小项目上用 Python，如果不是因为我对前端及数据可视化更感兴趣，那么Python 就是我的第一语言了。</p>
    1477. 

  1477. <h3 id="java">Java</h3>
    1478. 

  1478. <p>除此呢，我相信 Java 在目前来说也是一个不错的选择。</p>
    1479. 

  1479. <p>在学校的时候，一点儿也不喜欢 Java。后来才发现，我从 Java 上学到的东西比其他语言上学得还多。如果 Oracle 不毁坏 Java，那么他会继续存活很久。我可以用 JavaScript 造出各种我想要的东西，但是通常我无法保证他们是优雅的实现。过去人们在 Java 上花费了很多的时间，或在架构上，或在语言上，或在模式上。由于这些投入，都给了人们很多的启发。这些都可以用于新的语言，新的设计，毕竟没有什么技术是独立于旧的技术产生出来的。</p>
    1480. 

  1480. <h3 id="php">PHP</h3>
    1481. 

  1481. <p>PHP 呢，据说是这个『世界上最好的语言』，我服务器上运行着几个不同的 WordPress 实例。对于这门语言，我还是相当放心的。并且这门语言由于上手简单，同时国内有大量的程序员已经掌握好了这门语言。不得不提及的是 WordPress 已经占领了 CMS 市场超过一半的份额，并且它也占领了全球网站的四分之一。还有 Facebook，这个世界上最大的 PHP 站点也在使用这门语言。</p>
    1482. 

  1482. <h3 id="其他-1">其他</h3>
    1483. 

  1483. <p>个人感觉 Go 也不错，虽然没怎么用，但是性能应该是相当可以的。</p>
    1484. 

  1484. <p>Ruby、Scala，对于写代码的人来说，这是非常不错的语言。但是如果是团队合作时，就有待商榷。</p>
    1485. 

  1485. <h2 id="mvc">MVC</h2>
    1486. 

  1486. <p>人们在不断地反思这其中复杂的过程，整理了一些好的架构模式，其中不得不提到的是我司 Martin Fowler 的《企业应用架构模式》。该书中文译版出版的时候是2004年，那时对于系统的分层是</p>
    1487. 

  1487. <table>
    1488. 

  1488. <thead>
    1489. 

  1489. <tr class="header">
    1490. 

  1490. <th>层次</th>
    1491. 

  1491. <th>职责</th>
    1492. 

  1492. </tr>
    1493. 

  1493. </thead>
    1494. 

  1494. <tbody>
    1495. 

  1495. <tr class="odd">
    1496. 

  1496. <td>表现层</td>
    1497. 

  1497. <td>提供服务、显示信息、用户请求、HTTP请求和命令行调用。</td>
    1498. 

  1498. </tr>
    1499. 

  1499. <tr class="even">
    1500. 

  1500. <td>领域层</td>
    1501. 

  1501. <td>逻辑处理，系统中真正的核心。</td>
    1502. 

  1502. </tr>
    1503. 

  1503. <tr class="odd">
    1504. 

  1504. <td>数据层</td>
    1505. 

  1505. <td>与数据库、消息系统、事物管理器和其他软件包通讯。</td>
    1506. 

  1506. </tr>
    1507. 

  1507. </tbody>
    1508. 

  1508. </table>
    1509. 

  1509. <p>化身于当时最流行的 Spring，就是 MVC。人们有了 iBatis 这样的数据持久层框架，即 ORM，对象关系映射。于是，你的 package 就会有这样的几个文件夹：</p>
    1510. 

  1510. <pre><code>|____mappers
    1511. 

  1511. |____model
    1512. 

  1512. |____service
    1513. 

  1513. |____utils
    1514. 

  1514. |____controller</code></pre>
    1515. 

  1515. <p>在 mappers 这一层，我们所做的莫过于如下所示的数据库相关查询：</p>
    1516. 

  1516. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="at">@Insert</span>(
    1517. 

  1517.         <span class="st">&quot;INSERT INTO users(username, password, enabled) &quot;</span> +
    1518. 

  1518.                 <span class="st">&quot;VALUES (#{userName}, #{passwordHash}, #{enabled})&quot;</span>
    1519. 

  1519. )
    1520. 

  1520. <span class="at">@Options</span>(keyProperty = <span class="st">&quot;id&quot;</span>, keyColumn = <span class="st">&quot;id&quot;</span>, useGeneratedKeys = <span class="kw">true</span>)
    1521. 

  1521. <span class="dt">void</span> <span class="fu">insert</span>(User user);</code></pre></div>
    1522. 

  1522. <p>model 文件夹和 mappers 文件夹都是数据层的一部分，只是两者间的职责不同，如：</p>
    1523. 

  1523. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="bu">String</span> <span class="fu">getUserName</span>() {
    1524. 

  1524.     <span class="kw">return</span> userName;
    1525. 

  1525. }
    1526. 

  1526. 

  1527. <span class="kw">public</span> <span class="dt">void</span> <span class="fu">setUserName</span>(<span class="bu">String</span> userName) {
    1528. 

  1528.     <span class="kw">this</span>.<span class="fu">userName</span> = userName;
    1529. 

  1529. }</code></pre></div>
    1530. 

  1530. <p>而他们最后都需要在 Controller，又或者称为 ModelAndView 中处理：</p>
    1531. 

  1531. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="at">@RequestMapping</span>(value = {<span class="st">&quot;/disableUser&quot;</span>}, method = RequestMethod.<span class="fu">POST</span>)
    1532. 

  1532. <span class="kw">public</span> ModelAndView <span class="fu">processUserDisable</span>(HttpServletRequest request, ModelMap model) {
    1533. 

  1533.     <span class="bu">String</span> userName = request.<span class="fu">getParameter</span>(<span class="st">&quot;userName&quot;</span>);
    1534. 

  1534.     User user = userService.<span class="fu">getByUsername</span>(userName);
    1535. 

  1535.     userService.<span class="fu">disable</span>(user);
    1536. 

  1536.     <span class="bu">Map</span>&lt;<span class="bu">String</span>,User&gt; map = <span class="kw">new</span> <span class="bu">HashMap</span>&lt;<span class="bu">String</span>,User&gt;();
    1537. 

  1537.     <span class="bu">Map</span> &lt;User,<span class="bu">String</span>&gt; usersWithRoles= userService.<span class="fu">getAllUsersWithRole</span>();
    1538. 

  1538.     model.<span class="fu">put</span>(<span class="st">&quot;usersWithRoles&quot;</span>,usersWithRoles);
    1539. 

  1539.     <span class="kw">return</span> <span class="kw">new</span> <span class="fu">ModelAndView</span>(<span class="st">&quot;redirect:users&quot;</span>,map);
    1540. 

  1540. }</code></pre></div>
    1541. 

  1541. <p>在多数时候，Controller 不应该直接与数据层的一部分，而将业务逻辑放在 Controller 层又是一种错误，这时就有了 Service 层，如下图：</p>
    1542. 

  1542. <figure>
    1543. 

  1543. <img src="assets/article/chapter2/service-mvc.png" alt="Service MVC" /><figcaption>Service MVC</figcaption>
    1544. 

  1544. </figure>
    1545. 

  1545. <p>Domain（业务）是一个相当复杂的层级，这里是业务的核心。一个合理的 Controller 只应该做自己应该做的事，它不应该处理业务相关的代码：</p>
    1546. 

  1546. <p>我们在 Controller 层应该做的事是：</p>
    1547. 

  1547. <ol type="1">
    1548. 

  1548. <li>处理请求的参数</li>
    1549. 

  1549. <li>渲染和重定向</li>
    1550. 

  1550. <li>选择 Model 和 Service</li>
    1551. 

  1551. <li>处理 Session 和 Cookies</li>
    1552. 

  1552. </ol>
    1553. 

  1553. <p>业务是善变的，昨天我们可能还在和对手竞争谁先推出新功能，但是今天可能已经合并了。我们很难预见业务变化，但是我们应该能预见 Controller 是不容易变化的。在一些设计里面，这种模式就是 Command 模式。</p>
    1554. 

  1554. <h3 id="model">Model</h3>
    1555. 

  1555. <blockquote>
    1556. 

  1556. <p>模型用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。</p>
    1557. 

  1557. </blockquote>
    1558. 

  1558. <p>它是介于数据与控制器之间的层级，拥有对数据直接访问的权力——增删改查(CRUD)。Web 应用中，数据通常是由数据库来存储，有时也会用搜索引擎来存储</p>
    1559. 

  1559. <p>因此在实现这个层级与数据库交互时，可以使用 SQL 语句，也可以使用 ORM 框架。</p>
    1560. 

  1560. <p>SQL(Structured Query Language，即结构化查询语言)， 语句是数据库的查询语言</p>
    1561. 

  1561. <p>ORM(Object Relational Mapping)，即对象关系映射，主要是将数据库中的关系数据映射称为程序中的对象。</p>
    1562. 

  1562. <h3 id="view">View</h3>
    1563. 

  1563. <p>View 层在 Web 应用中，一般是使用模板引擎装载对应 HTML。如下所示的是一段 JSP 代码：</p>
    1564. 

  1564. <div class="sourceCode"><pre class="sourceCode jsp"><code class="sourceCode jsp">&lt;html&gt;
    1565. 

  1565. &lt;head&gt;&lt;title&gt;First JSP&lt;/title&gt;&lt;/head&gt;
    1566. 

  1566. &lt;body&gt;
    1567. 

  1567.   &lt;%
    1568. 

  1568.     <span class="dt">double</span> num = Math.random();
    1569. 

  1569.     <span class="kw">if</span> (num &gt; <span class="fl">0.95</span>) {
    1570. 

  1570.   %&gt;
    1571. 

  1571.       &lt;h2&gt;You&#39;ll have a luck day!&lt;/h2&gt;&lt;p&gt;(&lt;%= num %&gt;)&lt;/p&gt;
    1572. 

  1572.   &lt;%
    1573. 

  1573.     } <span class="kw">else</span> {
    1574. 

  1574.   %&gt;
    1575. 

  1575.       &lt;h2&gt;Well, life goes on ... &lt;/h2&gt;&lt;p&gt;(&lt;%= num %&gt;)&lt;/p&gt;
    1576. 

  1576.   &lt;%
    1577. 

  1577.     }
    1578. 

  1578.   %&gt;
    1579. 

  1579.   &lt;a<span class="ot"> href</span>=<span class="dt">&quot;</span>&lt;%= request.getRequestURI() %&gt;<span class="dt">&quot;</span>&gt;&lt;h3&gt;Try Again&lt;/h3&gt;&lt;/a&gt;
    1580. 

  1580. &lt;/body&gt;
    1581. 

  1581. &lt;/html&gt;</code></pre></div>
    1582. 

  1582. <p>上面的 JSP 代码在经过程序解析、处理后，会变成相对应的 HTML。而我们可以发现在这里的 View 层不仅仅只有模板的作用，还加入了部分的逻辑。我们可以在后面细细看这些问题，对于前端的 View 层来说，它可能是这样的：</p>
    1583. 

  1583. <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;information pure-g&quot;</span><span class="kw">&gt;</span>
    1584. 

  1584.     {{#.}}
    1585. 

  1585.     <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;pure-u-1 &quot;</span><span class="kw">&gt;</span>
    1586. 

  1586.         <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;l-box&quot;</span><span class="kw">&gt;</span>
    1587. 

  1587.             <span class="kw">&lt;h3</span><span class="ot"> class=</span><span class="st">&quot;information-head&quot;</span><span class="kw">&gt;&lt;a</span><span class="ot"> href=</span><span class="st">&quot;#/blog/{{slug}}&quot;</span><span class="ot"> alt=</span><span class="st">&quot;{{title}}&quot;</span><span class="kw">&gt;</span>{{title}}<span class="kw">&lt;/a&gt;&lt;/h3&gt;</span>
    1588. 

  1588.             <span class="kw">&lt;p&gt;</span>
    1589. 

  1589.                 发布时间:<span class="kw">&lt;span&gt;</span>{{created}}<span class="kw">&lt;/span&gt;</span>
    1590. 

  1590.             <span class="kw">&lt;p&gt;</span>
    1591. 

  1591.                 {{{content}}}
    1592. 

  1592.             <span class="kw">&lt;/p&gt;</span>
    1593. 

  1593. 

  1594.             <span class="kw">&lt;/p&gt;</span>
    1595. 

  1595.         <span class="kw">&lt;/div&gt;</span>
    1596. 

  1596.     <span class="kw">&lt;/div&gt;</span>
    1597. 

  1597.     {{/.}}
    1598. 

  1598. <span class="kw">&lt;/div&gt;</span></code></pre></div>
    1599. 

  1599. <p>在这里的 View 层只是单纯的一个显示作用，这也是我们推荐的做法。业务逻辑应该尽可能的放置于业务层。</p>
    1600. 

  1600. <h3 id="controller">Controller</h3>
    1601. 

  1601. <blockquote>
    1602. 

  1602. <p>控制器层起到不同层面间的组织作用，用于控制应用程序的流程。</p>
    1603. 

  1603. </blockquote>
    1604. 

  1604. <h3 id="更多-1">更多</h3>
    1605. 

  1605. <p>在前后端解耦合的系统中，通常系统的架构模式就变成了 MVP，又或者是 MVVM。</p>
    1606. 

  1606. <figure>
    1607. 

  1607. <img src="assets/article/chapter2/mvc-mvvm-mvp.png" alt="MVC、MVVM、MVP 对比" /><figcaption>MVC、MVVM、MVP 对比</figcaption>
    1608. 

  1608. </figure>
    1609. 

  1609. <p>三者间很大的不同在于层级间的通讯模型、使用场景。</p>
    1610. 

  1610. <h4 id="mvp">MVP</h4>
    1611. 

  1611. <blockquote>
    1612. 

  1612. <p>MVP 是从经典的模式 MVC 演变而来，它们的基本思想有相通的地方：Controller/Presenter 负责逻辑的处理，Model 提供数据，View 负责显示。</p>
    1613. 

  1613. </blockquote>
    1614. 

  1614. <h4 id="mvvm">MVVM</h4>
    1615. 

  1615. <p>MVVM 是 Model-View-ViewModel 的简写。相比于MVC悠久的历史来说，MVVM 是一个相当新的架构，它最早于2005年被由的 WPF 和Silverlight 的架构师 John Gossman 提出，并且应用在微软的软件开发中。而 MVC 已经被提出了二十多年了，可见两者出现的年代差别有多大。</p>
    1616. 

  1616. <p>MVVM 在使用当中，通常还会利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。所以，MVVM 模式有些时候又被称作：model-view-binder 模式。</p>
    1617. 

  1617. <h2 id="后台即服务">后台即服务</h2>
    1618. 

  1618. <blockquote>
    1619. 

  1619. <p>BaaS（Backend as a Service）是一种新型的云服务，旨在为移动和 Web 应用提供后端云服务，包括云端数据/文件存储、账户管理、消息推送、社交媒体整合等。</p>
    1620. 

  1620. </blockquote>
    1621. 

  1621. <p>产生这种服务的主要原因之一是因为移动应用的流行。在移动应用中，我们实际上只需要一个 API 接口来连接数据库，并作一些相应的业务逻辑处理。对于不同的应用产商来说，他们打造 API 的方式可能稍有不同，然而他们都只是将后台作为一个服务。</p>
    1622. 

  1622. <p>在一些更特殊的例子里，即有网页版和移动应用端，他们也开始使用同一个 API。前端作为一个单页面的应用，或者有后台渲染的应用。其架构如下图所示：</p>
    1623. 

  1623. <figure>
    1624. 

  1624. <img src="assets/article/chapter2/baas-diagram.png" alt="Backend As A Service" /><figcaption>Backend As A Service</figcaption>
    1625. 

  1625. </figure>
    1626. 

  1626. <h3 id="api-演进史">API 演进史</h3>
    1627. 

  1627. <p>在早期的工作中，我们会将大量的业务逻辑放置到 View 层——如迭代出某个结果。</p>
    1628. 

  1628. <p>而在今天，当我们有大量的逻辑一致时，我们怎么办，重复实现三次？</p>
    1629. 

  1629. <p>如下所示是笔者之前重构的系统的一个架构缩略图：</p>
    1630. 

  1630. <figure>
    1631. 

  1631. <img src="assets/article/chapter2/duplicate-business-logic.png" alt="重复逻辑的系统架构" /><figcaption>重复逻辑的系统架构</figcaption>
    1632. 

  1632. </figure>
    1633. 

  1633. <p>上面系统产生的主要原因是：技术本身的演进所造成的，并非是系统在一开始没有考虑到这个问题。</p>
    1634. 

  1634. <figure>
    1635. 

  1635. <img src="assets/article/chapter2/api-history.png" alt="API 演进史" /><figcaption>API 演进史</figcaption>
    1636. 

  1636. </figure>
    1637. 

  1637. <p>从早期到现在的互联网公司都有这样的问题，也会有同样的过程：</p>
    1638. 

  1638. <p>第一阶段： 因为创始人对于某个领域的看好，他们就创建了这样的一个桌面网站。这个时间点，大概可以在2000年左右。</p>
    1639. 

  1639. <p>第二阶段： 前“智能手机”出现了，人们需要开发移动版本的网站来适用用户的需要。由于当时的开发环境，以及技术条件所限，网站只会是桌面模板的简化。这时还没有普及 Ajax 请求、SPA 这些事物。</p>
    1640. 

  1640. <p>第三阶段： 手机应用的制作开始流行起来了。由于需要制作手机应用，人们就需要在网站上创建 API。由于当时的业务或者项目需求，这个 API 是直接耦合在系统中的。</p>
    1641. 

  1641. <p>第四阶段： 由于手机性能的不断提高，并且移动网络速度不断提升，人们便开始在手机上制作单页面应用。</p>
    1642. 

  1642. <p>由于他们使用的是相同业务逻辑、代码逻辑相同而<strong>技术栈不同</strong>的代码，当有一个新的需求出现时，他们需要重复多次实现，如下图所示：</p>
    1643. 

  1643. <figure>
    1644. 

  1644. <img src="assets/article/chapter2/duplicate-business-logic-with-domain.png" alt="重复业务逻辑的系统架构" /><figcaption>重复业务逻辑的系统架构</figcaption>
    1645. 

  1645. </figure>
    1646. 

  1646. <p>随后——也就是今天，各种新的解决方案出现了，如 React、混合应用、原生 + Web 的混合式应用、他们的目的就是解决上述的问题。不过，这些解决方案只是为了解决在前端中可能出现的问题，详细的内容可以见《前端演进史》。</p>
    1647. 

  1647. <p>而人们也借此机会在统一后台——因为我们可以借助于混合应用或混合式应用（即原生 + 内嵌 WebView，可以同时解决性能和跨平台问题）统一移动端，借助于响应式设计的理念可以统一桌面、平板和手机端。</p>
    1648. 

  1648. <p>因此，我们需要的就只是这样的一个 API：</p>
    1649. 

  1649. <figure>
    1650. 

  1650. <img src="assets/article/chapter2/one-api.png" alt="One API" /><figcaption>One API</figcaption>
    1651. 

  1651. </figure>
    1652. 

  1652. <h3 id="后台即服务-1">后台即服务</h3>
    1653. 

  1653. <p>现在，让我们来看看一个采用后台即服务的网站架构会是怎样的？</p>
    1654. 

  1654. <h2 id="数据持久化">数据持久化</h2>
    1655. 

  1655. <p>信息源于数据，我们在网站上看到的内容都应该是属于信息的范畴。这些信息是应用从数据库中根据业务需求查找、过滤出来的数据。</p>
    1656. 

  1656. <p>数据通常以文件的形式存储，毕竟文件是存储信息的基本单位。只是由于业务本身对于 Create、Update、Query、Index 等有不同的组合需求就引发了不同的数据存储软件。</p>
    1657. 

  1657. <p>如上章所说，View 层直接从 Model 层取数据，无遗也会暴露数据的模型。作为一个前端开发人员，我们对数据的操作有三种类型：</p>
    1658. 

  1658. <ol type="1">
    1659. 

  1659. <li>数据库。由于 Node.js 在最近几年里发展迅猛，越来越多的开发者选择使用 Node.js 作为后台语言。这与传统的 Model 层并无多大不同，要么直接操作数据库，要么间接操作数据库。即使在 NoSQL 数据库中也是如此。</li>
    1660. 

  1660. <li>搜索引擎。对于以查询为主的领域来说，搜索引擎是一个更好的选择，而搜索引擎又不好直接向 View 层暴露接口。这和招聘信息一样，都在暴露公司的技术栈。</li>
    1661. 

  1661. <li>RESTful。RESTful 相当于是 CRUD 的衍生，只是传输介质变了。</li>
    1662. 

  1662. <li>LocalStorage。LocalStorage 算是另外一种方式的 CRUD。</li>
    1663. 

  1663. </ol>
    1664. 

  1664. <p>说了这么多都是废话，他们都是可以用类 CRUD 的方式操作。</p>
    1665. 

  1665. <h3 id="文件存储">文件存储</h3>
    1666. 

  1666. <p>通常来说，以这种方式存储最常见的方式是 log(日志)，如 Nginx 的 access.log。像这样的文件就需要一些专业的软件，如 GoAccess、又或者是 Hadoop、Spark 来做对应的事。</p>
    1667. 

  1667. <p>在数据库出现之前，人们都是使用文件来存储数据的。数据以文件为单位存储在硬盘上，并且这些文件不容易一起管理、修改等等。如下图所示的是我早期存储文件的一种方式：</p>
    1668. 

  1668. <pre><code>├── 3.12
    1669. 

  1669. │   ├── cover.png
    1670. 

  1670. │   └── favicon.ico
    1671. 

  1671. └── 3.13
    1672. 

  1672.     └── template.tex</code></pre>
    1673. 

  1673. <p>每天我们都会修改、查看大量的不同类型的文件。而由于工作繁忙，我们可能没有办法一一地去分类这些文件。有时选择的便是，优先先按日期把文件一划分，接着再在随后的日子里归档。而这种存储方式大量的依赖于人来索引的工作，在很多时候往往显得不是很靠谱。并且当我们将数据存储进去后，往往很难进行修改。大量的 Log 文件就需要专门的工作来分析和使用，依赖于人来解析这些日志往往显得不是很靠谱。这时我们就需要一些重量级的工具，如用 Logstash、ElasticSearch、Kibana 来处理 Nginx 访问日志。</p>
    1674. 

  1674. <p>而对于那些非专业人员来说，使用 Excel 这样的工具往往显得比较方便。他们不需要去操作数据库，也不需要专业的知识来处理这些知识。只是从某种意义上来说，Excel 应该归属于数据库的范畴。</p>
    1675. 

  1675. <h3 id="数据库">数据库</h3>
    1676. 

  1676. <p>当我们开始一个 Web 应用的时候，如创建一个用户管理系统，我们就需要不断对文件进行查询、修改、插入和删除等操作。不仅如此，我们还需要定义数据之间的关系，如这个用户对应这个密码。在一些更复杂的情况下，我们还需要寻找这些用户中对应的一些操作数据等等。如果还是将这些工作交给文件来处理，那么我们便是在向自己挖坑。</p>
    1677. 

  1677. <blockquote>
    1678. 

  1678. <p>数据库，简单来说可视为电子化的文件柜——存储电子文件的处所，用户可以对文件中的数据运行新增、截取、更新、删除等操作。</p>
    1679. 

  1679. </blockquote>
    1680. 

  1680. <p>在操作库的时候，我们会使用到一名为 SQL（英语：Structural Query Language，中文： 结构化查询语言）的领域特定语言来对数据进行操作。</p>
    1681. 

  1681. <blockquote>
    1682. 

  1682. <p>SQL 是高级的非过程化编程语言，它允许用户在高层数据结构上工作。它不要求用户指定对数据的存放方法，也不需要用户了解其具体的数据存放方式。</p>
    1683. 

  1683. </blockquote>
    1684. 

  1684. <p>数据库里存储着大量的数据，在我们对系统建模的时候，也在决定系统的基础模型。</p>
    1685. 

  1685. <h4 id="orm">ORM</h4>
    1686. 

  1686. <p>在传统 SQL 数据库中，我们可能会依赖于 ORM，也可能会自己写 SQL。在使用 ORM 框架时，我们需要先定义 Model，如下是 Node.js 的 ORM 框架 Sequelize 的一个示例：</p>
    1687. 

  1687. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> User <span class="op">=</span> <span class="va">sequelize</span>.<span class="at">define</span>(<span class="st">&#39;user&#39;</span><span class="op">,</span> <span class="op">{</span>
    1688. 

  1688.   <span class="dt">firstName</span><span class="op">:</span> <span class="op">{</span>
    1689. 

  1689.     <span class="dt">type</span><span class="op">:</span> <span class="va">Sequelize</span>.<span class="at">STRING</span><span class="op">,</span>
    1690. 

  1690.     <span class="dt">field</span><span class="op">:</span> <span class="st">&#39;first_name&#39;</span>
    1691. 

  1691.   <span class="op">},</span>
    1692. 

  1692.   <span class="dt">lastName</span><span class="op">:</span> <span class="op">{</span>
    1693. 

  1693.     <span class="dt">type</span><span class="op">:</span> <span class="va">Sequelize</span>.<span class="at">STRING</span>
    1694. 

  1694.   <span class="op">}</span>
    1695. 

  1695. <span class="op">},</span> <span class="op">{</span>
    1696. 

  1696.   <span class="dt">freezeTableName</span><span class="op">:</span> <span class="kw">true</span>
    1697. 

  1697. <span class="op">}</span>)<span class="op">;</span>
    1698. 

  1698. 

  1699. <span class="va">User</span>.<span class="at">sync</span>(<span class="op">{</span><span class="dt">force</span><span class="op">:</span> <span class="kw">true</span><span class="op">}</span>).<span class="at">then</span>(<span class="kw">function</span> () <span class="op">{</span>
    1700. 

  1700.   <span class="co">// Table created</span>
    1701. 

  1701.   <span class="cf">return</span> <span class="va">User</span>.<span class="at">create</span>(<span class="op">{</span>
    1702. 

  1702.     <span class="dt">firstName</span><span class="op">:</span> <span class="st">&#39;John&#39;</span><span class="op">,</span>
    1703. 

  1703.     <span class="dt">lastName</span><span class="op">:</span> <span class="st">&#39;Hancock&#39;</span>
    1704. 

  1704.   <span class="op">}</span>)<span class="op">;</span>
    1705. 

  1705. <span class="op">}</span>)<span class="op">;</span></code></pre></div>
    1706. 

  1706. <p>上面定义的 Model，在程序初始化的时候将会创建相应的数据库字段。并且会创建一个 firstName 为 ‘John’，lastName 为 ‘Hancock’ 的用户。而这个过程中，我们并不需要操作数据库。</p>
    1707. 

  1707. <p>像 MongoDB 这类的数据库，也存在数据模型，但说的却是嵌入子文档。在业务量大的情况下，数据库在考验公司的技术能力，想想便觉得 Amazon RDS 挺好的。</p>
    1708. 

  1708. <h3 id="搜索引擎">搜索引擎</h3>
    1709. 

  1709. <p>尽管百科上对于搜索引擎的定义是这样的：</p>
    1710. 

  1710. <blockquote>
    1711. 

  1711. <p>搜索引擎指自动从因特网搜集信息，经过一定整理以后，提供给用户进行查询的系统。</p>
    1712. 

  1712. </blockquote>
    1713. 

  1713. <p>但是这样描述并不是非常准确，因为有相当多的网站采用了搜索引擎作为基础的存储服务架构，而且他们并非自动从互联网上搜索信息。搜索引擎应该分成三个部分来组成：</p>
    1714. 

  1714. <ol type="1">
    1715. 

  1715. <li>索引服务</li>
    1716. 

  1716. <li>搜索服务</li>
    1717. 

  1717. <li>索引数据</li>
    1718. 

  1718. </ol>
    1719. 

  1719. <p>索引服务用于将数据存储到索引数据中，而搜索服务正是搜索引擎存在的意义。对于查询条件复杂的网站来说，采用搜索引擎就意味着减少了非常多的繁琐数据处理事务。在一些架构中，人们用数据库存储数据，并使用工具来将数据注入到搜索引擎中。</p>
    1720. 

  1720. <p>从架构上来说，使用搜索引擎的优点是：分离存储、查询部分。从开发上来说，它可以让我们更关注于业务本身的价值，而不是去实现这样一个搜索逻辑。</p>
    1721. 

  1721. <p>如下图所示的 Lucene 应用的架构：</p>
    1722. 

  1722. <figure>
    1723. 

  1723. <img src="assets/article/chapter2/lucene-arch.jpg" alt="Lucene 应用架构" /><figcaption>Lucene 应用架构</figcaption>
    1724. 

  1724. </figure>
    1725. 

  1725. <p>可以从图中看到系统明显被划分成两部分：</p>
    1726. 

  1726. <ol type="1">
    1727. 

  1727. <li>Index Documents。索引文档部分，将用于存储数据到文件系统中。</li>
    1728. 

  1728. <li>Search Index。搜索部分，用于查询相应的数据。</li>
    1729. 

  1729. </ol>
    1730. 

  1730. <h2 id="前端框架选择">前端框架选择</h2>
    1731. 

  1731. <p>选择前端框架似乎是一件很难的事，然而这件事情并不是看上去那么难。只是有时候你只想追随潮流，或者因为你在技术选型受到一些影响。但是总的来说，选择一个框架并不是一件很难的事。同时也不是一件非常重要的事，因为框架本身是相通的。如果我们不尽量去解耦系统，那么选择什么框架也都是一样的。</p>
    1732. 

  1732. <h3 id="angular">Angular</h3>
    1733. 

  1733. <p>AngularJS 对于后端人员写前端代码来说，是一个非常不错的选择。Angular 框架采用并扩展了传统 HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。</p>
    1734. 

  1734. <p>并且类似于 Ionic 这样的混合框架，也将 Ionic 带到了移动应用的领域。</p>
    1735. 

  1735. <h3 id="react">React</h3>
    1736. 

  1736. <p>React 似乎很受市场欢迎，各种各样的新知识——虚拟 DOM、JSX、Component 等等。React 只是我们在上面章节里说到的 View 层，而这个 View 层需要辅以其他框架才能完成更多的工作。</p>
    1737. 

  1737. <p>并且 React 还有一个不错的杀手锏——React Native，虽然这个框架还在有条不紊地挖坑中，但是这真的是太爽了。以后我们只需要一次开发就可以多处运行了，再也没有比这更爽的事情发生了。</p>
    1738. 

  1738. <h3 id="vue">Vue</h3>
    1739. 

  1739. <p>Vue.js 是一个轻量级的前端框架。它是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。</p>
    1740. 

  1740. <h3 id="jquery-系">jQuery 系</h3>
    1741. 

  1741. <p>jQuery 还是一个不错的选择，不仅仅对于学习来说，而且对于工作来说也是如此。如果你们不是新起一个项目或者重构旧的项目，那么必然你是没有多少机会去超越 DOM。而如果这时候尝试去这样做会付出一定的代价，如我在前端演进史所说的那样——晚点做出选择，可能会好一点。</p>
    1742. 

  1742. <p>因为谁说 jQuery 不会去解放 DOM，React 带来的一些新的思想可能就比不上它的缺点。除此，jQuery 耕织几年的生态系统也是不可忽略。</p>
    1743. 

  1743. <h4 id="backbone-zepto-mustache">Backbone + Zepto + Mustache</h4>
    1744. 

  1744. <p>这是前几年（今年2016）的一个技术方向，今天似乎已经不太常见了。在这种模式下，人们使用 Backbone 来做一些路由、模型、视图、集合方面的工作，而由 jQuery 的兼容者 Zepto 来负责对 DOM 的处理，而 Mustache 在这里则充当模板系统的工作。</p>
    1745. 

  1745. <h2 id="前台与后台交互">前台与后台交互</h2>
    1746. 

  1746. <p>在我们把后台服务化后，前端跨平台化之前，我们还需要了解前台和后台之间怎么通讯。从现有的一些技术上来看，Ajax 和 WebSocket 是比较受欢迎的。</p>
    1747. 

  1747. <h3 id="ajax">Ajax</h3>
    1748. 

  1748. <p>AJAX 即 “Asynchronous JavaScript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。这个功能在之前的很多年来一直被 Web 开发者所忽视，直到 Gmail、Google Suggest 和 Google Maps 的出现，才使人们开始意识到其重要性。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重载整个网页页面。</p>
    1749. 

  1749. <figure>
    1750. 

  1750. <img src="assets/article/chapter2/ajax_request.png" alt="Ajax 请求" /><figcaption>Ajax 请求</figcaption>
    1751. 

  1751. </figure>
    1752. 

  1752. <p>说起 Ajax，我们就需要用 JavaScript 向服务器发送一个 HTTP 请求。这个过程要从 XMLHttpRequest 开始说起，它是一个 JavaScript 对象。它最初由微软设计，随后被 Mozilla、Apple 和 Google 采纳。如今，该对象已经被 W3C 组织标准化。</p>
    1753. 

  1753. <p>如下的所示的是一个 Ajax 请求的示例代码：</p>
    1754. 

  1754. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> xhr <span class="op">=</span> <span class="kw">new</span> <span class="at">XMLHttpRequest</span>()<span class="op">;</span>
    1755. 

  1755. <span class="va">xhr</span>.<span class="at">onreadystatechange</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span>
    1756. 

  1756.     <span class="cf">if</span> (<span class="va">xhr</span>.<span class="at">readyState</span> <span class="op">==</span> <span class="va">XMLHttpRequest</span>.<span class="at">DONE</span>) <span class="op">{</span>
    1757. 

  1757.         <span class="at">alert</span>(<span class="va">xhr</span>.<span class="at">responseText</span>)<span class="op">;</span>
    1758. 

  1758.     <span class="op">}</span>
    1759. 

  1759. <span class="op">}</span>
    1760. 

  1760. <span class="va">xhr</span>.<span class="at">open</span>(<span class="st">&#39;GET&#39;</span><span class="op">,</span> <span class="st">&#39;http://example.com&#39;</span><span class="op">,</span> <span class="kw">true</span>)<span class="op">;</span>
    1761. 

  1761. <span class="va">xhr</span>.<span class="at">send</span>(<span class="kw">null</span>)<span class="op">;</span></code></pre></div>
    1762. 

  1762. <p>我们只需要简单的创建一个请求对象实例，打开一个 URL，然后发送这个请求。当传输完毕后，结果的 HTTP 状态以及返回的响应内容也可以从请求对象中获取。</p>
    1763. 

  1763. <p>而这个返回的内容可以是多种格式，如 XML 和 JSON，但是从近年的趋势来看，XML 基本上已经很少看到了。这里我们以 JSON 为主，来简单地介绍一下返回数据的解析。</p>
    1764. 

  1764. <h3 id="json">JSON</h3>
    1765. 

  1765. <blockquote>
    1766. 

  1766. <p>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于 C 语言家族的习惯（包括 C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。</p>
    1767. 

  1767. </blockquote>
    1768. 

  1768. <h4 id="xml-vs-json">XML VS JSON</h4>
    1769. 

  1769. <p>JSON 格式的数据具有以下的一些特点：</p>
    1770. 

  1770. <ul>
    1771. 

  1771. <li>容易阅读</li>
    1772. 

  1772. <li>解析速度更快</li>
    1773. 

  1773. <li>占用空间更少</li>
    1774. 

  1774. </ul>
    1775. 

  1775. <p>如下所示的是一个简单的对比过程：</p>
    1776. 

  1776. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">myJSON <span class="op">=</span> <span class="st">&#39;{&quot;age&quot; : 12, &quot;name&quot; : &quot;Danielle&quot;}&#39;</span></code></pre></div>
    1777. 

  1777. <p>如果我们要取出上面数值中的age，那么我们只需要这样做：</p>
    1778. 

  1778. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">anObject <span class="op">=</span> <span class="va">JSON</span>.<span class="at">parse</span>(myJSON)<span class="op">;</span>
    1779. 

  1779. <span class="va">anObject</span>.<span class="at">age</span> <span class="op">===</span> <span class="dv">12</span> <span class="co">// True</span></code></pre></div>
    1780. 

  1780. <p>同样的，对于 XML 来说，我们有下面的格式:</p>
    1781. 

  1781. <pre><code>&lt;person&gt;
    1782. 

  1782.     &lt;age&gt;12&lt;/age&gt;
    1783. 

  1783.     &lt;name&gt;Danielle&lt;/name&gt;
    1784. 

  1784. &lt;/person&gt;</code></pre>
    1785. 

  1785. <p>而如果我们要取出上面数据中的age的值，他将是这样的：</p>
    1786. 

  1786. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">myObject <span class="op">=</span> <span class="at">parseThatXMLPlease</span>()<span class="op">;</span>
    1787. 

  1787. thePeople <span class="op">=</span> <span class="va">myObject</span>.<span class="at">getChildren</span>(<span class="st">&quot;person&quot;</span>)<span class="op">;</span>
    1788. 

  1788. thePerson <span class="op">=</span> thePeople[<span class="dv">0</span>]<span class="op">;</span>
    1789. 

  1789. <span class="va">thePerson</span>.<span class="at">getChildren</span>(<span class="st">&quot;age&quot;</span>)[<span class="dv">0</span>].<span class="at">value</span>() <span class="op">==</span> <span class="st">&quot;12&quot;</span> <span class="co">// True</span></code></pre></div>
    1790. 

  1790. <p>对比一下，我们可以发现XML的数据不仅仅解析上比较麻烦，而且还繁琐。</p>
    1791. 

  1791. <h4 id="json-web-tokens">JSON WEB Tokens</h4>
    1792. 

  1792. <blockquote>
    1793. 

  1793. <p>JSON Web Token (JWT) 是一种基于 token 的认证方案。</p>
    1794. 

  1794. </blockquote>
    1795. 

  1795. <p>在人们大规模地开始 Web 应用的时候，我们在授权的时候遇到了一些问题，而这些问题不是 Cookie 所能解决的。Cookie 存在一些明显的问题：不支持跨域、并且不是无状态的、不能使用CDN、与系统耦合等等。除了解决上面的问题，它还可以提高性能等等。基于 Session 的授权机制需要服务端来保存这个状态，而使用 JWT 则可以跳过这个问题，并且使我们设计出来的 API 满足 RESTful 规范。即，我们 API 的状态应该是没有状态的。因此人们提出了 JWT 来解决这一系列的问题。</p>
    1796. 

  1796. <p>通过 JWT 我们可以更方便地写出适用于前端应用的认证方案，如登陆、注册这些功能。当我们使用 JWT 来实现我们的注册、登陆功能时，我们在登陆的时候将向服务器发送用户名和密码，服务器验证后将生成对应的 Token。在下次我们进行页面操作的时候，如访问 /Dashboard 时，发出的 HTTP 请求的 Header 中会包含这个 Token。服务器在接收到请求后，将对这个 Token 进行验证并判断这个 Token 是否已经过期了。</p>
    1797. 

  1797. <figure>
    1798. 

  1798. <img src="assets/article/chapter2/jwt-process.jpeg" alt="JWT 流程" /><figcaption>JWT 流程</figcaption>
    1799. 

  1799. </figure>
    1800. 

  1800. <p>需要注意的一点是：在使用 JWT 的时候也需要注意安全问题，在允许的情况下应该使用 HTTPS 协议。</p>
    1801. 

  1801. <h3 id="websocket">WebSocket</h3>
    1802. 

  1802. <p>在一些网站上为了实现推送技术，都采用了轮询的技术。即在特定的时间间隔里，由浏览器向服务器发出 HTTP 请求，然后浏览器便可以从服务器获取最新的消息。如下图所示的是 Google Chrome 申请开发者账号时发出的对应的请求：</p>
    1803. 

  1803. <figure>
    1804. 

  1804. <img src="assets/article/chapter2/chrome-ajax-poll.jpg" alt="Chrome Ajax 轮询" /><figcaption>Chrome Ajax 轮询</figcaption>
    1805. 

  1805. </figure>
    1806. 

  1806. <p>从上图中我们可以看到，Chrome 的前台正在不断地向后台查询 API 的结果。由于浏览器需要不断的向服务器发出请求，而 HTTP 的 Header 是非常长的，即使是一个很小的数据也会占用大量的带宽和服务器资源。为了解决这个问题，HTML5 推出了一种在单个 TCP 连接上进行全双工通讯的协议WebSocket。</p>
    1807. 

  1807. <p>WebSocket 可以让客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。</p>
    1808. 

  1808. <h1 id="编码">编码</h1>
    1809. 

  1809. <p>在我们真正开始去写代码之前，我们可能会去考虑一些事情。怎么去规划我们的任务，如何去细分这个任务。</p>
    1810. 

  1810. <ol type="1">
    1811. 

  1811. <li>如果一件事可以自动化，那么就尽量去自动化，毕竟你是一个程序员。</li>
    1812. 

  1812. <li>快捷键！快捷键！快捷键！</li>
    1813. 

  1813. <li>使用可以帮助你快速工作的工具——如启动器。</li>
    1814. 

  1814. </ol>
    1815. 

  1815. <p>不过不得不提到的一点是：你需要去考虑这个需求是不是一个坑的问题。如果这是一个坑，那么你应该尽早的去反馈这个问题。沟通越早，成本越低。</p>
    1816. 

  1816. <h2 id="编码过程">编码过程</h2>
    1817. 

  1817. <p>整个编程的过程如下图所示：</p>
    1818. 

  1818. <figure>
    1819. 

  1819. <img src="assets/article/chapter3/coding.png" alt="编码过程" /><figcaption>编码过程</figcaption>
    1820. 

  1820. </figure>
    1821. 

  1821. <p>步骤如下所示：</p>
    1822. 

  1822. <ol type="1">
    1823. 

  1823. <li>Kick Off。在这个步骤中，我们要详细地了解我们所需要做的东西、我们的验收条件是什么、我们需要做哪些事情。</li>
    1824. 

  1824. <li>Tasking。<strong>简单</strong>的规则一下，我们需要怎么做。一般来说，如果是结对编程的话，还会记录下来。</li>
    1825. 

  1825. <li>最新的代码。对于使用 Git 来管理项目的团队来说，在一个任务刚开始的时候应该保证本地的代码是最新的。</li>
    1826. 

  1826. <li>Test First。测试优先是一个很不错的实践，可以保证我们写的代码的健壮，并且函数尽可能小，当然也会有测试。</li>
    1827. 

  1827. <li>Code。就是实现功能，一般人都知道。</li>
    1828. 

  1828. <li>重构。在我们实现了上面两步之后，我们还需要重构代码，使我们的代码更容易阅读、更易懂等等。</li>
    1829. 

  1829. <li>提交代码。这里的提交代码只是本地的提交代码，因此都提倡在本地多次提交代码。</li>
    1830. 

  1830. <li>运行测试。当我们完成我们的任务后，我们就可以准备 PUSH 代码了。在这时，我们需要在本地运行测试——以保证我们不破坏别人的功能。</li>
    1831. 

  1831. <li>PUSH 代码。</li>
    1832. 

  1832. <li>等 CI 测试通过。如果这时候 CI 是挂的话，那么我们就需要再修 CI。这时其他的人就没有理由 PUSH 代码，如果他们的代码也是有问题的，这只会使情况变得愈加复杂。</li>
    1833. 

  1833. </ol>
    1834. 

  1834. <p>不过，在最开始的时候我们要了解一下如何去搭建一个项目。</p>
    1835. 

  1835. <h2 id="web-应用的构建系统">Web 应用的构建系统</h2>
    1836. 

  1836. <blockquote>
    1837. 

  1837. <p>构建系统(build system)是用来从源代码生成用户可以使用的目标的自动化工具。目标可以包括库、可执行文件、或者生成的脚本等等。</p>
    1838. 

  1838. </blockquote>
    1839. 

  1839. <p>常用的构建工具包括 GNU Make、GNU autotools、CMake、Apache Ant（主要用于JAVA）。此外，所有的集成开发环境（IDE）比如 Qt Creator、Microsoft Visual Studio 和 Eclipse 都对他们支持的语言添加了自己的构建系统配置工具。通常 IDE 中的构建系统只是基于控制台的构建系统（比如 Autotool 和 CMake ）的前端。</p>
    1840. 

  1840. <p>对比于 Web 应用开发来说，构建系统应该还包括应用打包（如 Java 中的 Jar 包，或者用于部署的 RPM 包）、源代码分析、测试覆盖率分析等等。</p>
    1841. 

  1841. <h3 id="web-应用的构建过程">Web 应用的构建过程</h3>
    1842. 

  1842. <p>在刚创建项目的时候，我们都会有一个完整的构建思路。如下图便是这样的一个例子：</p>
    1843. 

  1843. <figure>
    1844. 

  1844. <img src="assets/article/chapter3/build-web-project.png" alt="构建过程" /><figcaption>构建过程</figcaption>
    1845. 

  1845. </figure>
    1846. 

  1846. <p>这是一个后台语言用的是 Java，前台语言用的是 JavaScript 项目的构建流程。</p>
    1847. 

  1847. <p><strong>Compile</strong>。对于那些不是用浏览器的前端项目来说，如 ES6、CoffeeScript，他们还需要将代码编译成浏览器使用的 JavaScript 版本。对于 Java 语言来说，他需要一个编译的过程，在这个编译的过程中，会检查一些语法问题。</p>
    1848. 

  1848. <p><strong>Check Style</strong>。通常我们会在我们的项目里定义一些代码规范，如 JavaScript 中的使用两个空格的缩进，Java 的 Checkstyle 中一个函数不能超过30行的限制。</p>
    1849. 

  1849. <p><strong>单元测试</strong>。作为测试中最基础也是最快的测试，这个测试将集中于测试单个函数的是不是正确的。</p>
    1850. 

  1850. <p><strong>功能测试</strong>。功能测试的意义在于，保证一个功能依赖的几个函数组合在一起也是可以工作的。</p>
    1851. 

  1851. <p><strong>Mock Server</strong>。当我们的代码依赖于第三方服务的时候，我们就需要一个 Mock Server 来保证我们的功能代码可以独立地测试。</p>
    1852. 

  1852. <p><strong>集成测试</strong>。这一步将集成前台、后台，并且运行起最后将上线的应用。接着依据于用户所需要的功能来编写相应的测试，来保证一个个的功能是可以工作的。</p>
    1853. 

  1853. <p><strong>打包</strong>。对于部署来说，直接安装一个 RPM 包，或者 DEB 包是最方便的事。在这个包里会包含应用程序所需的所有二进制文件、数据和配置文件等等。</p>
    1854. 

  1854. <p><strong>上传包</strong>。在完成打包后，我们就可以上传这个软件包了。</p>
    1855. 

  1855. <p><strong>部署</strong>。最后，我们就可以在我们的线上环境中安装这个软件包。</p>
    1856. 

  1856. <h3 id="web-应用的构建实战">Web 应用的构建实战</h3>
    1857. 

  1857. <p>下面就让我们来构建一个简单的 Web 应用，来实践一下这个过程。在这里，我们要使用到的一个工具是 Gulp，当然对于 Grunt 也是类似的。</p>
    1858. 

  1858. <h4 id="gulp-入门指南">Gulp 入门指南</h4>
    1859. 

  1859. <blockquote>
    1860. 

  1860. <p>Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。</p>
    1861. 

  1861. </blockquote>
    1862. 

  1862. <ol type="1">
    1863. 

  1863. <li>全局安装 gulp：</li>
    1864. 

  1864. </ol>
    1865. 

  1865. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="ex">npm</span> install --global gulp</code></pre></div>
    1866. 

  1866. <ol start="2" type="1">
    1867. 

  1867. <li>作为项目的开发依赖（devDependencies）安装：</li>
    1868. 

  1868. </ol>
    1869. 

  1869. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="ex">npm</span> install --save-dev gulp</code></pre></div>
    1870. 

  1870. <ol start="3" type="1">
    1871. 

  1871. <li>在项目根目录下创建一个名为 gulpfile.js 的文件：</li>
    1872. 

  1872. </ol>
    1873. 

  1873. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> gulp <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;gulp&#39;</span>)<span class="op">;</span>
    1874. 

  1874. 

  1875. <span class="va">gulp</span>.<span class="at">task</span>(<span class="st">&#39;default&#39;</span><span class="op">,</span> <span class="kw">function</span>() <span class="op">{</span>
    1876. 

  1876.   <span class="co">// 将你的默认的任务代码放在这</span>
    1877. 

  1877. <span class="op">}</span>)<span class="op">;</span></code></pre></div>
    1878. 

  1878. <ol start="4" type="1">
    1879. 

  1879. <li>运行 gulp：</li>
    1880. 

  1880. </ol>
    1881. 

  1881. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash">$ <span class="ex">gulp</span></code></pre></div>
    1882. 

  1882. <p>默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。接下来，我们就可以打造我们的应用的构建系统了。</p>
    1883. 

  1883. <h4 id="代码质量检测工具">代码质量检测工具</h4>
    1884. 

  1884. <p>当 C 还是一门新型的编程语言时，还存在一些未被原始编译器捕获的常见错误，所以程序员们开发了一个被称作 lint 的配套项目用来扫描源文件，查找问题。</p>
    1885. 

  1885. <p>对应于不同的语言都会有不同的 lint 工具，在 JavaScript 中就有 JSLint。JavaScript 是一门年轻、语法灵活多变且对格式要求相对松散的语言，因此这样的工具对于这门语言来说比较重要。</p>
    1886. 

  1886. <p>2011年，一个叫 Anton Kovalyov 的前端程序员借助开源社区的力量弄出来了 JSHint，其思想基本上和 JSLint 是一致的，但是其有一下几项优势：</p>
    1887. 

  1887. <ul>
    1888. 

  1888. <li>可配置规则，每个团队可以自己定义自己想要的代码规范。</li>
    1889. 

  1889. <li>对社区非常友好，社区支持度高。</li>
    1890. 

  1890. <li>可定制的结果报表。</li>
    1891. 

  1891. </ul>
    1892. 

  1892. <p>下面就让我们来安装这个软件吧：</p>
    1893. 

  1893. <p><strong>安装及使用</strong></p>
    1894. 

  1894. <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">npm</span> install jshint gulp-jshint --save-dev</code></pre></div>
    1895. 

  1895. <p>示例代码:</p>
    1896. 

  1896. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> jshint <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;gulp-jshint&#39;</span>)<span class="op">;</span>
    1897. 

  1897. <span class="kw">var</span> gulp   <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;gulp&#39;</span>)<span class="op">;</span>
    1898. 

  1898. 

  1899. <span class="va">gulp</span>.<span class="at">task</span>(<span class="st">&#39;lint&#39;</span><span class="op">,</span> <span class="kw">function</span>() <span class="op">{</span>
    1900. 

  1900.   <span class="cf">return</span> <span class="va">gulp</span>.<span class="at">src</span>(<span class="st">&#39;./lib/*.js&#39;</span>)
    1901. 

  1901.     .<span class="at">pipe</span>(<span class="at">jshint</span>())
    1902. 

  1902.     .<span class="at">pipe</span>(<span class="va">jshint</span>.<span class="at">reporter</span>(<span class="st">&#39;YOUR_REPORTER_HERE&#39;</span>))<span class="op">;</span>
    1903. 

  1903. <span class="op">}</span>)<span class="op">;</span></code></pre></div>
    1904. 

  1904. <h4 id="自动化测试工具">自动化测试工具</h4>
    1905. 

  1905. <p>一般来说，自动测试应该从两部分考虑：</p>
    1906. 

  1906. <ul>
    1907. 

  1907. <li>单元测试</li>
    1908. 

  1908. <li>功能测试</li>
    1909. 

  1909. </ul>
    1910. 

  1910. <p>Mocha 是一个可以运行在 Node.js 和浏览器环境里的测试框架，</p>
    1911. 

  1911. <pre><code>var gulp = require(&#39;gulp&#39;);
    1912. 

  1912. var mocha = require(&#39;gulp-mocha&#39;);
    1913. 

  1913. 

  1914. gulp.task(&#39;default&#39;, function () {
    1915. 

  1915.     return gulp.src(&#39;test.js&#39;, {read: false})
    1916. 

  1916.         // gulp-mocha needs filepaths so you can&#39;t have any plugins before it
    1917. 

  1917.         .pipe(mocha({reporter: &#39;nyan&#39;}));
    1918. 

  1918. });</code></pre>
    1919. 

  1919. <h4 id="编译">编译</h4>
    1920. 

  1920. <p>对于静态型语言来说，编译是一个很重要的步骤。不过，对于动态语言来说也存在这样的工具。</p>
    1921. 

  1921. <p><strong>动态语言的编译</strong></p>
    1922. 

  1922. <p>可以说这类型的语言，是以我们常见的 JavaScript 为代表。</p>
    1923. 

  1923. <ol type="1">
    1924. 

  1924. <li><p>CoffeeScript 是一套 JavaScript 的转译语言，并且它增强了 JavaScript 的简洁性与可读性。</p></li>
    1925. 

  1925. <li><p>Webpack 是一款模块加载器兼打包工具，它能把各种资源，例如 JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。</p></li>
    1926. 

  1926. <li><p>Babel 是一个转换编译器，它能将 ES6 转换成ES5，以便在较低版本的浏览器中正确运行。</p></li>
    1927. 

  1927. </ol>
    1928. 

  1928. <h4 id="打包">打包</h4>
    1929. 

  1929. <p>在 GNU/Linux 系统的软件包里通过包含了已压缩的软件文件集以及该软件的内容信息。常见的软件包有</p>
    1930. 

  1930. <ol type="1">
    1931. 

  1931. <li>DEB。Debian 软件包格式，文件扩展名为 .deb</li>
    1932. 

  1932. <li>RPM（原 Red Hat Package Manager，现在是一个递归缩写）。该软件包分为二进制包（Binary）、源代码包（Source）和 Delta 包三种。二进制包可以直接安装在计算机中，而源代码包将会由 RPM 自动编译、安装。源代码包经常以 src.rpm 作为后缀名。</li>
    1933. 

  1933. <li>压缩文档 tar.gz。通常是该软件的源码，故而在安装的过程中需要编译、安装，并且在编译时需要自己手动安装所需要依赖的软件。在软件仓库没有最新版本的软件时，tar.gz 往往是最好的选择。</li>
    1934. 

  1934. </ol>
    1935. 

  1935. <p>由于这里的打包过程比较繁琐，就不介绍了。有兴趣的读者可以自己了解一下。</p>
    1936. 

  1936. <h4 id="上传及发布包">上传及发布包</h4>
    1937. 

  1937. <p>上传包之前我们需要创建一个相应的文件服务器，又或者是相应的软件源。并且对于我们的产品环境的服务器来说，我们还需要指定好这个软件源才能安装这个包。</p>
    1938. 

  1938. <p>以 Ubuntu 为例，Ubuntu 里的许多应用程序软件包，是放在网络里的服务器上，这些服务器网站，就称作“源”，从源里可以很方便地获取软件包。</p>
    1939. 

  1939. <p>因而在这一步中，我们所需要做的事便是将我们打包完的软件上传到相应的服务器上。</p>
    1940. 

  1940. <h2 id="git-与版本控制">Git 与版本控制</h2>
    1941. 

  1941. <h3 id="版本控制">版本控制</h3>
    1942. 

  1942. <blockquote>
    1943. 

  1943. <p>版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。</p>
    1944. 

  1944. </blockquote>
    1945. 

  1945. <p>虽然基于 Git 的工作流可能并不是一个非常好的实践，但是在这里我们以这个工作流做为实践来开展我们的项目。如下图所示是一个基于 Git 的项目流：</p>
    1946. 

  1946. <figure>
    1947. 

  1947. <img src="assets/article/chapter3/gitflow.png" alt="基于 Git 的工作流" /><figcaption>基于 Git 的工作流</figcaption>
    1948. 

  1948. </figure>
    1949. 

  1949. <p>我们日常会工作在 “develop” 分支（那条线）上，通常来说每个迭代我们会发布一个新的版本，而这个新的版本将会直接上线到产品环境。那么上线到产品环境的这个版本就需要打一个版本号——这样不仅可以方便跟踪我们的系统，而且当出错的时候我们也可以直接回滚到上一个版本。如果在上线的时候有些 Bug 不得不去修复，并且由于上线的新功能很重要，我们就需要一些 Hotfix。而从整个过程来看，版本控制起了一个非常大的作用。</p>
    1950. 

  1950. <p>不仅仅如此，版本控制的最大重要是在开发的过程中扮演的角色。通过版本管理系统，我们可以：</p>
    1951. 

  1951. <ol type="1">
    1952. 

  1952. <li>将某个文件回溯到之前的状态。</li>
    1953. 

  1953. <li>将项目回退到过去某个时间点。</li>
    1954. 

  1954. <li>在修改 Bug 时，可以查看修改历史，查出修改原因</li>
    1955. 

  1955. <li>只要版本控制系统还在，你可以任意修改项目中的文件，并且还可以轻松恢复。</li>
    1956. 

  1956. </ol>
    1957. 

  1957. <p>常用的版本管理系统有 Git、SVN，但是从近年来看 Git 似乎更受市场欢迎。</p>
    1958. 

  1958. <h3 id="git">Git</h3>
    1959. 

  1959. <p>从一般开发者的角度来看，Git 有以下功能：</p>
    1960. 

  1960. <ol type="1">
    1961. 

  1961. <li>从服务器上克隆数据库（包括代码和版本信息）到单机上。</li>
    1962. 

  1962. <li>在自己的机器上创建分支，修改代码。</li>
    1963. 

  1963. <li>在单机上自己创建的分支上提交代码。</li>
    1964. 

  1964. <li>在单机上合并分支。</li>
    1965. 

  1965. <li>新建一个分支，把服务器上最新版的代码 fetch 下来，然后跟自己的主分支合并。</li>
    1966. 

  1966. <li>生成补丁（patch），把补丁发送给主开发者。</li>
    1967. 

  1967. <li>看主开发者的反馈，如果主开发者发现两个一般开发者之间有冲突（他们之间可以合作解决的冲突），就会要求他们先解决冲突，然后再由其中一个人提交。如果主开发者可以自己解决，或者没有冲突，就通过。</li>
    1968. 

  1968. <li>一般开发者之间解决冲突的方法，开发者之间可以使用 pull 命令解决冲突，解决完冲突之后再向主开发者提交补丁。</li>
    1969. 

  1969. </ol>
    1970. 

  1970. <p>从主开发者的角度（假设主开发者不用开发代码）看，Git 有以下功能：</p>
    1971. 

  1971. <ol type="1">
    1972. 

  1972. <li>查看邮件或者通过其它方式查看一般开发者的提交状态。</li>
    1973. 

  1973. <li>打上补丁，解决冲突（可以自己解决，也可以要求开发者之间解决以后再重新提交，如果是开源项目，还要决定哪些补丁有用，哪些不用）。</li>
    1974. 

  1974. <li>向公共服务器提交结果，然后通知所有开发人员。</li>
    1975. 

  1975. </ol>
    1976. 

  1976. <h4 id="git-初入">Git 初入</h4>
    1977. 

  1977. <p>如果是第一次使用 Git，你需要设置署名和邮箱：</p>
    1978. 

  1978. <pre><code>$ git config --global user.name &quot;用户名&quot;
    1979. 

  1979. $ git config --global user.email &quot;电子邮箱&quot;</code></pre>
    1980. 

  1980. <p>你可以在 <a href="https://github.com">GitHub</a> 新建免费的公开仓库或在 <a href="https://coding.net">Coding.net</a> 新建免费的私有仓库。</p>
    1981. 

  1981. <p>按照 <a href="https://help.github.com/articles/generating-an-ssh-key/">GitHub 的文档</a> 或 <a href="https://coding.net/help/doc/account/ssh-key.html">Coding.net 的文档</a> 配置 SSH Key，然后将代码仓库 clone 到本地，其实就是将代码复制到你的机器里，并交由 Git 来管理：</p>
    1982. 

  1982. <pre><code>$ git clone git@github.com:username/repository.git
    1983. 

  1983. 或
    1984. 

  1984. $ git clone git@git.coding.net:username/repository.git</code></pre>
    1985. 

  1985. <p>或使用 HTTPS 地址进行 clone：</p>
    1986. 

  1986. <pre><code>$ git clone https://username:password@github.com/username/repository.git
    1987. 

  1987. 或
    1988. 

  1988. $ git clone https://username:password@git.coding.net/username/repository.git</code></pre>
    1989. 

  1989. <p>你可以修改复制到本地的代码了（ symfony-docs-chs 项目里都是 rst 格式的文档）。当你觉得完成了一定的工作量，想做个阶段性的提交：</p>
    1990. 

  1990. <p>向这个本地的代码仓库添加当前目录的所有改动：</p>
    1991. 

  1991. <pre><code>$ git add .</code></pre>
    1992. 

  1992. <p>或者只是添加某个文件：</p>
    1993. 

  1993. <pre><code>$ git add -p</code></pre>
    1994. 

  1994. <p>我们可以输入</p>
    1995. 

  1995. <pre><code>$ git status</code></pre>
    1996. 

  1996. <p>来看现在的状态，如下图是添加之前的：</p>
    1997. 

  1997. <figure>
    1998. 

  1998. <img src="assets/article/chapter3/before-add.png" alt="Before add" /><figcaption>Before add</figcaption>
    1999. 

  1999. </figure>
    2000. 

  2000. <p>下面是添加之后 的</p>
    2001. 

  2001. <figure>
    2002. 

  2002. <img src="assets/article/chapter3/after-add.png" alt="After add" /><figcaption>After add</figcaption>
    2003. 

  2003. </figure>
    2004. 

  2004. <p>可以看到状态的变化是从黄色到绿色，即 unstage 到 add。</p>
    2005. 

  2005. <p>在完成添加之后，我们就可以写入相应的提交信息——如这次修改添加了什么内容 、这次修改修复了什么问题等等。在我们的工作流程里，我们使用 Jira 这样的工具来管理我们的项目，也会在我们的 Commit Message 里写上作者的名字，如下：</p>
    2006. 

  2006. <pre><code>$ git commit -m &quot;[GROWTH-001] Phodal: add first commit &amp; example&quot;</code></pre>
    2007. 

  2007. <p>在这里的<code>GROWTH-001</code>就相当于是我们的任务号，Phodal 则对应于用户名，后面的提交信息也会写明这个任务是干嘛的。</p>
    2008. 

  2008. <p>由于有测试的存在，在完成提交之后，我们就需要运行相应的测试来保证我们没有破坏原来的功能。因此，我们就可以PUSH我们的代码到服务器端：</p>
    2009. 

  2009. <pre><code>$ git push</code></pre>
    2010. 

  2010. <p>这样其他人就可以看到我们修改的代码。</p>
    2011. 

  2011. <h2 id="tasking">Tasking</h2>
    2012. 

  2012. <p>初到 ThoughtWorks 时，Pair 时候总会有人教我如何开始编码，这应该也是一项基础的能力。结合日常，重新演绎一下这个过程：</p>
    2013. 

  2013. <ol type="1">
    2014. 

  2014. <li>有一个明确的实现目标。</li>
    2015. 

  2015. <li>评估目标并将其拆解成任务(TODO)。</li>
    2016. 

  2016. <li>规划任务的步骤(TODO)</li>
    2017. 

  2017. <li>学习相关技能</li>
    2018. 

  2018. <li>执行 Task，遇到难题就跳到第二步。</li>
    2019. 

  2019. </ol>
    2020. 

  2020. <h3 id="如何-tasking-一本书">如何 Tasking 一本书</h3>
    2021. 

  2021. <p>以本文的写作为例，细分上面的过程就是：</p>
    2022. 

  2022. <ol type="1">
    2023. 

  2023. <li>我有了一个中心思想——在某种意义上来说就是标题。</li>
    2024. 

  2024. <li>依据中心思想我将这篇文章分成了四小节。</li>
    2025. 

  2025. <li>然后我开始写四小节的内容。</li>
    2026. 

  2026. <li>直到完成。</li>
    2027. 

  2027. </ol>
    2028. 

  2028. <p>而如果将其划分到一个编程任务，那么也是一样的：</p>
    2029. 

  2029. <ol type="1">
    2030. 

  2030. <li>我们想到做一个 xxx 的 idea。</li>
    2031. 

  2031. <li>为了这个 idea 我们需要分成几步，或者几层设计。</li>
    2032. 

  2032. <li>对于每一步，我们应该做点什么</li>
    2033. 

  2033. <li>我们需要学习怎样的技能</li>
    2034. 

  2034. <li>集成每一步的代码，就有了我们的系统。</li>
    2035. 

  2035. </ol>
    2036. 

  2036. <p>现在让我们以这本书的写作过程为例，来看看这个过程是怎么发生的。</p>
    2037. 

  2037. <p>在计划写一本书的时候，我们有关于这本书主题的一些想法。正是一些想法慢慢地凝聚成一个稳定的想法，不过这不是我们所要讨论的重点。</p>
    2038. 

  2038. <p>当我们已经有了一本书的相关话题的时候，我们会打算去怎么做？先来个头脑风暴，在上面写满我们的一些想法，如这本书最开始划分了这七步：</p>
    2039. 

  2039. <ul>
    2040. 

  2040. <li>从零开始</li>
    2041. 

  2041. <li>编码</li>
    2042. 

  2042. <li>上线</li>
    2043. 

  2043. <li>数据分析</li>
    2044. 

  2044. <li>持续交付</li>
    2045. 

  2045. <li>遗留系统</li>
    2046. 

  2046. <li>回顾与新架构</li>
    2047. 

  2047. </ul>
    2048. 

  2048. <p>接着，依据我们的想法整理出几个章节。如本书最初的时候只有七个章节，但是我们还需要第一个章节来指引新手，因此变成了八个章节。对应于每一个章节，我们都需要想好每一章里的内容。如在第一章里，又可以分成不同的几部分。随后，我们再对每一部分的内容进行任务划分，那么我们就会得到一个又一个的小的章节。在每个小的章节里，我们都可以大概策划一下我们要写的内容。</p>
    2049. 

  2049. <p>然后我们就可以开始写这样的一本书——由一节节汇聚成一章，由一章一章汇聚成一本。</p>
    2050. 

  2050. <h3 id="tasking-开发任务">Tasking 开发任务</h3>
    2051. 

  2051. <p>现在，让我们简单地来 Tasking 如何开发一个博客。作为一个程序员，如果我们要去开始一个博客系统的话，那么我们会怎么做？</p>
    2052. 

  2052. <ol type="1">
    2053. 

  2053. <li>先规划一下我们所需要的功能——如后台、评论、Social 等等，并且我们还应该设计我们博客的 Mockup。</li>
    2054. 

  2054. <li>随后我们就可以简单地设计一下系统的架构，如传统的前后端结合。</li>
    2055. 

  2055. <li>我们就可以进行技术选型了——使用哪个后端框架、使用哪个前端框架。</li>
    2056. 

  2056. <li>创建我们的 hello,world，然后开始进行一个功能的编码工作。</li>
    2057. 

  2057. <li>编码时，我们就需要不断地查看、添加测试等等。</li>
    2058. 

  2058. <li>完成一个个功能的时候，我们就会得到一个子模块。</li>
    2059. 

  2059. <li>依据一个个子模块，我们就可以得到我们的博客系统。</li>
    2060. 

  2060. </ol>
    2061. 

  2061. <p>与我们日常开发一致的是：我们需要去划分任务的优先级。换句话来说，我们需要先实现我们的核心功能。</p>
    2062. 

  2062. <p>对于我们的博客系统来说，最主要的功能就是发博客、展示博客。往简单地说，一篇博客应该有这么基础的四部分：</p>
    2063. 

  2063. <ol type="1">
    2064. 

  2064. <li>标题</li>
    2065. 

  2065. <li>内容</li>
    2066. 

  2066. <li>作者</li>
    2067. 

  2067. <li>时间</li>
    2068. 

  2068. <li>Slug</li>
    2069. 

  2069. </ol>
    2070. 

  2070. <p>然后，我们就需要创建相应的 Model，根据这个 Model，我们就可以创建相应的控制器代码。再配置下路由，添加下页面。对于有些系统来说，我们就可以完成博客系统的展示了。</p>
    2071. 

  2071. <h2 id="写代码只是在码字">写代码只是在码字</h2>
    2072. 

  2072. <p>编程这件事情实际上一点儿也不难，当我们只是在使用一个工具创造一些东西的时候，比如我们拿着电烙铁、芯片、电线等去焊一个电路板的时候，我们学的是如何运用这些工具。虽然最后我们的电路板可以实现相同的功能，但是我们可以一眼看到差距所在。</p>
    2073. 

  2073. <p>换个贴切一点的比喻，比如烧菜做饭，对于一个优秀的厨师和一个像我这样的门外汉而言，就算给我们相同的食材、厨具，一段时间后也许一份是诱人的美食，一份只能喂猪了——即使我模仿着厨师的步骤一步步地来，也许看上去会差不多，但是一吃便吃出差距了。</p>
    2074. 

  2074. <p>我们还做不好饭，还焊不好电路，还写不好代码，很大程度上并不是因为我们比别人笨，而只是别人比我们做了更多。有时候一种机缘巧遇的学习或者 bug 的出现，对于不同的人的编程人生都会有不一样的影响(ps:说的好像是蝴蝶效应)。我们只是在使用工具，使用的好与坏，在某种程序上决定了我们写出来的质量。</p>
    2075. 

  2075. <p>写字便是如此，给我们同样的纸和笔(ps:减少无关因素)，不同的人写出来的字的差距很大，写得好的相比于写得不好的 ，只是因为练习得更多。而编程难道不也是如此么，最后写代码这件事就和写字一样简单了。</p>
    2076. 

  2076. <p>刚开始写字的时候，我们需要去了解一个字的笔划顺序、字体结构，而这些因素相当于语法及其结构。熟悉了之后，写代码也和写字一样是简简单单的事。</p>
    2077. 

  2077. <h4 id="学习编程只是在学造句">学习编程只是在学造句</h4>
    2078. 

  2078. <blockquote>
    2079. 

  2079. <p>?多么无聊的一个标题</p>
    2080. 

  2080. </blockquote>
    2081. 

  2081. <p><code>计算机语言同人类语言一样</code>，有时候我们也许会感慨一些计算机语言是多么地背离我们的世界，但是他们才是真正的计算机语言。</p>
    2082. 

  2082. <p>计算机语言是模仿人类的语言，从 if 到其他，而这些计算机语言又比人类语言简单。故而一开始学习语言的时候我们只是在学习造句，用一句话来概括一句代码的意思，或者可以称之为函数、方法(method)。</p>
    2083. 

  2083. <p>于是我们开始组词造句，以便最后能拼凑出一整篇文章。</p>
    2084. 

  2084. <h4 id="编程是在写作">编程是在写作</h4>
    2085. 

  2085. <blockquote>
    2086. 

  2086. <p>?编程是在写作，这是一个怎样的玩笑?这是在讽刺那些写不好代码，又写不好文章的么</p>
    2087. 

  2087. </blockquote>
    2088. 

  2088. <p>代码如诗，又或者代码如散文。总的来说，这是相对于英语而言，对于中文而言可不是如此。<strong>如果用一种所谓的中文语言写出来的代码，不能像中文诗一样，那么它就算不上是一种真正的中文语言。</strong></p>
    2089. 

  2089. <p>那些所谓的写作逻辑对编程的影响</p>
    2090. 

  2090. <ul>
    2091. 

  2091. <li>早期的代码是以行数算的，文章是以字数算的</li>
    2092. 

  2092. <li>代码是写给人看的，文章也是写给人看的</li>
    2093. 

  2093. <li>编程同写作一样，都由想法开始</li>
    2094. 

  2094. <li>代码同文章一样都可以堆砌出来(ps:如本文)</li>
    2095. 

  2095. <li>写出好的文章不容易，需要反复琢磨，写出好的代码不也是如此么</li>
    2096. 

  2096. <li>构造一个类，好比是构造一个人物的性格特点，多一点不行，少一点又不全</li>
    2097. 

  2097. <li>代码生成，和生成诗一样，没有情感，过于机械化</li>
    2098. 

  2098. <li>。。。</li>
    2099. 

  2099. </ul>
    2100. 

  2100. <p>然而好的作家和一般的写作者，区别总是很大，对同一个问题的思考程度也是不同的。从一个作者到一个作家的过程，是一个不断写作不断积累的过程。而从一个普通的程序员到一个优秀的程序员也是如此，需要一个不断编程的过程。</p>
    2101. 

  2101. <p>当我们开始真正去编程的时候，我们还会纠结于“<strong>僧推月下门</strong>”还是“<strong>僧敲月下门</strong>”的时候，当我们越来越熟练就容易决定究竟用哪一个。而这样的“推敲”，无论在写作中还是在编程中都是相似的过程。</p>
    2102. 

  2102. <blockquote>
    2103. 

  2103. <p>写作的过程真的就是一次探索之旅，而且它会贯穿人的一生。</p>
    2104. 

  2104. </blockquote>
    2105. 

  2105. <p>因此：</p>
    2106. 

  2106. <blockquote>
    2107. 

  2107. <p>编程只是在码字，难道不是么？</p>
    2108. 

  2108. </blockquote>
    2109. 

  2109. <p>真正的想法都在脑子里，而不在纸上，或者 IDE 里。</p>
    2110. 

  2110. <h2 id="内置索引与外置引擎">内置索引与外置引擎</h2>
    2111. 

  2111. <h3 id="门户网站">门户网站</h3>
    2112. 

  2112. <p>让我们先来看看门户网站。</p>
    2113. 

  2113. <p>百科上说：</p>
    2114. 

  2114. <blockquote>
    2115. 

  2115. <p>门户网站（英语：Web portal，又称入口网站，入门网站）指的是将不同来源的信息以一种整齐划一的形式整理、储存并呈现的网站</p>
    2116. 

  2116. </blockquote>
    2117. 

  2117. <p>从某种意义上来说门户网站更适合那些什么都不知道，从头开始探索互联网的人。换句话说，这有点于类似我们在学第一门计算机语言——我们不需要去寻找什么，我们也不知道一些复杂的概念。</p>
    2118. 

  2118. <p>这时候我们只能随便的看一本别人推荐的书籍，读一读别人写的笔记，开始一点点构建我们的知识体系。</p>
    2119. 

  2119. <p>而在我们学习第二门计算机语言的时候，我们有了更多的诀窍——我们知道怎么去搜索。在我们的知识体系里，我们知道如何去搜索，这时我们就可以通过搜索引擎来学习。</p>
    2120. 

  2120. <p>百科上大致将搜索引擎分成了四部分：搜索器、索引器、检索器、用户接口。</p>
    2121. 

  2121. <ol type="1">
    2122. 

  2122. <li>搜索器：其功能是在互联网中漫游，发现和搜集信息。</li>
    2123. 

  2123. <li>索引器：其功能是理解搜索器所搜索到的信息，从中抽取出索引项，用于表示文档以及生成文档库的索引表。</li>
    2124. 

  2124. <li>检索器：其功能是根据用户的查询在索引库中快速检索文档，进行相关度评价，对将要输出的结果排序，并能按用户的查询需求合理反馈信息。</li>
    2125. 

  2125. <li>用户接口：其作用是接纳用户查询、显示查询结果、提供个性化查询项。</li>
    2126. 

  2126. </ol>
    2127. 

  2127. <p>我想这部分大家都是有点印象的就不多介绍了(即：Ctrl + C, Ctrl + V)。</p>
    2128. 

  2128. <p>对于一个新手来说，使用搜索引擎的最大障碍就是——你知道问题，但是你不知道怎么搜索。这也是为什么，你会在那么多的博客、问答里，看到如何使用搜索引擎。</p>
    2129. 

  2129. <p>但是这并不能解决根本性问题——你需要知道你的问题是什么。顺便，推荐一本书叫做《你的灯亮着吗？》</p>
    2130. 

  2130. <h3 id="内置索引与外置引擎-1">内置索引与外置引擎</h3>
    2131. 

  2131. <p>(ps: 为了和搜索引擎对应起来，这里就将内置门户改成内置索引。)</p>
    2132. 

  2132. <p>所以，再仔细回到上面的问题里。要成为一名可以完成任务的程序员，你就需要不断地构建你的门户网站。我们要学习 Web 开发，我们就需要对整个知识体系有一个好的理解。不断理解的过程中，我们就不断也添加了新的文档，构建新的索引。每遇到一个新的知识点，我们就开始重新生成新的索引。</p>
    2133. 

  2133. <p>然后又会引入一个问题：</p>
    2134. 

  2134. <blockquote>
    2135. 

  2135. <p>人的大脑如同一间空空的阁楼，要有选择地把一些家具装进去。</p>
    2136. 

  2136. </blockquote>
    2137. 

  2137. <p>我们需要不断地整理一些新的技术，并且想方设法地忘记旧的知识。</p>
    2138. 

  2138. <p>有时，不得不说笔记和博客是这样一个很好的载体。在未来的某一天，我们可以重新挖掘这些技术，识别技术的旧有缺陷，发展出新的技术——水能载舟，亦能覆舟。</p>
    2139. 

  2139. <h2 id="如何编写测试">如何编写测试</h2>
    2140. 

  2140. <p>写测试相比于写代码来说算是一件简单的事。多数时候，我们并不需要考虑复杂的逻辑。我们只需要按照我们的代码逻辑，对代码的行为进行覆盖。</p>
    2141. 

  2141. <p>需要注意的是——在不同的团队、工作流里，测试可能是会有不同的工作流程：</p>
    2142. 

  2142. <ul>
    2143. 

  2143. <li>开发人员写单元测试、集成测试等等</li>
    2144. 

  2144. <li>测试团队通过界面来做黑盒测试</li>
    2145. 

  2145. <li>测试人员手动测试来测试功能</li>
    2146. 

  2146. </ul>
    2147. 

  2147. <p>在允许的情况下，测试应该由开发人员来编写，并且是由底层开始写测试。为了更好地去测试代码，我们需要了解测试金字塔。</p>
    2148. 

  2148. <h3 id="测试金字塔">测试金字塔</h3>
    2149. 

  2149. <p>测试金字塔是由 Mike Cohn 提出的，主要观点是：底层单元测试应多于依赖 GUI 的高层端到端测试。其结构图如下所示：</p>
    2150. 

  2150. <figure>
    2151. 

  2151. <img src="assets/article/chapter3/test-pyramid.png" alt="测试金字塔" /><figcaption>测试金字塔</figcaption>
    2152. 

  2152. </figure>
    2153. 

  2153. <p>从结构上来说，上面的金字塔可以分成三部分：</p>
    2154. 

  2154. <ol type="1">
    2155. 

  2155. <li>单元测试。</li>
    2156. 

  2156. <li>服务测试</li>
    2157. 

  2157. <li>UI 测试</li>
    2158. 

  2158. </ol>
    2159. 

  2159. <p>从图中我们可以发现：单元测试应该要是最多的，也是最底层的。其次才是服务测试，最后才是 UI 测试。大量的单元测试可以保证我们的基础函数是正常、正确工作的。而服务测试则是一门很有学问的测试，不仅仅只在测试我们自己提供的服务，也会测试我们依赖第三方提供的服务。在测试第三方提供的服务时，这就会变成一件有意思的事了。除此还有对功能和 UI 的测试，写这些测试可以减轻测试人员的工作量——毕竟这些工作量转向了开发人员来完成。</p>
    2160. 

  2160. <h4 id="单元测试">单元测试</h4>
    2161. 

  2161. <p>单元测试是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。它是应用的最小可测试部件。举个例子来说，下面是一个JavaScript 的函数，用于判断一个变量是否是一个对象：</p>
    2162. 

  2162. <pre><code>var isObject = function (obj) {
    2163. 

  2163.     var type = typeof obj;
    2164. 

  2164.     return type === &#39;function&#39; || type === &#39;object&#39; &amp;&amp; !!obj;
    2165. 

  2165. };</code></pre>
    2166. 

  2166. <p>这是一个很简单的功能，对应的我们会有一个简单的 Jasmine 测试来保证这个函数是正常工作的：</p>
    2167. 

  2167. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="at">it</span>(<span class="st">&quot;should be a object&quot;</span><span class="op">,</span> <span class="kw">function</span> () <span class="op">{</span>
    2168. 

  2168.     <span class="at">expect</span>(<span class="va">l</span>.<span class="at">isObject</span>([])).<span class="at">toEqual</span>(<span class="kw">true</span>)<span class="op">;</span>
    2169. 

  2169.     <span class="at">expect</span>(<span class="va">l</span>.<span class="at">isObject</span>([<span class="op">{}</span>])).<span class="at">toEqual</span>(<span class="kw">true</span>)<span class="op">;</span>
    2170. 

  2170. <span class="op">}</span>)<span class="op">;</span></code></pre></div>
    2171. 

  2171. <p>虽然这个测试看上去很简单，但是大量的基本的单元测试可以保证我们调用的函数都是可以正常工作的。这也相当于是我们在建设金字塔时用的石块——如果我们的石块都是经常测试的，那么我们就不怕金字塔因为石块的损坏而坍塌。</p>
    2172. 

  2172. <p>当单元测试达到一定的覆盖率，我们的代码就会变得更健壮。因为我们都需要保证我们的代码都是可测的，也意味着我们代码间的耦合度会降低。我们需要去考虑代码的长度，越长的代码在测试的时间会变得越困难。这也就是为什么 TDD 会促使我们写出短的代码。如果我们的代码都是有测试的，单元测试可以帮助我们在未来重构我们的代码。</p>
    2173. 

  2173. <p>并且在很多没有文档或者文档不完整的开源项目中，了解这个项目某个函数的用法就是查看他的测试用例。测试用例（Test Case）是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，以便测试某个程序路径或核实是否满足某个特定需求。这些测试用例可以让我们直观地理解程序程序的 API。</p>
    2174. 

  2174. <h4 id="服务测试">服务测试</h4>
    2175. 

  2175. <p>服务测试顾名思义便是对服务进行测试，而服务可以是有不同的类型，不同层次的测试。如第三方的 API 服务、我们程序提供的服务，虽然他们他应该在这一个层级上进行测试，但是对他们的测试会稍有不同。</p>
    2176. 

  2176. <p>对于第三方的提供的 API 服务或者其他类似的服务，在这一个层级的测试，我们都不会真实地去测试他们能不能工作——这些依赖性的服务只会在功能测试上进行测试。在这里的测试，我们只会保证我们的功能代码是可以正常工作的，所以我们会使用一些虚假的 API 测试数据来进行测试。这一类提供 API 的 Mock Server 可以模拟被测系统外部依赖模块行为的通用服务。我们只要保证我们的功能代码是正常工作的，那么依赖他的服务也会是正常工作的。</p>
    2177. 

  2177. <figure>
    2178. 

  2178. <img src="assets/article/chapter3/mock-server.png" alt="Mock Server" /><figcaption>Mock Server</figcaption>
    2179. 

  2179. </figure>
    2180. 

  2180. <p>而对于我们提供的服务来说，这一类的服务不一定是 API 的服务，还有可能是多个函数组成的功能性服务。当我们在测试这些服务的时候，实际上是在测试这个函数结合在一起是不是正常的。</p>
    2181. 

  2181. <p>一个服务可能依赖于多个函数，因而我们会发现服务测试的数量是少于单元测试的。</p>
    2182. 

  2182. <h4 id="ui-测试">UI 测试</h4>
    2183. 

  2183. <p>在传统的软件开发中，UI 测试多数是由人手动来完成的。而在稍后的章节里，你将会看到这些工作是可以由机器自己来完成的——当然，前提是我们要编写这些自动化测试的代码。需要注意的是 UI 测试并不能完全替代手工的工作，一些测试还是应该由人来进行测试——如对 UI 的布局，在现阶段机器还没有审美意识呢。</p>
    2184. 

  2184. <p>自动化 UI 测试是一个缓慢的过程，在这个过程里我们需要做这么几件事：</p>
    2185. 

  2185. <ol type="1">
    2186. 

  2186. <li>运行起我们的网站——这可能需要几分钟。</li>
    2187. 

  2187. <li>添加一些 Mock 的数据，以使网站看上去正常——这也需要几分钟到几十分钟的时间。</li>
    2188. 

  2188. <li>开始运行测试——在一些依赖于网络的测试中，运行完一个测试可能会需要几分钟。尽管可以并行运行测试，但是一个测试几分钟算到最后就会累积成很长的时间。</li>
    2189. 

  2189. </ol>
    2190. 

  2190. <p>所以，你会发现这是一个很长的测试过程。尽可能地将这个层级的测试往下层级移，就会尽可能的节省时间。一个 UI 测试需要几分钟，但是一个单元测试可能不到1秒。这就意味着，这样的测试下移可以节省上百个数量级的时间。</p>
    2191. 

  2191. <h3 id="如何测试">如何测试</h3>
    2192. 

  2192. <p>现在问题来了，我们应该怎么去写测试？换句话来说，我要测什么？这是一个很难的问题，这足够可以以一本书的幅度来说明这个问题。这个问题也需要依赖于不同的实践，不同的时候我们可能对问题的看法都有不同。</p>
    2193. 

  2193. <p>编写测试的过程大致可以分成下面的几个步骤：</p>
    2194. 

  2194. <ol type="1">
    2195. 

  2195. <li>了解测试目的(Why)？即我们需要测什么，我们是为了什么而编写的测试。</li>
    2196. 

  2196. <li>我们要测哪些内容(What)？即测试点，我们即要从功能点上出发来寻找需要我们测试的点，在不同的条件下这个测试点是不一样的。</li>
    2197. 

  2197. <li>我们要如何进行测试(How)？我们要使用怎么样的方法进行测试？</li>
    2198. 

  2198. </ol>
    2199. 

  2199. <h4 id="测试目的">测试目的</h4>
    2200. 

  2200. <p>我们在上面提到过的测试金字塔，也表明了我们在每个层级要测试的目的是不一样的。</p>
    2201. 

  2201. <p>在单元测试这一层级，因为我们所测试的是每一个函数，这些函数没有办法构成完整的功能。这时候我们就只是用于简简单单的测试函数本身的功能，没有太多的业务需求。</p>
    2202. 

  2202. <p>而对于服务这一层级，我们所要测试的就是一个完整的功能。对于以 API 为主的项目来说，实际上就是在测返回结果是否是正确的。</p>
    2203. 

  2203. <p>最后 UI 这一层级，我们所需要测试的就是一个完整的功能。用户操作的时候应该是怎样的，那么我们就应该模仿用户的行为来测试。这是一个完整的业务需求，也可以称之为验证测试。</p>
    2204. 

  2204. <h4 id="测试点">测试点</h4>
    2205. 

  2205. <p>在了解完我们要测试的目的之后，我们要测试的点也变得很清晰。即在单元测试测试我们的函数的功能，在我们的服务测试我们的服务，在我们的 UI测试测试业务。</p>
    2206. 

  2206. <p>而这些都理想的情况，当系统由于业务的原因不得不耦合的时候。究竟是单元测试还是功能测试，这是一个特别值得思考的问题。如果一个功能既可以在单元测试里测，又可以在服务测试里测，那么我们要测试哪一个？或者说我们应该把两个都测一遍？而如果是花费时间更长的 UI 测试呢？这样做是不是会变得不划算。</p>
    2207. 

  2207. <h4 id="如何写测试代码">如何写测试代码</h4>
    2208. 

  2208. <p>先让来们来简单地看一下测试用例，然后再让我们看看一般情况下我们是如何写测试代码的。下面的代码是一个用Python写的测试用例：</p>
    2209. 

  2209. <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="kw">class</span> HomepageTestCase(LiveServerTestCase):
    2210. 

  2210.     <span class="kw">def</span> setUp(<span class="va">self</span>):
    2211. 

  2211.         <span class="va">self</span>.selenium <span class="op">=</span> webdriver.Firefox()
    2212. 

  2212.         <span class="va">self</span>.selenium.maximize_window()
    2213. 

  2213.         <span class="bu">super</span>(HomepageTestCase, <span class="va">self</span>).setUp()
    2214. 

  2214. 

  2215.     <span class="kw">def</span> tearDown(<span class="va">self</span>):
    2216. 

  2216.         <span class="va">self</span>.selenium.quit()
    2217. 

  2217.         <span class="bu">super</span>(HomepageTestCase, <span class="va">self</span>).tearDown()
    2218. 

  2218. 

  2219.     <span class="kw">def</span> test_can_visit_homepage(<span class="va">self</span>):
    2220. 

  2220.         <span class="va">self</span>.selenium.get(
    2221. 

  2221.             <span class="st">&#39;</span><span class="sc">%s%s</span><span class="st">&#39;</span> <span class="op">%</span> (<span class="va">self</span>.live_server_url,  <span class="st">&quot;/&quot;</span>)
    2222. 

  2222.         )
    2223. 

  2223. 

  2224.         <span class="va">self</span>.assertIn(<span class="st">&quot;Welcome to my blog&quot;</span>, <span class="va">self</span>.selenium.title)</code></pre></div>
    2225. 

  2225. <p>在上面的代码里主要有三个方法，setUp()、tearDown()和 test_can_visit_homepage()。在这三个方法中起主要作用的是 test_can_visit_homepage()方法。而 setUp() 和 tearDown() 是特殊的方法，分别在测试方法开始之前运行和之后运行。同时，在这里我们也用这两个方法来打开和关闭浏览器。</p>
    2226. 

  2226. <p>而在我们的测试方法 test_can_visit_homepage() 里，主要有两个步骤：</p>
    2227. 

  2227. <ol type="1">
    2228. 

  2228. <li>访问首页</li>
    2229. 

  2229. <li>验证首页的标题是“Welcome to my blog”</li>
    2230. 

  2230. </ol>
    2231. 

  2231. <p>大部分的测试代码也是以如何的流程来运行着。有一点需要注意的是：一般来说函数名就表示了这个测试所要做测试的事情，如这里就是测试可以访问首页。</p>
    2232. 

  2232. <p>如上所示的测试过程称为“四阶段测试”，即这个过程分为如下的四个阶段：</p>
    2233. 

  2233. <ol type="1">
    2234. 

  2234. <li><strong>Setup</strong>。在这个阶段主要是做一些准备工作，如数据准备和初始化等等，在上面的 setup 阶段就是用 selenium 启动了一个 Firefox 浏览器，然后把窗口最大化了。</li>
    2235. 

  2235. <li><strong>Execute</strong>。在执行阶段就是做好验证结果前的工作，如我们在测试注册的时候，那么这里就是填写数据，并点击提交按钮。在上面的代码里，我们只是打开了首页。</li>
    2236. 

  2236. <li><strong>Verify</strong>。在验证阶段，我们所要做的就是验证返回的结果是否和我们预期的一致。在这里我们还是使用和单元测试一样的 assert 来做断言，通过判断这个页面的标题是“Welcome to my blog”，来说明我们现在就是在首页里。</li>
    2237. 

  2237. <li><strong>Tear Down</strong>。就是一些收尾工作啦 ，比如关闭浏览器、清除测试数据等等。</li>
    2238. 

  2238. </ol>
    2239. 

  2239. <h4 id="tips">Tips</h4>
    2240. 

  2240. <p>需要注意的几点是：</p>
    2241. 

  2241. <ol type="1">
    2242. 

  2242. <li>从运行测试速度上来看，三种测试的运行速度是呈倒金字塔结构。即，单元测试跑得最快，开发速度也越快。随后是服务测试，最后是 UI 测试。</li>
    2243. 

  2243. <li>即使现在的 UI 测试跑得非常快，但是随着时间的推移，UI 测试会越来越多。这也意味着测试来跑得越来越久，那么人们就开始不想测试了。在我们之前的项目里，运行完所有的测试大概接近一个小时，我们开始在会议会争论这些测试的必要性，也在想方设法减少这些测试。</li>
    2244. 

  2244. <li>如果一个测试可以在最底层写，那么就不要在他的上一层写了，因为他的运行速度更快。</li>
    2245. 

  2245. </ol>
    2246. 

  2246. <p>参考书籍:</p>
    2247. 

  2247. <ul>
    2248. 

  2248. <li>《优质代码——软件测试的原则、实践与模式》</li>
    2249. 

  2249. <li>《Python Web 开发： 测试驱动开发方法》</li>
    2250. 

  2250. </ul>
    2251. 

  2251. <h2 id="测试替身">测试替身</h2>
    2252. 

  2252. <p>测试替身（Test Double）是一个非常有意思的概念。</p>
    2253. 

  2253. <blockquote>
    2254. 

  2254. <p>有时候对被测系统(SUT)进行测试是很困难的，因为它依赖于其他无法在测试环境中使用的组件。这有可能是因为这些组件不可用，它们不会返回测试所需要的结果，或者执行它们会有不良副作用。在其他情况下，我们的测试策略要求对被测系统的内部行为有更多控制或更多可见性。 如果在编写测试时无法使用（或选择不使用）实际的依赖组件(DOC)，可以用测试替身来代替。测试替身不需要和真正的依赖组件有完全一样的的行为方式；他只需要提供和真正的组件同样的 API 即可，这样被测系统就会以为它是真正的组件！ ——Gerard Meszaros</p>
    2255. 

  2255. </blockquote>
    2256. 

  2256. <p>当我们遇到一些难以测试的方法、行为的时候，我们就一些特别的方式来帮助我们测试。Mock 和 Stub 就是常见的两种方式：</p>
    2257. 

  2257. <ol type="1">
    2258. 

  2258. <li>Stub 是一种状态确认，它用简单的行为来替换复杂的行为</li>
    2259. 

  2259. <li>Mock 是一种行为确认，它用于模拟其行为</li>
    2260. 

  2260. </ol>
    2261. 

  2261. <p>通俗地来说：Stub 从某种程度上来说，会返回我们一个特定的结果，用代码替换来方法；而 Mock 只是确保这个方法被调用。</p>
    2262. 

  2262. <h3 id="stub">Stub</h3>
    2263. 

  2263. <p>Stub 从字面意义上来说是存根，存根可以理解为我们保留了一些预留的结果。这个时候我们相当于构建了这样一个特殊的测试场景，用于替换诸如网络或者 IO 调度等高度不可预期的测试。如当我们需要去验证某个 API 被调用并返回了一个结果，举例在最小物联网系统设计中返回的 json，我们可以在本地构建一个</p>
    2264. 

  2264. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">[<span class="op">{</span><span class="st">&quot;id&quot;</span><span class="op">:</span><span class="dv">1</span><span class="op">,</span><span class="st">&quot;temperature&quot;</span><span class="op">:</span><span class="dv">14</span><span class="op">,</span><span class="st">&quot;sensors1&quot;</span><span class="op">:</span><span class="dv">15</span><span class="op">,</span><span class="st">&quot;sensors2&quot;</span><span class="op">:</span><span class="dv">12</span><span class="op">,</span><span class="st">&quot;led1&quot;</span><span class="op">:</span><span class="dv">1</span><span class="op">}</span>]</code></pre></div>
    2265. 

  2265. <p>的结果来当我们预期的数据，也就是所谓的存根。那么我们所要做的也就是解析 json，并返回预期的结果。当我们依赖于网络时，此时测试容易出现问题。</p>
    2266. 

  2266. <h3 id="mock">Mock</h3>
    2267. 

  2267. <p>Mock 从字面意义上来说是模仿，也就是说我们要在本地构造一个模仿的环境，而我们只需要验证我们的方法被调用了。</p>
    2268. 

  2268. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> Foo <span class="op">=</span> <span class="kw">function</span>()<span class="op">{};</span>
    2269. 

  2269. <span class="va">Foo</span>.<span class="va">prototype</span>.<span class="at">callMe</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{};</span>
    2270. 

  2270. <span class="kw">var</span> foo <span class="op">=</span> <span class="at">mock</span>( Foo )<span class="op">;</span>
    2271. 

  2271. 

  2272. <span class="va">foo</span>.<span class="at">callMe</span>()<span class="op">;</span>
    2273. 

  2273. 

  2274. <span class="at">expect</span>( <span class="va">foo</span>.<span class="at">callMe</span> ).<span class="at">toHaveBeenCalled</span>()<span class="op">;</span></code></pre></div>
    2275. 

  2275. <h2 id="测试驱动开发">测试驱动开发</h2>
    2276. 

  2276. <p>测试驱动开发是一个很“古老”的程序开发方法，然而由于国内开发流程的问题——即开发人员负责功能的测试，导致这么好的一项技术没有在国内推广。</p>
    2277. 

  2277. <h3 id="红-绿-重构">红-绿-重构</h3>
    2278. 

  2278. <p>测试驱动开发的主要过程是: 红 —&gt; 绿 -&gt; 重构</p>
    2279. 

  2279. <figure>
    2280. 

  2280. <img src="assets/article/chapter3/tdd.jpg" alt="TDD" /><figcaption>TDD</figcaption>
    2281. 

  2281. </figure>
    2282. 

  2282. <ol type="1">
    2283. 

  2283. <li>先写一个失败的单元测试。即我们并没有实现这个方法，但是已经有了这个方法的测试。</li>
    2284. 

  2284. <li>让测试通过。实现简单的代码来保证测试通过，就算我们用一些作弊的方法也是可以的。我们写的是功能代码，那么我们应该提交代码，因为我们已经实现了这个功能。</li>
    2285. 

  2285. <li>重构，并改进功能代码，让它变得更加合理。</li>
    2286. 

  2286. </ol>
    2287. 

  2287. <p>TDD 有助于我们将问题分解成更小的部分，再一点点的添加我们所需要的业务代码。随着这个过程的不断进行，我们会发现我们已经接近完成我们的功能代码了。并且到了最后，我们会发现我们的代码都会被测试到。</p>
    2288. 

  2288. <p>虽然说起来很简单，但是真正实现起来并不是那么容易。于我而言我只会在我自己造的一些轮子中使用 TDD。因为这个花费大量的时间，通常来说测试代码和功能代码的比例可能是1:1，或者是2：1等等。在自己创建的一些个人应用，如博客中，我不需要与其他人 Share 我的 Content。由于我使用的是第三方框架，框架本身的测试已经足够多，并且没有复杂的逻辑，我就没有对我的博客写测试。而在我写的一些框架里，我就会尽量保证足够高的测试覆盖率，并且在适当的时候会去 TDD。</p>
    2289. 

  2289. <p>通常来说对于单元测试我会采用 TDD 的方式来进行，但是功能测试仍会选择在最后添加进去。主要的缘由是：在写 UI 的过程中，元素会发生变化。这一点和我们在写 Unit 的时候，有很大的区别。div + class 会使得我们思考问题的方式发生变化，我们需要去点击某个元素，并观察某个元素发生的变化。而多数时候，我们很难把握好一个页面最后的样子。</p>
    2290. 

  2290. <p>不得不说明的一点是，TDD 需要你对测试比较了解后，才容易使用它。从个人的感受来说，TDD 在一开始是一件很难的事。</p>
    2291. 

  2291. <h3 id="测试先行">测试先行</h3>
    2292. 

  2292. <p>对于写测试的人来说，测试先行有点难以理解，而对于不写测试的人来说，就更难以理解。这里假定你已经开始写测试了，因为对于不写测试的人来说，写测试就是一件难以理解的事。既然我们都要写测试，那么为什么我们就不能先写测试呢？或者说为什么后写测试存在一些问题？</p>
    2293. 

  2293. <p>依据 J.Timothy King 所总结的《测试先行的12个好处》：</p>
    2294. 

  2294. <ol type="1">
    2295. 

  2295. <li>测试可证明你的代码是可以解决问题的</li>
    2296. 

  2296. <li>一面写单元测试，一面写实现代码，这样感觉更有兴趣</li>
    2297. 

  2297. <li>单元测试也可以用于演示代码</li>
    2298. 

  2298. <li>会让你在写代码之前做好计划</li>
    2299. 

  2299. <li>它降低了 Bug 修复的成本</li>
    2300. 

  2300. <li>可以得到一个底层模块的回归测试工具</li>
    2301. 

  2301. <li>可以在不改变现有功能的基础上继续改进你的设计</li>
    2302. 

  2302. <li>可以用于展示开发的进度</li>
    2303. 

  2303. <li>它真实的为程序员消除了工作上的很多障碍</li>
    2304. 

  2304. <li>单元测试也可以让你更好的设计</li>
    2305. 

  2305. <li>单元测试比代码审查的效果还要好</li>
    2306. 

  2306. <li>它比直接写代码的效率更高</li>
    2307. 

  2307. </ol>
    2308. 

  2308. <p>但是在我个人的感觉里，比较喜欢的是： <strong>写出可以测试的函数</strong>。这是一个一直困扰着我的难题，特别是当我的代码里存在很多条件的时候，在后期我编写的时候，难度越来越大。当我只有一个简单的 IF-ELSE 的时候，我的代码测试起来也很简单:</p>
    2309. 

  2309. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span> (hour <span class="op">&lt;</span> <span class="dv">18</span>) <span class="op">{</span>
    2310. 

  2310.     greeting <span class="op">=</span> <span class="st">&quot;Good day&quot;</span><span class="op">;</span>
    2311. 

  2311. <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span>
    2312. 

  2312.     greeting <span class="op">=</span> <span class="st">&quot;Good evening&quot;</span><span class="op">;</span>
    2313. 

  2313. <span class="op">}</span></code></pre></div>
    2314. 

  2314. <p>而当我有复杂的业务逻辑时，后写测试就会变成一场恶梦：</p>
    2315. 

  2315. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span> (<span class="va">EchoesWorks</span>.<span class="at">isObject</span>(words)) <span class="op">{</span>
    2316. 

  2316.     <span class="kw">var</span> nextTime <span class="op">=</span> <span class="va">that</span>.<span class="va">parser</span>.<span class="at">parseTime</span>(<span class="va">that</span>.<span class="va">data</span>.<span class="at">times</span>)[currentSlide <span class="op">+</span> <span class="dv">1</span>]<span class="op">;</span>
    2317. 

  2317.     <span class="cf">if</span> (<span class="va">that</span>.<span class="at">time</span> <span class="op">&lt;</span> nextTime <span class="op">&amp;&amp;</span> <span class="va">words</span>.<span class="at">length</span> <span class="op">&gt;</span> <span class="dv">1</span>) <span class="op">{</span>
    2318. 

  2318.         <span class="kw">var</span> length <span class="op">=</span> <span class="va">words</span>.<span class="at">length</span><span class="op">;</span>
    2319. 

  2319.         <span class="kw">var</span> currentTime <span class="op">=</span> <span class="va">that</span>.<span class="va">parser</span>.<span class="at">parseTime</span>(<span class="va">that</span>.<span class="va">data</span>.<span class="at">times</span>)[currentSlide]<span class="op">;</span>
    2320. 

  2320.         <span class="kw">var</span> time <span class="op">=</span> nextTime <span class="op">-</span> currentTime<span class="op">;</span>
    2321. 

  2321.         <span class="kw">var</span> average <span class="op">=</span> time / length <span class="op">*</span> <span class="dv">1000</span><span class="op">;</span>
    2322. 

  2322.         <span class="kw">var</span> i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span>
    2323. 

  2323.         <span class="va">document</span>.<span class="at">querySelector</span>(<span class="st">&#39;words&#39;</span>).<span class="at">innerHTML</span> <span class="op">=</span> words[i].<span class="at">word</span><span class="op">;</span>
    2324. 

  2324. 

  2325.         timerWord <span class="op">=</span> <span class="at">setInterval</span>(<span class="kw">function</span> () <span class="op">{</span>
    2326. 

  2326.             i<span class="op">++;</span>
    2327. 

  2327.             <span class="cf">if</span> (i <span class="op">-</span> <span class="dv">1</span> <span class="op">===</span> length) <span class="op">{</span>
    2328. 

  2328.                 <span class="at">clearInterval</span>(timerWord)<span class="op">;</span>
    2329. 

  2329.             <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span>
    2330. 

  2330.                 <span class="va">document</span>.<span class="at">querySelector</span>(<span class="st">&#39;words&#39;</span>).<span class="at">innerHTML</span> <span class="op">=</span> words[i].<span class="at">word</span><span class="op">;</span>
    2331. 

  2331.             <span class="op">}</span>
    2332. 

  2332.         <span class="op">},</span> average)<span class="op">;</span>
    2333. 

  2333.     <span class="op">}</span>
    2334. 

  2334.     <span class="cf">return</span> timerWord<span class="op">;</span>
    2335. 

  2335. <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span>
    2336. 

  2336.     <span class="va">document</span>.<span class="at">querySelector</span>(<span class="st">&#39;words&#39;</span>).<span class="at">innerHTML</span> <span class="op">=</span> words<span class="op">;</span>
    2337. 

  2337. <span class="op">}</span></code></pre></div>
    2338. 

  2338. <p>我们需要重新理清业务的逻辑，再依据这些逻辑来编写测试代码。而当我们已经忘记具体的业务逻辑时，我们已然无法写出测试。</p>
    2339. 

  2339. <p><strong>思考</strong></p>
    2340. 

  2340. <p>通常在我的理解下，TDD 是可有可无的。既然我知道了我要实现的大部分功能，而且我也知道如何实现。与此同时，对 Code Smell 也保持着警惕、要保证功能被测试覆盖。那么，总的来说 TDD 带来的价值并不大。</p>
    2341. 

  2341. <p>然而，在当前这种情况下，我知道我想要的功能，但是我并不理解其深层次的功能。我需要花费大量的时候来理解，它为什么是这样的，需要先有一些脚本来知道它是怎么工作的。TDD 变显得很有价值，换句话来说，在现有的情况下，TDD 对于我们不了解的一些事情，可以驱动出更多的开发。毕竟在我们完成测试脚本之后，我们也会发现这些测试脚本成为了代码的一部分。</p>
    2342. 

  2342. <p>在这种理想的情况下，我们为什么不 TDD 呢?</p>
    2343. 

  2343. <p>参考资料</p>
    2344. 

  2344. <p>J.Timothy King 《Twelve Benefits of Writing Unit Tests First》</p>
    2345. 

  2345. <h2 id="可读的代码">可读的代码</h2>
    2346. 

  2346. <p>过去，我有过在不同的场合吐槽别人的代码写得烂。而我写的仅仅是比别人好一点而已——而不是好很多。</p>
    2347. 

  2347. <p>然而这是一件很难的事，人们对于同一件事物未来的考虑都是不一样的。同样的代码在相同的情景下，不同的人会有不同的设计模式。同样的代码在不同的情景下，同样的人会有不同的设计模式。在这里，我们没有办法讨论设计模式，也不需要讨论。</p>
    2348. 

  2348. <p>我们所需要做的是，确保我们的代码易读、易测试，看上去这样就够了，然而这也是挺复杂的一件事:</p>
    2349. 

  2349. <ul>
    2350. 

  2350. <li>确保我们的变量名、函数名是易读的</li>
    2351. 

  2351. <li>没有复杂的逻辑判断</li>
    2352. 

  2352. <li>没有多层嵌套 (事不过三)</li>
    2353. 

  2353. <li>减少复杂函数的出现（如,不超过三十行）</li>
    2354. 

  2354. <li>然后，你要去测试它。这样你就知道需要什么，实际上要做到这些也不是一些难事。</li>
    2355. 

  2355. </ul>
    2356. 

  2356. <p>只是首先，我们要知道我们要自己需要这些。对于没有太多编程经验的人，建议先从两个基本点做起：</p>
    2357. 

  2357. <ul>
    2358. 

  2358. <li>命名</li>
    2359. 

  2359. <li>函数长度</li>
    2360. 

  2360. </ul>
    2361. 

  2361. <p>首先要说的就是程序员认为最难的一个话题了——命名。</p>
    2362. 

  2362. <h3 id="命名">命名</h3>
    2363. 

  2363. <p>命名是一个特别长的，也是特别忧伤的故事。我想作为一个程序员的你，也相当恐惧这件事。一个好的函数名、变量名应该包含着这个函数的信息，如这个函数是干什么的，或者这个函数是怎么来的，这个变量名存储的是什么。</p>
    2364. 

  2364. <p>正因为取名字是一件很重要的事，所以它也是一件很难的事。一个好的函数名、变量名应该能正确地表达出它的涵义。如你可以猜到下面的代码中的i是什么意思吗？</p>
    2365. 

  2365. <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python">fruits <span class="op">=</span> [<span class="st">&#39;banana&#39;</span>, <span class="st">&#39;apple&#39;</span>,  <span class="st">&#39;mango&#39;</span>]
    2366. 

  2366. <span class="cf">for</span> i <span class="kw">in</span> fruits:        <span class="co"># Second Example</span>
    2367. 

  2367.    <span class="bu">print</span> <span class="st">&#39;Current fruit :&#39;</span>, i</code></pre></div>
    2368. 

  2368. <p>那如果换成下面的代码会不会更容易阅读呢？</p>
    2369. 

  2369. <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python">fruits <span class="op">=</span> [<span class="st">&#39;banana&#39;</span>, <span class="st">&#39;apple&#39;</span>,  <span class="st">&#39;mango&#39;</span>]
    2370. 

  2370. <span class="cf">for</span> fruit <span class="kw">in</span> fruits:        <span class="co"># Second Example</span>
    2371. 

  2371.    <span class="bu">print</span> <span class="st">&#39;Current fruit :&#39;</span>, fruit</code></pre></div>
    2372. 

  2372. <p>而命令还存在于对函数的命名上，如我们可能会用 getNumber 来表示去获取一个数值，但是要知道这样的命名并不是在所有的语言中都可以这样用。如在 Java 中存在 getter 和 setter 这种模式，如下的代码所示：</p>
    2373. 

  2373. <pre><code>public String getNumber() {
    2374. 

  2374.   return number;
    2375. 

  2375. }
    2376. 

  2376. public void setNumber(String number) {
    2377. 

  2377.   this.number = number;
    2378. 

  2378. }</code></pre>
    2379. 

  2379. <p>如果我们是去取某个东西的数值，那么我们应该使用 retrieveNumber 这样的更具代表性的名字。</p>
    2380. 

  2380. <p>在《编写可读代码的艺术》也提到了这几点：</p>
    2381. 

  2381. <ol type="1">
    2382. 

  2382. <li>选择专业的词。最好是可以和业务相关的，它应该极具表现力。</li>
    2383. 

  2383. <li>避免像 tmp 和 retval 这样泛泛的名字。不得不提到的一点是，tmp 实在是一个有够烂的名字，将其变为 timeTemp 或者类似的会更直观。它只应该是名字中的一部分。</li>
    2384. 

  2384. <li>用具体的名字代替抽象的名字。</li>
    2385. 

  2385. <li>为名字赋予更多的信息。</li>
    2386. 

  2386. <li>名字应该有多长。</li>
    2387. 

  2387. <li>利用名字的格式来传递含义。</li>
    2388. 

  2388. </ol>
    2389. 

  2389. <h3 id="函数长度">函数长度</h3>
    2390. 

  2390. <blockquote>
    2391. 

  2391. <p>函数是指一段在一起的、可以做某一件事儿的程序。</p>
    2392. 

  2392. </blockquote>
    2393. 

  2393. <p>这就意味着从定义上来说，这段函数应该只做一件事——但是什么才是真正的一件事呢？实际上还是 TASKING，将一个复杂的过程一步步地分解成一个个的函数，每个函数只做他的名称对应的事。对于一个任务来说，他有一个稳定的过程，在这个过程中的每一步都可以变成一个函数。</p>
    2394. 

  2394. <p>因此，长的代码意味着一件事——这个函数可能违反了单一职责原则，即这个类做了太多的事。通常来说，一个类，只有一个引起它变化的原因。当一个类有多个职责的时候，这些代码就容易耦合到一起了。</p>
    2395. 

  2395. <p>对于函数长度的控制是为了有效控制分支深度。如果我们用一个函数来实现一个复杂的功能，那么不仅仅在我们下次阅读的时间会花费大量的时间。而且如果我们的代码没有测试的话，这些代码就会变得越来越难以理解。而在我们写这些函数的时候就没有测试，那么这个函数就会变得越来越难以测试，它们就会变成遗留代码。</p>
    2396. 

  2396. <h3 id="其他-2">其他</h3>
    2397. 

  2397. <p>虽然只想介绍上面的简单的两点，但是顺便在这里也提一下重复代码~~。</p>
    2398. 

  2398. <h4 id="重复代码">重复代码</h4>
    2399. 

  2399. <p>在《重构》一书中首先提到的 Code Smell 就是重复代码（Duplicate Code）。重复代码看上去并不会影响我们的阅读体验，但是实际上会发生这样的事——重复的代码阅读体验越不好。</p>
    2400. 

  2400. <p>DRY(Don’t Repeat Yourself)原则是特别值得玩味的。当我们不断地偏执的去减少重复代码的时候，会导致复杂度越来越高。在适当的时候，由于业务发生变更，我们还需要去拆解这些不重复的代码。</p>
    2401. 

  2401. <h2 id="代码重构">代码重构</h2>
    2402. 

  2402. <blockquote>
    2403. 

  2403. <p>重构，一言以蔽之，就是在不改变外部行为的前提下，有条不紊地改善代码。</p>
    2404. 

  2404. </blockquote>
    2405. 

  2405. <p>代码重构（英语：Code refactoring）指对软件代码做任何更动以增加可读性或者简化结构而不影响输出结果。在经历了一年多的工作之后，我平时的主要工作就是修 Bug。刚开始的时候觉得无聊，后来才发现修 Bug 需要更好的技术。有时候你可能要面对着一坨一坨的代码，有时候你可能要花几天的时间去阅读代码。而，你重写那几十行代码可能只会花上你不到一天的时间。但是如果你没办法理解当时为什么这么做，你的修改只会带来更多的 Bug。修 Bug，更多的是维护代码。还是前人总结的那句话对:</p>
    2406. 

  2406. <blockquote>
    2407. 

  2407. <p>写代码容易，读代码难。</p>
    2408. 

  2408. </blockquote>
    2409. 

  2409. <p>假设我们写这些代码只要半天，而别人读起来要一天。为什么不试着用一天的时间去写这些代码，让别人花半天或者更少的时间来理解。</p>
    2410. 

  2410. <h3 id="重命名">重命名</h3>
    2411. 

  2411. <p>在上一节中，我们提到了命名的重要性，这里首先要说到的也就是重命名<sub>~</sub>。再看看《编写可读代码的艺术》也提到了这几点：</p>
    2412. 

  2412. <ol type="1">
    2413. 

  2413. <li>选择专业的词。最好是可以和业务相关的，它应该极具表现力。</li>
    2414. 

  2414. <li>避免像 tmp 和 retval 这样泛泛的名字。不得不提到的一点是，tmp 实在是一个有够烂的名字，将其变为 timeTemp 或者类似的会更直观。它只应该是名字中的一部分。</li>
    2415. 

  2415. <li>用具体的名字代替抽象的名字。</li>
    2416. 

  2416. <li>为名字赋予更多的信息。</li>
    2417. 

  2417. <li>名字应该有多长。</li>
    2418. 

  2418. <li>利用名字的格式来传递含义。</li>
    2419. 

  2419. </ol>
    2420. 

  2420. <h3 id="提取变量">提取变量</h3>
    2421. 

  2421. <p>先让我们来看看一个简单的情况：</p>
    2422. 

  2422. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span> (<span class="va">$scope</span>.<span class="va">goodSkills</span>.<span class="at">indexOf</span>(<span class="st">&#39;analytics&#39;</span>) <span class="op">!==</span> <span class="op">-</span><span class="dv">1</span>) <span class="op">{</span>
    2423. 

  2423.   <span class="va">skills</span>.<span class="at">analytics</span> <span class="op">=</span> <span class="dv">5</span><span class="op">;</span>
    2424. 

  2424. <span class="op">}</span></code></pre></div>
    2425. 

  2425. <p>在上面的代码里比较难以看懂的就是数字5，这时候你会怎么做？写一行注释？这里的5就是一个 Magic Number。</p>
    2426. 

  2426. <p>而实际上，最简单有效的办法就是把5提取成一个变量：</p>
    2427. 

  2427. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> LEVEL_FIVE <span class="op">=</span> <span class="dv">5</span><span class="op">;</span>
    2428. 

  2428. <span class="cf">if</span> (<span class="va">$scope</span>.<span class="va">goodSkills</span>.<span class="at">indexOf</span>(<span class="st">&#39;analytics&#39;</span>) <span class="op">!==</span> <span class="op">-</span><span class="dv">1</span>) <span class="op">{</span>
    2429. 

  2429.   <span class="va">skills</span>.<span class="at">analytics</span> <span class="op">=</span> LEVEL_FIVE<span class="op">;</span>
    2430. 

  2430. <span class="op">}</span></code></pre></div>
    2431. 

  2431. <h3 id="提炼函数">提炼函数</h3>
    2432. 

  2432. <p>这个简单有效的方法就是为了对付之前太长的函数，抽取提炼函数出应该抽取出来的部分成为一个新的函数。引自《重构》一书的说法，短的精巧的函数有以下的特点：</p>
    2433. 

  2433. <ol type="1">
    2434. 

  2434. <li>如果每个函数的粒度都很小，那么函数被复用的机会就更大；</li>
    2435. 

  2435. <li>是这会让高层函数读起来就像一系列注释一样，容易理解；</li>
    2436. 

  2436. <li>是如果函数都是细粒度，那么函数的复写也会更加容易。</li>
    2437. 

  2437. </ol>
    2438. 

  2438. <p>在提炼函数中我们所要做的就是——判断出原有的函数的意图，再依据我们的新意图来命名新的函数。然后判断依赖——变量值，处理这些变量。提取出函数，再对其测试。</p>
    2439. 

  2439. <p>这里只简单地对重构进行一些介绍，更多详细信息请参阅《重构：改善既有代码的设计》。</p>
    2440. 

  2440. <h2 id="intellij-idea-重构">Intellij Idea 重构</h2>
    2441. 

  2441. <p>下面简单地介绍一下，一些可以直接使用 IDE 就能完成的重构。这种重构可以用在日常的工作中，只需要使用 IDE 上的快捷键就可以完成了。</p>
    2442. 

  2442. <h3 id="提炼函数-1">提炼函数</h3>
    2443. 

  2443. <p>Intellij IDEA 带了一些有意思的快捷键，或者说自己之前不在意这些快捷键的存在。重构作为单独的一个菜单，显然也突显了其功能的重要性，说说<strong>提炼函数</strong>，或者说提出方法。</p>
    2444. 

  2444. <p>快捷键</p>
    2445. 

  2445. <p>Mac: <code>alt</code>+<code>command</code>+<code>M</code></p>
    2446. 

  2446. <p>Windows/Linux: <code>Ctrl</code>+<code>Alt</code>+<code>M</code></p>
    2447. 

  2447. <p>鼠标: Refactor | Extract | Method</p>
    2448. 

  2448. <p><strong>重构之前</strong></p>
    2449. 

  2449. <p>以重构一书代码为例，重构之前的代码</p>
    2450. 

  2450. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> extract {
    2451. 

  2451.     <span class="kw">private</span> <span class="bu">String</span> _name;
    2452. 

  2452. 

  2453.     <span class="dt">void</span> <span class="fu">printOwing</span>(<span class="dt">double</span> amount){
    2454. 

  2454.         <span class="fu">printBanner</span>();
    2455. 

  2455. 

  2456.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;name:&quot;</span> + _name);
    2457. 

  2457.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;amount&quot;</span> + amount);
    2458. 

  2458.     }
    2459. 

  2459. 

  2460.     <span class="kw">private</span> <span class="dt">void</span> <span class="fu">printBanner</span>() {
    2461. 

  2461.     }
    2462. 

  2462. }</code></pre></div>
    2463. 

  2463. <p><strong>重构</strong></p>
    2464. 

  2464. <p>选中</p>
    2465. 

  2465. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;name:&quot;</span> + _name);
    2466. 

  2466. <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;amount&quot;</span> + amount);</code></pre></div>
    2467. 

  2467. <p>按下上述的快捷键，会弹出下面的对话框</p>
    2468. 

  2468. <figure>
    2469. 

  2469. <img src="assets/article/chapter3/extract-method.png" alt="Extrct Method" /><figcaption>Extrct Method</figcaption>
    2470. 

  2470. </figure>
    2471. 

  2471. <p>输入</p>
    2472. 

  2472. <pre><code> printDetails</code></pre>
    2473. 

  2473. <p>那么重构就完成了。</p>
    2474. 

  2474. <p><strong>重构之后</strong></p>
    2475. 

  2475. <p>IDE 就可以将方法提出来</p>
    2476. 

  2476. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> extract {
    2477. 

  2477.     <span class="kw">private</span> <span class="bu">String</span> _name;
    2478. 

  2478. 

  2479.     <span class="dt">void</span> <span class="fu">printOwing</span>(<span class="dt">double</span> amount){
    2480. 

  2480.         <span class="fu">printBanner</span>();
    2481. 

  2481.         <span class="fu">printDetails</span>(amount);
    2482. 

  2482.     }
    2483. 

  2483. 

  2484.     <span class="kw">private</span> <span class="dt">void</span> <span class="fu">printDetails</span>(<span class="dt">double</span> amount) {
    2485. 

  2485.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;name:&quot;</span> + _name);
    2486. 

  2486.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">&quot;amount&quot;</span> + amount);
    2487. 

  2487.     }
    2488. 

  2488. 

  2489.     <span class="kw">private</span> <span class="dt">void</span> <span class="fu">printBanner</span>() {
    2490. 

  2490.     }
    2491. 

  2491. }</code></pre></div>
    2492. 

  2492. <p><strong>重构</strong></p>
    2493. 

  2493. <p>还有一种就以 Intellij IDEA 的示例为例，这像是在说其的智能。</p>
    2494. 

  2494. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> extract {
    2495. 

  2495.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">method</span>() {
    2496. 

  2496.         <span class="dt">int</span> one = <span class="dv">1</span>;
    2497. 

  2497.         <span class="dt">int</span> two = <span class="dv">2</span>;
    2498. 

  2498.         <span class="dt">int</span> three = one + two;
    2499. 

  2499.         <span class="dt">int</span> four = one + three;
    2500. 

  2500.     }
    2501. 

  2501. }</code></pre></div>
    2502. 

  2502. <p>只是这次要选中的只有一行，</p>
    2503. 

  2503. <pre><code>int three = one + two;</code></pre>
    2504. 

  2504. <p>以便于其的智能，它便很愉快地告诉你它又找到了一个重复</p>
    2505. 

  2505. <pre><code> IDE has detected 1 code fragments in this file that can be replaced with a call to extracted method...</code></pre>
    2506. 

  2506. <p>便返回了这样一个结果</p>
    2507. 

  2507. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> extract {
    2508. 

  2508. 

  2509.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">method</span>() {
    2510. 

  2510.         <span class="dt">int</span> one = <span class="dv">1</span>;
    2511. 

  2511.         <span class="dt">int</span> two = <span class="dv">2</span>;
    2512. 

  2512.         <span class="dt">int</span> three = <span class="fu">add</span>(one, two);
    2513. 

  2513.         <span class="dt">int</span> four = <span class="fu">add</span>(one, three);
    2514. 

  2514.     }
    2515. 

  2515. 

  2516.     <span class="kw">private</span> <span class="dt">int</span> <span class="fu">add</span>(<span class="dt">int</span> one, <span class="dt">int</span> two) {
    2517. 

  2517.         <span class="kw">return</span> one + two;
    2518. 

  2518.     }
    2519. 

  2519. 

  2520. }</code></pre></div>
    2521. 

  2521. <p>然而我们就可以很愉快地继续和它玩耍了。当然这其中还会有一些更复杂的情形，当学会了这一个剩下的也不难了。</p>
    2522. 

  2522. <h3 id="内联函数">内联函数</h3>
    2523. 

  2523. <p>继续走这重构一书的复习之路，接着便是内联，除了内联变量，当然还有内联函数。</p>
    2524. 

  2524. <p>快捷键</p>
    2525. 

  2525. <p>Mac: <code>alt</code>+<code>command</code>+<code>N</code></p>
    2526. 

  2526. <p>Windows/Linux: <code>Ctrl</code>+<code>Alt</code>+<code>N</code></p>
    2527. 

  2527. <p>鼠标: Refactor | Inline</p>
    2528. 

  2528. <p><strong>重构之前</strong></p>
    2529. 

  2529. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> extract {
    2530. 

  2530. 

  2531.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">method</span>() {
    2532. 

  2532.         <span class="dt">int</span> one = <span class="dv">1</span>;
    2533. 

  2533.         <span class="dt">int</span> two = <span class="dv">2</span>;
    2534. 

  2534.         <span class="dt">int</span> three = <span class="fu">add</span>(one, two);
    2535. 

  2535.         <span class="dt">int</span> four = <span class="fu">add</span>(one, three);
    2536. 

  2536.     }
    2537. 

  2537. 

  2538.     <span class="kw">private</span> <span class="dt">int</span> <span class="fu">add</span>(<span class="dt">int</span> one, <span class="dt">int</span> two) {
    2539. 

  2539.         <span class="kw">return</span> one + two;
    2540. 

  2540.     }
    2541. 

  2541. 

  2542. }</code></pre></div>
    2543. 

  2543. <p>在<code>add(one,two)</code>很愉快地按上个快捷键吧，就会弹出</p>
    2544. 

  2544. <figure>
    2545. 

  2545. <img src="assets/article/chapter3/inline.jpg" alt="Inline Method" /><figcaption>Inline Method</figcaption>
    2546. 

  2546. </figure>
    2547. 

  2547. <p>再轻轻地回车，Refactor 就这么结束了。。</p>
    2548. 

  2548. <p><strong>Intellij Idea 内联临时变量</strong></p>
    2549. 

  2549. <p>以书中的代码为例</p>
    2550. 

  2550. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="dt">double</span> basePrice = anOrder.<span class="fu">basePrice</span>();
    2551. 

  2551. <span class="kw">return</span> (basePrice &gt; <span class="dv">1000</span>);</code></pre></div>
    2552. 

  2552. <p>同样的，按下<code>Command</code>+<code>alt</code>+<code>N</code></p>
    2553. 

  2553. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">return</span> (anOrder.<span class="fu">basePrice</span>() &gt; <span class="dv">1000</span>);</code></pre></div>
    2554. 

  2554. <p>对于 python 之类的语言也是如此</p>
    2555. 

  2555. <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="kw">def</span> inline_method():
    2556. 

  2556.     baseprice <span class="op">=</span> anOrder.basePrice()
    2557. 

  2557.     <span class="cf">return</span> baseprice <span class="op">&gt;</span> <span class="dv">1000</span></code></pre></div>
    2558. 

  2558. <h3 id="查询取代临时变量">查询取代临时变量</h3>
    2559. 

  2559. <p>快捷键</p>
    2560. 

  2560. <p>Mac: 木有</p>
    2561. 

  2561. <p>Windows/Linux: 木有</p>
    2562. 

  2562. <p>或者: <code>Shift</code>+<code>alt</code>+<code>command</code>+<code>T</code> 再选择 <code>Replace Temp with Query</code></p>
    2563. 

  2563. <p>鼠标: <strong>Refactor</strong> | <code>Replace Temp with Query</code></p>
    2564. 

  2564. <p><strong>重构之前</strong></p>
    2565. 

  2565. <p>过多的临时变量会让我们写出更长的函数，变量不应该太多，以便使功能单一。这也是重构的另外的目的所在，只有函数专注于其功能，才会更容易读懂。</p>
    2566. 

  2566. <p>以书中的代码为例</p>
    2567. 

  2567. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">import</span><span class="im"> java.lang.System;</span>
    2568. 

  2568. 

  2569. <span class="kw">public</span> <span class="kw">class</span> replaceTemp {
    2570. 

  2570.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">count</span>() {
    2571. 

  2571.         <span class="dt">double</span> basePrice = _quantity * _itemPrice;
    2572. 

  2572.         <span class="kw">if</span> (basePrice &gt; <span class="dv">1000</span>) {
    2573. 

  2573.             <span class="kw">return</span> basePrice * <span class="fl">0.95</span>;
    2574. 

  2574.         } <span class="kw">else</span> {
    2575. 

  2575.             <span class="kw">return</span> basePrice * <span class="fl">0.98</span>;
    2576. 

  2576.         }
    2577. 

  2577.     }
    2578. 

  2578. }</code></pre></div>
    2579. 

  2579. <p><strong>重构</strong></p>
    2580. 

  2580. <p>选中<code>basePrice</code>很愉快地拿鼠标点上面的重构</p>
    2581. 

  2581. <figure>
    2582. 

  2582. <img src="assets/article/chapter3/replace.jpg" alt="Replace Temp With Query" /><figcaption>Replace Temp With Query</figcaption>
    2583. 

  2583. </figure>
    2584. 

  2584. <p>便会返回</p>
    2585. 

  2585. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">import</span><span class="im"> java.lang.System;</span>
    2586. 

  2586. 

  2587. <span class="kw">public</span> <span class="kw">class</span> replaceTemp {
    2588. 

  2588.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">count</span>() {
    2589. 

  2589.         <span class="kw">if</span> (<span class="fu">basePrice</span>() &gt; <span class="dv">1000</span>) {
    2590. 

  2590.             <span class="kw">return</span> <span class="fu">basePrice</span>() * <span class="fl">0.95</span>;
    2591. 

  2591.         } <span class="kw">else</span> {
    2592. 

  2592.             <span class="kw">return</span> <span class="fu">basePrice</span>() * <span class="fl">0.98</span>;
    2593. 

  2593.         }
    2594. 

  2594.     }
    2595. 

  2595. 

  2596.     <span class="kw">private</span> <span class="dt">double</span> <span class="fu">basePrice</span>() {
    2597. 

  2597.         <span class="kw">return</span> _quantity * _itemPrice;
    2598. 

  2598.     }
    2599. 

  2599. }</code></pre></div>
    2600. 

  2600. <p>而实际上我们也可以</p>
    2601. 

  2601. <ol type="1">
    2602. 

  2602. <li><p>选中</p>
    2603. 

  2603. <pre><code>_quantity * _itemPrice</code></pre></li>
    2604. 

  2604. <li><p>对其进行<code>Extrace Method</code></p></li>
    2605. 

  2605. <li><p>选择<code>basePrice</code>再<code>Inline Method</code></p></li>
    2606. 

  2606. </ol>
    2607. 

  2607. <p>在 Intellij IDEA 的文档中对此是这样的例子</p>
    2608. 

  2608. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">public</span> <span class="kw">class</span> replaceTemp {
    2609. 

  2609. 

  2610.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">method</span>() {
    2611. 

  2611.         <span class="bu">String</span> str = <span class="st">&quot;str&quot;</span>;
    2612. 

  2612.         <span class="bu">String</span> aString = <span class="fu">returnString</span>().<span class="fu">concat</span>(str);
    2613. 

  2613.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(aString);
    2614. 

  2614.     }
    2615. 

  2615. 

  2616. }</code></pre></div>
    2617. 

  2617. <p>接着我们选中<code>aString</code>，再打开重构菜单，或者</p>
    2618. 

  2618. <p><code>Command</code>+<code>Alt</code>+<code>Shift</code>+<code>T</code> 再选中 Replace Temp with Query</p>
    2619. 

  2619. <p>便会有下面的结果:</p>
    2620. 

  2620. <div class="sourceCode"><pre class="sourceCode java"><code class="sourceCode java"><span class="kw">import</span><span class="im"> java.lang.String;</span>
    2621. 

  2621. 

  2622. <span class="kw">public</span> <span class="kw">class</span> replaceTemp {
    2623. 

  2623. 

  2624.     <span class="kw">public</span> <span class="dt">void</span> <span class="fu">method</span>() {
    2625. 

  2625.         <span class="bu">String</span> str = <span class="st">&quot;str&quot;</span>;
    2626. 

  2626.         <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="fu">aString</span>(str));
    2627. 

  2627.     }
    2628. 

  2628. 

  2629.     <span class="kw">private</span> <span class="bu">String</span> <span class="fu">aString</span>(<span class="bu">String</span> str) {
    2630. 

  2630.         <span class="kw">return</span> <span class="fu">returnString</span>().<span class="fu">concat</span>(str);
    2631. 

  2631.     }
    2632. 

  2632. 

  2633. }</code></pre></div>
    2634. 

  2634. <h2 id="重构到设计模式">重构到设计模式</h2>
    2635. 

  2635. <blockquote>
    2636. 

  2636. <p>模式和重构之间存在着天然联系，模式是你想到达的目的地，而重构则是从其他地方到达这个目的地的条条道路——Martin Fowler《重构》</p>
    2637. 

  2637. </blockquote>
    2638. 

  2638. <h3 id="过度设计与设计模式">过度设计与设计模式</h3>
    2639. 

  2639. <p>过度设计和设计模式是两个很有意思的词语，这取决于我们是不是预先式设计。通过以往的经验我们很容易看到一个环境来识别一个模式。遗憾的是使用设计模式依赖于我们整个团队的水平。对于了解设计模式的人来说，设计模式就是一种沟通语言。而对于了解一些设计模式的人来说，设计模式就是复杂的代码。</p>
    2640. 

  2640. <p>并且在软件迭代的过程中需求总是不断变化的，这就意味着我们对代码设计的越早，在后期失败的概率也就越大。设计会伴随着需求而发生变化，在当时看起来合理的设计，在后期就会因此而花费过多的代价。</p>
    2641. 

  2641. <p>而如果我们不进行一些设计，就有可能出现设计不足。这种情况可能出现于没有时间写出更好的代码的项目，在这些项目里由于一些原因出现加班等等的原因，使得我们没有办法写出更好的代码。同时，也有可能是因为参考项目的程序员在设计方面出现不足。</p>
    2642. 

  2642. <p>我们没有介绍设计模式的一个原因是——它需要有大量的编程经验，才可以让我们实现：重构到设计模式。</p>
    2643. 

  2643. <h1 id="上线">上线</h1>
    2644. 

  2644. <p>作为一个开发人员，我们也需要去了解如何配置服务器。不仅仅因为它可以帮助我们更好地理解 Web 开发，而且有时候很多 Bug 都是因为服务器环境引起的——如臭名昭著地编码问题。</p>
    2645. 

  2645. <ul>
    2646. 

  2646. <li>一些简单的 Ops 技能。</li>
    2647. 

  2647. <li>了解服务器的相关软件</li>
    2648. 

  2648. <li>搭建运行 Web 应用的服务器</li>
    2649. 

  2649. <li>自动化部署应用</li>
    2650. 

  2650. </ul>
    2651. 

  2651. <p>为了即时的完成工作，你是不是放弃了很多东西，比如质量? 测试是很重要的一个环节，不仅可以为我们保证代码的质量，而且还可以为我们以后的重构提供基础条件。</p>
    2652. 

  2652. <p>作为一个在敏捷团队里工作的开发人员，初次意识到在国内大部分的开发人员是不写测试的时候，我还是有点诧异。</p>
    2653. 

  2653. <p>尽管没有写测试可以在初期走得很快，但是在后期就会遇到一堆麻烦事。传统的思维下，我们会认为一个人会在一家公司工作很久。而这件事在最近几年里变化得特别快，特别是在信息技术高速发展的今天。人们可以从不同的地方得到哪里缺人，从一个地方到另外一个地方也变得异常的快，这就意味着人员流动是常态。</p>
    2654. 

  2654. <p>而代码尽管还在，但是却会随着人员流动而出现更多的问题。这时如果代码是有有效的测试，那么则可以帮助系统更好地被理解。</p>
    2655. 

  2655. <h2 id="隔离与运行环境">隔离与运行环境</h2>
    2656. 

  2656. <p>为了将我们的应用部署到服务器上，我们需要为其配置一个运行环境。从底层到顶层有这样的运行环境及容器：</p>
    2657. 

  2657. <ol type="1">
    2658. 

  2658. <li>隔离硬件：虚拟机</li>
    2659. 

  2659. <li>隔离操作系统：容器虚拟化</li>
    2660. 

  2660. <li>隔离底层：Servlet 容器</li>
    2661. 

  2661. <li>隔离依赖版本：虚拟环境</li>
    2662. 

  2662. <li>隔离运行环境：语言虚拟机</li>
    2663. 

  2663. <li>隔离语言：DSL</li>
    2664. 

  2664. </ol>
    2665. 

  2665. <p>实现上这是一个请求的处理过程，一个 HTTP 请求会先到达你的主机。如果你的主机上运行着多个虚拟机实例，那么请求就会来到这个虚拟机上。又或者你是在 Docker 这一类容器里运行你的程序的话，请求也会先到达 Docker。随后这个请求就会交由 HTTP 服务器来处理，如 Apache、Nginx，这些 HTTP 服务器再将这些请求交由对应的应用或脚本来处理。随后将交由语言底层的指令来处理。</p>
    2666. 

  2666. <figure>
    2667. 

  2667. <img src="assets/article/chapter4/docker-with-tomcat.png" alt="Docker Tomcat" /><figcaption>Docker Tomcat</figcaption>
    2668. 

  2668. </figure>
    2669. 

  2669. <p>不同的环境有不同的选择，当然也可以结合在一起。不过，从理论上来说在最外层还是应该有一个真机的，但是我想大家都有这个明确的概念，就不多解释了。</p>
    2670. 

  2670. <h3 id="隔离硬件虚拟机">隔离硬件：虚拟机</h3>
    2671. 

  2671. <p>在虚拟机技术出现之前，为了运行不同用户的应用程序，人们需要不同的物理机才能实现这样的需求。对于 Web 应用程序来说，有的用户的网站访问量少消耗的系统资源也少，有的用户的网站访问量大消耗的系统资源也多。虽然有不同的服务器类型可以选择，然而对于多数的访问少的用户来说他们需要支付同样的费用。这听上去相当的不合理，并且也浪费了大量的资源。并且对于系统管理员来说，管理这些系统也不是一件容易的事。在过去硬件技术革新特别快，让操作系统运行在不同的机器上也不是一件容易的事。</p>
    2672. 

  2672. <blockquote>
    2673. 

  2673. <p>虚拟机（Virtual Machine）指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。</p>
    2674. 

  2674. </blockquote>
    2675. 

  2675. <p>这是一个很有意思的技术，它可以让我们在一个主机上同时运行几个不同的操作系统。我们可以为这几个操作系统使用不同的硬件，在这之上的应用可以使用不同的技术栈来运行，并且从理论上互相不影响。其架构如下图所示：</p>
    2676. 

  2676. <figure>
    2677. 

  2677. <img src="assets/article/chapter4/virtual_machine.png" alt="虚拟机" /><figcaption>虚拟机</figcaption>
    2678. 

  2678. </figure>
    2679. 

  2679. <p>借助于虚拟机技术，当我们需要更多的资源的时候，创建一个新的虚拟机就行了。同时，由于这些虚拟机上运行的是同样的操作系统，并且可以使用相同的配置，我们只需要编写一些脚本就可以实现其自动化。当我们的物理机发生问题时，可以很快将虚拟机迁移或恢复到另外的宿主机。</p>
    2680. 

  2680. <h3 id="隔离操作系统容器虚拟化">隔离操作系统：容器虚拟化</h3>
    2681. 

  2681. <p>对于大部分开发团队来说，直接开发基于虚拟机的自动化工具不是一件容易的事，并且它从使用成本上来说比较高。这时候我们就需要一些更轻量级的工具容器——它可以提供轻量级的虚拟化，以便隔离进程和资源，而且不需要提供指令解释机制以及全虚拟化的其他复杂性。并且，它从启动速度上来说更快。</p>
    2682. 

  2682. <h4 id="lxc">LXC</h4>
    2683. 

  2683. <p>在介绍 Docker 之前，我们还是稍微提一下 LXC。因为在过去我有一些使用 LXC 的经历，让我觉得 LXC 很赞。</p>
    2684. 

  2684. <blockquote>
    2685. 

  2685. <p>LXC，其名称来自 Linux 软件容器（Linux Containers）的缩写，一种操作系统层虚拟化（Operating system–level virtualization）技术，为 Linux 内核容器功能的一个用户空间接口。它将应用软件系统打包成一个软件容器（Container），内含应用软件本身的代码，以及所需要的操作系统核心和库。通过统一的名字空间和共用 API 来分配不同软件容器的可用硬件资源，创造出应用程序的独立沙箱运行环境，使得 Linux 用户可以容易的创建和管理系统或应用容器。</p>
    2686. 

  2686. </blockquote>
    2687. 

  2687. <p>我们可以将之以上面说到的虚拟机作一个简单的对比，其架构图如下所示：</p>
    2688. 

  2688. <figure>
    2689. 

  2689. <img src="assets/article/chapter4/lxc-vm.jpg" alt="LXC vs VM" /><figcaption>LXC vs VM</figcaption>
    2690. 

  2690. </figure>
    2691. 

  2691. <p>我们会发现虚拟机中多了一层 Hypervisor——运行在物理服务器和操作系统之间，它可以让多个操作系统和应用共享一套基础物理硬件。这一层级可以协调访问服务器上的所有物理设备和虚拟机，然而由于这一层级的存在，它也将消耗更多的能量。据爱立信研究院和阿尔托大学发表的论文表示：Docker、LXC 与 Xen、KVM 在完成相同的工作时要少消耗10%的能耗。</p>
    2692. 

  2692. <p>LXC 主要是利用 cgroups 与 namespace 的功能，来向提供应用软件一个独立的操作系统运行环境。cgroups（即Control Groups）是 Linux 内核提供的一种限制、记录、隔离进程组所使用的物理资源的机制。由 namespace 来责任隔离控制。</p>
    2693. 

  2693. <p>与虚拟机相比，LXC 隔离性方面有所不足，这就意味着在实现可移植部署时会遇到一些困难。这时候，我们就需要 Docker 来提供一个抽象层，并提供一个管理机制。</p>
    2694. 

  2694. <h4 id="docker">Docker</h4>
    2695. 

  2695. <blockquote>
    2696. 

  2696. <p>Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。Docker 可以自动化打包和部署任何应用、创建一个轻量级私有 PaaS 云、搭建开发测试环境、部署可扩展的 Web 应用等。</p>
    2697. 

  2697. </blockquote>
    2698. 

  2698. <p>构建出 Docker 的 Container 是一个很有意思的过程。在这一个过程中，首先我们需要一个 base images，这个基础镜像不仅包含了一个基础系统，如 Ubuntu、Debian。他还包含了一系列的模块，如初始化进程、SSH 服务、syslog-ng 等等的一些工具。由上面原内容构建了一个基础镜像，随后的修改都将基于这个镜像，我们可以用它生成新的镜像，一层层的往上叠加。而用户的进程运行在 writeable 的 layer 中。</p>
    2699. 

  2699. <figure>
    2700. 

  2700. <img src="assets/article/chapter4/basic-images.png" alt="Docker Container" /><figcaption>Docker Container</figcaption>
    2701. 

  2701. </figure>
    2702. 

  2702. <p>从上图中我们还可以发现一点： Docker 容器是建立在 Aufs 基础上的。AUFS 是一种 Union File System，它可以把不同的目录挂载到同一个虚拟文件系统下。它的目的就是为了实现上图的增量递增的过程，同时又不会影响原有的目录。流程如下：</p>
    2703. 

  2703. <figure>
    2704. 

  2704. <img src="assets/article/chapter4/aufs_layers.jpg" alt="AUFS 层" /><figcaption>AUFS 层</figcaption>
    2705. 

  2705. </figure>
    2706. 

  2706. <p>其增量的过程和我们使用 Git 的过程中有点像，除了在最开始的时候会有一个镜像层。随后我们的修改都可以保存下来，并且当再次提交修改的时候，我们可以在旧有的提交上运行。</p>
    2707. 

  2707. <p>因此，Docker 与 LXC 的差别就如下图所示：</p>
    2708. 

  2708. <figure>
    2709. 

  2709. <img src="assets/article/chapter4/lxc-vs-docker.png" alt="LXC 与 Docker" /><figcaption>LXC 与 Docker</figcaption>
    2710. 

  2710. </figure>
    2711. 

  2711. <p>LXC 是每个虚拟机只能是一个虚拟机，而 Docker 则是一系列的虚拟机。</p>
    2712. 

  2712. <h3 id="隔离底层servlet-容器">隔离底层：Servlet 容器</h3>
    2713. 

  2713. <p>在上面的例子里我们已经隔离开了操作系统的因素，接着我们还需要解决操作系统、开发环境引起的差异。早期开发 Web 应用时，人们使用 CGI 技术，它可以让一个客户端，从网页浏览器向执行在网络服务器上的程序请求数据。并且 CGI 程序可以用任何脚本语言或者是完全独立编程语言实现，只要这个语言可以在这个系统上运行。而这样的脚本语言在多数情况下是依赖于系统环境的，特别是对于 C++ 这一类的编译型语言来说，在不同的操作系统中都需要重新编译。</p>
    2714. 

  2714. <p>而 Java 的 Servlet 则是另外一种有趣的存在，它是一种<strong>独立于平台和协议</strong>的服务器端的 Java 应用程序，可以生成动态的 Web 页面。</p>
    2715. 

  2715. <h4 id="tomcat">Tomcat</h4>
    2716. 

  2716. <p>在开发 Java Web 应用的过程中，我们在开发环境使用 Jetty 来运行我们的服务，而在生产环境使用 Tomcat 来运行。他们都是 Servlet 容器，可以运行同一个 Servlet 应用。Servlet 是指由 Java 编写的服务器端程序，它们是为响应 Web 应用程序上下文中的 HTTP 请求而设计的。它是应用服务器中位于组件和平台之间的接口集合。</p>
    2717. 

  2717. <p>Tomcat 服务器是一个免费的开源 Web 应用服务器。它运行时占用的系统资源小，扩展性好，支持负载平衡与邮件服务等开发应用系统常用的功能。除此，它还是一个 Servlet 和 JSP 容器，独立的 Servlet 容器是 Tomcat 的默认模式。其架构如下图所示：</p>
    2718. 

  2718. <figure>
    2719. 

  2719. <img src="assets/article/chapter4/tomcat-architecture.png" alt="Tomcat架构" /><figcaption>Tomcat架构</figcaption>
    2720. 

  2720. </figure>
    2721. 

  2721. <p>Servlet 被部署在应用服务器中，并由容器来控制其生命周期。在运行时由 Web 服务器软件处理一般请求，并把 Servlet 调用传递给“容器”来处理。并且 Tomcat 也会负责对一些静态资源的处理。</p>
    2722. 

  2722. <h3 id="隔离依赖版本虚拟环境">隔离依赖版本：虚拟环境</h3>
    2723. 

  2723. <p>对于 Java 这一类的编译语言来说，不存在太多语言运行带来的问题。而对于动态语言来说就存在这样的问题，如 Ruby、Python、Node.js 等等，这一个问题主要集中于开发环境。当然如果你在一个服务器上运行着几个不同的应用，也会存在这样的问题。这一类的工具在 Python 里有 VirtualEnv，在 Ruby 里有 RVM、Rbenv，在 Node.js 里有 NVM。</p>
    2724. 

  2724. <p>下图是使用 VirtualEnv 时几个不同应用的架构图：</p>
    2725. 

  2725. <figure>
    2726. 

  2726. <img src="assets/article/chapter4/virtualenv.jpg" alt="VirtualEnv" /><figcaption>VirtualEnv</figcaption>
    2727. 

  2727. </figure>
    2728. 

  2728. <p>如下所示，在不同的虚拟环境里，我们可以使用不同的依赖库。在这上面构建不同的应用，也可以使用不同的 Python 版本来构建系统。通常来说，这一类的工具主要用于本地的开发环境。</p>
    2729. 

  2729. <h3 id="隔离运行环境语言虚拟机">隔离运行环境：语言虚拟机</h3>
    2730. 

  2730. <p>最后一个要介绍的可能就是更加抽象的，但是也是更加实用的一个，JVM 就是这方面的一个代表。在我们的编程生涯里，我们很容易就会遇到跨平台问题——即我们在我们的开发机器上开发的软件，在我们的产品环境的机器上就没有办法运行。特别是当我们在使用 Mac OS 或者 Windows 机器上开发了应用，却需要在 Linux 系统上运行时，就会遇到各种问题。并且当我们使用了一个需要重新编译的库时，这种问题就更加麻烦。</p>
    2731. 

  2731. <p>如下图所示的是 JVM 的架构示意图</p>
    2732. 

  2732. <figure>
    2733. 

  2733. <img src="assets/article/chapter4/java-virtual-machine.jpg" alt="JVM" /><figcaption>JVM</figcaption>
    2734. 

  2734. </figure>
    2735. 

  2735. <p>JVM 是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。它可以实现“编写一次，到处运行”。</p>
    2736. 

  2736. <p>换句话来说，它在底层实现了环境隔离，它屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 Java 虚拟机上运行的目标代码（字节码），就可以在多种平台上不加修改地运行。</p>
    2737. 

  2737. <p>基于此，只要其他编程语言的编译器能生成正确的 Java bytecode 文件，这个语言也能在 JVM 上运行。如下图所示的是基于 JVM 的 Jython 语言的架构图：</p>
    2738. 

  2738. <figure>
    2739. 

  2739. <img src="assets/article/chapter4/jython-arch.jpg" alt="Jython" /><figcaption>Jython</figcaption>
    2740. 

  2740. </figure>
    2741. 

  2741. <p>其底层是基于 JVM，而编写时则使用 Python 语言，并且他可以使用 Java 的模块来编程。</p>
    2742. 

  2742. <p>常见拥有同样架构的工具，还有 MySQL，如下图是所示的是 MySQL 的架构图：</p>
    2743. 

  2743. <figure>
    2744. 

  2744. <img src="assets/article/chapter4/mysql-architecture.png" alt="MySQL" /><figcaption>MySQL</figcaption>
    2745. 

  2745. </figure>
    2746. 

  2746. <p>MySQL 在最顶层提供了一个名为 SQL 的查询语言，这个查询语言只能用于查询数据库，然而它却是一种更高级的用法。它不像通用目的语言那样目标范围涵盖一切软件问题，而是专门针对某一特定问题的计算机语言，即领域特定语言。</p>
    2747. 

  2747. <h3 id="隔离语言dsl">隔离语言：DSL</h3>
    2748. 

  2748. <p>这是一门特别有意思也特别值得期待的技术，但是实现它并不是一件容易的事。</p>
    2749. 

  2749. <p>作为讨论隔离环境的一部分，我们只看外部 DSL。内部 DSL 与外部 DSL 最大的区别在于：外部 DSL 近似于创建了一种新的语法和语义的全新语言。如下图所示是两中 DSL 的一种对比：</p>
    2750. 

  2750. <figure>
    2751. 

  2751. <img src="assets/article/chapter4/internal-vs-external.png" alt="内部 DSL 和外部 DSL" /><figcaption>内部 DSL 和外部 DSL</figcaption>
    2752. 

  2752. </figure>
    2753. 

  2753. <p>在这样的外部 DSL 里，我们有自己的语法、自己的解析器、类型检测器等等。最简单且最常用的 DSL 就是 Markdown，如下图所示：</p>
    2754. 

  2754. <figure>
    2755. 

  2755. <img src="assets/article/chapter4/markdown.png" alt="Markdown" /><figcaption>Markdown</figcaption>
    2756. 

  2756. </figure>
    2757. 

  2757. <p>如果我们可以将业务逻辑写成 DSL，那么我们就不需要担心底层语言的变动过多会影响原有的业务逻辑。换句话说，这相当于创建了我们自己的语言隔离环境，我们不需要思考用何种语言来实用我们的业务。</p>
    2758. 

  2758. <h2 id="lnmp-架构">LNMP 架构</h2>
    2759. 

  2759. <blockquote>
    2760. 

  2760. <p>LNMP 是一个基于 CentOS/Debian 编写的 Nginx、PHP、MySQL、phpMyAdmin、eAccelerator 一键安装包。可以在 VPS、独立主机上轻松的安装 LNMP 生产环境。</p>
    2761. 

  2761. </blockquote>
    2762. 

  2762. <p>由于在前面我们已经介绍过了数据库和编程语言，这里我们就只介绍 LN 两项</p>
    2763. 

  2763. <h3 id="gnulinux-1">GNU/Linux</h3>
    2764. 

  2764. <p>GNU 工程创始于一九八四年，旨在开发一个完整 GNU 系统。GNU这个名字是“GNU’s Not Unix!”的递归首字母缩写词。“GNU” 的发音为 g’noo，只有一个音节，发音很像 “grew”，但需要把其中的 r 音替换为 n 音。类 Unix 操作系统是由一系列应用程序、系统库和开发工具构成的 软件集合 , 并加上用于资源分配和硬件管理的内核。</p>
    2765. 

  2765. <p>Linux 是一种自由和开放源码的类 UNIX 操作系统内核。目前存在着许多不同的 Linux 发行版，可安装在各种各样的电脑硬件设备，从手机、平板电脑、路由器和影音游戏控制台，到桌上型电脑，大型电脑和超级电脑。Linux 是一个领先的操作系统内核，<strong>世界上运算最快的10台超级电脑运行的都是基于 Linux 内核的操作系统</strong>。</p>
    2766. 

  2766. <p>Linux 操作系统也是自由软件和开放源代码发展中最著名的例子。只要遵循 GNU 通用公共许可证,任何人和机构都可以自由地使用 Linux 的所有底层源代码，也可以自由地修改和再发布。<strong>严格来讲，Linux 这个词本身只表示 Linux 内核，但在实际上人们已经习惯了用 Linux 来形容整个基于 Linux 内核，并且使用 GNU 工程各种工具和数据库的操作系统（也被称为 GNU/Linux）</strong>。通常情况下，Linux 被打包成供桌上型电脑和服务器使用的 Linux 发行版本。一些流行的主流 Linux 发行版本，包括 Debian（及其衍生版本 Ubuntu），Fedora 和 openSUSE 等。 Linux 得名于电脑业余爱好者 Linus Torvalds。</p>
    2767. 

  2767. <h3 id="http-服务器">HTTP 服务器</h3>
    2768. 

  2768. <blockquote>
    2769. 

  2769. <p>Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。</p>
    2770. 

  2770. </blockquote>
    2771. 

  2771. <p>目前最主流的三个 Web 服务器是 Apache、Nginx、IIS。</p>
    2772. 

  2772. <h4 id="apache">Apache</h4>
    2773. 

  2773. <p>Apache 是世界使用排名第一的 Web 服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web 服务器端软件之一。它快速、可靠并且可通过简单的 API 扩充，将 Perl/Python 等解释器编译到服务器中。</p>
    2774. 

  2774. <h4 id="nginx">Nginx</h4>
    2775. 

  2775. <p>Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个 BSD-like 协议下发行。由俄罗斯的程序设计师 Igor Sysoev 所开发，供俄国大型的入口网站及搜索引擎 Rambler（俄文：Рамблер）使用。其特点是占有内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 Nginx 网站用户有：百度、新浪、网易、腾讯等。</p>
    2776. 

  2776. <h4 id="iis">IIS</h4>
    2777. 

  2777. <p>Internet Information Services（IIS，互联网信息服务），是由微软公司提供的基于运行 Microsoft Windows 的互联网基本服务。最初是Windows NT 版本的可选包，随后内置在 Windows 2000、Windows XP Professional 和 Windows Server 2003 一起发行，但在 Windows XP Home 版本上并没有 IIS。</p>
    2778. 

  2778. <h4 id="代理服务器">代理服务器</h4>
    2779. 

  2779. <blockquote>
    2780. 

  2780. <p>代理服务器（Proxy Server）是一种重要的服务器安全功能，它的工作主要在开放系统互联(OSI)模型的会话层，从而起到防火墙的作用。代理服务器大多被用来连接 INTERNET（国际互联网）和 Local Area Network（局域网）。</p>
    2781. 

  2781. </blockquote>
    2782. 

  2782. <h2 id="web-缓存">Web 缓存</h2>
    2783. 

  2783. <p>Web 缓存是显著提高 Web 站点的性能最有效的方法之一。主要有:</p>
    2784. 

  2784. <ul>
    2785. 

  2785. <li>数据库端缓存</li>
    2786. 

  2786. <li>应用层缓存</li>
    2787. 

  2787. <li>前端缓存</li>
    2788. 

  2788. <li>客户端缓存</li>
    2789. 

  2789. </ul>
    2790. 

  2790. <p>不同的缓存类型适用于不同的环境下使用。</p>
    2791. 

  2791. <h3 id="数据库端缓存">数据库端缓存</h3>
    2792. 

  2792. <p>这个可以用以“空间换时间”来说。比如建一个表来存储另外一个表某个类型的数据的总条数，在每次更新数据的时候同时更新数据表和统计条数的表。在需要获取某个类型的数据的条数的时候，就不需要 select count 去查询，直接查询统计表就可以了，这样可以提高查询的速度和数据库的性能。</p>
    2793. 

  2793. <h3 id="应用层缓存">应用层缓存</h3>
    2794. 

  2794. <p>应用层缓存这块跟开发人员关系最大，也是平时经常接触的。</p>
    2795. 

  2795. <ul>
    2796. 

  2796. <li>缓存数据库的查询结果，减少数据的压力。这个是大型网站必须做的。</li>
    2797. 

  2797. <li>缓存磁盘文件的数据。比如常用的数据可以放到内存，不用每次都去读取磁盘，特别是密集计算的程序，比如中文分词的词库。</li>
    2798. 

  2798. <li>缓存某个耗时的计算操作，比如数据统计。</li>
    2799. 

  2799. </ul>
    2800. 

  2800. <p>应用层缓存的架构也可以分几种：</p>
    2801. 

  2801. <ul>
    2802. 

  2802. <li>嵌入式，也就是缓存和应用在同一个机器。比如单机的文件缓存，java 中用 hashMap 来缓存数据等等。这种缓存速度快，没有网络消耗。</li>
    2803. 

  2803. <li>分布式缓存，把缓存的数据独立到不同的机器，通过网络来请求数据，比如常用的 memcache 就是这一类。</li>
    2804. 

  2804. </ul>
    2805. 

  2805. <p>分布式缓存一般可以分为几种：</p>
    2806. 

  2806. <ul>
    2807. 

  2807. <li>按应用切分数据到不同的缓存服务器，这是一种比较简单和实用的方式。</li>
    2808. 

  2808. <li>按照某种规则（hash，路由等等）把数据存储到不同的缓存服务器</li>
    2809. 

  2809. <li>代理模式，应用在获取数据的时候都由代理透明的处理，缓存机制有代理服务器来处理</li>
    2810. 

  2810. </ul>
    2811. 

  2811. <h3 id="前端缓存">前端缓存</h3>
    2812. 

  2812. <p>我们这里说的前端缓存可以理解为一般使用的 cdn 技术，利用 squid 等做前端缓冲技术，主要还是针对静态文件类型，比如图片、css、js、html 等静态文件。</p>
    2813. 

  2813. <h3 id="客户端缓存">客户端缓存</h3>
    2814. 

  2814. <p>浏览器端的缓存，可以让用户请求一次之后，下一次不在从服务器端请求数据，直接从本地缓存读取，可以减轻服务器负担也可以加快用户的访问速度。</p>
    2815. 

  2815. <h3 id="html5-离线缓存">HTML5 离线缓存</h3>
    2816. 

  2816. <p>application cahce 是将大部分图片资源、js、css 等静态资源放在 manifest 文件配置中。当页面打开时通过 manifest 文件来读取本地文件或是请求服务器文件。</p>
    2817. 

  2817. <p>离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的 Web 页面至少被在线访问过一次。</p>
    2818. 

  2818. <h2 id="可配置">可配置</h2>
    2819. 

  2819. <p>让我们写的 Web 应用可配置是一项很有挑战性，也很实用的技能。</p>
    2820. 

  2820. <p>起先，我们在本地开发的时候为本地创建了一套环境，也创建了本地的配置。接着我们需要将我们的包部署到测试环境，也生成了测试环境的相应配置。这其中如果有其他的环境，我们也需要创建相应的环境。最后，我们还需要为产品环境创建全新的配置。</p>
    2821. 

  2821. <p>下图是 Druapl 框架的部署流:</p>
    2822. 

  2822. <figure>
    2823. 

  2823. <img src="assets/article/chapter4/deployment-flow.png" alt="Drupal Deployment Flow" /><figcaption>Drupal Deployment Flow</figcaption>
    2824. 

  2824. </figure>
    2825. 

  2825. <p>在不同的环境下，他们使用不同的 Content。这些 Content 的内容不仅仅可以是一些系统相当的配置，也可以是一些不同环境下的 UI 等等。而在这其中也会涉及到一些比较复杂的知识，下面只是做一些简单的介绍。</p>
    2826. 

  2826. <h3 id="环境配置">环境配置</h3>
    2827. 

  2827. <p>最常见的例子就是我们需要在不同的环境有不同的配置。大原则就是我们不能直接使用产品的环境测试，因此我们就需要为不同的环境配置不同的数据库：</p>
    2828. 

  2828. <ul>
    2829. 

  2829. <li>开发环境。即开发者用于开发的环境，大部分的数据都是由我们自己注入的，在开发的过程中我们也会添加一些数据。</li>
    2830. 

  2830. <li>集成测试环境/测试环境。和开发环境一样，这些数据也是由我们注入的，而这些数据主要用于测试目的。当应用出现Bug时，我们可能就需要添加新的测试及其测试数据。</li>
    2831. 

  2831. <li>模拟环境（Staging)。在软件最终发布前，开发或者设计人员对软件进行调整后可以及时预览改变的测试环境，这个环境更接近于产品最终发布后的运行环境。因此，这个环境的数据一般来说就是产品环境的一些旧数据——可能是几个月前，几年前的数据。</li>
    2832. 

  2832. <li>产品环境。即线上环境，都是真实的用户数据。</li>
    2833. 

  2833. </ul>
    2834. 

  2834. <p>因此从理论上来说，我们就需要4~5个不同的数据库配置。而这些不同的数据库配置并不代表着他们使用的是相同的数据库。我们可以在本地环境使用 SQLite，而在我们的产品环境使用 MySQL。不过，最好的情况是我们应该使用同一个配置。这样当出现问题的时候，我们也很容易排查、</p>
    2835. 

  2835. <p>而除了数据库配置之外，我们还有一些其他配置。因此针对于不同的环境的配置最好独立地写在不同的文件里。并且这些配置最好可以以文件名来区分，如针对于开发环境，就是 <code>dev.config.js</code>，针对于测试环境就是 <code>test.config.js</code>。</p>
    2836. 

  2836. <p>因此，为了实现不同的环境使用不同的配置，我们就需要有一个变更控制。如果我们只有相应的配置，而没有对应的运行机制那就有问题了。</p>
    2837. 

  2837. <h3 id="运行机制">运行机制</h3>
    2838. 

  2838. <p>当我们的应用程序在服务器上运行得好好的时候，我们可能就不想因为修改配置而去重启机器，这时候我们就需要配置热加载。即我们修改配置后，不需要重启服务即可以使用新的配置。对应的还有一种，便是我们需要重启机器才能实现配置。</p>
    2839. 

  2839. <p>无论是哪种方式都需要修改配置来实现。而在我们使用的过程中热加载可能需要消耗一些系统资源，因为我们的系统需要不断地读取配置的状态并对其进行判断。并且如果我们的应用运行在多个机器上的时候，我们可能需要一个个的上支个性。而如果是冷启动的话，就可以考虑使用自动部署的方式来完成。</p>
    2840. 

  2840. <p>对应的，我们也需要在我们的代码中实现判断这些配置的逻辑。</p>
    2841. 

  2841. <h3 id="功能开关">功能开关</h3>
    2842. 

  2842. <p>当我们上线了新功能之后，这时候如果有个 Bug，那么我们是下线么？要知道这个版本里面包含了很多的 Bug 修复。如果在设计这个新功能的时候，有一个可配置的 Toogle，那么我们就不需要下线了。只需要切换这个toggle，就可以解决问题了。</p>
    2843. 

  2843. <p>对于有多套环境的开发来说，如果我们针对不同的环境都有不同的配置，那么这个灵活的开发会帮助我们更好的开发。</p>
    2844. 

  2844. <h4 id="feature-toggle">Feature Toggle</h4>
    2845. 

  2845. <p>它是一种允许控制线上功能开启或者关闭的方式，通常会采取配置文件的方式来控制。其过程如下图所示：</p>
    2846. 

  2846. <figure>
    2847. 

  2847. <img src="assets/article/chapter4/feature-toggle.png" alt="Feature Toggle" /><figcaption>Feature Toggle</figcaption>
    2848. 

  2848. </figure>
    2849. 

  2849. <p>当我们需要 A 功能的时候，我们就只需要把 A 功能的开关打开。当我们需要 B 功能，而不需要 A 功能的时候，我们就可以把相应的功能关掉。像在 Java 里的 Spring 框架，就可以用 PropertyPlaceHolder 来做相似的事。使用 bean 文件创建一个 properties</p>
    2850. 

  2850. <div class="sourceCode"><pre class="sourceCode xml"><code class="sourceCode xml"><span class="kw">&lt;util:properties</span><span class="ot"> id=</span><span class="st">&quot;myProps&quot;</span><span class="ot"> location=</span><span class="st">&quot;WEB-INF/config/prop.properties&quot;</span><span class="kw">/&gt;</span></code></pre></div>
    2851. 

  2851. <p>然后注入这个值：</p>
    2852. 

  2852. <pre><code>@Value(&quot;#{myProps[&#39;message&#39;]}&quot;)</code></pre>
    2853. 

  2853. <p>我们可以直接判断这个值是否是真，从而显示这个内容。</p>
    2854. 

  2854. <pre><code>&lt;spring:eval expression=&quot;@myProps.message&quot; var=&quot;messageToggle&quot;/&gt;
    2855. 

  2855. 

  2856. &lt;c:if test=&quot;${messageToggle eq true}&quot;&gt;
    2857. 

  2857.     message
    2858. 

  2858. &lt;/c:if&gt;</code></pre>
    2859. 

  2859. <p>这是一种很实用，而且很有趣的技术。</p>
    2860. 

  2860. <p>参考书籍：<strong>《配置管理最佳实践》</strong></p>
    2861. 

  2861. <h2 id="自动化部署">自动化部署</h2>
    2862. 

  2862. <p>优化开发流程有一个很重要的步骤就是：让部署自动化。通过部署自动化，我们可以大大缩减开发周期，加快软件交付流程。下图是一个自动化部署的流程图：</p>
    2863. 

  2863. <figure>
    2864. 

  2864. <img src="assets/article/chapter4/auto-deployment.png" alt="自动化部署" /><figcaption>自动化部署</figcaption>
    2865. 

  2865. </figure>
    2866. 

  2866. <p>从下图中我们可以得到下面的五个步骤：</p>
    2867. 

  2867. <ul>
    2868. 

  2868. <li>获取源码</li>
    2869. 

  2869. <li>获取依赖</li>
    2870. 

  2870. <li>构建软件包</li>
    2871. 

  2871. <li>生成/上传安装包</li>
    2872. 

  2872. <li>目标平台安装/配置</li>
    2873. 

  2873. </ul>
    2874. 

  2874. <p>这个过程可能和之前的 Web 项目构建过程差不多，然而却多了好几步。</p>
    2875. 

  2875. <p>在前面的章节里，我们已经使用了版本管理系统来管理我们的源码。因此，在这里对于获取源码的介绍就比较简单了——我们只需要在我们的 CI（持续集成）服务器上使用 <code>git clone</code> 这一类的方法来获取我们的源码即可。</p>
    2876. 

  2876. <h3 id="依赖与包仓库">依赖与包仓库</h3>
    2877. 

  2877. <p>获取完源码后，我们就需要开始下载软件包依赖。无论是 Python、Ruby、Java，还是 JavaScript 都需要这样的一个过程。软件开发已经从大教堂式的开发走向了集市——开源软件改变了这一切。</p>
    2878. 

  2878. <figure>
    2879. 

  2879. <img src="assets/article/chapter4/hierarchy-vs-graph.png" alt="大教堂与集市" /><figcaption>大教堂与集市</figcaption>
    2880. 

  2880. </figure>
    2881. 

  2881. <p>过去我们需要在大系统的内部构建所使用的依赖，现在我们更多地借助于外部的库来实现这些功能。这也意味着，如果在这一个节点里出现了意外——软件被删除，那么这个系统将陷入瘫痪的状态。如之前在 NPM 圈发生了“一个 17 行的模块引发的血案”——即 left-pad 工具模块被作者从 NPM 上撤下，所有直接或者间接依赖这个模块的 NPM 的软件包都挂掉了。因为我们依赖于公有的包服务，所以系统便严重依赖于外部条件。</p>
    2882. 

  2882. <p>这时候一种简单、有效的方案就是搭建自己的包服务。如使用 Java 技术栈的项目，就会使用 Nexus 搭建自己的 Maven 私有服务。我们的软件依赖包将会依赖于我们自己的服务，此时会产生的主要问题可能就是：我们的软件包不是最新的。但是对于追求稳定的项目来说，这个并不是必须的需求，反而是个优势。</p>
    2883. 

  2883. <h3 id="构建软件包">构建软件包</h3>
    2884. 

  2884. <p>在一些编译型语言里，在我们运行包测试后，将会得到一个软件包。如 Jar 包，它是 Java 所特有的一种压缩文档。Jar 包无法直接安装使用，虽然我们可以直接运行这个 Jar 包，但是我们需要通过一些手段将这个 Jar 包拷贝到我们的服务器上，然后运行。在特定的时候，我们还需要修改配置才能完成我们的工作。</p>
    2885. 

  2885. <p>因此，使用 RPM 或者 DEB 包会是一种更好的选择。RPM 全称是 Red Hat Package Manager（Red Hat包管理器），它工作于 Red Hat Linux 以及其它 Linux 和 UNIX 系统，可被任何人使用。如下图是 RPM 包的构建过程：</p>
    2886. 

  2886. <figure>
    2887. 

  2887. <img src="assets/article/chapter4/rpm-deploy.jpg" alt="RPM Build Process" /><figcaption>RPM Build Process</figcaption>
    2888. 

  2888. </figure>
    2889. 

  2889. <p>要构建一个标准的 RPM 包，我们需要创建 .spec文件，这个文件包含软件打包的全部信息——如包的 Summary、Name、Version、Copyright、Vendor 等等。在产生完这一个配置文件后，执行 rpmbuild 命令，系统会按照步骤生成目标 RPM 包。</p>
    2890. 

  2890. <h3 id="上传和安装软件包">上传和安装软件包</h3>
    2891. 

  2891. <p>生成对应的软件包后，我们就可以将其上传到 Koji 上，它是 Fedora 社区的编译系统。如下图所示：</p>
    2892. 

  2892. <figure>
    2893. 

  2893. <img src="assets/article/chapter4/rpm-koji.jpg" alt="RPM Build Process" /><figcaption>RPM Build Process</figcaption>
    2894. 

  2894. </figure>
    2895. 

  2895. <p>如果我们已经对我们的所有目标操作系统配置过，即配置好了软件源，那么我们就可以直接在我们的服务器上使用包管理工具安装，如<code>yum install</code>。</p>
    2896. 

  2896. <h1 id="数据分析">数据分析</h1>
    2897. 

  2897. <p>有时候，对于我们的决定只要有一点点的数据支持就够了。一点点的变化，可能就决定了我们产品的好坏。我们可能会因此而作出一些些改变，这些改变可能会让我们打败巨头。</p>
    2898. 

  2898. <p>这一点和 Growth 的构建过程也很相像，在最开始的时候我只是想制定一个成长路线。而后，我发现这好像是一个不错的 idea，我就开始去构建这个 idea。于是它变成了 Growth，这时候我需要依靠什么去分析用户喜欢的功能呢？我没有那么多的精力去和那么多的人沟通，也不能去和那么多的人沟通。</p>
    2899. 

  2899. <p>我只能借助 Google Analytics 来收集用户的数据。从这些数据里去学习一些东西，而这些就会变成一个新的想法。新的想法在适当的时候就会变成一个产品，接着我们就开始收集用户数据，然后循环。</p>
    2900. 

  2900. <h2 id="构建-衡量-学习">构建-衡量-学习</h2>
    2901. 

  2901. <p>构建-衡量-学习是在《精益创业》中的一个核心概念，这结合了客户开发、敏捷软件开发方法和精益生产实践。它们是非常重要的一个循环：</p>
    2902. 

  2902. <figure>
    2903. 

  2903. <img src="assets/article/chapter5/lean-analytics.png" alt="数据分析过程" /><figcaption>数据分析过程</figcaption>
    2904. 

  2904. </figure>
    2905. 

  2905. <p>这一过程不仅可以改进我们的产品，也可以用于初创企业。它并不是独立的一个环节，实现上它应该是一整个环节：我们根据我们的想法去创建产品，在使用产品的过程中收集一些数据，再依据这些数据来改进我们的产品。</p>
    2906. 

  2906. <h3 id="想法-构建">想法-构建</h3>
    2907. 

  2907. <p>想法实际上便是解决一个痛点的解决方案。如果你和我一样也经常记录自己的想法，就会发现每个月里，你总会跳出一个又一个的想法。正如，我在那篇《<a href="https://www.phodal.com/blog/use-github-manage-idea/">如何去管理你的 Idea</a>》中说的一样：</p>
    2908. 

  2908. <blockquote>
    2909. 

  2909. <p>我们经常说的是我们缺少一个 Idea。过去我也一直觉得我缺少一些 Idea，今天发现并非如此，我们只是缺少记录的手段。</p>
    2910. 

  2910. </blockquote>
    2911. 

  2911. <p>我们并不缺少 Idea，只是一直没有去记录。随着时间的增长，我发现我的 GitHub 上的 Idea 墙(<a href="https://github.com/phodal/ideas/issues">ideas</a>)一直在不断地增加。以至于，我有一个新的 Idea 就是整理这个 Idea 墙。</p>
    2912. 

  2912. <p>而作为一个程序员，我们本身就可以具备构建一个系统的能力，只是对于大多数人来说需要多加的练习。有意思的一点是，这里的构建系统与一般的构建系统有一点不太一样，我们需要快速地构建出一个 MVP 产品。MVP 简单地来说，就是最小可用的产品。如下图的右边所示：</p>
    2913. 

  2913. <figure>
    2914. 

  2914. <img src="assets/article/chapter5/mvp.png" alt="MVP" /><figcaption>MVP</figcaption>
    2915. 

  2915. </figure>
    2916. 

  2916. <p>在每一层级上都实现一定的功能，使得这个系统可用，而非构建一个非常完整的系统。随后，我们就可以寻找一些种子用户来改进我们的产品。</p>
    2917. 

  2917. <h3 id="产品-衡量">产品-衡量</h3>
    2918. 

  2918. <p>按照上面的步骤，到了这里应该就是客户开发。而如《精益客开发》一书所说，客户开发可以分成五个步骤：</p>
    2919. 

  2919. <ul>
    2920. 

  2920. <li>形成假设。即我们觉得用</li>
    2921. 

  2921. <li>找到可以交谈的潜在客户</li>
    2922. 

  2922. <li>提出恰当的问题</li>
    2923. 

  2923. <li>从答案中找到有用的信息</li>
    2924. 

  2924. <li>弄明白现阶段需要构建什么样的产品来保持下一个学习循环</li>
    2925. 

  2925. </ul>
    2926. 

  2926. <p>在整个过程中，我们其实就是在了解我们的客户是谁，以及他们的需求。并且在这个过程中，我们可以为开发确认出清晰的假设，一点点地打造出用户喜爱的产品。</p>
    2927. 

  2927. <h3 id="数据-学习">数据-学习</h3>
    2928. 

  2928. <p>当我们收集到一定的用户数据，如网站、应用的数据，就可以开始分析数据。如《精益创业》所说，在分析数据之前，我们需要确定我们的增长模型，即：</p>
    2929. 

  2929. <ul>
    2930. 

  2930. <li>黏着式增长引擎——其重点是让用户成为回头客，即让客户持续使用我们的产品。这就意味着，我们在分析数据和学习的过程中，要侧重于关注流失率和使用频率。</li>
    2931. 

  2931. <li>病毒式增长引擎——其只做一件事：让名声传播出去。即通过用户间的不断传播来扩散产品，我们需要考虑所谓的<strong>病毒式传播系数</strong>，还有用户之间的特定行为。</li>
    2932. 

  2932. <li>付费式增长引擎——赚钱与否是识别商业模式是否可持续的指标。</li>
    2933. 

  2933. </ul>
    2934. 

  2934. <p>针对不同的增长引擎有不同的学习过程，如媒体网站，我们通过不同的方式来导入流量，这些流量最终会有一些会转化成价值。这些价值会以不同的形式出现，如订阅率、在线参与度、广告营收等等。</p>
    2935. 

  2935. <p>而从这些数据中学习就需要一些特殊的技巧，详情请见下面的参考书籍。</p>
    2936. 

  2936. <p>参考书籍：</p>
    2937. 

  2937. <ul>
    2938. 

  2938. <li>《精益数据分析》</li>
    2939. 

  2939. <li>《精益客户开发》</li>
    2940. 

  2940. <li>《精益创业》</li>
    2941. 

  2941. </ul>
    2942. 

  2942. <h2 id="数据分析-1">数据分析</h2>
    2943. 

  2943. <p>数据分析是一个很有意思的过程，我们可以简单地将这个过程分成四个步骤：</p>
    2944. 

  2944. <ul>
    2945. 

  2945. <li>识别需求</li>
    2946. 

  2946. <li>收集数据</li>
    2947. 

  2947. <li>分析数据</li>
    2948. 

  2948. <li>展示数据</li>
    2949. 

  2949. </ul>
    2950. 

  2950. <p>值得注意的是：在分析数据的过程中，需要不同的人员来参与，需要跨域多个领域的知识点——分析、设计、开发、商业和研究等领域。因此，在这样的领域里，回归敏捷也是一种不错的选择（源于：《敏捷数据科学》）：</p>
    2951. 

  2951. <ul>
    2952. 

  2952. <li>通才高于专长</li>
    2953. 

  2953. <li>小团队高于大团队</li>
    2954. 

  2954. <li>使用高阶工具和平台：云计算、分布式系统、PaaS</li>
    2955. 

  2955. <li>持续、迭代地分享工作成果，即使这些工作未完成</li>
    2956. 

  2956. </ul>
    2957. 

  2957. <h3 id="识别需求">识别需求</h3>
    2958. 

  2958. <p>在我们开始分析数据之前，我们需要明确一下，我们的问题是什么？即，我们到底要干嘛，我们想要的内容是什么。</p>
    2959. 

  2959. <blockquote>
    2960. 

  2960. <p>识别信息需求是确保数据分析过程有效性的首要条件，可以为收集数据、分析数据提供清晰的目标。</p>
    2961. 

  2961. </blockquote>
    2962. 

  2962. <p>当我们想要提到我们的网站在不同地区的速度时，就需要去探索我们的用户主要是在哪些地区。即，现在这是我们的需求。我们已经有了这样的一个明确的目标，下面要做起来就很轻松了。</p>
    2963. 

  2963. <h3 id="收集数据">收集数据</h3>
    2964. 

  2964. <p>那么现在新的问题来了，我们的数据要从哪里来？</p>
    2965. 

  2965. <p>对于大部分的网站来说，都会有访问日志。但是这些访问日志只能显示某个 IP 进入了某个页面，并不能详细地介绍这个用户在这个页面待了多久，做了什么事。这时候，就需要依赖于类似 Google Analytics 这样的工具来统计网站的流量。还有类似于New Relic这样的工具来统计用户的一些行为。</p>
    2966. 

  2966. <p>在一些以科学研究为目的的数据收集中，我们可以从一些公开的数据中获取这些资料。</p>
    2967. 

  2967. <p>而在一些特殊的情况里，我们就需要通过爬虫来完成这样的工作。</p>
    2968. 

  2968. <h3 id="分析数据">分析数据</h3>
    2969. 

  2969. <p>现在，我们终于可以真正的去分析数据了——我的意思是，我们要开始写代码了。从海量的数据中过滤出我们想要的数据，并通过算法来对其进行分析。</p>
    2970. 

  2970. <p>一般来说，我们都利用现有的工具来完成大部分的工作。要使用哪一类工具，取决于我们要分析的数据的数量级了。如果只是一般的数量级，我们可以考虑用 R 语言、Python、Octave 等单机工具来完成。如果是大量的数据，那么我们就需要考虑用 Hadoop、Spark 来完成这个级别的工作。</p>
    2971. 

  2971. <p>而一般来说，这个过程可能是要经过一系列的工具才能完成。如在之前我在分析我的博客的日志时(1G左右)，我用 Hadoop + Apache Pig + Jython 来将日志中的 IP 转换为 GEO 信息，再将 GEO 信息存储到 ElasticSearch 中。随后，我们就可以用 AMap、leaflet 这一类 GEO 库将这些点放置到地图上。</p>
    2972. 

  2972. <h3 id="展示数据">展示数据</h3>
    2973. 

  2973. <p>现在，终于来到我最喜欢的环节了，也是最有意思，但是却又最难的环节。</p>
    2974. 

  2974. <p>我们过滤数据，得到想要的内容后，就要去考虑如何可视化这些数据。在我熟悉的 Web GIS领域里，我可以可视化出我过滤后的那些数据。但是对于我不熟悉的领域，要可视化这些数据不是一件容易的事。在少数情况下，可以使用现有的工具完成需求，多数情况下，我们也需要写相当的代码才能将数据最后可视化出来。</p>
    2975. 

  2975. <p>而在以什么形式来展示我们的数据时，又是一个问题。如一般的数据结果，到底是使用柱形图、条形图、折线图还是面积图？这要求我们有一些 UX 方面的经验。</p>
    2976. 

  2976. <p>参考来源: <strong>精益数据分析</strong>。</p>
    2977. 

  2977. <h2 id="用户数据分析google-analytics">用户数据分析：Google Analytics</h2>
    2978. 

  2978. <p>Google Analytics 是一个非常赞的分析工具，它不仅可以用于 Web 应用，也可以用于移动应用。</p>
    2979. 

  2979. <h3 id="受众群体">受众群体</h3>
    2980. 

  2980. <p>如下图是 Growth 应用最近两星期的数据：</p>
    2981. 

  2981. <figure>
    2982. 

  2982. <img src="assets/article/chapter5/growth-ga.png" alt="Growth GA" /><figcaption>Growth GA</figcaption>
    2983. 

  2983. </figure>
    2984. 

  2984. <p>这是 Google Analytics 中的“受众群体”的概览，在这个视图中：</p>
    2985. 

  2985. <ol type="1">
    2986. 

  2986. <li>折线图就是每天的用户数。</li>
    2987. 

  2987. <li>下面会有用户数、会话、屏幕浏览量等等的一些信息。</li>
    2988. 

  2988. <li>右角的饼图则是回访问用户和新用户的对比。</li>
    2989. 

  2989. <li>最下方便是受众的信息——国家、版本等等。</li>
    2990. 

  2990. </ol>
    2991. 

  2991. <p>从图中，我们可以读取一些重要的信息，如用户的停留时间、主要面向的用户等等。在浏览器版本会有：</p>
    2992. 

  2992. <ol type="1">
    2993. 

  2993. <li>浏览器与操作系统</li>
    2994. 

  2994. <li>移动设备</li>
    2995. 

  2995. </ol>
    2996. 

  2996. <p>这样的重要数据，如下表是我网站 20160104-20160120 的访问数据：</p>
    2997. 

  2997. <table>
    2998. 

  2998. <thead>
    2999. 

  2999. <tr class="header">
    3000. 

  3000. <th>浏览器</th>
    3001. 

  3001. <th>会话</th>
    3002. 

  3002. <th>新会话百分比</th>
    3003. 

  3003. </tr>
    3004. 

  3004. </thead>
    3005. 

  3005. <tbody>
    3006. 

  3006. <tr class="odd">
    3007. 

  3007. <td>Chrome</td>
    3008. 

  3008. <td>5048</td>
    3009. 

  3009. <td>75.99%</td>
    3010. 

  3010. </tr>
    3011. 

  3011. <tr class="even">
    3012. 

  3012. <td>Firefox</td>
    3013. 

  3013. <td>694</td>
    3014. 

  3014. <td>78.39%</td>
    3015. 

  3015. </tr>
    3016. 

  3016. <tr class="odd">
    3017. 

  3017. <td>Safari</td>
    3018. 

  3018. <td>666</td>
    3019. 

  3019. <td>78.68%</td>
    3020. 

  3020. </tr>
    3021. 

  3021. <tr class="even">
    3022. 

  3022. <td>Internet Explorer</td>
    3023. 

  3023. <td>284</td>
    3024. 

  3024. <td>87.68%</td>
    3025. 

  3025. </tr>
    3026. 

  3026. <tr class="odd">
    3027. 

  3027. <td>Safari (in-app)</td>
    3028. 

  3028. <td>92</td>
    3029. 

  3029. <td>86.96%</td>
    3030. 

  3030. </tr>
    3031. 

  3031. <tr class="even">
    3032. 

  3032. <td>Android Browser</td>
    3033. 

  3033. <td>72</td>
    3034. 

  3034. <td>87.50%</td>
    3035. 

  3035. </tr>
    3036. 

  3036. <tr class="odd">
    3037. 

  3037. <td>Edge</td>
    3038. 

  3038. <td>63</td>
    3039. 

  3039. <td>79.37%</td>
    3040. 

  3040. </tr>
    3041. 

  3041. <tr class="even">
    3042. 

  3042. <td>Maxthon</td>
    3043. 

  3043. <td>51</td>
    3044. 

  3044. <td>68.63%</td>
    3045. 

  3045. </tr>
    3046. 

  3046. <tr class="odd">
    3047. 

  3047. <td>UC Browser</td>
    3048. 

  3048. <td>41</td>
    3049. 

  3049. <td>80.49%</td>
    3050. 

  3050. </tr>
    3051. 

  3051. <tr class="even">
    3052. 

  3052. <td>Opera</td>
    3053. 

  3053. <td>34</td>
    3054. 

  3054. <td>64.71%</td>
    3055. 

  3055. </tr>
    3056. 

  3056. </tbody>
    3057. 

  3057. </table>
    3058. 

  3058. <p>可以从上表中看到访问我网站的用户中，IE 只占很小的一部分——大概4%，而 Chrome + Safari + Firefox 加起来则近90%。这也意味着，我可以完全不考虑 IE 用户的感受。</p>
    3059. 

  3059. <p>类似于这样的数据在我们决定对某个浏览器的支持情况时是非常有帮助的。也会加快开发，我们可以工作于主要的浏览器上。</p>
    3060. 

  3060. <h3 id="流量获取">流量获取</h3>
    3061. 

  3061. <p>除此，不得不说的一点就是流量获取，如下图所示是我博客的热门渠道：</p>
    3062. 

  3062. <figure>
    3063. 

  3063. <img src="assets/article/chapter5/phodal-traffic.png" alt="Phodal.com Traffic" /><figcaption>Phodal.com Traffic</figcaption>
    3064. 

  3064. </figure>
    3065. 

  3065. <p>可以直接得到一个不错的结论是我的博客的主要流量来源是搜索引擎，再细细一看数据：</p>
    3066. 

  3066. <table>
    3067. 

  3067. <thead>
    3068. 

  3068. <tr class="header">
    3069. 

  3069. <th>来源/媒介</th>
    3070. 

  3070. <th>会话</th>
    3071. 

  3071. </tr>
    3072. 

  3072. </thead>
    3073. 

  3073. <tbody>
    3074. 

  3074. <tr class="odd">
    3075. 

  3075. <td>baidu / organic</td>
    3076. 

  3076. <td>2031</td>
    3077. 

  3077. </tr>
    3078. 

  3078. <tr class="even">
    3079. 

  3079. <td>google / organic</td>
    3080. 

  3080. <td>1314</td>
    3081. 

  3081. </tr>
    3082. 

  3082. <tr class="odd">
    3083. 

  3083. <td>(direct) / (none)</td>
    3084. 

  3084. <td>1311</td>
    3085. 

  3085. </tr>
    3086. 

  3086. <tr class="even">
    3087. 

  3087. <td>bing / organic</td>
    3088. 

  3088. <td>349</td>
    3089. 

  3089. </tr>
    3090. 

  3090. <tr class="odd">
    3091. 

  3091. <td>github.com / referral</td>
    3092. 

  3092. <td>281</td>
    3093. 

  3093. </tr>
    3094. 

  3094. </tbody>
    3095. 

  3095. </table>
    3096. 

  3096. <p>主要流量来源就是 Baidu 和 Google，看来国人还是用百度比较多。那我们就可以针对 SEO 进行更多的优化：</p>
    3097. 

  3097. <ol type="1">
    3098. 

  3098. <li>加快访问速度</li>
    3099. 

  3099. <li>更表意的 URL</li>
    3100. 

  3100. <li>更好的标题</li>
    3101. 

  3101. <li>更好的内容</li>
    3102. 

  3102. </ol>
    3103. 

  3103. <p>等等等。</p>
    3104. 

  3104. <p>除此，我们可以分析用户的行为，如他们访问的主要网站、URL 等等。</p>
    3105. 

  3105. <h3 id="移动应用">移动应用</h3>
    3106. 

  3106. <p>除此，我们还可以使用它来分析移动应用，不过这受限于 Google 在国内的访问程度。如下图是 GA 收到的应用的使用数据：</p>
    3107. 

  3107. <figure>
    3108. 

  3108. <img src="assets/article/chapter5/ga-app.jpg" alt="Growth 应用数据" /><figcaption>Growth 应用数据</figcaption>
    3109. 

  3109. </figure>
    3110. 

  3110. <p>我们也可以从上面看到 APP 的安装来源等等。</p>
    3111. 

  3111. <h2 id="网站性能">网站性能</h2>
    3112. 

  3112. <p>网站性能直接影响到了网站的响应时间、吞吐量等等，也是运维、开发一系列技术的体现。</p>
    3113. 

  3113. <h3 id="网站性能监测">网站性能监测</h3>
    3114. 

  3114. <p>网站性能监测</p>
    3115. 

  3115. <blockquote>
    3116. 

  3116. <p>网站可用性是网站性能监测的重要指标之一，表示在一段时间内，网站处于“正常状态”的机率。</p>
    3117. 

  3117. </blockquote>
    3118. 

  3118. <ul>
    3119. 

  3119. <li>DNS 解析</li>
    3120. 

  3120. <li>内存、硬盘等等</li>
    3121. 

  3121. <li>网页打开速度</li>
    3122. 

  3122. </ul>
    3123. 

  3123. <h4 id="应用性能指数">应用性能指数</h4>
    3124. 

  3124. <blockquote>
    3125. 

  3125. <p>Apdex 联盟，一个由众多网络分析技术公司和测量工业组成的联盟组织，它们联合起来开发了“应用性能指数”即“Apdex”(Application Performance Index)，用一句话来概括，Apdex 是用户对应用性能满意度的量化值。它提供了一个统一的测量和报告用户体验的方法，第一次把最终用户的体验和应用性能联系在了一起。</p>
    3126. 

  3126. </blockquote>
    3127. 

  3127. <p>任务响应时间定义为：当用户操作（鼠标点击、输入、回车）开始到系统（客户机、网络、服务器）响应从而用户能继续这个过程所经过的时间。这些等待时间定义了应用程序的“响应度”。该指数是基于应用程序响应度的三个方面：</p>
    3128. 

  3128. <ul>
    3129. 

  3129. <li>满意:用户充分工作。这就是目标时间（T秒），即在此时间里用户的工作没有因应用程序的响应时间而受阻，如3秒。</li>
    3130. 

  3130. <li>容忍:用户感觉到响应滞后，响应时间大于 T，但能继续这个过程，如3～12秒。</li>
    3131. 

  3131. <li>挫折:响应时间大于 F 秒的性能是不能接受的，用户可能放弃这个过程。F 等于 T×4，在本例子中为12秒。</li>
    3132. 

  3132. </ul>
    3133. 

  3133. <h3 id="网站性能-1">网站性能</h3>
    3134. 

  3134. <p>针对网站性能优化领域，网上已经有相当多的总结，这里只罗列一些常见（我用过）的策略。</p>
    3135. 

  3135. <h5 id="减少-http-请求">减少 HTTP 请求</h5>
    3136. 

  3136. <p>从网上查找的情况分类来看，有下面的一些情况：</p>
    3137. 

  3137. <ul>
    3138. 

  3138. <li>合并 JavaScript 和 CSS。只是这种方式需要好好评估，因为合并过多的 JavaScript，可能会导致 JavaScript 文件过大。一个大的文件将增加 Load时间，导致不好的用户体验。</li>
    3139. 

  3139. <li>CSS Sprites。即将一个页面涉及到的所有零星图片都包含到一张大图中去。值得注意的是，像 Logo 这一类文件将不要加到里面去了。</li>
    3140. 

  3140. <li>拆分初始化负载。将页面加载时需要的一堆 JavaScript 文件，分成两部分：渲染页面所必需的和其他的。页面初始化时，只加载必须的，其余的等会加载。</li>
    3141. 

  3141. <li>划分主域。将资源划分的请求划分到几个不同的域上，来加速资源请求。</li>
    3142. 

  3142. </ul>
    3143. 

  3143. <p>对于我这样的懒人来说，我使用 Google 出品的 <a href="https://developers.google.com/speed/pagespeed/?hl=zh-CN">PageSpeed</a>。它主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化 css、js 以及图片的过程。它可以对 CSS 和 JavaScript 压缩、合并、级联、内联，生成一个新的 Script 和 CSS 文件 。还有图像优化：剥离元数据、动态调整，重新压缩，如针对 Chrome 浏览器生成 WebP 文件。还可以推迟图像和 JavaScript 加载。</p>
    3144. 

  3144. <h4 id="页面内部优化">页面内部优化</h4>
    3145. 

  3145. <p>HTML 页面内的优化的目的便是：<strong>尽快渲染出页面</strong>。常见的优化策略便是：</p>
    3146. 

  3146. <ul>
    3147. 

  3147. <li>将 CSS 放在顶部，即早点渲染出页面及其样式。</li>
    3148. 

  3148. <li>将 JavaScript 放在底部。如果有后台渲染机制，那么就应该将 JS 放到页面底部来加速页面加载。如果是单页面应用，那么这个 JS 就应该在页面顶部。</li>
    3149. 

  3149. <li>压缩 HTML。在我们写模板的过程中，一些判断可能会导致页面有过多的空格。压缩这些 HTML，可以稍微提高一下页面速度。</li>
    3150. 

  3150. </ul>
    3151. 

  3151. <p>这里的大部分内容都应该通过修改代码来完成。</p>
    3152. 

  3152. <h4 id="启用缓存">启用缓存</h4>
    3153. 

  3153. <p>前面的缓存一节里，我们说过了一些缓存的策略，我们再稍微提一下。</p>
    3154. 

  3154. <ul>
    3155. 

  3155. <li>后台优化，如数据库端缓存</li>
    3156. 

  3156. <li>启用页面缓存，即应用层缓存</li>
    3157. 

  3157. </ul>
    3158. 

  3158. <h4 id="减少下载量">减少下载量</h4>
    3159. 

  3159. <p>简单地来说，就是减少对服务器的请求：</p>
    3160. 

  3160. <ul>
    3161. 

  3161. <li>使用 CDN</li>
    3162. 

  3162. <li>使用外部 JavaScript 和 CSS</li>
    3163. 

  3163. <li>缓存：使用 gzip 压缩、添加 Expires 头、配置 ETag、使 AjaX 可缓存</li>
    3164. 

  3164. </ul>
    3165. 

  3165. <h4 id="网络连接上的优化">网络连接上的优化</h4>
    3166. 

  3166. <p>主要就是对域名到服务器进行优化，因此从方法上有：</p>
    3167. 

  3167. <ul>
    3168. 

  3168. <li>DNS 域名解析加速</li>
    3169. 

  3169. <li>减少 DNS 查找</li>
    3170. 

  3170. </ul>
    3171. 

  3171. <h2 id="seo">SEO</h2>
    3172. 

  3172. <blockquote>
    3173. 

  3173. <p>这是一个老的，有些过时确非常普遍，甚至每一个程序员都知道的关于搜索引擎优化的技术，所以，我只一笔带过。</p>
    3174. 

  3174. </blockquote>
    3175. 

  3175. <p><strong>搜索时发生什么了?</strong></p>
    3176. 

  3176. <ul>
    3177. 

  3177. <li>用户输入查询内容</li>
    3178. 

  3178. <li>查询处理以及分词技术</li>
    3179. 

  3179. <li>确定搜索意图及返回相关、新鲜的内容</li>
    3180. 

  3180. </ul>
    3181. 

  3181. <figure>
    3182. 

  3182. <img src="assets/article/chapter5/search-engine-arch.jpg" alt="search-engine-arch" /><figcaption>search-engine-arch</figcaption>
    3183. 

  3183. </figure>
    3184. 

  3184. <p><strong>为什么需要 SEO?</strong></p>
    3185. 

  3185. <p>这是一个有趣的问题，答案是<code>为网站带来更多的流量</code>。</p>
    3186. 

  3186. <h3 id="爬虫与索引">爬虫与索引</h3>
    3187. 

  3187. <p>我们先看看来自谷歌的爬虫工作的一点内容</p>
    3188. 

  3188. <blockquote>
    3189. 

  3189. <p>抓取是 Googlebot 发现新网页并更新这些网页以将网页添加到 Google 索引中的过程。</p>
    3190. 

  3190. </blockquote>
    3191. 

  3191. <blockquote>
    3192. 

  3192. <p>我们使用许多计算机来获取（或“抓取”）网站上的大量网页。执行获取任务的程序叫做 Googlebot（也被称为漫游器或信息采集软件）。Googlebot 使用算法来进行抓取：计算机程序会确定要抓取的网站、抓取频率以及从每个网站中获取的网页数量。</p>
    3193. 

  3193. </blockquote>
    3194. 

  3194. <blockquote>
    3195. 

  3195. <p>Google 的抓取过程是根据网页网址的列表进行的，该列表是在之前进行的抓取过程中形成的，且随着网站管理员所提供的站点地图数据不断进行扩充。Googlebot 在访问每个网站时，会检测每个网页上的链接，并将这些链接添加到它要抓取的网页列表中。新建立的网站、对现有网站所进行的更改以及无效链接都会被记录下来，并用于更新 Google 索引。</p>
    3196. 

  3196. </blockquote>
    3197. 

  3197. <p>也就是如原文所说:</p>
    3198. 

  3198. <blockquote>
    3199. 

  3199. <p>谷歌的爬虫(又或者说蜘蛛)能够抓取你整个网站索引的所有页。</p>
    3200. 

  3200. </blockquote>
    3201. 

  3201. <p><strong>为什么谷歌上可以搜索整个互联网的内容</strong>？因为，他解析并存储了。而更有意思的是，他会为同样的内容建立一个索引或者说分类，按照一定的相关性，针对于某个关键词的内容。</p>
    3202. 

  3202. <p>PageRank 对于一个网站来说是相当重要的，只是这个相比也比较复杂。包括其他网站链接向你的网站，以及流量，当然还有域名等等。</p>
    3203. 

  3203. <h3 id="什么样的网站需要-seo">什么样的网站需要 SEO？</h3>
    3204. 

  3204. <p>下图是我的博客的流量来源</p>
    3205. 

  3205. <figure>
    3206. 

  3206. <img src="assets/article/chapter5/my-website-seo.jpg" alt="What Site Need SEO" /><figcaption>What Site Need SEO</figcaption>
    3207. 

  3207. </figure>
    3208. 

  3208. <p>正常情况下除了像<code>腾讯</code>这类的<code>QQ空间</code>自我封闭的网站外都需要 SEO，或者不希望泄露一些用户隐私如<code>Facebook</code>、<code>人人</code>等等。</p>
    3209. 

  3209. <ul>
    3210. 

  3210. <li>如果你和我的网站一样需要靠搜索带来流量</li>
    3211. 

  3211. <li>如果你的网站只有很少的用户访问，却有很多的内容。</li>
    3212. 

  3212. <li>如果你的网站为一个公司、企业工作以带来业务。</li>
    3213. 

  3213. <li>。。。</li>
    3214. 

  3214. </ul>
    3215. 

  3215. <p><strong>SEO 与编程的不同之处?</strong></p>
    3216. 

  3216. <p>SEO 与编程的最大不同之处在于: <strong>编程的核心是技术，SEO 的核心是内容</strong>。</p>
    3217. 

  3217. <p>内容才是 SEO 最重要的组成部分，这也就是腾讯复制不了的东西。</p>
    3218. 

  3218. <h3 id="seo-基础知识">SEO 基础知识</h3>
    3219. 

  3219. <p><strong>确保网站是可以被索引的</strong></p>
    3220. 

  3220. <p>一些常见的页面不能被访问的原因</p>
    3221. 

  3221. <ul>
    3222. 

  3222. <li>隐藏在需要提交的表格中的链接</li>
    3223. 

  3223. <li>不能解析的 JavaScript 脚本中的链接</li>
    3224. 

  3224. <li>Flash、Java 和其他插件中的链接</li>
    3225. 

  3225. <li>PowerPoint 和 PDF 文件中的链接</li>
    3226. 

  3226. <li>指向被 meta Robtots 标签、rel=“NoFollow” 和 robots.txt 屏蔽的页面的链接</li>
    3227. 

  3227. <li>页面上有上几百个链接</li>
    3228. 

  3228. <li>frame（框架结构）和 iframe 里的链接</li>
    3229. 

  3229. </ul>
    3230. 

  3230. <p>对于现在的网站来还有下面的原因，通过来说是因为内容是动态生成的，而不是静态的</p>
    3231. 

  3231. <ul>
    3232. 

  3232. <li>网站通过 WebSocket 的方法渲染内容</li>
    3233. 

  3233. <li>使用诸如 Mustache 之类的 JS 模板引擎</li>
    3234. 

  3234. </ul>
    3235. 

  3235. <p><strong>什么样的网页可以被索引</strong></p>
    3236. 

  3236. <ul>
    3237. 

  3237. <li>确保页面可以在没有 JavaScript 下能被渲染。对于现在 JavaScript 语言的使用越来越多的情况下，在使用 JS 模板引擎的时候也应该注意这样的问题。</li>
    3238. 

  3238. <li>在用户禁用了 JavaScript 的情况下，保证所有的链接和页面是可以访问的。</li>
    3239. 

  3239. <li>确保爬虫可以看到所有的内容。那些用 JS 动态加载出来的对于爬虫来说是不友好的</li>
    3240. 

  3240. <li>使用描述性的锚文本的网页</li>
    3241. 

  3241. <li>限制的页面上的链接数量。除去一些分类网站、导航网站之类有固定流量，要不容易被认为垃圾网站。</li>
    3242. 

  3242. <li>确保页面能被索引。有一指向它的 URL</li>
    3243. 

  3243. <li>URL 应该遵循最佳实践。如 blog/how-to-driver 有更好的可读性</li>
    3244. 

  3244. </ul>
    3245. 

  3245. <p><strong>在正确的地方使用正确的关键词</strong></p>
    3246. 

  3246. <ul>
    3247. 

  3247. <li>把关键词放 URL 中</li>
    3248. 

  3248. <li>关键词应该是页面的标签</li>
    3249. 

  3249. <li>带有 H1 标签</li>
    3250. 

  3250. <li>图片文件名、ALT 属性带有关键词。</li>
    3251. 

  3251. <li>页面文字</li>
    3252. 

  3252. <li>加粗文字</li>
    3253. 

  3253. <li>Descripiton 标签</li>
    3254. 

  3254. </ul>
    3255. 

  3255. <h3 id="内容">内容</h3>
    3256. 

  3256. <p>对于技术博客而言，内容才是最需要考虑的因素。</p>
    3257. 

  3257. <p>可以考虑一下这篇文章，虽然其主题是以 SEO 为主 <a href="http://www.phodal.com/blog/user-experience-writing-web-content/">用户体验与网站内容</a></p>
    3258. 

  3258. <p>不可忽略的一些因素是内容才是最优质的部分，没有内容一切 SEO 都是无意义的。</p>
    3259. 

  3259. <h4 id="复制内容问题">复制内容问题</h4>
    3260. 

  3260. <p>一个以用户角度考虑的问题: <strong>用户需要看到多元化的搜索结果</strong></p>
    3261. 

  3261. <p>所以对于搜索引擎来说，复制带来的结果：</p>
    3262. 

  3262. <ul>
    3263. 

  3263. <li>搜索引擎爬虫对每个网站都有设定的爬行预算，每一次爬行都只能爬行 trpgr 页面数</li>
    3264. 

  3264. <li>连向复制内容页面的链接也浪费了它们的链接权重。</li>
    3265. 

  3265. <li>没有一个搜索引擎详细解释他们的算法怎样选择显示页面的哪个版本。</li>
    3266. 

  3266. </ul>
    3267. 

  3267. <p>于是上文说到的作者给了下面的这些建议:</p>
    3268. 

  3268. <blockquote>
    3269. 

  3269. <p>避免从网上复制的内容（除非你有很多其他的内容汇总，以使它看起来不同 - 我们做头条，对我们的产品页面的新闻片段的方式） 。这当然强烈适用于在自己的网站页面以及。内容重复可以混淆搜索引擎哪些页面是权威（它也可能会导致罚款，如果你只是复制粘贴别人的内容也行） ，然后你可以有你自己的网页互相竞争排名！</p>
    3270. 

  3270. </blockquote>
    3271. 

  3271. <blockquote>
    3272. 

  3272. <p>如果你必须有重复的内容，利用相对=规范，让搜索引擎知道哪个 URL 是一个他们应该被视为权威。但是，如果你的页面是另一个在网络上找到一个副本？那么开始想出一些策略来增加更多的文字和信息来区分你的网页，因为这样重复的内容是决不可能得到好的排名。</p>
    3273. 

  3273. </blockquote>
    3274. 

  3274. <p>——待续。</p>
    3275. 

  3275. <h4 id="保持更新">保持更新</h4>
    3276. 

  3276. <p>谷歌对于一个一直在更新的博客来说会有一个好的排名，当然只是相对的。</p>
    3277. 

  3277. <p>对于一个技术博客作者来说，一直更新的好处不仅可以让我们不断地学习更多的内容。也可以保持一个良好的习惯，而对于企业来说更是如此。如果我们每天去更新我们的博客，那么搜索引擎对于我们网站的收录也会变得越来越加频繁。那么，对于我们的排名及点击量来说也算是一个好事，当我们可以获得足够的排名靠前时，我们的 PR 值也在不断地提高。</p>
    3278. 

  3278. <p>更多内容可以参考:<a href="http://www.seomoz.org/blog/google-fresh-factor">Google Fresh Factor</a></p>
    3279. 

  3279. <h4 id="网站速度">网站速度</h4>
    3280. 

  3280. <blockquote>
    3281. 

  3281. <p>谷歌曾表示在他们的算法页面加载速度问题，所以一定要确保你已经调整您的网站，都服从最佳做法，以使事情迅速</p>
    3282. 

  3282. </blockquote>
    3283. 

  3283. <p>过去的一个月里，我试着提高自己的网站的速度，有一个相对好的速度，但是受限于<code>域名解析速度</code>以及 <code>VPS</code>。</p>
    3284. 

  3284. <p><a href="http://www.phodal.com/blog/use-traceroute-analyse-person-homepage-speed/">网站速度分析与 traceroute</a></p>
    3285. 

  3285. <p><a href="http://www.phodal.com/blog/ux-and-improve-website-load-speed/">UX 与网站速度优化——博客速度优化小记</a></p>
    3286. 

  3286. <p><a href="http://www.phodal.com/blog/nginx-with-ngx-pagespeed-module-improve-website-cache/">Nginx ngx_pagespeed nginx 前端优化模块编译</a></p>
    3287. 

  3287. <h4 id="保持耐心">保持耐心</h4>
    3288. 

  3288. <blockquote>
    3289. 

  3289. <p>这是有道理的，如果你需要考虑谷歌机器人抓取最新的页面并处理和更新与新内容对应的索引的时间因素。</p>
    3290. 

  3290. </blockquote>
    3291. 

  3291. <blockquote>
    3292. 

  3292. <p>而这可能是相当长一段时间，尤其是当你正在处理 PB 级的内容时。</p>
    3293. 

  3293. </blockquote>
    3294. 

  3294. <p>SEO 是一个长期的过程，很少有网站可以在短期内有一个很好的位置，除非是一个热门的网站，然而在它被发现之前也会经历这个过程。</p>
    3295. 

  3295. <h4 id="流量">流量</h4>
    3296. 

  3296. <p>在某种意义上，这个是提高 PR 值，及网站流量的另外一个核心，除了内容以外的核心。</p>
    3297. 

  3297. <ul>
    3298. 

  3298. <li>流量引导是 SEO 的基础部分。除非你有一个异常强大的品牌，不需要干什么就能吸引到流量。</li>
    3299. 

  3299. <li>流量引导永不停止。这是不间断营销网站的过程。</li>
    3300. 

  3300. </ul>
    3301. 

  3301. <p>关于流量的内容有太多，而且当前没有一个好的方法获取流量，虽然在我的网站已经有了。</p>
    3302. 

  3302. <p>Links to Your Site</p>
    3303. 

  3303. <p>Total links</p>
    3304. 

  3304. <p><code>5,880</code></p>
    3305. 

  3305. <blockquote>
    3306. 

  3306. <p>同时引导更多的流量和更有利更相关的流量的带来的帮助一样多。如果你有你的内容的分销合作伙伴，或者你建立一个小工具，或其他任何人都会把流量引导回你的网站上 - 你可以通过确保各个环节都有最佳的关键字锚文本从而大大提高搜索的相关性。您还应该确保所有流量到您的网站指向你的主域名（ http://www.yourdomain.com ，像 http://widget.yourdomain.com 不是一个主域名） 。另外，你要尽可能多的联系，以包含适当的替代文字。你的想法。</p>
    3307. 

  3307. </blockquote>
    3308. 

  3308. <blockquote>
    3309. 

  3309. <p>另外，也许不太明显的方式，建立链接（或者至少流量）是使用社交媒体 - 所以设置你的 Facebook ，Twitter 和谷歌，每当你有新的链接一定要分享。这些通道也可以作为一个有效的渠道，推动更多的流量到您的网站。</p>
    3310. 

  3310. </blockquote>
    3311. 

  3311. <p>由社交渠道带来的流量在现在已经越来越重要了，对于一些以内容为主导而且处于发展初期的网站，可以迅速带来流量。一些更简单的办法就是交换链接，总之这个话题有些沉重，可能会带来一些负面的影响，如黑帽 SEO。。。。</p>
    3312. 

  3312. <p><strong>参考来源</strong>:</p>
    3313. 

  3313. <p>《SEO 艺术》(The Art of SEO)</p>
    3314. 

  3314. <h2 id="ux-入门">UX 入门</h2>
    3315. 

  3315. <p>用户体验设计（英语：User Experience Design），是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证：</p>
    3316. 

  3316. <ul>
    3317. 

  3317. <li>对用户体验有正确的预估</li>
    3318. 

  3318. <li>认识用户的真实期望和目的</li>
    3319. 

  3319. <li>在核心功能还能够以低廉成本加以修改的时候对设计进行修正</li>
    3320. 

  3320. <li>保证核心功能同人机界面之间的协调工作，减少 BUG。</li>
    3321. 

  3321. </ul>
    3322. 

  3322. <p>关于 UX 的定义我觉得在知乎上的回答似乎太简单了，于是在网上寻寻觅觅终于找到了一个比较接近于答案的回答。原文是在: <a href="http://deviseconsulting.com/defining-ux/">Defining UX</a>，这又是一篇不是翻译的翻译。</p>
    3323. 

  3323. <h3 id="什么是-ux">什么是 UX</h3>
    3324. 

  3324. <p>用户体验设计（英语：User Experience Design），是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证：</p>
    3325. 

  3325. <ul>
    3326. 

  3326. <li>对用户体验有正确的预估</li>
    3327. 

  3327. <li>认识用户的真实期望和目的</li>
    3328. 

  3328. <li>在核心功能还能够以低廉成本加以修改的时候对设计进行修正</li>
    3329. 

  3329. <li>保证核心功能同人机界面之间的协调工作，减少BUG。</li>
    3330. 

  3330. </ul>
    3331. 

  3331. <p><strong>UX 需要什么</strong></p>
    3332. 

  3332. <p>从下图中我们可以看到一些 UX 所需要的知识体系：</p>
    3333. 

  3333. <figure>
    3334. 

  3334. <img src="assets/article/chapter5/ux_design.jpg" alt="UX" /><figcaption>UX</figcaption>
    3335. 

  3335. </figure>
    3336. 

  3336. <p>即</p>
    3337. 

  3337. <ul>
    3338. 

  3338. <li>信息构架</li>
    3339. 

  3339. <li>构架</li>
    3340. 

  3340. <li>工业设计</li>
    3341. 

  3341. <li>人为因素 (人因学)</li>
    3342. 

  3342. <li>声音设计 (网页设计中比较少)</li>
    3343. 

  3343. <li>人机交互</li>
    3344. 

  3344. <li>可视化设计</li>
    3345. 

  3345. <li>内容 (文字,视频,声音)</li>
    3346. 

  3346. </ul>
    3347. 

  3347. <p>交互设计便是<code>用户体验设计的重点</code>。我们再来看看另外的这张图片</p>
    3348. 

  3348. <figure>
    3349. 

  3349. <img src="assets/article/chapter5/ux-field.jpg" alt="Fields Of User Experience Design" /><figcaption>Fields Of User Experience Design</figcaption>
    3350. 

  3350. </figure>
    3351. 

  3351. <h3 id="什么是简单">什么是简单？</h3>
    3352. 

  3352. <p>一个好的软件应该是简单的，并且是令人愉快的。</p>
    3353. 

  3353. <p>在不同的 UX 书籍里，似乎就会说到【简约至上】。简单就是“单纯清楚、不复杂”。而这里的简单并不仅仅只是不复杂那么简单。对于一个软件来说，简单实际上是你一下子就能找到你想要的东西，如：</p>
    3354. 

  3354. <figure>
    3355. 

  3355. <img src="assets/article/chapter5/search-phodal.jpg" alt="Search Phodal" /><figcaption>Search Phodal</figcaption>
    3356. 

  3356. </figure>
    3357. 

  3357. <p>而我们并不可能在一开始就得到这样的结果，这需要一个复杂的过程。而在这个过程开始之前，我们一定要知道的一点是：我们的用户到底需要什么?</p>
    3358. 

  3358. <p>如果我们无法知道这一点，而只是一直在假想客户需要什么，那么这会变成一条死路。</p>
    3359. 

  3359. <p>接着在找寻的过程中，发现了一个有意思的图，即精益画布：</p>
    3360. 

  3360. <figure>
    3361. 

  3361. <img src="assets/article/chapter5/lean.jpg" alt="Lean" /><figcaption>Lean</figcaption>
    3362. 

  3362. </figure>
    3363. 

  3363. <p>首先，我们需要知道几个用户而存在的问题——即客户最需要解决的三个问题。并且针对三个问题提出对应的解决方案，这也就是产品的主要功能。</p>
    3364. 

  3364. <p>那么，这两点结合起来对于用户来说就是简单——这个软件能解决客户存在的主要问题。</p>
    3365. 

  3365. <p>如果我们可以完成这部分功能的话，那么这就算得上是一个有用的软件。</p>
    3366. 

  3366. <h3 id="进阶">进阶</h3>
    3367. 

  3367. <p>而实际上“实用”则是位于用户体验的最底层，如下图所示：</p>
    3368. 

  3368. <figure>
    3369. 

  3369. <img src="assets/article/chapter5/layer.jpg" alt="UX" /><figcaption>UX</figcaption>
    3370. 

  3370. </figure>
    3371. 

  3371. <p>这时候就需要尽量往可用靠拢。怎样对两者进行一个简单的划分？</p>
    3372. 

  3372. <p>下图就是实用的软件：</p>
    3373. 

  3373. <figure>
    3374. 

  3374. <img src="assets/article/chapter5/ie-alert.jpg" alt="IE Alert" /><figcaption>IE Alert</figcaption>
    3375. 

  3375. </figure>
    3376. 

  3376. <p>而下图就便好一点了：</p>
    3377. 

  3377. <figure>
    3378. 

  3378. <img src="assets/article/chapter5/popup.jpg" alt="jQuery Popup" /><figcaption>jQuery Popup</figcaption>
    3379. 

  3379. </figure>
    3380. 

  3380. <p>要达到可用的级别，并不是一件困难的事：<strong>遵循现有软件的模式</strong>。</p>
    3381. 

  3381. <p>换句话说，这时候你需要的是一本 <strong>Cookbook</strong>。这本 <strong>Cookbook</strong> 上面就会列出诸多现有的设计模式，只需要参考便使用就差不多了。</p>
    3382. 

  3382. <p>同样的，我便尝试用《移动应用 UI 设计模式》一本书对我原有的软件进行了一些设计，发现它真的可以达到这样的地步。</p>
    3383. 

  3383. <p>而这也类似于在编程中的设计模式，遵循模式可以创造出不错的软件。</p>
    3384. 

  3384. <h3 id="用户体验要素">用户体验要素</h3>
    3385. 

  3385. <p>尽管对于这方面没有非常好的认识，但是还是让我们来看看我们现在可以到哪种程度。如在一开始所说的，我们需要满足用户的需求，这就是我们的目标：</p>
    3386. 

  3386. <figure>
    3387. 

  3387. <img src="assets/article/chapter5/ux-elements.png" alt="用户体验要素" /><figcaption>用户体验要素</figcaption>
    3388. 

  3388. </figure>
    3389. 

  3389. <p>而在最上面的视觉设计则需要更专业的人来设计。</p>
    3390. 

  3390. <p><strong>参考目录</strong></p>
    3391. 

  3391. <ul>
    3392. 

  3392. <li>《怦然心动——情感化设计交互指南》</li>
    3393. 

  3393. <li>《用户体验要素》</li>
    3394. 

  3394. <li>《移动应用UI设计模式》</li>
    3395. 

  3395. </ul>
    3396. 

  3396. <h2 id="认知设计">认知设计</h2>
    3397. 

  3397. <p>第一次意识到这本书很有用的时候，是我在策划一个视频。第二次，则是我在计划写一本书的时候。</p>
    3398. 

  3398. <h3 id="流">流</h3>
    3399. 

  3399. <p>在《认知设计》一书中，提到了下面的学习体验，即“流” (Flow)。而在我们学习的过程中，我们也会有类似的学习过程。</p>
    3400. 

  3400. <figure>
    3401. 

  3401. <img src="assets/article/chapter5/learn-design.png" alt="Learn Design" /><figcaption>Learn Design</figcaption>
    3402. 

  3402. </figure>
    3403. 

  3403. <p>如在早期我学习 Emacs 和 GNU/Linux 的时候，也曾经放弃过，虽然在当时我已经读过 Linux 内核。然而，在应用之前进行理论学习并没有卵用。</p>
    3404. 

  3404. <p>通常我们会有类似于下面的学习体验，对于一本书来说有下面的体验似乎也是一件很不错的事:</p>
    3405. 

  3405. <ol type="1">
    3406. 

  3406. <li>在最开始学习的时候，我们需要一点理论基础，以及我们需要学点什么。</li>
    3407. 

  3407. <li>然后，我们需要构建一个简单可用的系统，以获取信心。如果这一步没有想象中那么简单，那么我们可能会放弃学习。或者等到某个时期成熟的时刻，如在我开始学习《设计模式》的时候，那么本书的高度太高了。直到有一天，我了解到了一本叫《Head First 设计模式》的书，才重新把 GoF 的书看了一遍，发现其实也没有想象中的难。</li>
    3408. 

  3408. <li>接着在完成了某个功能之后，我可能继续学习某个理论，用于支撑下一步计划。</li>
    3409. 

  3409. <li>在那之后，我觉得这一步可能也不是那么难，因为已经有了前面的基础。如果某一步失败的时候，那么我们可能会继续寻找某些可靠的方案，又或者是理论支撑。</li>
    3410. 

  3410. <li>。。。</li>
    3411. 

  3411. <li>直到有一天，我们来到了一个瓶颈的前面，现有的方案已经不满足我们的需求。对于这个问题，我们可能已经没有一个更好的解决方案。于是，我们可能就需要创建一个轮子，只是在这时，我们不知道怎样去造轮子。</li>
    3412. 

  3412. <li>于是我们开始学习造轮子。</li>
    3413. 

  3413. <li>….</li>
    3414. 

  3414. </ol>
    3415. 

  3415. <p>只有保持一个学习的过程，才会让我们在这一步步的计划中不会退缩，也不能退缩。</p>
    3416. 

  3416. <h1 id="持续交付">持续交付</h1>
    3417. 

  3417. <blockquote>
    3418. 

  3418. <p>交付管道的建立和自动化是持续交付的基础</p>
    3419. 

  3419. </blockquote>
    3420. 

  3420. <h2 id="持续集成">持续集成</h2>
    3421. 

  3421. <p>更关注代码质量。持续集成是为了确保随着需求变化而变化的代码，在实现功能的同时，质量不受影响。因此，在每一次构建后会运行单元测试，保证代码级的质量。单元测试会针对每一个特定的输入去判断和观察输出的结果，而单元测试的粒度则用来平衡持续集成的质量和速度。</p>
    3422. 

  3422. <p>持续集成的核心价值在于<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a>：</p>
    3423. 

  3423. <ol type="1">
    3424. 

  3424. <li>持续集成中的任何一个环节都是自动完成的，无需太多的人工干预，有利于减少重复过程以节省时间、费用和工作量；</li>
    3425. 

  3425. <li>持续集成保障了每个时间点上团队成员提交的代码是能成功集成的。换言之，任何时间点都能第一时间发现软件的集成问题，使任意时间发布可部署的软件成为了可能；</li>
    3426. 

  3426. <li>持续集成还能利于软件本身的发展趋势，这点在需求不明确或是频繁性变更的情景中尤其重要，持续集成的质量能帮助团队进行有效决策，同时建立团队对开发产品的信心。</li>
    3427. 

  3427. </ol>
    3428. 

  3428. <h3 id="持续集成系统">持续集成系统</h3>
    3429. 

  3429. <p>在前面的内容里，我们已经介绍了持续集成的各项基础设施——如使用版本管理、编写测试、自动化部署。要构建这样的一个持续集成系统需要下面的内容：</p>
    3430. 

  3430. <ul>
    3431. 

  3431. <li>支持自动构建</li>
    3432. 

  3432. <li>源码服务器</li>
    3433. 

  3433. <li>持续集成服务器</li>
    3434. 

  3434. </ul>
    3435. 

  3435. <p>我们已经实现了前两点，针对于第三点——持续集成服务器，我们可以以 Jenkins 为例做一些简单的说明。它是一种基于 Java 开发的持续集成工具，并提供了用于监控持续重复工作的软件平台。</p>
    3436. 

  3436. <p>它可以让整个开发流程到部署都实现自动化。由于每个功能可以一点点的加在 build 中，那么这样就能保证每次的新 build 可以交付新的功能。同时，我们可以根据用户的反馈情况及时调整开发方向，降低项目风险。</p>
    3437. 

  3437. <h3 id="持续集成流程">持续集成流程</h3>
    3438. 

  3438. <p>我们就可以对这个工作流展开深入介绍。持续集成主要就是要保证整个过程是<strong>可持续</strong>的。如下图是一个持续集成的工作流：</p>
    3439. 

  3439. <figure>
    3440. 

  3440. <img src="assets/article/chapter6/ci.jpg" alt="CI Workflow" /><figcaption>CI Workflow</figcaption>
    3441. 

  3441. </figure>
    3442. 

  3442. <p>不同的开发者在自己的机器上开发功能代码。在完成一定的本地提交后，这些代码将会提交给源代码控制服务器。不过，在那之前我们应该在本地跑测试来减少持续集成失败的情况。接着，我们的CI会定时去获取源码服务器是否有代码修改。如果有代码修改，那么我们的集成服务器将会获取这些代码。然后，构建这个项目，运行测试，再输出返回结果。最后，我们可以开发一些小工具来提醒用户 CI 是否运行成功。</p>
    3443. 

  3443. <p>如果这个过程中 CI 运行失败的话，那么我们就不能再提交新的代码——除了修复 CI 的代码外。持续集成变红不能过夜，要么快速解决，要么回退。</p>
    3444. 

  3444. <p>在这个过程中，有两点值得注意，一个是小步前进，一个是迟早反馈。</p>
    3445. 

  3445. <h4 id="小步前进">小步前进</h4>
    3446. 

  3446. <p>小步前进是一系列步骤的集合，其目的是：集成越早问题越小。即当我们的代码越早的提交到源码服务器，那么其他人就可以尽可能早的和我们的代码集成到一起。这也意味着，每天结束时，我们在本地的修改要尽可能小，并且这些修改还要保证不会破坏持续集成。</p>
    3447. 

  3447. <p>我们需要频繁地在本地提交我们的代码，编写独立的测试——如果我们在最后才编写测试，就会拖慢整个流程，它使得我们不能尽可能早的提交代码。</p>
    3448. 

  3448. <h4 id="尽早反馈">尽早反馈</h4>
    3449. 

  3449. <blockquote>
    3450. 

  3450. <p>反馈越早，那么问题越小。</p>
    3451. 

  3451. </blockquote>
    3452. 

  3452. <p>无论是精益还是敏捷都在强调一点——尽早反馈，反馈对于提高敏捷开发流程效力非常重要。从日常的：</p>
    3453. 

  3453. <ul>
    3454. 

  3454. <li>Code Review</li>
    3455. 

  3455. <li>静态代码分析</li>
    3456. 

  3456. <li>自动集成测试</li>
    3457. 

  3457. <li>自动验收测试</li>
    3458. 

  3458. <li>高频率发布</li>
    3459. 

  3459. </ul>
    3460. 

  3460. <p>我们都在做尽可能小的反馈，这些实践对于我们完成一个好的持续集成来说是非常重要的基础。</p>
    3461. 

  3461. <p>参考资料：</p>
    3462. 

  3462. <p>-《持续交付：发布可靠软件的系统方法》</p>
    3463. 

  3463. <h2 id="持续交付-1">持续交付</h2>
    3464. 

  3464. <p>持续交付依赖于一系列的工具和实践，下图是一个持续交付的工作流：</p>
    3465. 

  3465. <figure>
    3466. 

  3466. <img src="assets/article/chapter6/continuous-delivery.jpg" alt="CD Workflow" /><figcaption>CD Workflow</figcaption>
    3467. 

  3467. </figure>
    3468. 

  3468. <p>还有一系列与开发无关的技能：</p>
    3469. 

  3469. <ol type="1">
    3470. 

  3470. <li>自动化</li>
    3471. 

  3471. <li>DevOps</li>
    3472. 

  3472. <li>云基础设施</li>
    3473. 

  3473. <li>以软件为中心的哲学</li>
    3474. 

  3474. </ol>
    3475. 

  3475. <h3 id="基础设施">基础设施</h3>
    3476. 

  3476. <p>在我们使我们的项目可以持续交付软件包的时候，我们需要</p>
    3477. 

  3477. <h4 id="本地开发环境">本地开发环境</h4>
    3478. 

  3478. <p>在本地编写代码时，我们需要设置本地的开发环境。假设我们要开始一个 Java Web 项目，在我们的开发机器上，我们需要安装：</p>
    3479. 

  3479. <ul>
    3480. 

  3480. <li>版本管理工具，如 git，用于管理源代码。</li>
    3481. 

  3481. <li>IDE，如Intellij IDEA，用于搭建开发环境。</li>
    3482. 

  3482. <li>构建工具，如 gradle，用于安装依赖、运行测试、构建工程等等。</li>
    3483. 

  3483. <li>语法检测工具，如 checkstyle，用于检查代码语法。</li>
    3484. 

  3484. <li>单元测试框架，如 JUnit，用于进行单元测试。</li>
    3485. 

  3485. <li>集成测试框架，如 Cucumber、Selenium，用于做行为测试。</li>
    3486. 

  3486. </ul>
    3487. 

  3487. <p>除此，在我们的项目代码里，我们还需要：</p>
    3488. 

  3488. <ul>
    3489. 

  3489. <li><code>CI运行脚本</code>，用于在 CI 上运行指定的测试。</li>
    3490. 

  3490. <li><code>上传包脚本</code>，用于上传 build 完的软件包。</li>
    3491. 

  3491. <li><code>部署脚本</code>，用于在本地部署包到测试环境。</li>
    3492. 

  3492. <li><code>监控代码</code>，用于监测网站性能和用户行为。</li>
    3493. 

  3493. </ul>
    3494. 

  3494. <p>当然我们还需要辅助一些测试工具来测试网站，如性能测试、网络测试等等。</p>
    3495. 

  3495. <h4 id="持续集成环境">持续集成环境</h4>
    3496. 

  3496. <p>为什么在这里会出现一个持续集成环境？我也不知道，只是想到了这里。由于我们需要持续集成，所以我们也需要一个运行持续集成服务器的机器。</p>
    3497. 

  3497. <p>持续集成服务器是由两部分组成的：Master 和 Agent。即一个用于控制其他运行持续集成服务的机器，以及执行指令的机器。因此，我们需要在一台机器上安装 Master 软件，在另外一台机器上作为 Agent。在我们的 Agent上，我们需要安装相对应的运行服务的软件，如</p>
    3498. 

  3498. <ul>
    3499. 

  3499. <li>指定版本的语言环境 ，如Java、Python。</li>
    3500. 

  3500. <li>构建工具。</li>
    3501. 

  3501. <li>版本管理工具，及对应的密钥。</li>
    3502. 

  3502. <li>打包工具，如 RPM。</li>
    3503. 

  3503. <li>虚拟桌面，即可以模拟桌面浏览器的软件。</li>
    3504. 

  3504. </ul>
    3505. 

  3505. <p>同时，我们还需要有一个地方放置我们的RPM包。</p>
    3506. 

  3506. <h4 id="测试环境">测试环境</h4>
    3507. 

  3507. <p>相比于上面两个环境来说，测试环境就比较简单了。我们只需要创建几个不同的环境，即开发者的测试环境、QA 环境、模拟线上环境，在这几个不同的环境上有不同的配置。</p>
    3508. 

  3508. <h3 id="持续部署">持续部署</h3>
    3509. 

  3509. <p>在持续交付之外的，还有持续部署——这个就更依赖于团队的组织结构了。其与持续交付的对比如下图所示：</p>
    3510. 

  3510. <figure>
    3511. 

  3511. <img src="assets/article/chapter6/continuous-delivery-continuous-deployment.jpg" alt="持续部署" /><figcaption>持续部署</figcaption>
    3512. 

  3512. </figure>
    3513. 

  3513. <p>我们可以从图中看到，两者的最大不同之处在于：持续部署会直接将构建生成的部署到产品环境。这就意味着，我们不仅要有强大的技术实力，也要有足够的组织支持才能做到。而这部分已经超出了软件开发的内容了~~。</p>
    3514. 

  3514. <h2 id="持续学习">持续学习</h2>
    3515. 

  3515. <p>如果说<code>持续交付则是一种对卓越的追求</code>,那么<code>持续学习应该就是追求软件卓越</code>。 如果说<code>持续集成是一种软件开发实践</code>,那么对于技术人员来说——<code>持续写作应该就是持续学习的实践</code></p>
    3516. 

  3516. <p>生活总会遇到压力，来自工作上的也好，来自对于技术上的兴趣也罢，我们需要持续来断地学习。没有一直能立于不败的方法，在传说中的武林上也是如此。</p>
    3517. 

  3517. <p>对于持续学习来说，通常会有以下的</p>
    3518. 

  3518. <ul>
    3519. 

  3519. <li>阅读</li>
    3520. 

  3520. <li>编程</li>
    3521. 

  3521. <li>写作</li>
    3522. 

  3522. </ul>
    3523. 

  3523. <p>有意思的是持续学习有额外的好处便是</p>
    3524. 

  3524. <ul>
    3525. 

  3525. <li>持续学习可以降低危机感</li>
    3526. 

  3526. </ul>
    3527. 

  3527. <h3 id="持续阅读">持续阅读</h3>
    3528. 

  3528. <p>看过如此多的金庸、古龙小说我们都会发现有那么多的人都在追求武功上的卓越，有的走火入魔了，有的铤而走险杀人放火，暂且不讨论这些。我们简单的以大部分的主角为例，大部分的主角自小就练得一手好武艺，少部分除外，而他们通过会比前辈厉害，只是因为我们看了前人的说，现在也是如此。</p>
    3529. 

  3529. <p><strong>20 年前要建一个淘宝怕是没有两三个月十几个人是不行的，但是今天要建出原来淘宝的模样，也许一个人单枪匹马一两天就能搞定了，还能上线。</strong></p>
    3530. 

  3530. <p>有意思的是武林小说的武林秘籍少之又少，正常情况下能学到的或许就是教科书上的种种。而现在，如果我们要学习 <code>UX</code> 的话，我们很容易可以从亚马逊上拿到一个书单，又或者是某个博客里面列举出来的:《用户体验要素》、《交互设计沉思录》、《怦然心动——情感化交互设计指南》等等。</p>
    3531. 

  3531. <p>我们可以更加方便快捷地获取我们所需要的知识从书上、网上等等。</p>
    3532. 

  3532. <p><code>阅读更多的书籍是持续学习的基础。</code></p>
    3533. 

  3533. <p>总会听到有些人在工作之余看了更多的书，在某种情况下来说是有意义的。我们需要不断地去阅读。</p>
    3534. 

  3534. <h3 id="持续编程">持续编程</h3>
    3535. 

  3535. <p>编程算是一个开发人员工作时一直在做的，而对于工作之后来说，到底还会有多少人继续编程就是一个有意思的问题。</p>
    3536. 

  3536. <p>对于一个有兴趣的程序员来说，工作和兴趣都是分开的，可以将工作视之为无味的东西，但是休息时间呢？可以用来创造自己觉得有意义的东西，可以用来认识更多志同道合的人，对于不满现状的人更是如此，或许为自己创造了更多的机会。</p>
    3537. 

  3537. <p>工作之后编程，不应该是为了工作而编程，应该为了兴趣而编程，或者其他。如果没有时间，是不是因为加班了，对于刚开始养家糊口来说加班是没有办法的，但是如果不是的话，又没时间，是不是……</p>
    3538. 

  3538. <h3 id="持续写作">持续写作</h3>
    3539. 

  3539. <p>对于一个技术人员来说，写作可能不是一件有意思的事，但是也不是一件很难的事，没有必要将大量的文字用文本表示。写给其他技术人员看的，有时候更多的是代码、思路、图。写作对于学习的意思怕是有一大把，写作是最好的输入，也是最好的输出。你需要为你的这篇文章</p>
    3540. 

  3540. <ul>
    3541. 

  3541. <li>去参考更多的资料</li>
    3542. 

  3542. <li>更深入的学习</li>
    3543. 

  3543. <li>更多的时间付出</li>
    3544. 

  3544. </ul>
    3545. 

  3545. <p>然而这些都是有价值的，你也许可以从中得到</p>
    3546. 

  3546. <ul>
    3547. 

  3547. <li>一份工作</li>
    3548. 

  3548. <li>一些志同道合的朋友</li>
    3549. 

  3549. <li>一个博客</li>
    3550. 

  3550. <li>一种习惯</li>
    3551. 

  3551. <li>还有人生</li>
    3552. 

  3552. <li>或许还能写书。</li>
    3553. 

  3553. </ul>
    3554. 

  3554. <p>对于我来说，更多的是对于<code>读者</code>和 <code>SEO</code> 的兴趣，SEO 是一门艺术。</p>
    3555. 

  3555. <h1 id="遗留系统与修改代码">遗留系统与修改代码</h1>
    3556. 

  3556. <p>尽管维基百科上对遗留系统的定义是:</p>
    3557. 

  3557. <blockquote>
    3558. 

  3558. <p>一种旧的方法、旧的技术、旧的计算机系统或应用程序。</p>
    3559. 

  3559. </blockquote>
    3560. 

  3560. <p>但是实际上，当你看到某个网站宣称用新的框架来替换旧的框架的时候，你应该知晓他们原有的系统是遗留系统。人们已经不想在上面工作了，很多代码也不知道是干什么的，也没有人想去深究——毕竟不是自己的代码。判断是否是遗留代码的条件很简单，维护成本是否比开发成本高很多。</p>
    3561. 

  3561. <ul>
    3562. 

  3562. <li>几乎无法维护</li>
    3563. 

  3563. <li>代码遗失</li>
    3564. 

  3564. <li>逻辑不清</li>
    3565. 

  3565. <li>没有文档或者不够详细、看不懂</li>
    3566. 

  3566. <li>关键点遗失</li>
    3567. 

  3567. </ul>
    3568. 

  3568. <p>在维护这一类系统的过程中，我们可能会遇到一些原因来修改代码。如《修改代码的艺术》的一书中所说，修改软件有四大原因：</p>
    3569. 

  3569. <ul>
    3570. 

  3570. <li>增加特性</li>
    3571. 

  3571. <li>修复 Bug</li>
    3572. 

  3572. <li>改善设计</li>
    3573. 

  3573. <li>优化</li>
    3574. 

  3574. </ul>
    3575. 

  3575. <p>当我们修改代码之后，我们将继续引进新的 Bug。</p>
    3576. 

  3576. <p>参考阅读</p>
    3577. 

  3577. <p>-《修改代码的艺术》</p>
    3578. 

  3578. <h2 id="遗留代码">遗留代码</h2>
    3579. 

  3579. <p>与我们生活息息相关的很多软件里满是错误、脆弱的代码，并且难以扩展。这就是我们说的“遗留代码”。</p>
    3580. 

  3580. <p>相信你也经常看到某某网站的架构之路，会发现其中一个很有趣的过程就是他们会把之前的架构抛弃掉。接着，他们又做了一个这样的系统，然后过些年这个系统又被重做了。究其原因，会发现这个架构是在几年前设计的。在几年前，他是非常好的架构。但是随着时间的演变，他还是几年前的架构。这是为什么呢？</p>
    3581. 

  3581. <h3 id="遗留代码-1">遗留代码</h3>
    3582. 

  3582. <p>什么是遗留代码？</p>
    3583. 

  3583. <blockquote>
    3584. 

  3584. <p>没有自动化测试的代码就是遗留代码，不管它是十年前写的，还是昨天写的。</p>
    3585. 

  3585. </blockquote>
    3586. 

  3586. <p>从一个新手程序员到一个老鸟，我们的编程水平都在不断增加。但是我们过去写的代码一直都在那里，我们一直都没有足够的勇气去动它们。因为我们知道如果一不小心改错了什么，就会导致一些意外的 Bug。这些 Bug 可能会对我们的编程生涯造成一些影响。</p>
    3587. 

  3587. <p>我们不知道这样做的后果，是因为我们没有对原来的代码进行测试。如果代码都是经过测试的，那么我们在修改中出的错，都会在测试中加以体现。长此以往，没有人敢去修改这些代码。</p>
    3588. 

  3588. <p>既然它在旧的系统中工作得很好，那么我们就没有理由去修改它们。当有新的需求出现时，我们就可以重新设计一个新的系统。</p>
    3589. 

  3589. <h2 id="如何修改遗留代码">如何修改遗留代码</h2>
    3590. 

  3590. <blockquote>
    3591. 

  3591. <p>即使是最训练有素的开发团队，也不能保证始终编写出清晰高效的代码。</p>
    3592. 

  3592. </blockquote>
    3593. 

  3593. <p>然而，如果我们不去尝试做一些改变，这些代码就会遗留下去——成为遗留代码，再次重构掉。即使说，重构系统是不可避免的一个过程，但是在这个过程中要是能抽象中领域特定的代码、语言也是件不错的事。</p>
    3594. 

  3594. <h3 id="修改遗留代码">修改遗留代码</h3>
    3595. 

  3595. <p>So，如何开始修改代码？如《修改代码的艺术》一书所说，应该是下面的五个步骤：</p>
    3596. 

  3596. <ol type="1">
    3597. 

  3597. <li>代码修改点</li>
    3598. 

  3598. <li>找到测试点</li>
    3599. 

  3599. <li>打破依赖</li>
    3600. 

  3600. <li>编写测试</li>
    3601. 

  3601. <li>修改并重构</li>
    3602. 

  3602. </ol>
    3603. 

  3603. <p>在有测试的情况下重构现有的代码才是安全的。而这些测试用例也是功能的体现，功能首先要得到保证了，然后才能保证一切都可以正常。不过，我更喜欢以下面三点概括他们：</p>
    3604. 

  3604. <ul>
    3605. 

  3605. <li>守: 找到测试点。守，即保证原有的功能是正确的。在这基础上，我们需要添加测试</li>
    3606. 

  3606. <li>破: 打破依赖。会导致遗留代码的一个原因还有，原有代码的耦合度比较高。因此，我们需要去打破这些耦合，重新构建依赖。</li>
    3607. 

  3607. <li>离: 修改并重构。</li>
    3608. 

  3608. </ul>
    3609. 

  3609. <p>不过，我想你只要有前面的那些步骤。你为什么还需要看这一章的内容呢？</p>
    3610. 

  3610. <p>参考书籍：</p>
    3611. 

  3611. <ul>
    3612. 

  3612. <li><strong>《修改代码的艺术》</strong></li>
    3613. 

  3613. <li><strong>《持续交付指南：修改代码的9条最佳实践》</strong></li>
    3614. 

  3614. </ul>
    3615. 

  3615. <h2 id="网站重构">网站重构</h2>
    3616. 

  3616. <blockquote>
    3617. 

  3617. <p>网站重构应包含结构、行为、表现三层次的分离以及优化，行内分工优化，以及以技术与数据、人文为主导的交互优化等。</p>
    3618. 

  3618. </blockquote>
    3619. 

  3619. <p>从我所了解到的网站重构，它大概可以分为下面的几类：</p>
    3620. 

  3620. <ol type="1">
    3621. 

  3621. <li>速度优化</li>
    3622. 

  3622. <li>功能加强</li>
    3623. 

  3623. <li>模块重构</li>
    3624. 

  3624. </ol>
    3625. 

  3625. <p>下面就我们来看这三类的网站重构</p>
    3626. 

  3626. <h3 id="速度优化">速度优化</h3>
    3627. 

  3627. <p>通常来说对于速度的优化也包含在重构中</p>
    3628. 

  3628. <ul>
    3629. 

  3629. <li>压缩 JS、CSS、image 等前端资源</li>
    3630. 

  3630. <li>程序的性能优化(如数据读写)</li>
    3631. 

  3631. <li>采用 CDN 来加速资源加载</li>
    3632. 

  3632. <li>对于 JS DOM 的优化</li>
    3633. 

  3633. <li>HTTP 服务器的文件缓存</li>
    3634. 

  3634. </ul>
    3635. 

  3635. <p>如对于压缩前端资源这一类的重构，不仅可以从代码层级来解决问题，也可以借由服务器缓存来解决问题。这时候就需要去判断应该由哪个层级来做这样的事情——如果一件事可以简单地由机器来解决，但是由人来解决需要花费大量的时间，这时就应该交由机器来解决。而如果由人来解决是一个长期受益，并且成本比较低的事，那么就应该由人来解决。如我们只需要在我们的构建脚本中引入 minify 库就可以解决的事，那么应该交由人来做。</p>
    3636. 

  3636. <p>如，采用 CDN、HTTP 服务器的文件缓存这一类应该交由机器来做。</p>
    3637. 

  3637. <p>同时像程序性能优化、JS DOM 优化都是应交由人来解决的事。特别是像程序性能优化，从长期来看可能是一件长期受益的事。当且仅当，我们遇到性能问题时，重构这部分代码才可能带来优势。如果我们的网站访问量不是特别大，那么优化可能就是徒劳的。但是这种优化对于个人的成长还是挺有帮助的。</p>
    3638. 

  3638. <h3 id="功能加强">功能加强</h3>
    3639. 

  3639. <p>一般来说功能加强，应该是由于需求的变动才引起对系统的重构需求：</p>
    3640. 

  3640. <ul>
    3641. 

  3641. <li>解耦复杂的模块 -&gt; 微服务</li>
    3642. 

  3642. <li>对缓存进行优化</li>
    3643. 

  3643. <li>针对内容创建或预留 API</li>
    3644. 

  3644. <li>添加新的 API</li>
    3645. 

  3645. <li>用新的语言、框架代替旧的框架(如 Scala, Node.js, React)</li>
    3646. 

  3646. </ul>
    3647. 

  3647. <h3 id="模块重构">模块重构</h3>
    3648. 

  3648. <p>深层次的网站重构应该考虑的方面</p>
    3649. 

  3649. <ul>
    3650. 

  3650. <li>减少代码间的耦合</li>
    3651. 

  3651. <li>让代码保持弹性</li>
    3652. 

  3652. <li>严格按规范编写代码</li>
    3653. 

  3653. <li>设计可扩展的 API</li>
    3654. 

  3654. <li>代替旧有的框架、语言</li>
    3655. 

  3655. <li>增强用户体验</li>
    3656. 

  3656. </ul>
    3657. 

  3657. <h1 id="回顾与架构设计">回顾与架构设计</h1>
    3658. 

  3658. <p>在刚开始接触架构设计的时候，对于这个知识点我觉得很奇怪。因为架构设计看上去是一个很复杂的话题，然而他是属于设计的一部分。如果你懂得什么是美、什么是丑，那么我想你也是懂得设计的。而设计是一件很有意思的事——刚开始写字时，我们被要求去临摹别人的字体，到了一定的时候，我们就可以真正的去设计。</p>
    3659. 

  3659. <h2 id="自我总结">自我总结</h2>
    3660. 

  3660. <p>总结在某种意义上相当于自己对自己的反馈：</p>
    3661. 

  3661. <figure>
    3662. 

  3662. <img src="assets/article/chapter8/output-input.png" alt="Output is Input" /><figcaption>Output is Input</figcaption>
    3663. 

  3663. </figure>
    3664. 

  3664. <p>当我们向自己输入更多反馈的时候，我们就可以更好地调整我们的方向。它属于输出的一部分，而我们也在不断调整我们的输入的时候，我们也在导向更好地输出。</p>
    3665. 

  3665. <h3 id="吾日三省吾身">吾日三省吾身</h3>
    3666. 

  3666. <blockquote>
    3667. 

  3667. <p>为什么你不看不到自己的方向？</p>
    3668. 

  3668. </blockquote>
    3669. 

  3669. <h2 id="retro">Retro</h2>
    3670. 

  3670. <p>Retro，又可以称为回顾，它的目的是对团队的激励、改进。它的模式的特点就是让我们更关注于 Less Well，即不好的地方。当我们无法变得更好的时候，它可以帮助我们反观团队自身，即不要让现状变得更差，避免让破窗效应<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a>难以发生。</p>
    3671. 

  3671. <p>在敏捷团队里，Retro 通常会发生一个迭代的结束与下一个迭代的开始之间，这看上去就是我们的除旧迎新。相信很多人都会对自我进行总结，随后改进。而 Retro 便是对团队进行改进，即发生了一些什么不好的事，而这些事可以变好，那么我们就应该对此进行改进。</p>
    3672. 

  3672. <p>Retro 是以整个团队为核心去考虑问题的，通常来说没有理由以个人为对象。因为敏捷回顾有一个最高指导原则，即：</p>
    3673. 

  3673. <blockquote>
    3674. 

  3674. <p>无论我们发现了什么，考虑到当时的已知情况、个人的技术水平和能力、可用的资源，以及手上的状况，我们理解并坚信：每个人对自己的工作都已全力以赴。</p>
    3675. 

  3675. </blockquote>
    3676. 

  3676. <p>下面就让我们来看看在一个团队里是如何 Retro 的。</p>
    3677. 

  3677. <h3 id="retro-的过程">Retro 的过程</h3>
    3678. 

  3678. <p>它不仅仅可以帮助我们发现团队里的问题，也可以集思广益的寻找出一些合适的解决方案。Retro 的过程和我们之前说的数据分析是差不多的，如下图所示：</p>
    3679. 

  3679. <figure>
    3680. 

  3680. <img src="assets/article/chapter8/retro-feature.jpg" alt="Retro 流程" /><figcaption>Retro 流程</figcaption>
    3681. 

  3681. </figure>
    3682. 

  3682. <p>即：</p>
    3683. 

  3683. <ol type="1">
    3684. 

  3684. <li>设定会议目标。在会议最开始的时候我们就应该对会议的内容达成一种共识，我们要回顾的主题是啥，我们要回顾哪些内容。如果是一般性的迭代 Retro，那么我们的会议主题就很明显了。如果是针对某一个特定项目的 Retro，那么主题也很明显。</li>
    3685. 

  3685. <li>Retro 的回顾。即回顾上一个 Retro 会议的 Action 情况，并进行一个简单的小结。</li>
    3686. 

  3686. <li>收集数据。收集数据需要依赖于我们收集数据的模式，要下面将会说到的四种基本维度，或者是雷达图等等。不同的收集数据的形式有不同的特别，团队里的每个人都应该好好去参与。</li>
    3687. 

  3687. <li>激发灵感。当我们寻找到团队中一个值得去庆祝的事，或者一个出了问题的事，我们就应该对这个问题进行讨论。并且对其展开了解、调查，让大家进一步看到问题，看到问题的根源。</li>
    3688. 

  3688. <li>决定做什么。现在我们已经做了一系列的事，最重要的来了，就是决定我们去做什么。我们应该对之前的问题做出怎样的改进。</li>
    3689. 

  3689. <li>总结和收尾。记录会议成果，更新文档等等。</li>
    3690. 

  3690. </ol>
    3691. 

  3691. <h3 id="三个维度">三个维度</h3>
    3692. 

  3692. <p>以我们为例，我们以下面的三个维度去进行 Retro:</p>
    3693. 

  3693. <ol type="1">
    3694. 

  3694. <li>Well.</li>
    3695. 

  3695. <li>Less Well.</li>
    3696. 

  3696. <li>Suggestion</li>
    3697. 

  3697. </ol>
    3698. 

  3698. <p>当然最后还会有一个Action：</p>
    3699. 

  3699. <ol type="1">
    3700. 

  3700. <li>Action</li>
    3701. 

  3701. </ol>
    3702. 

  3702. <p>该模式的特点是会让我们更多的关注 Less Well，关注我们做的不好的那些。</p>
    3703. 

  3703. <figure>
    3704. 

  3704. <img src="assets/article/chapter8/happy-retro.jpg" alt="Retro" /><figcaption>Retro</figcaption>
    3705. 

  3705. </figure>
    3706. 

  3706. <p><strong>Well</strong>。我们在 Well 里记录一些让我们开心的事，如最近天气好、迭代及时完成、没有加班等等，这些事从理论上来说应该继续保持（KEEP）下去。</p>
    3707. 

  3707. <p><strong>Less Well</strong>。关注于在这个迭代的过程中，发生了一些什么不愉快的事。一般来说，我们就会对 Less Well 加以细致的讨论，找出问题的根源，并试图找到一个解决方案。换句话来说，就是改变（CHANGE)。</p>
    3708. 

  3708. <p><strong>Suggestion/Puzzle</strong>。如果我们可以直接找到一些建议，那么我们就可以直接提出来。并且如果我们对当前团队里的一些事情，有一些困惑那么也应该及早的提出来。</p>
    3709. 

  3709. <p><strong>Action</strong>。当我们对一些事情有定论的时候，我们就会提出相应的 Action。这些 Action 应该有相应的人去执行，并且由团队来追踪。</p>
    3710. 

  3710. <h2 id="架构模式">架构模式</h2>
    3711. 

  3711. <blockquote>
    3712. 

  3712. <p>模式就是最好的架构。</p>
    3713. 

  3713. </blockquote>
    3714. 

  3714. <h4 id="架构的产生">架构的产生</h4>
    3715. 

  3715. <p>在刚开始接触架构设计的时候，我买了几本书然后就开始学习了。我发现在这些书中都出现了一些相似的东西，如基本的分层设计、Pipe and Filters 模式、MVC 模式。然后，我开始意料到这些模式本身就是最好的架构。</p>
    3716. 

  3716. <p>MVC 模式本身也是基于分层而设计的，如下图是 Spring MVC 的请求处理过程：</p>
    3717. 

  3717. <figure>
    3718. 

  3718. <img src="assets/article/chapter8/spring-mvc.png" alt="Spring MVC" /><figcaption>Spring MVC</figcaption>
    3719. 

  3719. </figure>
    3720. 

  3720. <p>而这只是框架本身的架构，这一类也是我们预先设计好的框架。</p>
    3721. 

  3721. <p>在框架之上，我们会有自己本身的业务所带来的模式。如下图是我在网上搜罗到的一个简单的发送邮件的架构：</p>
    3722. 

  3722. <figure>
    3723. 

  3723. <img src="assets/article/chapter8/basic-paf.png" alt="发送邮件中的 Pipe and Filters 模式" /><figcaption>发送邮件中的 Pipe and Filters 模式</figcaption>
    3724. 

  3724. </figure>
    3725. 

  3725. <p>这样的模式则是在业务发展的过程中演进出来的。</p>
    3726. 

  3726. <h3 id="预设计式架构">预设计式架构</h3>
    3727. 

  3727. <p>日常使用的框架多数是预先设计的构架，因为这些架构本身的目标是明确的。系统会围绕一定的架构去构建，并且在这个过程中架构会帮助我们更好地理解系统。如下图所示的是 Emacs 的架构：</p>
    3728. 

  3728. <figure>
    3729. 

  3729. <img src="assets/article/chapter8/emacs-architecture.png" alt="Emacs 架构" /><figcaption>Emacs 架构</figcaption>
    3730. 

  3730. </figure>
    3731. 

  3731. <p>它采用的是交互式应用程序员应用广泛的模型-视图-控制器模式。</p>
    3732. 

  3732. <p>无论是瀑布式开发——设计好系统的框架，然后对系统的每个部分进行独立的完善和设计，最后系统再集成到一起。还是敏捷式开发——先做出 MVP，再一步步完善。它们都需要一定的预先式设计，只是传统的开发模式让两者看上去是等同的。</p>
    3733. 

  3733. <p>在过去由于 IT 技术变革小，新技术产生的速率也比较低，预先设计系统的架构是一种很不错的选择。然而，技术的发展趋势是越来越快，现有的设计往往在很短的一段时间里就需要推倒重来。</p>
    3734. 

  3734. <h3 id="演进式架构拥抱变化">演进式架构：拥抱变化</h3>
    3735. 

  3735. <p>演进式架构则是我们日常工作的业务代码库演进出来的。由于业务本身在不断发展，我们不断地演进系统的架构。在这样的模式下产生的架构系统会更加稳定，也更加优美。仅仅依赖于事先的设计，而不考虑架构在后期业务中的变化是一种不可取的设计模式。</p>
    3736. 

  3736. <p>这不并意味着不采用预先式设计，而是不一味去依靠原先系统的架构。</p>
    3737. 

  3737. <h2 id="浮现式设计">浮现式设计</h2>
    3738. 

  3738. <p>设计模式不是一开始就有的，好的软件也不是一开始就设计成现在这样的，好的设计亦是如此。</p>
    3739. 

  3739. <p>导致我们重构现有系统的原因有很多，但是多数是因为原来的代码变得越来越不可读，并且重构的风险太大了。在实现业务逻辑的时候，我们快速地用代码实现，没有测试，没有好的设计。</p>
    3740. 

  3740. <p>而下图算是最近两年来想要的一个答案：</p>
    3741. 

  3741. <figure>
    3742. 

  3742. <img src="assets/article/chapter8/emergent-design.jpg" alt="浮现式设计" /><figcaption>浮现式设计</figcaption>
    3743. 

  3743. </figure>
    3744. 

  3744. <p>浮现式设计是一种敏捷技术，强调在开发过程中不断演进。软件本身就不应该是一开始就设计好的，它需要经历一个演化的过程。</p>
    3745. 

  3745. <h3 id="意图导向">意图导向</h3>
    3746. 

  3746. <p>和 Growth 一样，在最开始的时候，我不知道我想要的是怎样的——我只有一个想法以及一些相对应的实践。接着我便动手开始做了，这是我的风格。不得不说这是结果导向编程，也是大部分软件开发采用的方法。</p>
    3747. 

  3747. <p>所以在一开始的时候，我们就有了下面的代码：</p>
    3748. 

  3748. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span> (rating) <span class="op">{</span>
    3749. 

  3749.     <span class="va">$scope</span>.<span class="at">showSkillMap</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span>
    3750. 

  3750.     skillFlareChild[<span class="va">skill</span>.<span class="at">text</span>] <span class="op">=</span> [rating]<span class="op">;</span>
    3751. 

  3751. 

  3752.     <span class="va">$scope</span>.<span class="at">ratings</span> <span class="op">=</span> <span class="va">$scope</span>.<span class="at">ratings</span> <span class="op">+</span> rating<span class="op">;</span>
    3753. 

  3753.     <span class="cf">if</span> (rating <span class="op">&gt;=</span> <span class="dv">0</span>) <span class="op">{</span>
    3754. 

  3754.       <span class="va">$scope</span>.<span class="va">learnedSkills</span>.<span class="at">push</span>(<span class="op">{</span>
    3755. 

  3755.         <span class="dt">skill</span><span class="op">:</span> <span class="va">skill</span>.<span class="at">text</span><span class="op">,</span>
    3756. 

  3756.         <span class="dt">rating</span><span class="op">:</span> rating
    3757. 

  3757.       <span class="op">}</span>)<span class="op">;</span>
    3758. 

  3758.     <span class="op">}</span>
    3759. 

  3759. 

  3760.     <span class="cf">if</span> (<span class="va">$scope</span>.<span class="at">ratings</span> <span class="op">&gt;</span> <span class="dv">250</span>) <span class="op">{</span>
    3761. 

  3761.       <span class="va">$scope</span>.<span class="at">isInfinite</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span>
    3762. 

  3762.     <span class="op">}</span>
    3763. 

  3763.   <span class="op">}</span></code></pre></div>
    3764. 

  3764. <p>代码在不经意间充斥着各种 Code Smell:</p>
    3765. 

  3765. <ol type="1">
    3766. 

  3766. <li>Magic Number</li>
    3767. 

  3767. <li>超长的类</li>
    3768. 

  3768. <li>等等</li>
    3769. 

  3769. </ol>
    3770. 

  3770. <h3 id="重构">重构</h3>
    3771. 

  3771. <p>还好我们在一开始的时候写了一些测试，这让我们可以有足够的可能性来重构代码，而使其不至于变成遗留代码。这也是我们推崇的一些基本实践：</p>
    3772. 

  3772. <blockquote>
    3773. 

  3773. <p>红 -&gt; 绿 -&gt; 重构</p>
    3774. 

  3774. </blockquote>
    3775. 

  3775. <p>测试是系统不至于腐烂的一个后勤保障，除此我们还需要保持对于 Code Smell 的嗅觉。如上代码：</p>
    3776. 

  3776. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span> (<span class="va">$scope</span>.<span class="at">ratings</span> <span class="op">&gt;</span> <span class="dv">250</span>) <span class="op">{</span>
    3777. 

  3777.   <span class="va">$scope</span>.<span class="at">isInfinite</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span>
    3778. 

  3778. <span class="op">}</span></code></pre></div>
    3779. 

  3779. <p>上面代码中的“250”指的到底是？这样的数字怎么能保证别人一看代码就知道250到底是什么？</p>
    3780. 

  3780. <p>如下的代码就好一些：</p>
    3781. 

  3781. <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> MAX_SKILL_POINTS <span class="op">=</span> <span class="dv">250</span><span class="op">;</span>
    3782. 

  3782. <span class="cf">if</span> (<span class="va">$scope</span>.<span class="at">ratings</span> <span class="op">&gt;</span> MAX_SKILL_POINTS) <span class="op">{</span>
    3783. 

  3783.   <span class="va">$scope</span>.<span class="at">isInfinite</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span>
    3784. 

  3784. <span class="op">}</span></code></pre></div>
    3785. 

  3785. <p>而在最开始的时候我们想不到这样的结果。最初我们的第一直觉都是一样的，然而只要我们保持着对 Code Smell 的警惕，情况就会发生更多的变化。</p>
    3786. 

  3786. <p>重构是区分普通程序员和专业程序员的一个门槛，也是练习得来的一个结果。</p>
    3787. 

  3787. <h3 id="模式与演进">模式与演进</h3>
    3788. 

  3788. <p>如果你还懂得一些设计模式，那么想来，软件开发这件事就变得非常简单——我们只需要理解好需求即可。</p>
    3789. 

  3789. <p>从一开始就使用模式，要么你是专家，要么你是在自寻苦恼。模式更多的是一些实现的总结，对于多数的实现来说，它们有着诸多的相似之处，可以使用相同的模式。</p>
    3790. 

  3790. <p>而在需求变化的过程中，一个设计的模式本身也是在不断的改变。如果我们还固执于原有的模式，那么我们就会犯下一个又一个的错误。</p>
    3791. 

  3791. <p>在适当的时候改变原有的模式，进行一些演进变显得更有意义一些。如果我们不能在适当的时候引进一些新的技术，那么旧有的技术就会不断累积。这些技术债就会不断往下叠加，这个系统将会接近于崩塌。而我们在一开始所设定的一些业务逻辑，也会随着系统而逝去，这个公司似乎也要到尽头了。</p>
    3792. 

  3792. <p>而如果我们可以不断地演进系统——抽象服务、拆分模块等等。业务就可以在技术不断演进地过程中得以保留。</p>
    3793. 

  3793. <h2 id="每个人都是架构师">每个人都是架构师</h2>
    3794. 

  3794. <p>每一个程序员都是架构师。平时在我们工作的时候，架构师这个 Title 都被那些非常有经历的开发人员占据着。然而，如果你喜欢刷刷 Github，喜欢做一些有意思的东西，那么你也将是一个架构师。</p>
    3795. 

  3795. <h3 id="如何构建一个博客系统">如何构建一个博客系统</h3>
    3796. 

  3796. <h4 id="如果你需要帮人搭建一个博客你先会想到什么">如果你需要帮人搭建一个博客你先会想到什么？</h4>
    3797. 

  3797. <p>先问一个问题，如果要让你搭建一个博客你会想到什么技术解决方案？</p>
    3798. 

  3798. <ol type="1">
    3799. 

  3799. <li>静态博客（类似于 GitHub Page）</li>
    3800. 

  3800. <li>动态博客（可以在线更新，如 WordPress）</li>
    3801. 

  3801. <li>半动态的静态博客（可以动态更新，但是依赖于后台构建系统）</li>
    3802. 

  3802. <li>使用第三方博客</li>
    3803. 

  3803. </ol>
    3804. 

  3804. <p>这只是基本的骨架。因此如果只有这点需求，我们无法规划出整体的方案。现在我们又多了一点需求，我们要求是独立的博客，这样我们就把第4个方案去掉了。但是就现在的过程来说，我们还是有三个方案。</p>
    3805. 

  3805. <p>接着，我们就需要看看 Ta 需要怎样的博客，以及他有怎样的更新频率？以及他所能接受的价格？</p>
    3806. 

  3806. <p>先说说价格——从价格上来说，静态博客是最便宜的，可以使用 AWS S3 或者国内的云存储等等。从费用上来说，一个月只需要几块钱，并且快速稳定，可以接受大量的流量访问。而动态博客就贵了很多倍——我们需要一直开着这个服务器，并且如果用户的数量比较大，我们就需要考虑使用缓存。用户数量再增加，我们就需要更多地服务器了。而对于半动态的静态博客来说，需要有一个 Hook 检测文章的修改，这样的 Hook 可以是一个客户端。当修改发生的时候，运行服务器，随后生成静态网页。最后，这个网页接部署到静态服务器上。</p>
    3807. 

  3807. <p>从操作难度上来说，动态博客是最简单的，静态博客紧随其后，半动态的静态博客是最难的。</p>
    3808. 

  3808. <p>整的性价比考虑如下：</p>
    3809. 

  3809. <table>
    3810. 

  3810. <thead>
    3811. 

  3811. <tr class="header">
    3812. 

  3812. <th>x</th>
    3813. 

  3813. <th>动态博客</th>
    3814. 

  3814. <th>静态博客</th>
    3815. 

  3815. <th>半动态的静态博客</th>
    3816. 

  3816. </tr>
    3817. 

  3817. </thead>
    3818. 

  3818. <tbody>
    3819. 

  3819. <tr class="odd">
    3820. 

  3820. <td>价格</td>
    3821. 

  3821. <td>几十到几百元</td>
    3822. 

  3822. <td>几元</td>
    3823. 

  3823. <td>依赖于更新频率 几元~几十元</td>
    3824. 

  3824. </tr>
    3825. 

  3825. <tr class="even">
    3826. 

  3826. <td>难度</td>
    3827. 

  3827. <td>容易</td>
    3828. 

  3828. <td>稍有难度</td>
    3829. 

  3829. <td>难度稍大</td>
    3830. 

  3830. </tr>
    3831. 

  3831. <tr class="odd">
    3832. 

  3832. <td>运维</td>
    3833. 

  3833. <td>不容易</td>
    3834. 

  3834. <td>容易</td>
    3835. 

  3835. <td>容易</td>
    3836. 

  3836. </tr>
    3837. 

  3837. <tr class="even">
    3838. 

  3838. <td>数据存储</td>
    3839. 

  3839. <td>数据库</td>
    3840. 

  3840. <td>无</td>
    3841. 

  3841. <td>基于 git 的数据库</td>
    3842. 

  3842. </tr>
    3843. 

  3843. </tbody>
    3844. 

  3844. </table>
    3845. 

  3845. <p>现在，我们已经达成了一定的共识，有了几个方案可以供用户选择。而这时，我们并不了解进一步的需求，只能等下面的结果。</p>
    3846. 

  3846. <p>客户需要可以看到文章的修改变化，这时就去除了静态博客。现在还有第1和第3种方案可以选，考虑到第3种方案实现难度比较大，不易短期内实现。并且第3种方案可以依赖于第1种方案，就采取了动态博客的方案。</p>
    3847. 

  3847. <p>但是，问题实现上才刚刚开始。</p>
    3848. 

  3848. <h4 id="我们使用怎样的技术">我们使用怎样的技术？</h4>
    3849. 

  3849. <p>作为一个团队，我们需要优先考虑这个问题。使用怎样的技术解决方案？而这是一个更复杂的问题，这取决于我们团队的技术组成，以及未来的团队组成。</p>
    3850. 

  3850. <p>如果在现有的系统中，我们使用的是 Java 语言。并不意味着，每个人都喜欢使用 Java 语言。因为随着团队的变动，做这个技术决定的那些人有可能已经不在这个团队里。即使那些人还在，也并不意味着我们喜欢在未来使用这个语言。当时的技术决策都是在当时的环境下产生的，在现在看来很扯的技术决策，有可能在当时是最好的技术决策。</p>
    3851. 

  3851. <p>对于一个优秀的团队来说，不存在一个人对所有的技术栈都擅长的情况——除非这个团队所从事的业务范围比较小。在一个复杂的系统里，每个人都负责系统的相应的一部分。尽管到目前为止并没有好的机会去构建自己的团队，但是也希望总有一天有这样的机会。在这样的团队里，只需要有一个人负责整个系统的架构。其余的人可以在自己擅长的层级里构建自己的架构。因此，让我们再回到我们的博客中去，现在我们已经决定使用动态的博客。然后呢？</p>
    3852. 

  3852. <p>作为一个博客我们至少有前后台，这样我们可能就需要两个开发人员。</p>
    3853. 

  3853. <figure>
    3854. 

  3854. <img src="assets/article/chapter8/blog-basic.png" alt="前后台" /><figcaption>前后台</figcaption>
    3855. 

  3855. </figure>
    3856. 

  3856. <p>（PS：当然，我们也可以使用 React，但是在这里先让我们忽略掉这个框架，紧耦合会削弱系统的健壮性。）</p>
    3857. 

  3857. <p>接着，作为一个前端开发人员，我们还需要考虑的两个问题是：</p>
    3858. 

  3858. <ol type="1">
    3859. 

  3859. <li><strong>我们的博客系统是否是单页面应用？</strong>。</li>
    3860. 

  3860. <li><strong>要不要做成响应式设计</strong>。</li>
    3861. 

  3861. </ol>
    3862. 

  3862. <p>第二个问题不需要和后台开发人员做沟通就可以做决定了。而第一个问题，我们则需要和后台开发人员做决定。单页面应用的天然优势就是：由于系统本身是解耦的，他与后台模板系统脱离。这样在我们更换前端或者后台的时候，不需要去考虑使用何种技术——因为我们使用 API 作为接口。现在，我们决定做成单页面应用，那么我们就需要定义一个 API。之后，我们就可以决定在前台使用何种框架： AngularJS、Backbone、Vue.js、jQuery，接着我们的架构可以进一步完善：</p>
    3863. 

  3863. <figure>
    3864. 

  3864. <img src="assets/article/chapter8/blog-with-frontend.png" alt="含前端的架构" /><figcaption>含前端的架构</figcaption>
    3865. 

  3865. </figure>
    3866. 

  3866. <p>在这时，后台人员也可以自由地选择自己的框架、语言。后台开发人员只需要关注于生成一个 RESTful API 即可，而他也需要一个好的 Model 层来与数据库交付。</p>
    3867. 

  3867. <figure>
    3868. 

  3868. <img src="assets/article/chapter8/blog-with-fe-be.png" alt="含前端后台的架构" /><figcaption>含前端后台的架构</figcaption>
    3869. 

  3869. </figure>
    3870. 

  3870. <p>现在，我们似乎已经完成了大部分的工作？我们还需要：</p>
    3871. 

  3871. <ol type="1">
    3872. 

  3872. <li>部署到何处操作系统</li>
    3873. 

  3873. <li>使用何处数据库</li>
    3874. 

  3874. <li>如何部署</li>
    3875. 

  3875. <li>如何分析数据</li>
    3876. 

  3876. <li>如何测试</li>
    3877. 

  3877. <li>。。。</li>
    3878. 

  3878. </ol>
    3879. 

  3879. <p>相信看完之前的章节，你也有了一定的经验了，也可以成为一个架构师了。</p>
    3880. 

  3880. <h3 id="相关阅读资料">相关阅读资料</h3>
    3881. 

  3881. <p>-《程序员必读之软件架构》</p>
    3882. 

  3882. <h2 id="架构解耦">架构解耦</h2>
    3883. 

  3883. <p>解耦是一件很有意思的过程，它也能反应架构的变迁。</p>
    3884. 

  3884. <h3 id="从-mvc-到微服务">从 MVC 到微服务</h3>
    3885. 

  3885. <p>在我初识架构是什么的时候，我看到了 MVC 模式架构。这种模式是基于分层的结构，要理解起逻辑也很简单。这个模式如下图所示：</p>
    3886. 

  3886. <figure>
    3887. 

  3887. <img src="assets/article/chapter8/spring-mvc.png" alt="Spring MVC" /><figcaption>Spring MVC</figcaption>
    3888. 

  3888. </figure>
    3889. 

  3889. <p>由我们的 Front controller 来处理由客户端（浏览器）发过来的请求，实际上这里的 Front controller 是 DispatcherServlet。 DispatcherServlet 负责将请求派发到特定的 handler，接着交由对应的Controller来处理这个请求。依据请求的内容，Controller 将创建相应 model。随后这个 model 将传到前端框架中渲染，最后再返回给浏览器。</p>
    3890. 

  3890. <p>但是这样的架构充满了太多的问题，如 view 与 controller 的紧密耦合、controller 粒度难以把控的问题等等。</p>
    3891. 

  3891. <h4 id="django-mtv">Django MTV</h4>
    3892. 

  3892. <p>我使用 Django 差不多有四年了，主要是用在我的博客上。与 MVC 模式一对比，我发现 Django 在分层上还是很有鲜明特性的：</p>
    3893. 

  3893. <figure>
    3894. 

  3894. <img src="assets/article/chapter8/django-mtv.png" alt="Django MTV架构" /><figcaption>Django MTV架构</figcaption>
    3895. 

  3895. </figure>
    3896. 

  3896. <p>在 Django 中没有 Controller 的概念，Controller 做的事都交由 URL Dispatcher，而这是一个高级的 URL Dispatcher。它使用正则表达式匹配 URL，然后调用合适的 Python 函数。然后这个函数就交由相应的 View 层来处理，而这个 View 层则是处理业务逻辑的地方。处理完后，Model 将传到 Template 层来处理。</p>
    3897. 

  3897. <p>对比如下图如示：</p>
    3898. 

  3898. <table>
    3899. 

  3899. <thead>
    3900. 

  3900. <tr class="header">
    3901. 

  3901. <th>传统的MVC架构</th>
    3902. 

  3902. <th>Django 架构</th>
    3903. 

  3903. </tr>
    3904. 

  3904. </thead>
    3905. 

  3905. <tbody>
    3906. 

  3906. <tr class="odd">
    3907. 

  3907. <td>Model</td>
    3908. 

  3908. <td>Model(Data Access Logic)</td>
    3909. 

  3909. </tr>
    3910. 

  3910. <tr class="even">
    3911. 

  3911. <td>View</td>
    3912. 

  3912. <td>Template(Presentation Logic)</td>
    3913. 

  3913. </tr>
    3914. 

  3914. <tr class="odd">
    3915. 

  3915. <td>View</td>
    3916. 

  3916. <td>View(Business Logic)</td>
    3917. 

  3917. </tr>
    3918. 

  3918. <tr class="even">
    3919. 

  3919. <td>Controller</td>
    3920. 

  3920. <td>Django itself</td>
    3921. 

  3921. </tr>
    3922. 

  3922. </tbody>
    3923. 

  3923. </table>
    3924. 

  3924. <p>从上面的对比中，我们可以发现 Django 把 View 分层了。以 Django 对于 MVC 的解释来说，视图用来描述要展现给用户的数据。 而在 ROR 等其他的 MVC 框架中，控制器负责决定向用户展现哪些数据，而视图决定如何展现数据。</p>
    3925. 

  3925. <p>联想起我最近在学的 Scala 中的 Play 框架，我发现了其中诸多的相似之处：</p>
    3926. 

  3926. <figure>
    3927. 

  3927. <img src="assets/article/chapter8/playarchtectureasyncrequest.png" alt="Play 框架异步请求" /><figcaption>Play 框架异步请求</figcaption>
    3928. 

  3928. </figure>
    3929. 

  3929. <p>虽然在 Play 中，也有 Controller 的概念。但是对于 URL 的处理先交给了 Routes 来处理，随后再交给 Controller 中的函数来处理。</p>
    3930. 

  3930. <p>不过与一般 MVC 架构的最大不同之处，怕是在于 Django 的 APP 架构。Django 中有一个名为 APP 的概念，它是实现某种功能的Web 应用程序。如果我们要设计一个博客系统的话，那么在这个项目中，Blogpost 是一个 APP、评论是一个 APP、用户管理是一个 APP等等。每个 APP 之中，都会有自己的 Model、View 和 Controller。其架构如下图所示：</p>
    3931. 

  3931. <figure>
    3932. 

  3932. <img src="assets/article/chapter8/django_app_arch.jpg" alt="Django APP 架构" /><figcaption>Django APP 架构</figcaption>
    3933. 

  3933. </figure>
    3934. 

  3934. <p>当我们需要创建一个新的功能的时候，我们只需要创建一个新的 APP 即可——为这个 APP 配置新的 URL、创建新的 Model 以及新的 View。如果功能上没有与原来的代码重复的话，那么这就是一个独立的 APP，并且我们可以将这个 APP 的代码 Copy/Paste 到一个新的项目中，并且不需要做修改。</p>
    3935. 

  3935. <p>与一般的 MVC 架构相比，我们会发现我们细化了这些业务逻辑原来的三层结构，会随着 APP 的数量发生变化。如果我们有三个 APP 的话，那么我们相当于有3*三层，但是他不是等于九层。这样做可以从代码上直接减少逻辑的思考，让我们可以更加集中注意力于业务实现，同时也利于我们后期维护。</p>
    3936. 

  3936. <p>虽是如此，后来我意识到了这样的架构并没有太多的先进之处。而这实际上是一个美好但是不现实的东西，因为我们还是使用同一个数据库。</p>
    3937. 

  3937. <h4 id="微服务与-reactive">微服务与 Reactive</h4>
    3938. 

  3938. <p>在微服务架构中，提倡将单一应用程序划分成一组小的服务，这些服务之间互相协调、互相配合。每个服务运行在其独立的进程中，服务与服务间采用轻量级的通信机制互相沟通。每个服务都应该有自己独立的数据库来存储数据。</p>
    3939. 

  3939. <figure>
    3940. 

  3940. <img src="assets/article/chapter8/decentralised-data.png" alt="分散数据" /><figcaption>分散数据</figcaption>
    3941. 

  3941. </figure>
    3942. 

  3942. <p>Django 从某种意义上有点接近微服务的概念，只是实际上并没有完全实现。因为它没有实现 Play 框架的异步请求机制。抱句话来说，应用很容易就会在调用 JDBC、Streaming API、HTTP 请求等一系列的请求中发生阻塞。</p>
    3943. 

  3943. <p>这些服务都是独立的，对于服务的请求也是独立的。使用微服务来构建的应用，不会因为一个服务的瘫痪让整个系统瘫痪。最后，这一个个的微服务将合并成整个系统。</p>
    3944. 

  3944. <figure>
    3945. 

  3945. <img src="assets/article/chapter8/combinedlist.png" alt="Combined List" /><figcaption>Combined List</figcaption>
    3946. 

  3946. </figure>
    3947. 

  3947. <p>我们将后台的服务变成微服务的架构，在前台使用 Reactive 编程，这样就可以结合两者的优势，解耦出更好的架构模式。然而，这其中还有一个让人不爽的问题，即数据库。如果我们使用多个数据库，那么维护成本也随着上升。而如果我们可以在后台使用类似于微服务的 Django MTV 架构，并且它可以支持异步请求的话，并在前台使用 Reactive 来编程，是不是就会更爽一点？</p>
    3948. 

  3948. <h3 id="cqrs">CQRS</h3>
    3949. 

  3949. <p>对于复杂的系统来说，上面的做法做确实很不错。但是对于一个简单地系统来说，这样做是不是玩过火了？如果我们要设计一个博客系统的话，是不是可以考虑将 Write/Read 分离就可以了？</p>
    3950. 

  3950. <blockquote>
    3951. 

  3951. <p>命令和查询责任分离 Command Query Responsibility Segregation（CQRS）是一种将系统的读写操作分离为两种独立模型的架构模式。</p>
    3952. 

  3952. </blockquote>
    3953. 

  3953. <h4 id="cqs">CQS</h4>
    3954. 

  3954. <p>对于这个架构的深入思考是起源于之前在理解 DDD。据说在 DDD 领域中被广泛使用。理解 CQRS 可以从分离 Model 和 API 集合来处理读取和写入请求开始，即 CQS（Command Query Separation，命令查询分离）模式。CQS 模式最早由软件大师Bertrand Meyer（Eiffel语言之父，面向对象开-闭原则 OCP 提出者）提出。他认为，对象的行为仅有两种：命令和查询。</p>
    3955. 

  3955. <p>这个类型的架构如下图所示：</p>
    3956. 

  3956. <figure>
    3957. 

  3957. <img src="assets/article/chapter8/cqrs-2.png" alt="CQS Basic" /><figcaption>CQS Basic</figcaption>
    3958. 

  3958. </figure>
    3959. 

  3959. <blockquote>
    3960. 

  3960. <p>除了编写优化的查询类型，它可以让我们轻松换 API 的一部分读一些缓存机制，甚至移动读取 API 的请求到另一台服务器。</p>
    3961. 

  3961. </blockquote>
    3962. 

  3962. <p>对于读取和写入相差不多的应用来说，这种架构看起来还是不错的。而这种架构还存在一个瓶颈问题，使用同一个 RDBMS。对于写入多、读取少的应用来说，这种架构还是存在着不合理性。</p>
    3963. 

  3963. <p>为了解决这个问题，人们自然是使用缓存来解决这个问题了。我们在我们的应用服务外有一个 HTTP 服务器，而在 HTTP 服务器之外有一个缓存服务器，用于缓存用户常驻的一些资源。如下图所示：</p>
    3964. 

  3964. <figure>
    3965. 

  3965. <img src="assets/article/chapter8/cache-website-blog.png" alt="带缓存的 Web 架构" /><figcaption>带缓存的 Web 架构</figcaption>
    3966. 

  3966. </figure>
    3967. 

  3967. <p>而实际上这样的服务器可能是多余的——我们为什么不直接生成HTML就好了？</p>
    3968. 

  3968. <h4 id="编辑-发布分离">编辑-发布分离</h4>
    3969. 

  3969. <p>或许你听过 Martin Folwer 提出的编辑-发布分享式架构：即文章在编辑时是一个形式，而发表时是另一个形式，比如用 Markdown 编辑，而用 HTML 发表。</p>
    3970. 

  3970. <figure>
    3971. 

  3971. <img src="assets/article/chapter8/edit-pub.jpg" alt="编辑-发布分离" /><figcaption>编辑-发布分离</figcaption>
    3972. 

  3972. </figure>
    3973. 

  3973. <p>而最典型的应用就是流行于 GitHub 的 Hexo、Jekyll 框架之类的静态网站。如下图所示的是 Hexo 的工作流：</p>
    3974. 

  3974. <figure>
    3975. 

  3975. <img src="assets/article/chapter8/hexo-workflow.png" alt="Hexo 站点工作流" /><figcaption>Hexo 站点工作流</figcaption>
    3976. 

  3976. </figure>
    3977. 

  3977. <p>我们在本地生成我们的项目，然后可以创建一个新的博客、开始编写内容等等。接着，我们可以在本地运行起这个服务，除了查看博客的内容，还可以修改样式等等。完成上面的工作后，我们就可以生成静态内容，然后部署我们的应用到GitHub Page上。这一切看上去都完美，我们有两个不同的数据源——一个是 md 格式的文本，一个是最后生成的 HTML。它们已经实现了读写/分离：</p>
    3978. 

  3978. <figure>
    3979. 

  3979. <img src="assets/article/chapter8/cqrs-separate-storage.png" alt="CQRS 进阶" /><figcaption>CQRS 进阶</figcaption>
    3980. 

  3980. </figure>
    3981. 

  3981. <p>但是作为一个前端开发人员，没有 JSON，用不了 Ajax 请求，我怎么把博客做成一个单页面应用？</p>
    3982. 

  3982. <h4 id="编辑-发布-开发分离">编辑-发布-开发分离</h4>
    3983. 

  3983. <p>我们需要将博客转为 JSON，而不是一个 hexo 之类的格式。有了这些 JSON 文件的存在，我们就可以把 Git 当成一个 NoSQL 数据库。同时这些 JSON 文件也可以直接被当成 API 响应来使用。</p>
    3984. 

  3984. <figure>
    3985. 

  3985. <img src="assets/article/chapter8/git-internals-commits.png" alt="Git As NoSQL DB" /><figcaption>Git As NoSQL DB</figcaption>
    3986. 

  3986. </figure>
    3987. 

  3987. <p>其次，这些博客还需要像 hexo 一样生成 HTML。</p>
    3988. 

  3988. <p>并且，开发人员在开发的时候不会影响到编辑的使用，于是就有了下面的架构：</p>
    3989. 

  3989. <figure>
    3990. 

  3990. <img src="assets/article/chapter8/travis-edit-publish-code.png" alt="基于 Git 的编辑-发布分离" /><figcaption>基于 Git 的编辑-发布分离</figcaption>
    3991. 

  3991. </figure>
    3992. 

  3992. <p>在这其中我们有两种不同的数据形式，即存储着 Markdown 数据的 JSON 文件和最后生成的 HTML。</p>
    3993. 

  3993. <p>对博客数量不是很大的网站，或者说一般的网站来说，用上面的技术都不是问题。然而有大量数据的网站怎么办？使用 EventBus：</p>
    3994. 

  3994. <figure>
    3995. 

  3995. <img src="assets/article/chapter8/cqrs-arch.png" alt="CQRS 和 EventBus" /><figcaption>CQRS 和 EventBus</figcaption>
    3996. 

  3996. </figure>
    3997. 

  3997. <p>在我之前玩的一个 Demo 中，使用 Python 中的 Scrapy 爬虫来抓取现有的动态网站，并将其变成静态网站部署到 AWS S3上。</p>
    3998. 

  3998. <p>但是上面仅仅只是实现了文章的显示，我们还存在一些问题：</p>
    3999. 

  3999. <ol type="1">
    4000. 

  4000. <li>搜索功能</li>
    4001. 

  4001. <li>AutoComplete</li>
    4002. 

  4002. </ol>
    4003. 

  4003. <p>等等的这些服务是没有用静态 API 来实现的。</p>
    4004. 

  4004. <h3 id="cqrs-结合微服务">CQRS 结合微服务</h3>
    4005. 

  4005. <p>既然可以有这么多分法，并且我们都已经准备好分它们了。那么分了之后，我们就可以把他们都合到一起了。</p>
    4006. 

  4006. <h4 id="nginx-as-dispatcher">Nginx as Dispatcher</h4>
    4007. 

  4007. <p>最常见的解耦应用的方式中，就有一种是基于 Nginx 来分发 URL 请求。在这种情况下，对于 API 的使用者，或者最终用户来说，他们都是同一个 API。只是在后台里，这个 API 已经是不同的几个 API 组成，如下图所示：</p>
    4008. 

  4008. <figure>
    4009. 

  4009. <img src="assets/article/chapter8/nginx-microservices.png" alt="Nginx 解耦微服务" /><figcaption>Nginx 解耦微服务</figcaption>
    4010. 

  4010. </figure>
    4011. 

  4011. <p>客户端的请求来到 API Gateway，根据不同的请求类型，这些 URL 被分发到不同的 Service，如 Review Service、Order Service 等等。</p>
    4012. 

  4012. <p>对于我们想要设计的系统来说也是如此，我们可以通过这个 Dispatcher 来解耦我们的服务。</p>
    4013. 

  4013. <h4 id="cqrs-结合微服务-1">CQRS 结合微服务</h4>
    4014. 

  4014. <p>现在，我们想要的系统的雏形已经出现了。</p>
    4015. 

  4015. <p>从源头上来说，我们把能缓存的内容变成了静态的 HTML，通过 CDN 来分发。并且，我们还可以将不同的服务独立出来。</p>
    4016. 

  4016. <p>从实现上来说，我们将博客的数据变成了两部分： 一个以 Git + JSON 格式存在的 API，它除了可以用于生成 HTML，另外一部分作为 API 来使用。</p>
    4017. 

  4017. <figure>
    4018. 

  4018. <img src="assets/article/chapter8/dispatcher-services.png" alt="CQRS 结合微服务" /><figcaption>CQRS 结合微服务</figcaption>
    4019. 

  4019. </figure>
    4020. 

  4020. <p>最后，我们可以通过上面说到的 Nginx 或者 Apache 来当这里的 Request Dispatcher。</p>
    4021. 

  4021. <section class="footnotes">
    4022. 

  4022. <hr />
    4023. 

  4023. <ol>
    4024. 

  4024. <li id="fn1"><p><a href="https://www.ibm.com/developerworks/cn/java/j-lo-jenkins/">基于 Jenkins 快速搭建持续集成环境</a><a href="#fnref1">↩</a></p></li>
    4025. 

  4025. <li id="fn2"><p>以一幢有少许破窗的建筑为例，如果那些窗不被修理好，可能将会有破坏者破坏更多的窗户。最终他们甚至会闯入建筑内，如果发现无人居住，也许就在那里定居或者纵火。又或想像一条人行道有些许纸屑，如果无人清理，不久后就会有更多垃圾，最终人们会视为理所当然地将垃圾顺手丢弃在地上。因此破窗理论强调着力打击轻微罪行有助减少更严重罪案，应该以零容忍的态度面对罪案。<a href="#fnref2">↩</a></p></li>
    4026. 

  4026. </ol>
    4027. 

  4027. </section>
    4028. 

  4028. <script>
    4029. 

  4029.   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    4030. 

  4030.   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    4031. 

  4031.   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    4032. 

  4032.   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    4033. 

  4033. 

  4034.   ga('create', 'UA-71907748-3', 'auto');
    4035. 

  4035.   ga('send', 'pageview');
    4036. 

  4036. 

  4037. </script>
    4038. 

  4038. </body>
    4039. 

  4039. </html>
    4040.