JavaScript学习|青训营笔记

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

一、本堂课重点内容：

二、详细知识点介绍：

• JavaScript好代码的标准

  JavaScript好代码的评判标准由各司其职、组件封装、过程抽象三点组成，具体描述如下：

  • 各司其职

    HTML，CSS，JS语言各有各的分工和负责部分

    以切换暗夜模式为例，代码分为纯CSS代码和有JS代码两种

    为了避免不必要的、由JS直接操作的样式，建议使用纯CSS语言的代码，其中可以用class表示状态

    注意纯展示类交互要求零JS方案

  • 组件封装

    组件封装旨在控制整体UI组件

    基本方法为结构设计+展现效果+行为设计（API - 功能，Event - 控制流）

    由于封装组件后的代码中控制与组件绑定，修改不够灵活，故对组件进行改进，方法分为以下三种（即三次重构）：

    插件化
    1、将控制元素抽取成插件
    2、插件与组件之间通过依赖注入方式建立联系
    
    模板化
    1、将HTML模板化，更易于扩展
    
    抽象化
    1、将组件通用模型抽象出来
    

    改进后的组件仍有缺点，即不考虑嵌套和基于CSS的模板化

    组件设计的原则有：封装性，正确性，扩展性，复用性

  • 过程抽象

    过程抽象基于函数本身，只执行一次的需求覆盖不同的事件处理，可以将需求剥离出，这样的过程即过程抽象

    抽象分为数据抽象及过程抽象，过程抽象可以使得代码更加通用，更能达到函数式编程的效果，过程抽象一般通过高阶函数实现

    高阶函数

    定义：以函数为参数和返回值，经常用作函数装饰器的函数为高阶函数
    
    常用高阶函数： Once ； Throttle ； Debounce ； Consumer / 2 ； Iterative
    
    为什么选择高阶函数： 纯函数可以提升库的可维护性
    

• JavaScript编程语言风格

  JavaScript的语言风格有命令式与声明式，可以分别通过代码达到命令式和声明式的效果，但声明式相较于命令式更为简洁。