者 | 司徒正美

责编 | 伍杏玲

2019年在整体上，前端的主流框架没有太大的变化，业务代码仍由三大框架（React、Vue、Angular）所主宰着，打包工具一般仍使用webpack、Rollup.js，状态管理器还是Redux、MobX。

但随着这两年崛起的新框架与类库，一些细微之处悄悄地起变化了，这些变量可能在未来推动着前端的发展。因此本文为大家介绍国产十大新兴前端框架，毕竟开发者对一项技术的关注，是技术发展的动力。

ramda

近几年来，前端面试的难度上了一个档次，我们前端工程师要刷 LeetCode， 要手写一大堆工具函数：函数节流、防抖、数组去重、扁平化，对象深拷贝等。

这些方法大家可以从网上搜，但代码质量可能不太好，可能面试官不认可你的实现，因此更好的学习方法是从 Underscore.js 抽取出来学习。

国外开发者 Underscore.js ，推出另一个高性能版本叫 Lodash，但是方法间互相调用，盘根错节，使用起来较麻烦。

自从 Redux 将函数式编程带火后， Underscore.js 又有一个函数式版本，就是 ramda，其代码清晰易懂，且可以让我们学到更多函数式编程技巧。

官网: https://ramdajs.com/

GitHub Star：17.8k

WeUI

WeUI原来是微信官方团队为微信Web开发打造的一个样式库，类似于 Bootstrap，但它只是运行于浏览器端。微信小程序在CSS与浏览器有许多出入，如不能使用标签选择器、ID选择器与众多伪类，因此在微信小程序火起来后，官方又将这个库兼容到小程序上。

官网：https://github.com/Tencent/weui

GitHub Star：23.9k

ColorUI

ColorUI 是小程序组件库，但不是纯样式库。由于WeUI有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。

ColorUI 的两大特点：

1、颜色鲜艳饱满；

2、基于uni-app 开发，可运行于多种小程序中。未来跨端开发将成为前端的主流工作方式，打通更多分销渠道是必然趋势。而跨端转译框架只用编写一份代码，就能跑N个平台，能变相提高产能，降低成本，深得大家的好评。

官网：https://github.com/weilanwl/ColorUI

GitHub Star：7.3k

Omi

腾讯出品的跨终端框架 Omi，它最初只是个模仿 Vue.js 的迷你框架。后来经过不断地技术升级，现在能支持微信小程序和 QQ 小程序，并且能与腾讯其他前端库相组合，可适用于更多场合（SVG、Markdown、SSR等）。

Omi 具备以下优点：

1、支持多种渲染引擎。支持JSX、Mustache模板技术、HTM（Hyperscript Tagged Markup）。Omi 最大的优势是不需要经过 Babel 复杂的转译，简单易懂。

2、Omi 是国内最先实践 Web Component 的框架， Web Component 有个明显的优势是易于调试，对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构如下：

3、Omi 是个跨平台框架，Omi 针对不同的平台，推出不同的渲染层，可以有效降低开发成本。

4、Omi 生态强大，有点像阿里的 KISSY，大多数是同事贡献代码，但是腾讯也好，阿里也好，他们的同事水平都是业务一流的，这就保证了生态圈内的插件不会参差不齐。

官网：http://tencent.github.io/omi/

GitHub Star：10.6k

Taro

与 Omi 的演化路线相反，京东出品的 Taro 一开始便支持跨平台。

Taro 是第二代转译框架，之前许多小程序框架都是走 vue 路线，在运行时处理小程序兼容问题。

但随着越来越多的小程序推出，如果要兼容3～5种小程序，前端工程师要在业务代码中加许多 if-else 分支，这些在当前平台上无效的代码也无法删除，徒然浪费资源。

Taro 使用 React 技术栈开发小程序，在编译期转换代码，删掉非本平台的代码，因此生成的代码更精练。

Taro 有以下特点：

