走进JavaScript

这是我参与 $\color{#1d7dfa}{「第五届青训营」}$ 伴学笔记创作活动的第3天。

一、JavaScript 编码原则之各司其责

HTML/CSS/JavaScript各司其责
应当避免不必要的由Js操作样式
可以用class表示状态
纯展示类交互追求零Js方案
$\color{green}{深夜食堂案例：}$

第一种方案（主要代码部分）：通过js直接操作css样式，更改颜色属性值

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更改html元素类名，应用不同类名样式

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

第三种方案（主要代码部分）：直接通过label标签实现切换效果

<body>
    <!-- 隐藏input -->
    <input id="modeCheckBox" type="checkBox">  
    <div class="content">
        <header>
            <!-- <label> 标签为 input 元素定义标注（标记）。  
             label 元素不会向用户呈现任何特殊效果。不过，它为
             鼠标用户改进了可用性。如果您在 label 元素内点击文
             本，就会触发此控件。就是说，当用户选择该标签时，浏
             览器就会自动将焦点转到和标签相关的表单控件上。<label>
             标签的 for 属性应当与相关元素的 id 属性相同。 -->
            <label id="modeBtn" for="modeCheckBox"></label>
            <h1>深夜食堂</h1>
       </header>
        <main>
        ...
        </main>
    </div>
</body>

二、JavaScript 编码原则之组件封装

这部分内容和后面部分内容目前我还无法详细阐述，所以放了相关文章的链接，在我认真参悟之后更新完善。

$\color{#ff8902}{组件：}$ 组件是指从Web页面抽出来一个个包含模板（HTML）、功能（Js）、样式（CSS）的单元。一个好的组件具有封装性、复用性、正确性、扩展性。
$\color{#ff8902}{组件封装的基本方法步骤：}$ （1）结构设计（HTML） $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ （2）展现效果（CSS）

$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ （3）行为设计（Js） ----API(功能)、Event(控制流)

$\color{#ff8902}{组件设计的原则：}$ 封装性、复用性、正确性、扩展性。
$\color{#ff8902}{三次重构：}$ 插件化、模板化、抽象化(组件框架)。

三、JavaScript 编码原则之过程抽象

$\color{#1e80ff}{过程抽象：}$ 过程抽象是用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。
$\color{#1e80ff}{高阶函数：}$ 高阶函数是对其他函数进行操作的函数。它或者形参列表里有函数，或者返回一个函数，常用于函数修饰器。
$\color{#1e80ff}{编程范式：}$ 声明式、命令式。

$\color{#1e80ff}{相关文章：}$ JavaScript 高阶函数入门浅析 (freecodecamp.org)

$~~~~~~~~~~~~~~~~~~~~$ Javascript 面向对象编程（一）：封装 - 阮一峰的网络日志 (ruanyifeng.com)

$~~~~~~~~~~~~~~~~~~~~$ 组件封装细则 - 简书 (jianshu.com)

$~~~~~~~~~~~~~~~~~~~~$ 前端60s 一分钟了解编程范式 - 掘金 (juejin.cn)

JavaScript 编码原则 | 青训营笔记

走进JavaScript

一、JavaScript 编码原则之各司其责

二、JavaScript 编码原则之组件封装

三、JavaScript 编码原则之过程抽象