zoukankan      html  css  js  c++  java
  • jquery插件分类与编写详细讲解

    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)
     
    分类: jquery
  • 相关阅读:
    AtCoder Beginner Contest 167
    AtCoder Beginner Contest 166
    AtCoder Beginner Contest 165
    AtCoder Beginner Contest 164
    AtCoder Beginner Contest 163
    AtCoder Beginner Contest 162
    AtCoder Beginner Contest 161
    AtCoder Beginner Contest 160
    AtCoder Beginner Contest 159
    自定义Mybatis自动生成代码规则
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4209476.html
Copyright © 2011-2022 走看看