编写jquery常用插件的基本格式
写jquery插件需要明白的那些知识点
1.jquery中$是神马?$.fn又是神马?
稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知:
我们在jquery(1.8.3)源码中也能找到下面代码:
其实在jquery中$就是一个函数function,当我们执行$()时会得到一个jquery对象,得到的jquery对象的类型是object类型,而不是数组。除此之外$也是个对象,因为在$上面也可以定义方法和属性,比如常见的$.ajax。
而$.fn就是$的原型,,在源码中我们也能找到jQuery.fn = jQuery.prototype
jquery对象中的上百种方法就是定义在原型中,为什么定义在原型中?这就是js面向对象的重要知识了,可参考我的这篇文章 对于jquery这么多方法的库来说,方法定义在原型上极大的节省了内存。这里只需知道$.fn就是$的原型就行。
插件的写法
插件说白了就是为jquery库添加特定的方法,插件的形式一般开头为$.fn.extend 在源码中我们也能看到很多这样的例子:
所以一个常见的插件的基本样式应该如下(注释写的很详细,就不再一一赘述):
/*
插件名:
作者:
日期:等信息
*/ //一个匿名自执行函数,划分一个独立的作用域,不至于插件中的变量干扰jquery
;(function($){ //开始写上; 为防止代码压缩出错
//为jquery扩展方法,也就是插件的主体
$.fn.extend({ //方法名
"method" : function(opts){
//定义插件的默认参数
var default = {
width : //定义默认宽度
height : //定义默认高度
speed : //定义默认速度
//等等各种默认参数
}
//有些参数用户直接使用默认,有些参数用户要使用自己定义的
//自定义参数替换默认参数
//var option = $.extend(default,opts); //为什么不用此行代码?为了保护默认参数
//extend方法中opts会永久取代default,所以新加一个空对象{}来保存本次所使用的参数,下次使用default依然不变
var option = $.extend({},default,opts); this.each(function(){ //用each处理选择器选中的一个或多个dom节点
/*
此处是插件处理过程代码
*/
}); //最后别忘了保持jquery的链式操作(视情况而定)
return this; //返回被选中的元素节点,以供后续操作。
} }); })(jQuery)//传入jQuery是为更快查找,避免沿作用域链往上层查找,提高性能
常见的插件写法就是这样,据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可。
插件的命名和代码压缩
命名默认采用jquery.method.js (method代指插件名),除此之外最好弄一个压缩版:jquery.method.min.js 至于代码的压缩,包括去空格,去换行,其实还有方法名的简写操作,比如方法名叫removeAttr,很长,那么可以直接改写为一个字母a,这也是短化代码的方法,除此之外还有if else 转换为三木运算等压缩方式。
编写jquery常用插件的基本格式的更多相关文章
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- jQuery常用插件
jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- jQuery常用插件大全(9)ResponsiveSlides插件
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...
- jquery 常用插件
50款最有用的 jQuery 插件集锦<表单篇> 50款最有用的 jQuery 插件集锦<网页布局篇> 50款最有用的 jQuery 插件集锦<内容滑块篇> 50款 ...
- jQuery常用插件大全
1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...
- js及jquery常用插件
1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.j ...
随机推荐
- java中泛型上限,下限应用
v 一.程序中无形之中用到的泛型 import java.util.*; class Person implements Comparable<Person>{ String name; ...
- Java多线程系列--“JUC线程池”02之 线程池原理(一)
概要 在上一章"Java多线程系列--“JUC线程池”01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我们通过分析Th ...
- 决战JS
经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...
- 【Java基础】类和接口
Num1:使类和成员的可访问性最小化 要区别设计良好的模块与设计不好的模块,最重要的因素在于,这个模块对于外部的其他模块而言,是否隐藏其内部数据和其他实现细节.设计良好的模块会隐藏所有的实现细节,把它 ...
- Azure PowerShell (1) PowerShell整理
<Windows Azure Platform 系列文章目录> 把之前Azure ASM的PowerShell都整理好了. https://github.com/leizhang1984/ ...
- JS根据身份证号码算年龄
如果把身份证号码传到页面上,在前端页面获取年龄就需要用到JS脚本了: function GetAge(identityCard) { var len = (identityCard + "& ...
- vim黏贴自动增加tab的毛病
vim在ctrl + p的时候有可能会自动给你增加了个tab 很是郁闷 解决方法如下: :set noautoindent :set nosmartindent
- VMware安装Elementary OS 后不能上网问题解决方法
具体情况:之前在学校是通过有线网上网,VMware中的系统打开就可以直接连上网,现在回家图方便是通过无线路由器上网,发现虚拟机系统上不来网. 解决方法:控制面板->网络和Internet-> ...
- 动态dynamically变更母版_Layout页body标签css的class
这个功能演示是Insus.NET最近想实现的一个功能,就是动态dynamically变更母版_Layout页body标签的样式css的class. 很多视图共同一个母版_Layout页,但是某一个视图 ...
- C#反射技术概念作用和要点
反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...