如何写好JavaScript

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

第一 做到html、css、JS各司其职

第二 好的UI组件具备正确性、拓展性、复用性。

第三 应用函数式编程思想

案例-深夜食堂

第一版的夜间模式切换纯靠JS，但其实样式如果给到CSS来完成是更好的，JS负责状态的改变；

也就有了第二版，避免了不必要的由JS直接操作样式，用class来表示状态，JS来改变class。

第三版将全部交给了CSS，如果是纯展示类交互可寻求零JS方案。

案例-网站轮播图

第一步 轮播图是一个典型的列表结构，我们可以用无序列表元素ul来实现

第二步 用CSS的绝对定位将图片重叠，用修饰符(modifier)实现状态的切换，轮播图的动画切换使用CSS transition

第三步 行为API用JS的Slider的xxx

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离处理。这个给过程叫做过程抽象

HOF 高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

构造函数

构造函数的执行流程：

1. 立刻创建一个新的对象
2. 将新的对象设置为函数中this，在构建函数中可以使用this来引用新建的对象
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回

对象解构

不实用默认参数的时候，为了避免undefined错误，我们是这样来实现的：

const someMethod = (param) => {
    const value = param || "default value";
    return value;
}
​
console.log(someMethod());
​
// 或者可以使用null判断符号
const someMethod = (param) => {
  const value = param ?? "default value";
  return value;
}
​
console.log(someMethod());
​

对象结构后

const newObj = { {
      title: 'Default Title',
      subTitle: 'Default Subtitle',
      buttonColor: 'blue',
      disabled: true,
    },...someObject}
​