Nim의 프레임을 사용해 볼게요. Karax.
개요
처음으로 젠에게 투고하여 보도하다
초보자라서 안 되는 부분이 많은데 지적해 주시면 좋을 것 같아요.
Nim SPA 프레임워크 Karax를 사용하여 간단한 세 가지 배열 만들기
Karax의 창고
요점
작업 환경
Nim Compiler Version 1.0.6
nimble v0.11.0
Karax 1.1.3
Karax 설치
전제 조건
절차.
$ nimble init
nimble initnim 프로젝트를 만드는 명령$ nimble install karax
Karax를 이동해 보도록 하겠습니다.
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<link rel="stylesheet" href="./index.css">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="ROOT" />
<script type="text/javascript" src="./helloworld.js"></script>
</body>
</html>
body 태그 내#ROOT에 nim 파일의 Karax 설명을 사용한 가상 DOMscript에는 Helloworld가 있다.nim에서 전송된 js 파일 지정하기 helloworld.nim
· Hello World를 표시하기 위한 코드를 Karax 라이브러리로 쓰기
・index.와 같이 src 내에서 Hello World.배nim
helloworld.nim
include karax/prelude
proc createDom(): VNode =
return buildHtml(tdiv):
text "Hello World!"
setRenderer createDom
$ nim js src/helloworld.nim
그리고...
브라우저에서 index.로그 열기
Hello World! 성공하다
세 번째 줄을 서보도록 하겠습니다.
리팩트 만드는 레슨, 익숙한 세 가지로 나열해 주세요.
이번에 제작된 제품은 다음과 같은 기능을 갖춘 제품입니다.
tictactoe.nim
완성형의 코드는 다음과 같다
tictactoe.nim
include karax/prelude
import algorithm
var
status: array[0..8,kstring]
xIsNext: bool = true
winner: kstring = kstring""
status.fill(kstring"")
proc calculateWinner(): kstring =
const lines = @[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
]
for i in lines:
var a, b, c: int
(a, b, c) = i
if status[a] != kstring"" and status[a] == status[b] and status[a] == status[c]:
return status[a]
return ""
proc square(m: int): VNode =
proc squareOnClick(a: int): proc() =
return proc() =
if winner != kstring"": return
status[a] = if xIsNext: kstring"x" else:kstring"o"
xIsNext = not xIsNext
winner = calculateWinner()
return buildHTML(tdiv):
button(class = "square",onclick = squareOnClick(m)):
text status[m]
proc board(): VNode =
return buildHtml(tdiv):
for i in 0..2:
tdiv(class = "board-row"):
for j in 0..2:
square(i*3+j)
proc createDom(): VNode =
return buildHtml(tdiv):
board()
tdiv(class = "container"):
tdiv:
if winner == "":
text "Next: " & (if xIsNext:"x" else:"o")
else:
text "Winner: " & winner
setRenderer createDom
변수 선언
var
status: array[0..8,kstring]
xIsNext: bool = true
winner: kstring = kstring""
status.fill(kstring"")
board
proc board(): VNode =
return buildHtml(tdiv):
for i in 0..2:
tdiv(class = "board-row"):
for j in 0..2:
square(i*3+j)
tdiv[1]로 표시됩니다<タグ名>(属性=値,属性=値,属性=値,...):의 형식으로 속성을 설정할 수 있다text stringtext(string) 방식으로 진행square
proc square(m: int): VNode =
proc squareOnClick(a: int): proc() =
return proc() =
if winner != kstring"": return
status[a] = if xIsNext: kstring"x" else:kstring"o"
xIsNext = not xIsNext
winner = calculateWinner()
return buildHTML(tdiv):
button(class = "square",onclick = squareOnClick(m)):
text status[m]
이벤트를
イベント名 = proc{...} 형식으로 등록할 수 있음button(class="square",onclick = proc() = status[a] = if xIsNext: kstring"x" else:kstring"o"):도 제대로 작동하지 않는다createDom + Setrenderer
proc createDom(): VNode =
return buildHtml(tdiv):
board()
tdiv(class = "container"):
tdiv:
if winner == "":
text "Next: " & (if xIsNext:"x" else:"o")
else:
text "Winner: " & winner
setRenderer createDom
setRenderer 仮想DOM해야 돼실행
$ nim js src/tictactoe.nim
index.html
<!DOCTYPE html>
<html>
<head>
<title>○×ゲーム</title>
<link rel="stylesheet" href="./index.css">
<link rel="icon" href="/favicon.ico">
</head>
<body id="body">
<div id="ROOT" />
<script type="text/javascript" src="./tictactoe.js"></script>
</body>
</html>
index입니다.나는 브라우저에서 파일을 열 것이다.
이렇게 완성!
요약(재등재)
참고 자료
Karax용 문서
React 자습서
덤
구글 검색과tictactoe로 조사하면...
각주
유사한 예로 i 라벨은italic이고 b 라벨은bold이며 u 라벨은underlined↩︎로 써야 한다.
Reference
이 문제에 관하여(Nim의 프레임을 사용해 볼게요. Karax.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/id_est/articles/4d41487ac9c84eb57150텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
