本文是参考了Joey的博客后整理的。

先从一个简单扩展jQuery对象的demo开始说起:

//sample:扩展jquery对象的方法,redTextColor()用于改变字体颜色。
(function ($) {
$.fn.extend({
"redTextColor": function () {
// 默认字体颜色为红色
return this.css({ color: "red" });
}
});
})(window.jQuery);

调用方式:

$(function(){
$('p').redTextColor();
})

这是一个简单的扩展,下面我们开始详细分析一下上面的代码。

一、jQuery的插件机制

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

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

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

       //扩展jQuery对象本身
jQuery.extend({
"minValue": function (a, b) {
///<summary>
/// 比较两个值,返回最小值
///</summary>
return a < b ? a : b;
},
"maxValue": function (a, b) {
///<summary>
/// 比较两个值,返回最大值
///</summary>
return a > b ? a : b;
}
});
//调用
var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 等于 100
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}();却会报错?

     (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插件

接下来我们写一个高亮的插件

1.定义一个闭包区域,防止插件污染

//这样闭包可以限制命名空间
(function($){
...code...
})(window.jQuery);

2.使用jQuery.fn.extend()的方式制作插件

(function ($) {
$.fn.extend({
'highlight': function (op) {
........
}
});
})(window.jQuery);

3.设置默认参数,实现插件功能

(function ($) {
$.fn.extend({
'highlight': function (op) {
var opt = $.extend({},defaults,op);
this.each(function () {
$(this).css({
backgroundColor: opt.background,
color: opt.foreground
});
})
}
});
  //默认参数
var defaults = {
background: 'red',
foreground: 'yellow'
}
})(window.jQuery);

至此,高亮插件已基本实现了,调用代码如下:

$('p').highlight({
background: 'yellow',
foreground: 'gray'
});

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

(function ($) {
$.fn.extend({
'highlight': function (op) {
//使用jQuery.extend 覆盖插件默认参数
var opt = $.extend({},defaults,op);
//这里的this 就是 jQuery对象。这里return 为了支持链式调用
return this.each(function () {
//根据参数来设置 dom的样式
$(this).css({
backgroundColor: opt.background,
color: opt.foreground
});
})
}
});
//默认参数
var defaults = {
background: 'red',
foreground: 'yellow'
};
})(window.jQuery);

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

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

5.插件私有方法
 有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。

6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。

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

//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
//格式化高亮文本
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
}); }
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
//公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "<strong>" + str + "</strong>";
}
//私有方法,检测参数是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
})(window.jQuery);

调用:

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

jQuery学习总结06-插件开发的更多相关文章

  1. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  2. jquery学习笔记---jquery插件开发

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...

  3. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  4. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  5. Qlik Sense学习笔记之插件开发

    date: 2019-05-06 13:18:45 updated: 2019-08-09 15:18:45 Qlik Sense学习笔记之插件开发 1.开发前的基础工作 1.1 新建插件 dev-h ...

  6. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  7. jquery学习(一)

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  10. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. [CSP-S模拟测试]:格式化(贪心)

    题目传送门(内部题105) 输入格式 每组数据第一行一个正整数$n$,表示硬盘块数,接下来$n$行,每行两个正整数,第一个正整数为硬盘格式化前的容量,第二个正整数为格式化之后的容量. 输出格式 对每组 ...

  2. linux grep 正则

    grep : 显示匹配行 -v: 反显示 -e 使用扩展正则表达式 黑色字体表明是原生正则表达式 红色字体表明是扩张正则表达式 1.匹配操作符 \: 转义字符串(正则使用扩展字符操作  没有使用-e ...

  3. 【机器学习速成宝典】模型篇02线性回归【LR】(Python版)

    目录 什么是线性回归 最小二乘法 一元线性回归 多元线性回归 什么是规范化 Python代码(sklearn库) 什么是线性回归(Linear regression) 引例 假设某地区租房价格只与房屋 ...

  4. 条形码(barcode)code128生成代码

    条形码(barcode)code128生成代码 很简单 多些这位兄弟https://bbs.csdn.net/topics/350125614 下面是我的DEMO 直接放到VS2005下面编译即可 # ...

  5. YV12和NV12格式

    害怕搞忘 直接保存图片

  6. python - 代码调试的好帮手sys._getframe()

    python 的调试,令人非常忧伤,通过将输出路径打印的方式,可以提高很大的方便性: import sys #coding=utf-8 def get_cur_info(): print sys._g ...

  7. Python学习之==>URL编码解码&if __name__ == '__main__'

    一.URL编码解码 url的编码解码需要用到标准模块urllib中的parse方法 from urllib import parse url = 'http://www.baidu.com?query ...

  8. Linux下编译安装Python-3.6.5

    1.下载Python-3.6.5安装包 在Python官网(https://www.python.org/downloads/)下载对应的安装包,选择3.6.5的linux版本,如下图: 2.将安装包 ...

  9. 【BASIS系列】SAP Basis系统管理中重置用户缓冲哪些需要注意

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[BASIS系列]SAP Basis系统管理中重 ...

  10. psp周总结02

      周日 周一 周二 周三 周四 周五 周六 所花时间 180 60 240 180 340 180 培训 代码量 186 65 157 86 200 200 博客量 1 1 了解的知识点 jsp页面 ...