JQuery插件之$.fn

栏目: jQuery · 发布时间: 7年前

内容简介：当使用从源码可知，当使用目的：改变a标签的字体颜色

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

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

(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 是最合适不过的了，插件只需要引用一次，即执行一次。

以上所述就是小编给大家介绍的《JQuery插件之$.fn》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Hello World

Hannah Fry / W. W. Norton Company / 2018-9 / GBP 17.99

A look inside the algorithms that are shaping our lives and the dilemmas they bring with them. If you were accused of a crime, who would you rather decide your sentence—a mathematically consistent ......一起来看看《Hello World》这本书的介绍吧!

码农工具