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插件| }); // 或者或缩写形 ...
随机推荐
- 一道前端面试题:定义一个方法将string的每个字符串间加个空格返回,调用的方式'hello world'.spacify();
偶然在群里看到了这道题:定义一个方法将string的每个字符串间加个空格返回,调用的方式'hello world'.spacify(); 这道题主要是对JavaScript对象原型的考察.
- Visual Studio调试之符号文件
原文链接地址:http://www.cnblogs.com/killmyday/archive/2009/10/14/1582882.html 前面在不能设置断点的检查步骤和Visual Studio ...
- BZOJ 4777 Usaco2017 Open Switch Grass Kruskal+替罪羊树+权值线段树
这道题首先可以看出答案一定是一条边,而且答案一定在最小生成树上,那么我们就可以在这个最小生成树上维护他与异色儿子的边最小值,所以我们就可以已通过Kruskal和一棵平衡树来解决,时间复杂度是O(n*l ...
- poj 2104 (主席树写法)
//求第K的的值 1 #include<stdio.h> #include<iostream> #include<algorithm> #include<cs ...
- JAVA中string.replace()和string.replaceAll()的区别及用法
乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),replaceall替换所有的字符,其实大不然,只是替换的用途不一样. public String r ...
- hadoop更换硬盘
hadoop服务器更换硬盘操作步骤(datanode hadoop目录${HADOOP_HOME}/bin 日志位置:/var/log/hadoop)1.登陆服务器,切换到mapred用户,执行 ...
- 7月18号day10总结
今天学习过程和小结 今天学会了用git从GitHub上克隆代码然后打包成jar包,然后在idea程序中引入这个jar包的依赖来使用jar包中的程序. 通过这个中的网址: 在Git Bash Here中 ...
- SLF4J 与Log4J
为什么要使用SLF4J而不是Log4J 每一个Java程序员都知道日志对于任何一个Java应用程序,尤其是服务端程序是至关重要的,而很多程序员也已经熟悉各种不同的日志库如java.util.loggi ...
- Java Error: Failed to validate certificate. The application will not be executed
Hi, last week a customer had the problem that he wants to connect to the administration interface of ...
- css中文本超出部分省略号代替
p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...