想象一个标准场景,我有多个原生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元素访问该对象? 我的意思是,像
var select2_array = [];
$(document).ready(function(){
$('select').each(function(){
select2_array.push($(this).select2({/* options */});)
但是,那么用HTML ID标识的select2_array
元素和原生HTML select
的映射方法是什么?
我希望,我明确提出了这个问题。事实上,这个问题使我的项目开发变得非常缓慢,我非常感谢分享有关JS工具的最佳实践,以便在这方面组织代码