//根据《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扩展、私有域、定义插件的基本步骤等知识,有需要的朋友可以看下
jQuery元素属性、jQuery元素内容、jQuery动态创建内容、jQuery删除节点、jQuery事件处理、jQuery文档...jQuery插件开发、jQuery对象级别的插件开发、jQuery类级别的插件开发、jQuery插件文件的引用、jQuery插件的使用...
这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: 代码如下:jQuery.fn.myPlugin ...
本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识,以及如何搭建开发环境;第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下
本书循序渐进地讲解了jquery高效开发的方法和技巧,内容包括jquery框架的设计模式和思路、sizzle选择器的构成和工作机制、dom文档操作、事件处理、动画设计、ajax异步通信、插件扩展和辅助工具等。 执行效率是...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
《jQuery高级编程》从开发人员的层次对jQuery提供了一个全面的介绍。...在掌握了坚实的基础知识之后,本书将继续介绍jQuery的一些高级主题,包括使用JavaScript进行插件开发、单元测试和jQuery库的其他一些高级特性。
jQuery内核详解与实践内容简介:本书循序渐进地讲解了jQuery高效开发的方法和技巧,内容包括jQuery框架的设计模式和思路、Sizzle选择器的构成和工作机制、DOM文档操作、事件处理、动画设计、Ajax异步通信、插件扩展...
第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中...
本书循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的...
其次详细讲解了 jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
, , 在掌握了坚实的基础知识之后,本书将继续介绍iQuery的一些高级主题,包括使用JavaScript进行插件开发、单元测试和iQuery库的其他一些高级特性。, , 《jQuery高级编程》着重介绍iQuery1.7.1的可用特性,但在相关...
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
和第8 章介绍了jQuery UI jQuery Mobile 及利用jQuery 强大的扩展能力开发自定义插件 随后的几章更 、 。 加深入地探讨了jQuery 的各种特性及一些高级技术 附录A 特别讲解了JavaScript 中闭包的概念 以及如 。 ...
其次详细讲解了 jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的目的。为使读者更...
其次详细讲解了 jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...