在前端當道,百花齊開的這個年代,還在苦苦追逐不斷冒出的新程式庫嗎?擔心落入每次追逐又是新的投資,而之後就又是沒落的循環嗎?如果這是你的情況,你需要的是VanillaJS!一個輕量、功能強大且歷久不衰的高效能框架!

什麼是VanillaJS?

如果你真的心動了,打算試試看VanillaJS,現在就開啟瀏覽器,連接VanillaJS官方網站vanilla-js.com,就會看到Facebook、Google、YouTube、Yahoo、Wikipedia等各大網站,都是VanillaJS的愛用者,還有什麼值得猶豫的?馬上就在「Download」的部份,勾選你想要的功能吧!下載的js檔案就只會包含相關功能必要的程式碼,關於使用方式,官方網站列出了豐富的使用文件,還有一大堆參考書籍……

好吧!以上都是搞笑,你打開下載的js檔案,裡頭根本就一無所有,所謂豐富的文件,就只是連到Mozilla的JavaScript文件,而一大堆的參考書籍,只是在Amazon搜尋JavaScript罷了,在VanillaJS官方網頁上列出的API使用方式,也只是瀏覽器上的原生JavaScript操作,任何的程式庫或框架,底層都是這些原生操作,因此不用懷疑地,各大網站當然使用的都是VanillaJS!

也就是說,根本就沒有VanillaJS這個框架,這是個笑話,作者煞有其事地做了個網站,還有個可勾選功能模組的下載區,實際上是對那些只要沒了程式庫或框架,就什麼都寫不出來的開發者做出嘲諷。

任何一個程式庫或框架只要興盛到極端,必然就會出現反框架、反程式庫的聲音,就連語言興盛至極之時也是如此,必然會出現XX語言已死之類的聲浪,Java過去就有過這樣的一段日子,特別是SSH(Struts/Spring/Hibernate)組合極為流行之時,就出現過類似的聲音,新興的Java開發者根本就不清楚這些框架的底層原理是什麼,脫離了它們,就什麼也寫不出來了。

就JavaScript來說,VanillaJS這搞笑框架的出現,有許多人將矛頭直接指向jQuery這個程式庫,早就有許多「You Might Not Need jQuery」這類的文件出現,通常是指出jQuery太興盛了,基於jQuery而衍生出來的生態系太龐大了,許多開發者沒了jQuery就不能辦事,更糟的是,在處理網頁時不知不覺地,落入了jQuery特有的模式之中。

jQuery版本更迭

在《jQuery in action》中,就指出了「jQuery會使得頁面程式碼形成某種風格:通常是建立一個jQuery群集,接著對群集套用jQuery方法或方法鏈。」

遵守模式某些程度上是個好事,這能讓網站上所有(或至少大部份)程式碼遵守一致的風格,不過,只有在你完全知道jQuery的作用與規範目的下,遵守它的模式才能獲得益處,然而並不是每個網站都適用jQuery,也不是每個地方都要用到jQuery。

jQuery誕生在2006年之時,許多人都認同其最大的作用之一,就是弭平了瀏覽器間不相容的問題,當時許多JavaScript程式庫之目的都是如此,然而,隨著現今遵守標準的瀏覽器越來越多,IE的份額日趨下降,到IE9之後的版本更全面擁抱標準,這個目的之存在理由日趨薄弱。

就連jQuery的版本也開始著眼於未來,2013年釋出的2.0版,決定放棄IE8與之前的版本,刪除了一堆為了解決瀏覽器相容性,以及史前時代瀏覽器缺少的特性之程式碼,成果是容量更小(號稱減少12%)、速度更快的程式碼,不過,為了解決瀏覽器相容性的1.x版本,仍舊與2.x版本之間關係密切,例如1.10版有著對應於2.0版的特性,1.11有著對應於2.1版的特性等(然而1.x版本肥大而效能緩慢),這意謂著瀏覽器的相容性考量雖然存在,但鼓勵開發者針對現代瀏覽器(Modern browser)而設計。

