" JavaScript 可以……""嘛，不就是操作一下 DOM，可以讓元素飛來飛去嗎""JavaScript 是……""不就是用 jQuery 讓網頁動起來，頂多就是再用用 Ajax 和后端進行一下數據交換嗎""JavaScript 是一門……""最討厭和鄙視這種弱類型不需要編譯的腳本語言了，你說 OOP? 扯淡的吧，JS 有對象嗎""……"

　0x00. 前言

早上起床慣例刷刷微博，突然看到 React Native 宣布支持 Android 的消息，一時感覺 Facebook 太給力了，不僅沒有推遲發布 React Native For Android 而且還比之前公告的時間提前了一些。立馬下床打開電腦趕緊上官網，心想著用 JS 寫原生安卓的日子終于要來了。樂樂呵呵地打開文檔，然后瞬間就傻眼了。好吧，盡欺負我們這些買不起 Mac 的窮學生。

雖然暫且還是用不了 React Native，但是突然就感覺到了 JS 的強大，細細一想，還真是暗暗作喜，這么惡劣的語言也居然能做出這么多有趣的事情，也真是苦了那些 JS 工程師啊。于是有了這篇稍稍對 JavaScript 暢想的文章。第一次寫這類文章，還只是一名在校學生，固然沒有大神們的那種境界，有錯誤和不妥之處還請指出，我定虛心學習。

　0x01. 瀏覽器中的 JavaScript

曾經很單純地認為能夠熟練地使用 jQuery/JavaScript 操作 DOM，能夠將一些高復用的組件注冊為插件就是掌握 JS 的標志。然而隨著自己接觸更多的人，接觸更多的技術才發現自己的無知和渺小，瀏覽器其實只是 JavaScript 的一個宿主環境，提供 JavaScript 引擎來解釋 JavaScript，瀏覽器環境下的 JavaScript 和 JavaScript 本身還是有很大區別的，瀏覽器下的 JavaScript 在 JavaScript 整個體系中其實也只是很小（但很重要）的一部分而已。

　0x02. JavaScript 能做什么1. Web 前端

很早以前各大公司對于 Web 標準的惡戰讓 JS 的環境異常惡劣，加之語言其本身的不成熟讓其功能僅限于一些簡單的前端交互。Ajax 技術的出現讓前端可以在不刷新頁面的情況下和后端進行數據交換，jQuery/zepto 等庫的盛行讓 JS 變得異常簡單，Bootstrap/Amaze UI 等 UI 框架更是讓前端的成本無限降低，RequireJS/SeaJs 讓 JavaScript 也可以進行依賴管理，MVVM（Model-View-ViewModel 的出現讓前后端的分離做到了極致，JavaScript 在前端領域前景明朗。

Ajax：掌握 Ajax - IBMdeveloperWorks

庫：jQuery/zepto

UI 框架：Bootstrap/AmazeUI

依賴管理：RequireJS/SeaJs

MVVM：AngularJS/Avalon

2. 后端之旅

2009年5月，Ryan Dah 發布了 Node 的最初版本。Node 是一個基于 Chrome JavaScript 運行時建立的平臺，它對 Google V8 引擎進行了封裝，使 JavaScript 第一次走出前端運行在了服務器上。這對 JavaScript 來說是一種質的突破，這使得 Web 編程可以只用一門語言便可完成。It's Amazing! Web 的大一統時代仿佛就要來了。同時 Node 也誕生了 npm，從此 JavaScript 也有了強大的包管理機制。

// 使用 Express 的 Hello worldvar express = require('express');var app = express();app.get('/', function (req, res) { res.send('Hello World!');});var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port);});

關于 Node：Node .js- Wikipedia/我們為什么要使用 NodeJS

Web 開發框架：Express/ThinkJS/Clouda

博客系統：Ghost/hexo

基于 Node 的前端自動化構建工具：Grunt/Gulp

3. Hybrid App

傳統上 JavaScript 只能在瀏覽器中運行，Node 的出現讓 JavaScript 運行在了服務端，然而只是這樣的話，好像還是少點什么。人們總是希望用一種方式去做所有的事情，于是聰明的工程師們就發明了 Hybrid App 這種形式，讓 JavaScript 在一定意義上運行在了移動設備上。然而當前 Hybrid App 雖然讓 JavaScript 也可以寫出 JAVA/Objective-C 才能實現的 APP，但是這種方式仍然沒有拋棄瀏覽器運行環境，對 WebView 有很強的依賴性，性能和原生應用還有很大差距。

