ofa.js
Framework JavaScript MVVM sin construcción
Sin curva de aprendizaje, sin npm, sin nodejs, sin webpack, ¡simplemente empieza!
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
Basado en Web Components
ofa.js está desarrollado en base a Web Components. Estas son las plataformas soportadas y los tiempos que puede experimentar de inmediato
Descargar proyecto de inicio Ver proyecto de inicio en línea
Muy baja barrera de uso
A diferencia de otros marcos frontales, el desarrollo de componentes basados en ofa.js no requiere la lectura de extensas guías de inicio. Crea inmediatamente un archivo HTML y experimenta con un componente de "golpe de logotipo".
<!-- Incluye ofa.js en tu proyecto -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<!-- Carga el componente punch-logo previamente desarrollado -->
<l-m src="https://ofajs.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"></l-m>
<!-- Utilización del componente "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>No más horas extra</h2>
<p slot="fly">Sal del trabajo por mí</p>
<p slot="fly">Salir tarde del trabajo</p>
<p slot="fly">Horas extra los fines de semana</p>
</punch-logo>
Un paso para encapsular el componente, liberarse de los tediosos procesos
Los componentes web antiguos implicaban aprender conocimientos complicados, pero ahora solo se necesita un archivo.
<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>
Proporciona una variedad de convenientes sintaxis de plantillas
<template component>
<div>Renderizando texto: {{txt}}</div>
<script>
export default {
tag: "text-demo",
data: {
txt:"Soy 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>
Alternativas a jQuery
Tener una API similar a jQuery para que sientas la misma conveniencia.
// Código de jQuery
$("#target").html("algo de código html"); // Establecer html
$("#target").text("establecer texto"); // Establecer texto
var ele_text = $("#target").text(); // Obtener texto
var parents = $("#target").parents(); // Obtener todos los padres en un arreglo
var child = $("#target").children()[0]; // Obtener el primer elemento hijo
// 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 array of all parent layers
var child = $("#target")[0]; // Get the first child element
Casos de uso
Sistema de creación de documentos en línea más simple, obook.