jquey插件开发
1.概述
jquery插件开发的主要方法有三种:
1、通过$.extend()来扩展jQuery,即在jQuery命名空间下扩展属性,直接在$对象下调用,不需要再dom下调用,也无法在dom元素下调用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="text">测试</div> </body> <script src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> //jQuey插件开发方法1,在jQuery命名空间下新增属性 $.extend({ sayHello: function(name){ alert(name); } }); $.sayHello('gaoxiong'); //下面两者都相等,说明 $.fn = $.prototype console.log($.fn); console.log($.prototype); //下面说明了通过 $.extend来扩展jQuery的方法,并不是扩展jquery的原型对象 console.log($.fn.sayHello);//undefined $('#test').sayHello('gaoxiong'); //报错 </script> </html>
用途:该方法适合用来定义一些辅助方法,类似与$.ajax()等非操作dom元素的方法,为什么时辅助方法?因为现在jquery被利用的主要目的就是操作dom。但这种方式无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上,还是需要使用第二种开发方式。
2、$.fn.extend方法扩展 $.prototype
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1 id="h1">测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //jQuery插件方法二:$.fn.extend(),顾名思义,该方法是在jQuery的原型对象上新增一个方法 $.fn.extend({ returnThis: function(){ return this; } }); //可以得出,上面的this 是一个集合(类似于数组),集合中包含了所有匹配的元素(这些元素为原生JS dom元素) console.log($('#h1').returnThis()); console.log($('h1').returnThis()); //将会打印一个原生dom console.log($('h1').returnThis()[0]) //综述:在自定义插件内部中的 this 可以理解为 匹配的元素的集合(jQuery的包装对象),这个集合的原型指向$.fn //自定义一个设置字体颜色插件 $.fn.extend({ setcolor: function(colorName){ this.css('color', colorName); } }); //所有h1标签变为红色 $('h1').setcolor('red'); </script> </html>
3、关于插件内this的指向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li> <a href="http://www.webo.com/liuwayong">我的微博</a> </li> <li> <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a> </li> <li> <a href="http://wayouliu.duapp.com/">我的小站</a> </li> </ul> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //上一节,我们已经知道this 指代jQuery选择器返回的集合(包装对象) //$.each()方法可以处理合集中的每个元素,但在each方法内部,this指的是普通的DOM元素,如果调用jQuery的方法那就需要用$来重新包装一下 //案例,我希望在每个a标签后面显示url地址 $.fn.extend({ showUrl: function(){ this.each(function(){ console.log(this);//原生dom元素 $(this).append($(this).attr('href')); }) } }); $('a').showUrl(); //使用jQuery命名空间时, this的指向为一个函数(包装dom为jQuery包装对象) $.extend({ consoleThis: function(){ console.log(this); } }) $.consoleThis(); </script> </html>
4、支持链式调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>测试</h1> <h1>测试</h1> <h1>测试</h1> <h2>测试</h2> <h2>测试</h2> <h2>测试</h2> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //jQuery中一个非常简便的方法是支持链式调用 $.fn.extend({ setColor: function(colorName){ //如下的这种写法为便捷写法 return this.each(function(){ $(this).css('color', colorName) }) } }); $('h1').setColor('red').css('background', 'blue'); //未设置链式调用(未在插件中返回this) $.fn.extend({ setFontSize: function(size){ this.css('font-size', size); } }) //因为未在插件中返回this,那么$('h2').setFontSize('50px')为一个undefined,如下会报错 $('h2').setFontSize('50px').css('background', 'yellow'); </script> </html>
5、设置默认参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>测试</h1> <h1>测试</h1> <h2>测试</h2> <h2>测试</h2> </body> <script src='lib/jquery-1.8.3.min.js'></script> <script type="text/javascript"> //设置默认参数,先学会$.extend(obj1, obj2) var DEFAULTS = { age: 25, name: 'gaoxiong' }; var options = { age: 24, name: 'jiaojiao' }; var settings = $.extend(DEFAULTS, options); console.log(settings);//age=>24, name=>jiaojiao console.log(options);//不变 console.log(DEFAULTS);//与setting一样 $.fn.extend({ setColor: function(options){ var defaults = { fontSize: '50px', color: 'blue' }; var settings = $.extend(defaults, options); return this.css(settings); } }); $('h1').setColor(); $('h2').setColor({ color: 'red', fontSize: '12px' }) </script> </html>
6、保护默认参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>测试</h1> <h1>测试</h1> <h2>测试</h2> <h2>测试</h2> </body> <script src='lib/jquery-1.8.3.min.js'></script> <script type="text/javascript"> //保护好默认参数,在一个插件中,默认参数可能被使用多次,上述方法会修改默认配置参数 //$.extend({}, defaults, options)避免了默认配置的修改 var defaults = { age: 25, name: 'gaoxiong' }; var options = { age: 25, name: 'jiaojiao' }; var setiings = $.extend({}, defaults, options); console.log(setiings); // name => jiaojiao console.log(defaults); // name => gaoxiong ,并没有修改defaults </script> </html>
7、面向对象的插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>测试</p> <p>测试</p> <p>测试</p> <div>测试</div> <div>测试</div> <div>测试</div> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //面向对象的插件开发,当项目变大或者版本迭代时,方便维护,结构清晰化 //定义一个类 var Beautifier = function(element, options){ this.$element = element; this.defualts = { color: 'red', fontSize: '20px', textDecoration: 'none' }; this.options = $.extend({}, this.defualts, options); }; //添加原型方法 Beautifier.prototype = { beautify: function(){ return this.$element.css({ color: this.options.color, fontSize: this.options.fontSize, textDecoration: this.options.textDecoration }) } }; //将方法挂载到$.fn $.fn.extend({ beautify: function(options){ return this.each(function(){ new Beautifier($(this), options).beautify(); }) } }) //使用 $('p').beautify().css('background', 'blue'); $('div').beautify({ color: 'green', fontSize: '100px', textDecoration: 'decoration' }) </script> </html>
8、命名空间变量污染
不仅仅是jQuery插件的开发,我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间,常用的方法是 用自调用匿名函数包裹你的代码。
匿名函数避免命名空间污染的原理:JavaScript中无法用花括号方便地创建作用域,但函数却可以形成一个作用域,域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中,那么就不会污染全局命名空间,同时不会和别的代码冲突。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>测试</p> <p>测试</p> <p>测试</p> <div>测试</div> <div>测试</div> <div>测试</div> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> (function(){ var Beautifier = function(element, options){ this.$element = element; this.defualts = { color: 'red', fontSize: '20px', textDecoration: 'none' }; this.options = $.extend({}, this.defualts, options); }; Beautifier.prototype = { beautify: function(){ return this.$element.css({ color: this.options.color, fontSize: this.options.fontSize, textDecoration: this.options.textDecoration }) } }; $.fn.extend({ beautify: function(options){ return this.each(function(){ new Beautifier($(this), options).beautify(); }) } }) })(); $('p').beautify().css('background', 'blue'); $('div').beautify({ color: 'green', fontSize: '100px', textDecoration: 'decoration' }) </script> </html>
9、将系统变量以参数形式传递到插件内部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script src="lib/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //经过我前面8小节的复习,开发插件好像已经完美了,实际上还有一些细节需要处理 //1. 将这段代码放到页面后,前面别人写的代码没有用分号结尾 //2. 前面的代码将window, undefined等这些系统变量或者关键字修改掉了 //第一种情况 //别人的代码,这里没有使用分号结尾 var foo = function(){ } //我写的代码 ;(function(){ alert('Hello!'); })(); //原因:充当自调用匿名函数的第一对括号,与上面别人定义的函数相连,导致组成希望的两个语句 组成了一个语句,出现语法错误 //解决方法:在匿名函数包裹的圆括号前加分号 //第二种情况:将系统变量以参数形式传递到插件内部。这样做之后: //1. window等系统变量在插件内部就有了一个局部的引用,可以提高访问速度,会有些许性能的提升 //2. 而至于这个undefined,为了得到没有被修改的undefined,我们并没有传递这个参数,但却在接收时接收了它,因为实际并没有传,所以‘undefined'那个位置接收到的就是真实的'undefined'了。 //其实上述两个解决办法,在jQuery这个库中本来就有使用到 //正式版本:一个安全,结构良好,组织有序的插件编写完成。 ;(function($, window, document, undefined){ alert('Hello!'); })(jQuery, window, document); </script> </html>
10、代码编写规范
1、变量定义
- 做法:把将要使用的变量名用一个var关键字一并定义在代码开头,变量名间用逗号隔开
- 原因:
- 一是便于理解,了解下面的代码会用到哪些变量,同时代码显得整洁且有规律,也方便管理,变量定义与逻辑代码分开。
- 二是因为JavaScript中所有变量及函数名会自动提升,也称之为JavaScript的Hoist特性,即使你将变量的定义穿插在逻辑代码中,在代码解析运行期间,这些变量的声明还是被提升到了当前作用域最顶端的,所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。
2、变量及函数命名
- 做法:一般使用驼峰命名法(CamelCase),即首个单词的首字母小写,后面单词首字母大写,比如 showButton。
3、常量命名
- 做法:对于常量,所有字母采用大写,多个单词用下划线隔开,比如WIDTH=100,BRUSH_COLOR='#00ff00'。
4、当变量为jQuery类型时
- 当变量是jQuery类型时,建议以$开头,开始会不习惯,但经常用了之后会感觉很方便,因为可以很方便地将它与普通变量区别开来,一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法,比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它,并且与其他变量容易区分开来。
5、引号的使用
- 引号的使用:一般HTML代码里面使用双引号,而在JavaScript中多用单引号。