javascript - 关于jQuery插件扩展
本文介绍了javascript - 关于jQuery插件扩展的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
问题一:扩展jQuery对象时,这四种方式那个适用性更强一些
//方式一
;jQuery.fn.myPluginName = function () {
//code here
return this;
};
//方式二
$.fn.extend({
myPluginName:function() {
//code here
return this;
}
});
//方式三
(function($){
jQuery.fn.myPlugin = function () {
//code here
return this;
};
})(jQuery);
//方式四
(function($){
$.fn.extend({
myPluginName:function() {
//code here
return this;
}
});
})(jQuery);
问题二:下面的代码段②是什么意思,做什么用,跟注册全局方法$.extend
有什么关联
$.fn.myPluginName = function(opts) {//用opts表示多个入参
var defaults = {//①
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend(defaults, opts);//②
//设置字体样式
this.css({//③
'color': settings.color,
'fontSize': settings.fontSize
});
//返回对象,方便链式调用
return this;
}
问题三:现在在写一个表格插件,包括数据渲染和若干方法,现在还没有写监听事件,感觉一团糟,有什么好的思路,或者简单的开源实现(github项目)可以参考(尽量简单),希望大家给个思路也好,谢谢!!!
解决方案
问题一:
我倾向于第四种写法 用匿名函数把插件包起来
好处是:1.避免其它插件也用了 $
做关键字;2.避免插件内部方法污染全局
方式一我不知道好坏
方式二 $
可能会被其他同名变量污染
方式三和方式一类似 包了一层自执行函数 但既然包了一层并把jQuery作为参数传递了 内部就可以直接写 $
了$.fn.methodName = function() {}
和 $.fn.extend({ methodName: function() {} })
的好坏我不是很清楚
问题二:$.extend
方法是合并对象 用于将传入的参数覆盖默认配置
var a = { name: 'a' };
var b = { name: 'b', age: 2 };
var c = $.extend(a, b); // 把 b 对象合并到 a 对象
console.log(a); // { name: 'b', age: 2 };
console.log(b); // { name: 'b', age: 2 };
console.log(c); // 最终配置 { name: 'b', age: 2 };
// 不推荐这么写 这么写会把 a 也修改了 有时候还需要使用到原始配置
// 推荐这种写法
var a = { name: 'a' };
var b = { name: 'b', age: 2 };
var c = $.extend({}, a, b); // 把 b 和 a 对象合并到 {} 对象 保留 a 对象
console.log(a); // { name: 'a' };
console.log(b); // { name: 'b', age: 2 };
console.log(c); // 最终配置 { name: 'b', age: 2 };
这篇关于javascript - 关于jQuery插件扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文