开发JQuery插件标准结构
1. 定义作用域
定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。说了这么多,那要怎样定义一个插件的私有作用域?
//step01 定义JQuery的作用域
(function ($) { })(jQuery);
别小看了这个作用域,就像c#定义一个类的class关键字一样重要。
2. 为JQuery扩展一个插件
当定义好了JQuery的作用域后,最核心也是最迫切的一步就是为这个JQuery的实例添加一个扩展方法。首先我们为这个Jqury插件命名一个方法,叫easySlider,当在调用这个插件的时候,我们可以通过options来给这个插件传递一些参数。具体的定义方法看如下代码:
//step01 定义JQuery的作用域
(function ($) {
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) { }
})(jQuery);
到现在为止,其实一个最简单的JQuery插件就已经完成了。调用的时候可以$("#domName").easySlider({})来调用这个插件。
3. 设置默认值
一个完美的插件,应该是有比较灵活的属性。那准备开发一个JQuery插件时,在用户未指定属性时,应该有默认值,在JQuery可以分两步实现这样的定义,看如下代码step03-a,step03-b。
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性,默认属性
var options = $.extend(defaults, options);
}
})(jQuery);
做程序的人都喜欢创新,改改变量名呀,换一个行呀这些。当看到用var defaults = {}来表示一个默认属性时,在自己写JQuery插件时就想着与众不同,所以用var default01 ={} ,var default02 ={}来表示默认属性了。然后默认属性名五花八门,越来越糟。所以建议在写JQuery插件时,定义默认属性时,都用defaults变量来代表默认属性,这样的代码更具有可读性。
有人看到这行代码:var options = $.extend(defaults, options),皱起眉头,表示不解。那我们先来看如下代码:
var obj01 = { name: "英文名:Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名:XiaoJian", girlfriend: { name: "YY"} }; var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);
把代码拷贝到开发环境中,分别看一下a,b,c,d的值,就明白了var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;如果用户没有设置默认值的属性,还是保留插件的默认值。
4. 支持JQuery选择器
JQuery选择器,是JQuery的一个优秀特性,如果我们的插件写来不支持JQuery选择器,确实是一个不小的遗憾。如何使自己的JQuery插件能支持多个选择器,我们的代码应该这样定义:
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性,默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
this.each(function () { });
}
})(jQuery);
5. 支持JQuery的链接调用
上边的代码看似完美了,其实也不那么完美。到目前为止还不支持链接调用。为了能达到链接调用的效果必须要把循环的每个元素return
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性,默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () { });
}
})(jQuery);
这样的定义才能支持链接调用。比如支持这样的调用:$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });
6. 插件里的方法
往往实现一个插件的功能需要大量的代码,有可能上百行,上千行,甚至上万行。我们把这代码结构化,还得借助function。在第一点已经说了,在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法:
//step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
} //step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性,默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);
步骤step06-a:在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的,有点像C#类里的一个私有方法,只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。
开发JQuery插件标准结构的更多相关文章
- 如何开发jQuery插件
一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...
- 开发jQuery插件的基本步骤
在进行开发jQuery插件前,首先要了解一些知识: 1.闭包 1.1.闭包的作用: · 避免全局依赖 · 避免第三方破坏 · 兼容jQuery操作符'$'和jQuery 1.2.闭包的形式 (func ...
- 快速开发 jQuery 插件的 10 大技巧(转)
转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...
- 快速开发 jQuery 插件的 10 大技巧
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...
- 快速开发jQuery插件的10大技巧
原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- 自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
- 开发JQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
- 快速开发 jQuery 插件的 10 大技巧(转)
1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...
随机推荐
- c语言文件
完整代码块展示: #include <stdio.h> #include <stdlib.h> #include <string.h> struct student ...
- 【python爬虫】初识爬虫
一.爬虫的定义 爬虫定义:程序或者脚本——自动的爬取万维网的数据的程序或者脚本. 二.爬虫可以解决的问题 1.解决冷启动问题. 2.搜索引擎的根基——通用爬虫. 3.帮助机器学习建立知识图谱. 4.制 ...
- 用OC实现双向链表:构造链表、插入节点、删除节点、遍历节点
一.介绍 双向链表:每一个节点前后指针域都和它的上一个节点互相指向,尾节点的next指向空,首节点的pre指向空. 二.使用 注:跟单链表差不多,简单写常用的.循环链表无法形象化打印,后面也暂不实现了 ...
- 一文学会 TypeScript 的 82% 常用知识点(上)
前端专栏 2019-11-22 19:17:55 对于前端从业者来说,TypeScript(以下简称 TS)已经不算是新技术. Vue3 的源码基于 TS 编写, Angular 项目默认支持 TS ...
- workbook数据相关操作
访问单个单元格 c = ws['A4'] #返回单元格A4,如果单元格不存在,则会自动创建 ws['A4'] = 4 #为单元格A4赋值为4 d = ws.cell(row=4, column=2, ...
- 图解Java常用数据结构
最近在整理数据结构方面的知识, 系统化看了下 Java 中常用数据结构, 突发奇想用动画来绘制数据流转过程. 主要基于 jdk8, 可能会有些特性与 jdk7 之前不相同, 例如 LinkedList ...
- sql慢查询工具(配置代码)
# 在mysql的配置文件/etc/mysql/mysql.conf.d/mysqld.cnf[mysqld]中配置懒查询 slow_query_log = ON # 是否已经开启慢查询 long_q ...
- Android高可用移动网络连接---(转载自http://wingjay.com/2019/01/16/mobile-network-connection/)
读者好,前面我们在 <Android 架构之网络连接与加速> 和<Android 架构之长连接技术>两篇文章中,讲解了 Http 短连接.TCP 长连接.连接复用与速度优化.数 ...
- centos7下mysql5.7的安装与配置
centos7下MySQL5.7的安装与配置 下载 下载地址 根据系统和版本选择红框中的四个RPM包下载即可,然后放到centos7系统中的/opt目录下,等待稍后安装. 安装前的准备 1. 检查系统 ...
- NumPy 学习 第二篇:索引和切片
数组索引是指使用中括号 [] 来定位数据元素,不仅可以定位到单个元素,也可以定位到多个元素.索引基于0,并接受从数组末尾开始索引的负索引. 举个例子,正向索引从0开始,从数组开始向末尾依次加1递增:负 ...