0

我正在使用 RequireJS，并且我正在为每个页面创建一个自己的脚本文件。但是，我也有一些组件包含在某些页面（服务器端）中。这些页面是否也应该获得自己的脚本文件，或者必要的 javascript 是否应该在包含页面中？所包含页面的某些功能对许多页面是通用的。

4

1 回答 1

1

我认为您最好将 javascript 视为可重用模块而不是特定于页面的功能。因此，假设您的页面有一个发起 AJAX 请求的搜索框、一些日期选择器和一大堆选项卡。这些中的每一个都应该是一个模块（或者如果它们提供的功能足够复杂，那么几个模块）。通过将您的应用程序分解为目标非常集中的小块，您可以更轻松地单独测试每个位（自动单元测试）并在其他地方重用功能。

现在关于如何加载您的 javascript 模块，有一点需要根据用户需求有策略地加载内容（例如：core.js 默认加载，但 search.js 在用户访问“搜索”之前不会加载" 选项卡）但是您可以将所有内容打包到一个文件中（require 的 r.js 工具会为您完成此操作）并在每个页面上使用相同的脚本文件 (main.js)。

使用单个脚本文件时，请记住，当它的功能目标不存在时，您的 js 将需要工作。jQuery 让这变得超级简单，您几乎不必考虑它 - 例如：

$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page.

我还看到人们在页面的 body 标记上设置了一个 data-attr - 例如 data-page="foo" 和关键 js：

var page = $('body').data('page');
if (page === 'foo'){
    component1.setup();
    component2.setup();
}

在您的情况下，我会尝试使用 RequireJS / AMD 样式的模块将所有内容构建到一个文件中。每个组件都将获得自己的模块文件（mycomponent.js），您的 main.js 将 require() 您的所有模块并适当地初始化事物，最后您将配置您的 r.js 构建以在部署时将所有内容打包到单个文件中到/在生产中运行。

如果您有兴趣进一步探索该主题，请查看以下帖子：

单入口点 FTW
单入口点 Redux

于 2012-11-28T17:53:40.467 回答