写好js｜ 青训营笔记

sleep_earily
82 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3天 重点：如何写好js

原则

  1. 各司其责
  2. 组件封装
  3. 过程抽象——函数式编程

各司其责——js尽量不控制样式

控制黑色白色切换北京 字体切换/背景颜色切换/动画过渡 ——js直接操作body样式，样式不鲜明 image.png

优化1： 设置两个class进行切换

image.png

优化2：仅使用css 使用input checkbox控制是否为黑夜 利用label标签可以转义焦点的特性，修改input的值 使用伪类进行黑夜/白天判断

jacode ————掘金应该搞个防抖节流，每次文章修改都要重新渲染添加的代码片段

组件封装——轮播图实战

css定位将图片重叠在同一位置 用修饰符modifier实现状态切换 切换动画用transiton

组件行为：

  • api(功能)
  • Event(控制流)

优化

  1. 插件化——解耦：
  • 将所有功能用函数写出，分别分离出来
  • 使用一个函数注册所有功能函数
  1. 模板化
  2. 抽象——组件框架(没考虑嵌套)

image.png

过程抽象——处理局部细节

  1. 处理局部细节
  2. 函数式编程思想

once()函数保证传入的函数只执行一次=>把只执行一次的需求剥离出来，即过程抽象，通常使用高阶函数作为过程抽象的

高阶函数——转换成纯函数

  1. 以函数作为参数
  2. 以函数作为返回值
  3. 常用于作为函数装饰器

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

image.png

常用的高阶函数

  • Once
  • Throttle——节流
  • Debounce——防抖
  • Consumer——多次点击，延迟显示
  • Iterative

consumer涉及改变this指向的三种方法： call,apply,bind 目的：改变函数this指向，以便输入函数后，在函数内部通过this.属性值方式对传入对象使用方法 输入：第一个参数是this指向，第二个是函数参数 输出：call和apply返回的函数立即执行——临时改变this指向；bind返回的是函数，需要调用才能执行——永久g改变this指向(这个函数生效)

函数分为纯函数和非纯函数

  • 纯函数：函数与外界交换数据只有一个唯一渠道——参数和返回值
  • 非纯函数：比如，读取全局变量，修改全局变量，都叫作以隐式的方式和外界进行数据交换；比如，利用I/O API（输入输出系统函数库）读取配置文件，或者输出到文件，打印到屏幕，都叫做隐式的方式和外界进行数据交换。

非纯函数由于有其他数据参与，需要配置环境，不好测试，因此，使用高阶函数将非纯函数转换成纯函数

使用声明式实现简洁的代码

  • 命令式编程：命令“机器”如何去做事情 (how) ，这样不管你想要的是什么(what) ，它都会按照你的命令实现。
  • 声明式编程：告诉“机器”你想要的是什么(what) ，让机器想出如何去做 (how)。

image.png 第二个是声明式代码，简洁

事例

由原本

image.png 切换为 tmp87B7.png

抽象方法

  1. 数据抽象——将数据转换成对象，通过遍历显示
  2. 过程抽象

补充apply/call/bind使用： 传参第一个是this指向，后面是需要的参数 bind返回的是函数，需要接收后再传参

image.png

一些js题目

  1. 4的幂次——判断是2的幂(n&(n-1)==0)，判断1在偶数位n&AAAAAAA=0

  2. 洗牌，不能用sort交换位置，将数组最后一个与当前数据交换位置，不能与下一个；洗几张就yield出来，不用全洗

  3. 分红包：

总结：

  1. 各司其责——html/css/js
  2. 组件封装——插件化/模板化/
  3. 过程抽象——函数式编程
  • 使用高阶函数纯函数化
  • 声明式实现需求简洁化
avatar
文章
阅读
粉丝