telepath 라이브러리 기반 Python과 JavaScript 간 데이터 교환
12163 단어 PythontelepathJavaScript
그것은 어떤 작용을 합니까?
이것은 Python 대상을 포함한 구조화된 데이터를 JSON 서열화 형식으로 묶는 메커니즘을 제공한다.상응하는 JavaScript에 이 메커니즘을 등록함으로써 이 메커니즘을 확장하여 모든 Python 클래스를 지원할 수 있습니다.그리고 압축된 데이터는 HTTP 응답에 포함되고 자바스크립트에서 압축을 풀면 원시 데이터와 같은 효과를 얻을 수 있다.
설치 방법
pip install telepath소개
만약 우리가 바둑을 두는 데 사용할 Django 응용 프로그램을 구축하고 있다고 가정해 보세요.우리는 이미 수일 또는 수주의 시간을 들여 게임 규칙의Python 실현을 구축했고 현재 게임 상태와 각 부분을 대표하는 클래스를 제공했다.그러나 우리는 플레이어에 적당한 우호적인 사용자 인터페이스를 제공하기를 희망한다. 이것은 우리가 자바스크립트 전단을 작성할 때가 되었다는 것을 의미한다.우리의 UI 코드는 불가피하게 자신의 대상을 가지게 될 것이다. 이 대상은 서로 다른 역할을 대표하고 우리가 서버에서 추적하고 있는 데이터 구조를 거울로 삼을 수 있다. 그러나 우리는Python 대상을 보낼 수 없기 때문에 이 데이터를 클라이언트에게 보내는 것은 일반적으로 게임 상태를 의미하는 JSON 표시 형식을 의미하고 양쪽에 각각 대량의 스타일 코드를 설계하여 데이터 구조를 옮겨다니며 본 기기의 대상 사이를 왔다 갔다 하는 것을 의미한다.telepath가 이 과정을 어떻게 간소화하는지 봅시다.
완전한 바둑 게임은 본 강좌에 있어서 너무 많기 때문에 우리는 이 한 걸음만 과장하는 것을 선택한다.
Python 환경에서 새 Django 프로젝트를 만듭니다.
pip install "Django>=3.1,<3.2"
django-admin startproject draughts
cd draughts
./manage.py startapp games간단하게 말하자면, 이 예시에서 우리는 데이터베이스와 관련되지 않고, 게임 상태를 Django모델이 아닌 일반적인Python 클래스로 표시할 것이다.게임/views를 수정합니다.py, 다음과 같습니다.
from django.shortcuts import render
class Piece:
def __init__(self, color, position):
self.color = color
self.position = position
class GameState:
def __init__(self, pieces):
self.pieces = pieces
@staticmethod
def new_game():
black_pieces = [
Piece('black', (x, y))
for y in range(0, 3)
for x in range((y + 1) % 2, 8, 2)
]
white_pieces = [
Piece('white', (x, y))
for y in range(5, 8)
for x in range((y + 1) % 2, 8, 2)
]
return GameState(black_pieces + white_pieces)
def game(request):
game_state = GameState.new_game()
return render(request, 'game.html', {})
<!doctype html>
<html>
<head>
<title>Draughts</title>
<script>
document.addEventListener('DOMContentLoaded', event => {
const gameElement = document.getElementById('game');
gameElement.innerHTML = 'TODO: render the board here'
});
</script>
</head>
<body>
<h1>Draughts</h1>
<div id="game">
</div>
</body>
</html>
from django.contrib import admin
from django.urls import path
from games.views import game
urlpatterns = [
path('', game),
path('admin/', admin.site.urls),
]지금까지 우리는 새로운 게임을 대표하는 GameState 대상을 만들었습니다. 이 대상을 클라이언트로 전송할 수 있도록telepath를 도입할 때입니다.다음 명령을 수행합니다.
pip install telepath
import json
from django.shortcuts import render
from telepath import JSContext
# ...
def game(request):
game_state = GameState.new_game()
js_context = JSContext()
packed_game_state = js_context.pack(game_state)
game_state_json = json.dumps(packed_game_state)
return render(request, 'game.html', {
'game_state_json': game_state_json,
})이는 GameState가 Telepath가 아직 어떻게 처리해야 할지 모르는 사용자 정의Python 유형이기 때문이다.pack에 전달되는 모든 사용자 정의 형식은 해당하는 JavaScript 구현에 연결되어야 합니다.이것은 Adapter 객체를 정의하여 telepath에 등록함으로써 이루어집니다.다음과 같이 게임/뷰를 업데이트합니다.py:
import json
from django.shortcuts import render
from telepath import Adapter, JSContext, register
# ...
class GameState:
# keep definition as before
class GameStateAdapter(Adapter):
js_constructor = 'draughts.GameState'
def js_args(self, game_state):
return [game_state.pieces]
class Media:
js = ['draughts.js']
register(GameStateAdapter(), GameState)
class Piece:
# keep definition as before
class PieceAdapter(Adapter):
js_constructor = 'draughts.Piece'
def js_args(self, piece):
return [piece.color, piece.position]
class Media:
js = ['draughts.js']
register(PieceAdapter(), Piece)
<body>
<h1>Draughts</h1>
<div id="game" data-game-state="{{ game_state_json }}">
</div>
</body>데이터를 JSON 서열화 가능한 형식으로 포장하는 것 외에 JSContext 대상은 데이터 압축 해제에 필요한 JavaScript 미디어 정의를 미디어 속성으로 추적합니다.템플릿에도 전달할 게임 보기를 업데이트합니다. - 게임/views에서.py 중:
def game(request):
game_state = GameState.new_game()
js_context = JSContext()
packed_game_state = js_context.pack(game_state)
game_state_json = json.dumps(packed_game_state)
return render(request, 'game.html', {
'game_state_json': game_state_json,
'media': js_context.media,
})
<head>
<title>Draughts</title>
{{ media }}
<script>
document.addEventListener('DOMContentLoaded', event => {
const gameElement = document.getElementById('game');
gameElement.innerHTML = 'TODO: render the board here'
});
</script>
</head>
class Piece {
constructor(color, position) {
this.color = color;
this.position = position;
}
}
window.telepath.register('draughts.Piece', Piece);
class GameState {
constructor(pieces) {
this.pieces = pieces;
}
}
window.telepath.register('draughts.GameState', GameState);
<script>
document.addEventListener('DOMContentLoaded', event => {
const gameElement = document.getElementById('game');
const gameStateJson = gameElement.dataset.gameState;
const packedGameState = JSON.parse(gameStateJson);
const gameState = window.telepath.unpack(packedGameState);
console.log(gameState);
})
</script>
class Piece {
constructor(color, position) {
this.color = color;
this.position = position;
}
render(container) {
const element = document.createElement('div');
container.appendChild(element);
element.style.width = element.style.height = '24px';
element.style.border = '2px solid grey';
element.style.borderRadius = '14px';
element.style.backgroundColor = this.color;
}
}
window.telepath.register('draughts.Piece', Piece)
class GameState {
constructor(pieces) {
this.pieces = pieces;
}
render(container) {
const table = document.createElement('table');
container.appendChild(table);
const cells = [];
for (let y = 0; y < 8; y++) {
let row = document.createElement('tr');
table.appendChild(row);
cells[y] = [];
for (let x = 0; x < 8; x++) {
let cell = document.createElement('td');
row.appendChild(cell);
cells[y][x] = cell;
cell.style.width = cell.style.height = '32px';
cell.style.backgroundColor = (x + y) % 2 ? 'silver': 'white';
}
}
this.pieces.forEach(piece => {
const [x, y] = piece.position;
const cell = cells[y][x];
piece.render(cell);
});
}
}
window.telepath.register('draughts.GameState', GameState)
<script>
document.addEventListener('DOMContentLoaded', event => {
const gameElement = document.getElementById('game');
const gameStateJson = gameElement.dataset.gameState;
const packedGameState = JSON.parse(gameStateJson);
const gameState = window.telepath.unpack(packedGameState);
gameState.render(gameElement);
})
</script>우리는 우리가 이미 얻은 성과를 신속하게 되돌아봅시다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Python의 None과 NULL의 차이점 상세 정보그래서 대상 = 속성 + 방법 (사실 방법도 하나의 속성, 데이터 속성과 구별되는 호출 가능한 속성 같은 속성과 방법을 가진 대상을 클래스, 즉 Classl로 분류할 수 있다.클래스는 하나의 청사진과 같아서 하나의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
