# langshift.dev

**Repository Path**: lztkdr/langshift.dev

## Basic Information

- **Project Name**: langshift.dev
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-15
- **Last Updated**: 2025-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌍 LangShift.dev - 多语言学习平台

> 专为开发者设计的编程语言转换学习平台，通过对比学习快速掌握新语言

[English](README.en.md) | 中文

[![Next.js](https://img.shields.io/badge/Next.js-15.3.5-black.svg)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-19.0.0-blue.svg)](https://react.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.2-blue.svg)](https://www.typescriptlang.org)
[![Fumadocs](https://img.shields.io/badge/Fumadocs-15.6.1-purple.svg)](https://fumadocs.vercel.app)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)

## 📖 项目简介

LangShift.dev 是一个专门为开发者设计的编程语言转换学习平台。通过对比不同编程语言的语法特性和概念映射，帮助你快速理解新语言的核心概念，并能够将其应用到实际项目中。

我们的核心理念是：**通过已知语言理解未知语言**，让学习新编程语言变得简单高效。

## 🎯 学习目标

- 通过语言对比快速掌握新编程语言
- 理解不同语言的语法特性和设计哲学
- 构建多语言开发能力
- 学会在不同语言间迁移开发思维
- 掌握现代开发工具和最佳实践

## 🌐 支持的语言转换

### 🔄 JavaScript ↔ Python ✅ (已完成)
- 从 JavaScript 开发者视角学习 Python
- 语法映射：变量、函数、类、异步编程
- 生态系统对比：npm vs pip、Node.js vs Python
- 实战项目：Web 开发、数据处理、自动化脚本
- 高级特性：类型注解、装饰器、上下文管理器
- **包含 13 个完整学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2py/README.md)**

### 🔄 JavaScript ↔ Rust ✅ (已完成)
- 从 JavaScript 开发者视角学习 Rust
- 内存管理：垃圾回收 vs 所有权系统
- 类型系统：动态类型 vs 静态类型
- 性能优化：解释执行 vs 编译优化
- 并发编程：事件循环 vs 零成本抽象
- **包含 14 个完整学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2rust/README.md)**

### 🔄 JavaScript ↔ Go ✅ (已完成)
- 从 JavaScript 开发者视角学习 Go
- 并发编程：事件循环 vs Goroutines
- 类型系统：动态类型 vs 静态类型
- 包管理：npm vs Go Modules
- 错误处理：异常 vs 显式错误返回
- **包含 14 个完整学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2go/README.md)**

### 🔄 JavaScript ↔ Kotlin ✅ (已完成)
- 从 JavaScript 开发者视角学习 Kotlin
- 协程编程：Promise/async-await vs Kotlin 协程
- Android 开发：移动应用开发基础
- JVM 生态系统：Spring Boot 和后端服务
- 函数式编程：高阶函数和 Lambda 表达式
- **包含 14 个完整学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2kotlin/README.md)**

### 🔄 JavaScript ↔ C++ ✅ (已完成)
- 从 JavaScript 开发者视角学习 C++
- 内存管理：垃圾回收 vs 手动管理
- 面向对象：原型链 vs 类继承
- 性能优化：解释执行 vs 编译优化
- 模板编程：动态类型 vs 泛型
- **包含 15 个学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2cpp/README.md)**

### 🔄 JavaScript ↔ Swift ✅ (已完成)
- 从 JavaScript 开发者视角学习 Swift
- 类型系统：动态类型 vs 强类型
- 内存管理：垃圾回收 vs ARC
- 函数式编程：高阶函数 vs 闭包
- 移动开发：Web vs iOS/macOS
- **包含 15 个学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2swift/README.md)**

### 🔄 JavaScript ↔ C ✅ (已完成)
- 从 JavaScript 开发者视角学习 C 语言
- 内存管理：垃圾回收 vs 手动内存管理
- 指针操作：引用 vs 指针
- 系统编程：高级抽象 vs 底层控制
- 性能优化：解释执行 vs 编译优化
- **包含 15 个学习模块**

**📚 [查看详细学习指南 →](./content/docs/js2c/README.md)**

