jQuery扩展

hss01248 发布于2019-08-26 13:35 / 1474人阅读

摘要：传递一个可拓展的默认对象参数而不是大量的参数给插件。始终命名空间的方法，事件和数据。

jq--CDN

jQ -- jQuery源码解析

1、jQuery.extend() 与 jQuery.fn.extend()
把jQuery看成一个封装js类这样好理解
$.extend是扩展的jQuery这个类为jQuery类添加类方法可以理解为静态方法只跟这个类本身有关跟具体的实例化对象是没关系的。
jQuery.fn.extend() 拓展的是jQuery对象(原型)的方法得用在jQuery对象上面

区别

两者调用方式不同
      jQuery.extend() 由传入的全局函数来调用 主要是用来拓展全局函数 如$.init() $.ajax();
      jQuery.fn.extend() 由具体的实例对象来调用 可以用来拓展个选择器 例如$.fn.each();
两者主要功能作用不同
      jQuery.extend(object) 为扩展jQuery类本身 为自身添加新的方法
      jQuery.fn.extend(object) 给jQuery对+B187象添加方法
(function($) {
    $.extend({
        speakExtend:function(e) {
            alert("$.extend"+" === "+ e);
        }
    });
    $.fn.extend({
        speakExtend:function(e) {
            // 此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
            // $(this)等同于 $($("#element")); 直接使用 this.
            alert("$.fn.extend"+" === "+e);
        }
    })
})(jQuery);
$.speakExtend("静态方法");
$(".main").speakExtend("对象专属");

jQ -- 插件封装

编写一个jQuery插件就是给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称。
在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象，这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。误将this关键字无谓的包在jQuery中，

(function ($) {
    $.fn.myPlugin = function () {
        //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
        //$(this)等同于 $($("#element"));
        this.fadeIn("normal", function () {
            //此处callback函数中this关键字代表一个DOM元素
        });
    };
})(jQuery);
$("#element").myPlugin();

实现简单插件

(function ($) {
    $.fn.maxHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);
var tallest = $("div").maxHeight(); //返回高度最大的div元素的高度

维护Chainability
很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。

(function ($) {
    $.fn.lockDimensions = function (type) {
        return this.each(function () {
            var $this = $(this);
            if (!type || type == "width") {
                $this.width($this.width());
            }
            if (!type || type == "height") {
                $this.height($this.height());
            }
        });
    };
})(jQuery);
// 返回 this 后续调用 css()
$("div").lockDimensions("width").css("color", "red");

默认值和选项
对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。
在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值；

(function ($) {
    $.fn.tooltip = function (options) {
        //创建一些默认值，拓展任何被提供的选项
        var settings = $.extend({
            "location": "top",
            "background-color": "blue"
        }, options);
        return this.each(function () {
            // Tooltip插件代码
        });
    };
})(jQuery);

$("div").tooltip({
    "location": "left"
});

插件方法
在任何情况下，一个多带带的插件不应该在jQuery.fn，这是不被鼓励的，因为$.fn命名空间混乱。
应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };

    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error("Method " + method + " does not exist on jQuery.tooltip");
        }
    };

})(jQuery);

$("div").tooltip(); // 调用init方法

$("div").tooltip({
    foo: "bar"
}); // 调用init方法 

$("div").tooltip("hide"); // 调用hide方法

$("div").tooltip("update", "This is the new tooltip content!"); // 调用Update方法

事件
允许绑定事件命名空间。如果你的插件绑定一个事件，一个很好的做法是赋予此事件命名空间。

具体详情在下面链接中

数据
通常在插件开发的时候，可能需要记录或者检查你的插件是否已经被初始化给了一个元素。使用jQuery的data方法是一个很好的基于元素的记录变量的途径。

具体详情在下面链接中

总结和最佳做法

始终包裹在一个封闭的插件：
    (function($) {
    /* plugin goes here */
    })(jQuery);
在插件的功能范围内不要冗余包裹this关键字
除非插件返回特定值，否则总是返回this关键字来维持chainability 。
传递一个可拓展的默认对象参数而不是大量的参数给插件。
不要在一个插件中多次命名不同方法。
始终命名空间的方法，事件和数据。

封装插件--1
封装插件--2

私有云专线服务行为扩展服务扩展工程扩展功能扩展

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

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

jQuery源码分析3-jQuery对象的扩展--extend

摘要：的指向的是对象，所以此时扩展的是对象，可以直接通过的方式调用。写过jquery插件的人都知道可以通过jquery提供的extend可以对jquery对象进行扩展，而且该方法不仅可以对jquery对象扩展，还能给一个对象添加新的属性和方法，这个在后面会介绍。通过不同的方式调用extend扩展的方法也不同：通过 $.extend() 扩展的是静态方法；而通过 $.fn.exten...

MonoLog 2019-08-20 13:53 评论0 收藏0
前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件

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

RebeccaZhong 2019-08-21 18:31 评论0 收藏0
手把手教你JQuery插件的写法和规范

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

Alex 2019-08-20 15:19 评论0 收藏0
jQuery源码分析-整体架构（转）

摘要：文章出处拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。利用下的简单工厂模式，来将所有对于同一个对象的操作指定同一个实例。所以的中提供了以上中扩展函数。文章出处 http://www.cnblogs.com/aaronjs/p/3278578.html 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，...

voidking 2019-08-21 10:39 评论0 收藏0
初步学习 jQuery 核心 API

摘要：进一步了解类数组对象可以看这篇文章对象的构建和分离构造器然后我们回来看看，让我们悲伤的代码。。。然后又通过下面的语句，将两个独立的构造器关联起来了。背景不造轮子的程序员不是好程序员，所以我们今天尝试造一下轮子。今天的主角是 jQuery ，虽然现在市面上已被 React，Angular，Vue 等挤的容不下它的位置，但是它的简单 API 设计依然优秀，值得学习和体会。任务今天造...

张巨伟 2019-08-20 19:01 评论0 收藏0