当我们编写的代码可以供其他人甚至我们自己重用的时候,可以通过将这些代码打包成一个新插件。


###**在插件中使用别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法,或者也可以在内部定义一个别名**
自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法,或者也可以在内部定义一个别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法,或者也可以在内部定义一个别名。

对于代码比较长的插件来说,很多人觉得不能使用$别名会导致代码难以理解。为了解决这个问题,可以在插件的作用域内定义这个快捷方式,方法就是定义一个函数并马上调用它。这种定义并立即调用函数的语法通常称为立即调用的函数表达式:

(function($){
//在这里添加代码
})(jQuery);

这个包装函数只接受一个参数,通过这个参数传入了jQuery对象。这个参数的名字是$,因此在这个函数内部,使用$别名就不会有冲突了。


###添加新的全局函数

jQuery内置的某些功能是通过全局函数提供的。

所谓全局函数,实际就是jQuery对象的方法,但从实践的角度来看,它们是位于jQuery命名空间内部的函数。

使用这种技术的典型例子就是$.ajax()函数。$.ajax()所做的一切都可以通过简单地调用一个名为ajax()的常规全局函数来实现,但是,这种方式会给我们带来函数名冲突的问题。

通过把这个函数放在jQuery的命名空间内,只需避免它与其他的jQuery方法冲突即可。对想要使用插件的人而言,想要用这个插件,必须要有jQuery库。

核心jQuery库提供的很多全局函数都是实用方法。所谓实用方法,就是一些常用功能的快捷方式,但即使手工编写同样功能的代码也不是很难。

要向jQuery的命名空间中添加一个函数,只需将这个新函数指定为jQuery对象的一个属性。

扩展全局jQuery对象

利用$.extend()函数,可以来定义全局函数。

调用$.extend()函数可以给全局jQuery对象添加属性(如果原来有相同的属性,就会替换原来的属性) 。

使用命名空间隔离函数

由于可能其他插件定义相同的函数名,为了避免这种情况,把属于一个插件的全局函数都封装到一个对象中。

这个方法的本质是为所有的全局函数又创建了一个命名空间,叫做jQuery.mathUtils。在调用它们时必须得加上插件的名字:$.mathUtils.sum(sum);


###添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象实例的方法提供的。

当函数需要操作DOM时,就是将函数创建为jQuery实例方法的好机会。

一个合理的实例方法应该包含对它的上下文的操作。

####对象方法的上下文

在任何插件方法内部,关键字this引用的都是当前的jQuery对象。因而,可以在this上面调用任何内置的jQuery方法,或者提取它包含的DOM节点并操作该节点。

####隐式迭代

jQuery的选择符表达式可能会匹配零、一或多个元素。因此,在设计插件时必须考虑到这些可能的情况。

要在无论匹配多个元素的情况下都保证行为正确,最简单的方式就是始终在方法的上下文上调用.each()方法;这样就会执行隐式迭代,而执行隐式迭代对于维护插件与内置方法的一致性是至关重要的。

this的含义

在对象方法体内,关键字this引用的是一个jQuery对象,但在每次调用的.each()方法中,this引用的则是一个DOM元素。


###使用jQuery UI部件工厂创建插件

jQuery UI库的核心包含了一个工厂方法,叫$.widget()方法。使用这个方法可以确保我们的代码达到所有jQuery UI部件用户任何的API标准。


