前端又又出新框架，這次沒有打包了(ofa.js)
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
最近，前端開發領域又迎來了一個新框架——ofa.js。它的獨特之處在于，不依賴于現有的 nodes/npm/webpack 前端開發工作流程。與jQuery類似，只需引用一個腳本，您就能像使用React/Vue/Angular一樣輕松地開發大型應用。
極易上手如果您要開發簡單的項目，想要用一個漂亮的按鈕組件，例如 Ant Design 中的 Button組件，你需要學習Node.js、NPM和React等知識，才能開始使用該按鈕組件。對于非前端開發者或初學者來說，這將是一個漫長的過程。 如果使用基于ofa.js 開發的組件，就不需要這么復雜了；你只需要了解HTML的基礎知識（即使不看ofa.js的文檔），也可以輕松使用基于ofa.js開發的組件。以下是使用官方的 <!-- 引入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>
你可以最直接拷貝上面的代碼，放到一個空白的html文件內運行試試；這使得ofa.js非常容易與傳統的Web開發技術棧相融合。 一步封裝組件封裝組件同樣非常簡單，只需一個HTML文件即可實現。以下是一個官方封裝的開關（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> 在使用時，只需使用 <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>
示例可以在官方網站下方查看。由于無需打包流程，只需將文件上傳到靜態服務器即可發布，還可以進行跨域引用，這極大降低了組件共享的成本。 多種模板語法糖ofa.js與Vue和Angular一樣提供了許多模板語法糖，主要包括：
具體案例可在官網向下滾動至“提供多樣便捷的模板語法”處查看。 天生的狀態同步高手與其他框架不同，ofa.js 使用無感狀態同步。這意味著數據不需要通過函數操作，只需設置數據對象即可實現狀態同步。以下是一個共享黑夜模式的按鈕示例： // 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對象數據 this.isDark = isDark; }, detached() { // 清除內存記錄 this.isDark = {}; }, }; </script> </template>
您可以跳轉到 狀態同步案例 以查看效果。 最簡單的表單操作表單只需調用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>
制作自定義表單組件也沒有其他框架那么復雜，只需為組件定義 具體效果可跳轉至formData API查看。 開發應用您還可以使用ofa.js開發Web應用，然后直接引用已開發的應用到您的網頁上： <!DOCTYPE html> <html> <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方案以查看詳細信息。 代碼簡潔當前版本4.3.29的 ofa.min.js 文件僅有52KB，經過gzip壓縮后僅有18KB。 其他最近升級到了v4版本，目前可用的第三方庫還比較有限，但以后將逐漸增加。作者正在準備開發基于ofa.js的UI庫。 作者是一位中國開發者，快去給 ofa.js 加星吧！
該文章在 2023/11/27 11:36:06 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
