Jul. 27th 笔记 - 跟着月影学 JavaScript

这是我参与「第四届青训营」笔记创作活动的的第4天

各司其职

我们知道，在前端技术栈中，在客户端层面，我们有：(JavaScript 行为) (CSS 样式) (HTML 内容)。在这里，我们写代码时，应该尽可能的让三者职责分离，让他们负责自己应该负责的部分。

例子：深色模式切换

版本1

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '🌞') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌜';
} else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
}
});

这种模式显然不够好，我们在js中操作了body的style，修改了元素的样式和结构，结构变得混乱。

版本2

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
    body.className = 'night';
} else {
    body.className = '';
}
});

版本2仅仅是修改了元素的类名className，可以更灵活变更样式需求。

版本3

<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
    <label id="modeBtn" for="modeCheckBox"></label>
    <h1>深夜食堂</h1>
</header>
<main>
    <div class="pic">
    <img src="location">
    </div>
    <div class="description">
    <p>
        text
    </p>
    </div>
</main>
</div>

这样，我们让选中状态用伪类选择器#modeCheckBox:checked 来标记深色模式，成功避免了使用js。

结论

HTML/CSS/JS 各司其责
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案

例子：轮播图

重构：插件化

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系
提高了组件的可扩展性

重构：模板化

将HTML模板化，更易于扩展
提高了组件的可扩展性

重构：抽象化

将组件通用模型抽象出来
利于复用

Jul. 27th 笔记 - 跟着月影学 JavaScript｜ 青训营笔记