• 小议jQuery插件开发


        1.写在前面

      大家都知道PHP专注后台与数据库的交互,前端页面中是js的天下,而jQuery作为使用最广泛,最简单有效的js的框架。深受大家的喜欢。

      而js作为一门面向对象的开发语言,它独特的语法和函数式的写法,也是妙趣横生。使用jQuery进行插件的开发,就能将一些js的函数封装在一个对象中,并对其扩展,提高了开发的效率,体现了面向对象的优越性。

        2.下面是正题

      主要有两种形式的jQuery的插件形式: 

      1)对象的形式扩展插件 $.fn.extend 

      2)函数的形式扩展插件 $.extend

      这里我们直接给出两个例子:

      1)对象形式的插件实现的功能是 鼠标点击Input输入框时,弹出其Value值

      2)函数形式的插件实现的功能是 鼠标移出Input输入框时,弹出其title值

      大家可以仔细揣摩,两者的不同,在此基础上,写出功能更强大,更健壮的jQuery的插件

      代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <input id="input" name="name" value="我喜欢jQuery" title="我喜欢js">
    <script src="http://www.eol.cn/js/global/jQuery_latest.min.js">
    </script>
    <script>

    /*************编写插件***********/

    /*

    *1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();

    */
    (function($){
          $.fn.extend({
            showVal : function(){
               var $this = $(this);
               $this.click(function () {//点击时显示里面的数值
                   alert($this.val());
                   
               })
               
       }
        

    })(jQuery); 

    //

    /*

    *2. 函数的形式扩展插件 $.extend   调用 $.functionName();

    */


          $.extend({
            showTitle : function(){
               
               $('#input').mouseout(function () {//鼠标移出时弹窗
                  var $this = $(this);
                   alert($this.attr('title'));
                   
               })

       }
        

    })

    })(jQuery)


    $(function(){

    $("#input").showVal();//1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();
    $.showTitle();//2. 函数的形式扩展插件 $.extend   调用 $.functionName();

    })
    </script>
    </body>
    </html>

    总结:

    jQuery为开发插件提拱了两个方法,分别是:

    jQuery.fn.extend(object);  给jQuery对象添加方法。
    jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

    1) jQuery.fn.extend(object);

    fn 是什么东西呢。查看jQuery代码,就不难发现。

    jQuery.fn = jQuery.prototype = {  

    init: function( selector, context ) {//....   

    //......  

    };   

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#input") 会生成一个 jQuery类的实例。

    jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    上面的列子中 $("#input") 为一个jQuery实例,当它调用成员方法 showVal()后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

    2) jQuery.extend(object); 

    为jQuery类添加添加类方法,可以理解为添加静态方法。如:

    $.extend({  

        add:function(a,b){return a+b;}  

    });  

    便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,$.add(3,4); //return 7

     

     

    by  djp

  • 相关阅读:
    【BZOJ 1013】 [JSOI2008]球形空间产生器sphere
    【codeforces 779A】Pupils Redistribution
    【codeforces 779B】Weird Rounding
    【codeforces 779C】Dishonest Sellers
    Residential Gateway System for Home Network Service
    互联网大规模数据分析技术(自主模式)第五章 大数据平台与技术 第10讲 大数据处理平台Hadoop
    大数据系统基础(自主模式) 2.1大数据和云计算关系概述
    设计模式(10) 外观模式(FACADE)
    命令模式(Command Pattern)
    设计模式(三)建造者模式Builder(创建型)
  • 原文地址:https://www.cnblogs.com/newbalanceteam/p/4984928.html
Copyright © 2020-2023  润新知