《如何写好JS》个人笔记 | 青训营

74 阅读2分钟

JavaScript是目前web开发中不可缺少的脚本语言,JS不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JS代码。

其特点为:

  • 开发工具简单,记事本即可
  • 无需编译,直接由JS引擎负责执行
  • 属于弱类型语言,由数据决定数据类型
  • 面向对象

其中有些相关概念:

  • 核心(ESMAScript):描述了该语言的语法和基本对象,用来操作浏览器上的对象。
  • 文档对象模型(DOM):描述处理网页内容的方法和接口,用来操作网页中的元素。
  • BOM:浏览器对象模型与浏览器进行交互的方法和接口(如浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作)

学会写JavaScript是基础的第一步,而要写好JavaScript则是提升的第一步。

写好JavaScript需要遵循三个原则,即:各司其责、组件封装和过程抽象。

接下来我将一一介绍这三个原则。

一、各司其责:即让HTML、CSS和JS职能分离

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

与之相关的案例:切换网页白天模式和夜间模式

二、组件封装

基本方法:

  • 结构设计
  • 展现效果
  • 行为设计:API功能以及Event控制流

重构:插件化、模板化、抽象化

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

与之相关的案例:网页的轮滑框

三、过程抽象:即函数式编程思想的基础应用

高阶函数(HOF):

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
function HOF0(fn){
   return function(...args){
     return fn.apply(this,args);
     }
}

常用的高阶函数:

  • Once(多次触发事件时,以第一次为准)
  • Throttle(节流函数,限制一个函数在一定时间内只执行一次)
  • Debounce(变化超过一定时间后自动保存)
  • Consumer/2(延时调用)
  • iterative(批量操作纯函数与非纯函数)

与之相关的相关案例:ON OFF开关的转换

自我感受

作为刚对前端有些了解的初学者,遗憾的是,我只能勉强了解老师讲的案例的基本思想和概念,若要想有自己独特的解放方式和想法,还需要继续钻研,努力学习,也希望能和大家一起交流进步!