开发自己的jQuery插件：$.fn.extend/$.extend的使用方法和机制详解

最新推荐文章于 2020-03-02 21:27:29 发布

weixin_34061482

最新推荐文章于 2020-03-02 21:27:29 发布

阅读量123

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/sallency/blog/647522

版权

2019独角兽企业重金招聘Python工程师标准>>>

$.fn.extend 和 $.extend 可以批量的为 jQuery 添加对象方法或者类方法的扩展，当然你也可以直接 $.fn.objMethod = function() {} 和 $.classMethod = function() {} 来单个设定

阅读本文前希望你对 js 的引用类型/对象和对象方法、原型方法、类方法有一定的了解，最好是明确的认识

jQuery在日常的使用中都使用其别名 $，jQuery 是一引用类型，等同 js 的 Object Date Math 等，希望大家可以把这种基本知识点搞清楚，引用类型的实例才是对象

$ 实现的机制应该大致如下，一个封装了 new jQuery对象的方法（注意 new 一个自定义的引用的构造函数和不 new 的区别，new 的话指针指向当前上下文所产生的实力，不new的话指针指向的是当前window）

function $(id) {
    return new jQuery(id);
}

OK，到这里我们很明确的知道 jQuery 是一个引用类型，大概是什么样子呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .color {
            color: #f0f;
        }
    </style>
</head>
<body>
    <div id="name">sallency</div>
    <script type="text/javascript">
        /**
         * 按 jQuery 的思想仿造出的一个引用类型 当然我们这里只实现很简单的功能
         * @param  string id 只实现id选择器
         * @return mixed
         */
        function myQuery(id) {
            //绑定当前对象
            this.obj = document.getElementById(id);
            //仿着 jQuery 写一个可以传递功能函数的 click 事件监听
            this.click = function(lambadaFunc) {
                // webkit 内核的 ie 的 attachEvent我就不写了
                this.obj.addEventListener("click", function() {
                    //闭包 常用来立即执行一个匿名函数
                    (lambadaFunc)();
                });
            };
            //属性设定和获取的方法
            this.attr = function(key, val) {
                if (val !== undefined) {
                    if (key == 'class') {
                        this.obj.className = val;
                    } else {
                        this.obj.setAttribute(key, val);
                    }
                    return "success";
                } else {
                    if (key == 'class') {
                        return this.obj.className;
                    } else {
                        return this.obj.getAttribute(key);
                    }
                }
            }
            this.html = function(content) {
                if (content === undefined) {
                    return this.obj.innerHTML;
                } else {
                    this.obj.innerHTML = content;
                }
            }
        }
        //山寨无底线 迎合你们的口味
        function $(param) {
            return new myQuery(param);
        }
        // new 的话就是生成一个当前域为当前引用类型的对象实例 你如果直接函数调用的话里面的 this 都是指向全局的 window
        $('name').click(function(){
            alert("execuse me? I am lambada function");
        });
        $('name').attr("class", "color");
        $('name').html("new content");
        document.write($('name').html());
    </script>
</body>
</html>

当然我只是梳理下封装的理念，大概的就是这么回事

OK，看到这里你也知道 jQuery 也是一个引用类型，那就该让原型链出来了

// $.fn = $.prototype = jQuery.fn = jQuery.prototype
jQuery.fn.objMethod = function() {
    alert("i am jquery obj method!");
}

jQuery.classMethod = function() {
    alert("i am jquery class method");
}

这里要注意引用类型包含三大类：对象方法，原型方法，类方法

对象方法：引用类型内部定义好的，对象实例可继承 click hover 等

原型方法：在外部通过 Prototype 链后期加入的，对象可继承，你可以通过此方法封装自己的jQuery对象方法

类方法：类型自身的方法，对象不会继承，$.get() $.post() $.ajax() 我们可以直接 jQuery.methodName() 来定义自己的jQuery的类方法

当我们需要做批量原型方法或类方法定义时就可以使用

//对象方法对象
var jqueryObjMethod = {
    obj_method_1: function() {
        alert("obj_method_1");
    },
    obj_method_2: function() {
        alert("obj_method_2");
    }
}
//类方法对象
var jqueryClassMethod = {
    class_method_1: function() {
        alert("class_method_1");
    },
    class_method_2: function() {
        alert("class_method_2");
    }
}

//原型扩展对象方法
$.fn.extend(jqueryObjMethod);
//扩展类方法
$.extend(jqueryClassMethod);

这样我们就扩充了 jQuery 的对象方法和类方法

转载于:https://my.oschina.net/sallency/blog/647522