快速创建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, 300); }, false); win.addEventListener('pageshow', function (e) { if (e.persisted) { clearTimeout(h); h = setTimeout(setUnitA, 300); } }, false); setUnitA = function () { doc.style.fontSize = doc.clientWidth / 32 + '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等。
结束