爲我解釋bootstrap-alert.js？

Question

我使用的引導，我看着它的jQuery插件bootstrap-alert.js，我不能完全得到後援代碼下面貼：

!function($){ 

    "use strict" 

/* ALERT CLASS DEFINITION 
    * ====================== */ 

    var dismiss = '[data-dismiss="alert"]' 
    , Alert = function (el) { 
     $(el).on('click', dismiss, this.close) 
     } 

    Alert.prototype = { 

    constructor: Alert 

    , close: function (e) { 
     var $this = $(this) 
     , selector = $this.attr('data-target') 
     , $parent 

     if (!selector) { 
     selector = $this.attr('href') 
     selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
     } 

     $parent = $(selector) 
     $parent.trigger('close') 

     e && e.preventDefault() 

     $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

     $parent.removeClass('in') 

     function removeElement() { 
     $parent.remove() 
     $parent.trigger('closed') 
     } 

     $.support.transition && $parent.hasClass('fade') ? 
     $parent.on($.support.transition.end, removeElement) : 
     removeElement() 
    } 

    } 


/* ALERT PLUGIN DEFINITION 
    * ======================= */ 

    $.fn.alert = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('alert') 
     if (!data) $this.data('alert', (data = new Alert(this))) 
     if (typeof option == 'string') data[option].call($this) 
    }) 
    } 

    $.fn.alert.Constructor = Alert 


/* ALERT DATA-API 
    * ============== */ 

    $(function() { 
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) 
    }) 

}(window.jQuery) 

這是幾乎所有的插件中最簡單的一個given.What我不明白的是

1.what的selector？data-target是無處找到...那麼，什麼$this.attr('data-target')做什麼？

2.這個插件如何作爲一個整體？正如文檔所說，它有三個部分，它們是如何相互作用的？

編輯：還有一些我不太understand.This部分：

functionremoveElement() { $parent.remove() $parent.trigger('closed') }

首先你刪除的元素，然後以某種方式調用它完全不使用定義的函數一些物體已被移除。closed在哪裏？ 謝謝，G

Answer 1

首先，我不是jQuery插件的專家，再加上編碼風格是恕我直言，不太可讀。此外，我不確定我是否明白你在問什麼，但我會盡力回答。

data-target似乎是關閉按鈕/鏈接上未公開的屬性。它允許您選擇一個用作警報的元素，而不是要關閉的clsoe按鈕/鏈接的父級。

一個例子：通常你會寫這樣的警報的HTML：

<div class="alert"> 
    <a class="close" data-dismiss="alert">&times;</a> 
    Some message 
</div> 

最後一部分（「警報數據-API」）分配一個click事件的密切聯繫，這會觸發Alert.prototype.close函數（沒有實際啓動Alert類的實例）。

在該函數中，首先使用$this.attr('data-target')來檢查關閉按鈕是否具有data-target屬性。如果不是，則它使用href屬性中可能的URL哈希段作爲ID選擇器。在這個例子中，既不存在，那麼在該行

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

關閉按鈕的父被選爲警報關閉。

如果你想不過的關閉按鈕是警惕外，你會使用data-target或href屬性：

<div id="my-alert" class="alert"> 
    Some message 
</div> 

<!-- ... --> 

<a class="close" data-dismiss="alert" href="#my-alert">Close "my-alert"</a> 

<!-- ... --> 

<a class="close" data-dismiss="alert" data-target=".alert">Close all "alerts" with the class "alert"</a> 

---

關於功能作爲一個整體：

儘管是總之很不幸，這很複雜。我將嘗試並簡要地解釋它：

如上所述：最後一部分在任何具有屬性data-dismiss="alert"定義的警報關閉按鈕上放置一個單擊事件處理程序。它使用Alert.prototype.close函數作爲事件處理程序，而不實際啓動Alert類的實例。

第二部分（「插件定義」）定義了$().alert() jQuery插件。它沒有多大作用，只是創建一個Alert實例，如果插件的參數（option）是「close」，它將調用close方法。自己創建實例有點毫無意義。唯一的原因是匹配其他插件的模式。

第一部分定義了類Alert，它只是一個任務：關閉（刪除）另一個元素（「關閉按鈕」）點擊時的元素（「alert」）。

你必須明白的一件事是。 「警報」沒有什麼特別的。它們可以是任何一種沒有特殊要求的HTML元素。您通過調用$().alert()就可以明確「聲明」一個元素作爲警報，但這不是必需的。相反，如果要使用腳本關閉元素，或者定義一個關閉按鈕data-dismiss="alert"，然後使用data-target，href或通過成爲警報的子節點，可以關閉它指向的任何元素，您可以直接調用$().alert("close")。

---

編輯：（對不起，沒能抽出更早）

if (!selector) { 
    selector = $this.attr('href') 
    selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
    } 

如果屬性data-target未設置（或者是空的），那麼腳本嘗試使用作爲選擇器的href屬性。 URL的「hash」部分的語法與CSS id選擇器相同，因此可用作選擇器。 IE7的一部分是因爲即使該屬性只包含散列部分，瀏覽器仍然會返回完整的URL。

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

是的，這可以寫成

if (!$parent.length) { 
    // ... 
} 

我不知道他們爲什麼選擇這個語法。恕我直言，這是不必要的神祕，因此無法讀取。

如果你有href="#"，那麼這條線會導致它被忽略，因爲$("#")將不會返回任何結果（$parent.length是0），並選擇使用本身（如果它有類alert）或的父元素作爲要關閉的警報。

Answer 2

我有同樣的問題，我設置了一個樣品來玩。
我把它移到GitHub的：https://github.com/MikeMitterer/jQPlayGround/（有截圖）

源文件 - 如果你想，玩它。 （指使用開發工具來調試代碼）
JS-來源：https://github.com/MikeMitterer/jQPlayGround/blob/master/assets/js/sample.js

更多相關信息關於谷歌 - 鉻 - 開發工具：（！選擇）http://code.google.com/chrome/devtools/docs/overview.html