### 🚀 更多语言支持计划中...
- **JavaScript ↔ Java** (计划中)
- Python ↔ Rust
- JavaScript ↔ Dart
- Python ↔ TypeScript

## 📚 学习模块概览

### JavaScript → Python (已完成)
- **模块 0**: Python 介绍与学习方法
- **模块 1**: 基础语法对比
- **模块 2**: 模块系统与包管理
- **模块 3**: 面向对象与函数式编程
- **模块 4**: 异步编程
- **模块 5**: 代码质量、测试与类型注解
- **模块 6**: Web 开发
- **模块 7**: 数据处理与自动化
- **模块 8**: 综合实战项目
- **模块 9**: 高级主题
- **模块 10**: 常见陷阱与解决方案
- **模块 11**: Pythonic 代码风格
- **模块 12**: 类型注解详解

### JavaScript → Rust (已完成)
- **模块 0**: Rust 初识与环境搭建
- **模块 1**: 核心语法与结构对比
- **模块 2**: 模块系统与构建工具
- **模块 3**: 所有权与内存模型
- **模块 4**: 并发与异步模型
- **模块 5**: 类型系统与特征（Traits）
- **模块 6**: 错误处理与类型安全
- **模块 7**: Web 开发实战
- **模块 8**: 系统级编程与高级主题
- **模块 9**: 实战项目驱动
- **模块 10**: 常见陷阱与调试指南
- **模块 11**: Idiomatic Rust 风格
- **模块 12**: 高级 Rust 特性
- **模块 13**: 性能优化与最佳实践

### JavaScript → Go (已完成)
- **模块 0**: Go 介绍与学习方法
- **模块 1**: 基础语法对比
- **模块 2**: 包系统与模块管理
- **模块 3**: 类型系统与接口
- **模块 4**: 并发编程与 Goroutines
- **模块 5**: Channel 与 Select 语句
- **模块 6**: 错误处理机制
- **模块 7**: Web 开发实战
- **模块 8**: 微服务架构
- **模块 9**: 云原生开发
- **模块 10**: 测试与调试
- **模块 11**: 综合实战项目
- **模块 12**: 常见陷阱与解决方案
- **模块 13**: Idiomatic Go 风格

### JavaScript → Kotlin (已完成)
- **模块 0**: Kotlin 介绍与 JVM 生态系统
- **模块 1**: 基础语法对比
- **模块 2**: JVM 生态系统与工具链
- **模块 3**: 函数式编程特性
- **模块 4**: 协程与异步编程
- **模块 5**: 面向对象编程
- **模块 6**: Android 开发基础
- **模块 7**: Web 开发与 Spring Boot
- **模块 8**: 移动应用开发
- **模块 9**: 跨平台开发
- **模块 10**: 测试与调试
- **模块 11**: 综合实战项目
- **模块 12**: 常见陷阱与解决方案
- **模块 13**: Idiomatic Kotlin 风格

### JavaScript → C++ (已完成)
- **模块 0**: C++ 介绍与学习方法
- **模块 1**: 基础语法对比
- **模块 2**: 内存管理基础
- **模块 3**: 指针与引用
- **模块 4**: 面向对象编程基础
- **模块 5**: 模板与泛型编程
- **模块 6**: STL 容器
- **模块 7**: STL 算法
- **模块 8**: 错误处理机制
- **模块 9**: 智能指针
- **模块 10**: 性能优化
- **模块 11**: 现代 C++ 特性
- **模块 12**: 并发与多线程
- **模块 13**: 系统编程
- **模块 14**: 综合实战项目

### JavaScript → Swift (已完成)
- **模块 0**: Swift 介绍与学习方法
- **模块 1**: 基础语法对比
- **模块 2**: 类型系统与安全
- **模块 3**: 函数式编程特性
- **模块 4**: 面向对象编程
- **模块 5**: 协议与扩展
- **模块 6**: 错误处理
- **模块 7**: 并发编程
- **模块 8**: iOS/macOS 开发
- **模块 9**: SwiftUI 框架
- **模块 10**: 网络编程
- **模块 11**: 数据持久化
- **模块 12**: 性能优化
- **模块 13**: 测试与调试
- **模块 14**: 综合实战项目

