学好JavaScript（一）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 4 天重点内容两种编码

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

重点内容

两种编码原则

详细介绍

编码原则

各司其职

HTML，CSS和JS职能应当分离
举一个例子，设计支持浅色/深色模式的网页

简单粗暴：监听按钮文本，修改style（JS控制样式CSS的内容，代码不直观）
类名为主：根据类名判断，修改类名（更加简洁，代码更直观）
纯CSS：利用checkbox的checked状态，利用兄弟节点选择器进行修改

<input id="modeCheckBox" type="checkbox">
<div class="content">
    <label for="modeCheckBox" id="modeBtn" />
    ...
</div>

其中input元素设置display: none，由label进行控制
HTML控制结构，CSS控制展示，JS控制行为，各司其职。我们应当避免不必要的操作样式，纯展示类的交互可以寻求零js方案

组件封装

好的组件一般具有以下特点

封装性
正确性
扩展性
复用性

举个例子：轮播图组件

HTML（结构设计）：使用无序列表作为结构

CSS（展示效果）：绝对定位令图片重叠，使用transition和`opacity实现切换的动画
JS（API和控制流）
- api包含获取当前内容、当前下标、切换到某一张、切换到上一张、切换到下一张
- 可以定义一个类
  - 构造函数：从HTML获取盒子和其中元素
  - 获取当前内容：类名匹配
  - 获取当前下标：数组操作
  - 切换：修改当前内容和目标内容的类名
  - 下一页：获取下标，切换到idx+1
  - 上一页：获取下标，切换到idx-1
- 控制流（四个小圆点和上页下页按钮）
  - 使用自定义事件解耦
  - 监听slide自定义事件，根据idx设置切换器状态
  - 切换的时候定义一个自定义事件

API设计应保证原子操作，指责单一，满足灵活性

重构：插件化

控制元素（按钮和圆点）抽取成插件
插件和组件之间通过依赖注入建立联系
先注册插件，再启动轮播图
注册插件的地方进行事件绑定等操作

registerPlugins(...plugins) {
    plugins.forEach(plugin => plugin(this));
}

重构：模块化

通过类的render方法，渲染图片

render() {
    const images = this.options.images;
    const content = images.map(image => `
        <li class="slider-list_item">
            <img src="${image}" />
        </li>
    `.trim();
    return `<ul>${content.join('')}</ul>`

插件渲染的时候，令innerHTML为其具体的HTML渲染

registerPlugins(...plugins) {
    plugins.forEach(plugin => {
        const pluginContainer = document.createElement('div');
        pluginCOntainer.className = '.slider-list_plugin';
        pluginContainer.innerHTML = plugin.render(this.options.images);
        this.container.appendChild(pluginContainer);
        plugin.action(this);
    });
}

重构：抽象化（组件框架）

将组件通用模型抽象出来
渲染作为抽象方法出现各自实现

个人总结

两种关键的js编码原则

学好JavaScript（一）｜ 青训营笔记