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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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新手上路(九)
2006/10/09 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php实现数据库的增删改查
2017/02/26 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
node.js的事件机制
2017/02/08 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
旅游项目开发策划书
2014/01/18 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
2015年春节标语口号
2014/12/09 职场文书
优秀员工事迹材料
2014/12/20 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书