" JavaScript 可以……""嘛，不就是操作一下 DOM，可以讓元素飛來(lái)飛去嗎""JavaScript 是……""不就是用 jQuery 讓網(wǎng)頁(yè)動(dòng)起來(lái)，頂多就是再用用 Ajax 和后端進(jìn)行一下數(shù)據(jù)交換嗎""JavaScript 是一門……""最討厭和鄙視這種弱類型不需要編譯的腳本語(yǔ)言了，你說(shuō) OOP? 扯淡的吧，JS 有對(duì)象嗎""……"

　0x00. 前言

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

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

　0x01. 瀏覽器中的 JavaScript

曾經(jīng)很單純地認(rèn)為能夠熟練地使用 jQuery/JavaScript 操作 DOM，能夠?qū)⒁恍└邚?fù)用的組件注冊(cè)為插件就是掌握 JS 的標(biāo)志。然而隨著自己接觸更多的人，接觸更多的技術(shù)才發(fā)現(xiàn)自己的無(wú)知和渺小，瀏覽器其實(shí)只是 JavaScript 的一個(gè)宿主環(huán)境，提供 JavaScript 引擎來(lái)解釋 JavaScript，瀏覽器環(huán)境下的 JavaScript 和 JavaScript 本身還是有很大區(qū)別的，瀏覽器下的 JavaScript 在 JavaScript 整個(gè)體系中其實(shí)也只是很小（但很重要）的一部分而已。

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

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

Ajax：掌握 Ajax - IBMdeveloperWorks

庫(kù)：jQuery/zepto

UI 框架：Bootstrap/AmazeUI

依賴管理：RequireJS/SeaJs

MVVM：AngularJS/Avalon

2. 后端之旅

2009年5月，Ryan Dah 發(fā)布了 Node 的最初版本。Node 是一個(gè)基于 Chrome JavaScript 運(yùn)行時(shí)建立的平臺(tái)，它對(duì) Google V8 引擎進(jìn)行了封裝，使 JavaScript 第一次走出前端運(yùn)行在了服務(wù)器上。這對(duì) JavaScript 來(lái)說(shuō)是一種質(zhì)的突破，這使得 Web 編程可以只用一門語(yǔ)言便可完成。It's Amazing! Web 的大一統(tǒng)時(shí)代仿佛就要來(lái)了。同時(shí) Node 也誕生了 npm，從此 JavaScript 也有了強(qiáng)大的包管理機(jī)制。

// 使用 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);});

關(guān)于 Node：Node .js- Wikipedia/我們?yōu)槭裁匆褂?NodeJS

Web 開(kāi)發(fā)框架：Express/ThinkJS/Clouda

博客系統(tǒng)：Ghost/hexo

基于 Node 的前端自動(dòng)化構(gòu)建工具：Grunt/Gulp

3. Hybrid App

傳統(tǒng)上 JavaScript 只能在瀏覽器中運(yùn)行，Node 的出現(xiàn)讓 JavaScript 運(yùn)行在了服務(wù)端，然而只是這樣的話，好像還是少點(diǎn)什么。人們總是希望用一種方式去做所有的事情，于是聰明的工程師們就發(fā)明了 Hybrid App 這種形式，讓 JavaScript 在一定意義上運(yùn)行在了移動(dòng)設(shè)備上。然而當(dāng)前 Hybrid App 雖然讓 JavaScript 也可以寫出 JAVA/Objective-C 才能實(shí)現(xiàn)的 APP，但是這種方式仍然沒(méi)有拋棄瀏覽器運(yùn)行環(huán)境，對(duì) WebView 有很強(qiáng)的依賴性，性能和原生應(yīng)用還有很大差距。

對(duì)比：Native App、Web App 還是Hybrid App？

工具：PhoneGap/APICloud/AppCan

4. 桌面應(yīng)用

至此 JavaScript 除了可以被瀏覽器解析，也可以作為后端語(yǔ)言使用，還可以用來(lái)構(gòu)建移動(dòng)端 APP。仿佛已經(jīng)夠強(qiáng)大了吧，然而這還不夠，JavaScript 還可以用來(lái)構(gòu)建桌面應(yīng)用！

Node-webkit

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

heX

