如果我这样定义原型
jQuery.fn.myFunc = function() {
console.log(this);
}
并这样称呼它：
$('div').myFunc();
thisinside ofmyFunc将引用 jQuery 对象选择。
现在，如果我不想污染.fn多个附加功能，我可以做类似的事情吗
jQuery.fn.myPlugin = {
myFunc1: function() {
},
myFunc2: function() {
}
}
如果我调用它$('div').myPlugin.myFunc1();- 我如何获得对内部选定对象的引用myFunc1？还是有不同的更好的方法？
没有。不能那样做。相反，将其定义为一个函数，然后向该函数添加属性。
jQuery.fn.myPlugin = function() {
console.log(this);
};
jQuery.fn.myPlugin.myFunc1 = function() {
};
jQuery.fn.myPlugin.myFunc2 = function() {
};
请注意，myFunc1 和 myFunc2 仍然无法访问所选元素，因此以这种方式定义它们相对没用，除了它们可以很容易地被其他开发人员覆盖（这是一件好事）
在插件中添加其他方法的常规方法是让插件方法接受一个参数，该参数可以是初始化插件的对象，也可以是在元素上执行目标方法的字符串。例如，$("somediv").myPlugin("myFunc1")
另一种可能的方法是使用defineProperty：
(function($) {
var myPlugin = {
foo: function() {
console.log(this)
}
}
Object.defineProperty($.fn, "myPlugin", {
get : function() { return $.extend({}, this, myPlugin) }
});
})(jQuery);
现在$(...).myPlugin.foo应该this正确解决：
$(function() {
$("body").myPlugin.foo(); // logs "body"
})
如果您之前创建了一个对象，则可以工作。
像这样：
<script>
jQuery.fn.myPlugin = {};
jQuery.fn.myPlugin = {
myFunc1: function() {
console.log(this);
},
myFunc2: function() {
alert(this);
}
};
$(document).ready(function(){
$('div').myPlugin.myFunc1();
$('div').myPlugin.myFunc2();
});
</script>
jQuery 插件教程建议这样做：
(function( $ ) {
$.fn.popup = function( action ) {
if ( action === "open") {
// Open popup code.
}
if ( action === "close" ) {
// Close popup code.
}
};
}( jQuery ));
我想这将是另一种选择：
(function($) {
$.fn.myPlugin = function (action) {
var functions = {
open: function () {
console.log('open: ', this);
},
close: function () {
console.log('close:', this);
}
}
if (action && functions[action]) {
functions[action].call(this)
} else {
console.log('no function', this);
}
return this;
};
}(jQuery));
$('#theDiv')
.myPlugin()
.myPlugin('open')
.myPlugin('close');