### JavaScript → C (已完成)
- **模块 0**: C 语言介绍与学习方法
- **模块 1**: 基础语法对比
- **模块 2**: 变量与内存基础
- **模块 3**: 指针基础概念
- **模块 4**: 数组与字符串处理
- **模块 5**: 函数与栈管理
- **模块 6**: 结构体与联合体
- **模块 7**: 动态内存分配
- **模块 8**: 文件操作与 I/O
- **模块 9**: 算法与数据结构
- **模块 10**: 系统编程基础
- **模块 11**: 综合实战项目
- **模块 12**: 常见陷阱与调试
- **模块 13**: 性能优化与最佳实践
- **模块 14**: 高级主题与扩展

详细的学习内容请查看各模块的专门文档。

## 🛠️ 技术栈

### 平台技术
- **框架**: Next.js 15.3.5 (App Router)
- **文档**: Fumadocs 15.6.1 + MDX
- **样式**: Tailwind CSS 4.0.9
- **代码编辑器**: Monaco Editor 4.7.0 + Pyodide
- **国际化**: 支持中英文繁体中文
- **搜索**: Orama 3.1.1 全文搜索

### 语言运行时
- **Python**: Pyodide (浏览器端 Python)
- **JavaScript**: V8 Engine
- **Kotlin**: JVM (计划支持 Kotlin/JS)
- **Rust**: WebAssembly (计划中)

### 开发工具
- **类型检查**: TypeScript 5.8.2
- **代码质量**: ESLint 9.30.1, Prettier 3.5.3
- **构建优化**: Turbopack
- **性能监控**: 内置性能监控组件

### 特色功能
- **交互式代码编辑器**: 支持多语言语法高亮和实时执行
- **代码对比模式**: 并排显示不同语言的实现
- **性能监控**: 实时监控代码执行性能
- **虚拟化编辑器**: 优化大量代码的渲染性能
- **滚动编码**: 交互式代码演示
- **SEO 优化**: 结构化数据和搜索引擎优化

## 🚀 快速开始

### 环境要求

- Node.js 18+ 
- pnpm (推荐包管理器)
- 现代浏览器 (支持 WebAssembly)

### 安装步骤

1. **克隆项目**
   ```bash
   git clone https://github.com/erweixin/langshift.dev.git
   cd langshift.dev
   ```

2. **安装依赖**
   ```bash
   pnpm install
   ```

3. **启动开发服务器**
   ```bash
   pnpm dev
   ```

