如何在Pug/DOM文件中调用函数、数组？求最佳实现方案

嘿，针对你这个需求，我整理了两种实用的实现方式，还有对应的最佳实践模式，一起来看看：

1. 客户端渲染场景（浏览器中直接运行Pug） #

如果你的Pug是在浏览器端通过pug.js编译执行的，那需要先把你的函数暴露到全局作用域，这样Pug才能访问到它：

步骤1：修改myScript.js，将函数挂载到全局 #

// myScript.js
// 挂载到window对象，让浏览器全局可访问
window.myFunction = function() { 
  return ['first', 'second', 'third']; 
}

步骤2：在Pug中直接调用函数获取数组 #

script(type="text/javascript" src="./myScript.js")
// 确保先加载JS文件，再执行Pug的遍历逻辑
block content
  each val, index in myFunction()
    +myMixin(val)

这种方式适合快速原型或者简单的前端场景，但缺点是会污染全局作用域，而且需要客户端执行JS来渲染内容。

2. 构建时预渲染（推荐的最佳模式） #

如果你的项目用了Webpack、Gulp这类构建工具预编译Pug，那更推荐用模块化的方式引入函数，避免全局污染，还能在构建阶段就完成渲染，提升页面性能：

步骤1：将myScript.js改为ES模块（或CommonJS模块） #

// myScript.js
// 导出函数，作为模块使用
export function myFunction() { 
  return ['first', 'second', 'third']; 
}
// 如果用CommonJS规范（比如旧版Webpack），可以写成：
// module.exports = { myFunction };

步骤2：在Pug中引入模块并获取数组 #

// 用Pug的代码行（-开头）引入模块，在构建阶段执行
- const { myFunction } = require('./myScript.js');
// 如果是ES模块环境，也可以用import：
// - import { myFunction } from './myScript.js';

block content
  each val, index in myFunction()
    +myMixin(val)

这种模式的优势很明显：

• 没有全局变量污染，符合现代JS模块化规范
• 数组的处理和mixin的渲染在构建阶段就完成了，客户端拿到的是直接渲染好的HTML，加载更快
• 更容易维护和扩展，比如后续修改数组逻辑，只需要更新myScript.js即可

额外注意事项 #

• 确保你的myMixin已经在遍历代码之前定义好了，可以单独放在一个mixins.pug文件里，用include mixins.pug引入到page.pug中
• 如果是客户端渲染场景，一定要保证myScript.js在Pug编译的JS代码之前加载，否则会出现myFunction is not defined的错误

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