Что такое функция Javascript, которая стоит за select2

Question

Чтобы превратить обычный HTML-выбор в select2 , в документации сказано просто вызвать select2 () для обычного HTML-выбора, подобного этому

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

Когда я попробовал это, ятакже импортировал модуль select2, который я установил через npm.

import select2 from 'select2';

Как называется функция / концепция / технология Javascript, позволяющая добавить новую функцию (в данном случае .select2 ()) всуществующий объект?

---

Обновление Я забыл упомянуть, что я использую jquery, который BJRINT подобрал.Так что, похоже, это jquery + select2 вещь.

Answer 1

Как называется функция Javascript, позволяющая добавить новую функцию в существующий объект?

Краткий ответ:

Прототипы.

Прототипы - это механизм, с помощью которого объекты JavaScript наследуют функции друг от друга. Свойство prototype можно использовать для добавления методов в существующие конструкторы.

Для получения более подробной информации о прототипе JavaScript вы можете обратиться к документации MDN по Прототипы объектов .

---

Подробный ответ:

• select2 - это плагин jQuery. Если вы проверите его исходный код , вы обнаружите, что он расширяет $.fn новой функцией под названием select2:

$.fn.select2 = function (options) {..}

• Если вы посмотрите исходный код jQuery , вы обнаружите, что jQuery.fn является псевдонимом jQuery.prototype:

jQuery.fn = jQuery.prototype = { ... }

• Функция jQuery() возвращает объект jQuery ( подробнее об этом ).

• И также в исходном коде jQuery вы можете обнаружить, что глобальная переменная '$' является псевдонимом для объекта jQuery:

window.jQuery = window.$ = jQuery;

Итак, в основном ...

• $ - псевдоним для функции jQuery ()
• $('.js-example-basic-single') возвращает объект jQuery
• Ваш плагин расширил этот объект jQuery новым методом select2()

Answer 2

Есть одна вещь, которую вы неправильно поняли.Вы сказали To turn a normal Html select into a select2 the documentation says to simply call select2() on the normal Html select like this, но это не обычный элемент выбора HTML.

Когда вы используете синтаксис $ (), вы используете jQuery для доступа к своему «обычному» HTML-элементу.

Как и другие отмечали, Select2 смог добавить метод здесь, потому что jQuery имеет расширяемую архитектуру плагинов, которая позволяет добавлять новые поведения (методы) к основному объекту jQuery, в вашем случае, $ ().

Answer 3

Как называется функция / концепция / технология Javascript, позволяющая добавить новую функцию (в данном случае .select2 ()) в существующий объект?

Что ж, JavaScript имеет прототипное наследование, что означает, что объекты могут наследовать методы от других объектов. Теперь, когда вы можете добавлять свойства к любому объекту в любое время, это на самом деле не функция, а скорее результат базового языкового дизайна. На других языках они будут называться функции расширения

  const prototype = { };
  const instance = Object.create(prototype);

  console.log(instance.method); // does not exist yet

 prototype.method = function() { };

 instance.method(); // exists now

Теперь для HTML элементов, которые также применяются: они наследуют класс Element, и вы можете легко добавить методы к его прототипу:

 Element.prototype.method = function() {
   console.log(this);
 }

 document.body.method();

В вашем случае у вас нет HTML-элемента напрямую, а есть объект экземпляра jquery, который оборачивается вокруг объекта нативного элемента. Однако базовая концепция наследования применима и к этому, что означает, что добавление методов к $.fn отражается на всех экземплярах jQuery. Вот что делает плагин.

Answer 4

В одном потоке stackoverflow какой-то пользователь сказал, что есть проблема с определенными версиями Jquery и select2. Select2 () не является функцией

В фрагменте кода stackoverflow полностью работает.

Я сделал это: https://jsfiddle.net/avfjoLtd/61/

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

</head>
<body>


<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
</body>
</html>

Но скрипка продолжает говорить: «Не удается прочитать свойство« связать »с неопределенным, попробуйте связать вручную.используя внешнюю скрипку, она работает

Answer 5

Это называется плагином JQuery.

Вот фрагмент из JQuery документации

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify(); // Makes all the links green.