&

前端又又出新框架，這次沒有打包了(ofa.js)

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2023年11月27日 11:35 本文熱度 733

最近，前端開發(fā)領(lǐng)域又迎來了一個(gè)新框架——ofa.js。它的獨(dú)特之處在于，不依賴于現(xiàn)有的 nodes/npm/webpack 前端開發(fā)工作流程。與jQuery類似，只需引用一個(gè)腳本，您就能像使用React/Vue/Angular一樣輕松地開發(fā)大型應(yīng)用。

極易上手

如果您要開發(fā)簡單的項(xiàng)目，想要用一個(gè)漂亮的按鈕組件，例如 Ant Design 中的 Button組件，你需要學(xué)習(xí)Node.js、NPM和React等知識，才能開始使用該按鈕組件。對于非前端開發(fā)者或初學(xué)者來說，這將是一個(gè)漫長的過程。

如果使用基于ofa.js 開發(fā)的組件，就不需要這么復(fù)雜了；你只需要了解HTML的基礎(chǔ)知識（即使不看ofa.js的文檔），也可以輕松使用基于ofa.js開發(fā)的組件。以下是使用官方的 punch-logo 代碼示例：

<!-- 引入ofa.js到您的項(xiàng)目 -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>

<!-- 加載預(yù)先開發(fā)的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">遲點(diǎn)下班</p>
    <p slot="fly">周末加班</p>
</punch-logo>

你可以最直接拷貝上面的代碼，放到一個(gè)空白的html文件內(nèi)運(yùn)行試試；這使得ofa.js非常容易與傳統(tǒng)的Web開發(fā)技術(shù)棧相融合。

一步封裝組件

封裝組件同樣非常簡單，只需一個(gè)HTML文件即可實(shí)現(xiàn)。以下是一個(gè)官方封裝的開關(guān)（switch）組件示例：

<!-- my-switch.html -->
<template component>
  <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      background-color: #ccc;
      transition: background-color 0.4s;
      border-radius: 34px;
      cursor: pointer;
    }

    .slider {
      position: absolute;
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: transform 0.4s;
      border-radius: 50%;
    }

    .switch.checked {
      background-color: #2196f3;
    }

    .switch.checked .slider {
      transform: translateX(26px);
    }
  </style>
  <div class="switch" class:checked="checked" on:click="checked = !checked">
    <span class="slider"></span>
  </div>
  <script>
    export default {
      tag: "my-switch",
      data: {
        checked: true,
      },
    };
  </script>
</template>

在使用時(shí)，只需使用 l-m 組件引用它：

<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<l-m src="./my-switch.html"></l-m>
<my-switch></my-switch>

示例可以在官方網(wǎng)站下方查看。由于無需打包流程，只需將文件上傳到靜態(tài)服務(wù)器即可發(fā)布，還可以進(jìn)行跨域引用，這極大降低了組件共享的成本。

多種模板語法糖

ofa.js與Vue和Angular一樣提供了許多模板語法糖，主要包括：

文本渲染
屬性綁定/雙向綁定
事件綁定
條件渲染
列表渲染
...

具體案例可在官網(wǎng)向下滾動至“提供多樣便捷的模板語法”處查看。

天生的狀態(tài)同步高手

與其他框架不同，ofa.js 使用無感狀態(tài)同步。這意味著數(shù)據(jù)不需要通過函數(shù)操作，只需設(shè)置數(shù)據(jù)對象即可實(shí)現(xiàn)狀態(tài)同步。以下是一個(gè)共享黑夜模式的按鈕示例：

// is-dark.js
const isDark = $.stanz({
  value: false,
});

export default isDark;

<!-- my-button.html -->
<template component>
  <style>
    :host {
      display: block;
    }

    .container {
      display: inline-block;
      padding: 0.5em 1em;
      color: white;
      border-radius: 6px;
      background-color: blue;
      cursor: pointer;
      user-select: none;
    }
    .container.dark {
      background-color: red;
    }
  </style>
  <div class="container" class:dark="isDark.value">
    <slot></slot>
  </div>
  <script>
    import isDark from "./is-dark.js";
    export default {
      data: {
        isDark: {},
      },
      attached() {
        // 共享dark對象數(shù)據(jù)
        this.isDark = isDark;
      },
      detached() {
        // 清除內(nèi)存記錄
        this.isDark = {};
      },
    };
  </script>
</template>

您可以跳轉(zhuǎn)到狀態(tài)同步案例以查看效果。

最簡單的表單操作

表單只需調(diào)用formData方法，就能生成自動同步數(shù)據(jù)的對象：

<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>

您還可以輕松地反向設(shè)置表單數(shù)據(jù)：

<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(() => {
    // 反向設(shè)置數(shù)據(jù)
    data.username = "Yao";
    data.sex = "man";
    data.message = "ofa.js is good!";
  }, 1000);
</script>

制作自定義表單組件也沒有其他框架那么復(fù)雜，只需為組件定義value和name屬性即可。

具體效果可跳轉(zhuǎn)至formData API查看。

開發(fā)應(yīng)用

您還可以使用ofa.js開發(fā)Web應(yīng)用，然后直接引用已開發(fā)的應(yīng)用到您的網(wǎng)頁上：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>應(yīng)用演示</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>