SPA 프런트 엔드 개발, 쉽게 JavaScript로 가상 윈도우 시스템을 처리하는 모듈
11077 단어 TypeScriptSPA자바스크립트Node.jswebpack
1. 자바스크립트 가상 윈도우 프레임워크
SPA(SinglePageApplication)에 의한 프런트 엔드 개발은, UI를 구성하는 비용이 엄청나게 큰 것이 넥이 됩니다. 가능한 경우 쉽게 구현하고 싶은 곳입니다. 그래서 최소한의 코딩으로 나름의 UI를 만들 수 있는 프레임워크를 개발했습니다. IE11이나 GoogleBot에도 대응하고 있습니다.
일반적인 프런트 엔드 프레임 워크와의 차이는 윈도우를 기본 단위로하는 곳입니다. 그리고 HTML 태그를 확장하는 생각은 없습니다. 데이터의 입출력은 깨끗하게 JavaScript/TypeScript로 기술합니다.
프레임워크 사용 예
어떤 코드로 움직이는지
덧붙여서 최초의 소개 화상은 이하의 코드만으로 만들 수 있습니다. 이번은 리스트 뷰의 샘플입니다. 리스트 뷰는 헤더의 리사이즈나 소트에 표준 대응하고 있습니다.
동작 확인
h tps://그럼 ゔぁsc리 pt-우드 wf 라메를 rk. 기주 b. 이오 / jwf_사 mpぇ01
출처
htps : // 기주 b. 이 m / 그럼 Sc 리 pt 우드 wF 라메를 rk / jwf_ mp ぇ 01 /
index.tsimport * as JWF from 'javascript-window-framework'
function Main() {
const listView = new JWF.ListView({frame:true}) //リストビューをフレーム付きで作成
listView.addHeader(['番号','名前','攻撃力']) //ヘッダの作成
listView.addItem([1,'竹槍',5]) //アイテムの設定
listView.addItem([2,'棍棒', 10])
listView.addItem([3,'銅の剣', 10])
listView.setPos() //ウインドウを中央へ移動
listView.addEventListener('itemClick',(e)=>{ //アイテムクリック処理
const name = listView.getItemText(e.itemIndex,1) //リストビューからデータを取り出す
new JWF.MessageBox('メッセージ',name+"が選択された") //メッセージボックスの表示
})
}
//ページ読み込み時に実行する処理を設定
addEventListener("DOMContentLoaded", Main)
2. JWF 모듈
javascript-window-framework라는 이름으로 npm에 등록되어 있습니다. 빌드를 위해 NodeJS 설치가 필요합니다.
빌드까지의 단계
import * as JWF from 'javascript-window-framework'
function Main() {
const listView = new JWF.ListView({frame:true}) //リストビューをフレーム付きで作成
listView.addHeader(['番号','名前','攻撃力']) //ヘッダの作成
listView.addItem([1,'竹槍',5]) //アイテムの設定
listView.addItem([2,'棍棒', 10])
listView.addItem([3,'銅の剣', 10])
listView.setPos() //ウインドウを中央へ移動
listView.addEventListener('itemClick',(e)=>{ //アイテムクリック処理
const name = listView.getItemText(e.itemIndex,1) //リストビューからデータを取り出す
new JWF.MessageBox('メッセージ',name+"が選択された") //メッセージボックスの表示
})
}
//ページ読み込み時に実行する処理を設定
addEventListener("DOMContentLoaded", Main)
javascript-window-framework라는 이름으로 npm에 등록되어 있습니다. 빌드를 위해 NodeJS 설치가 필요합니다.
빌드까지의 단계
npm -y init
npm i javascript-window-framework
npm -D i webpack webpack-cli typescript ts-loader
tsc --init
webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}, module: {
rules: [{
test: /\.ts$/,
use: "ts-loader"
}]
}
};
index.ts
import * as JWF from 'javascript-window-framework'
function Main() {
const win = new JWF.FrameWindow() //フレームウインドウの作成
win.setTitle('サンプルウインドウ') //タイトルの設定
win.setPos() //位置を中心に設定
const client = win.getClient() //クライアントノードの取得
client.innerText = 'テキスト表示の\n実験'
}
//ページ読み込み時に実行する処理を設定
addEventListener("DOMContentLoaded", Main)
npx webpack
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
</body>
</html>
브라우저에서 dist/index.html 열기
3. 기타 다양한 기능
npm에 등록했지만, 프레임워크의 개발은 조금 전부터 하고 있기 때문에, 꽤 다양한 기능이 포함되어 있습니다. 윈도우의 리사이즈는 물론, 복수의 윈도우의 중첩이나 우선 순서의 처리도 대응하고 있습니다. 또한 윈도우 안에 윈도우를 만들거나, 가동식의 분할 바를 붙이거나, 트리 뷰를 표시하거나, 캘린더 기능도 만들었습니다. 등록 기념에 기사를 쓸 수 있기 때문에, 앞으로 좀 더 알맞은 해설 기사를 써 가고 싶습니다.
현재 htps : // c 납 d. jp/? p=610 로, 내용을 정리하고 있습니다.
Reference
이 문제에 관하여(SPA 프런트 엔드 개발, 쉽게 JavaScript로 가상 윈도우 시스템을 처리하는 모듈), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/0ba6bbb77e4c98df3d7a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(SPA 프런트 엔드 개발, 쉽게 JavaScript로 가상 윈도우 시스템을 처리하는 모듈), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/SoraKumo/items/0ba6bbb77e4c98df3d7a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
