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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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者的疑难问答(2)
2006/10/09 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python如何实现强制数据类型转换
2019/11/22 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
学习新党章思想汇报
2014/01/09 职场文书
社区活动邀请函范文
2014/01/29 职场文书
合同意向书范本
2014/07/30 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
box-shadow单边阴影的实现
2023/05/21 HTML / CSS