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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
swiper4实现移动端导航切换
Oct 16 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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与XML联手进行网站编程代码实例
2008/07/10 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
layui分页效果实现代码
2017/05/19 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python调用API实现智能回复机器人
2018/04/10 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python实现点对点聊天程序
2018/07/28 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python类的继承super相关原理解析
2020/10/22 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
公务员试用期满考核材料
2014/05/22 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
义卖募捐活动总结
2015/05/09 职场文书
初中物理教学反思
2016/02/19 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers
redis lua限流算法实现示例
2022/07/15 Redis