2013-05-13 86 views
1

你好,我剛開始進入JQuery插件,但我有一些理解命名空間的問題。JQuery和原型命名空間

鑑於下面的例子,當我進入「提交」功能,我如何獲得提交功能內的原型實例?像「var self = this;」在其他功能?這個方法中的這個是指表單元素。

(function ($, window, document, undefined) { 
    var PluginPrototype = { 
     init: function (options, element) { 
      var self = this; 

      $(element).find('form').submit(self.submit); 
      self.otherMethod(); 
     }, 

     submit: function(){ 
      var self = this; // the form element 
     }, 

     otherMethod: function() { 
      var self = this; // the prototype 
     }, 
    } 

    $.fn.pluginname = function (options) { 
     return this.each(function() { 
      var plugin = Object.create(PluginPrototype); 
      plugin.init(options, this); 

      $.data(this, 'pluginname', comment); 
      // Get it by 
      // $.data($(select)[0], 'comment'); 
     }); 
    }; 

    $.fn.pluginname.Settings = { 

    }; 
}(jQuery, window, document)); 
+0

你在說什麼「實例」? – Ohgodwhy 2013-05-13 17:35:56

回答

2

其實,有一些誤解的概念在這裏:

  1. 有沒有 「原型實例」 你的情況。 Prototype是用作構造函數的函數的一個屬性。在你的情況下,PluginPrototype只是一個普通的對象,其原型將是Object.prototype。

  2. 「this」是包含當前函數執行上下文的keword,並且可以根據修改如何調用給定的函數

  3. 我建議您閱讀一些有關jQuery插件開發這裏:http://learn.jquery.com/plugins/

這就是說,我可以提出一個典型的方法:

  1. 有作爲的性質插件的所有方法一個「方法」對象(您當前的PluginPrototype

  2. Im $ .fn.pluginName函數內部的plement logic來處理不同的執行請求。

    return this.each(function() { 
        if (methods[method]) { 
         return methods[method].apply(this, Array.prototype.slice.call(parameters, 1)); 
        } else if (typeof method === "object" || ! method) { 
         return methods.init.apply(this, parameters); 
        } else { 
         $.error("Method "+method+"does not exist on my wonderful plugin"); 
        } 
    }); 
    

    a。插件初始化通過$(「...」)調用。plugin({option:value,...});

    b。插件方法通過$(「...」)調用。plugin(「method name」,argument1,argument2,...);

  3. 所有的方法將被稱爲「this」指向當前jQuery封裝的dom元素;所以,從另一個方法中調用一個方法,你將去:

    methods.methodName.call(this, argument1, argument2); 
    

希望這有助於你。

+0

相當體面的答案「這個」一個! – 2013-05-13 19:53:01

+0

Eheh是的,我的英語很糟糕。另外,我有點新回答問題..希望我會好起來;) – sixFingers 2013-05-13 20:23:46

+0

我只是改變了刪除「希望這可以幫助你。」作爲多餘的文字。 – 2013-05-13 20:35:14