前言  

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery对象的demo:

  1. //sample:扩展jquery对象的方法,bold()用于加粗字体。
  2. (function ($) {
  3. $.fn.extend({
  4. "bold": function () {
  5. ///<summary>
  6. /// 加粗字体
  7. ///</summary>
  8. return this.css({ fontWeight: "bold" });
  9. }
  10. });
  11. })(jQuery);

调用方式:

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

  jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:

  1. //扩展jQuery对象本身
  2. jQuery.extend({
  3. "minValue": function (a, b) {
  4. ///<summary>
  5. /// 比较两个值,返回最小值
  6. ///</summary>
  7. return a < b ? a : b;
  8. },
  9. "maxValue": function (a, b) {
  10. ///<summary>
  11. /// 比较两个值,返回最大值
  12. ///</summary>
  13. return a > b ? a : b;
  14. }
  15. });
  16. //调用
  17. var i = 100; j = 101;
  18. var min_v = $.minValue(i, j); // min_v 等于 100
  19. var max_v = $.maxValue(i, j); // max_v 等于 101

重载版本:jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
   如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
   如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
   未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
参数
   deep:       可选。如果设为true,则递归合并。
   target:     待修改对象。
   object1:   待合并到第一个对象的对象。
   objectN:   可选。待合并到第一个对象的对象。
示例1:
合并 settings 和 options,修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }

示例2:
合并 defaults 和 options, 不修改 defaults。
var empty = {};

var defaults = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }

empty == { validate: true, limit: 5, name: "bar" }
这个重载的方法,我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

首先我们来看fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {.....};
};

原来 jQuery.fn = jQuery.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法,就相当于为对象添加”成员方法“,类的”成员方法“要类的对象才能调用,所以使用jQuery.fn.extend(object)扩展的方法, jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

二、自执行的匿名函数/闭包

