2011-02-28 60 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