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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
详解JavaScript常量定义
Jan 03 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
js canvas实现简单的图像扩散效果
Jun 28 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
大学毕业生的自我鉴定
2013/11/30 职场文书
研究生毕业鉴定
2014/01/29 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
Redis三种集群模式详解
2021/10/05 Redis