generator函数必须写在内，不能用于html内联事件；yield后跟promise需执行器驱动，否则dom不会自动更新；现代项目应优先使用async/await。
Generator 函数本身是 JavaScript 语言特性，和 HTML 没有直接关系——你不能在 HTML 标签里写 function*，也不能靠 <script></script> 外的任何 HTML 结构“启用” Generator。所有 Generator 相关逻辑必须写在 <script></script> 块内，且需运行在支持 ES6+ 的 JS 环境中。
Generator 函数必须写在 <script></script> 里，且不能用在内联事件处理器中
常见错误是试图把 Generator 当成普通函数塞进 onclick 或 onload 属性里：
<button onclick="function* g(){ yield 1 }() ">点我</button>
这会直接报语法错误：Uncaught SyntaxError: Unexpected token '*' 。因为 HTML 内联事件处理器只接受表达式或语句，不支持函数声明语法（更别说 function*）。
- Generator 函数只能定义在
<script></script>标签内部，或外部 JS 文件中 - 调用 Generator 必须显式执行，比如
const it = myGen(); it.next()，不能靠事件属性自动触发 - 如果想响应点击启动 Generator 流程，得在
<script></script>中绑定事件监听器，再手动调用
yield 在浏览器中无法直接驱动 DOM 更新，必须配合 Promise + 执行器
很多人写完 function* loadPage() { yield fetch('/api/data'); render(data); } 就以为 DOM 会自动更新，结果发现 render 根本没执行——因为 yield fetch(...) 返回的是一个 Promise，而 Generator 本身不会自动 .then() 它，也不会等它 resolve 后再继续。
你必须提供一个执行器（runner），例如：
function run(genFn) {
const it = genFn();
function next(val) {
const res = it.next(val);
if (res.done) return res.value;
return res.value.then(next);
}
return next();
}
然后这样用：
run(function* () {
const data = yield fetch('/api/user').then(r => r.json());
document.getElementById('user').textContent = data.name; // ✅ 此时 DOM 才更新
});
-
yield后面跟 Promise 是合法的，但 JS 引擎不会自动 await 它 - 不写执行器，
yield fetch(...)只是返回 Promise 对象，next()立刻继续，后续代码拿不到数据 - 现代项目应优先用
async/await；Generator + runner 是兼容老环境或学习原理的方案
HTML 中调试 Generator 最容易忽略的两个点
一是控制台看不到 yield 暂停状态，二是 next() 调用时机错位导致流程断裂。
- 浏览器 DevTools 不会在
yield行打暂停断点（不像await），得靠console.log或在next()调用前后加日志观察 - 第一次
it.next()启动 Generator，之后每次it.next(value)的value是上一个yield的返回值——若漏传或传错，yield左侧变量会是undefined - DOM 操作（如
innerHTML = ...）必须放在yield之后、且确保前一个异步已 resolve，否则看到的是旧内容或空值
Generator 的核心价值不在 HTML 层，而在 JS 控制流建模能力；把它当“语法糖容器”去套异步逻辑没问题，但别指望 HTML 结构能简化它的使用门槛——该写的执行器、该处理的 Promise 链、该校验的 next() 参数，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
