jQuery $.extend()方法的用法

在前面几节中,我们学习了各种 jQuery 内置的工具函数。但是这些内置工具函数的功能是有限的,如果我们想要自己定义一个工具函数,此时又该怎么实现呢?

在 jQuery 中,我们可以使用$.extend()方法来自定义工具函数,以便自己开发使用。

语法:

(function($){
    $.extend({
        "函数名": function(参数){
            ……
        }
    });
})(jQuery);

(function(){})() 是 JavaScript 立即执行函数,这种语法在高级开发中经常用到。

$.extend({
    "函数名": function(参数){
        ……
    }
});

如果不考虑其他情况,仅仅使用上面这段代码,其实也可以定义 jQuery 工具函数。但是为什么我们不这样做,而要在外面套一个立即执行函数呢?

这是因为很多其他的 JavaScript 库都会用到$这个符号,使用$.extend()方法定义工具函数时,就有可能受到其他 JavaScript 库中$变量的影响。我们在外面套一个如下所示的立即执行函数,是为了让$变量只属于这个立即执行函数的作用域,从而避免受到其他 JavaScript 库的“污染”。

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

如果只看语法,我们可能一头雾水,还是先来看一个实际例子。

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        (function($){
            $.extend({
                "maxNum": function(m, n){
                    return (m>n)?m:n;
                }
            });
        })(jQuery);
        $(function () {
            var result=$.maxNum(10, 5)
            console.log("最大值是:"+result);
        })
    </script>
</head>
<body>
</body>
</html>

控制台输出结果如图 1 所示。

自定义工具函数
图 1:自定义工具函数

在这个例子中,我们采取自定义工具函数的方式定义了一个 maxNum() 函数,用于计算两个数的最大值。应特别注意一点,自定义的工具函数与普通函数在调用时是不一样的。对于自定义的工具函数,我们需要在前面加上$.,以表示这是属于 jQuery 对象下的一个函数。

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23912.html

(0)
上一篇 2021年7月20日
下一篇 2021年7月20日

相关推荐

发表回复

登录后才能评论