如何在单独的JavaScript文件中使用Blade数组实现JS动态追加功能

问题根本原因 #

Laravel的Blade模板引擎只会解析后缀为.blade.php的文件，你抽离的独立.js文件不会经过Blade渲染，所以文件内的@foreach、{{}}等Blade语法会被当作普通文本原样输出，这是正常现象。

完全可以抽离复用，推荐两种实现方案 #

方案1：抽为Blade公共片段（改造成本最低） #

不需要改成纯JS文件，直接把这段JS代码放到单独的Blade片段里即可：

1. 新建文件resources/views/partials/common-add-row.blade.php，把你原来的JS函数代码原封不动放进去
2. 在create和edit视图的合适位置（一般是页面底部，jQuery加载后）引入片段：

@include('partials.common-add-row')

这个方案和你之前写在单个视图里的效果完全一致，Blade会正常解析所有语法，仅需移动代码即可完成复用。

方案2：抽为纯静态JS文件（性能更优） #

如果要做完全的前后端分离，让JS可以被缓存，就把后端数据提前暴露到全局变量，去掉JS里的Blade语法：

1. 先在所有需要调用该函数的Blade视图中，提前注入产品数据到全局：

<script>
// 写在引入独立JS文件之前
window.globalProductList = @json($produk);
</script>

2. 把独立JS文件里的代码改成纯JS实现，替换原来的Blade循环：

function addRow() {
  let html = `<tr>
    <td>
      <select class="form-control" name="addmore[${i}][name]" id="name${i}" required>
        <option disabled selected value="">Select Product</option>`;
  // 用JS循环渲染产品选项
  globalProductList.forEach(pro => {
    html += `<option value="${pro.id}">${pro.nama}</option>`;
  })
  html += `</select></td></tr>`;
  $('#mainbody').append(html);
}

如果edit页面需要旧值回填，也可以额外把回填数据用同样的方式注入到全局变量，公共JS不用做重复修改。

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