나는 더 이상 배울 수 없어, 너희 문서를 보고 싶지 않아, 그래도 쓸 수 있어? ofa.js를 먼저 배울 필요 없이, 이를 기반으로 개발된 컴포넌트를 바로 재사용할 수 있습니다.
오픈소스 컴포넌트 작성자가 코드를 작성한 뒤, 다른 사람들은 예제를 보고 몇 줄만 복사하면 순식간에 기능을 자신의 프로젝트로 옮길 수 있습니다.
ofa.js
점진적 마이크로 프론트엔드 프레임워크
간단한 페이지 구축, 인터랙티브 애플리케이션 제작, 복잡한 시스템 구성에 이르기까지 ofa.js는 능숙하게 대응합니다.
거의 은탄환 수준의 프론트엔드 프레임워크
어떤 응용 시나리오든 ofa.js를 사용하기에 적합합니다.
나는 더 이상 배울 수 없어, 너희 문서를 보고 싶지 않아, 그래도 쓸 수 있어? 
오래된 프로젝트에 임시로 기능 하나만 추가하고 싶어 
나는 개발 초보자고, Nodejs와 npm에 발길이 끊겼어 
거대한 쇼핑몰 시스템을 개발하려는데, 너희가 감당할 수 있어? 
나는 백엔드 개발자고, 백엔드 템플릿 엔진만으로 개발하고 싶어. ofa.js를 사용하는 게 적절할까? 나는 더 이상 배울 수 없어, 너희 문서를 보고 싶지 않아, 그래도 쓸 수 있어? 오래된 프로젝트에 임시로 기능 하나만 추가하고 싶어 기존 프로젝트에 script 태그로 ofa.js를 불러오기만 하면 즉시 사용할 수 있습니다.
불러온 후, 다양한 컴포넌트를 손쉽게 사용할 수 있습니다.
나는 개발 초보자고, Nodejs와 npm에 발길이 끊겼어 ofa.js는 초보자에게 매우 친화적이며, Node.js, npm 같은 도구를 배울 필요가 없습니다.
브라우저 하나와 아무 정적 서버만 있으면 개발을 시작할 수 있습니다.
Chrome 브라우저를 사용한다면 OFA Studio 이 온라인 도구를 열면 정적 서버를 준비할 필요조차 없이 바로 시작할 수 있습니다.
튜토리얼: 첫 앱 만들기 거대한 쇼핑몰 시스템을 개발하려는데, 너희가 감당할 수 있어? ofa.js는 마이크로 프론트엔드 아키텍처 패턴을 채택하고 있어 대형 프로젝트에 매우 적합합니다.
쇼핑몰 시스템을 충분히 세분화된 요구사항으로 나누어, 컴포넌트 단위로 개발한 뒤 독립적인 폴더에 배치하면 정적 서버만으로도 바로 컴포넌트 효과를 미리 볼 수 있습니다.
마지막으로 하나씩 조립해 거대한 시스템을 완성합니다. ofa.js의 마이크로 프론트엔드 방식은 바로 거대 애플리케이션을 해결하는 묘약입니다.
사례를 참고하세요. NoneOS, 이는 ofa.js로 개발한 운영체제로 규모가 매우 큽니다
나는 백엔드 개발자고, 백엔드 템플릿 엔진만으로 개발하고 싶어. ofa.js를 사용하는 게 적절할까? ofa.js의 SSR은 Node.js에 종속되지 않으며, SCSR 규칙만 지킨다면 어떤 백엔드 언어로도 템플릿 엔진 개발이 가능합니다.
자세한 내용은 ofa.js SSR 을 참고하세요
🤖 더 적합한 AI 사용 프론트엔드 프레임워크 🤖
컴파일 과정 없이, 바로 코드를 실행하세요.
AI 사용 ofa.js로 프론트엔드 프로젝트를 생성하는流程
AI 대모델
코드를 정적 컨테이너에 배포
프로젝트 미리보기
AI가 현재 주요 프론트엔드 프레임워크로 프로젝트를 생성하는流程
AI 대모델
클라우드 컨테이너 생성
의존성 설치
코드 배포 및 컴파일
프로젝트 미리보기
Web Components 기반 개발
Web Components를 지원하는 모든 플랫폼에서 ofa.js를 사용할 수 있습니다
매우 낮은 사용 문턱
ofa.js 기반 컴포넌트를 사용하면 의존성과 설정 문제를 고려할 필요가 없습니다
야근 안 해
퇴근해 줘
조금만 늦게 퇴근
주말 야근
한 번의 컴포넌트 캡슐화로 번거로운 과정을 벗어나세요
과거에는 Node.js ➡️ npm ➡️ Webpack 등 일련의 학습 과정을 거쳐야만 컴포넌트 캡슐화의 첫걸음을 내딛을 수 있었습니다
지금은 단 하나의 파일만 필요합니다
다양한 템플릿 문법 지원
jQuery의 정신적 계승자
템플릿 문법을 지원하면서도 노드를 직접 조작할 수 있어 유연하고 효율적입니다
API 디자인은 jQuery와 유사하지만 더 직관적입니다
// 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]; // 获取第一个子元素