jQuery定义插件的方法


Posted in Javascript onDecember 18, 2015

有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法。

扩展jquery的时候。最核心的方法是以下两种:

$.extend(object) 可以理解为jquery添加一个静态方法

$.fn.extend(object) 可以理解为jquery实例添加一个方法

$.extend(object)

 例子:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();

定义jquery插件的基本结构

1.  定义作用域:

为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰,也不会污染到全局变量。

//step 定义JQuery的作用域
(function ($) {
})(jQuery);

2. 为插件添加扩展方法:

//step01 定义JQuery的作用域
(function ($) {
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

3. 设置默认值:

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
  }
})(jQuery);

其中:var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;如果用户没有设置默认值的属性,还是保留插件的默认值。

4. 支持jquery选择器:    

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    this.each(function () {
    });
  }
})(jQuery);

5 .支持JQuery的链接调用:

为了能达到链接调用的效果必须要把循环的每个元素return

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    //step 支持链式调用
    return this.each(function () {
    });
  }
})(jQuery);

6. 插件里的方法:

在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。

//step01 定义JQuery的作用域
(function ($) {
  //step03-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定义方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step03-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step4 支持JQuery选择器
    //step5 支持链式调用
    return this.each(function () {
      //step06-b 在插件里定义方法
      showLink(this);
    });
  }
})(jQuery);

通过以上内容给大家介绍了jQuery定义插件的方法,希望大家喜欢。

Javascript 相关文章推荐
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
js实现旋转木马效果
Mar 17 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
js实现三角形粒子运动
Sep 22 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 #Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
You might like
提取HTML标签
2006/10/09 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
详解Python中的多线程编程
2015/04/09 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
社团活动总结模板
2014/06/30 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
python实现过滤敏感词
2021/05/08 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
css3 文字断裂效果
2022/04/22 HTML / CSS