如何写好JS? | 青训营笔记

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

写好JS的一些原则

1.各司其职

让HTML、CSS和JavaScript职能分离。

HTML负责页面的主体；
CSS负责页面装饰；
js负责页面的行为和功能；

例子-深夜食堂🍞

第一版

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 = '🌞';
    }
  });

没有做到让CSS,HTML,JS各司其职，把css的装饰功能在js中实现。

第二版

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

这一版让CSS和JS充分的分离，各干各的事情。

2.组件封装

好的UI组件具备正确性、扩展性、复用性，封装组件是为了解决代码冗余，让代码模块化。

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构
1. 插件化
2. 模板化
3. 抽象化（组件框架）

3.过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用
有效利用高阶函数
- once
- 为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。

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

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

function HOF0(fn) {
  return function(...args) {
    return fn.apply(this, args);
  }
}

常用高阶函数
- Once
- Throttle
- Debounce
- Consumer
- Iterative

4.代码注重什么？

简洁

大多程序员会把“简洁的代码”和“聪明的代码(clever code)”混为一谈，并简单地认为“把十行代码压缩成一行以减少屏幕空间的占用”，便是简洁的代码。

效率

代码的执行效率。

性能

代码性能表现在很多方面和指标，比较常见的几个指标有吞吐量（Throughput）、服务延迟（Service latency）、扩展性（Scalability）和资源使用效率（Resource Utilization）。

吞吐量：单位时间处理请求的数量。
服务延迟：客户请求的处理时间。
扩展性：系统在高压的情况下能不能正常处理请求。
资源使用效率：单位请求处理所需要的资源量（比如CPU，内存等）。

总结

在本次的学习中，能够更好的了解到如何写好js代码，以及css 和 html。让自己的写代码水平有所提升，有所启发。为了写出更好的代码，还得继续加油，努力学习✊✊。