select2 后面的 Javascript 特性是什么

Question

要将普通 Html select 转换为 select2 文档说只需在普通 Html [= 上调用 select2() 30=]像这样

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

当我尝试这个时，我还导入了我通过 npm 安装的 select2 模块。

import select2 from 'select2';

允许向现有对象添加新功能（在本例中为 .select2()）的 Javascript 功能/概念/技术的名称是什么？

Update 我忘了说我正在使用 jquery，这是 BJRINT 捡到的。所以这似乎是 jquery + select2 事情。

Answer 1

这叫做 JQuery 插件。

这是来自 JQuery documentation

的片段

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

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

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 select 元素。

当您使用语法 $() 时，您正在使用 jQuery 访问您的 "normal" html 元素。

就像其他人指出的那样，Select2 能够在这里添加一个方法，因为 jQuery 有一个可扩展的插件架构，允许向主 jQuery 对象添加新的行为（方法），在你的情况，$()。

Answer 3

What is name of the Javascript feature / concept / technology that allows one to add a new function (in this case .select2()) to an existing object?

嗯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 class，您可以轻松地向其原型添加方法：

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

 document.body.method();

在你的情况下，你没有直接的 HTML 元素，而是一个 jquery 实例对象，它环绕着原生元素对象。然而，继承的基本概念也适用于此，这意味着向 $.fn 添加方法会反映到所有 jQuery 实例。这就是插件正在做的事情。

Answer 4

What is name of the Javascript feature that allows one to add a new function to an existing object?

简答：

原型。

Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype property can be used to add methods to existing constructors.

有关JavaScript原型的更多详细信息，您可以参考Object prototypes上的MDN文档。

详细答案：

select2 是一个 jQuery 插件。如果您检查它的 source code，您会发现它扩展了 $.fn，并带有一个名为 select2:

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

如果您检查 jQuery 的 source code，您会发现 jQuery.fn 是 jQuery.prototype:

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

jQuery()函数returns a jQuery object (more details on this).

并且，同样在 jQuery 的源代码中，您可以发现 global variable '$' 是 jQuery 对象的别名：

window.jQuery = window.$ = jQuery;

所以，基本上...

$ 是 jQuery() 函数的别名
$('.js-example-basic-single') returns一个jQuery对象
您的插件已使用新方法 select2()

Answer 5

在 Whosebug 的一个线程中，一些用户说某些 Jquery 版本和 select2 存在问题。 Select2() is not a function

在 Whosebug 中代码片段完全有效。

我这样做了： 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>

但是fiddle一直说无法读取未定义的属性 'bind'。使用外部 fiddle，有效

select2 后面的 Javascript 特性是什么

What is the Javascript feature that is behind select2

javascript

jquery

prototype

jquery-select2

jquery-select2-4

简答：

详细答案：

所以，基本上...