聊聊H5與JS近幾年的黑科技

自ajax技術(shù)的誕生，編程界興起了一股WEB開發(fā)熱，facebook，Twitter等眾多大佬級企業(yè)都在網(wǎng)頁應用上大放異彩，這十年我們見證了前端技術(shù)的崛起。愛掏網(wǎng) - it200.com這期間產(chǎn)生了眾多脫離了瀏覽器的JS和H5開發(fā)的黑科技。愛掏網(wǎng) - it200.com移動端的react native，cordova，native.js；PC端的Node.js，NW.js；當然還有前端本身的眾多框架，vue.js，jquery.js，bootstrap等等。愛掏網(wǎng) - it200.com

所以JS不再是一門單純的瀏覽器腳本，作為一個前端開發(fā)者如果跟不上前端技術(shù)創(chuàng)新的進度，是很容易被時代所淘汰的，而作為一個后端開發(fā)者如果不知道JS如今的跨平臺性，是很容易被前端搶飯碗的哈哈。愛掏網(wǎng) - it200.com

聊聊前端那些往事

關(guān)于HTML（超文本標記語言）

1993年，我，還沒有出生，而第一代超文本標記語言已經(jīng)在實驗室誕生，那時候的網(wǎng)絡世界或許還沒有網(wǎng)頁、網(wǎng)站這樣的概念。愛掏網(wǎng) - it200.com?
HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時?
HTML 3.2——1997年1月14日，W3C推薦標準?
HTML 4.0——1997年12月18日，W3C推薦標準?
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準?
XHTML——流產(chǎn)了?
HTML 5——2024年10月28日，W3C推薦標準

關(guān)于JavaScript和ECMAScript

傳統(tǒng)的JavaScript是指我們熟悉的瀏覽器環(huán)境下運行的萬維網(wǎng)通用腳本語言，JS于1995年由網(wǎng)景公司在瀏覽器上首次實現(xiàn)并推出。愛掏網(wǎng) - it200.com后來JS成為瀏覽器通用的腳本語言，被廣大瀏覽器商所實現(xiàn)，由于他們實現(xiàn)后的JS大同小異，導致開發(fā)者不得不為不同瀏覽器開發(fā)不同兼容版本的JS文件，故廠商們，社區(qū)開發(fā)者希望獲得一套通行的瀏覽器標準腳本語言，這就是后來的ECMAScript， 可以說ES不是一門語言而是瀏覽器所使用腳本語言的標準，一般被實現(xiàn)為JavaScript，JScript等語言的語法和標準對象庫，所以事實上可以將ECMAScript理解為JavaScript的標準。愛掏網(wǎng) - it200.com

至今為止有六個ECMA版本?
ECMAScript 1——1997年06月 首版?
ECMAScript 2——1998年06月 格式修正，以使得其形式與ISO/IEC16262國際標準一致?
ECMAScript 3——1999年12月 強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數(shù)輸出的格式化及其它改變?
ECMAScript 4——流產(chǎn)了?
ECMAScript 5——2009年12月發(fā)布?
ECMAScript 2024——2024年6月17日發(fā)布，被稱作ES6

寫在黑科技前

如果至今——2024年，作為一名開發(fā)者依然不了解ES6/7和H5的強大，怕是有點孤陋寡聞了，雖然早期版本的js和html被業(yè)界廣泛的嘲諷，因為他們確實在很多方面糟糕透頂，尤其是曾經(jīng)亂七八糟的js語法，令人窒息的閉包，工廠函數(shù)，不知所以的prototype屬性。愛掏網(wǎng) - it200.com（我至今不明白ES5之前的JS到底算不算有類的概念呢）

曾經(jīng)有這么一個笑話：?
項目經(jīng)理：“JavaScript是什么？”?
開發(fā)者：“哦？那是Java的升級版，是Java的腳本版語言！”（真好騙）

而如今，經(jīng)歷ES6標準的洗禮，我敢大膽的說JS真的越來越像Java！有時候作為一名曾經(jīng)做過JavaEE開發(fā)者的我，不知不覺的會去按照Java的編程習慣去做Node.js開發(fā)，文件名首字母大寫，文件里寫上同名的class名，然后為他寫上constructor！JavaScript真的慢慢在變成Java的腳本版語言。愛掏網(wǎng) - it200.com

