做什么(function($){})(jQuery); 意思?

2020/10/04 12:21 · javascript ·  · 0评论

我刚刚开始编写jQuery插件。我写了三个小插件,但是我只是简单地将代码行复制到我所有的插件中,而实际上并不知道它的含义。有人可以告诉我更多有关这些的信息吗?也许有一天写一个框架时会有用的解释:)

这是做什么的?(我知道它以某种方式扩展了jQuery,但是对此还有其他有趣的信息)

(function($) {

})(jQuery);

以下两种编写插件的方式有什么区别:

类型1:

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

类型2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

类型3:

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

我可能离这里很远,也许所有的意思都一样。我很迷惑。在某些情况下,似乎不适用于我使用Type 1编写的插件。到目前为止,Type 3对我来说似乎是最优雅的,但我也想了解其他类型。

首先,看起来像的代码块(function(){})()仅仅是就地执行的功能。让我们分解一下。

1. (
2.    function(){}
3. )
4. ()

第2行是一个普通函数,用括号括起来,告诉运行时将函数返回到父作用域,一旦返回,则使用第4行执行该函数,也许通读这些步骤会有所帮助

1. function(){ .. }
2. (1)
3. 2()

您可以看到1是声明,2是返回函数,而3只是执行函数。

有关如何使用它的示例。

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

至于关于插件的其他问题:

类型1:这实际上不是插件,而是作为函数传递的对象,因为插件往往是函数。

类型2:再次不是插件,因为它不扩展$.fn对象。尽管结果是相同的,但这只是jQuery核心的扩展。这是如果要添加遍历函数(例如toArray等)。

类型3:这是添加插件的最佳方法,jQuery的扩展原型采用一个对象来保存您的插件名称和功能,并将其添加到您的插件库中。

在最基本的层次上,某种形式(function(){...})()是立即执行的函数文字。这意味着您已经定义了一个函数,并且正在立即调用它。

这种形式对于信息的隐藏和封装很有用,因为您在该函数内部定义的任何内容都保留在该函数的本地且无法从外界访问(除非您明确地公开它-通常通过返回的对象文字)。

您在jQuery插件中(或通常在此模块模式中)看到的是这种基本形式的变体。因此:

(function($) {
  ...
})(jQuery);

这意味着您要传递对实际jQuery对象的引用,但这$在函数文字的范围内。

类型1并不是真正的插件。您只需将对象文字分配给jQuery.fn通常,您将功能分配给,jQuery.fn因为插件通常只是功能。

类型2与类型1相似;您并不是在这里真正创建插件。您只需在中添加对象文字jQuery.fn

Type 3是一个插件,但这不是创建一个的最佳或最简单的方法。

要了解更多关于这一点,看看这个类似的问题答案另外,此页面还将详细介绍创作插件。

一点帮助:

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

(function ($) { console.log($) })(jQuery);

只是解释的一小部分

此结构(function() {})();称为IIFE(立即调用函数表达式),当解释器到达此行时,它将立即执行。因此,当您编写这些行时:

(function($) {
  // do something
})(jQuery);

这意味着,解释器将立即调用该函数,并将jQuery作为参数传递,该参数将在函数内部用作$

实际上,此示例帮助我理解了(function($) {})(jQuery);含义。


考虑一下:

// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

现在考虑一下:

  • jQuery 是一个包含jQuery对象的变量。
  • $就像任何其他的(变量名a$ba$b等),它没有像PHP的任何特殊含义。

知道我们可以再看一下我们的示例:

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

类型3,为了工作,必须看起来像这样:

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin's name
        'pluginname': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                'defaults': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

我不确定为什么有人会直接在jQuery原型中设置扩展属性,而只是在更多的操作和更多的混乱中才做同样的事情。

本文地址:http://javascript.askforanswer.com/zuoshenmefunctionjquery-yisi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!