JavaScript无处不在：如何为所有平台编写代码

为什么JavaScript是新的“一次编写，到处运行”？

还记得开发者们的老梦想吗：代码写一次，就能在任何地方运行？Java曾用虚拟机承诺过这一点，但实践中却总是需要各种折腾。现在来看看JavaScript。这个曾被视作按钮动画“玩具”的语言，如今已征服世界。你知道吗？它确实兑现了这个承诺。

JavaScript跨平台开发不仅仅是一种时尚潮流。它是一种缩短产品上市时间、节省预算、并让团队使用同一批开发人员的方法。在本文中，我们将探讨如何用一门语言为浏览器、移动设备、桌面端和服务器创建应用程序。没错，还会有真实的代码示例。

现代跨平台应用的架构

在深入代码之前，我们先来了解现代生态系统的结构。核心思想是将应用逻辑分为三层：

• 业务逻辑——数据处理、验证、API交互。这是核心，不应依赖于平台。
• UI层——界面。它在Web、移动端和桌面端可能不同，但通常使用通用组件。
• 存储层——本地数据库、缓存、文件系统操作。

正是JavaScript让你能用一门语言编写所有三层。我们来了解一下主要工具。

服务端：Node.js作为基础

任何跨平台系统都从后端开始。Node.js是基于V8引擎的浏览器外JavaScript运行时环境。它非常适合创建REST API、处理WebSocket连接以及与数据库交互。

以下是一个简单的Express服务器示例，它将同时服务于Web和移动应用：

const express = require('express');const app = express();const port = 3000;

// 处理JSON的中间件app.use(express.json());

// 获取用户列表的示例端点app.get('/api/users', (req, res) => {  const users = [    { id: 1, name: '安娜', email: 'anna@example.com' },    { id: 2, name: '伊万', email: 'ivan@example.com' }  ];  res.json(users);});

// 创建新用户的POST请求app.post('/api/users', (req, res) => {  const newUser = req.body;  // 这里通常是保存到数据库  console.log('新用户:', newUser);  res.status(201).json({ message: '用户已创建', user: newUser });});

app.listen(port, () => {  console.log(`服务器已启动，地址为 http://localhost:${port}`);});

这段代码在Windows、macOS和Linux上运行效果相同。此外，你还可以在Raspberry Pi或云容器中运行它——无需任何修改。

Web界面：React作为通用构建块

当谈到JavaScript跨平台开发时，React是首选。它的组件化架构允许在Web和移动应用之间复用高达70%的代码。

我们来创建一个简单的用户列表显示组件：

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('错误:', error));  }, []);

  if (loading) {    return <div>加载中...</div>;  }

  return (    <div>      <h2>用户列表</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>