新闻列表页：通过WEUI框架实战我深入理解了块级作用域与点击事件

前言

今天简单的使用WEUI进行了新闻列表页的开发。在实现JS中发现了许多有趣的事情。今天就打算写一个文章给遇到了同样问题的同学进行解惑。话不多说，开始发车。以下是我要实现的效果内容，大家可以看看内容比较。代码我贴在文章末尾：

框架分为以下两点：

• Nav导航栏
• 搜索栏

Nav导航栏部分

这部分的html我就不详细讲解了，我直接讲解JS

在WEUI中导航聚焦的效果实现是添加一个weui-bar__item_on类名
要想实现这个效果我们我们想的应该是点击头部导航模块时给这个元素添加weui-bar__item_on类，其他元素移除weui-bar__item_on类。
那首先获取nav导航模块的元素，并且添加监听事件

    const doms = {
        navbar: document.querySelectorAll('.weui-navbar__item'),//获取所有导航栏模块是一个数组
        tabs: document.querySelector('.weui-navbar'),//获取导航栏模块的外部元素
    }
    //添加监听元素
    for (var i = 0; i < doms.navbar.length; i++) {
        doms.navbar[i].addEventListener('click', function () {
            for (var j = 0; j < doms.navbar.length; j++) {
                if (j == i) {
                    doms.navbar[j].classList.add('weui-bar__item_on');
                } else {
                    doms.navbar[j].classList.remove('weui-bar__item_on');
                }
            }
        })
    }

看完代码了，可以先在这里听一下，上面的for循环代码有一个错误！看看你能不能看出来。

块级作用域与闭包

上面的代码问题就是我点击每个导航栏模块的时候，i的值并不是0-doms.navbar.length-1,而一直都是doms.navbar.length，这是为什么呢？

原因就是在for循环里面定义了一个var的变量i是作用在全局里面并不会限制在for循环中，在循环结束之后，i的值就为doms.navbar.length通过点击导航栏模块执行函数的时候，调用的i值是寻找到全局中的i值为doms.navbar.length。
函数在被定义的时候只是会被声明，变量的创建与使用只有在函数执行的时候会获取，而点击事件就是这样。你只是声明了一个点击事件并没有执行，所以i的值并不会保存为你想要的0-doms.navbar.length-1，而是循环结束之后的值。

解决的方法有三个

一. let关键字

这里要先讲解一下块级作用域：let和const与{}会形成块级作用域，块级作用域有什么用呢？
块级作用域的左右：使用let和const在块级作用域内声明变量，则可以限制变量的可见性，使其只在定义它们的代码块内部有效，从而保护了全局命名空间。在循环中，使用let声明迭代变量可以确保每次迭代都有独立的作用域，解决了循环变量在异步回调中引用同一变量值的问题，使得每次循环迭代都能得到预期的结果。
加粗的是重点，每次循环都会创建一个独立的作用域，这样在执行函数的时候i的值就是指向的就是每一个不同的作用域来获取i的值。代码如下：

function navBarAddEvenetListener() {
    for (let i = 0; i < doms.navbar.length; i++) {
        doms.navbar[i].addEventListener('click', function () {
            if (this.classList.contains('weui-bar__item_on')) {
                console.log("repeat");
                return;
            }
            document.querySelector('.weui-bar__item_on')
                .classList.remove('weui-bar__item_on');
            this.classList.add('weui-bar__item_on');
        })
    }
}

二. 闭包

这里简单介绍一下闭包，闭包就是内部函数调用了外部函数的属性和方法，会形成一个闭包空间里面存储的是外部函数被调用的属性和方法。 这样在每次循环我们创建一个闭包来存储i的值这样我们也可以达成想要不同的i的结果。
实现方法就是要把监听事件添加到一个方法内部然后调用方法的值i。

function navBarAddEvenetListener() {
    for (let i = 0; i < doms.navbar.length; i++) {
        (function(i){
            (function (i) {
            doms.navbar[i].addEventListener('click', function () {
                if (this.classList.contains('weui-bar__item_on')) {
                    console.log("repeat");
                    return;
                }
                document.querySelector('.weui-bar__item_on')
                    .classList.remove('weui-bar__item_on');
                this.classList.add('weui-bar__item_on');
            })
        })(i)
        })(i)
    }
}

上面的代码有些同学可能看不懂，()()这是一个立即执行函数第二个()是传的参数，第一个()内部就是写一个函数这个一般都是搭配闭包使用。

三. 使用一个变量来存储i的值

如果用var来定义i的话，既然在最后结束循环的时候调用i的值为doms.navbar.length，那我们每次定义的时候就可以用一个变量来记住i的值，这样在执行的时候就是用的想要的值。这里用的变量记住i的值，变量类型也只能是let而不能是var。道理和之前的相同代码如下：

function navBarAddEvenetListener() {
    for (let i = 0; i < doms.navbar.length; i++) {
        let j =i;
        doms.navbar[j].addEventListener('click', function () {
            if (this.classList.contains('weui-bar__item_on')) {
                    console.log("repeat");
                    return;
                }
                document.querySelector('.weui-bar__item_on')
                    .classList.remove('weui-bar__item_on');
                this.classList.add('weui-bar__item_on');
        })
    }
}

那么到这一步为止，我们的导航栏的切换功能就已经实现了，但是这里有一个可以优化的问题，就是我要添加监听事件要给每个元素都添加一遍监听事件，假如数量很多呢？这样是非常影响效率的。

那有没有一种方法可以我给整个导航栏模块添加监听事件,它可以自动检测出我点击的是哪一个元素然后添加属性？答案是有的。