1、公司投入的研发资源较多，据了解，目前有 7、8 个不同事业部的团队介入这框架的开发，共同解决很多问题，包括小程序转 H5、小程序转 RN、小程序转其他小程序等。

2、拥有微信小程序原生转 Taro 代码的工具，这样可以吸引那些已经用微信原生代码写好小程序的公司转换代码，方便他们更一步布局更多小程序平台。

3、Taro 迁移了 Redux、MobX、Router、UI 库这整套全家桶都移植过来，是 vue 系不可比拟的。

4、Taro 的社区运营得非常好，单拿 GitHub 上的 issue 运营来说，有机器人自动回复提问者，并且把过往已经解决的同型问题的链接给他们，没有搞定则上报到专门的团队。

每周都有周报，统计一共关了多少 issue，解决了多少问题，添加了多少新特性，让大家用得非常安心。更不用说其官方运营的社区， http://taro-club.jd.com/， 可见官方在这方面投入非常大。

5、Taro 拥有一个物料市场，号称“让每一个轮子产生价值”。物料就是一些组件，如果单纯让官方来做，肯定无法考虑到那么巨细。太多垂直领域待覆盖，由专门领域的人来写的组件更有说服力。

6、Taro 支持转 RN 是一个非常亮眼的特性，超出目前所有的小程序转译框架。这也只有京东这种深耕RN多年的大公司才有能力适配。京东早些年就实现了自己的 RN-WEB 与 RN 转微信小程序框架（Alita）。

这几年，国内各大企业对小程序的投入非常大，除了 Taro，还有去哪儿网的 nanachi、网易的 megalo，滴滴的 Chameleon， 百度的 Okam，不一而足。

官网：https://taro-docs.jd.com/taro/docs/README.html

GitHub Star：23.5k

Flutter

Flutter 是这两年来广受开发者热议的移动端跨平台开发工具。并且经过咸鱼与毒这两大标杆式 App 的引导，国内越来越多人投入 Flutter的开发行列。

Flutter 的优点:

1、跨全平台：移动端的两大平台、PC 的三大操作系统以及 Web 端。

2、性能卓越。Flutter 和其他跨平台不同的是，它并不走 JavaScript 引擎，而是通过自己的 Flutter Engine，然后通过 skia 绘制 UI 框架。skia是C++写的类似canvas 2D图形库。另外，在渲染时，Flutter 借鉴 React 的虚拟 DOM 思想，在 UI 进行变化后，会进行 diff 算法。

3、开发高效率。Flutter 在开发时可以通过热重载，实现所见即所得的效果。用过 webpack 开发页面的同学都知道， 在编辑器中保存后，界面立马就能看到变化。Flutter 也是这样，当 App 在虚拟容器中或者真机设备中调试，保存后，App 会立刻响应, 节省了大量时间。

4、Flutter SDK 高度自由灵活，上层有丰富 UI 套件，除了 Material Design的主题之外，还有一套 iOS 主题的配套组件。除此之外，对于复杂 UI，可从底层 canvas 入手来绘制，灵活度堪比系统的 SDK。

5、当然它不是没有缺点，最大的诟病是它使用了 Dart，我认为如果是用 TypeScript 的话可能会更火，一些前端工程师为此放弃使用 Flutter。

其次，在编写界面时 Flutter 没有使用标签语言，工程师要费劲地用 Widget 类来堆砌，很易出现套嵌地狱，也不直观。现成的解决方案有两个，一是通过野生的 DSX， 二是官方的扩展函数。没有太大的硬伤，但小问题不断，需要时间来磨平。

官网：https://flutter.dev/

GitHub Star：84.1k

SpriteJS

SpriteJS 是由 360 奇舞团推出的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，是跨平台的 2D 绘图对象模型库，它能够支持 Web、Node.js、桌面应用和微信小程序的图形绘制和实现各种动画效果。对比业界有名的 ECharts，前者是侧重于企业级的图表绘制，SpriteJS 则倾向于动画与游戏。

