объясните мне 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 Я не понимаю,

1.what's selector? data-target негде найти ... Итак, что такое $this.attr('data-target')?

2. Как этот плагин работает в целом? Как говорится в документе, он состоит из трех частей, как он взаимодействует друг с другом?

EDIT: Существует также то, что я не совсем understand.This часть:

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

Сначала вы удалите элемент, то каким-то образом вы вызываете функцию, которая не определена на всех, используя некоторый объект, который уже удален. Где closed? Спасибо, G

Answer 1

Во-первых, я не являюсь экспертом в плагинах jQuery, а также стиль кодирования IMHO не очень читаем. Кроме того, я не уверен, понимаю ли я, что именно вы спрашиваете, но я постараюсь ответить, тем не менее.

data-target похоже на недокументированный атрибут на кнопке закрытия/ссылке. Он позволяет вам выбрать элемент, который действует как предупреждение, кроме родителя кнопки clsoe/link, которая должна быть закрыта.

Пример: Обычно вы бы писать 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. Если нет, то он использует возможный сегмент хеша URL в атрибуте href в качестве селектора идентификаторов. В этом примере нет ни, так и в линии

$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.

Вторая часть («Определение плагина») определяет плагин jQuery $().alert(). Это не так много, просто создает экземпляр Alert и если аргумент (option) плагина «закрыт», он вызовет метод close. Создание экземпляра на его основе немного бессмысленно. Единственная причина для этого - сопоставить шаблон других плагинов.

В первой части определяется класс Alert, который как единственная задача: Закрыть (удалить) элемент («предупреждение») при щелчке другого элемента (кнопка «закрыть»).

Одна вещь, которую вы должны понимать, это. «Оповещения» не являются чем-то особенным. Они могут быть любыми типами 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, поэтому он может использоваться в качестве селектора. Часть 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

Больше информации о Google-Chrome-разработчиков-Tools: (! Селектор) http://code.google.com/chrome/devtools/docs/overview.html