ofa.js
No-build MVVM JavaScript framework
No need for tedious learning, no need for npm, nodejs, webpack, get started immediately
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
Based on Web Components
ofa.js is developed based on Web Components. The following are the supported platforms and times, you can experience them immediately.
Download the initial project View the initial project online
Extremely easy to use
Unlike other front-end frameworks, using components developed based on ofa.js does not require reading complicated getting started guides. Immediately create an HTML file and experience the component of "punching the logo" component.
<!-- Import ofa.js into the project -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<!-- Load the developed punch-logo component -->
<l-m src="https://ofajs.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"></l-m>
<!-- Using the punch-logo component -->
<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>No more overtime</h2>
<p slot="fly">Give me a break</p>
<p slot="fly">Leave work a bit later</p>
<p slot="fly">Work overtime on weekends</p>
</punch-logo>
One-step encapsulation of components, freeing from cumbersome processes
In the past, encapsulating Web Components involved complex learning, but now, it only requires one file.
<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>
Provides a variety of convenient template syntax.
<template component>
<div>Rendered text: {{txt}}</div>
<script>
export default {
tag: "text-demo",
data: {
txt:"I am txt"
},
};
</script>
</template>
<template component>
<div :text="txt1"></div>
<div :html="txt2"></div>
<script>
export default {
tag: "prop-demo",
data: {
txt1:"<b>I am txt1</b>",
txt2:"<b>I am 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>
Alternatives to jQuery for Selection
With a API similar to jQuery, you can enjoy the same convenience.
// jQuery Code
$("#target").html("some html code"); // Set html
$("#target").text("set text"); // Set text
var ele_text = $("#target").text(); // Get text
var parents = $("#target").parents(); // Get an array of all parent layers
var child = $("#target").children()[0]; // Get the first child element
// ofa.js Code
$("#target").html = "some html code"; // Set html
$("#target").text = "set text"; // Set text
var ele_text = $("#target").text; // Get text
var parents = $("#target").parents; // Get an array of all parent layers
var child = $("#target")[0]; // Get the first child element