JavaScript 就要統治世界了？

" 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 在前端領域前景明朗。

// jQuery 進行 Ajax 請求
 $.ajax({
   async: true,
   type: 'POST',
   url: "api.php/CustomerLogin/login",
   data: {
     username: 'PuYart',
     password: 'jianshu', 
     uuid: 'web_jianshu'
   }, 
   success: function (data) {
       // 登陸成功
   }
 });

• 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 world
var 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. 神做 React

React

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 中啓用了關鍵字 class
class 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 統治世界，任重而道遠啊！