pip install telepath 
 
 
 

 
 
 

  
  
  
pip install "Django>=3.1,<3.2" 
  
  
  
django-admin startproject draughts 
  
  
  
cd draughts 
  
  
  
./manage.py startapp games 
 
 
 

 
 
 

  
  
  
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', {}) 
 
 
 

 
 
 

  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
         
  
  
  
         
  
  
  
     
  
  
  
     
  
  
  
        
Draughts
 
  
  
  
         
  
  
  
        

 
 
 

  
  
  
from django.contrib import admin 
  
  
  
from django.urls import path 
  
  
  
 
  
  
  
from games.views import game 
  
  
  
 
  
  
  
urlpatterns = [ 
  
  
  
    path('', game), 
  
  
  
    path('admin/', admin.site.urls), 
  
  
  
] 
 
 
 

 
 
 

  
  
  
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, 
  
  
  
    }) 
 
 
 

 
 
 

  
  
  
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) 
 
 
 

 
 
 

  
  
  
 
  
  
  
       
Draughts
 
  
  
  
        
  
  
  
       

再次重新加載頁面，并在瀏覽器的開發(fā)人員工具中檢查游戲元素(在Chrome和Firefox中，右鍵單擊TODO注釋，然后選擇Inspect或Inspect Element)，您將看到GameState對象的JSON表示，準(zhǔn)備好 解壓成完整的JavaScript對象。

除了將數(shù)據(jù)打包成JSON可序列化的格式外，JSContext對象還跟蹤將數(shù)據(jù)解壓縮所需的JavaScript媒體定義，作為其媒體屬性。讓我們更新游戲視圖，以將其也傳遞給模板-在games/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, 
  
  
  
    }) 
 
 
 

將下面代碼添加到games / templates / game.html中的HTML頭文件中：

 
 
 

  
  
  
 
  
  
  
         
  
  
  
        {{ media }} 
  
  
  
         
  
  
  
     
 
 
 

重新加載頁面并查看源代碼，您將看到這帶來了兩個(gè)JavaScript包括 —— telepath.js(客戶端telepath庫，提供解包機(jī)制)和我們在適配器定義中指定的draughts.js文件。后者尚不存在，所以讓我們在games / static / draughts.js中創(chuàng)建它：

 
 
 

  
  
  
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); 
 
 
 

這兩個(gè)類定義實(shí)現(xiàn)了我們先前在適配器對象中聲明的構(gòu)造函數(shù)-構(gòu)造函數(shù)接收的參數(shù)是js_args定義的參數(shù)。window.telepath.register行將這些類定義附加到通過js_constructor指定的相應(yīng)標(biāo)識符。現(xiàn)在，這為我們提供了解壓縮JSON所需的一切-回到games / templates / game.html中，更新JS代碼，如下所示：

您可能需要重新啟動(dòng)服務(wù)器以獲取新的games/static文件夾。重新加載頁面，然后在瀏覽器控制臺中，您現(xiàn)在應(yīng)該看到填充了Piece對象的GameState對象?，F(xiàn)在，我們可以繼續(xù)在games/static/draughts.js中填寫渲染代碼：

 
 
 

  
  
  
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) 
 
 
 

在games/templates/game.html中添加對render方法的調(diào)用：

重新加載頁面，您將看到我們的跳棋程序已準(zhǔn)備就緒，可以開始游戲了。

• 讓我們快速回顧一下我們已經(jīng)取得的成果：
• 我們已經(jīng)打包和解包了自定義Python / JavaScript類型的數(shù)據(jù)結(jié)構(gòu)，而無需編寫代碼來遞歸該結(jié)構(gòu)。如果我們的GameState對象變得更復(fù)雜(例如，“棋子”列表可能變成棋子和國王對象的混合列表，或者狀態(tài)可能包括游戲歷史)，則無需重構(gòu)任何數(shù)據(jù)打包/拆包邏輯，除了為每個(gè)使用的類提供一個(gè)適配器對象。
• 僅提供了解壓縮頁面數(shù)據(jù)所需的JS文件-如果我們的游戲應(yīng)用程序擴(kuò)展到包括Chess，Go和Othello，并且所有生成的類都已通過Telepath注冊，則我們?nèi)匀恢恍枰峁┡c跳棋知識相關(guān)的代碼。

即使我們使用任意對象，也不需要?jiǎng)討B(tài)內(nèi)聯(lián)JavaScript —— 所有動(dòng)態(tài)數(shù)據(jù)都以JSON形式傳遞，并且所有JavaScript代碼在部署時(shí)都是固定的(如果我們的網(wǎng)站強(qiáng)制執(zhí)行CSP，這一點(diǎn)很重要)。