sanbuphy
1062e2e16f
- 重构 api-intro 7 个 Vue 组件为更紧凑的左右布局 - 重构 api-design 相关组件 - 重构 transistor-to-cpu 相关组件 - 统一使用 demo-root -> demo-header -> demo-layout -> info-box 结构 - 扩写文章内容为 MIT 讲义风格
456 lines
10 KiB
Vue
456 lines
10 KiB
Vue
<template>
|
|
<div class="programming-language-comparison-demo">
|
|
<div class="demo-header">
|
|
<span class="title">编程语言对比</span>
|
|
<span class="subtitle">不同语言的特点和适用场景</span>
|
|
</div>
|
|
|
|
<div class="comparison-grid">
|
|
<div
|
|
v-for="lang in languages"
|
|
:key="lang.name"
|
|
:class="['lang-card', { active: activeLang === lang.name }]"
|
|
@click="activeLang = lang.name"
|
|
>
|
|
<div class="card-header">
|
|
<span class="card-icon">{{ lang.icon }}</span>
|
|
<span class="card-name">{{ lang.name }}</span>
|
|
</div>
|
|
<div class="card-year">{{ lang.year }}</div>
|
|
<div class="card-paradigm">{{ lang.paradigm }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详细对比 -->
|
|
<div v-if="activeLang" class="detail-comparison">
|
|
<div class="detail-header">
|
|
<span class="detail-icon">{{ currentLang.icon }}</span>
|
|
<span class="detail-name">{{ currentLang.name }}</span>
|
|
</div>
|
|
|
|
<div class="detail-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">诞生年份</div>
|
|
<div class="info-value">{{ currentLang.year }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">编程范式</div>
|
|
<div class="info-value">{{ currentLang.paradigm }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">类型系统</div>
|
|
<div class="info-value">{{ currentLang.typeSystem }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">性能</div>
|
|
<div class="info-value">{{ currentLang.performance }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-cases">
|
|
<div class="cases-title">主要用途</div>
|
|
<div class="cases-list">
|
|
<span
|
|
v-for="(use, index) in currentLang.uses"
|
|
:key="index"
|
|
class="case-tag"
|
|
>
|
|
{{ use }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pros-cons">
|
|
<div class="pros">
|
|
<div class="list-title">✓ 优点</div>
|
|
<ul>
|
|
<li v-for="(pro, index) in currentLang.pros" :key="index">
|
|
{{ pro }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cons">
|
|
<div class="list-title">✗ 缺点</div>
|
|
<ul>
|
|
<li v-for="(con, index) in currentLang.cons" :key="index">
|
|
{{ con }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 快速对比表 -->
|
|
<div class="quick-comparison">
|
|
<div class="comparison-title">快速对比</div>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>语言</th>
|
|
<th>学习难度</th>
|
|
<th>开发效率</th>
|
|
<th>执行性能</th>
|
|
<th>主要领域</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(lang, index) in languages"
|
|
:key="index"
|
|
:class="{ highlighted: lang.name === activeLang }"
|
|
>
|
|
<td>{{ lang.icon }} {{ lang.name }}</td>
|
|
<td>{{ lang.difficulty }}</td>
|
|
<td>{{ lang.efficiency }}</td>
|
|
<td>{{ lang.performance }}</td>
|
|
<td>{{ lang.mainField }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
const activeLang = ref('Python')
|
|
|
|
const languages = [
|
|
{
|
|
name: 'Python',
|
|
icon: '🐍',
|
|
year: '1991',
|
|
paradigm: '多范式',
|
|
typeSystem: '动态强类型',
|
|
performance: '中等',
|
|
difficulty: '⭐',
|
|
efficiency: '⭐⭐⭐⭐⭐',
|
|
mainField: 'AI/数据/后端',
|
|
uses: ['人工智能', '数据分析', 'Web 后端', '自动化脚本'],
|
|
pros: ['语法简洁优雅', '生态丰富', '学习曲线平缓', '社区活跃'],
|
|
cons: ['执行速度较慢', '移动端支持弱', 'GIL 限制并发']
|
|
},
|
|
{
|
|
name: 'JavaScript',
|
|
icon: '📜',
|
|
year: '1995',
|
|
paradigm: '多范式',
|
|
typeSystem: '动态弱类型',
|
|
performance: '中等',
|
|
difficulty: '⭐⭐',
|
|
efficiency: '⭐⭐⭐⭐',
|
|
mainField: 'Web 开发',
|
|
uses: ['前端开发', 'Node.js 后端', '跨平台应用', '小程序'],
|
|
pros: ['无处不在', '生态庞大', '异步编程优秀', '跨平台'],
|
|
cons: ['类型不安全', '标准混乱', '性能不如编译语言']
|
|
},
|
|
{
|
|
name: 'Java',
|
|
icon: '☕',
|
|
year: '1995',
|
|
paradigm: '面向对象',
|
|
typeSystem: '静态强类型',
|
|
performance: '高',
|
|
difficulty: '⭐⭐⭐',
|
|
efficiency: '⭐⭐⭐',
|
|
mainField: '企业级应用',
|
|
uses: ['企业后端', 'Android 应用', '大数据', '桌面应用'],
|
|
pros: ['跨平台', '稳定可靠', '生态系统完善', '类型安全'],
|
|
cons: ['语法繁琐', '内存占用大', '启动慢']
|
|
},
|
|
{
|
|
name: 'C/C++',
|
|
icon: '⚙️',
|
|
year: '1972/1983',
|
|
paradigm: '多范式',
|
|
typeSystem: '静态强类型',
|
|
performance: '极高',
|
|
difficulty: '⭐⭐⭐⭐⭐',
|
|
efficiency: '⭐⭐',
|
|
mainField: '系统编程',
|
|
uses: ['操作系统', '游戏引擎', '嵌入式', '高性能计算'],
|
|
pros: ['性能极致', '底层控制力强', '效率高'],
|
|
cons: ['学习困难', '内存管理复杂', '开发效率低', '容易出错']
|
|
},
|
|
{
|
|
name: 'Go',
|
|
icon: '🐹',
|
|
year: '2009',
|
|
paradigm: '多范式',
|
|
typeSystem: '静态强类型',
|
|
performance: '高',
|
|
difficulty: '⭐⭐',
|
|
efficiency: '⭐⭐⭐⭐',
|
|
mainField: '云原生/后端',
|
|
uses: ['云原生', '微服务', 'DevOps', '网络服务'],
|
|
pros: ['简洁高效', '并发优秀', '编译快', '部署简单'],
|
|
cons: ['生态较新', '缺少泛型(旧版)', '错误处理繁琐']
|
|
},
|
|
{
|
|
name: 'Rust',
|
|
icon: '🦀',
|
|
year: '2010',
|
|
paradigm: '多范式',
|
|
typeSystem: '静态强类型',
|
|
performance: '极高',
|
|
difficulty: '⭐⭐⭐⭐',
|
|
efficiency: '⭐⭐⭐',
|
|
mainField: '系统/WebAssembly',
|
|
uses: ['系统编程', 'WebAssembly', '区块链', 'CLI 工具'],
|
|
pros: ['内存安全', '性能极高', '现代工具链'],
|
|
cons: ['学习曲线陡', '编译速度慢', '生态尚在发展']
|
|
}
|
|
]
|
|
|
|
const currentLang = computed(() =>
|
|
languages.find((l) => l.name === activeLang.value)
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.programming-language-comparison-demo {
|
|
border: 1px solid var(--vp-c-divider);
|
|
background: var(--vp-c-bg-soft);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.demo-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.demo-header .title {
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
}
|
|
.demo-header .subtitle {
|
|
color: var(--vp-c-text-2);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.lang-card {
|
|
padding: 1rem;
|
|
background: var(--vp-c-bg);
|
|
border: 2px solid var(--vp-c-divider);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.lang-card:hover {
|
|
border-color: var(--vp-c-brand);
|
|
}
|
|
|
|
.lang-card.active {
|
|
border-color: var(--vp-c-brand);
|
|
background: var(--vp-c-brand-soft);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.card-name {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.card-year {
|
|
font-size: 0.75rem;
|
|
color: var(--vp-c-text-2);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.card-paradigm {
|
|
font-size: 0.8rem;
|
|
color: var(--vp-c-brand);
|
|
}
|
|
|
|
.detail-comparison {
|
|
background: var(--vp-c-bg);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--vp-c-divider);
|
|
}
|
|
|
|
.detail-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.detail-name {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
color: var(--vp-c-brand);
|
|
}
|
|
|
|
.detail-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.info-item {
|
|
text-align: center;
|
|
padding: 0.75rem;
|
|
background: var(--vp-c-bg-soft);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 0.75rem;
|
|
color: var(--vp-c-text-2);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.use-cases {
|
|
text-align: center;
|
|
}
|
|
|
|
.cases-title {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--vp-c-brand);
|
|
}
|
|
|
|
.cases-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.case-tag {
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--vp-c-bg-soft);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.pros-cons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pros-cons {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.pros,
|
|
.cons {
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.pros {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
border: 1px solid #10b981;
|
|
}
|
|
|
|
.cons {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border: 1px solid #ef4444;
|
|
}
|
|
|
|
.list-title {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.pros ul,
|
|
.cons ul {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.pros li,
|
|
.cons li {
|
|
font-size: 0.85rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.quick-comparison {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.comparison-title {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--vp-c-brand);
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.comparison-table th {
|
|
background: var(--vp-c-brand);
|
|
color: white;
|
|
padding: 0.75rem;
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.comparison-table td {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--vp-c-divider);
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
tr.highlighted {
|
|
background: var(--vp-c-brand-soft);
|
|
}
|
|
</style>
|