SpriteJS 的优点有：

1、跨平台，支持服务端渲染、微信小程序。

2、对 D3、Matter-js、Proton 和其他第三方库友好。

3、性能卓越，主要是通过高性能的缓存机制，离屏 Canvas 与 WebWorker 多线程渲染这三大策略实现。最新的 SpriteJS 支持 WebGL，对于大数据量性能更佳。

官网：https://spritejs.org/

GitHub Star：3.4k

NestJS

可能大家听说过 Next.js，这是在 React 团队早些年没推出后端渲染框架时，由第三方推出的 Node.js 框架。大家也可能听说过 Nuxt.js，基于 Vue.js 的轻量级应用框架。

而NestJS可划归为AngularJS社区的。它有 TypeScript、DI、DTO、Decorator，并提供了全套解决方案，包含了认证、数据库、上传文件、验证、缓存、序列化、记录器、安全、配置、压缩、请求等开箱即用的技术。不再像 KoaJS、Express 那样让用户自己找中间件。因此也有人称之为 Node.js 的 Spring。

从趋势来看， NestJS 在 GitHub 的关注人数仅用一年就超越了 Egg.js。目前仍在持续高速增长中，可见 Node.js 也厌恶了 KoaJS、Express 这样的迷你框架，在开发大型应用，必须有 Spring 级别的框架。

官网：https://nestjs.com/

GitHub Star：23k

DoKit

DoKit，全称为DoraemonKit， 是滴滴推出一个跨平台的功能集合面板，有点像 Windows 下的超级兔子或 360 管家。它的功能较完备，可直接看下面的截图：

官网：https://github.com/didi/DoraemonKit

GitHub Star：12.8k

imgcook

imgcook 是阿里出品的人工智能切图工具，但它不只是切图。我们可以上传 Sketch、PSD、静态图片等形式的视觉稿作，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让前端工程师关注更具挑战性的事情。

可能有人会质疑它生成的代码可读性，会拿之前的 Dreamweave 做比较，但是不要忘记，这是一个人工智能平台，它会不断进化的，机器的进化速度是人工的 1000 倍以上，这是对“页面仔”的暴击，因此前端工程师努力将自己转移到工具链开发这样高技术含量的活儿上。

官网：https://imgcook.taobao.org/

GitHub Star：561（刚开源）

盘点完这些新兴的前端框架，让人惊叹前端技术发展之快，如今优秀的前端工程师打造了很多十年前不可想象的开源项目。尤其是最后三个，可以说标志着前端可以与后端相鼎立的局面了。笔者相信在 2020 年，前端肯定会发展得更好！

作者简介：司徒正美，拥有十年纯前端经验，著有《JavaScript框架设计》一书，去哪儿网公共技术部前端架构师。爱好开源，拥有mass、Avalon、nanachi等前端框架。目前在主导公司的小程序、快应用的研发项目。

Web 开发中，解析 HTML 是一个常见的任务，特别是当我们需要从网页中提取数据或操作 DOM 时。掌握 Node.js 中解析 HTML 的各种方式，可以大大提高我们提取和处理网页数据的效率。本文将介绍如何在 Node.js 中解析 HTML。

• Node.js 是什么？Node.js 如何安装及如何配置环境？一文讲解

基本概念

HTML 解析是指将 HTML 文本转换为可操作的数据结构，通常是 DOM（文档对象模型）。DOM 是一个树状结构，表示了网页的结构和内容，允许我们使用 JavaScript 操作和修改网页。

常用的 HTML 解析方法

以下是在 Node.js 中常用的几种 HTML 解析方法：

1.Cheerio：Cheerio 是一个类似于 jQuery 的库，它可以在服务器端使用 CSS 选择器来解析 HTML 并操作 DOM。它适用于解析静态 HTML 页面。

2.jsdom：jsdom 是一个在 Node.js 中模拟 DOM 环境的库。它能够解析和操作 HTML，同时还支持模拟浏览器环境中的许多特性，如事件处理和异步请求。

