JQuery插件之$.fn

muzhuyu 发布于2019-08-26 13:34 / 1870人阅读

摘要：既然是插件就要考虑兼容性，所以通过在匿名函数中多定义一个的形参，由于只传入了一个实参，从而可以保证形参未被赋值，从而最终是我们想要的的值，什么是我们想要的即，没有被赋值，就是。表示一个匿名函数，后面紧跟一个，表示立即执行函数。

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对象了



    Title
    
    


    Click Me!!!
    Cover Me!!!

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

使用参数选项

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



    Title
    



JavaScript
Jquery

调用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插件源码jquery jquery插件手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109073.html

前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件

摘要：而在构造函数中，返回了的实例对象。在中直接返回过的实例，这里的是的真正构造函数最后对外暴露入口时，将字符与对等起来。因此当我们直接使用创建一个对象时，实际上是创建了一个的实例，这里的正真构造函数是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早几年学习前端，大家都非常热衷于研究jQuery源...

RebeccaZhong 2019-08-21 18:31 评论0 收藏0
jQuery入门笔记之（七）插件

摘要：目前插件已超过几千种，由来自世界各地的开发者共同编写验证和完善。而对于开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。也就是说，插件也是代码，通过文件引入的方式植入即可。现在我们就完成了一个下拉菜单的插件。插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界...

defcon 2019-08-19 17:44 评论0 收藏0
理解jquery的$.extend

摘要：当目标对象为空时，对象将会被默认为目标对象，这时相当于我们在的命名空间下添加新的功能，这是常见的插件开发模式。以上皆个人愚见，请笑纳理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法，便想到了jQuery.extend这个方法，但又不甚了解，故去查了下官方API文档，自己也进行了相应尝试，现将所得总结如下： $.extend和$.fn.extend的相关...

CarterLi 2019-08-21 15:18 评论0 收藏0
jQuery扩展

摘要：传递一个可拓展的默认对象参数而不是大量的参数给插件。始终命名空间的方法，事件和数据。 jq--CDN jQ -- jQuery源码解析 1、jQuery.extend() 与 jQuery.fn.extend()把jQuery看成一个封装js类这样好理解$.extend是扩展的jQuery这个类为jQuery类添加类方法可以理解为静态方法只跟这个类本身有关跟具体的实例化对象是...

hss01248 2019-08-26 13:35 评论0 收藏0
手把手教你JQuery插件的写法和规范

摘要：示例合并和，修改并返回。例如我们插件里面需要有个方法来检测用户调用插件时传入的参数是否符合规范。私有方法，检测参数是否合法调用调用调用者覆盖插件暴露的共公方法调用自定义高亮插件本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考，具体如下：如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jq...

Alex 2019-08-20 15:19 评论0 收藏0