jQuery - 编写jQuery插件的基本形式(下)
2016-02-03 16:11
471 查看
全局方法扩展的是jQuery对象,而对象实例方法扩展的是jQuery.fn对象,jQuery.fn是jQuery.prototype的别名。
编写jQuery对象实例方法,需要注意以下几个问题:
1、对象方法的上下文
在任何插件方法内部,关键字this引用的都是当前的jQuery对象。因而,可以在this上面调用任何内置的jQuery方法,或者提取它包含的DOM节点并操作该节点。
2、隐式迭代
jQuery的选择符表达式可能会匹配零、一个或多个元素,因此在设计插件时,必须考虑到所有这些可能的情况。要在无论匹配多个元素的情况下都保证行为正确,最简单的方式就是始终在方法的上下文上调用each()方法,这样就会执行隐式迭代。在调用的each()方法内部,this依次引用每个DOM元素。
this的含义:在对象方法体内,关键字this引用的是一个jQuery对象,但在每次调用的each()方法中,this引用的则是一个DOM元素。
3、方法连缀
通常我们会在插件方法中使用return关键字返回当前的jQuery对象,以支持对当前对象执行其他操作,即支持方法连缀。
4、参数映射
参数映射要比参数列表更加友好,映射会为每个参数提供一个有意义的标签,同时也让参数次序变得无关紧要。
5、默认参数值
随着方法的参数逐渐增多,始终指定每个参数并不是必须的,一组合理的默认值可以增强插件接口 的易用性,以映射作为参数可以为未指定的参数自动传入默认值。
6、回调函数
回调函数可以极大地增加插件的灵活性,要在方法中使用回调函数,需要接受一个函数对象作为参数,然后在方法中适当的位置上调用该函数。
7、可定制的默认值
通过为方法参数设定合理的默认值,能够显著改善用户使用插件的体验。但是,如果有脚本多次调用插件,每次调用都要传递一组不同于默认值的参数,那么通过定制默认值就可以减少很多不必要的代码量。要支持默认值的可定制,需要把它们从方法中移出,然后放到外部代码可以访问的地方。
编写jQuery对象实例方法,需要注意以下几个问题:
1、对象方法的上下文
在任何插件方法内部,关键字this引用的都是当前的jQuery对象。因而,可以在this上面调用任何内置的jQuery方法,或者提取它包含的DOM节点并操作该节点。
2、隐式迭代
jQuery的选择符表达式可能会匹配零、一个或多个元素,因此在设计插件时,必须考虑到所有这些可能的情况。要在无论匹配多个元素的情况下都保证行为正确,最简单的方式就是始终在方法的上下文上调用each()方法,这样就会执行隐式迭代。在调用的each()方法内部,this依次引用每个DOM元素。
this的含义:在对象方法体内,关键字this引用的是一个jQuery对象,但在每次调用的each()方法中,this引用的则是一个DOM元素。
3、方法连缀
通常我们会在插件方法中使用return关键字返回当前的jQuery对象,以支持对当前对象执行其他操作,即支持方法连缀。
4、参数映射
参数映射要比参数列表更加友好,映射会为每个参数提供一个有意义的标签,同时也让参数次序变得无关紧要。
5、默认参数值
随着方法的参数逐渐增多,始终指定每个参数并不是必须的,一组合理的默认值可以增强插件接口 的易用性,以映射作为参数可以为未指定的参数自动传入默认值。
6、回调函数
回调函数可以极大地增加插件的灵活性,要在方法中使用回调函数,需要接受一个函数对象作为参数,然后在方法中适当的位置上调用该函数。
(function($) { $.fn.objMethod = function(opts) { var defaults = { arg1: "", arg2: "", callback: function() { //do something ... } }; var options = $.extend(defaults, opts); return this.each(function() { var $el = $(this); //logical code ... }); }; })(jQuery);
7、可定制的默认值
通过为方法参数设定合理的默认值,能够显著改善用户使用插件的体验。但是,如果有脚本多次调用插件,每次调用都要传递一组不同于默认值的参数,那么通过定制默认值就可以减少很多不必要的代码量。要支持默认值的可定制,需要把它们从方法中移出,然后放到外部代码可以访问的地方。
//定义 (function($) { $.fn.objMethod.defaults = { arg1: "", arg2: "", callback: function() { //do something ... } }; $.fn.objMethod = function(opts) { var options = $.extend({}, $.fn.objMethod.defaults, opts); return this.each(function() { var $el = $(this); //logical code ... }); }; })(jQuery); //调用 $.fn.objMethod.defaults.arg1 = "Hello"; //全局性修改默认参数值 $("#elId").objMethod({ arg2: "World" });
相关文章推荐
- jQuery插件地址汇总
- JQuery Autocomplete实战
- jquery 处理返回数据 html json xml
- input
- jQuery 操作列表批量删除数据
- jquery实现替代iframe的功能
- jQuery原理系列-Dom Ready
- jQuery操作checkbox详解
- jQuery原理系列-工具函数
- jQuery.ajax()的相关参数及使用
- jquery的插件spinner的一些使用细节
- jquery form表单提交成功,回调方法
- 锋利的JQuery —— JQuery性能优化
- jquery获得select option的值 和对select option的操作(紫寒)
- JQuery验证手机号&电话号码
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
- 国内Jquery CDN
- jQuery基础学习(二)
- jQuery $.each用法
- [置顶] 基于JQuery UI的联想输入 自动补全