heX 是有道公司開(kāi)發(fā)的采用前端技術(shù)（HTML，CSS，JavaScript）開(kāi)發(fā)桌面應(yīng)用軟件的跨平臺(tái)解決方案，意在解決傳統(tǒng)桌面應(yīng)用開(kāi)發(fā)中繁瑣的 UI 和交互開(kāi)發(fā)工作，使其變的簡(jiǎn)單而高效。特別適合重 UI，重交互的桌面應(yīng)用軟件。新版有道詞典 beta 版的首頁(yè)便是使用 heX 開(kāi)發(fā)完成的。

Node-Webkit 作者王文睿：桌面應(yīng)用的全新開(kāi)發(fā)方式

Node-Webkit 文檔/Node-Webkit 教程

heX 介紹/heX 文檔

Electron

Electron（以前叫做 Atom Shell） 是 GitHub 開(kāi)源的使用 Web 技術(shù)開(kāi)發(fā)桌面應(yīng)用的技術(shù)平臺(tái)。它允許你使用 HTML, CSS 和 JavaScript 編寫跨平臺(tái)的桌面應(yīng)用。它是 io.js 運(yùn)行時(shí)的衍生，專注于桌面應(yīng)用而不是 web 服務(wù)端。Electron 不僅僅是一個(gè)支持打包 web 應(yīng)用成為桌面應(yīng)用的原生 web view。它現(xiàn)在包含 app 的自動(dòng)升級(jí)、安裝包、崩潰報(bào)告、通知和一些其它原生桌面應(yīng)用的功能——所有的這些都通過(guò) JavaScript API 調(diào)用的。

使用 AngularJS 和 Electron 構(gòu)建桌面應(yīng)用

5. 神作 ReactReact

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

上圖來(lái)自 @鬼道 的知乎回答如何評(píng)價(jià) React Native？

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

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

// 簡(jiǎn)單的官方示例 // 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 開(kāi)發(fā)游戲。

Cocos2d-js

Cocos2d-JS 是 Cocos2d-x 的 JavaScript 版本，融合了 Cocos2d-html5 和Cocos2d-x JavaScript Bindings。它支持 Cocos2d-x 的所有核心特性并提供更簡(jiǎn)單易用的 JavaScript 風(fēng)格 API，并且天然支持原生、瀏覽器跨平臺(tái)應(yīng)用。?

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

Unity3D

Unity3D 是一個(gè)跨平臺(tái)的 3D 游戲引擎，與 Cocos2d 最大的區(qū)別在于前者主要面對(duì) 2D 游戲開(kāi)發(fā)者，后者主要進(jìn)行大型 3D 游戲的開(kāi)發(fā)。

Pomelo

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

歡迎使用pomelo

pomelo 中文文檔

pomelo架構(gòu)概覽

Bearcat

Bearcat 是網(wǎng)易 pomelo 項(xiàng)目團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)基于 POJOs(Plain Old JavaScript Objects) 進(jìn)行開(kāi)發(fā)的應(yīng)用層框架，Bearcat 提供了一個(gè)輕量級(jí)的容器來(lái)編寫簡(jiǎn)單、可維護(hù)的 Node.js。Bearcat 提供了一個(gè)基礎(chǔ)的底層來(lái)管理應(yīng)用邏輯對(duì)象，使得開(kāi)發(fā)者就可以把精力放在應(yīng)用層的邏輯編寫上。Bearcat 使開(kāi)發(fā)者編寫“簡(jiǎn)單純粹的 JavaScript 對(duì)象”(POJO)，并且不會(huì)侵入這些 POJO，你完全可以在不使用 Bearcat 的環(huán)境下部署應(yīng)用這些 POJO。

JavaScript 應(yīng)用框架 Bearcat

基于 bearcat 的 cocos2d-js 游戲開(kāi)發(fā)

7. 其它FUSE

Fuse 是一個(gè)為開(kāi)發(fā)者和設(shè)計(jì)者而設(shè)計(jì)的用戶體驗(yàn)（UX）工具集，用于創(chuàng)建原生的、跨平臺(tái)的 iOS 和 Android 移動(dòng)應(yīng)用。在 Fuse 中，開(kāi)發(fā)者使用標(biāo)記定義用戶界面，使用 JavaScript 編寫應(yīng)用程序邏輯，同時(shí)所有的渲染都會(huì)被編譯成原生代碼以獲得最佳性能。通過(guò) Fuse，用戶能夠快速地創(chuàng)建漂亮的、具有流暢動(dòng)畫體驗(yàn)的原生移動(dòng)應(yīng)用。

Fuse：專為移動(dòng)應(yīng)用開(kāi)發(fā)者和設(shè)計(jì)者而生的用戶體驗(yàn)工具集

