Question

想象一个标准场景，我有多个原生HTML元素，比如select s，我使用一些外部库来微调它们，比如select2.js。要将库应用于本机元素，请执行以下操作：

HTML：

<select id = 'foo1'></select>
<select id = 'foo2'></select>
<select id = 'foo3'></select>

JS：

$(document).ready(function(){
    $('select').select2({/* options */});

现在，想象一下有一些库方法，让我们称之为select2_method，我想要应用于我的select之一。显然，我需要select2对象来应用它。但问题是我只是将select2构造函数应用于我的select元素而不保存它返回的对象！

如果我为每个HTML元素分别调用外部库的构造函数，并将构造函数的值赋给某个变量，则不会出现此问题：

$(document).ready(function(){
        var $foo1_select2 = $('#foo1').select2({/* options */});
        var $foo2_select2 = $('#foo2').select2({/* options */});
        var $foo3_select2 = $('#foo3').select2({/* options */});
        // ...
        $foo1_select2.select2_method(/*...*/) // applying the desired library method

方法的明显缺陷是我必须

增加变量数量（一个HTML select元素的一个select2对象）
增加代码大小并将select2应用于每个元素，而不是循环遍历所有目标元素并一次性应用库
可能使用全局变量

在这种情况下，常见的做法是什么？您是否必须在循环中保存对象，然后以某种方式通过初始本机HTML元素访问该对象？我的意思是，像

var select2_array = []; 
$(document).ready(function(){
        $('select').each(function(){
              select2_array.push($(this).select2({/* options */});)

但是，那么用HTML ID标识的select2_array元素和原生HTML select的映射方法是什么？

我希望，我明确提出了这个问题。事实上，这个问题使我的项目开发变得非常缓慢，我非常感谢分享有关JS工具的最佳实践，以便在这方面组织代码

初始化后访问库对象而不使用过多的变量

0 个答案: