文档章节

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

big_cat
 big_cat
发布于 2016/03/25 19:19
字数 926
阅读 822
收藏 11

        $.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 的对象方法和类方法

    


© 著作权归作者所有

big_cat
粉丝 48
博文 237
码字总数 162867
作品 0
长宁
后端工程师
私信 提问
JQuery.extend函数使用详解 $.extend

jQuery为开发插件提供了两个方法,分别是: 1. jQuery.fn.extend():给jQuery对象提供方法。 2. jQuery.extend():为扩展jQuery类本身添加方法。 先看源码是怎么实现的,截取自JQuery-1.11.0...

Josean_Luo
2014/04/11
130
1
jQuery.extend 函数详解

JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型是:    extend(dest,...

谢锐旭
2012/11/27
46
0
jQuery.extend 函数详解

JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型是: extend(dest,src1,sr...

i33
2012/10/10
83
0
JS杂谈系列-jquery-插件开发小记

//=======================start(function ($) {//扩展 必须$.fn.extend({ //插件名称 必须colh: function (options) {//默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)va...

透笔度
2015/08/04
438
1
jQuery.extend函数详解

jQuery.extend 函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型...

kisshua
2011/08/31
198
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
462
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
17
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
8
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
21
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部