2011-02-28 102 views
0

我想使用JavaScript Module Pattern,我遇到了一個問題,我不確定如何解決。Javascript模塊模式和jQuery的生活?

所以我有2個腳本文件,因爲我想分開我的代碼並使其更易於閱讀。

// script 1 

var abc = (function (my, $) 
{ 
    my.events = function() 
    { 
     // selectors is from my base file(not shown as I don't think it is needed to be shown) 
     // my.selectors.createFrm = '#createFrm' 
     var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function (e) 
     { 
      e.preventDefault(); 
     }); 

    } 

    return my; 

} abc || {}, jQuery)); 

// script 2 

var abc = (function (my, $) 
{ 
    my.dialogs = { 

     addDialog: function() 
     { 
      var $dialog = $('<div></div>').dialog(
      { 
       width: 580, 
       height: 410, 
       resizable: false, 
       modal: true, 
       autoOpen: false, 
       title: 'Basic Dialog', 
       buttons: 
        { 
         Cancel: function() 
         { 
          $(this).dialog('close'); 
         }, 
         'Create': function() 
         { 

          jQuery.validator.unobtrusive.parse(my.selectors.createFrm) 
          // this is undefined as page loadup no form was found so live did not kick in 
          my.createSubmitFrmHandler.validate().form(); 

         } 
        } 
      }); 

      return $dialog; 
     }, 

    return my; 
} abc || {}, jQuery)); 

所以我不知道如何確保createSubmitFrmHandler被定義並繼續我在做什麼。

編輯

最後我做這樣的事情

var abc = (function (my, $) 
    { 
     my.events = function() 
     { 
      // some one time events here 
     } 

     my.test = function() 
     { 
      var add = $(selectors.createFrm).live('submit', function (e) 
      { 
       e.preventDefault(); 
      }); 

      return add; 
     }; 
    } 

我不能確定的唯一的事情是,如果我一遍又一遍地調用這個函數將保持它製作該對象或將它看起來並且看到生活已經受到約束,並且不會再有約束力?

回答

1

模塊模式的要點是Javascript具有函數範圍:用var定義的變量對於定義它們的函數是局部的。

(function() { 
    var foo = 'bar'; 
    // foo == 'bar' 
})(); 
// foo == undefined 

既然你在其中分配給my.events功能定義createSubmitFrmHandler,您不能引用它,函數體之外。有幾種方法可以解決這個問題。經過my所有模塊的一點是,他們可以共享通過它的祕密:您可以設置my.events.handler = createSubmitFrmHandler第一模塊中,並my.events.handler均會出現在其他模塊中,因爲my是可見的存在。你可以讓my.events()返回createSubmitFrmHandler並參考它。如果選擇器不是一個昂貴的選擇器,則可以簡單地再次計算createSubmitFrmHandler的值,並在對話模塊中使用$(my.selectors.createFrm).validate().form();,而不是嘗試引用createSubmitFrmHandler。無論你適合什麼。

+0

@Tgr - 對不起,我不明白你剛剛說的。我沒有嗎? $(my.selectors.createFrm).live( '提交',..)。這實際上是我第一天使用模塊模式... – chobo2 2011-02-28 22:54:20

+0

你的意思是我應該有這個my.createSubmitFrmHandler.validate()。form(); ?如果是這樣,我嘗試了,並得到「my.createSubmitFrmHandler是未定義」 – chobo2 2011-02-28 23:01:13

+0

更新了答案,希望它現在更有意義。 – Tgr 2011-03-01 00:28:26