<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type='text/css' />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/my-plugin.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="shadow">
<h3>Click on Paragraph</h3>
<button name="red">Установить - Red</button>
<button name="green">Установить - Green</button>
<button name="blue">Установить - Blue</button>
<button name="reset">Сбросить цвет</button>
<button name="destroy">Вернуть по умолчанию</button>
<br/>
<p>
Искусство появилось почти сразу же после появления человечества,
и на протяжении веков было создано множество величайших
произведений в живописи, скульптуре и других сферах искусства.
Какие из них считать самыми лучшими, вопрос очень спорный,
ведь даже эксперты расходятся во мнениях на этот счет.
Мы же сегодня попробуем составить список десяти наиболее
известных произведений искусства за все время.
</p>
<p>
Каменные монолитные статуи, расположенные на острове Пасхи в Тихом океане.
Считается, что статуи были созданы аборигенами острова
между 1250 и 1500 годами нашей эры.
</p>
<p>
Одна из наиболее известных древнегреческих скульптурных работ,
созданная где-то между 130 и 100 годами до нашей эры.
Мраморная скульптура была обнаружена в 1820 году на острове Милос.
</p>
</body>
</html>
плагин
(function ($) {
/*значение по умолчанию - ЗЕЛЁНЫЙ */
var defaults = {color: 'green'};
var methods = {
init: function (params) {
/*актуальные настройки, будут индивидуальными
при каждом запуске*/
var options = $.extend({},
defaults,
params);
/*инициализируем один раз
* data() — это хороший способ отслеживать
* состояние переменных для каждого элемента.
* Рекомендуется использовать один объектный литерал,
* который будет объединять все ваши переменные
* под одной крышей и вы будете обращаться к
* этому объекту через одно пространство имён.*/
var init = $(this).data('myPlugin');
if (init) {
return this;
} else {
$(this).data('myPlugin', true);
return this.on("click.myPlugin", function () {
$(this).css('color', options.color);
});
}
},
/* Устанавливаем цвет*/
color: function (color) {
$(this).css('color', color);
},
/* Меняем на цвет, который мы считаем цветом по умолчанию*/
reset: function () {
$(this).css('color', 'black');
},
destroy: function () {
/* var resetMethods = methods.reset;
$(resetMethods).apply(this);*/
methods.reset.apply(this);
/*указывает на то, что нужно отсоединить все
* обработчики, привязанные к пространству имен ".myPlugin"*/
$(this).off(".myPlugin");
}
};
$.fn.myPlugin = function (method) {
/* если запрашиваемый метод существует, мы его вызываем,
* все параметры, кроме имени метода прийдут в метод,
* this (то есть контекст, полученный в точке вызвова),
* будет использоваться в вызываемом методе*/
if (methods[method]) {
/*Извлекает диапазон значений и возвращает его в виде нового массива.*/
var rangeValues = Array.prototype.slice;
/* Метод call позволяет указать объект,
на который будет ссылаться this во время вызова Функции.
Метод call применяется к функции, в параметре получает объект.
Помимо контекста, в параметры передаем параметр функции.
(который был указан нами в точке вызова плагина, при вызове
текущей функции, например ' $('p').myPlugin('color', color);'*/
var callMethod = rangeValues.call(arguments, 1);
var currentMethod = methods[method];
var readyFunction = currentMethod.apply(this, callMethod);
return readyFunction;
// return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
/* если первым параметром при вызове плагина указан объект,
либо параметров нет, тогда вызываем метод init,
для первоначальной настройки плагина*/
return methods.init.apply(this, arguments);
} else {
/* если условия не выполнились, тогда указываем, что запрашиваемый метод,
* остутсвует в данном плагине*/
$.error('Метод "' + method + '" не найден в плагине jQuery.myPlugin');
}
};
})(jQuery);
вызов плагина
$(document).ready(function () {
$('p').myPlugin();
// $('p').myPlugin();
/*указывает на то, что в качестве селекторо,
* используется наличие элемента button, но при этом указывается
* условие, что событие click и его обработчик,
* должне сработать для элементов button c 0 по 2 (одинаковые элементы в
* DOM-структуре, имеют порядковый номер), то есть не более 3-го номера*/
$('button:lt(3)').click(function(){
var color = this.name;
/*вызываем метод color, из указанного плагина,
*'color' - это аргумент, который указывает на имя метода
* из массива методов в плагине;
* color - Содержит название цвета, которое нужно передать в
* вызываемый метод плагина*/
$('p').myPlugin('color', color);
});
/* если элемент button, имеет индекс 3 (то есть 4-й элемент)
* в массиве элементов button, тогда запускаем другой обработчик */
$('button:eq(3)').click(function(){
$('p').myPlugin('reset');
});
/* если элемент button, имеет индекс 4 (то есть 5-й элемент)
* в массиве элементов button, тогда запускаем другой обработчик */
$('button:eq(4)').click(function(){
$('p').myPlugin('destroy');
});
});
Вопросы:
/*Извлекает диапазон значений и возвращает его в виде нового массива.*/
var rangeValues = Array.prototype.slice;
что это такое, диапазон каких значений ?
var currentMethod = methods[method];
Это сформированный объект, который содержит данные о запрашиваемом методе ?
Что это за структура и что он содержит ?
var readyFunction = currentMethod.apply(this, callMethod);
" Метод
apply позволяет указать объект, на который будет ссылаться this во время вызова Функции. "
Так метод
call() то же самое делает.
В чем же отличие ?
destroy: function () {
/* var resetMethods = methods.reset;
$(resetMethods).apply(this);*/
methods.reset.apply(this);
/*указывает на то, что нужно отсоединить все
* обработчики, привязанные к пространству имен ".myPlugin"*/
$(this).off(".myPlugin");
}
Вообще не понятно, что делает данный метод
reset() для чего здесь.
И еще вопрос, я оставлял комментарии в плагине, я правильно понял суть работы участок кода ?
https://thimbleprojects.org/alex-r/637863
Спасибо.