官方示例

Cylon

Cylon.js 是一個(gè)開(kāi)源 JavaScript 框架，使用 Node.js 來(lái)進(jìn)行機(jī)器人開(kāi)發(fā)和物理計(jì)算。Cylon.js 提供一個(gè)簡(jiǎn)單強(qiáng)大的方法來(lái)解決同一時(shí)間合并不同設(shè)備的問(wèn)題。目前支持多達(dá) 43 種平臺(tái)的硬件設(shè)備，其中包括 Arduino、AT&T M2X、Intel Edison、Leap Motion、Nest、OpenCV 等眾多熱門的硬件平臺(tái)。

用Javascript制造機(jī)器人和火箭

GitHub

超越Web，Javascript在物聯(lián)網(wǎng)的應(yīng)用

NodeBots-JavaScript在智能設(shè)備驅(qū)動(dòng)（物聯(lián)網(wǎng)）中的崛起

瀏覽器插件和擴(kuò)展

現(xiàn)代瀏覽器大都支持?jǐn)U展程序的開(kāi)發(fā)，我們常用的慧慧購(gòu)物助手、有道翻譯、瀏覽器截圖等等這些瀏覽器插件都是使用 JavaScript 開(kāi)發(fā)完成的。瀏覽器會(huì)暴露一些方法給擴(kuò)展程序使用，比如 js 注入、窗口管理、頁(yè)面通訊等。正是這些插件的存在讓瀏覽器的可用性大大增強(qiáng)。

Chrome 插件集

論前端工程師如何應(yīng)對(duì)西電教學(xué)評(píng)估系統(tǒng)

Chrome 插件開(kāi)發(fā)文檔

　0x03. JavaScript 語(yǔ)言是坨屎？

兼容性

性能

面向?qū)ο?/p>

深拷貝

單線程

···

這些都是 JavaScript 的語(yǔ)言缺陷，拿面向?qū)ο笈e例，JavaScript 沒(méi)有嚴(yán)格意義的類和對(duì)象，只能用函數(shù)這種奇奇怪怪的方式實(shí)現(xiàn) OOP。這些缺陷也情有可原，因?yàn)槭聦?shí)上 JavaScript 在幾天（據(jù)說(shuō)為10天）的時(shí)間內(nèi)就被 Brendan Eich 設(shè)計(jì)出來(lái)了。很多人都感嘆 JavaScript 在這么惡劣的語(yǔ)言和環(huán)境中竟能得到這樣的成功。正是因?yàn)?JavaScript 開(kāi)發(fā)周期短、早期規(guī)范缺失、瀏覽器廠商競(jìng)爭(zhēng)這些原因?qū)е乱恍﹩?wèn)題遲遲不能解決。

// 工廠模式 常用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();

// 構(gòu)造函數(shù)模式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();

// 原型鏈（+構(gòu)造函數(shù)）模式 很常用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();

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

ECMAScript 經(jīng)過(guò)4個(gè)版本的迭代之后，終于迎來(lái)了第5個(gè)版本（因?yàn)?ES4 流產(chǎn)了）—— ES6。ES6 標(biāo)準(zhǔn)的發(fā)布可謂是 JavaScript 歷史上最重要的里程碑，它給 JavaScript 帶來(lái)了諸多語(yǔ)言特性，箭頭操作符、類的支持、字符串模板、函數(shù)參數(shù)默認(rèn)值、迭代器、for-of 遍歷、生成器、Symbols 基本類型等等，這就意味著你可以這樣寫 JavaScript 了：

// ES6 中啟用了關(guān)鍵字 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 帶來(lái)了很多美妙的特性，讓 JavaScript 也可以像其他語(yǔ)言那樣優(yōu)雅地寫出健壯的代碼，但是 ES5 還會(huì)獨(dú)占市場(chǎng)很久，各瀏覽器廠商跟進(jìn)也需要一段時(shí)間。然而我們有理由相信，在不久的將來(lái)，JavaScript 的另一片美好的天空定會(huì)到來(lái)。畢竟 JavaScript 是一門年輕但是充滿活力、不斷進(jìn)化的語(yǔ)言。

Javascript 誕生記

專題：深入淺出 ES6

《ECMAScript 6入門》

　0x04. JavaScript 統(tǒng)治世界？

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

JavaScript 統(tǒng)治世界，任重而道遠(yuǎn)啊！