Javascript 对象作为jQuery.fn原型？

如果我这样定义原型

jQuery.fn.myFunc = function() {
    console.log(this);
}

这样称呼它：

$('div').myFunc();

此

在

myFunc

的内部将引用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”）
Nope。不能那样做。相反，将其定义为函数，然后向该函数添加属性

jQuery.fn.myPlugin = function() {
    console.log(this);
};

jQuery.fn.myPlugin.myFunc1 = function() {

};

jQuery.fn.myPlugin.myFunc2 = function() {

};

请注意，myFunc1和myFunc2仍然无法访问所选元素，因此，以这种方式定义它们相对来说是无用的，因为它们可以被其他开发人员轻松覆盖（这是一件好事）

在插件中使用其他方法的正常方式是让插件方法接受一个参数，该参数可以是初始化插件的对象，也可以是在元素上执行目标方法的字符串。例如，
$（“somediv”）.myPlugin（“myFunc1”）
如果您以前创建过对象，则可以使用

像这样：

 <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.fn.myPlugin={}；
jQuery.fn.myPlugin={
myFunc1:function（）{
console.log（this）；
},
myFunc2:function（）{
警惕（这个）；
}       
};
$（文档）.ready（函数（）{
$（'div'）.myPlugin.myFunc1（）；
$（'div'）.myPlugin.myFunc2（）；
});
如果您以前创建过对象，则可以工作

像这样：

 <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.fn.myPlugin={}；
jQuery.fn.myPlugin={
myFunc1:function（）{
console.log（this）；
},
myFunc2:function（）{
警惕（这个）；
}       
};
$（文档）.ready（函数（）{
$（'div'）.myPlugin.myFunc1（）；
$（'div'）.myPlugin.myFunc2（）；
});
建议如下：

(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');

报告建议：

(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');

另一种可能的方法是使用：

现在，
$（…）.myPlugin.foo
应该正确地解决这个问题：

$(function() {
    $("body").myPlugin.foo(); // logs "body"
})

另一种可能的方法是使用：

现在，
$（…）.myPlugin.foo
应该正确地解决这个问题：

$(function() {
    $("body").myPlugin.foo(); // logs "body"
})

因此，如果我理解正确，只有直接分配给
.fn.name
的“root”函数才能访问所选元素。我想，没有办法在通用的“名称空间”下定义几个函数，那会有这种能力吗？我记得有人不久前组装了一些小部件框架，允许使用它，但它非常复杂，从那以后我一直找不到它，也不知道有什么插件实际使用过它。因此，是的，有一种方法可以做到这一点，我只是不知道它，也不能告诉你找到它的方向。我不建议尝试这样做，因为这种使用插件的方式非常罕见，用户更容易使用更通用的界面。我喜欢
$（“somediv”）.myPlugin（“myFunc1”）
方法。因此，如果我理解正确，只有直接分配给
.fn.name
的“root”函数才能访问选定的元素。我想，没有办法在通用的“名称空间”下定义几个函数，那会有这种能力吗？我记得有人不久前组装了一些小部件框架，允许使用它，但它非常复杂，从那以后我一直找不到它，也不知道有什么插件实际使用过它。因此，是的，有一种方法可以做到这一点，我只是不知道它，也不能告诉你找到它的方向。我不建议尝试这样做，因为这种使用插件的方式非常罕见，用户更容易使用更通用的界面。我喜欢
$（“somediv”）.myPlugin（“myFunc1”）
方法。不，
this
仍然返回
myPlugin
对象本身不，
this
仍然返回
myPlugin
对象本身它必须在
$（function（）{}）中调用吗？@YuriyGalanter：如果你的意思是
（function（$）（jQuery）
-不，但是当你的插件有自己的局部变量和函数时，这被认为是很好的实践和有用的。它必须在
$（function（）{}）
中调用吗？@YuriyGalanter:如果你的意思是
（function（$）..（jQuery）
-否，但是当你的插件有自己的局部变量和函数时，这被认为是很好的实践和有用的。