//根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种: //(1)通过$.extend()来扩展jQuery //(2)通过$.fn 向jQuery添加新的方法 //(3)通过$.widget()应用jQuery UI的部件工厂方式创建 //通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。 //第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性, //比如插件的状态信息自动保存,各种关于插件的常用方法等,非常贴心,这里不细说。 //而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。 //所以我们调用通过$.extend()添加的函数时 //直接通过$符号调用($.myfunction()) //而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。 $.extend({ sayHello:function(name){ console.log('Hello,' + (name ? name : 'Dude') + '!'); } }); $.extend({ log:function(message){ var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1,// jquery 中月份是从 0 开始的 d = now.getDay(), h = now.getHours(), m = now.getMinutes(); s = now.getSeconds(), time = y + '/' + m + '/' + d + '/' + h + ':' + m + ':' + s; console.log(time + ' My App: ' + message); } }); $.fn.myPlugin = function(options){ var defaults = { 'color':'red', 'fontSize':'12px' }; //当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。 //同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。 //利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象, //同时将接收来的参数对象合并到默认对象上, //最后就实现了用户指定了值的参数使用指定的值, //未指定的参数使用插件默认值。 // var settings = $.extend(defaults,options); //一个好的做法是将一个新的空对象做为$.extend的第一个参数, //defaults和用户传递的参数对象紧随其后, //这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。 var settings = $.extend({},defaults, options); return this.css({ 'color':settings.color, 'fontSize':settings.fontSize }); }; //面向对象的插件开发 //定义Beautifier的构造函数 var Beautifier = function(ele,opt){ this.$element = ele, this.defaults = { 'color':'red', 'fontSize':'12px', 'textDecoration':'none' }, this.options = $.extend({},defaults,opt); }; //定义Beautifier的方法 Beautifier.prototype = { beautify:function(){ return this.$ellement.css({ 'color':this.options.color, 'fontSize':this.options.fontSize, 'textDecoration':this.options.textDecoration }); } }; //在插件中使用Beautifier对象 $.fn.beautifyPlugin = function(options){ var beautifier = new Beautifier(this,options); return beautifier.beautify(); }; //一个好的做法是始终用自调用匿名函数包裹你的代码, //这样就可以完全放心,安全地将它用于任何地方了,绝对没有冲突。 //我们知道JavaScript中无法用花括号方便地创建作用域, //但函数却可以形成一个作用域,域内的代码是无法被外界访问的。 //如果我们将自己的代码放入一个函数中,那么就不会污染全局命名空间, //同时不会和别的代码冲突。 ;(function($, window, document,undefined) { //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt); }; //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } }; //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); }; })(jQuery, window, document); //关于变量定义及命名 //现在谈谈关于变量及方法等的命名,没有硬性规定,但为了规范,遵循一些约定还是很有必要的。 //变量定义:好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头,变量名间用逗号隔开。原因有二: //一是便于理解,知道下面的代码会用到哪些变量,同时代码显得整洁且有规律,也方便管理,变量定义与逻辑代码分开; //二是因为JavaScript中所有变量及函数名会自动提升,也称之为JavaScript的Hoist特性,即使你将变量的定义穿插在逻辑代码中,在代码解析运行期间,这些变量的声明还是被提升到了当前作用域最顶端的,所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然,再次说明这只是一种约定,不是必需的。 //变量及函数命名 一般使用驼峰命名法(CamelCase),即首个单词的首字母小写,后面单词首字母大写,比如resultArray,requestAnimationFrame。 //对于常量,所有字母采用大写,多个单词用下划线隔开,比如WIDTH=100,BRUSH_COLOR='#00ff00'。 //当变量是jQuery类型时,建议以$开头,开始会不习惯,但经常用了之后会感觉很方便,因为可以很方便地将它与普通变量区别开来, //一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法,比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它,并且与其他变量容易区分开来。 //引号的使用:既然都扯了这些与插件主题无关的了,这里再多说一句, //一般HTML代码里面使用双引号,而在JavaScript中多用单引号,比如下面代码所示: var name = 'Wayou'; document.getElementById('example').innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号,JavaScript中保持单引号 //一方面,HTML代码中本来就使用的是双引号, //另一方面,在JavaScript中引号中还需要引号的时候, //要求我们单双引号间隔着写才是合法的语句,除非你使用转意符那也是可以的。 //再者,坚持这样的统一可以保持代码风格的一致,不会出现这里字符串用双引号包着,另外的地方就在用单引号。
Jquery 插件开发的一点知识
猜你喜欢
转载自lihongtai.iteye.com/blog/2220584
今日推荐
周排行