者 | 司徒正美

責編 | 伍杏玲

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 類來堆砌，很易出現套嵌地獄，也不直觀?，F成的解決方案有兩個，一是通過野生的 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 菜單欄。