Sails.js:加载特定视图上的脚本

在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的视图中加载。

有人有一个想法?

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

所以,另一方面,假设你正在考虑这样做是出于性能的原因,那么这是我的build议:

首先用--prod并检查每个页面加载的感觉。 现在你正在使用一个缩小的包,它应该快得多。 请特别注意后续页面加载的感觉,因为到那时您的浏览器将caching所有内容。 由于浏览器(和HTTP v1)的工作方式,在大多数情况下,您会发现在生产环境中使用单个包实际上比只包含在特定页面上使用的脚本更快。 (再加上它使得切换到CDN更容易,如果有的话)。

也就是说,如果你使用的是大量的JavaScript文件(兆字节和兆字节),那可能并不总是一个选项。 在这种情况下,我们通常在我的公司里做的是@KevinLebuild议的:在页面上手动包含真正沉重的脚本。 (即使如此,你仍然可以使用链接器来做其他事情 – 反之亦然)。

另外,你也可以使用Grunt或Gulp,只要记住,当你投入生产并考虑使用CDN时,你必须将每个单独视图的脚本打包成单独的有效载荷。


所以回顾一下:

  • 避免在没有首先检查DOM的情况下编写在加载时立即执行的前端代码
  • 对于大多数应用程序,你应该只使用一个包(性能会更好)
  • 如果你需要分离出来的东西,手动在需要它们的视图中包含脚本(请注意,如果你这样做,也决定继续使用链接器,那么你可能会想要将链接器标签移出layout.ejs并进入每个单独的视图 – 这将您的脚本标签保存在代码中的一个地方)