# mvvm

**Repository Path**: web_74/mvvm

## Basic Information

- **Project Name**: mvvm
- **Description**: mvvm
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-27
- **Last Updated**: 2026-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 伯乐项目 (Bole Project)

> 一个基于多种前端框架实现的用户数据展示和管理系统，用于演示不同前端技术栈的实现方式。

## 📋 目录

- [项目概述](#项目概述)
- [项目结构](#项目结构)
- [多框架实现版本](#多框架实现版本)
- [技术栈详解](#技术栈详解)
- [框架对比](#框架对比)
- [核心功能实现](#核心功能实现)
- [使用说明](#使用说明)
- [开发建议](#开发建议)

---

## 项目概述

伯乐项目是一个用户数据展示和管理系统，主要功能包括：

| 功能模块 | 描述 |
|---------|------|
| 标签页切换 | 酒友/酒客两种用户类型切换 |
| 数据统计 | 用户消费和业绩数据统计展示 |
| 用户列表 | 用户信息列表展示 |
| 排序功能 | 按消费或业绩排序（升序/降序） |
| 动画效果 | 数字滚动动画效果 |
| 数据格式化 | 时间格式化、手机号脱敏 |

---

## 项目结构

```
bole-vue/
├── assets/                    # 静态资源目录
│   ├── css/                   # 样式文件
│   │   ├── aui.css           # AUI 框架样式
│   │   └── bole.css          # 项目自定义样式
│   └── js/                    # JavaScript 库
│       ├── anime.min.js      # 动画库
│       ├── axios.min.js      # HTTP 客户端
│       ├── lodash.min.js     # 工具库
│       ├── moment.js         # 时间处理库
│       ├── vue.js            # Vue.js 核心库
│       └── vue2-filters.js   # Vue.js 过滤器扩展
│
├── index.html                 # Vue 2.x 版本
├── alpine.html                # Alpine.js 版本
├── petite-vue.html            # petite-vue 版本
├── Mithril.html               # Mithril.js 版本
├── DOMVM.html                 # DOMVM 版本
├── Preact.html                # Preact 版本
├── Avalon.html                # Avalon.js 版本
│
├── vue/                       # Vue.js 学习示例
│   └── vue/
│       ├── index.html        # Vue 基础示例
│       ├── list.html         # Vue 列表操作示例
│       └── vue.js            # Vue.js 库文件
│
├── seaJs/                     # SeaJS 模块加载器示例
│   ├── sea.js                # SeaJS 核心库
│   ├── js/
│   │   ├── moment.js         # moment 模块
│   │   ├── vue.js            # vue 模块
│   │   └── seajs-preload.js  # 预加载插件
│   └── seaJs.html            # SeaJS 示例页面
│
└── readme.md                  # 项目说明文档
```

---

## 多框架实现版本

本项目使用 **7 种**不同的前端框架实现了相同的功能，便于对比学习：

### 框架版本总览

| 序号 | 框架名称 | 文件名 | 体积 | 特点 | 适用场景 |
|-----|---------|--------|------|------|---------|
| 1 | Vue 2.x | index.html | ~30KB | Options API、完整生命周期、过滤器 | 中大型项目 |
| 2 | Alpine.js | alpine.html | ~15KB | 轻量级、类 Vue 语法、无需构建 | 小型项目、渐进式增强 |
| 3 | petite-vue | petite-vue.html | ~6KB | Vue 3 轻量版、Composition API | 小型项目 |
| 4 | Mithril.js | Mithril.html | ~10KB | 轻量级、hyperscript、高性能 | 单页应用 |
| 5 | DOMVM | DOMVM.html | ~6KB | 轻量级、零依赖、高性能 | 高性能应用 |
| 6 | Preact | Preact.html | ~3KB | 轻量级 React、Hooks、类 React API | React 生态项目 |
| 7 | Avalon.js | Avalon.html | ~60KB | 国产 MVVM、兼容性好、易上手 | 兼容 IE 的项目 |

### 详细说明

#### 1. Vue 2.x 版本 (index.html)

**技术栈**: Vue 2.x + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | Options API |
| 生命周期 | 完整的生命周期钩子（created, mounted, updated, destroyed） |
| 数据格式化 | 过滤器 (filters) |
| 数据监听 | 监听器 (watch) |
| 响应式原理 | Object.defineProperty |
| 模板语法 | Mustache {{}} + v- 指令 |

#### 2. Alpine.js 版本 (alpine.html)

**技术栈**: Alpine.js + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | 类似 Vue 的声明式语法 |
| 生命周期 | x-init 初始化 |
| 数据格式化 | 方法调用 |
| 数据监听 | $watch 方法 |
| 响应式原理 | Proxy |
| 模板语法 | x- 指令 |

#### 3. petite-vue 版本 (petite-vue.html)

**技术栈**: petite-vue + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | Composition API 风格 |
| 生命周期 | @mounted 钩子 |
| 数据格式化 | 方法调用 |
| 数据监听 | $watch 方法 |
| 响应式原理 | Proxy (Vue 3) |
| 模块加载 | ES Module |

#### 4. Mithril.js 版本 (Mithril.html)

**技术栈**: Mithril.js + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | 组件对象模式 |
| 生命周期 | oninit, oncreate, onupdate, onremove |
| 视图渲染 | m() hyperscript 函数 |
| 状态管理 | vnode.state |
| 自动重绘 | m.redraw() 手动触发 |
| 路由 | 内置路由系统 |

#### 5. DOMVM 版本 (DOMVM.html)

**技术栈**: DOMVM + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | 函数式视图定义 |
| 生命周期 | willInsert, didInsert, willRemove, didRemove |
| 视图渲染 | el() 函数创建虚拟 DOM |
| 状态管理 | 外部状态对象 |
| 自动重绘 | view.redraw() 手动触发 |
| 特点 | 零依赖、超高性能 |

#### 6. Preact 版本 (Preact.html)

**技术栈**: Preact + Hooks + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | 函数式组件 + Hooks |
| 生命周期 | useEffect Hook |
| 视图渲染 | h() hyperscript 函数 |
| 状态管理 | useState Hook |
| DOM 引用 | useRef Hook |
| 特点 | 轻量级 React 替代品 |

#### 7. Avalon.js 版本 (Avalon.html)

**技术栈**: Avalon.js + Axios + Lodash + Moment.js + Anime.js

| 特性 | 说明 |
|-----|------|
| API 风格 | MVVM 模式 |
| 视图模型 | avalon.define() 定义 |
| 指令系统 | ms-* 指令和 : 短指令 |
| 数据绑定 | 双向数据绑定 |
| 响应式原理 | 属性劫持 + 虚拟 DOM |
| 特点 | 国产框架、兼容 IE6+ |

---

## 技术栈详解

### 核心库说明

| 库名称 | 版本 | 作用 | 文档链接 |
|-------|------|------|---------|
| Vue.js | v2.6.12 | 渐进式 JavaScript 框架 | [官方文档](https://v2.cn.vuejs.org/) |
| Alpine.js | v3.15.0 | 轻量级响应式框架 | [官方文档](https://alpinejs.dev/) |
| petite-vue | v0.4.1 | Vue 3 轻量级版本 | [GitHub](https://github.com/vuejs/petite-vue) |
| Mithril.js | v2.2.2 | 轻量级客户端框架 | [官方文档](https://mithril.js.org/) |
| DOMVM | v3.4.14 | 轻量级虚拟 DOM 库 | [GitHub](https://github.com/domvm/domvm) |
| Preact | v10.19.3 | 轻量级 React 替代品 | [官方文档](https://preactjs.com/) |
| Avalon.js | v2.2.2 | 国产 MVVM 框架 | [官方文档](http://avalonjs.coding.me/) |
| Axios | - | Promise HTTP 客户端 | [GitHub](https://github.com/axios/axios) |
| Lodash | - | JavaScript 工具库 | [官方文档](https://lodash.com/) |
| Moment.js | - | 日期处理库 | [官方文档](https://momentjs.com/) |
| Anime.js | - | JavaScript 动画库 | [官方文档](https://animejs.com/) |

### 工具库用途

| 库名称 | 项目中的用途 |
|-------|-------------|
| Axios | 发送 HTTP 请求，获取后端 API 数据 |
| Lodash | 使用 `orderBy` 方法进行数据排序 |
| Moment.js | 时间戳格式化显示 |
| Anime.js | 数字滚动动画效果 |

---

## 框架对比

### 综合对比表

| 特性 | Vue 2.x | Alpine.js | petite-vue | Mithril.js | DOMVM | Preact | Avalon.js |
|-----|---------|-----------|------------|-----------|-------|--------|-----------|
| **体积** | ~30KB | ~15KB | ~6KB | ~10KB | ~6KB | ~3KB | ~60KB |
| **API 风格** | Options API | 类 Vue | Composition | 组件对象 | 函数式 | Hooks | MVVM |
| **响应式原理** | defineProperty | Proxy | Proxy | 手动 | 手动 | Proxy | 属性劫持 |
| **构建工具** | 可选 | 不需要 | 不需要 | 不需要 | 不需要 | 不需要 | 不需要 |
| **模板语法** | v- 指令 | x- 指令 | v- 指令 | m() 函数 | el() 函数 | h() 函数 | ms- 指令 |
| **生命周期** | 完整 | init | @mounted | 完整 | 完整 | useEffect | 部分 |
| **过滤器** | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| **监听器** | watch | $watch | $watch | 手动 | 手动 | useEffect | $watch |
| **路由** | vue-router | ❌ | ❌ | ✅ 内置 | ❌ | preact-router | ❌ |
| **IE 兼容** | IE9+ | ❌ | ❌ | ❌ | IE11+ | ❌ | IE6+ |
| **适用场景** | 中大型 | 小型/增强 | 小型 | SPA | 高性能 | React 生态 | 兼容项目 |

### 性能对比

| 框架 | 渲染性能 | 内存占用 | 学习曲线 |
|-----|---------|---------|---------|
| Vue 2.x | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| Alpine.js | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| petite-vue | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Mithril.js | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| DOMVM | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| Preact | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| Avalon.js | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |

---

## 核心功能实现

### 功能实现对比

| 功能模块 | Vue 2.x | Alpine.js | Mithril.js | Preact | Avalon.js |
|---------|---------|-----------|-----------|--------|-----------|
| 标签页切换 | @click + tabIndex | x-on + tabIndex | onclick + state | onclick + useState | :click + tabIndex |
| 列表渲染 | v-for | x-for | m() + map | h() + map | ms-for |
| 条件渲染 | v-if/v-show | x-if/x-show | 三元表达式 | 三元表达式 | ms-if |
| 数据排序 | Lodash | Lodash | Lodash | Lodash | Lodash |
| 时间格式化 | filters | 方法 | 方法 | 方法 | 方法 |
| 动画效果 | Anime.js | Anime.js | Anime.js | Anime.js | Anime.js |

### 实现细节

#### 1. 标签页切换

| 框架 | 实现方式 |
|-----|---------|
| Vue 2.x | `@click="tabIndex=index"` + `:class="{active: index===tabIndex}"` |
| Alpine.js | `x-on:click="tabIndex=index"` + `:class="{'active': index===tabIndex}"` |
| Mithril.js | `onclick: () => {vnode.state.tabIndex = index}` |
| Preact | `onclick={() => setTabIndex(index)}` |
| Avalon.js | `:click="@tabClick(index)"` + `:class="index === @tabIndex ? 'active' : ''"` |

#### 2. 列表渲染

| 框架 | 实现方式 |
|-----|---------|
| Vue 2.x | `<li v-for="(item, index) in dataList.data">` |
| Alpine.js | `<template x-for="(item, index) in dataList.data">` |
| Mithril.js | `vnode.state.dataList.data.map(item => m('li', ...))` |
| Preact | `dataList.data.map(item => h('li', ...))` |
| Avalon.js | `<li ms-for="(index, el) in @dataList.data">` |

#### 3. 排序功能

所有框架都使用 Lodash 的 `orderBy` 方法：

```javascript
data = _.orderBy(data, ['consume'], ['desc']);
```

---

## 使用说明

### 运行项目

| 版本 | 文件 | 打开方式 |
|-----|------|---------|
| Vue 2.x | index.html | 直接在浏览器打开 |
| Alpine.js | alpine.html | 直接在浏览器打开 |
| petite-vue | petite-vue.html | 需要支持 ES Module 的浏览器 |
| Mithril.js | Mithril.html | 直接在浏览器打开 |
| DOMVM | DOMVM.html | 直接在浏览器打开 |
| Preact | Preact.html | 直接在浏览器打开 |
| Avalon.js | Avalon.html | 直接在浏览器打开 |

### 功能操作指南

| 操作 | 说明 |
|-----|------|
| 标签页切换 | 点击顶部"酒友"或"酒客"标签 |
| 排序 | 点击列表标题"按消费"或"按业绩" |
| 切换排序方式 | 再次点击同一标题，切换升序/降序 |
| 查看动画 | 切换标签页时触发数字滚动动画 |

### 注意事项

| 注意项 | 说明 |
|-------|------|
| 防止闪屏 | 使用 `v-cloak` / `x-cloak` / `ms-cloak` 指令 |
| HTTP 请求 | 使用 Axios 库 |
| 数据排序 | 使用 Lodash 的 `orderBy` 方法 |
| 时间格式化 | 使用 Moment.js 库 |
| 动画效果 | 使用 Anime.js 库 |
| 运行环境 | 需要在服务器环境下运行（AJAX 请求） |

---

## 开发建议

### 框架选择建议

| 项目规模 | 推荐框架 | 理由 |
|---------|---------|------|
| 小型项目 | Alpine.js / petite-vue | 轻量级、易上手、无需构建 |
| 中型项目 | Vue 2.x / Preact | 生态完善、社区活跃 |
| 大型项目 | Vue 2.x | 完整生态、企业级支持 |
| 高性能需求 | Mithril.js / DOMVM | 极致性能、轻量级 |
| 需要兼容 IE | Avalon.js | 兼容 IE6+ |
| React 生态 | Preact | API 兼容 React |

### 代码规范

| 规范项 | 说明 |
|-------|------|
| 注释规范 | 所有代码添加详细中文注释 |
| 样式规范 | 在 bole.css 中修改，避免行内样式 |
| 方法封装 | 数据处理逻辑封装在方法中 |
| 数据格式化 | 使用过滤器或方法实现 |
| 动画扩展 | 基于现有 anime 方法扩展 |

### 学习路径建议

| 学习阶段 | 推荐文件 | 学习目标 |
|---------|---------|---------|
| 初学者 | vue/vue/index.html | 学习 Vue 基础语法 |
| 进阶 | 对比所有框架文件 | 理解不同框架实现方式 |
| 实战 | index.html | 学习完整项目结构 |
| 模块化 | seaJs/seaJs.html | 了解模块加载器 |

---

## 技术亮点

### 1. 多框架实现

- ✅ 7 种主流前端框架实现
- ✅ 统一的功能和交互体验
- ✅ 便于对比学习不同框架

### 2. 完善的注释

- ✅ 所有文件添加详细中文注释
- ✅ JSDoc 格式的方法说明
- ✅ 关键逻辑的详细解释

### 3. 现代化技术栈

- ✅ 使用 ES6+ 语法
- ✅ Promise 异步处理
- ✅ 模块化开发

### 4. 良好的用户体验

- ✅ 响应式设计
- ✅ 流畅的动画效果
- ✅ 友好的交互反馈

---

## 更新日志

### v2.0.0 (2024-05-27)

**新增功能**
- ✨ 新增 Mithril.js 版本实现
- ✨ 新增 DOMVM 版本实现
- ✨ 新增 Preact 版本实现
- ✨ 新增 Avalon.js 版本实现

**优化改进**
- 📝 为所有文件添加详细中文注释
- 📝 更新 README.md 文档
- 🎨 优化代码结构和布局

### v1.0.0 (初始版本)

**基础功能**
- ✨ Vue 2.x 版本实现
- ✨ Alpine.js 版本实现
- ✨ petite-vue 版本实现
- ✨ 标签页切换功能
- ✨ 用户列表展示
- ✨ 排序功能
- ✨ 动画效果

---

## 贡献指南

欢迎提交 Issue 和 Pull Request！

### 提交规范

| 类型 | 说明 |
|-----|------|
| ✨ feat | 新功能 |
| 🐛 fix | 修复 Bug |
| 📝 docs | 文档更新 |
| 🎨 style | 代码格式调整 |
| ♻️ refactor | 重构代码 |
| ✅ test | 测试相关 |

---

## 许可证

MIT License

---

## 联系方式

如有问题或建议，欢迎通过以下方式联系：

- 📧 Email: [your-email@example.com]
- 💬 Issue: [GitHub Issues]

---

**⭐ 如果这个项目对你有帮助，请给一个 Star！**