创建 jQuery Plugin
方法一 在 jQuery 命名空间上添加方法
<!DOCTYPE html>
<html>
<head>
<title>jQuery plugin</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$.sayHello = function() {
console.log('Hello');
};
$.extend({
sayHi: function(name) {
console.log('Hi,' + (name ? name : 'ThankIT') + '!');
}
});
$.sayHello();
$.sayHi();
</script>
</body>
</html>
效果：
此种方法扩展了 jQuery 本身，但它不能选中 DOM 元素。
方法二 在 $.fn 上添加方法
在写插件之前，我们先了解下 jQuery 是怎么工作的。
$( "a" ).css( "color", "red" );
这是很基础的 jQuery 代码。当你用 $ 选中元素的时候，它会返回 jQuery 对象，返回的这个 jQuery 对象就包含 css() 方法，还有被选中的元素。 jQuery 对象是从 $.fn (jQuery.prototype 的别名)对象获得方法的。所以，我们可以在 $.fn 方法上添加方法来扩展 jQuery object
<!DOCTYPE html>
<html>
<head>
<title>jQuery plugin</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<h1 id="hello">Hello</h1>
<script type="text/javascript">
// case 1
$.sayHello = function() {
console.log('Hello');
};
$.extend({
sayHi: function(name) {
console.log('Hi,' + (name ? name : 'ThankIT') + '!');
}
});
$.sayHello();
$.sayHi();
// 在 jQuery 上扩展的方法无法选中元素
// Uncaught TypeError: $(...).sayHi is not a function
// $( "h1" ).sayHi();
// case 2
// 需要返回 this 以支持链式调用
$.fn.greenify = function() {
return this.css( "color", "green" );
};
$.fn.extend({
italic: function() {
return this.css("font-style","italic");
}
});
$( "h1" ).greenify();
$( "h1" ).italic();
</script>
</body>
</html>
效果：
参考官方文档 jquery plugins
安全的插件结构
;(function($,window,document,undefined){
// 插件代码
})(jQuery,window,document);
用自调用匿名函数包裹代码，形成一个作用域，避免对全局命名空间的污染。
使用 ; 是为了避免：前面的代码没有以分号结尾，引入我们的 js 后，导致报错无法执行。
比如：
var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
(function(){
//我们的代码。。
alert('Hello!');
})();
参考 jQuery插件开发精品教程，让你的jQuery提升一个台阶
创建 jQuery Widget
jQuery UI 官方文档
大部分 jQuery 插件是无状态的，完成某个动作就结束了。但是有些插件是有状态的，他们有生命周期和状态，widget factory 定义了如何创建和销毁他们，如何获取和设置选项，调用方法以及监听小部件触发的事件。这样的规范会让使用者更容易使用。
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery plugin</title>
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<div id="my-widget1">color me</div>
<div id="my-widget2">color me</div>
<div id="my-widget3">color me</div>
<button id="disable">Toggle disabled option</button>
<button id="green">Go green</button>
</div>
<style>
.custom-colorize {
font-size: 20px;
position: relative;
width: 75px;
height: 75px;
}
.custom-colorize-changer {
font-size: 10px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
$( function() {
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget( "custom.colorize", {
// default options
options: {
red: 255,
green: 0,
blue: 0,
// Callbacks
change: null,
random: null
},
// The constructor
_create: function() {
this.element
// add a class for theming
.addClass( "custom-colorize" );
this.changer = $( "<button>", {
text: "change",
"class": "custom-colorize-changer"
})
.appendTo( this.element )
.button();
// Bind click events on the changer button to the random method
this._on( this.changer, {
// _on won't call random when widget is disabled
click: "random"
});
this._refresh();
},
// Called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);
// Trigger a callback/event
this._trigger( "change" );
},
// A public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
blue: Math.floor( Math.random() * 256 )
};
// Trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},
// Events bound via _on are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
this.changer.remove();
this.element
.removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},
// _setOptions is called with a hash of all options that are changing
// always refresh when changing options
_setOptions: function() {
// _super and _superApply handle keeping the right this-context
this._superApply( arguments );
this._refresh();
},
// _setOption is called for each individual option that is changing
_setOption: function( key, value ) {
// prevent invalid color values
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
this._super( key, value );
}
});
// Initialize with default options
$( "#my-widget1" ).colorize();
// Initialize with two customized options
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});
// Initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});
// Click to toggle enabled/disabled
$( "#disable" ).on( "click", function() {
// use the custom selector created for each widget to find all instances
// all instances are toggled together, so we can check the state from the first
if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
$( ":custom-colorize" ).colorize( "enable" );
} else {
$( ":custom-colorize" ).colorize( "disable" );
}
});
// Click to set options after initialization
$( "#green" ).on( "click", function() {
$( ":custom-colorize" ).colorize( "option", {
red: 64,
green: 250,
blue: 8
});
});
} );
</script>
</body>
</html>