值得研究和使用黑科技

1. Node.js——Google

Node.js是一個Javascript運行環(huán)境，發(fā)布于2009年5月，由Ryan Dahl開發(fā)，實質(zhì)是對Chrome V8引擎進行了封裝。愛掏網(wǎng) - it200.comNode.js對一些特殊用例進行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運行得更好。愛掏網(wǎng) - it200.com

Node.js是第一次真正意義上的脫離了瀏覽器的JS實現(xiàn)，讓廣大開發(fā)者感嘆，原來JS還可以離開瀏覽器跑！Node.js使得JavaScript像python，php，ruby一樣的腳本語言可以直接在操作系統(tǒng)級別的環(huán)境下運行，并提供了各類IO和系統(tǒng)類庫的調(diào)用API。愛掏網(wǎng) - it200.com

由于JavaScript語言本身的非阻塞、異步事件驅(qū)動特性，使得JavaScript能被廣泛的使用在分布式設備上運行數(shù)據(jù)密集型的實時應用，用于方便地搭建響應速度快、易于擴展的網(wǎng)絡應用。愛掏網(wǎng) - it200.com雖然JS本身只是單線程運行在Node中，卻因為非阻塞的IO訪問，加上V8引擎超高速的腳本解析能力，其在IO密集請求的高并發(fā)WEB應用中顯得格外得心應手。愛掏網(wǎng) - it200.com

2. react native——Facebook

如果說Node.js第一次讓JS脫離瀏覽器跑到了PC端和服務器端的話，那么接下來介紹的react native就是讓JS第一次真正意義的跑在了手機操作系統(tǒng)上，并且讓JavaScript開發(fā)者也可以從心所欲的開發(fā)手機APP。愛掏網(wǎng) - it200.com

React Native (簡稱RN)是Facebook于2024年4月開源的跨平臺移動應用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產(chǎn)物，目前支持iOS和安卓兩大平臺。愛掏網(wǎng) - it200.comRN使用Javascript語言，類似于HTML的JSX，以及CSS來開發(fā)移動應用，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學習就可以進入移動應用開發(fā)領(lǐng)域。愛掏網(wǎng) - it200.com

Facebook在對傳統(tǒng)H5 APP開發(fā)模式——Hybrid模式進行深入研究后，認為hybrid存在天生的性能缺陷，當即放棄了hybrid開發(fā)模式，轉(zhuǎn)而自行研究了react native，其特色是：不同于H5,也不同于原生,更像是用JS寫出原生應用。愛掏網(wǎng) - it200.comreact native開發(fā)APP性能相當接近于使用JAVA，OC開發(fā)的純原生應用。愛掏網(wǎng) - it200.com

3. cordova——Apache

Cordova的前身就是大名鼎鼎的phonegap！2011年，Adobe收購了phonegap項目，由于Adobe現(xiàn)在擁有PhoneGap商標，Apache組織將其改名為Apache Cordova。愛掏網(wǎng) - it200.comAdobe將會繼續(xù)以Cordova加上PhoneGap Build和Adobe Shadow的組合提供PhoneGap。愛掏網(wǎng) - it200.com

Cordova提供了一組設備相關(guān)的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。愛掏網(wǎng) - it200.comCordova還提供了一組統(tǒng)一的JavaScript類庫，以及為這些類庫所用的設備相關(guān)的原生后臺代碼。愛掏網(wǎng) - it200.com

Cordova支持如下移動操作系統(tǒng)：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。愛掏網(wǎng) - it200.com

不同于react native偏向原生，注重性能的理念，cordova開發(fā)是介于Web app和原生APP之間的hybrid開發(fā)模式，這就說明其更加注重代碼移植和復用，其開發(fā)風格更類似于瀏覽器網(wǎng)頁，對于前端開發(fā)者其開發(fā)難易程度相較于RN更加的簡單，所以入門更快。愛掏網(wǎng) - it200.com

