• jquery插件分类与编写详细讲解


    1. 插件种类 

    插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率。 


    jQeury主要有2种类型 


    1)实例对象方法插件 

    开发能让所有的jquery实例对象都可以调用的方法。也就是说,只要通过$()工厂获得 的jquery实例对象,都可以调用我们开发的方法。95%的插件都是这种类型 


    2)全局函数插件 

    可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名 称() 或者jQuery.函数名称()来调用了。可以理解为静态方法。 


    2. 添加全局函数 

    我们可以将jquery理解为类,$是这个类的别名。开发全局函数就是开发这个类的 静态方法。如:$.get() ,$.post()。添加新的全局函数,实际上就是扩展jQuery“类”本身, 给jQuery命名空间上添砖加瓦. 加入新添加的全局函数的名称是sayHello,功能是弹出一个hello的对话框. 

    2.1增加一个全局函数

    1    jQuery.sayHello=function(name){
    2     alert("你好,"+name);
    3    }
    4    调用:
    5    $.sayHello('张三');
    6    或者
    7    jQuery.sayHello("李四");

    2.2增加多个全局函数 

    使用jQuery提供的全局函数extend来一次加入多个函数 

    1    jQuery.extend({
    2     sayHello:function(name){
    3             alert("你好"+name);
    4     },
    5     sayBye:function(name){
    6             alert("再见"+name);
    7     }
    8     }
    9    )

      上面的代码是往jquery命名空间中添加了两个函数sayHello和syBye,调用同上 


    2.3命名空间 

    前面的方式有可能与jQuery命名空间中的其它函数产生命名冲突的危险,也有可能 与其它jQuery插件中定义的方法重名,所以我们可以考虑将我们定义的所有的函数封装 到一个对象中去,相当于为我们的函数给了一个命名空间 代码如下: 

    1    jQuery.wq={
    2     sayHello:function(name){
    3             alert("你好"+name);
    4     },
    5     sayBye:function(name){
    6             alert("再见"+name);
    7     }
    8    }

    这种写法可以这样来理解: 首先我们为jQuery添加了一个wq属性,而这个属性本 身是一个对象,后面我们使用JSON来定义了一个对象,这个对象有两个方法。 所以调用就是如下形式: 调用:

    1    $.wq.sayHello("王五");
    2    jQuery.wq.sayBye("赵六");

      注意:即使页面中包含了jQuery文件,也不应该认为简写形式”$”是始终有效的。 因为”$” 只是一个别名而已,其它的库可以重新定义这个”$” .所以在定义插件的时候, 最好使用jQuery来调用方法,或者重新定义”$” 


    3. 为jQuery实例对象创建新方法 

    对所有的jQuery实例对象中的方法进行扩展。 


    3.1一次定义一个方法

    1    jQuery.fn.sayHello=function(){
    2     alert("你好!");
    3    }
    4    调用:
    5    $("div").sayHello();

    3.2一次定义多个方法 

    前面一次定义一个方法太少,我们能不能一次多定义一些方法?jQuery库提供了 jQuery.fn.extend方法来一次定义多个方法 

    1    jQuery.fn.extend({
    2     sayHello:function(){
    3             alert("Hello");
    4     },
    5     sayBye:function(){
    6             alert("Bye Bye");
    7     }
    8    });

      可以看到extend方法的参数实际上就是一个JSON格式的对象。 调用的时候可以如下调用: $(“div”).sayHello() 和 $(“div”).sayBye(); 


    4. 插件方法内部的this关键字说明 

    上面的写法相当于每一个jQuery实例都可以使用,这跟全局函数没有什么区别。而我们定义的实例方法往往是需要在特定的环境中使用的。所以我们在编写插 件方法的时候,应该考虑对象方法的环境。“this”关键字在任何插件方法内部引用的都是当前的jQuery实例对象。所以可以在this上调用任何 jQuery方法。需要注意的是:我们使用的jQuery选择符可能会选取多个元素,哪么“当前的jQuery实例”有可能是一个元素,多个元素或者零个 元素。我们必须考虑到这种情况。 如果我们使用选择器选中了多个元素,那就可以使用each()方法来迭代每个元素,在each方法内部,再使用this,这个this指的就是每个 HTML DOM 元素的引用。 


    5. 方法连缀 

    使用jQuery对象方法的时候,基本都能使用连缀的方式。那么我们使用插件的时候就必须为插件方法返回一个jQuery实例对象。 

    01    jQuery.fn.extend({
    02     sayHello:function(){
    03             alert("Hello");
    04             return this;
    05     },
    06     sayBye:function(){
    07             alert("Bye Bye");
    08             return this;
    09     }
    10    });

    6. 为插件方法定义默认值 

    通过使用jQuery.extend()方法,可以方便提供随时可能被传入的参数覆盖的默认值,此时对方法的调用会大致保持相同. 注意:jQuery.extend方法在API中的两个地方都有,一个在【核心】.【插件机制】中有,并且只有一个参数。一个在【工具】.【数组和对象操作】中。 注意这里我们使用的是后者,形式为: jQuery.extend(target, object1) 它的作用是将后面对象中所有的属性和方法复制到前面对象中,即将object1中的属性和方法复制到target对象中。 所以我们在定义一个插件的时候,可以使用如下方式为插件方法指定默认值: 

    1    jQuery.fn.sayHello=function(properties){
    2     var defaults={
    3             name:"张三",
    4             age:20
    5     };
    6     jQuery.extend(defaults,properties);
    7     alert("第一个参数:"+defaults.name+" 第二个参数"+defaults.age);
    8     return this;
    9    }

    这样一来,我们就可以这样来调用了

    01    $("div").sayHello({
    02            name:"李四",
    03            age:30
    04    });
    05    或者:
    06    $("div").sayHello({
    07            name:"王五"
    08    });
    09    或者:
    10    $("div").sayHello({
    11            age:25
    12    });

    7. 插件开发技巧-闭包 

    我们在开发插件的过程中,是将代码写在了一个js文件中,那么这个js文件中有可能会定义很多的方法或者一些变量。那么这些方法或者变量就有可能与别的 js文件中的变量或者方法冲突,那么如何将我们定义的js代码“暴露”一部分,隐藏一部分呢?也就是你虽然定义了,但是在其它地方访问不到,该暴露的暴 露,不该暴露的就藏起来,要达到这个目的,就得用到“闭包“ 那何为“闭包“?说简单点就是允许使用内部函数,即在函数中定义另外一个函数,而且内部函数可以访问在外部函数中声明的变量和其它内部函数。比如有如下定 义: 

     //定义A函数 

    1    function A(){
    2     //定义B函数
    3     var B=function(){
    4     alert("这是B");
    5     }
    6     return B; //将B函数返回
    7    }
    8    var c=A();//此时C就是B函数
    9    c();//其实就是调用B函数

    可以看到,内部函数B在包含它的A函数之外执行了,这就形成了闭包。也就是B在外部函数A返回之后被执行了,而当B执行的时候它仍然可以访问A中定义的局部变量和其它内部函数。 利用闭包的特性,我们可以将我们需要暴露的方法暴露出来,比如B,又可以隐藏一些局部变量和函数,比如在A中定义变量和函数,A以外的其它函数是不能访问的,但是B是可以访问的。 其实上面的代码就是先执行A函数,得到结果,这个结果又是一个函数,然后再执行B函数即 var c=A(); c(); 既然我们的目的是想让B在A之外执行,那我们可以将代码做如下变通:

    1    var C;
    2    function A(){
    3     var B=function(){
    4             alert("这是B函数");
    5     }
    6     C=B;//将内部函数赋值给C
    7    }

      //让A函数执行,A执行之后就将B赋值给C了A(); 

    //现在执行C,实际上就是B的执行C(); 

     //弹出对话框 "这是B函数" 去掉中间变量c将其改写为 A()(); 这与上面的效果是一样的。 

    能不能让A在定义之后马上就执行呢?我们可以定义一个匿名函数 放到一对括号中,然后 再用一对小括号执行它即可: 

    1    var C;
    2    (function(){
    3     var B=function(){
    4     alert("这是B函数");
    5     }
    6     C=B;//将内部函数赋值给C
    7    })()

    //现在执行C,实际上就是B的执行C(); //弹出对话框 "这是B函数" 能不能从外面传个参数进去交给函数B呢?改写代码如下:

    1    (function($){
    2     //这里就可以使用$符号了.....
    3     //将B函数添加到JQuery的实例对象函数中
    4     $.fn.B=function(){
    5             alert("这是B函数");
    6     }
    7    })(jQuery);

    这段代码被浏览器加载就会被执行,jquery作为参数传递进去交给了 $符号,所以内部就能使用$符号了,在代码中,我们使用$.fn为jQuery的实例对象添加了一个方法B,页面 上使用: 

    1    $(document).ready(function(){
    2            $("h1").B();
    3    });

    执行结果 所以常见的jQuery插件都是以下这种形式: 好处就在于代码内部定义的方法外部只有插件能够访问,这样就将一些代码隐藏起来了,该 暴露的插件方法暴露在外部了。

    1    (function($){
    2     //插件代码
    3    })(jQuery)
  • 相关阅读:
    如何使用谷歌学术
    联合省选 2021 游记
    生成one-hot的方法
    GraphSAGE
    maven仓库如何引入本地jar包,Maven多种方式打可执行jar包
    DDL任务管理语句
    使用本地EDAS注册多个中台服务,供本地测试使用
    启动轻量级配置及注册中心EDAS
    端口被占用如何解决
    java8中Collectors.groupingBy 用法
  • 原文地址:https://www.cnblogs.com/easirm/p/4208533.html
Copyright © 2020-2023  润新知