Day 04 如何写好JS代码 | 青训营

写好JS的原则一:各司其责

让HTML、CSS和JavaScript职能分离

例:深夜食堂(写一段JS、控制一个网页,使其支持深色和浅色两种模式

版本一:

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

版本二:

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

版本三:

html
复制代码
<input id="modeCheckBox" type="checkbox"> <div class="content"> <header> <label id="modeBtn" for="modeCheckBox"> <h1>深夜食堂</h1> </header> ........ </div>
css
复制代码
#modeCheckBox { display: none; } #modeCheckBox:checked + .content { background-color: black; color: white; transition: all 1s; }

代码对比: 版本二比版本一的代码更加整洁,版本一通过JS直接操作元素的style,而版本二是操作了classNam,且在开发中我们通常使用className来定义元素的状态。版本一中使用JS做了CSS该做的事情,没有做到HTML、CSS、JS的各司其责。版本二做到了结构表现行为分离,但是在纯样式改变的情况下只用CSS就可以实现,因此版本三是最佳的。

总结:HTML负责结构,CSS负责表现,JS负责行为,且在纯样式改变的情况下最好只用CSS控制样式,不去添加JS行为。各司其责的意思便是结构、表现、行为分离,这是在前端开发中所要遵循的一个原则。

写好JS的原则二:组件封装

好的UI组件具备正确性、扩展性、复用性

- 组件封装:组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)、和样式(CSS)的单元。好用的组件具备封装性、正确性、扩展性、复用性。

- 组件设计的原则:封装性、正确性、扩展性、复用性。

- 实现组件的步骤:结构设计、展现效果、行为设计

- 三次重构:

  • 插件化
  • 模板化
  • 抽象化(组件框架)

写好JS的原则三:过程抽象

应用函数式编程思想

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

高阶函数

- Once: 为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程就称为过程抽象

- HOF

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

- 常用高阶函数

  • HOF(Once、Throttle、Debounce、Consumer/2、Iterative)

- 编程范式

  • 过程抽象/HOF/装饰器
  • 命令式/声明式

总结

三个写JS代码的原则

一:各司其责,HTML、CSS。JS分别负责它们各自的任务,即结构、表现与行为。

二:组件封装,组件封装的原则即考虑其复用性、可扩展性、正确性。对组件抽象,做插件化、模板化,从而实现组件框架。

三:过程抽象,针对局部细节的实现与行为可以使用过程抽象,其是函数式编程的一个基本应用,其具有命令式和声明式两种不同的编程范式,声明式比命令式更具有可扩展性,在日常开发中我们可以更多的去考虑使用声明式来编写代码。