jq插件的封装
jquery插件一般有三种开发方式:
{
1. 通过$.extend()来扩展jQuery---------------------$.extend()添加的函数时直接通过$符号调用,而不需要选中DOM元素(相当于给jQuery身上添加了一个静态方法)
2. 通过$.fn 向jQuery添加新的方法-----------------能处理DOM元素以及将插件更好地运用于所选择的元素身上
3. 通过$.widget()应用jQuery UI的部件工厂方式创建
}
具体用法如下:
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用
2.形式如下:
$.fn.pluginName = function() {
//your code
}
例子:
var testObj= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt);//$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。
}
//定义testObj的方法
testObj.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.fn.myPlugin = function(options) {
//创建haorooms的实体
var testIndividual= new testObj(this, options);
//调用其方法
return testIndividual.changecss();
}
//调用这个插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
});
//由于定义了全局变量testObj,为了兼容性,建议用自调用匿名函数包裹,即:
(function(){
})()
为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,有人将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);
补充
JQ插件标准的封装---闭包
<script type="text/javascript">
(function ($) {
//这里放入插件代码
})(jQuery);
</script>
这是jQuery官方的插件开发规范,这样写是作用是:
- 避免全局依赖。
- 避免第三方破坏。
- 兼容jQuery操作符’$’和’jQuery’
这段代码在被解析时会形同如下代码:
var jq = function($) {
// Code goes here
};
jq(jQuery);
-------------------------编写插件------------------------
$(function () {
$.fn.插件名称 = function (options) {
var defaults = {
Event : "click", //触发响应事件
msg : "Holle word!" //显示内容
};
var options = $.extend(defaults, options);
var $this = $(this); //当然响应事件对象
//功能代码部分
//绑定事件
$this.live(options.Event, function (e) {
alert(options.msg);
});
}
});
-------------------------调用插件------------------------
$(function () {
//绑定元素事件
$("#test").插件名称({
Event : "click", //触发响应事件
msg : "插件原来就是这么简单!" //显示内容
});
});
----------------------------布局------------------------------<input type = "button" id = "test" value = "这是一个简单的插件调用" / >