EP059. “创建 Search 模块与首个 JS 类”

「实时搜索结果」（live search）功能从这里开始动工：用户点头部右上角的搜索图标，应该弹出一个全屏半透明 overlay，输入框打字几百毫秒后就直接显示结果，不用像传统搜索那样按 Enter 或提交表单刷新页面。但这一讲还没写实际的 overlay 逻辑，只是先按「面向对象 JavaScript」的写法，新建一个独立的 Search.js 模块文件，写一个最基本的 class + constructor，用 alert() 弹窗测试一下这个模块能不能被正确 import 和实例化。真正的 overlay 开关逻辑从下一讲（EP061）才开始写。

涉及文件

• wp-content/themes/fictional-university-theme/src/modules/Search.js （新建）
• wp-content/themes/fictional-university-theme/src/index.js （修改，import 并实例化 Search）

代码实现

// wp-content/themes/fictional-university-theme/src/modules/Search.js

class Search {
  constructor() {
    alert("Hello I am a search.")
  }
}

export default Search

// wp-content/themes/fictional-university-theme/src/index.js

import "../css/style.scss"

// Our modules / classes
import MobileMenu from "./modules/MobileMenu"
import HeroSlider from "./modules/HeroSlider"
import GoogleMap from "./modules/GoogleMap"
import Search from "./modules/Search"          // 新增

// Instantiate a new object using our modules/classes
const mobileMenu = new MobileMenu()
const heroSlider = new HeroSlider()
const googleMap = new GoogleMap()
const search = new Search()                    // 新增

要点：

• src/modules/ 这个子文件夹之前已经有 MobileMenu.js、HeroSlider.js、GoogleMap.js，这一讲只是照着同样的组织方式再加一个 Search.js。
• 这门课的 JS 用 class 写法（面向对象），constructor 是类被 new 出来时自动执行的函数。这一讲用 alert("Hello I am a search.") 纯粹是为了验证「文件建对了、import 路径对了、能正确实例化」，不是真正的功能代码。
• export default Search + import Search from "./modules/Search"（路径不用写 .js 后缀）是这门课模块间互相引用的固定写法。
• transcript 里还顺带做了个小实验：创建两个不同变量名的 new Search() 会弹两次 alert，用来说明「class 是可重复使用的蓝图，各个 object 互相独立」；但网站实际只需要一个 search 对象，所以最后把多余的那个删掉了，最终代码就是上面这样只 new 一次。
• 头部搜索图标的 HTML（.js-search-trigger）和 search-overlay.scss 样式在这一讲之前就已经存在于主题里，这一讲不涉及改动它们，纯粹是搭 JS 骨架。

Hook / Function 速查

常见坑

• 无（这一讲纯粹是新建文件 + 简单 import 测试，transcript 没有提到报错或踩坑）

延伸 / 后续讲座会用到

Search.js 里这个 constructor 会在 EP061 开始被改写成真正的 overlay 开关逻辑（选取 DOM 元素、绑定点击事件），之后 EP063-EP065 会继续在这个类里加键盘快捷键、防抖计时、结果渲染等功能。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 13, EP059