jQuery不得不說是一個越用越喜愛的js框架,好處就太多了,google一下一大把,而jQuery自身提供的方法是有限的,對於要完成一個特定的復雜功能,就要自己去編寫一些插件,對於這些插件具有高度的獨立性和可復用性,在項目開發總可以節省大量的時間和精力,下面就把我學習jQuery Plugin的一些筆記分享給大家,如有寫錯的地方大家可要不吝賜教。
一、搭建jQueryPlugin最簡單的骨架,在jQuery的prototype上增加函數($.fn==$.prototype),下面的寫法也算是固定寫法
- jQuery.fn.myPlugin = function() {
- // Do your awesome plugin stuff here
- }
二、上面已經完成了jQueryPlugin最基本的骨架,在裡面寫一些自己的邏輯就可以實現一些功能,但這還沒完,對於引入多個插件就會有與其他插件發生命名沖突的危險,雖然幾率很小,如果遇上了也是很麻煩的,這一節就是將jQueryPlugin放在一個自己執行的范圍內,避免與其他js函數發生沖突,用到的方法是js的閉包(closure,具體閉包也理解的不太清楚,指導的大牛可以給點指點哈),所以對於上面的插件代碼就可以在進行優化一下
- <scripttype="text/javascript">
- // usejs closure
- (function($){
- $.fn.myPlugin=function(){
- // add a plugin code
- };
- })(jQuery);
- </script>
三、插件執行的上下文(Context)就是自己所寫插件的執行范圍,個人理解就是$.fn.myPlugin=function(){}這個函數的執行范圍,在這個函數執行范圍中this關鍵字是指向jQuery對象的,所以this關鍵字可以直接引用jQuery的方法,不必使用$(this)進行包裝
- <scripttype="text/javascript">
- // use js closure
- (function($){
- $.fn.myPlugin=function(){
- // find方法沒有報錯說明是一個jQuery的對象
- var root = this.find(‘root’) ;
- };
- })(jQuery);
- </script>