历史搜索

前端又又出新框架ofa.js,你还学的动吗?

游客2024-09-14 12:03:01
目录文章目录
  1. 容易上手
  2. 一步封装组件
  3. 多种模板语法糖
  4. 天生的状态同步高手
  5. 最简单的表单操作
  6. 开发应用
  7. SCSR
  8. 代码简洁
  9. 其他

最近,前端开发领域又迎来了一个新框架——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>

前端又又出新框架ofa.js,你还学的动吗? 1

您可以跳转到 状态同步案例 以查看效果。

最简单的表单操作

表单只需调用 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>

 

制作自定义表单组件也没有其他框架那么复杂,只需为组件定义valuename属性即可。

具体效果可跳转至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 库。

标签:JavaScript