前端项目中用到的技术

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

视图框架

react 框架，能够帮助前端开发充分利用声明式的语法特性，完成状态到视图的映射。

其包含两部分，一个是 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 也是不错的选择。