摘要：不過(guò)細(xì)想想，我郵只有前端的選修課啥的，課程也不是那么就業(yè)導(dǎo)向。至少目前，很少有大公司完全把作為前后端通用的技術(shù)棧。不能把簡(jiǎn)單看做是在服務(wù)端的延展。編譯這個(gè)思想在前端領(lǐng)域很重要不改變現(xiàn)有的語(yǔ)言環(huán)境同時(shí)進(jìn)行最佳的工程實(shí)踐。

P.S. 噴神請(qǐng)繞道，大神勿噴，不引戰(zhàn)，不攻擊，不鉆牛角尖。

大二時(shí)第一次接觸前端。許多同學(xué)估計(jì)都想過(guò)要做一個(gè)網(wǎng)站，大部分又是從PHP開(kāi)始的（誰(shuí)讓它是世界上最好的語(yǔ)言呢）。后端語(yǔ)言參與渲染HTML一直很主流，跟著教程做，你會(huì)寫(xiě)一堆樣式表，到后來(lái)也許是需要在提交表單時(shí)進(jìn)行客戶端驗(yàn)證，你開(kāi)始寫(xiě)一些JS。
想做個(gè)網(wǎng)站啥的（以前app沒(méi)有那么多），必須要學(xué)會(huì)HTML、CSS、JS，HTML構(gòu)造結(jié)構(gòu)，CSS表現(xiàn)樣式，JS決定行為。JS似乎充滿奇技淫巧，可以做各種效果啊，飛雪花片啊，搞咱們選課、評(píng)老師的網(wǎng)站啊。

后來(lái)接觸了jQuery，用起來(lái)無(wú)比順手，特別是看完《DOM編程藝術(shù)》以后。那段時(shí)間擔(dān)心JS掌握得不好，心想總是用jQuery以后不會(huì)寫(xiě)Native怎么辦？也會(huì)關(guān)注“可以直接學(xué)習(xí)jQuery嗎”這樣一些問(wèn)題。學(xué)習(xí)了Ajax后又做過(guò)瀑布流圖片墻，覺(jué)得無(wú)比興奮。不過(guò)認(rèn)識(shí)也僅僅停留在異步加載局部更新DOM可以創(chuàng)造更好地用戶體驗(yàn)。

實(shí)習(xí)期間，看到公司前端做雪碧圖、切片、搞div、css布局，然后花很多時(shí)間在瀏覽器兼容的問(wèn)題的調(diào)試上。尤其是活動(dòng)頁(yè)面，寫(xiě)HTML、CSS基本占到工程的80%，JS寫(xiě)起來(lái)很快。后來(lái)Bootstrap逐漸流行起來(lái)，后端同學(xué)可以直接寫(xiě)后臺(tái)，甚至都不需要前端和射雞師了。加點(diǎn)柵格，加幾個(gè)類，輪播組件啥的樣樣有，再引入jQuery，前端便成為了順帶做的事了。

我接觸前端的過(guò)程沒(méi)有系統(tǒng)性，充滿了探（瞎）索（搞），也缺少引導(dǎo)。不過(guò)細(xì)想想，我郵只有前端的選修課啥的，課程也不是那么就業(yè)導(dǎo)向。就像論壇里的同學(xué)，自己搞，自己提升。

我們把上面這些點(diǎn)提取出來(lái)：HTML、CSS、JS、jQuery、Bootstrap，再刷刷題，看看基礎(chǔ)知識(shí)，基本就可以參加校招了。

那些求入門、求實(shí)習(xí)、趕春招、趕秋招的同學(xué)一定來(lái)得及：不過(guò)潑一盆冷水，進(jìn)入大公司只是開(kāi)始，你的認(rèn)識(shí)、習(xí)慣、思維方式最終會(huì)決定你事業(yè)或者專業(yè)的高度。

面對(duì)新技術(shù)我覺(jué)得了解它為什么產(chǎn)生，解決什么問(wèn)題，會(huì)怎么發(fā)展，如何在現(xiàn)有的工程中進(jìn)行實(shí)踐，比討論它們的優(yōu)劣更有意義：

