ofa.js
ビルド不要のMVVM JavaScriptフレームワーク
煩雑な学習は不要で、npm、Node.js、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ファイルを作成して、「一拳でロゴを飛ばす」コンポーネントを体験してください。
<!-- 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>
一つのステップでコンポーネントを包装し、煩雑な手続きから解放されます
HTML5 の Web コンポーネントは以前は煩雑な学習が必要でしたが、今では単一のファイルだけで済みます。
<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:"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>
jQueryに代わるもの
jQueryと似たAPIを持っており、同じ便利さを感じることができます。
// jQuery コード
$("#target").html("いくつかのHTMLコードを設定します"); // HTMLを設定
$("#target").text("テキストを設定します"); // テキストを設定
var ele_text = $("#target").text(); // テキストを取得
var parents = $("#target").parents(); // すべての親要素を配列で取得
var child = $("#target").children()[0]; // 最初の子要素を取得
// ofa.js Code
$("#target").html = "some html code"; // HTML を設定する
$("#target").text = "set text"; // テキストを設定する
var ele_text = $("#target").text; // テキストを取得する
var parents = $("#target").parents; // すべての親要素を取得する配列を取得する
var child = $("#target")[0]; // 最初の子要素を取得する