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

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

English | 中文

📖 项目简介

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

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

💡 智能辅助学习: 本项目运用 AI 技术生成丰富的学习内容，并经过审核优化，为你提供高效的学习体验。建议结合官方文档一起学习，获得最佳效果！如有改进建议，欢迎通过 GitHub Issues 分享。

🎯 学习目标

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

🌐 支持的语言转换

🔄 JavaScript ↔ Python ✅ (已完成)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ Rust ✅ (已完成)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ Go ✅ (已完成)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ Kotlin ✅ (已完成)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ C++ ✅ (已完成)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ Swift 🚧 (开发中)

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

📚 查看详细学习指南 →

🔄 JavaScript ↔ C ✅ (已完成)

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

📚 查看详细学习指南 →

🚀 更多语言支持计划中...

• 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.5.7 (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. 克隆项目

   git clone https://github.com/erweixin/langshift.dev.git
   cd langshift.dev
   

2. 安装依赖

   pnpm install
   

3. 启动开发服务器

   pnpm dev
   

4. 访问项目 打开浏览器访问 http://localhost:8000

开发命令

# 开发模式 (使用 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 文件了解详情。

🙏 致谢

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

📞 联系我们

• 项目主页: https://langshift.dev
• 问题反馈: GitHub Issues
• 功能建议: GitHub Discussions

---

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