EP091. “My Notes JS 模块与删除按钮点击测试”

「删除笔记」按钮这一讲接上前端逻辑，思路是先只处理点击事件本身（先弹测试提示确认事件绑定成功），下一讲才真正接上 REST API 去执行删除。新建一个 MyNotes JS 模块类，按项目一贯的写法（constructor / events / 自定义方法三段式）组织代码，并在主入口 index.js 里实例化它。

涉及文件

• wp-content/themes/fictional-university-theme/src/modules/MyNotes.js （新建）
• wp-content/themes/fictional-university-theme/src/index.js （修改）

代码实现

src/modules/MyNotes.js（新建）：

// wp-content/themes/fictional-university-theme/src/modules/MyNotes.js
import $ from "jquery"

class MyNotes {
  constructor() {
    this.events()
  }

  events() {
    $(".delete-note").on("click", this.deleteNote)
  }

  // Methods will go here
  deleteNote() {
    alert("you clicked delete")
  }
}

export default MyNotes

src/index.js：导入并实例化新模块：

// wp-content/themes/fictional-university-theme/src/index.js
import MyNotes from "./modules/MyNotes"
// ...
const myNotes = new MyNotes()

关键改动点：

• 沿用项目一贯的类结构：constructor 里只调用 this.events()，把「绑定哪些事件」集中放在 events() 方法里，具体的业务逻辑再拆到独立的自定义方法（如 deleteNote()）——这是这门课贯穿始终的代码组织风格，不是 WordPress 强制要求
• 这个文件单独 import $ from "jquery"，是因为每个 JS 模块文件都是独立的 ES Module，各自需要的依赖要各自 import，不会因为别的模块已经导入过 jQuery 就自动共享
• 目前 deleteNote() 只弹一个测试提示框，还没有真正调用任何 API——这是刻意分两步走的调试策略：先确认「点击事件确实绑定成功、方法确实被触发」，再去接后端逻辑，方便排查问题时缩小范围
• index.js 里 import 模块名和实例化变量名一般会保持大小写变体一致（类名大写 MyNotes，实例变量小写 myNotes），这只是代码风格约定，不影响功能

[截图：前台点击 Delete 按钮后浏览器弹出的 alert 测试提示框 "you clicked delete"]

Hook / Function 速查

本讲没有出现新的 WordPress hook 或 function，纯粹是前端 JavaScript 模块搭建。

常见坑

• events() 里绑定事件写成 $(".delete-note").on("click", this.deleteNote)，没有额外 .bind(this)——目前 deleteNote() 内部没有用到 this，所以暂时不会出问题，但如果后面这个方法需要访问 this（比如要引用当前对象的其他属性/方法），直接这样绑定会导致 this 指向出错，需要留意后续讲座是否补上 .bind(this)
• 忘记在 index.js 里 import 并实例化新模块——写好的类文件本身不会自动执行，必须在入口文件里 new 一个实例

延伸 / 后续讲座会用到

下一讲（part 2）会真正对接 REST API，让点击删除按钮变成一次真实的 DELETE 请求，把对应的笔记从数据库里删掉。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 19, EP091