Bootstrap整體框架之JavaScript插件架構(gòu)
本文實例為大家介紹了JavaScript插件架構(gòu)的知識點,供大家參考,具體內(nèi)容如下
1. JavaScript插件架構(gòu)
如下是插件alert的全部代碼,每個插件都定義在如下類似的作用域中:
+function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $(el).on('click', dismiss, this.close) } Alert.VERSION = '3.3.7' Alert.TRANSITION_DURATION = 150 Alert.prototype.close = function (e) { var $this = $(this) var selector = $this.attr('data-target') if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 } var $parent = $(selector === '#' ? [] : selector) if (e) e.preventDefault() if (!$parent.length) { $parent = $this.closest('.alert') } $parent.trigger(e = $.Event('close.bs.alert')) if (e.isDefaultPrevented()) return $parent.removeClass('in') function removeElement() { // detach from parent, fire event then clean up data $parent.detach().trigger('closed.bs.alert').remove() } $.support.transition && $parent.hasClass('fade') ? $parent .one('bsTransitionEnd', removeElement) .emulateTransitionEnd(Alert.TRANSITION_DURATION) : removeElement() } // ALERT PLUGIN DEFINITION // ======================= function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.alert') if (!data) $this.data('bs.alert', (data = new Alert(this))) if (typeof option == 'string') data[option].call($this) }) } var old = $.fn.alert $.fn.alert = Plugin $.fn.alert.Constructor = Alert // ALERT NO CONFLICT // ================= $.fn.alert.noConflict = function () { $.fn.alert = old return this } // ALERT DATA-API // ============== $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) }(jQuery); //通過將作用域內(nèi)的Alert類賦值給jQuery的alert對象的Constructor屬性,在IIFE作用域外也可以使用Alert類,比如這行代碼 var Alert = $.fn.alert.Constructor
BootStrap所有的插件在開發(fā)中都遵循了同樣的規(guī)則,也為自定義插件提供了規(guī)范和依據(jù)(如下三個規(guī)則):
1.HTML布局規(guī)則:基于元素自定義屬性的布局規(guī)則,比如使用類似于data-target的自定義屬性
2.JavaScript實現(xiàn)步驟(所有插件都遵循jQuery插件開發(fā)的標(biāo)準(zhǔn)步驟,所有事件保持統(tǒng)一的標(biāo)準(zhǔn))
3.插件調(diào)用方法(插件使用方式可以是HTML聲明式或者調(diào)用式)
1.1 HTML布局規(guī)則
基于元素自定義屬性的布局規(guī)則,類似于data-* 的自定義屬性
默認(rèn)情況下,所有插件都可以通過設(shè)置特定的HTML代碼和相應(yīng)的自定義屬性來實現(xiàn)。
在頁面加載的時候,js代碼會自動檢測到這些標(biāo)記,并自動綁定相應(yīng)的事件,不需要添加額外的代碼。
點擊按鈕之后就會關(guān)閉警告框:
<div class="alert"> <button type="button" class="close" data-dismiss="alert"></button> <strong>警告!</strong>你輸入的項目不合法! </div>
下拉菜單:在button按鈕上添加data-toggle=”dropdown”屬性,單機按鈕時,默認(rèn)隱藏的dropdown-menu會顯示
//例子:下拉菜單.html <div class="btn-group"> <button type="button" class="btn btn-default" data-toggle="dropdown"> 我的書籍<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">編程</a></li> <li><a href="#">設(shè)計</a></li> <li><a href="#">深入</a></li> </ul> </div>
1.2 JavaScript實現(xiàn)步驟(所有插件都遵循jQuery插件開發(fā)的標(biāo)準(zhǔn)步驟,所有事件保持統(tǒng)一的標(biāo)準(zhǔn))
BootStrap中所有JavaScript插件走遵循統(tǒng)一的實現(xiàn)步驟,維護方便,自定義插件也方便,步驟如下:
1.聲明立即調(diào)用函數(shù),比如+function($){“use strict”;…}(jQuery);
參數(shù)中傳入jQuery的對象,通過參數(shù)引入變量,好處是:1.函數(shù)內(nèi)部的符變量代表了局部變量,而不是全局變量中代表jQuery的符變量,以達到防止變量污染的目的。2.內(nèi)部的代碼都是私有代碼,外部代碼無法訪問。只能通過第三步,在.fn上設(shè)置了插件(比如.fn.alert=)的形式,通過符變量才能將整個插件通過唯一的借口$.fn.alert暴露出去,從而保護了內(nèi)部代碼。
//function前邊的+,主要目的是防止前面有未正常結(jié)束的代碼(比如遺漏了分號),導(dǎo)致前后代碼被編譯器認(rèn)為是一體的,從而導(dǎo)致代碼運行出錯。
+function($){ "use strict"; }(window.jQuery);
2.定義插件類(或者選擇器)以及相關(guān)原型方法。比如Alert,prototype.close
定義插件類Alert,然后在定義一些原型函數(shù),比如close函數(shù)方法。
先定義選擇器,所有符合該自定義屬性的元素可以觸發(fā)下面的事件。
var dismiss = '[data-dismiss="alert"]'; var Alert = function(el) { //傳入元素,如果元素內(nèi)部有dismiss上設(shè)置的自定義屬性,則click事件會觸發(fā)原型上的close方法 $(el).on('click',dismiss,this.close); }; Alert.prototype.close = function(e) { }
3.在jQuery上定義插件并重設(shè)插件構(gòu)造函數(shù),例如$.fn.alert.Constructor=Alert
在jQuery上定義插件,以便通過jQuery.插件名稱的方式,也能夠使用該插件。
function Plugin(option) { return this.each(function () { var $this = $(this) //獲取存儲的Alert對象,如果是第一次執(zhí)行變量data的值為undefined var data = $this.data('bs.alert') //緩存沒有,就new一個alert對象,存儲在元素的jQuery對象上的‘bs.alert'數(shù)據(jù)字段 if (!data) $this.data('bs.alert', (data = new Alert(this))) //支持傳入方法名參數(shù),執(zhí)行該方法,這里就是data.close() if (typeof option == 'string') data[option].call($this) }) } //jQuery插件的定義使用了標(biāo)準(zhǔn)的方式,在fn上進行擴展,在jQuery上定義alert插件 //保留其他插件的$.fn.alert代碼(如果定義)以便在noConflict之后,可以繼續(xù)使用改舊代碼 //先備份之前插件的舊代碼,以便在后面防沖突的時候使用 var old = $.fn.alert $.fn.alert = Plugin //在附加擴展之后,重新設(shè)置插件的構(gòu)造器(即Constructor屬性),這樣就可以通過Constructor屬性查詢到插件的真實類函數(shù),使用new操作符實例化的時候也不會出錯 //js區(qū)分大小寫,所以這里的Constructor只是一個普通屬性,跟constructor不同,通過將作用域內(nèi)的Alert類賦值給jQuery的alert對象的Constructor屬性,在IIFE作用域外也可以使用Alert類 $.fn.alert.Constructor = Alert
不聲明第三步的話,HTML聲明式的方式也是可以用的。所以第三步是專門為某些喜歡用js代碼觸發(fā)事件的人所準(zhǔn)備的。需要注意的是,如果第三步不需要,第四步的方?jīng)_突的功能也就沒辦法用了~
4.防沖突處理(noConflict),例如$.fn.alert.noConflict
目的是讓BootStrap插件和其他UI庫的同名插件并存。
$.fn.alert.noConflict = function() { //恢復(fù)以前的代碼 $.fn.alert = old //將$.fn.alert.noConflict()設(shè)置為BootStrap的alert插件 return this }
比如A庫中有個同名.fn.alert插件,則BootStrap在執(zhí)行之前就通過old先備份了,然后執(zhí)行.fn.alert.noConflict后就會還原該old對象插件
而使用BootStrap的alert插件的話,則通過var alert = $.fn.alert.noConflict()的形式,將BootStrap的alert插件轉(zhuǎn)移到另外一個變量上,從而繼續(xù)使用。
5.綁定各種觸發(fā)事件(data-api)
由于已經(jīng)為jQuery提供了默認(rèn)的$.fn.alert擴展插件功能,就可以手工編寫js代碼來觸發(fā)事件了。
這里主要是為聲明式的HTML觸發(fā)事件。即:在HTML文檔里已經(jīng)按照布局規(guī)則聲明了相關(guān)的自定義屬性(比如data-dismiss=”alert”),然后通過這里的代碼初始化默認(rèn)的單擊事件行為。
/* ALERT DATA-API 這段JavaScript代碼將click委托事件監(jiān)聽器綁定在document元素上,并給click事件賦予命名空間 jQuery將事件綁定在document文檔對象上的好處,就是js事件代理的優(yōu)點 */ $(document).on('click.bs.alert.data-api',dismiss,Alert.prototype.close)
命名空間的話好處:http://suqing.iteye.com/blog/1533123,具體如下
jQuery1.7開始,jQuery引入了全新的事件綁定機制,jQuery .on() 和 off() 兩個函數(shù)統(tǒng)一處理事件綁定,也是jQuery觸發(fā)DOM元素事件的最佳方法。有時候既要trigger手動觸發(fā)事件,也要從DOM元素上解綁事件,比如:
$('.item').on('click', doThisCoolThing); $('.item').on('click', doThisOtherCoolThing); $('.item').trigger('click'); // 兩個click事件都觸發(fā) $('.item').off('click'); // 兩個click事件都解綁
使用事件命名空間我們可以在創(chuàng)建事件的時候指派名稱到事件處理器,并在使用trigger()和off()時通過這個名稱指定到特定的函數(shù)。調(diào)用的時候就可以通過使用不同的命名空間靈活的指派事件. 比如:
$('.item').on('click.navigate', doThisCoolThing); $('.item').on('click.notify', doThisOtherCoolThing); $('.item').trigger('click.navigate'); // 只有帶有navigate這個命名空間的方法才會觸發(fā) $('.item').off('click.notify'); // 只有帶有notify這個命名空間的方法才會解綁
也可以使用多個命名空間,無論使用哪個名字都會生效,通過命名空間代碼規(guī)范(產(chǎn)品.模塊.事件)讓事件的層次更清晰:
$('.item').on('click.navigate.notify', doThisCoolThing); $('.item').trigger('click.navigate'); // 將觸發(fā)click事件 $('.item').off('click.notify'); // 將解綁click事件
參考資料:
http://www.andismith.com/blog/2011/11/on-and-off/
http://www.andismith.com/blog/2013/02/jquery-on-and-off-namespacing/
1.3 插件調(diào)用方法(插件使用方式可以是HTML聲明式或者調(diào)用式)
1.插件可以js代碼調(diào)用,都提供多種調(diào)用方式(無參數(shù)傳遞,傳遞對象字面量,直接傳入一個需要執(zhí)行的方法名稱字符串)
$("#myModal").modal(); $("#myModal").modal({keyboard:false}); $("#myModal").modal('show');
每個插件都有一個Constructor屬性,表示原始的構(gòu)造函數(shù),比如fn.alert.Constructor也可以通過(‘選擇器').data(‘bs.插件名稱')獲取特定插件的實例
2.html聲明式就是直接在html中進行聲明data-* 自定義屬性即可
若想禁用方法
//命名空間為data-api的全部事件禁用 $(document).off('.data-api'); //禁用特定插件的默認(rèn)行為,禁用該插件所在命名空間下事件即可 $(document).off('.alert.data-api'); //禁用該alert插件的click事件 $(document).off('click.alert.data-api');
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js+flash實現(xiàn)的5圖變換效果廣告代碼(附演示與demo源碼下載)
這篇文章主要介紹了js+flash實現(xiàn)的5圖變換效果廣告代碼,涉及JavaScript結(jié)合flash調(diào)用圖片實現(xiàn)幻燈廣告效果,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項,需要的朋友可以參考下2019-05-05js動態(tài)設(shè)置鼠標(biāo)事件示例代碼
動態(tài)設(shè)置鼠標(biāo)事件的方法有很多,接下來為大家介紹下js中是如何做到的,感興趣的朋友不要錯過2013-10-10Javascript實現(xiàn)視頻文件播放功能(示例詳解)
這篇文章主要介紹了Javascript實現(xiàn)視頻文件播放功能,使用CSS完成相應(yīng)的布局樣式,利用JavaScript函數(shù)來監(jiān)聽進度條,然后使用鼠標(biāo)點擊按鈕實現(xiàn)對視頻的播放,需要的朋友可以參考下2023-10-10