jQuery插件结构:在插件定义中访问JavaScript类

jQuery Plugin structure: Accessing JavaScript class inside plugin definition?

本文关键字：插件 访问 JavaScript 结构 jQuery 定义      更新时间：2023-09-26

我有一个关于jQuery插件结构的问题。

为了更好地理解，这里有一个简化的插件结构示例:

// Regular constructor function
function MyPlugin() {
    this.myValue = "My Value";
}
// Methods on the prototype
MyPlugin.prototype.showValue = function() {
    alert($.myplug.getValue());
}
MyPlugin.prototype.getValue = function() {
    return this.myValue;
}
// jQuery plugin
$.fn.myplug = function() {
    // Why is is possible to access $.myplug here although it's not created yet?    
    return this.each(function() {
        $(this).html($.myplug.getValue());  
    });
};
// Create new MyPlug instance
$.myplug = new MyPlugin();
// Calling the jQuery plugin on a DOM element
$('div').myplug();
在大多数情况下，我明白发生了什么。实际的插件逻辑似乎写成了一个普通的JavaScript"类"。接下来是一个jQuery插件定义——我认为，实际上，一些新的方法被添加到jQuery的原型中。这就是让我感到棘手的地方:

如何是可能的访问类实例内的插件，虽然类是实例化后的插件定义?是否有类似于可变吊装的工作机制?

如果你想尝试一些东西，这里是一个例子:http://jsfiddle.net/kq8ykkga/

$(this).html($.myplug.getValue());不求值，直到调用$('selector').myplug()，执行函数体。

相关文章：