最近，我又看到了一個新的前端框架，它的名字叫做 ofa.js，其實我更覺得它就是一個庫，有點類似于 Jquery，因為它不需要打包，不依賴于 nodejs/npm/webpack/vite，號稱是只需要引入一個js文件，就可以像 React/Vue/Angular 那樣開發(fā)。

其實使用這個庫，又讓我回到了以前開發(fā) html、css、js 多頁面應(yīng)用的那段時光哈哈，有趣！

圖片

上手使用

我估計在做這個庫的時候，作者可能是考慮到現(xiàn)如今這些比較火的框架，比如 React/Vue/Angular 這類框架，需要一定的虛席成本，所以想回歸簡單，雖然說是回歸簡單，但是該有的功能一個都沒少。

• 狀態(tài)管理
• 文本渲染
• 屬性綁定/雙向綁定
• 事件綁定
• 條件渲染
• 列表渲染

參考官網(wǎng)給出的案例，使用 ofa.js 非常的簡單，只需要引入 js 文件，加載它提供的組件，就可以快速做出一個頁面效果來~

圖片

圖片

這種開發(fā)模式是不是很熟悉，其實就是以前最開始的前端開發(fā)模式，只需要在 html、css、js 文件中去開發(fā)，開發(fā)完就丟到服務(wù)器上部署，沒有現(xiàn)在開發(fā)流程這么復(fù)雜哈哈哈！

自己封裝組件

當(dāng)然，你也可以在使用 ofa.js 開發(fā)前端頁面時，自己封裝組件，就比如官網(wǎng)上的一個小案例，封裝一個 Switch開關(guān) 組件。

首先在 my-switch.html 中去編寫封裝的組件。

圖片

然后我們想要使用這個組件的話，只需要使用 l-m 去引用它即可：

圖片

圖片

具體的案例代碼在：https://ofajs.com/cn/index.html

狀態(tài)管理

ofa.js 也支持?jǐn)?shù)據(jù)狀態(tài)管理，以下是一個共享黑夜模式的按鈕示例：

圖片

圖片

圖片

表單

表單案例：https://ofajs.com/cn/api/others/form-data.html

圖片

體積

當(dāng)前版本 4.3.29 的 ofa.min.js 文件僅有 52KB，經(jīng)過 gzip 壓縮后僅有 18KB