${interactive ? `
` : ''}
例句
${word.examples.map(example => `
${example.sentence}
`).join('')}
${interactive ? `
` : ''}
`
}
setupEventListeners() {
this.addEventListener('click', (e) => {
if (e.target.matches('.flip-btn')) {
this.setState({ isFlipped: !this.state.isFlipped })
}
if (e.target.matches('.audio-btn')) {
const audioUrl = e.target.getAttribute('data-audio-url')
audioManager.playAudio(audioUrl)
}
})
}
}
// 註冊自定義元素
customElements.define('vocabulary-card', VocabularyCard)
export { VocabularyCard }
```
## 🚀 效能優化策略
### 載入優化
```javascript
// utils/lazyLoader.js
class LazyLoader {
constructor() {
this.observer = new IntersectionObserver(
this.handleIntersection.bind(this),
{ threshold: 0.1 }
)
}
// 延遲載入圖片
lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]')
images.forEach(img => this.observer.observe(img))
}
// 延遲載入組件
lazyLoadComponent(element, importFunction) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
importFunction().then(module => {
module.default.init(element)
})
observer.disconnect()
}
})
},
{ threshold: 0.1 }
)
observer.observe(element)
}
handleIntersection(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.getAttribute('data-src')
img.removeAttribute('data-src')
this.observer.unobserve(img)
}
})
}
}
export const lazyLoader = new LazyLoader()
```
### 快取策略
```javascript
// utils/cache.js
class CacheManager {
constructor() {
this.memoryCache = new Map()
this.maxAge = 5 * 60 * 1000 // 5分鐘
}
// 記憶體快取
setMemoryCache(key, data, maxAge = this.maxAge) {
this.memoryCache.set(key, {
data,
timestamp: Date.now(),
maxAge
})
}
getMemoryCache(key) {
const cached = this.memoryCache.get(key)
if (!cached) return null
if (Date.now() - cached.timestamp > cached.maxAge) {
this.memoryCache.delete(key)
return null
}
return cached.data
}
// localStorage快取
setLocalCache(key, data, maxAge = 24 * 60 * 60 * 1000) {
const cacheData = {
data,
timestamp: Date.now(),
maxAge
}
storage.setLocal(`cache_${key}`, cacheData)
}
getLocalCache(key) {
const cached = storage.getLocal(`cache_${key}`)
if (!cached) return null
if (Date.now() - cached.timestamp > cached.maxAge) {
storage.removeLocal(`cache_${key}`)
return null
}
return cached.data
}
}
export const cacheManager = new CacheManager()
```
## 🔒 安全性實作
### XSS防護
```javascript
// utils/security.js
class SecurityUtils {
// HTML清理
sanitizeHTML(html) {
const temp = document.createElement('div')
temp.textContent = html
return temp.innerHTML
}
// 輸入驗證
validateInput(input, type = 'text') {
const patterns = {
email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
phone: /^\+?[\d\s\-\(\)]+$/,
username: /^[a-zA-Z0-9_]{3,20}$/,
password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/
}
if (patterns[type]) {
return patterns[type].test(input)
}
// 基本長度檢查
return input.length > 0 && input.length < 1000
}
// CSRF Token處理
async getCSRFToken() {
try {
const response = await httpClient.get('/csrf-token')
return response.token
} catch (error) {
console.error('Failed to get CSRF token:', error)
return null
}
}
}
export const security = new SecurityUtils()
```
## 🧪 測試策略
### Vitest配置
```javascript
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
test: {
environment: 'happy-dom',
globals: true,
coverage: {
provider: 'v8',
reporter: ['text', 'json-summary', 'html'],
threshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80
}
}
}
}
})
```
### 組件測試範例
```javascript
// tests/components/VocabularyCard.test.js
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { VocabularyCard } from '../../src/components/business/VocabularyCard.js'
describe('VocabularyCard', () => {
let container
let vocabularyCard
beforeEach(() => {
// 設置DOM容器
container = document.createElement('div')
document.body.appendChild(container)
// 創建組件實例
vocabularyCard = document.createElement('vocabulary-card')
container.appendChild(vocabularyCard)
})
afterEach(() => {
// 清理DOM
document.body.removeChild(container)
})
it('should render word information correctly', () => {
vocabularyCard.setAttribute('word-id', 'test-word')
// 模擬API回應
vi.mock('../../src/services/vocabularyApi.js', () => ({
vocabularyAPI: {
getWordIntroduction: vi.fn().mockResolvedValue({
word: 'hello',
pronunciation: '/həˈloʊ/',
definition_zh: '你好',
examples: [
{ sentence: 'Hello, world!' }
]
})
}
}))
// 等待組件渲染
return new Promise(resolve => {
setTimeout(() => {
expect(vocabularyCard.querySelector('.word-text')).toHaveTextContent('hello')
expect(vocabularyCard.querySelector('.pronunciation')).toHaveTextContent('/həˈloʊ/')
resolve()
}, 100)
})
})
})
```
## 📦 建構和部署
### Vite建構配置
```javascript
// vite.config.js
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Drama Ling',
short_name: 'DramaLing',
description: 'AI-powered language learning app',
theme_color: '#1976d2',
background_color: '#ffffff',
display: 'standalone',
icons: [
{
src: '/icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
}
]
}
})
],
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vite'],
utils: ['./src/utils/index.js']
}
}
},
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/styles/base/variables.scss";`
}
}
}
})
```
---
**文檔狀態**: 🟢 已完成原生前端技術架構規劃
**最後更新**: 2025-09-10
**負責團隊**: 前端開發團隊
**下次檢查**: 開發開始前進行技術實施確認