摘要：歡迎使用中文文檔架構(gòu)概覽是網(wǎng)易項(xiàng)目團(tuán)隊(duì)開發(fā)的一個(gè)基于進(jìn)行開發(fā)的應(yīng)用層框架，提供了一個(gè)輕量級(jí)的容器來編寫簡單可維護(hù)的。

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

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

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

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

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

 // jQuery 進(jìn)行 Ajax 請(qǐng)求
 $.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

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 來說是一種質(zhì)的突破，這使得 Web 編程可以只用一門語言便可完成。It"s Amazing! Web 的大一統(tǒng)時(shí)代仿佛就要來了。同時(shí) Node 也誕生了 npm，從此 JavaScript 也有了強(qiáng)大的包管理機(jī)制。

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

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

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

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

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

傳統(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，但是這種方式仍然沒有拋棄瀏覽器運(yùn)行環(huán)境，對(duì) WebView 有很強(qiáng)的依賴性，性能和原生應(yīng)用還有很大差距。

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

工具：PhoneGap/APICloud/AppCan

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

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

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

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

Node-Webkit 文檔/Node-Webkit 教程

heX 介紹/heX 文檔

Electron（以前叫做 Atom Shell） 是 GitHub 開源的使用 Web 技術(shù)開發(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)用的功能——所有的這些都通過 JavaScript API 調(diào)用的。

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

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

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

   // 簡單的官方示例
   var HelloMessage = React.createClass({
       render: function() {
           return 
Hello {this.props.name}
;
       }
   });

   React.render(, mountNode);

React Native 既擁有 Native 的用戶體驗(yàn)，又保留 React 的開發(fā)效率。開源不到1周 GitHub Star 破萬，這簡直是逆天的成績??！上線之初僅支持 iOS，React 也在9月14號(hào)對(duì) Android 提供了支持服務(wù)，這幾天意味著你可以使用同一套邏輯和架構(gòu)、同一門語言實(shí)現(xiàn) Web、iOS、Android 的開發(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，通過 HTML 標(biāo)簽和移動(dòng)平臺(tái)的組件進(jìn)行映射，仿佛是將 JS “編譯”成了原生語言一樣，性能和交互體驗(yàn)會(huì)比 Hybrid 好上不少。目前在 GitHub 上有 18551 Star。

 // 簡單的官方示例
 // iOS
 var React = require("react-native");
 var { TabBarIOS, NavigatorIOS } = React;
 var App = React.createClass({ 
    render: function() { 
       return ( 
          
           
           
          
       ); 
     },
 });

 // Android
 var React = require("react-native");
 var { DrawerLayoutAndroid, ProgressBarAndroid } = React;
 var App = React.createClass({
     render: function() {
       return (
          React Native}>        
           
         
       );
     },
 });

React 文檔

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

React Native 文檔

React Native

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

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

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

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

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

歡迎使用pomelo

pomelo 中文文檔

pomelo架構(gòu)概覽

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

JavaScript 應(yīng)用框架 Bearcat

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

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

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

官方示例

Cylon.js 是一個(gè)開源 JavaScript 框架，使用 Node.js 來進(jìn)行機(jī)器人開發(fā)和物理計(jì)算。Cylon.js 提供一個(gè)簡單強(qiáng)大的方法來解決同一時(shí)間合并不同設(shè)備的問題。目前支持多達(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)）中的崛起

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

Chrome 插件集

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

Chrome 插件開發(fā)文檔

兼容性

性能

面向?qū)ο?/p>

深拷貝

單線程

···

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

// 工廠模式 常用
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ì)感覺到惡心得要死吧。為了改善 JavaScript 語言本身的不足，微軟在2012年推出了 TypeScript 語言，TypeScript 是?JavaScript 的超集，支持強(qiáng)類型和 OOP，最終編譯為 JavaScript。當(dāng)然了 CoffeeScript 也是一種解決方案。

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

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

Javascript 誕生記

專題：深入淺出 ES6

《ECMAScript 6入門》

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

JavaScript 統(tǒng)治世界，任重而道遠(yuǎn)?。?/p>