快速创建jquery插件
介绍
什么是插件?
插件我们见得很多了,比如浏览器上我们会安装一些去除广告的插件、美化页面的插件等等。 在前端,我们也常常写一些jquery插件来使用。来添加我们常常写的一些功能,方便使用。
为什么要使用jquery插件?
jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式,减少代码量。使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话,这可能就是您需要编写自定义 jQuery 插件的一个原因。
简单的说: 当你重复使用jquery编写代码时,就说明你可以把这段代码编写成jquery插件了。
普通js插件的一个例子
下面就是一个js插件font.js,我们在使用的时候往往是先引入jquery,然后在引入这个插件(其实这个是没有必要遵从这个顺序的,因为这个不是jquery插件)。
下面我们来看看font.js是怎么来定义这个插件的。
// JavaScript Document
; (function (win, doc) {
//动态设置font-size值
var h, setUnitA;
win.addEventListener('resize', function () {
clearTimeout(h);
h = setTimeout(setUnitA, );
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(h);
h = setTimeout(setUnitA, );
}
}, false); setUnitA = function () {
doc.style.fontSize = doc.clientWidth / + 'px';
}
setUnitA(); })(window, document.documentElement);
注:实际上这不能说是一个jquery插件,因为我们看到这里并没有传入jquery,所以这就是一个普通的插件,方便我们的重复使用。
即这个js文件用于在移动端适配文字,使得显示正常。
ok! 这就是一个jquery插件了。
问题1: 插件的最前面为什么要使用分号;作为结束呢?
解释1:这个很好理解:js代码结束的时候,最后一句是允许不加分号的(比如一个函数的最后一句)。如果某个js代码这么做了,那么把它跟另外一个js脚本拼在一起的时候,原来是“最后一句”的,变成了不是最后一句,于是就出现语法错误了。另外,仅包含分号的语句,和C语言一样,表示一个空语句,完全是符合语法的,所以也不会有错。
解释2:
也就是说这是为了合并压缩js时不会出错才这么设计的。
问题2:这个插件定义的形式是怎么样的?
我们可以看到这时一个匿名的立即执行的函数。 匿名: 这个插件是为了完成一项功能,它并不需要被其他函数调用。 立即执行:目的是避免变量命名冲突的问题。
问题3: 对于这个插件中立即执行的函数,传入的参数是什么意思?
因为这个立即执行函数是封闭的,所以需要通过传递参数来调用相关的对象。 这里传入了window和document.documentElement供内部使用。 当然,如果这里定义的是一个jquery插件,那么我们就可以传入$或者是jquery了。
问题4: 这里是如何实现控制字体大小的呢?
非常简单: 就是在载入页面和调整窗口大小的时候,动态设置根元素(html)的值,然后在css中使用rem进行布局,这样就可以完成移动端的适配了。
开始jquery插件
;(function($) {
$.fn.accordion = function(options) {
var settings = $.extend({}, {open: false}, options);
return this.each(function() {
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
if(settings.open) $(this).children('dt:first-child').next().show();
}); function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
} function hide() {
$(this).next().slideUp('fast');
} function reset() {
$(this).next().hide();
}
}
})(jQuery);
ok! 这就是一个jquery插件了!
- 第一个分号同样是为了解决压缩到一个文件时可能导致的问题的。
- 同样是一个立即执行的匿名函数,并且在调用的时候传入了一个jQuery作为参数。这样就可以在其中使用jquery了,所以这就是一个名副其实的jquery插件了。
- jquery的fn就是扩展插件所必须的,它相当于js中的prototype,所以还是非常重要的~
- 这里使用了var settings = $.extend({}, {open: false}, options);
$.extend
方法参数是一个目标对象和 2 个或多个合并对象。在本示例中,目标对象是一个空 object literal,充当合并对象容器。目标将成为一个包含合并对象值的单一对象(在该案例中是settings
变量)。第 2 个参数是一个包含默认插件属性的 object literal。第 3 个参数是用户定义的 options 参数。要在一个 HTML 元素上使用 accordion 插件传递 options,如果用户传递的options中也包含了open,那么就会覆盖默认的。 - 可以看到,在这个插件中我们return了这个对象,这样我们调用了这个扩展的插件之后就可以使用链式调用了。
- 当然,在参数方面我们不仅可以传递jquery,也可以定义其他的如window、document.documentElement等。
结束
快速创建jquery插件的更多相关文章
- 快速开发 jQuery 插件的 10 大技巧(转)
1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...
- 快速开发 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 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- 2014优秀的好用的20款免费jQuery插件推荐
2013 年最好的 20 款免费 jQuery 插件,世界买家网 www.buyerinfo.biz在这里分享给大家 这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现 今互联网市场上提 ...
- 2013 年最好的 20 款免费 jQuery 插件
2013 年最好的 20 款免费 jQuery 插件 oschina 发布于: 2014年01月11日 (8评) 分享到 新浪微博腾讯微博 收藏+99 互联网上面有很多 jQuery 插件,这里我们 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jQuery 插件写法2
转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...
随机推荐
- 42、生鲜电商平台-商品的spu和sku数据结构设计与架构
说明:Java开源生鲜电商平台中商品的spu和sku数据结构设计与架构,包括数据库图标与架构分析. 1. 先说明几个概念. 电商网站采用在商品模块,常采用spu+sku的数据结构算法,这种算法可以将商 ...
- sql去掉换行符
select replace(replace(ServiceCall,CHAR(13),''),CHAR(10),'') from outbound_complaint where bz1='朱成 ...
- SQL SERVER 提供了一些时间函数:
SQL SERVER 提供了一些时间函数:取当前时间:select getdate()取前一个月的时间:SELECT DATEADD(MONTH,-1,GETDATE()) 月份减一个月取年份:SEL ...
- C#字符串要点(复习专用)
一.字符串 通过string定义一个字符串,或者通过String类来创建对象. 通过new String() 创建有一下几种构造函数(从元数据),以此顺序创建string: // // 摘要: // ...
- Promise 异步函数顺序执行
可以满足需求,且使用方法和Promise.all统一 var a = function() { return new Promise(function(resolve, reject) { setTi ...
- C++期中考试
第一题1. 补足日期类实现,使得能够根据日期获取这是一年中第多少天.(12分) date.h #ifndef DATE_H #define DATE_H class Date { public: Da ...
- 【转】 PHP 两个日期(时间段) 之间的日期数组
在开发过程中会遇到这样一个需求:获取2018-11-02到2018-11-15之间的日期数组 希望得到如下数组: Array ( [] => -- [] => -- [] => -- ...
- 使用pycharm创建自己的第一个django项目
PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自动完成.单元测试.版本控制. ...
- 洛谷P3784 [SDOI2017]遗忘的集合(生成函数)
题面 传送门 题解 生成函数这厮到底还有什么是办不到的-- 首先对于一个数\(i\),如果存在的话可以取无限多次,那么它的生成函数为\[\sum_{j=0}^{\infty}x^{ij}={1\ove ...
- 启动HBase脚本start-hbase.sh时报Class path contains multiple SLF4J bindings.解决方法
1. 使用start-hbase.sh启动HBase时报Class path contains multiple SLF4J bindings.错误,原因是jar包冲突导致的.所以,对于和Hadoop ...