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

How to handle js functions when we use markup-based DOM-ready execution

本文关键字：何处理 处理 函数 js 执行 我们 于标记 就绪 DOM      更新时间：2024-02-05

很抱歉阅读太久，但如果你能分享你的想法，那就太好了。：）

所以。。这项技术在Paul Irish的博客文章中有描述-http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution然后由Jason Garber在这里扩展-http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution。

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

该对象看起来像：

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

然后您将<body>更改为

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

然后当DOM准备好时，使用一些JS好东西会自动调用CCD_ 2。

这非常棒，因为您可以将所有要在DOM上执行的脚本放在一个地方，并且这些脚本的执行不需要额外的代码。

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

如果这些函数位于适当的APP.controller_name名称空间内，那将非常好，因为这将有助于维护代码。话虽如此，我目前正在将我的应用程序对象更改为以下内容：

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（）具有完全相同的结构，因此您无法判断extraStuff 10（）是否是在事件发生时等待执行的函数，或者是否有一个实际的视图/页面被称为extraStuft，并且该函数的内容将在页面加载时执行。

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

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

这将明确地分离DOM就绪函数和其他函数，但我想知道这是否是完成这些功能的最佳方式。。。有什么想法吗？

这是一个很好的模式，但我建议将事情分开一点，因为一个文件规则所有这些方法很快就会变得难以处理。当你的应用程序增加到50页时会发生什么？您最终会得到一个要编辑的怪物文件，该文件必须在每个页面上完整加载，从而增加下载和解析时间。

根据访问的页面动态加载较小的JS库文件会很好。然后，您可以将函数附加到APP全局命名空间，以便在页面之间重用它们。您的控制器代码保持轻松，因为它只需附加一个简单的onclick或其他什么，就可以触发已经加载的库内容。

使用需求管理器以正确的顺序加载库可能会有所帮助，例如。http://requirejs.org/docs/jquery.html

相关文章：