首先 html5 不是一個(gè)新技術(shù)，而是在現(xiàn)代瀏覽器中使用CSS 3等特性進(jìn)行前端開(kāi)發(fā)的過(guò)程。以前我們更關(guān)注瀏覽器的差異性，而現(xiàn)代的瀏覽器對(duì)標(biāo)準(zhǔn)的支持越來(lái)越統(tǒng)一。

回到j(luò)Query，在web app中使用越來(lái)越少了，一方面這個(gè)庫(kù)太“大”了（吃流量），從頁(yè)面加載、打開(kāi)速度理論看，英明的老大會(huì)把它砍掉。針對(duì)庫(kù)大小的問(wèn)題，Zepto.js是一個(gè)解決方案。這個(gè)庫(kù)與jQuery API相對(duì)統(tǒng)一，拋卻了很多瀏覽器的兼容性的代碼。

但是現(xiàn)在瀏覽器的querySelector方法，已經(jīng)很好地解決了jQuery中的“Query”，使用原生的fetch方法請(qǐng)求數(shù)據(jù)，返回Promise也能比jQuery.ajax()的實(shí)現(xiàn)更好、更清晰的解決問(wèn)題。

看待jQuery，我覺(jué)得應(yīng)該更多看到它的歷史意義。jQuery，一定程度上成為了工業(yè)標(biāo)準(zhǔn)，影響了JS語(yǔ)言的發(fā)展和其他JS庫(kù)的構(gòu)建。如同coffeescript對(duì)ES2015的影響。至于實(shí)踐，越來(lái)越多的web已經(jīng)不依賴jQuery進(jìn)行開(kāi)發(fā)了。

前端這幾年進(jìn)步太快了，我嘗試按照不同方向討論一下這些技術(shù)棧。

我們討論的JavaScript更多是以瀏覽器為宿主的ECMAScript，同源的ActionScript以Adobe的Flash作為宿主的。

瀏覽器中的JavaScript提供了大量與瀏覽器相關(guān)的API。脫離這些特定API看JavaScript，異步是它特別重要的一個(gè)特性。Google的V8引擎，讓JavaScript的運(yùn)行時(shí)性能大大提升，是Node.js的產(chǎn)生另一個(gè)必要的條件。

Jser突然可以全棧了，面對(duì)新的技術(shù)，不乏布道師。國(guó)內(nèi)第一本Node.js書(shū)籍是BYVoid寫(xiě)的，當(dāng)時(shí)盛傳這個(gè)同學(xué)拿到了我司的60w的offer，一片沸沸揚(yáng)揚(yáng)；大家可以向他學(xué)習(xí)，在一個(gè)技術(shù)還未在祖國(guó)大地流行起來(lái)時(shí)，迅速寫(xiě)一本書(shū)。

至少目前，很少有大公司完全把JavaScript作為前后端通用的技術(shù)棧。傳統(tǒng)的后端語(yǔ)言和技術(shù)并未沒(méi)有被代替的危險(xiǎn)。不能把Node.js簡(jiǎn)單看做是JavaScript在服務(wù)端的延展。

我覺(jué)得，Node.js很大程度拓展了JavaScript的使用范圍，改變了傳統(tǒng)前端的工作流程（后面提）。特別是NPM的產(chǎn)生，意義非常之大，它讓JavaScript成為了一個(gè)生態(tài)系統(tǒng)，CommonJs也在JavaScript模塊化未成熟之前，提供了優(yōu)秀的模塊化解決方案。

通過(guò)package.json，我們可以依賴已有的NPM項(xiàng)目構(gòu)建自己的庫(kù)。前段時(shí)間，某個(gè)同學(xué)應(yīng)為法律的問(wèn)題，撤消了發(fā)布在NPM上的leftpad包，短短11行代碼的包撤消后，造成了React-Native、Babel等項(xiàng)目構(gòu)建失敗的災(zāi)難。

module.exports = leftpad;
function leftpad (str, len, ch) {
  str = String(str);
  var i = -1;
  if (!ch && ch !== 0) ch = " ";
  len = len - str.length;
  while (++i < len) {
    str = ch + str;
  }
  return str;
}

