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

如何写好JS

各司其职

HTML负责结构、CSS负责表现、JS负责行为，结构、表现、行为应当分离

应当避免不必要的通过JS修改CSS样式，可以用class表示样式，场景可能可以使用纯样式实现

代码案例——切换主题色

场景1

获取DOM节点，addEventListener监听click事件，直接修改其CSS属性值

场景2

新增night class样式，同样监听，通过新增class样式切换

场景3

纯CSS，通过伪类选择权:checked触发进行样式控制

组件封装

结构设计=>展现效果=>行为设计，好的组件具备封装性、正确性、扩展性、复用性

代码案例——轮播图

CSS

• 使用CSS绝对定位将图片重叠
• 使用修饰符实现轮播图切换
• 切换使用CSS transition

JS

• 定义JS类Slider
• 定义类方法api
  • 获取当前轮播元素
  • 获取当前元素下标
  • 轮播切换

改进

• 插件化-解耦、拓展性
• 模版化-数据驱动HTML
• 抽象-形成组件框架

过程抽象

用于处理细节控制的一些方法，函数式编程思想的基础应用

高阶函数：

1. 以函数作为参数和返回值
2. 常作于函数装饰器

function once(fn) {
    // 闭包
    return function(...args) {
        if (fn) {
            const ret = fn.apply(this, args);
            fn = null;
            return ret;
        }
    }
}

• 命令式：更强调怎么做
• 声明式：天然可拓展

编码规范

写代码应注重风格、效率、约定、使用场景和设计

总结思考

今日课程收获较大，课程作者并不是将JS API一个个列举讲出来，而是通过代码实际案例一步步分析什么样的JS代码是好的JS代码。在自己的开发实践过程中也越来越感慨设计原则和设计模式的重要性。软件设计最大的难题就是应对需求的变化，但是纷繁复杂的需求变化又是不可预料的，我们要为不可预料的变化做好准备，因此就很有必要在编码的环节做足功夫，保障代码的易维护性、易拓展性、可读性、兼容性等。这可能也就是我们与前辈编写代码时的主要区别。