3.htmlparser2：htmlparser2 是一个快速的 HTML 解析器，它能够将 HTML 文档解析成 DOM 节点流。它通常用于处理大型 HTML 文档或流式数据。

实践案例：使用 Cheerio 解析 HTML

以下是一个使用 Cheerio 解析 HTML 的实际案例，其中包含基本的路由与请求处理。确保你的开发环境中已经安装了 Node.js 和 npm。

1、首先，创建一个新的文件夹，并在该文件夹中运行以下命令初始化项目：

npm init -y

2、安装所需的依赖库：

npm install express cheerio axios

3、创建一个名为 index.js 的文件，然后编写以下代码：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');  // 引入 cheerio 库，用于解析 HTML

const app = express();
const PORT = 3000;

app.get('/', async (req, res) => {
  try {
    // 使用 Axios 发起 GET 请求获取网页的 HTML 内容
    const response = await axios.get('https://apifox.com/blog/mock-manual/'); // 替换为你想要解析的网页 URL
    const html = response.data;  // 获取响应中的 HTML 内容
    
    const $ = cheerio.load(html);  // 将 HTML 文本传递给 cheerio，创建一个类似于 jQuery 的对象
    
    // 使用 cheerio 对象的选择器来获取网页标题，并提取文本内容
    const title = $('title').text();  
    
    res.send(`Title: ${title}`);  // 将标题作为响应发送给客户端
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred');  // 发生错误时发送错误响应
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);  // 启动服务器并监听指定端口
});

在上述代码中，注释解释了每个关键步骤的作用：

• 通过 axios.get() 发起 GET 请求，获取网页的 HTML 内容。
• 使用 Cheerio 的 $ = cheerio.load(html) 创建了一个可用于选择 DOM 元素的 Cheerio 对象。
• 通过 $() 使用类似于 jQuery 的选择器，获取 <title> 元素的文本内容。
• 最后，将提取的标题作为响应发送给客户端。在这个案例中，我们使用 Express 来创建一个简单的服务器，当访问根路由时，我们使用 Axios 获取网页的 HTML 内容，然后使用 Cheerio 解析并提取网页标题。在浏览器或 API 工具中访问 http://localhost:3000/，你将看到响应。
• 什么是 axios?如何使用 axios?一文快速入门

提示、技巧与注意事项

• 在使用 Cheerio、jsdom 或 htmlparser2 时，务必了解它们的文档和用法，以充分利用其功能。
• 当解析复杂的动态页面时，考虑使用模拟浏览器行为的库，如 Puppeteer。

使用接口工具调试后端接口

以 Apifox 为例，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

在本文的例子中，就可以通过 Apifox 来测试接口。新建一个项目后，在项目中选择 “调试模式” ，填写请求地址后即可快速发送请求，并获得响应结果，上文的实践案例如图所示：

总结

Node.js 提供了多种方法来解析 HTML，包括 Cheerio、jsdom 和 htmlparser2。选择适合你需求的库，可以轻松地操作和提取网页内容。

知识扩展：

• Node.js 中怎么拷贝文件？nodejs 拷贝文件的方法
• 如何在线建一个 JAVA 的 Spring Boot 项目？Spring Boot 快速入门 Helloworld 示例

参考链接：

• Cheerio 官方文档：https://cheerio.js.org/
• jsdom GitHub 仓库：https://github.com/jsdom/jsdom
• htmlparser2 GitHub 仓库：https://github.com/fb55/htmlparser2

家好，我是 Echa。

羊了个羊，Echa小编中招了。先说说基本症状，第一天发高烧，四肢无力，头胀脑，第二天烧退了，现在四肢无力，头胀脑，嗓子疼，流鼻涕了，勉强下床爬起来发布文章，希望第三天会更好点，记得老铁们多锻炼增强抵抗力和自身免疫力。

创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！

