详解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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
JQuery实现自定义对话框的代码
Jun 15 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
交通安全寄语大全
2014/04/08 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang