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 相关文章推荐
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Django 开发环境配置过程详解
2019/07/18 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
初入社会应届生求职信
2013/11/18 职场文书
年会邀请函范文
2015/01/30 职场文书
党员转正意见怎么写
2015/06/03 职场文书
英语投诉信范文
2015/07/03 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
导游词之清晏园
2019/11/22 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python