插件

Question

在我的jQuery類我瞭解了jQuery插件模板在這裏https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/91b4eb05b18f3038a6f8a34c41435c4d2702c0d0/dist/jquery.boilerplate.js

我明白想幹嗎;(function ($, window, document, undefined)使用，以及如何創建默認值等一些概念

var pluginName = "defaultPluginName", 
       defaults = { 
       propertyName: "value" 
     }; 

然而，老師在這個模板上給我們提供的關於創建一個插件來突出顯示div元素的例子，超過了我的頭。我們以後沒有得到演示代碼來理解它。

任何一個在這裏可以創建一個插件，突出基於模板的一個div元素，並解釋一樣一步一步 - 像如何使用默認設置，插件建設和創建實際的插件。

預先感謝您。

Answer 1

的jQuery插件模板做了一些事情：

樣板設置$跡象jQuery來避免插件衝突（如樣機也使用$如jQuery，那麼你如何確保你的插件使用jQuery和沒有別的東西，你通過jQuery的成Immediately Invoked Function Expression像這樣）：

(function($) { 
    $.fn.yourPlugin = function() { 
    // Do stuff! 
    }; 
})(jQuery); // pass jQuery so the $ is jQuery and not something else in the function 

但是，這並不能解決所有問題，因爲undefined ECMAScript中3可能不會undefined（即，它是可變的，它可以由oth修改呃腳本），所以我們增加一個參數：

(function($, undefined) { 
    $.fn.yourPlugin = function() { 
    // Do stuff! 
    }; 
})(jQuery); // note that we're not passing any value to make it truly undefined 

樣板也通過window和document局部變量，使他們得到解決快一點，而且還增添了一些代碼，以便插件可以像其他jQuery對象一樣鏈接。現在我們結束了樣板代碼：

;(function ($, window, document, undefined) { 

     var pluginName = "highlighter"; 

     var defaults = { 
     }; 

     function Plugin (element, options) { 
       this.element = element; 
       this.settings = $.extend({}, defaults, options); 
       this._defaults = defaults; 
       this._name = pluginName; 
       this.init(); 
     } 

     $.extend(Plugin.prototype, { 
       init: function() { 
       } 
     }); 

     // A really lightweight plugin wrapper around the constructor, 
     // preventing against multiple instantiations 
     $.fn[ pluginName ] = function (options) { 
       this.each(function() { 
         if (!$.data(this, "plugin_" + pluginName)) { 
           $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
         } 
       }); 

       // chain jQuery functions 
       return this; 
     }; 

})(jQuery, window, document); 

現在讓我們來探索如何突出顯示div並更改字體。首先，你可以用一些屬性擴展默認設置：

// Here we create the defaults: 
var defaults = { 
    bgColor: 'yellow', 
    font: 'normal small-caps normal 16px/1.4 Georgia' 
}; 

在插件的包裝，當你的插件實例化時，也稱init()功能：

// "options" parameter may contain the user's values to override defaults 
$.fn[ pluginName ] = function (options) { 
    // for each selected element 
    this.each(function() { 
     // ... 
     // When "new Plugin()" -> init() is called in the function, see "function Plugin()" 
     $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
    } 
} 

樣板也做一個其他重要的是：它在this.settings而不是this.defaults存儲用戶的設置，以便插件的默認設置不會被用戶的自定義設置覆蓋。

的new Plugin()調用init()功能，我們可以工作了魔法。要訪問默認或自定義設置，我們只需要訪問this.settings：

init: function() { 
    // Set the highlight and font. 
    $(this.element).css({ 
     'background-color': this.settings.bgColor, 
     'font': this.settings.font 
    }); 
} 

見小提琴here。