JavaScript|青训营笔记

这是我参与「 第四届青训营 」笔记创作活动的第4天

JavaScript（简称“JS”），是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

如何写好JavaScript

写好JavaScript的一些原则：

各司其职：让HTML，CSS和JS职能分离

• 避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互需求零JS方案

组件封装：将页面中单元进行封装，提升正确性、扩展性和复用性

组件是指web页面上抽出来一个个包含模板（HTML），样式（CSS）和功能（JS）的单元。

HTML结构设计，CSS展示效果，JS行为：API功能、Event控制流（自定义事件）

好的UI组件具备封装性、正确性、扩展性和复用性。

过程抽象：应用函数式编程思想

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

深夜食堂案例

案例需求：制作一个网页，让它支持浅色和深色两种浏览模式。

这段代码是非常简单的，但是这不一定是段最优的代码，我们可以进行三次重构来使这个程序更具有复用性、扩展性等优势。

三次重构

1. 插件化

• 将控制元素抽取成插件
• 插件与组件之间通过注入分式建立联系

2. 模板化

• HTML的模板化，更易于扩展

3. 抽象化（组件框架）

• 将组件通用模型抽象出来

编程范式

高阶函数HOF

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

常用高阶函数：

• Once
• Throttle：截流函数
• Debounce：防抖函数
• Consumer：延时调用/把同步调用变成异步
• Iterative：迭代

纯函数

一般高阶函数是纯函数

纯函数的好处：在任何时候想测试都不用构建环境，提升可维护性（非纯函数测试要写test case）