JS学习|青训营笔记

Mr_cold
72 阅读3分钟

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

JS学习|青训营笔记

犀牛书，红宝书(权威学习)

写好JS的原则

  • 各司其职：让html，css，js职能分离
  • 组件封装：好的UI组件具备正确性，扩展性，复用性
  • 过程抽象：应用函数式编程

各司其职

各自发挥各自的作用，互不影响。

QQ截图20230118205055.jpg

组件封装

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

组件例子：轮播图

QQ截图20230118205800.jpg

轮播图原生实现

结构：HTML 轮播图为典型的列表结构，可以使用无序列表ul元素来实现

image.png 表现：CSS

  • 使用CSS绝对定位将图片重叠到一起
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用CSS transition

image.png

行为：JS

API设计应保证原子操作，指责单一，满足灵活性。

image.png

行为：控制流

使用自定义事件来解耦

image.png

image.png

最终界面

组件实现基本方法

  1. 结构设计
  2. 展现效果
  3. 行为设计 API(功能) Event（控制流）

原生轮播图重构优化

插件化

即插即用，方便删除

  • 将控制元素抽取为插件
  • 插件和组件之间通过依赖注入方式建立联系

image.png

模板化

将HTML模板化，更加易于扩展 image.png

抽象

将通用的组件模型抽象出来 image.png

重构优化后界面

组件封装总结

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

尽管在模板化中，在js中生成了html的代码，有时也可以对CSS进行模板化，在js中也可以生成CSS代码，但这并不违反各司其职原则，各司其职指的是作用上的，各自做应当做的事，生成在用一个文件中并不违背。

过程抽象

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

高阶函数

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

下图为“只执行一次”的高阶函数。

image.png

高阶函数 HOF：

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

![image.png](p9-juejin.byteimg.com/tos-cn-i-k3… 87a418b05fcd4d7a99dc340f8bd6866c~tplv-k3u1fbpfcp-watermark.image?)·

常用高阶函数

为什么要用高阶函数

编程范式可分为命令式和声明式

命令式：

程序命令做什么

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

声明式： 程序声明做什么

let list=[1,2,3,4];
const double = x=> x*2;
list.map(double);

声明式比命令式具有天然的扩展性，而高阶函数即为声明式的。

如何写好JS代码

最应该关注：使用场景

Leftpad 事件：

个人总结

经过js的课程的学习后，我对前端的运作，以及写好js代码的原则有了进一步的了解。不仅从理论上更深入地学习，课程中的实例也让人受益匪浅。

我印象深刻的是要写好js代码，更重要的是要从使用场景出发，效率高很好，但有时没有必要，不如写更加的简洁易懂，这将会为我之后写代码提供宝贵的思路。

avatar
文章
阅读
粉丝