jQuery官方给了一套对象级别开发插件的模板 。
如果使用的是 sublimeText 编辑器，推荐安装插件 jQuery，在文件中输入 plugin + Enter 会自动生成代码片段 （安装插件方法可以参考这篇文章）
安装成功后在 js 文件中输入 plugin ，会出现下图所示内容：
选择 plugin （method basic），出现下图所示内容：
给插件起个名字，添加到红框内 ，在绿框内设置所需的参数，在蓝框内编写插件的主方法。
在 HTML 中调用该插件：
引入 jQuery 和插件 js 文件，选择 DOM 元素，调用插件。
可以参考下面这个封装插件的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQplugin</title>
</head>
<body>
<div id="box">
<input type="button" id="btn1" value="btn1">
<input type="button" id="btn2" value="btn2">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 插件封装
(function($) {
// What does the pluginName plugin do?
$.fn.pluginName = function(options) {
if (!this.length) {
return this;
}
var opts = $.extend(true, {}, $.fn.pluginName.defaults, options);
this.each(function() {
var $this = $(this);
$(opts.btn1).click(function(event) {
alert("btn1");
});
$(opts.btn2).click(function(event) {
alert("btn2");
});
});
return this;
};
// default options
$.fn.pluginName.defaults = {
btn1: null,
btn2: null
};
})(jQuery);
// 调用插件
$(function() {
$("#box").pluginName({
btn1: "#btn1",
btn2: "#btn2"
})
});
</script>
</html>
网友评论