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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vue-router 中 meta的用法详解
Nov 01 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 email邮箱正则
2008/10/08 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
javascript中常用编程知识
2013/04/08 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js控制frameSet示例
2013/09/10 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
详解Python文件修改的两种方式
2019/08/22 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
英文请假条
2014/04/11 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
党的生日活动方案
2014/08/15 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers