JQuery插件开发示例代码


Posted in Javascript onNovember 06, 2013

JQuery 插件开发:
类级别开发,开发新的全局函数
对象级别开发,给Jquery对象开发新方法
一、类级别开发 -定义全局方法

jQuery.foo = function() {  
    alert('This is a test.');  
};

采用命名空间,可以避免命名空间内函数的冲突。
jQuery.apollo={  
    fun1:function(){  
        console.log('fun1');  
    },  
    fun2:function(){  
        console.log('fun2');  
    }  
} 

二、对象级别开发 -定义jQuery对象方法 

(function($) {     
$.fn.pluginName = function() {   };   
})(jQuery);  
//插件通过这样被调用:  
$('#myDiv').pluginName(); 

接受options参数以控制插件的行为
(function($){  
    $.fn.fun2=function(option){  
        var defaultOption={  
            param1:'param1',  
            param2:'param2'  
        }  
        $.extend(defaultOption,option);  
        console.log(defaultOption);  
    }  
})(jQuery);  
$(function(){  
    //通过这样调用  
    $("body").fun2({  
        param1:'new Param1'  
    });  
}); 

保持私有函数的私有性
 (function($) {    
  // plugin definition    
  $.fn.hilight = function(options) {    
    debug(this);    
    // ...    
  };    
  // private function for debugging  
  //“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。  
  function debug($obj) {    
    if (window.console && window.console.log)    
      window.console.log('hilight selection count: ' + $obj.size());    
  };    
//  ...    
})(jQuery); 
Javascript 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
Express框架之connect-flash详解
May 31 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
javascript实现yield的方法
Nov 06 #Javascript
Javascript事件实例详解
Nov 06 #Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 #Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 #Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 #Javascript
浅析Js中的单引号与双引号问题
Nov 06 #Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 #Javascript
You might like
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
VsCode里的Vue模板的实现
2020/08/12 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python实现多人聊天室
2020/03/31 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
如何定义一个可复用的服务
2014/09/30 面试题
小学学雷锋活动总结
2014/04/25 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
国庆节标语大全
2014/10/08 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript