Question

在Sails.js中如何在特定视图中加载javascript文件，因为我有一个脚本只想在一个视图中加载（.ejs）。

我看到在layout.ejs中为所有视图加载了所有javascript文件，因此我们的想法是从布局中排除javascript文件并在视图中加载。

  <!--SCRIPTS-->
  <script src="/js/dependencies/sails.io.js"></script>
  <script src="/js/dependencies/angular.js"></script>
  <script src="/js/dependencies/angular-ui-router.js"></script>
  <script src="/js/dependencies/angular-route.js"></script>
  <script src="/js/dependencies/angular-translate.js"></script>
  <script src="/js/dependencies/ui-bootstrap.js"></script>
  <script src="/js/dependencies/textAngular-rangy.min.js"></script>
  <script src="/js/dependencies/textAngular-sanitize.min.js"></script>
  <script src="/js/dependencies/textAngular.min.js"></script>
  <script src="/js/dependencies/angular-color-picker.js"></script>
  <script src="/js/dependencies/angular-click-outside.js"></script>
  <script src="/js/dependencies/angular-bootstrap-tpls.min.js"></script>
  <script src="/js/dependencies/angular-filemanager.js"></script>
  <script src="/js/dependencies/resource.js"></script>
  <script src="/js/app.js"></script>
  <script src="/js/locales/ca.js"></script>
  <script src="/js/locales/en.js"></script>
  <script src="/js/locales/es.js"></script>
  <script src="/js/controllers/IndexController.js"></script>
  <script src="/js/controllers/LoginController.js"></script>
  <script src="/js/controllers/LogoutController.js"></script>
  <script src="/js/controllers/NewVideoController.js"></script>
  <script src="/js/controllers/PreviewController.js"></script>
  <script src="/js/controllers/VideoConfigController.js"></script>
  <script src="/js/controllers/layoutController.js"></script>
  <script src="/js/services/LoginService.js"></script>
  <script src="/js/services/VideoConfigService.js"></script>
  <script src="/js/services/VideoService.js"></script>
  <script src="/js/services/authInterceptor.js"></script>
  <script src="/js/services/authToken.js"></script>
  <script src="/js/test/controllers/IndexController-spec.js"></script>
  <!--SCRIPTS END-->

上面的代码是布局的脚本。我想从布局中删除textAngular脚本，并仅在使用textAngular的视图中加载。

有人有想法吗？

Answer 1

如果您在不同的页面上加载不同的脚本作为应用程序实际行为的一部分，我建议不要这样做。（但看起来你正在使用Angular，所以情况可能不是这样，因为你可能通过ng-controller将UI控制器附加到特定页面。）

所以，另一方面，假设你出于性能原因考虑这样做，那么这就是我的建议：

首先使用--prod解除并检查每个页面加载的感觉。现在您正在使用缩小的捆绑包，它应该快得多。特别注意后续页面加载的感觉，因为那时您的浏览器将缓存所有内容。由于浏览器（和HTTP v1）的工作方式，在大多数情况下，您会发现在生产中使用单个捆绑包实际上比仅包括特定页面上使用的那些脚本更快。（另外，如果它出现的话，它可以更容易地切换到CDN。）

也就是说，如果您使用吨的JavaScript文件（兆字节和兆字节），那么这可能并不总是一个选项。我们在这种情况下通常在我公司所做的是@KevinLe建议：在需要它们的页面上手动包含非常繁重的脚本。（即便如此，您仍然可以将链接器用于其他所有内容 - 反之亦然。）

或者，您可以对Grunt或Gulp感兴趣 - 请记住，当您开始制作并考虑使用CDN时，您必须将每个单独视图的脚本捆绑到单独的有效负载中。

所以回顾一下：

避免编写在没有先检查DOM的情况下加载时立即执行操作的前端代码
对于大多数应用程序，您应该只使用一个捆绑包（性能会更好）
如果您需要分离出来，请在您需要的视图中手动包含脚本（请注意，如果您执行此操作并决定继续使用链接器，那么您可能希望将链接器标记移出layout.ejs以及每个单独的视图 - 将脚本标记保存在代码中的一个位置）

Sails.js：在特定视图上加载脚本

1 个答案:

所以回顾一下：