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插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- jQuery插件入门
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQ ...
- 不定义JQuery插件,不要说会JQuery 分类: JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- [转]不定义JQuery插件,不要说会JQuery
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
- 不定义JQuery插件,不要说会JQuery
转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
- DWZ(JUI) 教程 中如何整合第三方jQuery插件
Query插件一般是$(document).ready()中初始化 $(document).ready(function(){ // 文档就绪,初始化jQuery插件| }); // 或者或缩写形 ...
随机推荐
- js把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
最近在做项目的时候,需要把后台返回的时间转换成几秒前.几分钟前.几小时前.几天前等的格式:后台返回的时间格式为:2015-07-30 09:36:10,需要根据当前的时间与返回的时间进行对比,最后显示 ...
- linux下生成core dump文件方法
core 文件的简单介绍 当程序运行的过程中异常终止或崩溃,操作系统会将程序当时的内存状态记录下来,保存在一个文件中,这种行为就叫做Core Dump(中文有的翻译成“核心转储”).我们可以认为 co ...
- BZOJ4416 SHOI2013阶乘字符串(状压dp)
当n大到一定程度(>21)时一定无解,并不会证. 如果要取出一个排列,显然应该让每一位在序列中的位置尽量靠前.于是设f[S]表示存在S子集中这些字母所组成的所有排列的最短前缀的长度,枚举当前排列 ...
- 后缀数组 模板题 hdu1403(最长公共(连续)子串)
好气啊,今天没有看懂后缀树和后缀自动机 只能写个后缀数组发泄一下了orz #include <cstdio> #include <cstring> *; int wa[N], ...
- Citrix Netscaler负载均衡算法
Citrix Netscaler负载均衡算法 http://blog.51cto.com/caojin/1926308 众所周知,作为新一代应用交付产品的Citrix Netscaler具有业内领先的 ...
- Mybatis LIKE模糊查询
1.在代码中拼接好字符串后传入进来 2.使用CONCAT在xml中拼接字符串: <if test="queryParam.keyword != null"> AND b ...
- eclipse console输出有长度限制
抓取一个网页内容,然后打印到控制台,发现内容首部都没有了. String content = getResponseText("http://xxx.html"); System. ...
- 百度vue服务端渲染(ssr)有感
前端各种框架工具层次不穷,日新月异,越学越混乱了快 知乎上看到了一段回复,豁然开朗的感觉. Web 2.0时代最大的思想革命本质不是前后端分离,而是把网页当作独立的应用程序(app).前后端分离只是实 ...
- 查看jar包源码
1.Maven项目 如下图设置后,它会自动下载源文件,这样就能看到了 2.传统Java项目 2.1.安装 Jad 下载 Jad :http://varaneckas.com/jad/ 解压到任意目录即 ...
- 金山中学 rugular SRM 04 ——纪念我的第一次Ak
虽然只是一场比较简单的比赛 但奈何我也比较弱啊.... T1 一道计算概率的题目 T SRM 04 描述 给个长度为 n 的数列,每次操作能将数列打乱(RandomShuffle),问在期望下需要多少 ...