> For the complete documentation index, see [llms.txt](https://chenzhihui.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chenzhihui.gitbook.io/note/basic/tech.md).

# 前端项目中用到的技术

整理一些目前工作中用到的前端库和框架。

## 视图框架

[react](https://zh-hans.reactjs.org/) 框架，能够帮助前端开发充分利用声明式的语法特性，完成状态到视图的映射。

其包含两部分，一个是 react 核心，使用组件来封装程序的状态、管理组件生命周期，这里的组件是抽象，不与任何的底层视图耦合，只描述程序的状态逻辑。从组件的语法 JSX 来看，react 核心组件提供使用当前状态生成视图描述。react 可以对接额外的渲染库用于衔接 react 组件状态模型与真正的视图对象，当使用的是 react-dom 时，将 react 元素挂载到 DOM 容器中，最终生成的是一个浏览器的 DOM 树。 

从更加抽象的层次来看，任何使用组件层级描述的程序，都可以使用 react 来进行建模、描述，比如 3D 对象，人可以由骨骼、材质、动画元素组成；图表可以有图形、坐标轴、tooltip、色系组成。

甚至是后端的程序，也可以组件化描述，但是后端程序一般都是无状态的请求处理管道， react 描述的程序对于这种处理方式并不算优良，所以常见的后端程序都是使用责任链模式匹配相应的处理逻辑，再调用服务完成业务。

## 数据处理、状态管理

lodash / ramda / jsonata / rxjs 

lodash 是每个前端工程师手上的强力工具，内含有许多针对 js 数据的处理方法，同时 lodash 的方法性能、鲁棒性都很强。如：`_.map(data,item=>item*2)` 可以用于遍历数组和对象的值，生成新的数据，如果 data 是空，那么 lodash 会返回空的数组而不会报错，不使用 lodash 的情况下需要自己先判空，再决定是否调用方法。这种场景在很多地方都适用。lodash 的一些方法是隐式的， 如`_.map(data,'key')、_.groupBy(data,'key')、_.maxBy(data,'key')` 使用对象的键声明式的操作，减少了不必要的箭头函数。

ramda 是一个函数式工具库。相比 lodash，ramda 的方法更加函数式、显式，并且 ramda 的方法是 curry 化的，配合data last 的调用风格使得 ramda 可以很容易的创造出可以服用的函数来。

jsonata 是一个 JSON 超集语言，用于描述数据的转换逻辑比 lodash 还要简洁，其中可以运行一些数据转换的逻辑来生成 json。

rxjs，被称为是异步的 lodash，面向实时的事件流场景，配合其丰富的流操作符，可以处理相当复杂的同步、异步逻辑。相比于 Promise 这样一次性的“推”逻辑，rxjs observable 是持续不断地作用的，特别适合用于描述前端这种复杂状态交互逻辑。在我的项目中，rxjs 用的很多，用于 react 组件的状态管理（局部或全局），完全不在话下。rxjs 的灵活性可以完爆各种类型的状态管理工具，同时它的上手难度比较高，需要勤加练习。

## 日期处理

moment、dayjs、date-fns

moment是一个面向对象的日期工具库，官方已经停止了维护（因为太重了）

dayjs 是 moment 的轻量级实现方案，支持很多主要的接口，它的方法都是返回新的日期对象，因此是函数式的。

date-fns 是一系列的日期工具函数，其并没有像 moment、dayjs 一样自己定义了一种日期对象，而是直接使用了 js 原生的 Date 对象，也就是说，它的参数都是直接操作原生日期对象。

## 请求

axios / rxjs.ajax

axios 是前端社区用的比较多的请求库。

rxjs 的 ajax 也是不错的选择。