對比：Native App、Web App 還是Hybrid App？

工具：PhoneGap/APICloud/AppCan

4. 桌面應用

至此 JavaScript 除了可以被瀏覽器解析，也可以作為后端語言使用，還可以用來構建移動端 APP。仿佛已經夠強大了吧，然而這還不夠，JavaScript 還可以用來構建桌面應用！

Node-webkit

Node-webkit 是一個 Web 應用程序運行時環境，它可以讓你以 Web 的方式來寫桌面應用程序，你可以用任何流行的 Web 技術來編寫一個跨平臺（Windows，Linux，MacOS）的桌面程序，并且性能和交互也是良好的，Teambition 桌面客戶端便是使用 Node-webkit 編寫的。目前在 GitHub 上有 24463 Star。

heX

heX 是有道公司開發的采用前端技術（HTML，CSS，JavaScript）開發桌面應用軟件的跨平臺解決方案，意在解決傳統桌面應用開發中繁瑣的 UI 和交互開發工作，使其變的簡單而高效。特別適合重 UI，重交互的桌面應用軟件。新版有道詞典 beta 版的首頁便是使用 heX 開發完成的。

Node-Webkit 作者王文睿：桌面應用的全新開發方式

Node-Webkit 文檔/Node-Webkit 教程

heX 介紹/heX 文檔

Electron

Electron（以前叫做 Atom Shell） 是 GitHub 開源的使用 Web 技術開發桌面應用的技術平臺。它允許你使用 HTML, CSS 和 JavaScript 編寫跨平臺的桌面應用。它是 io.js 運行時的衍生，專注于桌面應用而不是 web 服務端。Electron 不僅僅是一個支持打包 web 應用成為桌面應用的原生 web view。它現在包含 app 的自動升級、安裝包、崩潰報告、通知和一些其它原生桌面應用的功能——所有的這些都通過 JavaScript API 調用的。

使用 AngularJS 和 Electron 構建桌面應用

5. 神作 ReactReact

React（React.js） 是由 FaceBook 開發和維護的前端框架，目前在 GitHub 得到了 27900+ star。它摒棄了 MVC/MVVM 的模式，僅僅是做 UI，開創性地采用了 Virtual DOM（虛擬 DOM）避免了 DOM 操作消耗性能的問題，將 UI 拆分成不同的可組合、可復用、可維護的組件，組件和組件之間耦合度極低，開發效率大幅度增加。在前端 UI 組件化的趨勢下，這很值得去嘗試。instagram.com 全站都采用 React 進行開發。

上圖來自 @鬼道 的知乎回答如何評價 React Native？

// 簡單的官方示例 var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode);React Native

React Native 既擁有 Native 的用戶體驗，又保留 React 的開發效率。開源不到1周 GitHub Star 破萬，這簡直是逆天的成績啊！上線之初僅支持 iOS，React 也在9月14號對 Android 提供了支持服務，這幾天意味著你可以使用同一套邏輯和架構、同一門語言實現 Web、iOS、Android 的開發。由于各大平臺 API 和交互邏輯的不同，React Native 的理念是 “Learn once, write anywhere”，而不是曾經跨平臺流行的 “Write once, run anywhere” 。實際上 React Native 和 React 有很大的差別，但是邏輯和架構還是保持一致的。React Native 和 Hybrid 最大的區別是前者摒棄了飽受性能詬病的 WebView，通過 HTML 標簽和移動平臺的組件進行映射，仿佛是將 JS “編譯”成了原生語言一樣，性能和交互體驗會比 Hybrid 好上不少。目前在 GitHub 上有 18551 Star。

// 簡單的官方示例 // iOS var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function() {return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }, }); // Android var React = require('react-native'); var { DrawerLayoutAndroid, ProgressBarAndroid } = React; var App = React.createClass({ render: function() { return ( <DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}> <ProgressBarAndroid /> </DrawerLayoutAndroid> ); }, });

React 文檔

React 傻瓜教程/React 入門 - 阮一峰

React Native 文檔

React Native

6. 游戲

世界上最流行的 2D 游戲引擎之一 Cocos2d 和最流行的 3D 游戲引擎之一 Unity3D 均支持 JS 開發游戲。