雖然在性能上略遜于RN，但是不同于RN的“一次學習，多處開發(fā)”，cordova是“一次開發(fā)，多處使用”，其對代碼的復用率要遠高于RN，做到了JS只一次開發(fā)，就可以打包后在Android，IOS，windows甚至是黑莓系統(tǒng)上，多處使用。愛掏網(wǎng) - it200.com

（注：react native在IOS和Android平臺上往往要準備兩套代碼，代碼大部分是重合的，但有少量API需要單獨開發(fā)，并且其支持的平臺也僅僅是IOS和Android）

4. html5+ and native.js——Dcloud

上述公司的大名對開發(fā)者來說相信都是如雷貫耳了，在使用H5開發(fā)APP的黑科技潮流中也不乏一些國內(nèi)年輕公司優(yōu)秀的框架，IDE，比如，接下來介紹的個人非常喜歡的html5+和native.js開發(fā)框架。愛掏網(wǎng) - it200.com

DCloud即數(shù)字天堂(北京)網(wǎng)絡技術(shù)有限公司，他也是W3C成員及HTML5中國產(chǎn)業(yè)聯(lián)盟發(fā)起單位，

筆者的商業(yè)、個人的APP項目都是采用Dcloud的產(chǎn)品開發(fā)的，他們的技術(shù)在我之前的博客中通過一些項目，都略有介紹。愛掏網(wǎng) - it200.com

與上述介紹那些黑科技不同的是，dcloud不僅提供了開發(fā)環(huán)境，框架，接口，還提供了開發(fā)所使用的IDE——Hbuilder，通過官方提供的IDE可以直接將開發(fā)好的APP進行打包和發(fā)布，大量的APP開發(fā)所需模塊都集成在IDE中，無需自己手動下載和添加，使用這套開發(fā)工具最大的好處是：傻瓜式開發(fā)（不，是相當便捷啦），從新建項目到開發(fā)到API添加到打包，是一條龍服務。愛掏網(wǎng) - it200.com

其使用的H5 APP運行環(huán)境是5+ Runtime，使用的JavaScript映射技術(shù)為native.js，可以將js映射為原生對象，前端UI框架為mui。愛掏網(wǎng) - it200.com

dcloud這套黑科技主體使用的依然是webview技術(shù)，即webkit內(nèi)核解析html，css，js，在部分性能消耗較高的API上，例如跳轉(zhuǎn)動畫，下拉刷新，彈窗等則直接調(diào)用原生對象，故而說白了依然屬于是hybrid開發(fā)模式。愛掏網(wǎng) - it200.com

更多關(guān)于web，native，hybrid和react native技術(shù)開發(fā)APP的對比參考這篇不錯的博文：?
https://www.cnblogs.com/dailc/archive/2024/10/04/5930238.html#hybrid_2_4

5.nw.js——Intel

以上2，3，4所述黑科技均是運用于移動端開發(fā)的JS技術(shù)，而傳統(tǒng)的windows，linux，mac桌面級應用開發(fā)也有使用JavaScript的黑科技，由于桌面開發(fā)屬于操作系統(tǒng)級別的環(huán)境，故而需要使用到node.js的衍生產(chǎn)品——node webkit（簡稱nw.js）。愛掏網(wǎng) - it200.com

nw.js是在英特爾開源技術(shù)中心創(chuàng)建的，它是基于谷歌瀏覽器核心引擎和nodejs運行，你可以通過nwjs技術(shù)使用html和js語言編寫本地應用程序，它也可以讓你直接從DOM調(diào)用nodejs模塊，使用一種新的方式與所有的Web技術(shù)編寫本地應用。愛掏網(wǎng) - it200.com它主要有以下6個特點：

1. 以網(wǎng)絡最流行的技術(shù)編寫原生應用程序的新方法
2. 基于HTML5, CSS3, JS and WebGL而編寫
3. 完全支持nodejs所有api及第三方模塊
4. 可以使用DOM直接調(diào)用nodejs模塊
5. 容易打包和分發(fā)

