详解jQuery插件开发方式


Posted in Javascript onNovember 22, 2016

jQuery插件开发 

一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

一、jQuery扩展

1、$.extend(object)

类似于.Net的扩展方法,用于扩展jQuery。然后就可以用$.的方式调用。

$(function(){
 $.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } });
 $.fun1();
 })

2、$.fn.extend(object)

扩展jQuery的对象。

$.fn.extend({ fun2: function () { alert("执行方法2"); } });
 $("#id1").fun2();

可以用google来看看:

详解jQuery插件开发方式

上面的写法等同于:

$.fn.fun2 = function () { alert("执行方法2"); }
 $(this).fun2();

二、私有域

其定义方式如下:

(function ($) { })(jQuery);
//相当于
var fn = function (xxoo) { };
fn(jQuery);

以下代码弹出123。

$(function(){
 var fn = function (xxoo) { };
 fn(alert(123));
 })

三、定义插件的基本步骤

1、定义作用域

开发一个jQuery插件,首先要把插件的代码与外界隔离开来,外部的代码不允许直接访问插件内部的代码,插件内部的代码也不影响外部。

    //步骤1 定义插件私有作用域

(function ($) {

 })(jQuery);

 这样就能保证插件内部的代码与外界隔离了。

2、扩展jQuery

定义了作用域之后,为了能够让外部调用,就需要将插件扩展到jQuery。

//步骤1 定义私有作用域
 (function ($) {
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 
 }
 })(jQuery);

    3、默认值

定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 })(jQuery);

     4、支持jQuery选择器

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 this.each(function () {

 });
 })(jQuery);

    5、支持jQuery的链式调用

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {

 });
 })(jQuery);

     6、插件内部方法

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };

 //步骤6 在插件里定义函数
 var MyFun = function (obj) {
 alert(obj);
 }

 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {
 //步骤6 在插件里定义函数
 MyFun(this);
 });
 })(jQuery);

    由于作用域关系,步骤6的私有函数目前允许的插件内部使用。

 以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
You might like
php强制下载类型的实现代码
2011/04/21 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python中super的用法实例
2015/05/28 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Django发送邮件功能实例详解
2019/09/02 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python基于opencv 实现图像时钟
2021/01/04 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
Android面试题附答案
2014/12/08 面试题
打架检讨书400字
2014/01/17 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
用人单位聘用意向书
2015/05/11 职场文书
小学科学课教学反思
2016/02/23 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技