Cocos2d-js

Cocos2d-JS 是 Cocos2d-x 的 JavaScript 版本，融合了 Cocos2d-html5 和Cocos2d-x JavaScript Bindings。它支持 Cocos2d-x 的所有核心特性并提供更簡單易用的 JavaScript 風格 API，并且天然支持原生、瀏覽器跨平臺應用。?

在3.0版中，Cocos2d-JS 完成了不同平臺工作流的徹底整合，為不同平臺提供了統一的開發體驗。無論開發 Web 應用還是原生應用，都可以便捷地采用 Cocos2d-JS 實現“一次開發，全平臺運行”。采用 Cocos2d-JS 開發的同一套 JavaScript 游戲代碼，可以同時運行在 Mac OS X, Windows, iOS, Android等原生平臺、以及所有現代瀏覽器上，這將使得我們的開發者輕松覆蓋幾乎所有發行渠道，帶來前所未有的機遇。另一方面，若開發者只想開發一款 Web 輕度休閑游戲，Cocos2d-JS 也專門為此類游戲定制了 Lite Version，直接將 Cocos2d-JS Lite Version 集成到頁面中即可使用。

Unity3D

Unity3D 是一個跨平臺的 3D 游戲引擎，與 Cocos2d 最大的區別在于前者主要面對 2D 游戲開發者，后者主要進行大型 3D 游戲的開發。

Pomelo

pomelo 是一個網易開發的基于 Node.js 的開源游戲服務器框架，與以往單進程的游戲框架不同, 它是高性能、高可伸縮、分布式多進程的游戲服務器框架，并且使用很簡單。它包括基礎開發框架和一系列相關工具和庫，可以幫助開發者省去游戲開發中枯燥的重復勞動和底層邏輯工作，免除開發者的重造輪子，讓開發者可以更多地去關注游戲的具體邏輯，大大提高開發效率。pomelo 強大的可伸縮性和靈活性使得 pomelo 也可以作為通用的分布式實時應用開發框架，用于一些高實時應用的開發，而且 pomelo 在很多方面的表現甚至超越了現有的開源實時應用框架。pomelo 支持所有主流平臺的客戶端，并提供了客戶端的開發庫，使得客戶端的開發變得很友好。

歡迎使用pomelo

pomelo 中文文檔

pomelo架構概覽

Bearcat

Bearcat 是網易 pomelo 項目團隊開發的一個基于 POJOs(Plain Old JavaScript Objects) 進行開發的應用層框架，Bearcat 提供了一個輕量級的容器來編寫簡單、可維護的 Node.js。Bearcat 提供了一個基礎的底層來管理應用邏輯對象，使得開發者就可以把精力放在應用層的邏輯編寫上。Bearcat 使開發者編寫“簡單純粹的 JavaScript 對象”(POJO)，并且不會侵入這些 POJO，你完全可以在不使用 Bearcat 的環境下部署應用這些 POJO。

JavaScript 應用框架 Bearcat

基于 bearcat 的 cocos2d-js 游戲開發

7. 其它FUSE

Fuse 是一個為開發者和設計者而設計的用戶體驗（UX）工具集，用于創建原生的、跨平臺的 iOS 和 Android 移動應用。在 Fuse 中，開發者使用標記定義用戶界面，使用 JavaScript 編寫應用程序邏輯，同時所有的渲染都會被編譯成原生代碼以獲得最佳性能。通過 Fuse，用戶能夠快速地創建漂亮的、具有流暢動畫體驗的原生移動應用。

Fuse：專為移動應用開發者和設計者而生的用戶體驗工具集

官方示例

Cylon

Cylon.js 是一個開源 JavaScript 框架，使用 Node.js 來進行機器人開發和物理計算。Cylon.js 提供一個簡單強大的方法來解決同一時間合并不同設備的問題。目前支持多達 43 種平臺的硬件設備，其中包括 Arduino、AT&T M2X、Intel Edison、Leap Motion、Nest、OpenCV 等眾多熱門的硬件平臺。

用Javascript制造機器人和火箭

GitHub

超越Web，Javascript在物聯網的應用

NodeBots-JavaScript在智能設備驅動（物聯網）中的崛起

瀏覽器插件和擴展

