jQuery插件範圍建議

Question

我目前正在編寫我的第一個jQuery插件，我正在努力尋找一種合適的方式來構造代碼。我已經閱讀了jquery網站上的文檔以及其他插件的源代碼，但似乎無法找到達成一致的方式或解決我遇到的問題。

該插件將一些文本處理添加到文本輸入元素以將文本格式化爲日期。

下面的示例將兩個事件綁定到元素。我遇到的問題是如何從_processText函數訪問元素本身。在這個例子中，我使用$（this），但是這給了我的對象，而不是元素，所以我不能設置它的值或觸發事件。我發現這樣做的唯一方法是直接在綁定事件中將元素作爲參數傳遞給函數，但我認爲這看起來不正確。

大大收到的任何幫助。

(function($) { 


    var methods = { 
     init : function(options) { 
      return this.each(function() { 


       // Process the entered text and convert 
       // into a formatted date 
       $(this).bind('blur', function(event){ 
        methods._processText($(this).val()); 
       }); 


       // Custom event to trigger when invalid text 
       // is entered 
       $(this).bind('invalid', function(event) { 
        alert("Invalid"); 
       }); 


      }); 
     }, 

     _processText: function(txt) { 

      // Sudo code 
      if (txt.isValid()) { 
       $(this).val(txt) 
      } else { 
       $(this).trigger("invalid"); 
      } 

     } 

    }; 






    // boilerplate 
    $.fn.datefield = function(method) { 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.DateField'); 
     } 
    }; 
})(jQuery); 

Answer 1

使用此：

methods._processText.call(this, $(this).val()); 

然後_processText方法中，this將指向jQuery對象。

參考：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

Answer 2

可能我建議使用jQuery的樣板？對於大多數插件開發來說，這是一個非常堅實的基礎，特別是如果你不熟悉範圍的困難。

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly. 
;(function ($, window, document, undefined) { 

    // undefined is used here as the undefined global variable in ECMAScript 3 is 
    // mutable (ie. it can be changed by someone else). undefined isn't really being 
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined 
    // can no longer be modified. 

    // window and document are passed through as local variables rather than globals 
    // as this (slightly) quickens the resolution process and can be more efficiently 
    // minified (especially when both are regularly referenced in your plugin). 

    // Create the defaults once 
    var pluginName = 'defaultPluginName', 
     defaults = { 
      propertyName: "value" 
     }; 

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 

     // jQuery has an extend method which merges the contents of two or 
     // more objects, storing the result in the first object. The first object 
     // is generally empty as we don't want to alter the default options for 
     // future instances of the plugin 
     this.options = $.extend({}, defaults, options) ; 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype.init = function() { 
     // Place initialization logic here 
     // You already have access to the DOM element and the options via the instance, 
     // e.g., this.element and this.options 
    }; 

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

})(jQuery, window, document); 

http://jqueryboilerplate.com/