歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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>  
Copyright © Linux教程網 All Rights Reserved