我们先来看一个最简单的例子:

(function($){

  $.fn.extend({     //把此插件添加到jQuery的原型上

    pluginName:function(){   //插件的名字

      return this.each(function(){     //遍历匹配元素的集合

        //插件要实现的功能

      });

    }

  });

})(jQuery);   //传入jQuery对象

由于jQuery是集化操作($("div")会选择多个div元素进行操作),而我们的插件编写应该一个元素对应一个配置对象,我们可以使用$.extend({},defaults,options)来为每个元素分配独立的配置对象。其中,defaults为默认配置对象,以防我们什么都没传时,插件也能正常运作。如果传入的配置对象options比较复杂,也就是说options的属性也是一个对象,那么我们可以使用深拷贝,$.extend(true,{},defaults,options)。

当然,你可以在上面例子中的each中做一个元素对应一个配置对象的操作,但是如果操作很多,那么在each中就会有很多代码,维护不方便。

因此,我们需要使用面向对象的写法。请看例子:

(function($){

  var Plugin = function(element, options){

  };

  Plugin.defaults = {    //默认配置

  };

  Plugin.prototype = {};

  $.fn.extend({     //把此插件添加到jQuery的原型上

    pluginName:function(options){   //插件的名字

      return this.each(function(){     //遍历匹配元素的集合

        var ui = $._data(this, "pluginname");    //看此元素在jQuey缓存系统中是否存有pluginname属性,它的值是一个Plugin实例对象

        if(!ui){

          var opts = $.extend(true,{}, Plugin.defaults , options);    //这里的默认配置对象一般写在Plugin实例构造中使用

          ui = new Plugin(this,opts);

          $._data(this,"pluginname", ui);    //一个元素对应一个Plugin实例对象,插件的功能,全部在Plugin对象中,因此,我们只需要改写Plugin构造函数以及它的原型,就能实现此插件的功能。

        }       

      });

    }

  });

})(jQuery);   //传入jQuery对象

Bootstrap在上面的基础上,进行了三大改造,第一:插件的无冲突处理。第二:将内部的对象构造器(类)放到了$.fn.pluginName.Constructor上,方便我们来扩展这个内部类。第三:利用事件代理自动初始化实例,目的是让用户只需要引入此插件,并按照规定写HTML,就能让此HTML实现插件的功能。举个例子:

(function($){

//------------------------------------------------------------------------内部的对象构造器(内部类)

  var Dropdown= function(element, options){

    $(element).on("click",this.toggle);    //当$("div").dropdowm({....})时,就会给div绑定一个click事件,如果点击了div,就会触发toggle方法。

  };

  Dropdown.defaults = {    //默认配置

  };

  Dropdown.prototype = {

    constructor:Dropdown,

    toggle:function(){

      ......

    }

  };

//--------------------------------------------------------------

  var old = $.fn.dropdown;    //因为需要重写此方法名,因此先把原始的保存在old变量中,当调用$.fn.dropdown.noConflict(),就会把它还原。

  $.fn.extend({     //把此插件添加到jQuery的原型上

    dropdown :function(options){   //插件的名字

      var args = [].slice.call(arguments,1);

      return this.each(function(){     //遍历匹配元素的集合

        var ui = $._data(this, "dropdown");    //看此元素在jQuey缓存系统中是否存有dropdown属性,它的值是一个Dropdown实例对象

        if(!ui){

          var opts = $.extend(true,{}, Dropdown.defaults , options);   //这里的默认配置对象,一般在Dropdown实例对象构造中使用。

          ui = new Dropdown(this,opts);

          $._data(this,"dropdown", ui);    //一个元素对应一个Dropdown实例对象,插件的功能,全部在Dropdown对象中,因此,我们只需要改写Dropdown构造函数以及它的原型,就能实现此插件的功能。

        }    

        if (typeof options == 'string' && typeof ui[options] == 'function') {  //这里添加的这段代码,是针对jQuery插件的,当我们实例化此插件后,比如:$("div").dropdown({....})后,如果想调用此插件的方法,那么,可以用$("div").dropdown(方法名, arg1,arg2....)
          ui[options].apply(ui, args);
        }    

      });

    }

  });

  $.fn.dropdown.Constructor = Dropdown;   //把内部类暴露出来,我们可以通过$.fn.dropdown.Constructor来访问,并且扩展它

  $.fn.dropdown.noConflict = function(){

    $.fn.dropdown = old;

    return this;

  }

  $(document).on("click", ".dropdown",Dropdown.prototype.toggle);    //加载完此插件后,在HTML的元素中只要有class = dropdowm,那么点击此元素,就会执行toggle方法。 

})(jQuery);   //传入jQuery对象

如果想做jQuery插件,此思想一定要掌握,面试会问,一次看不懂,多看几次就懂了,或者去看下公司里面其他人写的插件,就很容易懂了。如果大家没有很好的例子,那可以看一下我写的那个日历插件:http://www.cnblogs.com/chaojidan/p/4140725.html。在这个插件中,我是直接使用了全局变量来定义了CCalendar,这样会污染我们的全局环境,因此,我们只需要在整个代码的外面,添加一个立即执行的匿名函数,同时包装到jQuery中就行了。

