前言
在封装layui部分插件时,我发现文档中并未描述,同时初始化多个同类型插件,故有此文。
正文
要实现初始化多个同类型插件有两种写法:一种是each,一种是map,下方代码是以layui调色板模块为示例。废话不多说,直接上代码。
代码
写法一:
$('.color-btn').each(function(){
var _this = $(this);
colorpicker.render({
elem: this
,predefine: true
,done: function(color){
_this.next().val(color);
}
});
});
写法二:
$('.color-btn').map(function(){
var _this = $(this);
colorpicker.render({
elem: this
,predefine: true
,done: function(color){
_this.next().val(color);
}
});
});
后记
你以为这就结束了?既然用的是layui,当然是遵循layui的开发规范啦。查看layui文档>底层方法>其他方法。
这就是第三种写法。
彩蛋
看到这里,其实这个功能早就实现了。然而本着探索精神,我还是仔细查看layui文档,终于在字里行间找到了第四种写法,直接上代码。
lay('.color-btn').each(function(){
var _this = $(this);
colorpicker.render({
elem: this
,predefine: true
,done: function(color){
_this.next().val(color);
}
});
});
这段代码藏在代码示例>日期和时间选择
借此我实例了调色板模块,这些写法都基于jq的循环遍历方法,再深挖一点,就是js的遍历,再次强调了基础知识的重要。
温馨提示
1.实例化插件时要先引入哦。
2.使用$(this)即时缓存,在回调中直接调用时,会调用方法体哦。