JQuery插件开发初探——结构熟悉
工作之余,对Jquery插件做了一点尝试,想着之前总用别人写的插件,自己要是也写一个用岂不是很cool。于是说干就干,动手开始写。
首先是模仿,从一个简单的功能进行入手,了解一下插件开发的流程和结构。
第一个尝试是做一个表格的隔行变色插件,相对简单。
首先是基本的框架结构:
自己的插件要定义在自己的命名空间中,不污染全局的命名空间,因此最外层应该是这样的结构:
(function ($) { })(jQuery);
由于这种类型的插件是建立在对已有元素的功能扩展,因此大体格式如下:
function ($) {
$.fn.fnName = function (options) { }
})(jQuery);
为自己的插件命名一个方法,同时给这个方法传递一个options的参数。
有了这个结构,就可以完成调用了,类似这样的方式:$("#domName"). fnName ({})
接下来就是设置插件的参数默认值和自定义值了。
由于插件需要提供一定的灵活性给用户,因此设置参数是必须的,但在用户做demo或者简单方便来说,要提供一个默认值也是必须的。因此,需要在插件内部声明默认值:
(function ($) {
$.fn.dannyTableUI = function (options) {
//定义默认值
var defaults = {
evenRowClass: 'evenc',
oddRowClass: 'oddc',
hoverRowClass: 'hoverc'
};
}
})(jQuery);
有了默认值,那么如果用户传递过来了自定义的参数值,如何处理呢?首先想到的是把用户自定义的参数值对默认值进行覆盖。如何覆盖呢?
Jquery提供了一个方法:
var options = $.extend(defaults, options);
这个方法可以把后面的参数覆盖到前面的参数中去,返回覆盖(合并)后的结果,非常方便。
有了这个方法,我们就能处理好自定义参数和默认值的关系了。
接下来,我们就要开始核心功能的编写了,要注意写法上如果要支持Jquery选择器和链式调用,需要这样:
//支持JQuery选择器
//支持链式调用
return this.each(function () { });
这样,整体的结构就完毕了。
最后把我们需要做的功能加进去,就可以了。
//隔行变色
this.each(function () {
var table = $(this);
table.find("tr:even").addClass(options.evenRowClass);
table.find("tr:odd").addClass(options.oddRowClass); table.find("tr").bind("mouseover", function () {
$(this).addClass(options.hoverRowClass);
});
table.find("tr").bind("mouseout", function () {
$(this).removeClass(options.hoverRowClass);
});
});
基本步骤就是:
- 定义命名空间。
- 定义插件扩展方法
- 定义默认值
- 处理默认参数和自定义参数的关系
- 链式调用和选择器框架
- 定义功能实现
- 添加注释,文档,示例
参考:http://www.cnblogs.com/xcj26/p/3345556.html
JQuery插件开发初探——结构熟悉的更多相关文章
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- jQuery插件开发初探
最简单的插件 $.fn.changeStyle = function (colorStr) { $(this).css('color',colorStr); } 应用如下: <!DOCTYPE ...
- jQuery插件开发的模式和结构
jQuery插件开发 一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法:另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通 ...
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发继承了jQuery高级编程思路
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- Jquery插件开发学习
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- Jquery插件开发精品教程
最开始接触jquery对他提供的各种插件总是十分有兴趣,但是总是不理解为什么这样写,从网络上查询了很久终于找到这篇文章,讲解的很详细,分享给大家. 要说jQuery 最成功的地方,我认为是它的可扩展性 ...
- 转:jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
随机推荐
- Ubuntu 设备 spark
周围环境: Unbunt 12.04 Hadoop 2.2.x Sprak 0.9 Scala scala-2.9.0.final.tgz 一步 1. 下载 scala 2. 解压scala,然后改动 ...
- leetcode先刷_Climbing Stairs
水的问题. 以为很常见.青蛙跳楼梯.能跳一步可以跳两步,它实际上是一个斐波那契数. 注意.空间O(1). class Solution { public: int climbStairs(int n) ...
- Spring、Spring MVC、MyBatis
Spring.Spring MVC.MyBatis整合文件配置详解 使用SSM框架做了几个小项目了,感觉还不错是时候总结一下了.先总结一下SSM整合的文件配置.其实具体的用法最好还是看官方文档. Sp ...
- 【LeetCode】Triangle 解决报告
[称号] Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjac ...
- DV工作流
- post跨域请求
[名词解释] 跨域:https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript 同源策略 ...
- 《图书管理系统——java》
/* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名: < ...
- 返璞归真 asp.net mvc (4) - View/ViewEngine
原文:返璞归真 asp.net mvc (4) - View/ViewEngine [索引页] [源码下载] 返璞归真 asp.net mvc (4) - View/ViewEngine 作者:web ...
- vuejs 相关资料
官网 http://vuejs.org/ 中文网站 http://cn.vuejs.org/ Vue.js——60分钟快速入门 http://www.cnblogs.com/keepfool/p/56 ...
- ReplaceGoogleCDN:将 Google CDN 更换国家
Chrome Web Store 安装地址: https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkk ...