공유 하고 소장 할 만 한 xmlplus 구성 요소 학습 튜 토리 얼
xmlplus 는 디자인 이 매우 독특한 자 바스 크 립 트 프레임 워 크 로 전후 단 프로젝트 를 신속하게 개발 하 는 데 사용 된다.
구성 요소 기반 설계
xmlplus 에서 구성 요 소 는 기본 적 인 구조 블록 입 니 다.구성 요소 디자인 의 좋 고 나 쁨 을 평가 하 는 중요 한 기준 은 포장 도 이다.xmlplus 를 기반 으로 한 구성 요 소 는 매우 높 은 패 키 징 도 를 가지 고 있 습 니 다.다음은 간단 한 구성 요소 예제 입 니 다.
Widget: {
css: "#widget{ color: red; }",
xml: `<h1 id='widget'>default</h1>`,
fun: function (sys, items, opts) {
sys.widget.text("hello, world");
}
}
구성 요 소 는 네 임 스페이스 로 구성 되 어 있 습 니 다.전통 적 인 디 렉 터 리 경 로 를 기반 으로 한 구성 요소 참조 방식 은 구성 요소 의 사용 을 더욱 편리 하 게 합 니 다.네 임 스페이스/ui 에 있 는 Calendar 구성 요 소 를 정의 했다 고 가정 하면 HTML 페이지 에서 이렇게 사용 할 수 있 습 니 다.
구성 요 소 를 어떻게 정의 하 는 지 에 대해 서 는 공식 문서http://www.xmlplus.cn/docs를 참고 하 십시오.
우호 적 상용 성
비 침입 식 디자인 으로 xmlplus 는 현재 거의 모든 프레임 워 크 나 라 이브 러 리 와 통합 하여 사용 할 수 있 습 니 다.
xmlplus 의 뛰어난 통합 능력 을 이용 하여 기 존의 라 이브 러 리 나 프레임 워 크 를 프로젝트 에 통합 시 켜 바퀴 를 다시 만 드 는 곤경 에 빠 지지 않도록 할 수 있 습 니 다.
다음은 Bootstrap 단추 구성 요 소 를 패키지 하 는 예제 입 니 다.
Button: {
xml: `<button type='button' class='btn'/>`,
fun: function (sys, items, opts) {
this.addClass("btn-" + opts.type);
}
}
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>
xmlplus 의 독특한 디자인 으로 브 라 우 저 기반 및 서버 기반 응용 을 같은 방식 으로 디자인 할 수 있 습 니 다.
브 라 우 저 에서 사용 하면 한 페이지 의 응용 을 효율적으로 개발 할 수 있다.서버 에 서 는 서비스 애플 리 케 이 션 을 개발 할 수도 있 고 전통 사 이 트 를 개발 할 수도 있다.
다음은 서버 의 간단 한 Sqlite 구성 요소 패키지 입 니 다.
Sqlite: {
fun: function (sys, items, opts) {
var sqlite = require("sqlite3").verbose(),
return new sqlite.Database("data.db");
}
}
Example: {
xml: `<Sqlite id='sqlite'/>`,
fun: function (sys, items, opts) {
let stmt = "SELECT * FROM users";
items.sqlite.all(stmt, (err, rows) => console.log(rows));
}
}
HttpServer: {
xml: `<html>
<body id='body'>default</body>
</html>`
fun: function (sys, items, opts) {
let http = require("http");
http.createServer((req, res) => {
sys.body.text("hello,world");
res.setHeader("Content-Type", "text/html");
res.end(this.serialize(true));
}).listen(80);
}
}
또한 xmlplus 에 포 함 된검색 하 다.,커 뮤 니 케 이 션,함께 누리다와지연 실례 화등 기본 적 인 특성 도 독특한 것 으로 응용 개발 을 매우 효율 적 으로 보조 할 수 있다.
xmlplus 학습 안내
xmlplus 는 오픈 소스 의 프레임 워 크 입 니 다.공식 사 이 트 를 방문 할 수 있 습 니 다.http://www.xmlplus.cn공식 홈 페이지 에는 상세 한 입문 강좌 가 포함 되 어 있 으 니 여기 서부 터 시작 할 수 있다.
또한 xmlplus 의 소스 코드 는 github 에 위탁 되 어 있 습 니 다.아래 주 소 를 방문 하여 해당 하 는 자원 을 얻 을 수 있 습 니 다.
https://github.com/qudou/xmlplus
만약 당신 이 이미 기초 강 좌 를 다 배 웠 다 면,본 보가 쓴 xmlplus 구성 요소 디자인 시 리 즈 를 계속 배 울 수 있 습 니 다.이 시 리 즈 는 주로 실제 구성 요소 의 디자인 사고,방법 과 기교 등 을 토론 한다.
xmlplus 구성 요소 디자인 시리즈 중 하나-아이콘(ICON)
xmlplus 구성 요소 디자인 시리즈 의 2-단추(단추)
xmlplus 구성 요소 디자인 시리즈 의 3-텍스트 상자(TextBox)
xmlplus 구성 요소 디자인 시리즈 의 4-목록(List)
xmlplus 구성 요소 디자인 시리즈 의 5-옵션 카드(Tabbar)
xmlplus 구성 요소 디자인 시리즈 의 6-드 롭 다운 리 셋(Pull Refresh)
이 시 리 즈 는 xmlplus 프레임 워 크 를 기반 으로 합 니 다.xmlplus 에 대해 잘 모 르 면 방문 할 수 있 습 니 다www.xmlplus.cn.여기에 참고 할 수 있 는 상세 한 입문 문서 가 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
xmlplus 구성 요소 디자인 시리즈 아이콘(ICON)(1)아이콘 파일 과 구성 요소 가 있 는 파일 이 같은 등급 디 렉 터 리 에 있다 고 가정 하면 다음 과 같은 방식 으로 필요 한 아이콘 을 편리 하 게 참조 할 수 있 습 니 다.구성 요소 Icon 은 id 속성 값...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
