架构设计基础 学习笔记（第 4 部分）

// 简化的响应式系统实现
class Dep {
  constructor() {
    this.subscribers = new Set()
  }
  
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect)
    }
  }
  
  notify() {
    this.subscribers.forEach(effect => effect())
  }
}
 
let activeEffect = null
 
function watchEffect(effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}
 
// 使用示例
const dep = new Dep()
let count = 0
 
watchEffect(() => {
  dep.depend()
  console.log(`count is: ${count}`)
})
 
// 触发更新
count++
dep.notify()  // 输出: count is: 1

// Vue 3 事件总线
class EventBus {
  constructor() {
    this.events = {}
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }
  
  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(...args))
    }
  }
  
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback)
    }
  }
}
 
// 使用示例
const bus = new EventBus()
 
// 订阅事件
bus.on('user-login', (user) => {
  console.log(`用户 ${user.name} 登录成功`)
})
 
// 发布事件
bus.emit('user-login', { name: '张三' })

┌──────────────┐
│   主服务器    │ ← 读写操作
└──────┬───────┘
       │ 数据同步
┌──────┴───────┐
│              │
▼              ▼
从服务器1    从服务器2
(只读)       (只读)

// 数据分片示例
class ShardManager {
  constructor(shards) {
    this.shards = shards  // 分片节点列表
  }
  
  // 根据 key 决定数据存储位置
  getShard(key) {
    const hash = this.hash(key)
    const index = hash % this.shards.length
    return this.shards[index]
  }
  
  // 简单哈希函数
  hash(key) {
    let hash = 0
    for (let char of String(key)) {
      hash = (hash << 5) - hash + char.charCodeAt(0)
    }
    return Math.abs(hash)
  }
}
 
// 使用示例
const shards = ['shard1.db', 'shard2.db', 'shard3.db']
const shardManager = new ShardManager(shards)
 
const db1 = shardManager.getShard('user:1001')  // 存储到 shard1
const db2 = shardManager.getShard('user:1002')  // 存储到 shard2

Model (数据模型)
  ↓ 数据变化
View (视图展示) ← 用户交互 → Controller (业务逻辑)

Model (数据模型)
  ↕ 数据绑定
ViewModel (视图模型)
  ↕ 数据绑定
View (视图)

<template>
  <!-- View 视图层 -->
  <div class="user-management">
    <input v-model="newUser.name" placeholder="输入用户名" />
    <button @click="addUser">添加用户</button>
    
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue'
 
// Model 数据层
const users = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
])
 
const newUser = ref({ name: '' })
 
// ViewModel 视图模型层
const userCount = computed(() => users.value.length)
 
const addUser = () => {
  if (!newUser.value.name) return
  
  users.value.push({
    id: Date.now(),
    name: newUser.value.name
  })
  
  newUser.value.name = ''
}
 
const deleteUser = (id) => {
  users.value = users.value.filter(user => user.id !== id)
}
</script>