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+thickbox仿校内登录注册框
Jun 07 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
numpy数组广播的机制
2019/07/12 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python安装sklearn模块的方法详解
2020/11/28 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
优秀班组长事迹
2014/05/31 职场文书
生日宴会策划方案
2014/06/03 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
民政工作个人总结
2015/02/28 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python