nw.js官網(wǎng)說：node webkit技術(shù)允許使用Node.js所有的模塊，并直接對DOM進行操作，該項目開辟了一種使用WEB技術(shù)進行桌面應用開發(fā)的新河！

最后，說一個小秘密，我們所使用的微信桌面版就是用nw.js開發(fā)的！

6.Electron

我們已經(jīng)介紹了nw.js做桌面級開發(fā)，但可惜的是nw.js項目目前處于一個半死不活的狀態(tài)，最新版本仍然是0.x.x，其開發(fā)組貢獻者也只有可憐的50多個，這導致nw.js存在大量的bug不能被及時的修復。愛掏網(wǎng) - it200.com以下推薦另一款用H5和JS做桌面開發(fā)的黑科技產(chǎn)品Electron。愛掏網(wǎng) - it200.com

Electron同樣是基于Chromium和Node.js的。愛掏網(wǎng) - it200.com和nw.js大同小異，不過其社區(qū)開發(fā)度更加活躍，版本更新較快。愛掏網(wǎng) - it200.com

Electron特色：

• 自動更新——應用支持自動更新
• 原生菜單和通知——可以創(chuàng)建原生應用菜單和上下文菜單
• 應用崩潰報告——可以將崩潰報告提交到遠程服務器
• 調(diào)試和分析——Chrominum 的內(nèi)容模塊可以發(fā)現(xiàn)性能瓶頸和緩慢的操作。愛掏網(wǎng) - it200.com你也可以在應用中使用自己喜歡的 Chrome 開發(fā)者工具。愛掏網(wǎng) - it200.com
• Windows installer?——可以快速便捷地創(chuàng)建安裝包。愛掏網(wǎng) - it200.com

Electron目前真的很火，使用Electron開發(fā)的應用有Atom編輯器，微軟的VScode，以及新版的微信，騰訊微云。愛掏網(wǎng) - it200.com

結(jié)語

介紹了這么多WEB前端技術(shù)跨平臺的黑科技，不禁感嘆，JavaScript早已不再是當年那個羞澀的躲在瀏覽器里的“糟糕語言”，而這一切——讓JavaScript成長為如此強大的這些技術(shù)都歸功于Google強大的V8引擎；而HTML5、CSS3的廣泛運用，跨平臺解析也要感謝強大的webkit內(nèi)核支持。愛掏網(wǎng) - it200.com

最后，如今的JavaScript真的太強大了( ⊙o⊙ )！我所能想到的目前JS沒有深入的領(lǐng)域無非就是人工智能領(lǐng)域，尤其是最近火熱的深度學習，人工神經(jīng)網(wǎng)絡，筆者目前所做的深度學習開發(fā)仍然使用的是Python（個人非常討厭python的語法），希望有朝一日能看到基于JavaScript語言的深度學習框架或者語言接口，如果出現(xiàn)了，他會不會叫做TensorFlow.js呢，哈哈？

補充

2024-7-3補充，tensorflow.js真的出了！Google官推，從此告別惡心的python！tfjs目前尚處于起步階段，但已經(jīng)基本支持瀏覽器端的訓練和預測，包括了CNN，RNN等神經(jīng)網(wǎng)絡模型。愛掏網(wǎng) - it200.com提供了大量內(nèi)部方法，直接構(gòu)建tensor張量，直接構(gòu)造神經(jīng)網(wǎng)絡，直接訓練和直接預測都已經(jīng)具備，甚至可以將圖片等直接轉(zhuǎn)為tensor，可以說在某些方面比python版本的更強大，當然性能上的話還有待考量。愛掏網(wǎng) - it200.com總之，值得js開發(fā)者一試，可以進入tensorflow.js官網(wǎng)查看相關(guān)信息。愛掏網(wǎng) - it200.com從此人人都能寫人工智能，感謝Google辛勤的貢獻者們！

nodejs支持尚不完善，詳情可以參考本人博客《JS做深度學習系列》

https://js.tensorflow.org/

原文發(fā)布時間：2024年05月05日

作者：devilyouwei

本文來源：CSDN??如需轉(zhuǎn)載請聯(lián)系原作者