jQuery插件主要有两种扩展方式
2016-02-18 15:27
447 查看
jQuery插件主要有两种扩展方式:
扩展全局函数方式。扩展对象方法方式。
扩展全局函数方式
扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义。定义格式为:jQuery.extend(function(){ pluginName:function(){ // 这里写实际代码 }; });
这样定义的代码将直接扩展jQuery本身,通过$.pluginName()来进行调用。
定义插件时,需要注意传入的参数。由于这时插件运行在jQuery类范围中,所以传入的参数将是页面级全局的。
扩展对象方法方式
扩展对象方法方式定义的插件,即对象级别插件,是插件中使用最广泛的定义方式。对象级别插件通过$.fn.extend或者$.fn.pluginName来进行定义。推荐使用的定义格式为:(function($){ var defaultOptions={}; $.fn.pluginName=function(option){ var pluginMethods={ init:function(option){ var option=$.extend(defaultOptions,option); }, methods1:function(){}, methods2:function(){} }; if(pluginMethods[option]){ pluginMethods[option].apply(this,Array.prototype.slice.call(arguments,1)); }else if(typeof option=='object'){ pluginMethods.init.apply(this,arguments); }else{ $.error("Some error."); } } })(jQuery);
这种推荐的插件定义格式可以支持$('selector').pluginName('methods1',args)格式的方法调用,同时也可以支 持$('selector').pluginName({})格式的初始化方法。pluginMethods还可以定义到$.fn.pluginName 外面,但是这样传入的参数就会变成插件级全局的,会影响页面中第二个及以后的插件的使用。所以一般可定义在$.fn.pluginName内部,可方便支 持多个位置使用插件。
通过定义$.fn.pluginName.method形式的方法,可以直接将插件中的方法暴露出来,供外部访问。此外,$.fn.pluginName的定义中的this指的是选择器所选择的对象,可以直接使用,而不用$(this)的方式。
一些常用方法的解释
Array.prototype.slice是用来将类似于数组的参数按照数组的方式切割开,其数字表示返回值从何位置开始取。prototype中的call和apply在意义上是相同的,第一个参数的意义也是相同的,只是call的第二个参数是作为参数传入,而apply则是 将多个参数组合为一个数组传入。不论A.prototype.method.call(B)还是 A.prototype.method.apply(B),都表示将B对象看作A对象来执行method。
相关文章推荐
- 页面的布局的百分比与像素
- C#集合在前端通过jQuery生成json树代码
- jquery easyui的datagrid在初始化的时候会请求两次URL?
- jquery 表单验证之 $.trim()
- jQuery之字体大小的设置
- JQuery 表格 隔行换色 和鼠标滑过的样式
- 基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
- jquery ajax 传动态值(错误试调)
- jquery的autocomplete在firefox下不支持中文输入法的bug
- jquery 拓展函数集
- jQuery自学教程(一)
- jQuery图片上传前先在本地预览
- window onload || jquery $()
- js-jQuery对象与dom对象相互转换
- jQuery 添加删除同级或不同级的class
- JQuery实现的 checkbox 全选、反选。
- jQuery之防止冒泡事件
- 导入jquery
- jquery中CSS()方法和attr方法的区别
- jQuery 获取 table 行数