前端又又出新框架，這次沒(méi)有打包了(ofa.js)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
最近，前端開(kāi)發(fā)領(lǐng)域又迎來(lái)了一個(gè)新框架——ofa.js。它的獨(dú)特之處在于，不依賴于現(xiàn)有的 nodes/npm/webpack 前端開(kāi)發(fā)工作流程。與jQuery類(lèi)似，只需引用一個(gè)腳本，您就能像使用React/Vue/Angular一樣輕松地開(kāi)發(fā)大型應(yīng)用。
極易上手如果您要開(kāi)發(fā)簡(jiǎn)單的項(xiàng)目，想要用一個(gè)漂亮的按鈕組件，例如 Ant Design 中的 Button組件，你需要學(xué)習(xí)Node.js、NPM和React等知識(shí)，才能開(kāi)始使用該按鈕組件。對(duì)于非前端開(kāi)發(fā)者或初學(xué)者來(lái)說(shuō)，這將是一個(gè)漫長(zhǎng)的過(guò)程。 如果使用基于ofa.js 開(kāi)發(fā)的組件，就不需要這么復(fù)雜了；你只需要了解HTML的基礎(chǔ)知識(shí)（即使不看ofa.js的文檔），也可以輕松使用基于ofa.js開(kāi)發(fā)的組件。以下是使用官方的 <!-- 引入ofa.js到您的項(xiàng)目 --> <script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script> <!-- 加載預(yù)先開(kāi)發(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開(kāi)發(fā)技術(shù)棧相融合。 一步封裝組件封裝組件同樣非常簡(jiǎn)單，只需一個(gè)HTML文件即可實(shí)現(xiàn)。以下是一個(gè)官方封裝的開(kāi)關(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í)，只需使用 <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)站下方查看。由于無(wú)需打包流程，只需將文件上傳到靜態(tài)服務(wù)器即可發(fā)布，還可以進(jìn)行跨域引用，這極大降低了組件共享的成本。 多種模板語(yǔ)法糖ofa.js與Vue和Angular一樣提供了許多模板語(yǔ)法糖，主要包括：
具體案例可在官網(wǎng)向下滾動(dòng)至“提供多樣便捷的模板語(yǔ)法”處查看。 天生的狀態(tài)同步高手與其他框架不同，ofa.js 使用無(wú)感狀態(tài)同步。這意味著數(shù)據(jù)不需要通過(guò)函數(shù)操作，只需設(shè)置數(shù)據(jù)對(duì)象即可實(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對(duì)象數(shù)據(jù) this.isDark = isDark; }, detached() { // 清除內(nèi)存記錄 this.isDark = {}; }, }; </script> </template>
您可以跳轉(zhuǎn)到 狀態(tài)同步案例 以查看效果。 最簡(jiǎn)單的表單操作表單只需調(diào)用formData方法，就能生成自動(dòng)同步數(shù)據(jù)的對(duì)象： <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>
制作自定義表單組件也沒(méi)有其他框架那么復(fù)雜，只需為組件定義 具體效果可跳轉(zhuǎn)至formData API查看。 開(kāi)發(fā)應(yīng)用您還可以使用ofa.js開(kāi)發(fā)Web應(yīng)用，然后直接引用已開(kāi)發(fā)的應(yīng)用到您的網(wǎng)頁(yè)上： <!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> 具體效果可跳轉(zhuǎn)至使用o-app組件查看。 SCSR官方提供了一種類(lèi)似服務(wù)端渲染的解決方案，它不僅保證了用戶體驗(yàn)，還使頁(yè)面在靜態(tài)狀態(tài)下可被搜索引擎爬取。官網(wǎng)采用了SCSR的方案。
您可以點(diǎn)擊SCSR方案以查看詳細(xì)信息。 代碼簡(jiǎn)潔當(dāng)前版本4.3.29的 ofa.min.js 文件僅有52KB，經(jīng)過(guò)gzip壓縮后僅有18KB。 其他最近升級(jí)到了v4版本，目前可用的第三方庫(kù)還比較有限，但以后將逐漸增加。作者正在準(zhǔn)備開(kāi)發(fā)基于ofa.js的UI庫(kù)。 作者是一位中國(guó)開(kāi)發(fā)者，快去給 ofa.js 加星吧！
該文章在 2023/11/27 11:36:06 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
