简短答案：

Question

要将普通HTML选择项转换为select2，文档说，只需像这样对普通HTML选择项调用select2（）

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

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

import select2 from 'select2';

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

更新我忘了提到我正在使用jquery，这是BJRINT所掌握的。所以看来这是一个jquery + select2的事情。

Answer 1

您有一件事被误解了。您说过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访问“常规” html元素。

与其他人指出的一样，Select2之所以能够在此处添加方法，是因为jQuery具有可扩展的插件体系结构，该体系结构允许向主jQuery对象（在您的情况下为$（））添加新的行为（方法）。

Answer 2

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 3

允许您向现有对象添加新功能的Javascript功能的名称是什么？

简短答案：

原型。

原型是JavaScript对象彼此继承特征的机制。 prototype属性可用于向现有构造函数添加方法。

有关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')返回一个jQuery对象
您的插件已使用新方法select2()扩展了这个jQuery对象

Answer 4

这称为JQuery插件。

这是JQuery documentation的摘录

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

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

Answer 5

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

在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>

但是小提琴手一直在说无法读取未定义的属性“绑定”，请尝试手动绑定。用外面的小提琴，就可以了

select2背后的Javascript功能是什么

5 个答案:

简短答案：

详细答案：

所以，基本上...