許多人反思，為啥那么簡(jiǎn)單的代碼要依賴，不自己寫(xiě)？是不是Jser忘記了怎么寫(xiě)代碼了？我覺(jué)得，盲目解除對(duì)其他庫(kù)的依賴會(huì)失去NPM社區(qū)的初衷，除非你想做超級(jí)輪子哥。NPM生態(tài)圈制定一下撤包的規(guī)則，這種災(zāi)難或許以后就不會(huì)發(fā)生。自給自足的同學(xué)們，如果lodash撤包了，或者是tj holowaychuk大神激情起來(lái)刪了所有包，你們?cè)趺崔k？

Node.js也讓服務(wù)端渲染成為可能（universal），代碼段技能在服務(wù)端運(yùn)行也可以在客戶端運(yùn)行（universal）。從這點(diǎn)看，代碼更容易維護(hù)和編寫(xiě)了，部分解耦了前端和服務(wù)端。對(duì)于SEO這個(gè)令人頭大的商業(yè)問(wèn)題，服務(wù)端渲染可以較好地解決。感興趣的同學(xué)，可以去了解一下搜索引擎的爬蟲(chóng)是如何干活的。

總結(jié)一下，Node.js的產(chǎn)生完善了JavaScript生態(tài)圈，讓大家看到了JavaScript的潛力，讓構(gòu)建更為龐大的JavaScript項(xiàng)目成為可能，同時(shí)前端可以使用更為工程化的流程和工具進(jìn)行開(kāi)發(fā)。

推薦大家一定去了解和使用Node.js，使用NPM構(gòu)建自己的項(xiàng)目。

JSON變成了事實(shí)上Web數(shù)據(jù)的傳輸標(biāo)準(zhǔn)，這個(gè)是JavaScript另一大貢獻(xiàn)。

對(duì)終端的開(kāi)發(fā)，使用JSON數(shù)據(jù)后使得服務(wù)端的開(kāi)發(fā)更加專注和統(tǒng)一。

 data.each do |key, value|
   puts "Key #{key.inspect} has value #{value.inspect}"
 end

這種代碼展示了服務(wù)端渲染的能力。但是對(duì)于對(duì)于iOS、Android等原生應(yīng)用，除了在WebView中，無(wú)法消費(fèi)這些渲染好的HTML。

JSON和App的流行，讓后端語(yǔ)言在渲染方面逐漸讓道，向純粹的Service發(fā)展。比如beta版本的 Rails 5 大大增強(qiáng)了 Rails 作為 API Service的能力。

從Ruby 或者 PHP轉(zhuǎn)換到JSON需要相應(yīng)的映射函數(shù)，Node.js來(lái)得更為直接，因?yàn)镴SON就是一個(gè)普通的JavaScript對(duì)象。

大家可以去學(xué)習(xí)成熟的JSON風(fēng)格指南。同時(shí)通過(guò)實(shí)踐逐步加強(qiáng)對(duì)JSON的認(rèn)識(shí)，設(shè)計(jì)更為規(guī)范的JSON（這個(gè)會(huì)森森影響到Mongo的存儲(chǔ)，查詢效率，React的性能）。

二進(jìn)制處理后的JSON，是MongoDB存儲(chǔ)的內(nèi)容，這個(gè)基于文檔的數(shù)據(jù)庫(kù)被越來(lái)越多的公司使用，使得編寫(xiě)嵌套數(shù)據(jù)，存儲(chǔ)流數(shù)據(jù)更為容易。傳統(tǒng)的關(guān)系數(shù)據(jù)庫(kù)，將查詢結(jié)果表示為JSON，需要經(jīng)過(guò)查詢、封裝、Transform等多個(gè)步驟，而MongoDB的查詢結(jié)果就是JSON，直接查詢直接使用。當(dāng)然我們看到，在處理事務(wù)型問(wèn)題上，關(guān)系型數(shù)據(jù)庫(kù)還是首選，比如電商。我們?nèi)グH關(guān)系型數(shù)據(jù)庫(kù)是否落后沒(méi)有意義——使用場(chǎng)景不同。

如果大家有興趣，可以去嘗試MongoDB，感受一下沖擊。

接下來(lái)提一下前端工程化。腳本語(yǔ)言并不一定需要編譯再執(zhí)行。傳統(tǒng)的工程中，通過(guò)

/*****
          

    /(html)
View
    (iOS)
           UIView

          click
    /(html)
Click
    (iOS)
          TouchUpInside

*****/