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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JavaScript闭包和回调详解
Aug 09 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 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批量生成随机用户名
2008/07/10 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
使用javascript插入样式
2016/03/14 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python读取word文档的方法
2015/05/09 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python如何写出表白程序
2020/06/01 Python
python调用摄像头的示例代码
2020/09/28 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
中学生演讲稿
2014/04/26 职场文书
学党史心得体会
2014/09/05 职场文书
产品委托授权书范本
2014/09/16 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python