###插件设计建议

  1. 为避免$别名与其他库发生冲突,可以使用jQuery,或者在立即调用的函数表达式中传入$,使其成为一个局部变量。
  2. 无论是以$.myPlugin的方式扩展jQuery,还是以$.fn.myPlugin的方式扩展jQuery的原型,给$命名空间添加的属性都不要超过一个。更多的公有方法和属性应该添加到插件的命名空间中。(例如:$.myPlugin/publicMethod或$.fn.myPlugin Property)。
  3. 别忘了为插件提供一个默认选项的对象:$.fn.myPlugin.defaults = {size:‘large’ }。
  4. 要允许插件用户提供一个默认选项的对象,包括影响后续方法的调用($.fn.myPlugin.defaults.size = ‘medium’;)和单独调用($(‘div’).myPlugin({size:‘small’})?。
  5. 多数情况下,扩展jQuery原型时($.fn.myPlugin)要返回this,以便插件用户通过连缀语法调用其他的jQuery方法($.(‘div’).myPlugin().find(‘p’).addClass(‘foo’))。
  6. 在扩展jQuery原型时($.fn.myPlugin),通过调用this.each()强制执行隐式迭代。
  7. 合适的时候,利用回调函数支持灵活地更改插件行为,从而不必修改插件代码。
  8. 如果插件时为了实现用户界面元素,或者需要跟踪元素的状态,使用jQuery UI部件工厂来创建。
  9. 利用Qunit等测试框架为自己的插件维护一组自动的单元测试,以确保插件能够按预期工作。
  10. 使用Git或其他版本控制系统跟踪代码的版本。可以考虑把插件公开托管到Github上,以便其他人帮你改进。
  11. 在把自己的插件提供给别人使用时,务必明确许可条款。建议考虑使用MIT许可,这也是jQuery使用的许可。

jQuery——开发插件的更多相关文章

  1. jQuery开发插件的两种方式

    最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验 ...

  2. 用jQuery开发插件详解

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  3. Jquery开发插件的方法

    Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...

  4. jQuery开发插件的两个方法 js 深浅拷贝

    1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...

  5. jquery开发插件提供的几种方法

    http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

  6. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  7. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  8. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  9. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

随机推荐

  1. Class的一些使用技巧?

    1.forName和newInstance结合起来使用,可以根据存储在字符串中的类名创建对象.例如 Object obj = Class.forName(s).newInstance(); 2.虚拟机 ...

  2. web版文件管理系统 ——文件图标的获取

    需求来源:公司需要一个文件的管理系统,方便管理公司文档以及互相传阅以及一些权限控制的便利,其中极小的一块功能点就是现实文件列表里面的图标获取,从网上找图标太麻烦,而且不现实,不可能用户每次上传文件等你 ...

  3. 本地显示Linux服务器的GUI程序

    如果我们UI自动化脚本跑在 Linux 服务器环境上,这个时候我们是看不到界面的,如果不使用浏览器的无头模式,这个时候我们的程序就跑不起来了,如何在服务器环境不使用浏览器的无头模式下进行UI测试呢,我 ...

  4. 洛谷P4848 崂山白花蛇草水 权值线段树+KDtree

    题目描述 神犇 \(Aleph\) 在 \(SDOI\ Round2\) 前立了一个 \(flag\):如果进了省队,就现场直播喝崂山白花蛇草水.凭借着神犇 \(Aleph\) 的实力,他轻松地进了山 ...

  5. RHEL8/CentOS8的网络IP配置

    rhel8与7的区别 在rhel7上,同时支持network.service和NetworkManager.service(简称NM).默认情况下,这2个服务都有开启,但许多人都会将NM禁用掉. 在r ...

  6. 【C++】《C++ Primer 》第十一章

    第十一章 关联容器 关联容器和顺序容器的不同:关联容器中的元素时按照关键字来保存和访问的. 关联容器支持通过关键字来高效地查找和读取元素,基本的关联容器类型是 map和 set. 类型 map 和 m ...

  7. [工作札记]02: .Net Winform控件TreeView最简递归绑定方法

    前言:Treeview控件是我们在WinForm.WebForm开发中经常使用的控件,需要从数据库动态加载数据,然后递归绑定每一个节点:同样,递归的思路在其他程序中也经常运用,包括.Net MVC等. ...

  8. 深入剖析setState同步异步机制

    关于 setState setState 的更新是同步还是异步,一直是人们津津乐道的话题.不过,实际上如果我们需要用到更新后的状态值,并不需要强依赖其同步/异步更新机制.在类组件中,我们可以通过thi ...

  9. CTFshow-萌新赛杂项_签到

    查看网页信息 http://game.ctf.show/r2/ 把网页源码下载后发现有大片空白 使用winhex打开 把这些16进制数值复制到文件中 把20替换为0,09替换为1后 得到一串二进制数值 ...

  10. 爬虫+django,打造个性化API接口

    简述 今天也是同事在做微信小程序的开发,需要音乐接口的测试,可是用网易云的开放接口比较麻烦,也不能进行测试,这里也是和我说了一下,所以就用爬虫写了个简单网易云歌曲URL的爬虫,把数据存入mysql数据 ...