写好的javascript代码（上） | 青训营笔记

midjuly
35 阅读3分钟
这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

本课程并不从基本语法出发，主要从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，讲解三大原则

原则一：各司其职

让HTML、CSS、和JavaScript职能分离

例子说明

需求：写一段JS，控制一个网页让它支持浅色和深色的两种浏览模式，应该如何实现？

方案一

image.png 该方案实现了点击太阳标记完成转换的基本功能
方案问题：body.style类的代码实际上是在JS中进行样式的修改，应该进行分离将样式修改全部留在CSS中，而不是在JS中进行实现。

方案二

image.png 该方案通过定义了night类，JS点击按钮时只涉及到类的转换，具体各种类对应的样式交给CSS来决定

方案三

image.png 该方案为无JS的版本，纯粹使用CSS完成样式的切换，涉及到CSS的高级功能，设置伪类，增加了一个checkbox。

结论

image.png

  • HTML/CSS/JS各司具责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 展示类交互寻求零JS方案

原则二：组件封装

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

例子说明

实现一个电商网站上常见的轮播图，如下图：

image.png 结构：HTML
轮播图是一个典型的列表结构，可以通过无序列表ul元素实现。
表现：CSS

  • 使用CSS 绝对定位将图片重叠在同一位置
  • 轮播图切换的状态使用修饰符（modfier)
  • 轮播图的切换动画使用CSS transition

行为：JS

  • Slider
    • +getSelectedItem( )
    • +getSelectedItemindex()
    • +slideTo()
    • +slideNext()
    • +slidePrevious()

UI组件基本方法总结

  • 结构设计
  • 展现效果
  • 行为设计
    • API(功能）
    • Event(控制流）

改进方向

重构：插件化：解耦，将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。
HTML的模板化：更易于拓展

image.png

总结

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

原则三：过程抽象

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

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

image.png

高阶函数 HOF

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

image.png 纯函数：输入一定，输出就一定 非纯函数：可能改变外部状态，比如运行次数计数

编程范式

命令式与声明式

image.png 命令式代码

let list = [1, 2, 3, 4];
let mapl =[];
for(let i=0; i < list.length; i++){
    mapl.push(list[i] * 2);
}

声明式代码

let list = [1, 2, 3, 4];
const double = x => x*2
list.mapl(double);
avatar
文章
阅读
粉丝