Question

对于长时间的阅读感到抱歉，但如果你能分享你的想法，那就太好了。：）

所以..这个技术在Paul Irish的博文中描述 - http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution然后杰森加伯在这里延长 - http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution。

主要思想是拥有一个json对象，该对象将包含在加载特定页面（控制器和/或视图）时应该执行的所有代码（在DOM-ready上）。

该对象看起来像：

APP = {
  controller1 : {
    view10: function(){ ... },
    view11: function(){ ... }
  },
  controller2: {
    view20: function() {...},
    view21: function() {...}
  }
}

然后将<body>更改为

<body data-controller="controller_name" data-action="view_name">

然后在DOM准备就绪时有一些JS好东西，可以自动调用APP.controller_name.view_name()。

这非常棒，因为您可以将所有待执行的DOM准备好的脚本放在一个地方，并且这些脚本无需其他代码即可执行。

现在回答实际问题： 如何处理特定控制器或视图/页面的其他JS函数，这些函数在DOM准备好但发生事件时不应执行（例如onclick =“someFunction（）”？

如果这些函数在适当的APP.controller_name命名空间内，那将非常好，因为这有助于维护代码。有了这个说，我正在将我的APP对象改为：

APP = {
  controller1 : {
    view10: function(){ ... },
    view11: function(){ ... },
    extraStuff10: function: () {...},
    extraStuff11: function: () {...}
  },
  controller2: {
    view20: function() {...},
    view21: function() {...},
    extraStuff20: function: () {...}
  }
}

这一切都很好 - APP.controller1.view10()会自动执行，您可以在之后需要时调用APP.controller1.extraStuff10()。但是该结构存在一个严重缺点 - view10（）和extraStuff10（）具有完全相同的结构，因此您无法判断extraStuff10（）是否是在事件发生时等待执行的函数或者，如果有一个名为extraStuff的实际视图/页面，则在加载页面时将执行该函数的内容。

我正在考虑将函数view10（）更改为一个包含init（）函数的对象（我们将把script-for-DOM-ready放在里面），如下所示：

APP = {
  controller1 : {
    view10: {
      init(): function(){ ... }
    },
    extraFunction10: function: () {...}
  }
}

这将明确区分DOM-ready功能和其他功能，但我想知道这是否是实现这些功能的最佳方式......任何想法？

Answer 1

这是一个很好的模式，但我建议稍微分开一点，因为单文件规则 - 所有 - 所有方法很快就会变得难以处理。当您的应用增长到50页时会发生什么？你最终得到了一个要编辑的怪物文件，它必须在整个页面中加载，增加了下载和解析时间。

根据访问的页面动态加载的较小JS库文件可以正常工作。然后，您可以将功能附加到APP全局命名空间，以便可以在页面之间重用它们。您的控制器代码保持轻量级，因为它只需附加一个简单的onclick或其他任何内容，以便触发已经加载的库内容。

转向使用需求管理器以正确的顺序加载库可能有助于此http://requirejs.org/docs/jquery.html

当我们使用基于标记的DOM就绪执行时如何处理js函数

1 个答案: