如何写好JS|青训营笔记

mmya
99 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第2天，如何学好JS呢？1.各司其职；2.组件封装；3.过程抽象

一、各司其职

  1. 让HTML、CSS和JavaScript职能分离
  • 结构、表现、行为分离
  • js控制css（行为逻辑较多，可用很少的行为逻辑实现样式切换，样式通过css实现），缺点：可读性不高，当别人看的时候，没有那么一目了然（如下图所示）

image.png

image.png 2. 使用checkbox控制样式切换（零js方案）：

  • html操作：让这个复选框隐藏，给它的id与目标切换的组件for设置一样的名字，这样点击目标组件就相当于点击复选框
  • css操作：#名字：checked + .content{设置需求样式}代表选中复选框的样式，不选中就默认样式 这样就实现了样式切换
  1. 总结：
  • HTML/CSS/JS各司其责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案

image.png

二、组件封装

  • 组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(cSS)的单元。

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

总结：

  • 基本方法
  1. 把写好的组件放到components文件夹下；
  2. 在使用的页面进行引用和注册组件；
  3. 使用该组件
  • 结构设计
  • 展现效果
  • 行为设计 API(功能)和Event(控制流)

三、过程抽象

  • 应用函数式编程特点
  1. 函数式编程的第一个特点就是可以把函数作为参数传递给另一个函数，也就是所谓的高阶函数。
  2. 函数式编程的第二个特点就是可以返回一个函数，这样就可以实现闭包或者惰性计算：
  • 过程抽象/HOF/装饰器
  • 命令式/声明式
avatar
文章
阅读
粉丝