1. 什么是自执行的匿名函数?    
     它是指形如这样的函数: (function {// code})();
    2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
    3. 分析     
       (1). 首先, 要清楚两者的区别:     (function {// code})是表达式, function {// code}是函数声明.    
       (2). 其次, js"预编译"的特点:     js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.    
       (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;    
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

例如:
   bootstrap 框架中的插件写法:
   !function($){
  //do something;
   }(jQuery);

和 
   (function($){
  //do something;
   })(jQuery); 是一回事。

匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。
例如:
     var a=1;
     (function()(){
    var a=100;
  })();
      alert(a); //弹出 1
更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域,防止插件"污染"

  1. //闭包限定命名空间
  2. (function ($) {
  3.  
  4. })(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法,制作插件

  1. //闭包限定命名空间
  2. (function ($) {
  3. $.fn.extend({
  4. "highLight":function(options){
  5. //do something
  6. }
  7. });
  8. })(window.jQuery);

3.给插件默认参数,实现 插件的功能

  1. //闭包限定命名空间
  2. (function ($) {
  3. $.fn.extend({
  4. "highLight": function (options) {
  5. var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  6. this.each(function () { //这里的this 就是 jQuery对象
  7. //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
  8. var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
  9. //根据参数来设置 dom的样式
  10. $this.css({
  11. backgroundColor: opts.background,
  12. color: opts.foreground
  13. });
  14. });
  15.  
  16. }
  17. });
  18. //默认参数
  19. var defaluts = {
  20. foreground: 'red',
  21. background: 'yellow'
  22. };
  23. })(window.jQuery);

到这一步,高亮插件基本功能已经具备了。调用代码如下:

  1. $(function () {
  2. $("p").highLight(); //调用自定义 高亮插件
  3. });

这里只能 直接调用,不能链式调用。我们知道jQuey是可以链式调用的,就是可以在一个jQuery对象上调用多个方法,如:
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件,就不能这样链式调用了。比如:$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法,原因在与我的自定义插件在完成功能后,没有将 jQuery对象给返回出来。接下来,return jQuery对象,让我们的插件也支持链式调用。(其实很简单,就是执行完我们插件代码的时候将jQuery对像return 出来,和上面的代码没啥区别)

  1. //闭包限定命名空间
  2. (function ($) {
  3. $.fn.extend({
  4. "highLight": function (options) {
  5. var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  6. return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
  7. //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
  8. var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
  9. //根据参数来设置 dom的样式
  10. $this.css({
  11. backgroundColor: opts.background,
  12. color: opts.foreground
  13. });
  14. });
  15.  
  16. }
  17. });
  18. //默认参数
  19. var defaluts = {
  20. foreground: 'red',
  21. background: 'yellow'
  22. };
  23. })(window.jQuery);

4.暴露公共方法 给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用着根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式。

  1. //公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
  2. $.fn.highLight.format = function (str) {
  3. return "<strong>" + str + "</strong>";
  4. }

5.插件私有方法
 有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下:

  1. //闭包限定命名空间
  2. (function ($) {
  3. $.fn.extend({
  4. "highLight": function (options) {
  5. //检测用户传进来的参数是否合法
  6. if (!isValid(options))
  7. return this;
  8. var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
  9. return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
  10. //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
  11. var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
  12. //根据参数来设置 dom的样式
  13. $this.css({
  14. backgroundColor: opts.background,
  15. color: opts.foreground
  16. });
  17. //格式化高亮文本
  18. var markup = $this.html();
  19. markup = $.fn.highLight.format(markup);
  20. $this.html(markup);
  21. });
  22.  
  23. }
  24. });
  25. //默认参数
  26. var defaluts = {
  27. foreground: 'red',
  28. background: 'yellow'
  29. };
  30. //公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
  31. $.fn.highLight.format = function (str) {
  32. return "<strong>" + str + "</strong>";
  33. }
  34. //私有方法,检测参数是否合法
  35. function isValid(options) {
  36. return !options || (options && typeof options === "object") ? true : false;
  37. }
  38. })(window.jQuery);

调用

  1. //调用
  2. //调用者覆盖 插件暴露的共公方法
  3. $.fn.highLight.format = function (txt) {
  4. return "<em>" + txt + "</em>"
  5. }
  6. $(function () {
  7. $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
  8. });

 如发现文中内容有误欢迎交流指出!

什么?你还不会写JQuery 插件的更多相关文章

  1. 写JQuery 插件 什么?你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  2. (转)什么?你还不会写JQuery 插件

    原文地址:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jque ...

  3. [转]什么?你还不会写JQuery 插件

    本文转自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jque ...

  4. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  5. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  6. 写JQuery插件的基本知识

    普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...

  7. [原创作品]手把手教你怎么写jQuery插件

    这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...

  8. 写jQuery插件时,一种更好的合并参数的方法

    看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...

  9. 第一次写jquery插件,来个countdown计时器吧

    之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...

随机推荐

  1. HTML基本组成结构与标签的认识

    HTML基本组成结构与标签 其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口,打个 ...

  2. AP是什么

    百度链接: AP---http://baike.baidu.com/link?url=_mC-Wkgl8j1_awpuicoZk3i4MWVcLaio1nm9XRt60F9QD4V_lJ-kE7J4C ...

  3. ELK+redis搭建nginx日志分析平台

    ELK+redis搭建nginx日志分析平台发表于 2015-08-19   |   分类于 Linux/Unix   |  ELK简介ELKStack即Elasticsearch + Logstas ...

  4. Linux svn的搭建与使用

    Linunx svn的搭建与使........纯手打的.. 一.安装前的准备 1.1 配置yum 库 1)加载光盘 2)进入/etc/yum.repo.d目录 3)复制"rhel-debug ...

  5. log4net不同logger输出日志

    4步曲 1.引用log4net.dll(nuget) 2.任意位置的命名空间头部加入下面的代码,web.config可修改为自己定义的.xml [assembly: log4net.Config.Xm ...

  6. Postgresql 数据库维护

    删除数据库 sudo -u postgres dropdb $DB_NAME 创建数据库 sudo -u postgres psql CREATE DATABASE $DB_NAME WITH ENC ...

  7. 【转载、推荐】不要自称是程序员,我十多年的 IT 职场总结

    注评:一气读完后,有些和我的观点类似.这篇文章显然是外国老写的,但是不妨碍我们的跨国交流. 如果我可以给每个工程教育增加一门课,它不会涉及编译器.门电路或是时间复杂度,而是一门介绍行业现实的入门课,因 ...

  8. codevs2178 表达式运算Cuties[笛卡尔树]

    2178 表达式运算Cuties  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Description 给出一个表达 ...

  9. Oracle数据库

    一.数据库表空间和数据文件 解析:一个数据库下可以开N个表空间,一个表空间可以包含N个数据文件.表空间是逻辑概念. 二.关于listener.ora位置 修改该界面上的数据,会影响指定路径的监听配置文 ...

  10. 3942: [Usaco2015 Feb]Censoring [KMP]

    3942: [Usaco2015 Feb]Censoring Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 375  Solved: 206[Subm ...