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[js]获取url参数的代码
Oct 17 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
javascript实现简单留言板案例
Feb 09 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高级对象构建 工厂模式的使用
2012/02/05 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python批量图片处理简单示例
2019/08/06 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
投资合作协议书范本
2014/04/17 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2014年会计工作总结
2014/11/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python