引言
项目也写了几个了,自己的jQuery插件也是来来回回优化了无数次,别人的轮子拿来用也是前前后后理解了无数次。比较之下,觉得自己的轮子貌似根本称不上是插件···顶多就一个全局方法···
怪不得阿里面试的时候,那个13年前端生涯的大叔看到我的‘plug in’一脸嫌弃···“你这是插件?!”
【大写的尴尬】真是搞不懂,我是吃了多少熊心豹子胆,就这水平也敢去敲马云粑粑的门····
言归正转,jQuery插件,吼吼,除了基于jQuery,咱们得plug in!!!好吗···
这里姑且记录两种plug in的方法
一、添加静态方法
二、在原型链上拓展方法
以下依次讲解
$.extend
没错,这就是jQuery自带的拓展方法
$.extend({funcName:function(){}})
==$.funcName=function(){}
直接将名为funcName的方法添加到jQuery命名空间,而不是jQuery原型链上。
在调用时,我们也需要通过$或jQuery来调用,而不是直接调用(隶属于window命名空间的方法才能直接调用)。
来看看例子:
html
<div class="testButton">点我</div>
jQuery
(function ($) {
$.tooltip = function( options ) {
console.log('I`m tooltip');
};
$('.testButton').click(function(){
$.tooltip()
});
})(jQuery)
当我点击按钮
在我们写插件的时候可以利用extend来更新参数。
what?更新参数?
对呀,我们可以为插件设置默认参数,通过插件调用的传入的参数就不再需要写冗长的一堆,只需要写自己特别的参数就行了。
在参数内部
this._oConfig = $.extend(defaults, _aoConfig);
这个操作就可以将defaults, _aoConfig合并,并去重,再赋值给this._oConfig。
$.fn.extend
我们知道fn===prototype
所以我们通过$.fn.extend去拓展方法的话是会将方法添加到原型链上的。
(function ($) {
$.fn.tooltip = function( options ) {
console.log('I`m tooltip');
};
$('.testButton').click(function(){
$(this).tooltip()
});
})(jQuery)
点击按钮
怎么说呢,在创建一个jQuery实例时,这个实例就会拥有所有原型链上的方法。所以我们可以直接在$(this)上调用。