11 月 30 日，OpenAI 实验室创始人兼 CEO Sam Altman 宣布发布聊天机器人模型：ChatGPT。ChatGPT 可以模仿人类的说话风格回答问题。很快，ChatGPT 火爆社交圈，Github 上出现了很多和 ChatGPT 相关的工具，一些工具在 Github 趋势榜单中霸榜多日。下面就来看看有哪些实用的ChatGPT 周边工具！

全文大纲：

• ChatGPT for Google：显示 ChatGPT 响应和 Google 搜索结果的浏览器扩展；
• ChatGPT API： ChatGPT API 的 Node.js 客户端；
• chatgpt-mac：适用于 Mac 的 ChatGPT 应用；
• wechat-chatgpt：在微信上使用 ChatGPT；
• chatgpt-vscode：基于 ChatGPT 的 VSCode 扩展；
• ChatGPT Advanced：Chrome 扩展，通过 Web 使用 ChatGPT；
• chatgpt-desktop：适用于 mac、windows 和 linux 的 ChatGPT 桌面应用。

ChatGPT for Google

扩展安装地址：https://chrome.google.com/webstore/detail/chatgpt-for-google/jgjaeacdkonaoafenlfkkkmbaopkbilf

Github（⭐️ 5.5k）：https://github.com/wong2/chat-gpt-google-extension

ChatGPT for Google 是一个可以显示 ChatGPT 响应和 Google 搜索结果的浏览器扩展，支持 Chrome/Edge/Firefox。该项目主要使用 JavaScript 和 CSS 编写。

ChatGPT API

Github（⭐️ 1.9k）：https://github.com/transitive-bullshit/chatgpt-api

这个项目是非官方 ChatGPT API 的 Node.js 客户端，主可以使用它来构建由 ChatGPT 支持的项目，例如聊天机器人、网站等。该项目主要使用 TypeScript 编写。

chatgpt-mac

Github（⭐️ 1.5k）：https://github.com/vincelwt/chatgpt-mac

chatgpt-mac 是一个简单的 Mac 应用，可让 ChatGPT 在菜单栏中显示，在 Mac 上可以使用 Cmd+Shift+G 快捷键来快速打开它，目前提供了 Mac 的 Arm64 和 Intel 版本的安装包。该项目主要使用 JavaScript 编写。

wechat-chatgpt

Github（⭐️ 1.3k）：https://github.com/fuergaosi233/wechat-chatgpt

该项目通过 wechaty 在微信上使用 ChatGPT，其支持在实用 OpenAI 账户，支持使用代理登录，支持与 docker 一起使用等。该工具简单易用，安装完依赖后只需要填写 OpenAI 账号密码和微信扫码即可使用。该项目主要使用 TypeScript 编写。

Wechaty 是一个聊天机器人开源项目，提供了开发聊天机器人的 SDK，方便开发人员快速实现聊天机器人。通过 Wechat 可以获取到微信的聊天内容、联系人、群组、好友关系等信息，也可以实现创建群组、发送消息等功能。

chatgpt-vscode

Github（⭐️ 1.3k）：https://github.com/mpociot/chatgpt-vscode

chatgpt-vscode 是一个基于 ChatGPT 的 VSCode 扩展，允许使用非官方的 ChatGPT API 直接在编辑器中从 OpenAI 的 ChatGPT 生成问题响应。该项目主要使用 TypeScript 编写。

ChatGPT Advanced

Github（⭐️ 430）：https://github.com/qunash/chatgpt-advanced

ChatGPT Advanced 是一个 Chrome 扩展，它为 ChatGPT webapp 添加了 web 访问功能，主要使用 JavaScript 编写。

chatgpt-desktop

Github（⭐️ 319）：https://github.com/sonnylazuardi/chatgpt-desktop

该项目是使用 tauri 和 rust 的非官方开源 ChatGPT 桌面应用，适用于 mac、windows 和 linux 菜单栏。