你使用Bootstrap框架的 JavaScript?組件嗎? 你喜歡 Vanilla JavaScript 嗎? 如果答案是肯定的，那么你應該會對 Native JavaScript for Bootstrap 項目感興趣，這個項目的目標是消除組件對 jQuery 的依賴，改用原生 JavaScript。
　　為什么?
　　最大的動力關(guān)乎性能。
　　benchmarks的很多報告顯示，原生 JavaScript 的執(zhí)行速度優(yōu)于 jQuery，這會帶來潛在的性能提升。
　　另一個性能優(yōu)勢在于降低了頁面的大小?，F(xiàn)在來做個快速的對比。下面所有數(shù)字都是通過 gzip 壓縮過后的文件大小，單位為 KB。bootstrap.js 指原來的 Bootstrap 腳本，bsn.js 則代表 Bootstrap Native 腳本，jq 表示 jQuery。這里我們看到所有需要的組件組成的文件包，但需要指出的是，這兩個庫都是模塊化結(jié)構(gòu)，可以只加載需要的組件及其依賴的組件。
　　Bootstrap.js:
　　·jq 3.1.0 + bootstrap.js = 34.5 + 11.2 = 45.7
　　·jq 3.1.0 slim + bootstrap.js = 27.2 + 11.2 = 38.4
　　·jq 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
　　·jq 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0
　　Native JavaScript for Bootstrap:
　　·minifill + bsn.js = 2.4 + 7.8 = 10.2
　　·polyfill.io(on chrome 54) + bsn.js = 1.1 + 7.8 = 8.9
　　·polyfill.io(on IE 8) + bsn.js = 12.1 + 7.8 = 19.9

