jQuery plugin简单理解


jQuery不得不说是一个越用越喜爱的js框架，好处就太多了，google一下一大把，而jQuery自身提供的方法是有限的，对于要完成一个特定的复杂功能，就要自己去编写一些插件，对于这些插件具有高度的独立性和可复用性，在项目开发总可以节省大量的时间和精力，下面就把我学习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>  
  • 1
  • 2
  • 3
  • 下一页

相关内容