JQuery插件之$.fn

人心 2019-07-01

jQuery对象方法

$("a").css("color", "red");

当使用$选择元素的时候,它会返回一个jQuery对象,这个对象中包含了你一直使用的方法(比如:.css(),.click()等)。这个jQuery对象是从$.fn对象中得到的这些方法。$.fn对象包含了jQuery对象的所有方法,如果想编写我们自己的方法,也要将方法定义在$.fn对象里面。使用这种方式编写插件,即jQuery类的实例将会拥有此功能。为什么会有这种效果?简单看下源码

jQuery.fn = jQuery.prototype ={ 
   init: function( selector, context ){
      //do something...
};

从源码可知,当使用$.fn的方式编写插件时,就是在jQuery的原型中绑定新的方法,所以根据原型的特性,新创建的jQuery对象自然会拥有新绑定的方法。

初识插件

目的:改变a标签的字体颜色
做法:创建名为greenify的方法,将其加在$.fn里面。
如此一来,greenify方法适用于所有的jQuery对象了

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../../js/jQuery-1.8.0.min.js"></script>
    <script type="text/javascript">
        //这里使用$与jQuery都可以
        $.fn.greenify = function () {
        
            /*这里使用this和$(this)都可以*/
            this.css("color", "red");
            
        };
        $(function () {
            //$("a")即jQuery实例化对象
            $("a").greenify();
        });
    </script>
</head>
<body>
    <a href="#">Click Me!!!</a>
    <a href="#">Cover Me!!!</a>
</body>
</html>

$.fn还有另外一种写法$.fn.extend({})

jQuery.fn.extend({
    greenify: function () {
        $(this).css("color", "red");
    }
});
$(function () {
    $("a").greenify();
});

链式写法

jQuery.fn.extend({
    greenify: function () {
        $(this).css("color", "red");
        //在结尾处返回this
        return this;
    }
});
$(function () {
    $("a").greenify().addClass("greenified");
});

链式编程的好处就是当调用完一个方法后,可以在后面继续调用该对象的其他方法。

$的别名保护

$在JavaScript库中使用是非常广泛的,如果你正在使用的其他JavaScript类库中也使用到了$,并且你也使用了jQuery,那么你不得不使用jQuery.noConflict()来解除冲突。显然这会破坏我们的插件,因为它是在假设$是jQuery函数的别名(实际上$本来就是jQuery的别名)如果既想使用其他插件,也要使用jQuery的$别名,我们需要将代码放进立即执行函数(文章结尾会对其简单解释)中,然后将jQuery作为实参传递进去,$作为形参接收。

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };

}( jQuery ));

由于windowdocument都是全局作用域的,而将其传入函数内部后,其在内部是作为局部变量存在的,这样做可以提高性能,减少作用域的查找时间,如果在函数内部多次调用windowdocument,这是很高效的做法。

(function ( _window, _document ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 
}( window, document));

另外,存储私有变量也是使用立即执行函数的主要目的,假如想要存储一个默认的颜色,就可以使用一个私有变量进行存储。

(function ($) {
     var defaultColor = "pink";
     $.fn.extend({
         setColor:function () {
            $(this).css("color", defaultColor);
            return $(this);
         }
     })
 })(jQuery);
 $(function () {
     //所有div的text都会变成粉色
     $("div").setColor();
 });

;分号的使用

通常在编写插件时,会在在立即执行函数前加入一个分号

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

作用:防止多个文件压缩合并后,前一个文件最后一行语句没加分号,而引起合并后的语法错误。
如果前面已经加了分号,此时就会多出来一个分号,但这样是不会报错的。即不怕多,就怕少。

undefined解决兼容性问题

;(function($, undefined){
  //do something...
})(jQuery)

上面代码的undefined参数略显多余,此参数是为了解决undefined在老一辈的浏览器(IE5)可以被赋值的问题,全局的undefined有可能会被其他函数覆盖。

var undefined = 99;
 alert(undefined);

以上代码如果在IE5运行,可以弹出99, 而不是undefined,如果是这样的话,全局的undefined就有被其他函数覆盖的危险;但以上代码在chrome运行,会弹出undefined
既然是插件就要考虑兼容性,所以通过在匿名函数中多定义一个undefined的形参,由于只传入了一个实参jQuery,从而可以保证undefined形参未被赋值,从而最终是我们想要的undefined的值,什么是我们想要的undefined?即,undefined没有被赋值,undefined就是undefined

最大限度的减少插件的空间

当使用$.fn创建插件时,尽量减少空间的占用,能使用参数进行区分的,就不要多定义一个方法,这样可以降低插件被覆盖的可能性。

  • 反例
(function( $ ) {
    $.fn.TurnOnLight= function() {
        // Turn on
    };
    $.fn.TurnOffLight = function() {
        // Turn off
    };
}( jQuery ));
  • 正例
(function( $ ) {
    $.fn.light = function( action ) {
        if ( action === "turnOn") {
            // Turn on light code.
        }
        if ( action === "turnOff" ) {
            // Turn off light code.
        }
    };
}( jQuery ));

使用参数选项

当插件越来越复杂时,通过接收参数选项的方式来自定义插件是一种很好的做法。

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    (function ($) {
      $.fn.extend({
         changeColor:function (options) {
           var defaultColor = $.extend({
               color: "red",
               backgroundColor:"skyblue"
           }, options);
           return $(this).css({
                color:defaultColor.color,
               backgroundColor:defaultColor.backgroundColor
           });
          }
       });
    })(jQuery);
    $(function () {
        $("div").changeColor();
        /*$("div").changeColor({
            color:"pink",
            backgroundColor:"yellow"
        });*/
    });
</script>
</head>
<body>
<div>JavaScript</div>
<div>Jquery</div>
</body>
</html>

调用changeColor不传递任何参数,文本颜色默认红色,背景默认天蓝色;反之按照传入参数渲染颜色。默认的颜色被$.extned()覆盖为其他颜色。

$.extend({
    color: "red",
    backgroundColor:"skyblue"
}, options)

以上代码执行结果:options如果有值,那么它将覆盖第一个参数并返回options;如果为undefined则直接返回第一个参数。

简单解释立即执行函数(IIFE)

立即执行函数((Immediately-Invoked Function Expression)也称为自调用函数,函数定义好后会自动执行。(function(){})表示一个匿名函数,后面紧跟一个(),表示立即执行函数。

(function(){
   console.log("我会立即执行");
})()
(function(param){
    console.log(param); //我会立刻执行
})("我会立刻执行");

优点:不会产生产生全局变量,不会造成变量污染。
缺点:只能执行一次,没法重复执行。
在编写插件时,使用IIFE是最合适不过的了,插件只需要引用一次,即执行一次。

相关推荐

Web全栈笔记 / 0评论 2020-06-15