React、Vue等库确实极大地提升了我们的开发效率。但是作为一名有追求的前端工程师，Ru果不懂原生JavaScript，就像是开着自动挡跑车却不懂引擎原理一样，总感觉少了点什么。今天我们要抛开那些繁重的依赖，回归本源，用Zui纯粹的代码来实现一个电商网站中极为常见的功Neng：Tab栏商品价格筛选。

想象一下当用户在浏览琳琅满目的商品列表时他们希望Neng够快速地通过价格区间找到心仪的宝贝。这个交互过程必须流畅、直观，不Neng有丝毫的卡顿。我们要Zuo的，就是通过原生的DOM操作、数组的高阶方法以及事件委托，来构建这样一个轻量级却功Neng强大的模块。

一、 构建数据基石：模拟商品列表

任何动态的网页功Neng，dou离不开数据的支撑。这些数据通常来自于后端API的JSON响应。但在我们的练习中，为了保持代码的独立性和可运行性，我们需要在本地构建一个模拟的数据库。

这个数据结构通常是一个包含对象的数组。每个对象dou代表了独一无二的商品，拥有自己的ID、名称、价格以及图片地址。这里有个小细节值得注意，虽然我们是在写前端代码，但保持数据结构的规范性Neng让我们在后续处理时少掉几根头发。

const goodsList = ;

二、 搭建视觉舞台：HTML结构与CSS样式

有了数据，接下来就是要把它们“画”出来。HTML负责骨架，CSS负责皮囊。对于筛选区域，我们需要一组Tab按钮，每个按钮代表一个价格区间。对于展示区域，我们需要一个容器来动态承载生成的商品卡片。

在CSS方面除了常规的布局外我们还Ke以加一点“小心机”。比如给商品卡片添加一个`transition`属性，当鼠标悬停时卡片轻微上浮并出现阴影。这种微交互Neng给用户带来极佳的触感，仿佛他们真的触碰到了商品一样。

/* 简单的样式重置与布局 */
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; }
.viewPort {
    width: 1024px;
    margin: 20px auto;
}
/* 筛选区域样式 */
.filter {
    display: flex;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.filter a {
    padding: 8px 20px;
    background: #f5f5f5;
    color: #666;
    margin-right: 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.filter a.active, .filter a:hover {
    background: #05943c;
    color: #fff;
}
/* 商品列表网格布局 */
.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
.item {
    width: 240px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #eee;
    transition: all 0.5s;
    cursor: pointer;
}
.item:hover {
    box-shadow: 0 10px 20px rgba;
    transform: translateY;
    border-color: #05943c;
}
.item img { width: 100%; }
.item .name { font-size: 16px; margin: 10px 0; color: #333; }
.item .price { color: firebrick; font-weight: bold; }

三、 核心引擎：渲染函数的封装

现在我们来到了Zui激动人心的部分——JavaScript逻辑。我们需要一个函数，负责把数据转换成HTML字符串，并塞进页面里。这个过程我们通常称之为“渲染”。

在早期的开发中，我们可Neng会使用`document.createElement`来一个个创建节点，但这会让代码变得冗长且难以维护。现代原生JS开发中，我们geng倾向于使用模板字符串。配合ES6的解构赋值，代码Ke以变得异常简洁优雅。

function render {
    // 1. 准备一个空字符串容器
    let str = '';
    // 2. 遍历数组，动态生成HTML
    arr.forEach(item => {
        // 解构赋值，提取关键属性
        const { name, picture, price } = item;
        str += `
            

                
${name}
                
¥${price}
            
        `;
    });
    // 3. 一次性插入DOM，减少重排重绘，提升性Neng
    document.querySelector.innerHTML = str;
}
// 初始化渲染，页面加载时显示所有商品
render;

四、 交互的灵魂：事件委托与筛选逻辑

光有展示是不够的，用户点击Tab栏时列表必须发生变化。这里我们面临一个选择：是给每个按钮dou绑定一个`click`事件吗？不那样太低效了而且Ru果后续动态增加了按钮，还得重新绑定。

geng高级的Zuo法是使用事件委托。我们将点击事件绑定在父容器`.filter`上，利用事件冒泡的原理，捕获子元素的点击。这就像是一个精明的管家，不管下面来了多少个新仆人，他douNeng统一管理。

在事件处理函数中，我们通过`e.target.dataset`来获取自定义属性`data-index`，从而判断用户点击了哪个区间。接着，就是数组的重头戏——`filter`方法。它会返回一个新的数组，里面只包含符合条件的商品。

// 获取筛选区域的父元素
const filterBox = document.querySelector;
// 绑定点击事件，使用事件委托
filterBox.addEventListener {
    // e.target 可Neng是 a 标签，也可Neng是其他元素，我们需要Zuo个判断
    if  {
        // 1. 处理样式：移除所有激活状态，给当前点击的添加激活状态
        document.querySelector?.classList.remove;
        e.target.classList.add;
        // 2. 获取筛选条件
        const index = e.target.dataset.index;
        // 3. 根据条件筛选数据
        let filteredList = ;
        if  {
            // 筛选 0 - 100 元
            filteredList = goodsList.filter;
        } else if  {
            // 筛选 100 - 300 元
            filteredList = goodsList.filter;
        } else if  {
            // 筛选大于 300 元
            filteredList = goodsList.filter;
        } else {
            // 点击“全部区间”，显示所有
            filteredList = goodsList;
        }
        // 4. 重新渲染页面
        render;
    }
});

关于数据类型的一个小坑

细心的朋友可Neng发现了我们在比较价格时直接使用了`item.price> 100`。但是从HTML属性或某些JSON接口获取的数据，有时候默认是字符串类型。虽然JavaScript在比较运算符中会尝试将字符串转换为数字，但为了代码的健壮性，Zui好还是显式地转换一下比如使用`Number`或者`parseInt`。这Neng避免hen多莫名其妙的Bug，特别是在处理`'010'`这种以0开头的字符串时。

通过以上几个步骤，我们完全脱离了框架的束缚，用原生JS实现了一个完整的商品价格筛选功Neng。回顾一下我们用到了：

模板字符串让HTML拼接变得像写诗一样流畅。

解构赋值快速提取对象属性，代码geng清爽。

数组高阶方法`forEach`用于遍历渲染，`filter`用于数据筛选，函数式编程的魅力尽显无疑。

事件委托优化了性Neng，体现了对DOM机制的深刻理解。

当然这只是一个起点。在实际项目中，我们可Neng还需要考虑“多条件筛选”、“排序功Neng”以及“加载geng多”等复杂逻辑。但万变不离其宗，掌握了这些原生的核心技法，无论面对什么样的需求，你douNeng从容应对，写出既高效又优雅的代码。别再犹豫了打开你的编辑器，试着敲几行代码吧，那种掌控全局的感觉真的hen棒！

---