4. **访问项目**
   打开浏览器访问 [http://localhost:8000](http://localhost:8000)

### 开发命令

```bash
# 开发模式 (使用 Turbopack)
pnpm dev

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

# 代码检查
pnpm lint

# 类型检查
pnpm type-check

# SEO 检查
pnpm seo-check

# 构建分析
pnpm analyze
```

## 📁 项目结构

```
langshift.dev/
├── app/                    # Next.js App Router
│   └── [lang]/            # 国际化路由
│       ├── (home)/        # 首页
│       ├── docs/          # 文档页面
│       ├── intro/         # 介绍页面
│       └── layout.tsx     # 布局组件
├── components/            # React 组件
│   ├── python-editor.tsx  # Python 代码编辑器
│   ├── virtualized-editor.tsx # 虚拟化编辑器
│   ├── side-by-side-code.tsx # 对比代码组件
│   ├── scrollycoding.tsx # 滚动编码组件
│   ├── monaco-manager.tsx # Monaco 编辑器管理
│   ├── editor-performance-monitor.tsx # 性能监控
│   ├── interactive-code-comparison.tsx # 交互式代码对比
│   ├── seo-head.tsx      # SEO 头部组件
│   ├── seo-doc-page.tsx  # 文档页面 SEO
│   ├── analytics.tsx     # 分析组件
│   ├── annotations/      # 注释组件
│   └── ui/              # UI 组件库
├── content/              # 文档内容
│   └── docs/            # 文档目录
│       ├── js2py/       # JavaScript → Python (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 13个学习模块
│       ├── js2rust/     # JavaScript → Rust (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2go/       # JavaScript → Go (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2cpp/      # JavaScript → C++ (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2swift/    # JavaScript → Swift (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2c/        # JavaScript → C (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2kotlin/   # JavaScript → Kotlin (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2java/     # JavaScript → Java (计划中)
│       └── ...
├── lib/                 # 工具函数
│   ├── i18n.ts         # 国际化配置
│   ├── seo-structured-data.ts # SEO 结构化数据
│   ├── source.ts       # 源码配置
│   └── utils.ts        # 工具函数
├── messages/           # 国际化消息
│   ├── en.json        # 英文
│   ├── zh-cn.json     # 简体中文
│   └── zh-tw.json     # 繁体中文
├── styles/            # 样式文件
├── middleware.ts      # 中间件配置
├── next.config.mjs   # Next.js 配置
├── source.config.ts  # Fumadocs 配置
├── tsconfig.json     # TypeScript 配置
├── README.md         # 项目说明（本文件）
└── .cursorrules      # 全局开发规范
```

## 🎯 学习建议

1. **选择起点**: 从你最熟悉的语言开始
2. **对比学习**: 重点关注语法差异和概念映射
3. **动手实践**: 每个概念都要动手写代码验证
4. **项目驱动**: 通过实战项目巩固所学知识
5. **循序渐进**: 按照模块顺序学习，打好基础
6. **性能关注**: 理解不同语言的性能特性
7. **最佳实践**: 学习各语言的编码规范和最佳实践

### 语言选择建议
- **初学者**: 建议从 JavaScript → Python 开始，语法相对简单
- **系统编程**: 推荐 JavaScript → Rust 或 JavaScript → C++
- **并发编程**: 推荐 JavaScript → Go 或 JavaScript → Rust
- **移动开发**: 推荐 JavaScript → Swift 或 JavaScript → Kotlin (Android)
- **后端开发**: 推荐 JavaScript → Go 或 JavaScript → Kotlin (JVM)
- **性能优化**: 推荐 JavaScript → Rust 或 JavaScript → C++
- **企业应用**: 推荐 JavaScript → Kotlin 或 JavaScript → Java (JVM)

## 🌟 特色功能

### 🔄 交互式代码编辑器
- 支持多种编程语言语法高亮
- 实时代码执行和错误提示
- 代码对比模式，直观显示差异
- 性能监控和优化建议
- 虚拟化渲染，支持大量代码

### 📚 结构化学习路径
- 模块化课程设计
- 渐进式难度递增
- 丰富的代码示例和练习题
- 实战项目驱动学习
- 多语言内容支持

### 🌍 多语言支持
- 中英文繁体中文三语界面
- 国际化文档内容
- 本地化学习体验
- 语言检测和自动跳转

### 🔍 智能搜索
- 全文搜索功能
- 多语言搜索支持
- 搜索结果高亮
- 搜索历史记录

### 📊 性能优化
- 图片优化和懒加载
- 代码分割和按需加载
- 缓存策略优化
- SEO 友好设计

## 📖 文档结构

本项目采用分层文档结构：

### 根级文档
- **README.md** (本文件) - 项目整体介绍和快速开始
- **.cursorrules** - 全局开发规范和 AI 助手行为准则

### 模块级文档
每个语言转换模块都有自己的专门文档：
- **README.md** - 模块详细介绍和学习指南
- **.cursorrules** - 模块特定的开发规范

### 文档模板
- **docs/module-documentation-template.md** - 新模块创建指南

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

### 贡献类型
- 🐛 Bug 修复
- ✨ 新功能开发
- 📝 文档改进
- 🌍 国际化翻译
- 🎨 UI/UX 优化
- 🚀 性能优化
- 🧪 测试用例

### 开发规范
- 遵循 TypeScript 严格模式
- 使用 ESLint 和 Prettier
- 编写单元测试
- 遵循 Git 提交规范
- 更新相关文档

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

感谢所有为这个平台做出贡献的开发者！

## 📞 联系我们

- 项目主页: [https://langshift.dev](https://langshift.dev)
- 问题反馈: [GitHub Issues](https://github.com/erweixin/langshift.dev/issues)
- 功能建议: [GitHub Discussions](https://github.com/erweixin/langshift.dev/discussions)

---

**让编程语言学习变得简单高效！** 🚀