現代瀏覽器大都支持擴展程序的開發，我們常用的慧慧購物助手、有道翻譯、瀏覽器截圖等等這些瀏覽器插件都是使用 JavaScript 開發完成的。瀏覽器會暴露一些方法給擴展程序使用，比如 js 注入、窗口管理、頁面通訊等。正是這些插件的存在讓瀏覽器的可用性大大增強。

Chrome 插件集

論前端工程師如何應對西電教學評估系統

Chrome 插件開發文檔

　0x03. JavaScript 語言是坨屎？

兼容性

性能

面向對象

深拷貝

單線程

···

這些都是 JavaScript 的語言缺陷，拿面向對象舉例，JavaScript 沒有嚴格意義的類和對象，只能用函數這種奇奇怪怪的方式實現 OOP。這些缺陷也情有可原，因為事實上 JavaScript 在幾天（據說為10天）的時間內就被 Brendan Eich 設計出來了。很多人都感嘆 JavaScript 在這么惡劣的語言和環境中竟能得到這樣的成功。正是因為 JavaScript 開發周期短、早期規范缺失、瀏覽器廠商競爭這些原因導致一些問題遲遲不能解決。

// 工廠模式 常用function Person(name, gender, age) { var obj = Object(); obj.name = name; obj.gender = gender; obj.age = age; obj.tellAge = function () { console.log(this.age); }; return obj;}var puya = new Person('PuYart', 'male', '21');puya.tellAge();

// 構造函數模式function Person(name, gender, age) { this.name = name; this.gender = gender; this.age = age; this.tellAge = function () { console.log(this.age); };}var puya = new Person('PuYart', 'male', '21');puya.tellAge();

// 原型鏈（+構造函數）模式 很常用function Person(name, gender, age) { this.name = name; this.gender = gender; this.age = age;}Person.prototype.tellAge = function () { console.log(this.age);};var puya = new Person('PuYart', 'male', '21');puya.tellAge();

這里舉出了常用的三種構造對象的方法，你也會感覺到惡心得要死吧。為了改善 JavaScript 語言本身的不足，微軟在2012年推出了 TypeScript 語言，TypeScript 是 JavaScript 的超集，支持強類型和 OOP，最終編譯為 JavaScript。當然了 CoffeeScript 也是一種解決方案。

ECMAScript 經過4個版本的迭代之后，終于迎來了第5個版本（因為 ES4 流產了）—— ES6。ES6 標準的發布可謂是 JavaScript 歷史上最重要的里程碑，它給 JavaScript 帶來了諸多語言特性，箭頭操作符、類的支持、字符串模板、函數參數默認值、迭代器、for-of 遍歷、生成器、Symbols 基本類型等等，這就意味著你可以這樣寫 JavaScript 了：

// ES6 中啟用了關鍵字 classclass Person { constructor(name, gender, age) { this.name = name; this.gender = gender; this.age = age; } tellAge() { console.log(this.age); }}var puya = new Person('PuYart', 'male', '21');puya.tellAge();

雖然 ES6 帶來了很多美妙的特性，讓 JavaScript 也可以像其他語言那樣優雅地寫出健壯的代碼，但是 ES5 還會獨占市場很久，各瀏覽器廠商跟進也需要一段時間。然而我們有理由相信，在不久的將來，JavaScript 的另一片美好的天空定會到來。畢竟 JavaScript 是一門年輕但是充滿活力、不斷進化的語言。

Javascript 誕生記

專題：深入淺出 ES6

《ECMAScript 6入門》

　0x04. JavaScript 統治世界？

JavaScript 固然可以做很多事情，從前端到后端，從桌面到移動，從應用到游戲，仿佛干了所有的事情一樣。然而，也正是 JavaScript 固有的語言特性，使其在很多場景并不適用，調用硬件（經 @zhangyang 提醒 nodebots 可以控制硬件）、大數據、高強度計算等等這些考驗性能和執行效率的事情 JavaScript 是萬萬做不到的不太擅長的；盡管 JavaScript 可以移動開發，然而真正采用 JavaScript 來開發移動端是一個很需要魄力的選擇，沒有生態支持、沒有歷史可借鑒，究竟有多少人愿意這樣做也是一個問題。細細一想，JavaScript 成熟的應用空間也只剩下了前端、輕量級后端和游戲了吧。然而當 ES6 大量部署的時候，這個世界會是什么樣，誰又知道呢？

JavaScript 統治世界，任重而道遠啊！