私のためのbootstrap-alert.jsについて説明していますか？

Question

の下に掲載されて私は、ブートストラップを使用していると私はそのjQueryプラグインbootstrap-alert.jsに見て、私はかなりit.Theコードを取得できませんでした：

!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私は理解していません

何がselectorですか？data-targetはどこにもありません...だから、$this.attr('data-target')は何ですか？

2.このプラグインは全体としてどのように機能しますか？ドキュメントには3つの部分があり、どのように相互作用していますか？

EDIT：

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

まずあなたが何らかの形であなたが使用しているすべてで定義されていない関数を呼び出す、要素を削除します。また、私はかなりの部分understand.Thisない何かがあるすでに削除されているオブジェクト。closedはどこですか？ ありがとう、G

Answer 1

まず、jQueryプラグインの専門家ではなく、コーディングスタイルもIMHOはあまり読み込めません。また、あなたが尋ねていることを正確に理解しているかどうかはわかりませんが、それでも答えようとします。

data-targetは、閉じるボタン/リンクの文書化されていない属性のようです。クローズするボタン/リンクの親以外の、アラートとして機能する要素を選択することができます。

例：通常は、このような警告のためのHTMLを記述します。

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

最後の部分（「アラートデータ-API」）はAlert.prototype.closeをトリガー近いリンクにクリックイベントを割り当て（実際にAlertクラスのインスタンスを開始することなく）。

この機能では、最初に$this.attr('data-target')を使用して、閉じるボタンにdata-target属性があるかどうかを確認します。そうでなければ、href属性の可能なURLハッシュセグメントをIDセレクタとして使用します。閉じるボタンの親が閉じるように、アラートとして選択され

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

行のように、この例では、どちらもありません。であるにもかかわらず

：全体としての機能について

<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-targetかhref属性を使用したいですそれは残念ながら非常に複雑です。

前述のように、最後の部分は、属性data-dismiss="alert"を持つことによって定義された警告終了ボタンにクリックイベントハンドラを配置します。実際にAlertクラスのインスタンスを開始することなく、イベントハンドラとしてAlert.prototype.close関数を使用します。

第2部分（「プラグイン定義」）は、$().alert() jQueryプラグインを定義します。これはあまり意味がなく、Alertのインスタンスを作成するだけで、プラグインの引数（option）が "close"の場合は、closeメソッドが呼び出されます。独自のインスタンスを作成するのはちょっと意味がありません。これの唯一の理由は、他のプラグインのパターンと一致することです。

最初の部分はクラスAlertを定義しています。これは1つのタスクとしてのみです。別の要素（「閉じるボタン」）のクリックで要素（「警告」）を閉じる（削除する）。

あなたが理解しなければならないことは、それだけです。 「アラート」は特別なものではありません。特別な要件がないどんな種類のHTML要素でもかまいません。 $().alert()を呼び出して明示的にアラートとして要素を宣言しますが、これは必要ありません。代わりに、$().alert("close")をスクリプトを使用して要素を閉じるときに直接呼び出すか、data-dismiss="alert"で閉じるボタンを定義し、data-target、hrefを使用して、または警告の子である要素をすべて閉じることができます。

---

EDIT：（申し訳ありませんが、周りに早く取得していない）

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

属性data-targetが設定（または空だった）されなかった場合、スクリプトは、使用しようとしますセレクターとしてhref属性。 URLの「ハッシュ」部分の構文は、CSSのidセレクタと同じであるため、セレクタとして使用できます。 IE7の部分は、属性にハッシュ部分のみが含まれていても、ブラウザは完全なURLを返すからです。

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

はい、これは彼らがこの構文を選んだ理由を私は知らない

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

のように書くことができます。 IMHOそれは不必要なので、不可解なので、読めません。 $("#")はどんな結果を（$parent.length 0になります）を返すと、自身のいずれかを選択しませんので、

あなたがhref="#"を持っていた場合は、この行がそれを導くであろうが、無視するかの親（それはクラスalertを持っている場合）要素を閉じようとするアラートとして選択します。

Answer 2

私は同じ問題を抱えていました。私は試してみるためにサンプルを設定しました。
私はGitHubに移動しました：https://github.com/MikeMitterer/jQPlayGround/（スクリーンショットあり）

ソースは文書化されています。グーグル・クローム・デベロッパー・ツールについてhttps://github.com/MikeMitterer/jQPlayGround/blob/master/assets/js/sample.js

もっとに関する情報：http://code.google.com/chrome/devtools/docs/overview.html