ofa.js
不需要打包的 MVVM JavaScript 框架
無需繁瑣學習，無需 npm、nodejs、webpack，即刻上手
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
基於 Web Components
ofa.js 基於 Web Components 開發。以下是支持的平台和時間，你可以立即體驗
極低使用門檻
與其他前端框架不同，使用基於ofa.js開發的組件無需閱讀繁雜入門指南。立刻創建一個 HTML 文件，體驗一下“一拳撞飛logo”的組件。
<!-- 將 ofa.js 引入項目 -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<!-- 加載開發好的 punch-logo 組件 -->
<l-m src="https://ofajs.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://ofajs.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>
一步封裝組件，擺脫繁瑣流程
以往的 Web Components 封裝涉及繁雜的知識學習，而現在，只需一個文件。
<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>
提供多樣便捷的模板語法
<template component>
<div>渲染文本: {{txt}}</div>
<script>
export default {
tag: "text-demo",
data: {
txt:"我是txt"
},
};
</script>
</template>
<template component>
<div :text="txt1"></div>
<div :html="txt2"></div>
<script>
export default {
tag: "prop-demo",
data: {
txt1:"<b>我是txt1</b>",
txt2:"<b>我是txt2</b>",
},
};
</script>
</template>
<template component>
<div>{{txt}}</div>
<input type="text" sync:value="txt" />
<script>
export default {
tag: "sync-demo",
data: {
txt:"I am txt",
},
};
</script>
</template>
<template component>
<div>count: {{count}}</div>
<button on:click="count++">count++</button>
<script>
export default {
tag: "event-demo",
data: {
count: 0
},
};
</script>
</template>
<template component>
<x-if :value="count % 2">
<div style="color:red">{{count}}</div>
</x-if>
<x-else>
<div style="color:blue">{{count}}</div>
</x-else>
<button on:click="count++">count++</button>
<script>
export default {
tag: "if-demo",
data: {
count: 0
},
};
</script>
</template>
<template component>
<ul>
<x-fill :value="lists">
<li>{{$index}} - {{$data.name}}</li>
</x-fill>
</ul>
<script>
export default {
tag: "fill-demo",
data: {
lists:[{name:"One"}, {name:"Two"}, {name:"Three"}]
},
};
</script>
</template>
可替代 jQuery 的選擇
擁有與 jQuery 類似的 API，讓您感受同樣的便捷。
// jQuery Code
$("#target").html("some html code"); // 設置 html
$("#target").text("set text"); // 設置 text
var ele_text = $("#target").text(); // 獲取 text
var parents = $("#target").parents(); // 獲取所有父層的數組
var child = $("#target").children()[0]; // 獲取第一個子元素
// ofa.js Code
$("#target").html = "some html code"; // 設置 html
$("#target").text = "set text"; // 設置 text
var ele_text = $("#target").text; // 獲取 text
var parents = $("#target").parents; // 獲取所有父層的數組
var child = $("#target")[0]; // 獲取第一個子元素