jQuery plugin简单理解

jQuery不得不说是一个越用越喜爱的js框架,好处就太多了,google一下一大把,而jQuery自身提供的方法是有限的,对于要完成一个特定的复杂功能,就要自己去编写一些插件,对于这些插件具有高度的独立性和可复用性,在项目开发总可以节省大量的时间和精力,下面就把我学习jQuery Plugin的一些笔记分享给大家,如有写错的地方大家可要不吝赐教jQuery plugin简单理解

一、搭建jQueryPlugin最简单的骨架,在jQuery的prototype上增加函数($.fn==$.prototype),下面的写法也算是固定写法

  1. jQuery.fn.myPlugin = function() {  
  2.   // Do your awesome plugin stuff here   
  3. }  
二、上面已经完成了jQueryPlugin最基本的骨架,在里面写一些自己的逻辑就可以实现一些功能,但这还没完,对于引入多个插件就会有与其他插件发生命名冲突的危险,虽然几率很小,如果遇上了也是很麻烦的,这一节就是将jQueryPlugin放在一个自己执行的范围内,避免与其他js函数发生冲突,用到的方法是js的闭包(closure,具体闭包也理解的不太清楚,指导的大牛可以给点指点哈),所以对于上面的插件代码就可以在进行优化一下
  1. <scripttype="text/javascript">  
  2.     // usejs closure   
  3.     (function($){  
  4.         $.fn.myPlugin=function(){  
  5.             // add a plugin code   
  6.         };  
  7.     })(jQuery);  
  8. </script>  

三、插件执行的上下文(Context)就是自己所写插件的执行范围,个人理解就是$.fn.myPlugin=function(){}这个函数的执行范围,在这个函数执行范围中this关键字是指向jQuery对象的,所以this关键字可以直接引用jQuery的方法,不必使用$(this)进行包装

  1. <scripttype="text/javascript">  
  2.     // use js closure   
  3.     (function($){  
  4.         $.fn.myPlugin=function(){  
  5.             // find方法没有报错说明是一个jQuery的对象   
  6.             var root = this.find(‘root’) ;  
  7.         };  
  8.     })(jQuery);  
  9. </script>  

相关推荐