聊聊H5與JS近幾年的黑科技
聊聊H5與JS近幾年的黑科技
自ajax技術的誕生，編程界興起了一股WEB開發熱，facebook，Twitter等眾多大佬級企業都在網頁應用上大放異彩，這十年我們見證了前端技術的崛起。這期間產生了眾多脫離了瀏覽器的JS和H5開發的黑科技。移動端的react native，cordova，native.js；PC端的Node.js，NW.js；當然還有前端本身的眾多框架，vue.js，jquery.js，bootstrap等等。
所以JS不再是一門單純的瀏覽器腳本，作為一個前端開發者如果跟不上前端技術創新的進度，是很容易被時代所淘汰的，而作為一個後端開發者如果不知道JS如今的跨平臺性，是很容易被前端搶飯碗的哈哈。
聊聊前端那些往事
關於HTML（超文本標記語言）
1993年，我，還沒有出生，而第一代超文本標記語言已經在實驗室誕生，那時候的網絡世界或許還沒有網頁、網站這樣的概念。
HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854於2000年6月發布之後被宣布已經過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
XHTML——流產了
HTML 5——2014年10月28日，W3C推薦標準
關於JavaScript和ECMAScript
傳統的JavaScript是指我們熟悉的瀏覽器環境下運行的萬維網通用腳本語言，JS於1995年由網景公司在瀏覽器上首次實現並推出。後來JS成為瀏覽器通用的腳本語言，被廣大瀏覽器商所實現，由於他們實現後的JS大同小異，導致開發者不得不為不同瀏覽器開發不同兼容版本的JS文件，故廠商們，社區開發者希望獲得一套通行的瀏覽器標準腳本語言，這就是後來的ECMAScript， 可以說ES不是一門語言而是瀏覽器所使用腳本語言的標準，一般被實現為JavaScript，JScript等語言的語法和標準對象庫，所以事實上可以將ECMAScript理解為JavaScript的標準。
至今為止有六個ECMA版本
ECMAScript 1——1997年06月 首版
ECMAScript 2——1998年06月 格式修正，以使得其形式與ISO/IEC16262國際標準一致
ECMAScript 3——1999年12月 強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數輸出的格式化及其它改變
ECMAScript 4——流產了
ECMAScript 5——2009年12月發布
ECMAScript 2015——2015年6月17日發布，被稱作ES6
寫在黑科技前
如果至今——2018年，作為一名開發者依然不了解ES6/7和H5的強大，怕是有點孤陋寡聞了，雖然早期版本的js和html被業界廣泛的嘲諷，因為他們確實在很多方面糟糕透頂，尤其是曾經亂七八糟的js語法，令人窒息的閉包，工廠函數，不知所以的prototype屬性。（我至今不明白ES5之前的JS到底算不算有類的概念呢）
曾經有這麽一個笑話：
項目經理：“JavaScript是什麽？”
開發者：“哦？那是Java的升級版，是Java的腳本版語言！”（真好騙）
而如今，經歷ES6標準的洗禮，我敢大膽的說JS真的越來越像Java！有時候作為一名曾經做過JavaEE開發者的我，不知不覺的會去按照Java的編程習慣去做Node.js開發，文件名首字母大寫，文件裏寫上同名的class名，然後為他寫上constructor！JavaScript真的慢慢在變成Java的腳本版語言。
值得研究和使用黑科技
1. Node.js——Google
Node.js是一個Javascript運行環境，發布於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。
Node.js是第一次真正意義上的脫離了瀏覽器的JS實現，讓廣大開發者感嘆，原來JS還可以這麽用！Node.js使得JavaScript像python，php，ruby一樣的腳本語言可以直接在操作系統級別的環境下運行，提供了各類IO和系統類庫的調用API。
由於JavaScript語言本身的非阻塞、異步事件驅動特性，使得JavaScript能被廣泛的使用在分布式設備上運行數據密集型的實時應用，用於方便地搭建響應速度快、易於擴展的網絡應用。雖然JS本身只是單線程運行在Node中，卻因為非阻塞的IO訪問，加上V8引擎超高速的腳本解析能力，其在IO密集請求的高並發WEB應用中顯得格外得心應手。
2. react native——Facebook
如果說Node.js第一次讓JS脫離瀏覽器跑到了PC端和服務器端的話，那麽接下來介紹的react native就是讓JS第一次真正意義的跑在了手機操作系統上，並且讓JavaScript開發者也可以從心所欲的開發手機APP。
React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。RN使用Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用，因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域。
Facebook在對傳統H5 APP開發模式——Hybrid模式進行深入研究後，認為hybrid存在天生的性能缺陷，當即放棄了hybrid開發模式，轉而自行研究了react native，其特色是：不同於H5,也不同於原生,更像是用JS寫出原生應用。而react native開發APP性能相當接近於使用JAVA，OC開發的純原生應用。
3. cordova——Apache
Cordova的前身就是大名鼎鼎的phonegap！2011年，Adobe收購了phonegap項目，由於Adobe現在擁有PhoneGap商標，Apache組織將其改名為Apache Cordova。Adobe將會繼續以Cordova加上PhoneGap Build和Adobe Shadow的組合提供PhoneGap。
Cordova提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及為這些類庫所用的設備相關的原生後臺代碼。
Cordova支持如下移動操作系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
不同於react native偏向原生性能的理念，cordova開發是介於Web app和原生APP之間的hybrid開發模式，這就說明其更加註重代碼移植和復用，其開發風格更類似於瀏覽器網頁，對於前端開發者其開發難易程度相較於上述RN更加的簡單，入門更快。
雖然在性能上略遜於RN，但是不同於RN的“一次學習，多處開發”，cordova是“一次開發，多處使用”，其對代碼的復用率要遠高於RN，做到了JS只一次開發，就可以打包後在Android，IOS，windows甚至是黑莓系統上，多處使用。
（註：react native在IOS和Android平臺上往往要準備兩套代碼，代碼大部分是重合的，但有少量API需要單獨開發，並且其支持的平臺也僅僅是IOS和Android）
4. html5+ and native.js——Dcloud
上述公司的大名對開發者來說相信都是如雷貫耳了，在使用H5開發APP的黑科技潮流中也不乏一些國內年輕公司優秀的框架，IDE，比如，接下來介紹的個人非常喜歡的html5+和native.js開發框架。
DCloud即數字天堂(北京)網絡技術有限公司，他也是W3C成員及HTML5中國產業聯盟發起單位，
筆者的商業、個人的APP項目都是采用Dcloud的產品開發的，他們的技術在我之前的博客中通過一些項目，都略有介紹。
與上述介紹那些黑科技不同的是，dcloud不僅提供了開發環境，框架，也提供了開發所使用的IDE——Hbuilder，通過官方提供的IDE可以直接將開發好的APP進行打包和發布，大量的APP開發所需模塊都集成在IDE中，無需自己手動下載和添加，使用這套開發工具最大的好處是：傻瓜式開發（不，是相當便捷啦），可以說是一條龍服務。
其使用的H5 APP運行環境是5+ Runtime，使用的JavaScript映射技術為native.js，可以將js映射為原生對象，前端UI框架為mui。
dcloud這套黑科技主體使用的依然是webview技術，即webkit內核解析html，css，js，在部分性能消耗較高的API上，例如跳轉動畫，下拉刷新，彈窗等則直接調用原生對象，故而說白了依然屬於是hybrid開發模式。
更多關於web，native，hybrid和react native技術開發APP的對比參考這篇不錯的博文：
https://www.cnblogs.com/dailc/archive/2016/10/04/5930238.html#hybrid_2_4
5.nw.js——Intel
以上2，3所述黑科技主要是運用於移動端開發的JS技術，而傳統的windows，linux，mac桌面級應用開發也有使用JavaScript的黑科技，由於桌面開發屬於操作系統級別的環境，故而需要使用到node.js的衍生產品——node webkit（簡稱nw.js）。
nw.js是在英特爾開源技術中心創建的，它是基於谷歌瀏覽器核心引擎和nodejs運行，你可以通過nwjs技術使用html和js語言編寫本地應用程序，它也可以讓你直接從DOM調用nodejs模塊，使用一種新的方式與所有的Web技術編寫本地應用。它主要有以下6個特點：
- 以網絡最流行的技術編寫原生應用程序的新方法
- 基於HTML5, CSS3, JS and WebGL而編寫
- 完全支持nodejs所有api及第三方模塊
- 可以使用DOM直接調用nodejs模塊
- 容易打包和分發
nw.js官網說：node webkit技術允許使用Node.js所有的模塊，並直接對DOM進行操作，該項目開辟了一種使用WEB技術進行桌面應用開發的新河！
最後，說一個小秘密，我們所使用的微信桌面版就是用nw.js開發的！
6.Electron
我們已經介紹了nw.js做桌面級開發，但可惜的是nw.js項目目前處於一個半死不活的狀態，最新版本仍然是0.x.x，其開發組貢獻者也只有可憐的50多個，這導致nw.js存在大量的bug不能被及時的修復。以下推薦另一款H5做桌面開發的黑科技Electron。
Electron同樣是基於Chromium和Node.js的。和nw.js大同小異，不過其社區開發度更加活躍，版本更新較快。
Electron特色：
- 自動更新——應用支持自動更新
- 原生菜單和通知——可以創建原生應用菜單和上下文菜單
- 應用崩潰報告——可以將崩潰報告提交到遠程服務器
- 調試和分析——Chrominum 的內容模塊可以發現性能瓶頸和緩慢的操作。你也可以在應用中使用自己喜歡的 Chrome 開發者工具。
- Windows installer?——可以快速便捷地創建安裝包。
Electron目前真的很火，使用Electron開發的應用有Atom編輯器，微軟的VScode，以及新版的微信，騰訊微雲。
結語
介紹了這麽多前端跨平臺的黑科技，不禁感嘆，JavaScript早已不再是當年那個羞澀的躲在瀏覽器裏的“糟糕語言”，而這一切——讓JavaScript成長為如此強大的這些技術都歸功於Google強大的V8引擎；而HTML5、CSS3的廣泛運用，跨平臺解析也要感謝強大的webkit內核支持。
最後，如今的JavaScript真的太強大了( ⊙o⊙ )！我所能想到的目前JS沒有深入的領域無非就是人工智能領域，尤其是最近火熱的深度學習，人工神經網絡，筆者目前所做的深度學習開發仍然使用的是Python，希望有朝一日能看到基於JavaScript語言的深度學習框架或者語言接口，如果出現了，他會不會叫做TensorFlow.js呢？
聊聊H5與JS近幾年的黑科技