欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap整體框架之JavaScript插件架構(gòu)

 更新時間：2016年12月15日 14:13:44   作者：github_34514750  
這篇文章主要介紹了Bootstrap整體框架之JavaScript插件架構(gòu)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家介紹了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)文章

最新評論