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 弹出层组件(升级版)
May 12 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python 正确保留多位小数的实例
2018/07/16 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python实现飞机大战项目
2020/03/11 Python
pandas的resample重采样的使用
2020/04/24 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
C++程序员求职信范文
2014/04/14 职场文书
中华魂演讲稿
2014/05/13 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android