点击事件进阶

我们每次点击的时候，function(){}内部将会有一个对象叫event，大家可以尝试尝试打印一下是什么？这里我就直接说了，event是一个特殊的对象，这个对象包含了与该事件相关的所有信息，比如事件的类型（如click、mouseover）、发生事件的元素（target）、事件的状态（如鼠标的位置、按键的状态等）、以及提供了一些方法来处理或阻止事件的默认行为（如preventDefault、stopPropagation）。这里就由我们需要的发生事件的元素target，我们可以通过target来获取被点击的元素节点，然后给它添加类。代码如下：

一. 代码实现

function navBarAddEvenetListener2() {
    doms.tabs.addEventListener('click', function () {
        const target = event.target;
        if (target.nodeName == 'A') {
            event.preventDefault();
            if (target.classList.contains('weui-bar__item_on')) {
                console.log("repeat");
                return;
            }
            document.querySelector('.weui-bar__item_on')
                .classList.remove('weui-bar__item_on');
            target.classList.add('weui-bar__item_on');
        }
    })
}

上面这段代码可能有同学看不懂event.preventDefault();和target.nodeName == 'A',target.nodeName简单就是获取当前元素的标签名字。这里我主要介绍一下事件冒泡，首先event.preventDefault();的作用是阻止事件冒泡，那什么是事件冒泡呢？

二. 事件冒泡

事件冒泡就是是Web浏览器中事件传播的一种方式，当一个事件在DOM树上触发时，不仅作用于当前目标元素，还会向上传播至其祖先节点，直到到达根节点（通常是document对象），这一过程被称为事件冒泡。这意味着让你点击一个子元素的时候，会触发直到根节点上面的所有祖先元素的点击事件，有可能引起不必要的方法触发。防止某些事件继续向上层传播，达到控制事件处理流程的目的。

结束

无障碍设计：WEUI的温暖关怀

WEUI不仅仅追求技术与美学的融合，更不忘服务于每一位用户，包括视觉障碍者。通过完善的标签（label）与输入框（input）绑定，配合屏幕阅读器的支持，WEUI确保了信息的无障碍传递，让技术的温度触及每一个角落。真的怎么说呢，确实考虑的内容不是一些普通开源库能够比拟的。太牛了叭！

本次的分享就到这里啦！喜欢的话就请点个赞和关注吧。后续也会持续更新哒~

代码部分

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">
</head>

<body>
    <!-- navbar -->
    <div class="weui-navbar">
        <a href="#" class="weui-navbar__item weui-bar__item_on" data-id="tab1">推荐</a>
        <a href="#" class="weui-navbar__item" data-id="tab2">热点</a>
        <a href="#" class="weui-navbar__item" data-id="tab3">娱乐</a>
    </div>
    <!-- searchbar -->
    <div class="weui-search-bar" id="search-bar">
        <form class="weui-search-bar__form" action="">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" placeholder="搜索" id="search-input">
                <a href="#" class="weui-icon-clear"></a>
            </div>
            <label for="search_input" class="weui-search-bar__label" id="search-text">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="" class="weui-search-bar__cancel-btn">取消</a>
    </div>

    <!-- news-list -->
</body>
<script src="./index.js"></script>

</html>

js

const doms = {
    navbar: document.querySelectorAll('.weui-navbar__item'),
    tabs: document.querySelector('.weui-navbar'),
    searchBar: document.querySelector('.weui-search-bar'),
    searchLabel: document.querySelector('.weui-search-bar__label')
}
function navBarAddEvenetListener() {
    for (var i = 0; i < doms.navbar.length; i++) {
        doms.navbar[i].addEventListener('click', function () {
            if (this.classList.contains('weui-bar__item_on')) {
                console.log("repeat");
                return;
            }
            document.querySelector('.weui-bar__item_on')
                .classList.remove('weui-bar__item_on');
            this.classList.add('weui-bar__item_on');
            console.log(this);
        })
    }
}
function navBarAddEvenetListener3() {
    for (var i = 0; i < doms.navbar.length; i++) {
        (function (i) {
            doms.navbar[i].addEventListener('click', function () {
                if (this.classList.contains('weui-bar__item_on')) {
                    console.log("repeat");
                    return;
                }
                document
                    .querySelector('.weui-bar__item_on')
                    .classList.remove('weui-bar__item_on');
                this.classList.add('weui-bar__item_on');
            })
        })(i)
    }
}
function navBarAddEvenetListener2() {
    doms.tabs.addEventListener('click', function () {
        // event指的是触发的对象，event.target是对象元素！记住是元素结点，不是事件对象！
        // 
        // event.preventDefault();
        // if (event.target.classList.contains('weui-bar__item_on')) {
        //     console.log("repeat");
        //     return;
        // }
        // document.querySelector('.weui-bar__item_on').classList.remove('weui-bar__item_on');
        // event.target.classList.add('weui-bar__item_on');
        const target = event.target;
        if (target.nodeName == 'A') {
            event.preventDefault();
            if (target.classList.contains('weui-bar__item_on')) {
                console.log("repeat");
                return;
            }
            document.querySelector('.weui-bar__item_on')
                .classList.remove('weui-bar__item_on');
            target.classList.add('weui-bar__item_on');
        }
    })
}

doms.searchLabel.addEventListener('click', function () {
    // console.log(1);
    // console.log(event);
    doms.searchBar.classList.add('weui-search-bar_focusing');
})
navBarAddEvenetListener2();
// navBarAddEvenetListener();
// navBarAddEvenetListener3();