最近，前端开发领域又迎来了一个新框架——ofa.js，号称不需要打包的 MVVM JavaScript 框架，无需繁琐学习，无需 npm、nodejs、webpack，即刻上手。它的独特之处在于，不依赖于现有的 nodes/npm/webpack 前端开发工作流程。与 jQuery 类似，只需引用一个脚本，您就能像使用 React/Vue/Angular 一样轻松地开发大型应用。
容易上手
如果您要开发简单的项目，想要用一个漂亮的按钮组件，例如 Ant Design 中的 Button 组件，你需要学习 Node.js、NPM 和 React 等知识，才能开始使用该按钮组件。对于非前端开发者或初学者来说，这将是一个漫长的过程。
如果使用基于 ofa.js 开发的组件，就不需要这么复杂了；你只需要了解 HTML 的基础知识（即使不看 ofa.js 的文档），也可以轻松使用基于 ofa.js 开发的组件。以下是使用官方的 punch-logo 代码示例：
<!-- 引入 ofa.js 到您的项目 -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<!-- 加载预先开发的 punch-logo 组件 -->
<l-m src="https://kirakiray.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"></l-m>
<!-- 使用 punch-logo 组件 -->
<punch-logo style="margin:50px 0 0 100px;">
<img src="https://kirakiray.github.io/ofa-v4-docs/docs/publics/logo.svg" logo height="90" />
<h2>不加班了</h2>
<p slot="fly">下班给我</p>
<p slot="fly">迟点下班</p>
<p slot="fly">周末加班</p>
</punch-logo>
您可以跳转到 状态同步案例 以查看效果。
最简单的表单操作
表单只需调用 formData 方法，就能生成自动同步数据的对象：
<form id="myForm">
<input type="text" name="username" value="John Doe" />
<div>
sex:
<label>
man
<input type="radio" name="sex" value="man" />
</label>
<label>
woman
<input type radio="radio" name="sex" value="woman" />
</label>
</div>
<textarea name="message">Hello World!</textarea>
</form>
<br />
<div id="logger"></div>
<script>
const data = $("#myForm").formData();
$("#logger").text = data;
data.watch(() => {
$("#logger").text = data;
});
</script>
您还可以轻松地反向设置表单数据：
<form id="myForm">
<input type="text" name="username" value="John Doe" />
<div>
sex:
<label>
man
<input type="radio" name="sex" value="man" />
</label>
<label>
woman
<input type="radio" name="sex" value="woman" />
</label>
</div>
<textarea name="message">Hello World!</textarea>
</form>
<br />
<div id="logger"></div>
<script>
const data = $("#myForm").formData();
setTimeout(() => {
// 反向设置数据
data.username = "Yao";
data.sex = "man";
data.message = "ofa.js is good!";
}, 1000);
</script>
制作自定义表单组件也没有其他框架那么复杂，只需为组件定义value和name属性即可。
具体效果可跳转至formData API查看。
开发应用
您还可以使用 ofa.js 开发 Web 应用，然后直接引用已开发的应用到您的网页上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>应用演示</title>
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
</head>
<body>
<o-app src="https://xxxxx.com/app-config.mjs"> </o-app>
</body>
</html>
具体效果可跳转至使用 o-app 组件查看。
SCSR
官方提供了一种类似服务端渲染的解决方案，它不仅保证了用户体验，还使页面在静态状态下可被搜索引擎爬取。官网采用了 SCSR 的方案。
SCSR 的全称是 Static Client-Side Rendering，又称为静态客户端渲染。它是 CSR（Client-Side Rendering）的一种变种，在保留了 CSR 用户体验的基础上，还能够让页面在静态状态下被搜索引擎爬取。
您可以点击SCSR 方案以查看详细信息。
代码简洁
当前版本 4.3.29 的 ofa.min.js 文件仅有 52KB，经过 gzip 压缩后仅有 18KB。
其他
最近升级到了 v4 版本，目前可用的第三方库还比较有限，但以后将逐渐增加。作者正在准备开发基于 ofa.js 的 UI 库。