現在有許多瀏覽器搶著當版本帝王,也就是時不時地就會釋出新版本,瀏覽器本身預設也會自動更新,這類瀏覽器被稱為常青瀏覽器(evergreen browser)。2014年10月時,jQuery基金會總裁在〈jQuery 3.0: The Next Generations〉中,公開宣布jQuery的下個世代,將會釋出jQuery 3與jQuery 3 Compact,前者是jQuery 2.x後繼者,只支援特定的常青瀏覽器,後者是jQuery 1.x的後繼者,提供更廣泛的瀏覽器支援。

擁抱標準的時代

jQuery 3與jQuery 3 Compact的作用之一,解決了1.x與2.x之間版本號對應的麻煩,另一方面,也暗示了弭平瀏覽器之間的差異性,不再是jQuery未來的主要考量。若針對IE瀏覽器來說,jQuery 1.x只支援IE6、7、8,jQuery 2.x支援IE9+,而jQuery 3支援IE9+,jQuery Compact 3只支援IE8+(放棄了IE6、7)。

不單是jQuery放棄了對舊版本IE的支援,連Microsoft自己(似乎)也放生了IE,推出全新的瀏覽器Edge,這是個遵守標準而實作的常青瀏覽器,使用此瀏覽器若遇到了相容性問題,官方網站會建議你直接使用IE開啟;而根據市場調查機構Net Applications最近的統計指出,近來IE首度被Chrome超越,退下了瀏覽器的王座

現在,用最新版的IE去瀏覽針對IE8前的版本而設計的網站,經常無法運作,因為,你得針對標準來實作,才能滿足IE9+的瀏覽器,這代表著,處理瀏覽器間不相容問題漸漸地簡單了,放棄舊版不符合標準的瀏覽器,已經是必要的選項之一,否則,就算是使用jQuery,你也只能使用肥大的jQuery Compact 3或甚至更為緩慢的1.x版本。

這也是為何VanillaJS網站上,只看得到一些標準實作的範例,例如淡出淡入特效的範例,就只簡單地使用了style的opacity特性,相對於要使用jQuery實現淡出淡入,還得下載jquery.min.js才能使用,前者反而簡潔而清楚了。而這也是VanillaJS揭示的目的之一,許多時候我們只需要一段簡單的JavaScript程式碼,就可以完成想要的任務,而不是下載一個jQuery程式庫。

更重要的是還能獲得效能的優勢,由於使用原生API,VanillaJS的運作比較快速,《jQuery in action》第三版特別談到如何增進jQuery執行效能,其中就多次提及:如果程式庫的底層,能夠利用到原生API,像是利用id或標籤選擇器,就有機會用到原生的getElementById、getElementByTagName等API,那就能得到效能上的助益。

實作專屬的VanillaJS框架

前端的發展實在是太迅速的,從我一開始學會VanillaJS(當時還沒這個詞)到現在,因為翻譯書籍的關係,真正深入摸過的只有jQuery,之後的Angular.js等框架只有略略看過,後來的React.js等,根本就沒有時間與心力去深入,然後就又一個Vue.js出來了。

當然,使用程式庫或框架是為了效能,它們都各有其定位與價值,不過在無法有那樣的速度能追上各種的框架前,精通VanillaJS就是最好的投資了。

有趣的是,2009年為了深入瞭解JavaScript與jQuery而留下的一份文件,日前我因為有客戶需求而重新看過一遍,發現仍然適用,在不考量舊有包袱的情況下,使用VanillaJS來示範更為輕鬆,當時為了模仿jQuery(使用VanilaJS)而刻出來的程式庫範例,反倒有點多餘了。

任何程式庫或框架,都會有其哲學,如果開發程式時需要效率,需要與人合作,瞭解一套框架的哲學並共同遵守,就管理上是必要的,然而,並非不用瞭解其背後原理。

如果你開發程式不是為了效率,而是基於學習或興趣等其他原因,或者情況沒複雜到需要用到框架,那麼就先別用框架,自己用原生JavaScript刻出想要的功能吧!除了能瞭解底層之外,更有機會逐步重構建立出自己的一套哲學,最後一個真正屬於自己的VanilaJS框架,也許就確確實實地存在,而不再只是個笑話了!

作者簡介


Advertisement

更多 iThome相關內容