写项目开发时的问题-CSDN博客

本文链接：https://blog.csdn.net/2302_80391964/article/details/137748582

一、学习过程

一、判空方法

通用的判空方法，包括对象与数值

const isEmpty = (value) => {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    };

数值的简易判空方法

！value等于value==null&&value==“’

if(!value){
//包括了undifined与空字符串
}

二、模块化设置

语法

分别暴露

具体模块化引用：

统一暴露

默认暴露

导入模块

三、classlist与classname区别

1.classname特点

1、由于class是关键字，所以使用className去代替

2、className是使用新值换旧值，如果需要添加一个类，就需要保留之前的类名

3、可以同时指定多个样式类名，以空格分隔，空格的数量>=1

4、className的缺点：会覆盖元素之前的样式，所以在以后使用插件或者框架的时候，我们往往并不是很方便的知道当前元素之前加了什么样式，意味着我们在使用calssName的时候，风险很大，如果你能确定元素就是一个样式，那么就可以使用className。

2.classlist特点（最好用classlist风险更小）

var a = document.getElementBy("DIV");
1.a.classList.length 
//使用classList返回所选元素的类名，是一个数组，一个类名占一个长度 2.a.classList.add("classname1") ; 
//添加一个类名 
3.a.classList.remove("classname2") ; 
//去掉一个类名
4.a.classLis.toggle("classname3"); 
//引号中的类名，有就删除，没有就添加。比较智能的结合了1,2点，用于切换十分方便 
5.a.contains("classname4"); 
//判断一个类型是不是存在，返回true和false

1、classList不会修改元素之前所用的样式

2、同时增加多个样式，传递多个样式名称参数，以“ ，”分隔

3、toggle方法：如果有样式就是移除，没有就是添加，而且只能切换一个

四、如何监听input输入框值的实时变化方法

1、input框自带的oninput事件

dome.oninput = function () {

}

2.使用监听器addEventListener

<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" />

document.getElementById("a").addEventListener("onporpertychange",function(e){
console.log("inputting!!");
}

五、事件绑定区别

普通事件绑定与监听器绑定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
	
    <button id="btn">button</button>
    
    <script type="text/javascript">
    
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            alert('普通事件1');//不执行
        }
        btn.onclick = function () {
            alert('普通事件2');//弹出
        }

//      上面用普通方法添加两个事件，下面用事件绑定添加两个事件。

        btn.addEventListener('click', function  () {
            alert('事件绑定1');//弹出
        },false);
        btn.addEventListener('click', function  () {
            alert('事件绑定2');//弹出
        },false);

    
    </script>
</body>
</html>

上面代码执行后依次会弹出：普通事件2、事件绑定1、事件绑定2。

总结：普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖。