如何让视图脚本置于布局脚本之后？Sails.js技术问询

当然支持啦！Sails.js 默认使用的 EJS 模板引擎本身就支持类似 Laravel 的区块（section）功能，刚好能解决你想把视图脚本放到布局脚本之后的需求。下面给你两种实用的实现方法：

方法1：用变量定义视图脚本区块 #

首先在你的布局文件（比如 views/layout.ejs）里，在布局脚本之后预留一个区块位置：

<html>
  <!-- 样式文件 -->
  <link rel="stylesheet" href="/css/global.css">
  <body>
    <%- body %> <!-- 渲染视图HTML内容 -->
    <!-- 布局全局脚本 -->
    <script src="/js/layout-common.js"></script>
    <!-- 预留视图脚本的插入位置 -->
    <%- typeof viewScripts !== 'undefined' ? viewScripts : '' %>
  </body>
</html>

接着在你的视图文件里，定义 viewScripts 变量，把视图专属的脚本写在这个变量里：

<!-- 视图的HTML内容 -->
<div class="user-profile">
  <h1>我的个人主页</h1>
</div>

<!-- 定义视图脚本区块 -->
<% 
  viewScripts = `
    <script>
      // 视图专属的业务逻辑
      document.querySelector('.user-profile h1').addEventListener('click', () => {
        alert('你点击了标题！');
      });
    </script>
  `;
%>

这样渲染页面时，视图里的脚本就会被插入到布局脚本的后面，完全符合你的需求。

方法2：抽离视图脚本为单独文件（更易维护） #

如果视图脚本比较复杂，建议把它抽成独立的EJS片段文件，方便管理。

首先修改布局文件，预留脚本引入的位置：

<html>
  <!-- 样式文件 -->
  <link rel="stylesheet" href="/css/global.css">
  <body>
    <%- body %> <!-- 渲染视图HTML内容 -->
    <!-- 布局全局脚本 -->
    <script src="/js/layout-common.js"></script>
    <!-- 按需加载视图脚本 -->
    <% if (typeof viewScriptPartial !== 'undefined') { %>
      <%- include(viewScriptPartial) %>
    <% } %>
  </body>
</html>

然后在视图文件里指定要加载的脚本片段路径：

<!-- 视图的HTML内容 -->
<div class="user-profile">
  <h1>我的个人主页</h1>
</div>

<!-- 指定要加载的视图脚本片段 -->
<% viewScriptPartial = 'partials/user-profile-script.ejs'; %>

最后创建 views/partials/user-profile-script.ejs 文件，写入视图脚本：

<script>
  // 视图专属的业务逻辑
  document.querySelector('.user-profile h1').addEventListener('click', () => {
    alert('你点击了标题！');
  });
</script>

这种方式更适合大型项目，脚本和视图HTML分离，代码更清晰。

进阶玩法：多区块管理 #

如果需要同时定义多个区块（比如额外的页面样式、多个脚本区块），可以用对象来统一管理：

布局文件里预留多个区块：

<html>
  <!-- 全局样式 -->
  <link rel="stylesheet" href="/css/global.css">
  <!-- 页面专属样式区块 -->
  <%- typeof pageStyles !== 'undefined' ? pageStyles : '' %>
  <body>
    <%- body %> <!-- 渲染视图HTML内容 -->
    <!-- 布局全局脚本 -->
    <script src="/js/layout-common.js"></script>
    <!-- 页面专属脚本区块 -->
    <%- typeof pageScripts !== 'undefined' ? pageScripts : '' %>
  </body>
</html>

视图里同时定义多个区块：

<% 
  // 页面专属样式
  pageStyles = `
    <style>
      .user-profile h1 { color: #2c3e50; }
    </style>
  `;
  // 页面专属脚本
  pageScripts = `
    <script>
      document.querySelector('.user-profile h1').addEventListener('click', () => {
        alert('你点击了标题！');
      });
    </script>
  `;
%>

<!-- 视图的HTML内容 -->
<div class="user-profile">
  <h1>我的个人主页</h1>
</div>

这样就完全实现了类似 Laravel 中 @section 和 @yield 的功能，灵活度拉满~

内容的提问来源于stack exchange，提问作者Tidusvn05