万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

用 JS 封装一个库的基本思路

2023-4-21 17:00| 发布者: wanhu| 查看: 144| 评论: 0

摘要: Hello大家好：今天我尝试用 JS 来实现 jQuery 中最简单的 API：addClass，一共有三种写法：第一种写法：闭包!DOCTYPE html html lang="zh" head meta charset="UTF-8" meta http-equiv= ...

Hello大家好：今天我尝试用 JS 来实现 jQuery 中最简单的 API：addClass，一共有三种写法：

第一种写法：闭包

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;//字体大小
}
div{
margin: 20px;//外边距
}
.red{
border: 10px solid gray;//边框
}
.green{
background: lightgreen;//背景色
}
</style>
</head>
<body>
<div class="red">1</div>
<div class="red">2</div>
<div class="red">3</div>
<div class="red">4</div>
<div class="red">5</div>
<div class="red">6</div>
<div class="red">7</div>
<div class="red">8</div>
<div class="red">9</div>
<div class="red">10</div>
<script src="main.js"></script>
</body>
<script>
function jQuery (选择器字符串) {//声明一个函数jQuery名字叫（选择器字符串）

const 所有标签 = document.querySelectorAll(选择器字符串)//选中所有（选择器字符串）并且赋值给所有标签

return {
addClass(className){
for (let i = 0; i < 所有标签.length; i++) {
const 标签 = 所有标签[i]
标签.classList.add(className)
}
}
}
}

const $ = jQuery//把jQuety赋值给$

$('.red').addClass('green')
</script>
</html>

第二种方法：原型

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

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;
}

div {
margin: 20px;
}

.red {
border: 10px solid gray;
}

.green {
background: lightgreen;
}
</style>
</head>

<body>
<div class="red">1</div>
<div class="red">2</div>
<div class="red">3</div>
<div class="red">4</div>
<div class="red">5</div>
<div class="red">6</div>
<div class="red">7</div>
<div class="red">8</div>
<div class="red">9</div>
<div class="red">10</div>
<script src="main.js"></script>
</body>
<script>
function jQuery(选择器) {
const 标签伪数组 = document.querySelectorAll(选择器);
this.标签数组 = Array.from(标签伪数组);
}
jQuery.prototype = {
constructor: jQuery,
addClass(className) {
this.标签数组.forEach((标签) => {
标签.addClass.add(className);
});
}
};
const $ = jQuery;

const button = document.getElementById("btn");
button.onclick = function () {
new $(".red").addClass("green");
};
</script>
</html>

第三种：使用类

因为很少使用类所以就不写了