ofa.js
노 빌드 MVVM JavaScript 프레임워크
까다로운 학습 필요 없음, npm, nodejs, webpack 없이 즉시 시작
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
웹 컴포넌트 기반
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>
한 단계로 컴포넌트 패키징 및 복잡한 프로세스 제거
과거의 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>
다양하고 편리한 템플릿 문법 제공
아래 번역 결과를 확인하세요.```html
렌더링 텍스트: {{txt}}
</comp-viewer>
<comp-viewer switch-name="Set Properties" comp-name="prop-demo" max-height="500" style="width:100%;">
```html
<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와 유사한 API를 가지고 있어서 동일한 편리함을 느낄 수 있습니다.
// jQuery Code
$("#target").html("some html code"); // html 설정
$("#target").text("set text"); // 텍스트 설정
var ele_text = $("#target").text(); // 텍스트 가져 오기
var parents = $("#target").parents(); // 모든 상위 요소 가져 오기 (배열)
var child = $("#target").children()[0]; // 첫 번째 자식 요소 가져 오기
// ofa.js Code
$ =("#target").html = "일부 html 코드"; // html 설정
$("#target").text = "텍스트 설정"; // 텍스트 설정
var ele_text = $("#target").text; // 텍스트 가져 오기
var parents = $("#target").parents; // 모든 상위 요소 가져 오기 (배열)
var child = $("#target")[0]; // 첫 번째 자식 요소 가져 오기