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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

通過package.json，我們可以依賴已有的NPM項目構(gòu)建自己的庫。前段時間，某個同學(xué)應(yīng)為法律的問題，撤消了發(fā)布在NPM上的leftpad包，短短11行代碼的包撤消后，造成了React-Native、Babel等項目構(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;
}

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

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

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

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

JSON變成了事實上Web數(shù)據(jù)的傳輸標準，這個是JavaScript另一大貢獻。

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

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

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

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

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

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

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

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

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

/*****
          

    /(html)
View
    (iOS)
           UIView

          click
    /(html)
Click
    (iOS)
          TouchUpInside

*****/