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实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Three.js基础学习教程
Nov 16 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
JS+CSS实现炫酷光感效果
Sep 05 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python用户管理系统的实例讲解
2017/12/23 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
七年级数学教学反思
2014/01/22 职场文书
上课迟到检讨书
2014/02/19 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
决心书格式范文
2015/09/23 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript