精通VanillaJS

在前端當道，百花齊開的這個年代，還在苦苦追逐不斷冒出的新程式庫嗎？擔心落入每次追逐又是新的投資，而之後就又是沒落的循環嗎？如果這是你的情況，你需要的是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框架，也許就確確實實地存在，而不再只是個笑話了！