所以使用 Bootstrap 組件時，大小范圍在 [38.4, 50.0] KB，而使用 Bootstrap Native，這個范圍縮小到 [8.9, 19.9] KB.
　　瀏覽器支持
　　關(guān)于瀏覽器支持，是與 原來 Bootstrap 基于 jQuery 的腳本 進行比較，它支持 最新的主要的移動瀏覽器和桌面瀏覽器的最新版本及 IE8+ 。這由兩個 polyfill 策略實現(xiàn)。
　　第一個解決方案是使用 Polyfill.io 服務。你唯一需要做的事情就是在頁面內(nèi)插入 script 標簽來引入適合每個瀏覽器的 polyfill。
　　<script src="https://cdn.polyfill.io/v2/polyfill.js">script>
這個服務可以根據(jù)網(wǎng)站上實際使用的功能進行配置，以定制其響應。
　　除此之外，還可以使用 minifill ，一個由項目作者提供支持的輕量自定義的 polyfill。
　　用法
　　用法與原來的 Bootstrap 腳本類似，只是不再使用 jQuery，而用由這個項目支持的 Bootstrap 腳本。另外，如果需要的話，還要加入 polyfill。
　　現(xiàn)在在標簽之前引入所需要的腳本文件：
　　<script src="https://cdn.jsdelivr.net/bootstrap.native/1.0.4/bootstrap-native.js">script>
　　文檔頁面 上還列舉了一些其它的 CDN URL。也可以將文件下載到本地，在本地使用。
　　如果需要用到 polyfill，它們需要在標簽中引入：
　<script src="https://cdn.jsdelivr.net/minifill/0.0.3/minifill.min.js"> </script>
<!--[if IE]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
　　這段代碼采用 minifill polyfill。
　　確切的說，它并沒有一一對應地移植原有腳本所支持的特性。作者故意選擇留下了一些小功能，特別是不常使用的那些。主要是為了性能方面的原因，也是為了簡化開發(fā)。
　　讓我們來看看這些情況。
　　自定義事件
　　許多 Bootstrap 組件都會在生命周期中觸發(fā)事件。例如，Modal 會觸發(fā)兩個事件，分別是在它打印后和關(guān)閉后（實際上每個動作都對應兩個事件，一個在動作前發(fā)生（'show'），一個在動作后發(fā)生（'shown'））。
　　Tab 組件在切換標簽的時候也有類似的事件通知其觀察者：為當前標簽發(fā)送一個隱藏事件，同時為將要顯示的標簽發(fā)送一個顯示事件。
　　Bootstrap Native 則不同，它只為 Carousel 和 Button 提供了這些事件。最初的 Carousel 會在兩張幻燈片之間切換的時候觸發(fā)一對事件。一個是 'slide'，在切換發(fā)生前發(fā)生，另一個是 'slid'，在切換結(jié)束后發(fā)生。傳遞給事件處理函數(shù)的事件對象有兩個屬性與切換有關(guān)，direction 和 relatedTarget。
　　下面的 jQuery 代碼進行了展示：
　　$carousel .on('slide.bs.carousel', function(e) {
　　var caption = $(e.relatedTarget).find('.carousel-caption').text();
　　console.log('About to slide to the ' + e.direction + ' to slide ' + caption);
　　})
　　.on('slid.bs.carousel', function(e) {
　　var caption = $(e.relatedTarget).find('.carousel-caption').text();
　　console.log('Slid to the ' + e.direction + ' to slide ' + caption);
　　});
　　Bootstrap Native 也支持這兩個事件，但事件對象不包含 diretion 和 relatedTarget 這兩個屬性。我們這可以這樣用原生 JavaScript 重寫上面的代碼：
　　carousel.addEventListener('slide.bs.carousel', function(e) {
　　console.log('About to slide');
　　});
　　carousel.addEventListener('slid.bs.carousel', function(e) {
　　console.log('Slid');
　　});
　　如果其它組件需要自定義事件怎么辦？實現(xiàn)起來并不難。
　　首先創(chuàng)建事件對象：
　　if (('CustomEvent' in window) && window.dispatchEvent) {
　　slid = new CustomEvent("slid.bs.carousel");
　　slide = new CustomEvent("slide.bs.carousel");
　　}
　　當切換開始時，觸發(fā) ‘slide’ 事件：
　　if (slide) {
　　this.carousel.dispatchEvent(slide);
　　}
　　最后在切換結(jié)果時觸發(fā) ‘slid’ 事件：
　　if (slid) {
　　self.carousel.dispatchEvent(slid);
　　}
　　基于這個模式，也很容易給其它組件添加類似的代碼。
　　CustomEvent API 不太容易在每個瀏覽器都實現(xiàn) ，不過上面的 plyfill 會有所幫助。
　　編程 API
　　Bootstrap 組件的 API 允許使用 JavaScript 來進行初始化和控制。例如，Modal 組件有 3 個方法用于控制其可見性：:
　　$('#mymodal').modal('show')
　　$('#mymodal').modal('hide')
　　$('#mymodal').modal('toggle')
　　Bootstrap Native 一般不提供這些編程控制。上述方法已不再存在于 Modal，以及 Dropdonw，Tab，Alert 和 Carousel。
　　其它不同點
　　如果我們對組件進行并行比較，很明顯 Bootstrap Native 不是一個文本端口，在某些情況下它刪除功能，而在其他情況下它添加一些新的東西。
　　比如，我們在 Tooltip 中必須顯式初始化 Bootstrap，因為性能原因， data-api 將選擇性加入 。在 Bootstrap Native 中，只要 DATA API 屬性被正確設(shè)置，初始化工作會自動執(zhí)行。另外，Native 版本可以自動放置于標題欄，不需要額外選擇。但是它不覆蓋像 Bootstrap 那樣的模板系統(tǒng)。
　　下拉菜單提供另一個關(guān)于 刻意?實現(xiàn)的選擇?的例子，它相對于 Bootstrap 組件略有差異。jQuery 下拉菜單會在點擊菜單 item 后關(guān)閉，而 Native 菜單會保持打開狀態(tài)。
　　鍵盤輸入處理也是不完整的。標簽導航有用，但是其他操作是部分實現(xiàn)的 。
　　在 Modal 中，沒有用于指定加載組件內(nèi)容的來源的 remote 選項 ，但是有一個可以動態(tài)生成內(nèi)容的模板系統(tǒng)。
　　對于 Carousel 來說，jQuery 組件默認會響應鍵盤輸入，而在原生 JavaScript 的版本中，需要通過 data-keyboard 屬性來啟用這個功能：
　　<div id="carousel" class="carousel slide" ... data-keyboard="true">
　　對于這個組件的另一個不同之處在于如何定義持續(xù)時間的選項。這個選項的值決定了從當前幻燈片切換到下一個幻燈片的過渡效果持續(xù)的時間。兩個庫定義的默認時間都是 600 毫秒，對于大多數(shù)情況來說這都是一個合理的時間。
　　如果我們想改變這個時間，因為在兩個庫中的動畫都是通過 CSS 實現(xiàn)的，所以我們首先要添加一些 CSS 規(guī)則來覆蓋默認的持續(xù)時間。
　　Bootstrap 中需要使用一些 jQuery 代碼來修改這個時間，這通過 JavaScript 的硬代碼實現(xiàn)：
　　$carousel.data()['bs.carousel'].constructor.TRANSITION_DURATION = 2000;
　　另一方面，Bootstrap Native 允許通過組件根元素上的 data-duration 屬性來設(shè)置，處理起來更容易：
　　<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-duration="2000">
　　其它組件（比如 Modal 和 Tooltip）也可以使用相同的選項來改變過渡動畫的時間。
　　我覺得這個項目非常有意思，但我不會很快摒棄原來的 jQuery 版本。實際上，在其它‘jQuery 對戰(zhàn) Vanilla JS’的比較中，哪一個勝出取決于具體的使用情況。
　　上一節(jié)研究的問題不應該是主要阻礙，所以如果你不是在尋找一個完美的逐字逐句轉(zhuǎn)換 Bootstrap JavaScript 組件的工具，并且已經(jīng)準備好應付一些細節(jié)上的差異，這可能是正確的解決方案。
另外，值得一提的是，該項目正積極發(fā)展，可以在 GitHub tracker 上快速返饋問題。

來源：開源中國