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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 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 中英文语言转换类代码
2011/08/11 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php修改数组键名的方法示例
2017/04/15 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python字符串逐字符或逐词反转方法
2015/05/21 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
单位实习证明怎么写
2014/01/17 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android