介绍

什么是插件

  插件我们见得很多了,比如浏览器上我们会安装一些去除广告的插件、美化页面的插件等等。 在前端,我们也常常写一些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插件的更多相关文章

  1. 快速开发 jQuery 插件的 10 大技巧(转)

    1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...

  2. 快速开发 jQuery 插件的 10 大技巧(转)

    转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...

  3. 快速开发 jQuery 插件的 10 大技巧

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...

  4. 快速开发jQuery插件的10大技巧

    原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...

  5. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  6. 2014优秀的好用的20款免费jQuery插件推荐

    2013 年最好的 20 款免费 jQuery 插件,世界买家网 www.buyerinfo.biz在这里分享给大家 这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现 今互联网市场上提 ...

  7. 2013 年最好的 20 款免费 jQuery 插件

    2013 年最好的 20 款免费 jQuery 插件 oschina 发布于: 2014年01月11日 (8评) 分享到  新浪微博腾讯微博 收藏+99 互联网上面有很多 jQuery 插件,这里我们 ...

  8. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  9. jQuery 插件写法2

    转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...

随机推荐

  1. Glib之主事件循环

    介绍 GLib和GTK+应用的主事件循环管理着所有事件源.这些事件的来源有很多种比如文件描述符(文件.管道或套接字)或超时.新类型的事件源可以通过g_source_attach()函数添加. 为了让多 ...

  2. [CentOS7] timedatectl设置时区

    查看当前时区日期等配置 显示可选时区 选择时区

  3. NSPoint 位置

    前言 结构体,这个结构体用来表示事物的一个坐标点. typedef CGPoint NSPoint; struct CGPoint { CGFloat x; CGFloat y; }; typedef ...

  4. [Study notes] To programing RGBD-SLAM together from Gaoxiang

    Solve CMake Error in CMakeLists.txt (FIND_PAKAGE): CMake Error at src/CMakeLists.txt:5 (FIND_PACKAGE ...

  5. 安卓手机牛逼软件Termux中安装Archlinux,安装Jdk

    说出来你可能不信,手机上居然装了两个linux系统,和真实的linux有些许些差别. 首先安装了Termux以后你发现,好多linux常用功能都有,什么Pyhton,gcc,g++,ruby,Php, ...

  6. 51nod1448(yy)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1448 题意: 中文题诶~ 不过要仔细看题, 原来颜色是被覆盖 ...

  7. 51nod1244 莫比乌斯函数之和(杜教筛)

    题面 传送门 题解 我--我忘记把预处理的块的大小调成\(n^{\frac{2}{3}}\)了--(仰天) 首先\(\mu*1=e\) 然后杜教筛就行了 //minamoto #include< ...

  8. MongoDB3.2(C#版) CRUD

    Retrieve(检索.查询): 分两种(一种是插入对象没有自定义; 第二种就是自定义插入对象) 这两种情况下的区别就是插入数据库中的文档类型不一样,一个是BsonDocument,一个是自定义对象( ...

  9. 数据结构31:树(Tree)详解

    复制广义表数据结构中的树 树是数据结构中比较重要也是比较难理解的一类存储结构.本章主要主要围绕二叉树,对树的存储以及遍历做详细的介绍,同时还会涉及到有关树的实际应用,例如构建哈弗曼编码等. 由于树存储 ...

  10. Django 06 Django模型基础1(ORM简介、数据库连接配置、模型的创建与映射、数据的增删改查)

    Django 06 Django模型基础1(ORM简介.数据库连接配置.模型的创建与映射.数据的增删改查) 一.ORM系统 #django模型映射关系 #模型类-----数据表 #类属性-----表字 ...