jQuery插件开发的准备

简介:
在开发jquery插件之前,需要有下面的准备工作。
1. 定义全局变量。就是可以使用“jQuery.methodName()”形式使用的函数


/* 
  定义新的全局函数 
  可以以jQuery.func1()形式,也可以以$.func1() 的形式调用 
*/
 
jQuery.func1 = function(){ 
    alert( "this is function func1()----------"); 
  } 
    
/* 
  带参数的函数 
*/
 
jQuery.func2 = function(param){ 
    alert( "this is function func2()----"+param+ "----"); 
  } 
    



$.func3 =  function(){ 
  alert( "this is function func3()----------");    


/* 
覆盖了func1() 
*/
 
$.func1 =  function(){ 
  alert( "this is function func1() override----------");    


/* 
也覆盖了前面已经定义的func1(),即使参数列表不一样,在JS中不存在重载的说法 
*/
 
$.func1 =  function(param){ 
  alert( "this is function func1() override--"+param+ "-------");    


/*------------------------------------ 

第2种声明全局函数 
可能会出现与其他插件,函数名冲突的危险 
------------------------------------*/
 

jQuery.extend({ 
      func4: function(){ 
        alert( "this is named func4() defined    by extend");    
      }, 
        
      func5: function(param){ 
        alert( "this is named func5(param) defined    by extend and parma ="+param);    
      }    
            
         }); 

/* 
---------------------------------------------------------- 
第3种声明全局函数,可以防止包名冲突 
调用形式 
  jQuery.myplugin.func6(); 
  jQuery.myplugin.func7('我是个参数'); 
---------------------------------------------------------- 
*/
 

jQuery.myplugin = { 
  func6: function(){ 
    alert( "this is function named func6() by jQuery.myplugin");    
  }, 
  func7: function(param){ 
      alert( "this is function named func7(param) by jQuery.myplugin and param="+param);    
  } 


/* 
第4种声明全局函数,和第三种效果一样 

*/
 
jQuery.myplugin.func8 =  function(){ 
  alert( "this is function named func8() by jquery.myplugin.func8--------");    
}
 
 
2.声明对象的方法
扩展对象的内置方法,调用形式:obj.methodName()。其中obj 为jq对行啊,methodName为函数名称。
/* 
声明jQuery 对象的方法 
*/
 

jQuery.fn.func9 =  function(){ 
    alert( "func9() start---------"+ this); 
  } 

/* 应该返回jquery 对象,支持连缀功能*/ 
jQuery.fn.func10 =  function(){ 
   return  this.each( function(){ 
    alert( "func10() start---------"+ this); 
  }) 


// 只能使用defaults,不能使用其他标记 
jQuery.fn.func11 =  function(parameters){ 
  defaults ={ 
    aString: "byebye"
    aNumber:250        
  }; 
    
  jQuery.extend(defaults,parameters); 
    
  alert( "aString="+defaults.aString+ "     aNumber="+defaults.aNumber); 
    
}
注意jquery 对象环境。有时候jquery 引用对象是个数组,可以通过隐式迭代来防止该情况发生,比如方法func10。
还要注意方法连缀,防止破坏破坏作用发生。可以使用pushStack、 end 方法实现(不太明白)。
在参数传递过程中,注意extend方法的使用,该方法主要作用是为了简化继承。而且extends 目标对象只能是 defaults,不能是其他关键字。



本文转自 randy_shandong 51CTO博客,原文链接:http://blog.51cto.com/dba10g/239741,如需转载请自行联系原作者
相关文章
|
2月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
49 14
|
3月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
78 21
|
3月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
103 16
|
3月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
91 9
|
3月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
3月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
3月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
40 2
|
3月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
3月前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件