(function($){

//------------------------------------------------------------------------内部的对象构造器(内部类)

  // 日历插件代码

//-------------------------------------------------------------- 

  $.fn.ccalendar = function (options) {
    return this.each(function () {
      var $this = $(this),
      data = $this.data('CCalendar'),      //这个就相当于$._data(this, "CCalendar")
      if (!data) {

        data = new CCalendar(this, options);
        $this.data('CCalendar', data );  //这个就相当于$._data(this,"CCalendar“, data);
      }
    });
  };
  $.fn.ccalendar.Constructor = CCalendar;

})(jQuery)

这样一包装之后,插件代码中的方法和变量,都变成局部的了,就不会污染全局环境了,但是在使用这个日历插件时,你就需要这样调用了:

$("input").ccalendar({   .....   });

如果大家使用的是sea.js这种模块化开发的模式:

那么只需要:

define(function(require, exports, module){

  var $ = require("./jQuery.js");

  //然后再把上面的立即执行函数中的代码放到这里。

  module.exports=CCalendar;

})

这时,你既可以用jQuery的调用方式:$("input").ccalendar({   .....   });

也可以使用sea.js的调用方式:var callendar = require("./ccalendar.js");   var date = new callendar(element, { ..... })

加油!

第四十三课:jQuery插件化的更多相关文章

  1. NeHe OpenGL教程 第四十三课:FreeType库

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  2. UEditor的jQuery插件化

    UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...

  3. wangEditor的jQuery插件化

    wangEditor是一款优秀的Web富文本编辑器.这篇随笔中讲述的wangEditor版本是2.1.22,由于它依赖于jQuery(作者打算在第三版中取消对jQuery的依赖),那么如果能使用$(& ...

  4. UEditor的jQuery插件化 -转

    UEditor本身并不依赖jQuery,但如果在项目中同时使用两者的话,可能会希望使用jQuery语法创建和获取编辑器实例.为此,需要为jQuery编写插件,代码如下: (function ($) { ...

  5. 潭州课堂25班:Ph201805201 django 项目 第四十三课 后台 用户管理前后功能实现 (课堂笔记)

    用户的展示,编辑,删除, 把用户显示出来,用户名,员工(是,否), 超级用户(是, 否) 活跃状态,(非活跃示为删除) 在前台要显示该用户所属的用户组,在前台代码中是调用类的属性,所以在 user 的 ...

  6. python第四十三课——封装性

    1.面向对象的三大特性:封装性.继承性.多态性 封装: 封装使用的领悟: 1).生活层面:食品.快递.计算机.明星... 2).计算机层面: ①.模块.类.函数... ②.属性数据的封装与隐藏 权限修 ...

  7. Android 插件化开发(四):插件化实现方案

    在经过上面铺垫后,我们可以尝试整体实现一下插件化了.这里我们先介绍一下最简单的实现插件化的方案. 一.最简单的插件化实现方案 最简单的插件化实现方案,对四大组件都是适用的,技术面涉及如下: 1). 合 ...

  8. Gradle 1.12用户指南翻译——第四十三章. 构建公告插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  9. 【技术分享会】 @第四期 JQuery插件

    本讲内容 JavaScript JQuery JQuery插件 实例 JavaScript 前端开发工程师必须掌握的三种技能 描述内容的HTML 描述网页样式的CSS 描述网页行为的JavaScrip ...

随机推荐

  1. Linux SELinux命令

    getsebool与setsebool工具 说明:SELinux规范了许多boolean数值清单档案,提供开启或关闭功能存取项目,而这些值都存放在/selinux/booleans/目录内相关档案,这 ...

  2. JavaScript的几种函数的结构形式

    匿名函数,普通函数,变量函数,基于对象的方法 介绍它们的优劣点(性能,执行条件,可维护性,适合大型还是小型) Javascript有着灵活多变的函数方法,具体选用何种形式,都会极大地影响应用程序的编写 ...

  3. codeforces 480C C. Riding in a Lift(dp)

    题目链接: C. Riding in a Lift time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  4. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  5. POJ 1066 Treasure Hunt --几何,线段相交

    题意: 正方形的房子,给一些墙,墙在区域内是封闭的,给你人的坐标,每穿过一道墙需要一把钥匙,问走出正方形需要多少把钥匙. 解法: 因为墙是封闭的,所以绕路也不会减少通过的墙的个数,还不如不绕路走直线, ...

  6. uGUI练习(八) InputField

    InputField 文本输入组件,本文练习InputField的属性及事件 一.属性 1.Character Limit 限制字符长度(0表示不限制),比如:设置只能输入3个字符(中文,英文,数字, ...

  7. Unity物理系统的触发器

    如何触发触发器函数? 触发器中相互的,当其中一个是触发器,两个物体进入碰撞,双方的触发器函数都会触发. 两个碰撞盒穿入? 解决办法:给其中一个添加刚体 触发器的物理配置 以上是个人理解,看过API之后 ...

  8. centos下安装xampp,Zend Guard,memcached

    这里说的生产环境是php5.4x,要高版本的其实也一样 第一步:安装xampp xampp它是跨平台的,且自带很多拓展,安装之后会为我们省去很多事,使用起来很方便. i>http://sourc ...

  9. Loadrunner:场景运行较长时间后报错:Message id [-17999] was not saved - Auto Log cache is too small to contain the message.

    loadrunner运行时间较长后,跑数据过程老是失败,有如下error: Message id [-17999] was not saved - Auto Log cache is too smal ...

  10. 分层开发(MySchool总结)

    由于分层之间存在各层之间的关系窗体之间的方法跳转,故有需要者可以进行下载本地文件 MySchool.rar 3304KB 5/22/2016 9:43:28 AM ,代码中有注释, 上述代码,属个人所 ...