Web技术不断演进,新特性层出不穷,了解发展趋势有助于把握未来方向。
东巴文(db-w.cn) 认为:Web平台正在快速发展,新API、新特性不断涌现。关注Web发展趋势,掌握新兴技术,能帮助开发者提前布局,构建更强大的Web应用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web技术演进 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.trend-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.trend-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.feature-list li:before {
content: "→ ";
color: #667eea;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Web技术演进</h1>
<h2>近年重要特性</h2>
<div class="trend-demo">
<h3>2020-2024年Web新特性</h3>
<ul class="feature-list">
<li><strong>2024:</strong> View Transitions API, Document Picture-in-Picture, Storage API改进</li>
<li><strong>2023:</strong> CSS嵌套, Popover API, WebGPU, Fenced Frames</li>
<li><strong>2022:</strong> Container Queries, :has()选择器, File System Access API</li>
<li><strong>2021:</strong> Shared Element Transitions, WebCodecs, WebTransport</li>
<li><strong>2020:</strong> CSS Containment, Web Animations API改进, Native File System</li>
</ul>
</div>
<h2>CSS新特性</h2>
<div class="trend-demo">
<h3>现代CSS能力</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
/* 1. CSS嵌套(2023) */
.card {
padding: 1rem;
& .title {
font-size: 1.5rem;
}
&:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
}
/* 2. :has()选择器(2022) */
/* 选择包含图片的卡片 */
.card:has(img) {
display: flex;
}
/* 选择后面有错误的输入框 */
input:has(+ .error) {
border-color: red;
}
/* 3. Container Queries(2022) */
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
/* 4. CSS层叠层(@layer) */
@layer base, components, utilities;
@layer base {
body {
font-family: sans-serif;
}
}
@layer components {
.button {
padding: 0.5rem 1rem;
}
}
/* 5. View Transitions */
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}
/* 6. 滚动驱动动画 */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fade-in linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
/* 7. Popover API */
[popover] {
background: white;
border: 1px solid #ddd;
padding: 1rem;
border-radius: 8px;
}
/* 8. CSS逻辑属性 */
.element {
margin-inline: auto; /* 水平居中 */
padding-block: 1rem; /* 垂直内边距 */
border-inline-start: 2px solid #667eea; /* 逻辑边框 */
}
</pre>
</div>
</div>
<h2>JavaScript新特性</h2>
<div class="trend-demo">
<h3>现代JavaScript API</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
// 1. 顶层await(ES2022)
// 不需要包装在async函数中
const data = await fetch('/api/data').then(r => r.json());
// 2. 私有字段(ES2022)
class Person {
#name; // 私有字段
constructor(name) {
this.#name = name;
}
get name() {
return this.#name;
}
}
// 3. Array.prototype.at()
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 5 (最后一个元素)
console.log(arr.at(-2)); // 4 (倒数第二个)
// 4. Object.hasOwn()
const obj = { prop: 'value' };
console.log(Object.hasOwn(obj, 'prop')); // true
// 5. Error Cause
try {
throw new Error('外层错误', { cause: new Error('内层错误') });
} catch (e) {
console.log(e.cause); // Error: 内层错误
}
// 6. Array.fromAsync()
async function getData() {
const asyncIterable = {
async *[Symbol.asyncIterator]() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}
};
const arr = await Array.fromAsync(asyncIterable);
console.log(arr); // [1, 2, 3]
}
// 7. Change Array by Copy
const original = [1, 2, 3];
const reversed = original.toReversed(); // [3, 2, 1]
const sorted = original.toSorted(); // [1, 2, 3]
const spliced = original.toSpliced(1, 1); // [1, 3]
// 8. Well-formed JSON.stringify()
const invalid = '\uD800';
console.log(JSON.stringify(invalid)); // "\uD800" (不再抛出错误)
</pre>
</div>
</div>
<h2>Web API新特性</h2>
<div class="trend-demo">
<h3>现代Web API</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
// 1. View Transitions API
// 页面过渡效果
function navigate() {
if (!document.startViewTransition) {
updateDOM();
return;
}
document.startViewTransition(() => {
updateDOM();
});
}
// 2. Popover API
// 弹出层
<button popovertarget="menu">打开菜单</button>
<div id="menu" popover>
<ul>
<li>选项1</li>
<li>选项2</li>
</ul>
</div>
// 3. File System Access API
// 文件系统访问
async function saveFile() {
const handle = await window.showSaveFilePicker({
types: [{
description: 'Text Files',
accept: { 'text/plain': ['.txt'] }
}]
});
const writable = await handle.createWritable();
await writable.write('Hello, World!');
await writable.close();
}
// 4. WebGPU
// 新一代图形API
async function initWebGPU() {
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device,
format,
});
// 渲染管线...
}
// 5. WebCodecs
// 视频编解码
async function decodeVideo() {
const decoder = new VideoDecoder({
output: (frame) => {
// 处理视频帧
frame.close();
},
error: (e) => console.error(e)
});
decoder.configure({
codec: 'vp8',
codedWidth: 640,
codedHeight: 480
});
}
// 6. WebTransport
// 低延迟通信
const transport = new WebTransport('https://example.com');
const writer = transport.datagrams.writable.getWriter();
await writer.write(new Uint8Array([1, 2, 3]));
// 7. Screen Wake Lock API
// 保持屏幕唤醒
async function keepAwake() {
try {
const wakeLock = await navigator.wakeLock.request('screen');
console.log('屏幕保持唤醒');
// 释放
wakeLock.release();
} catch (err) {
console.error('唤醒锁失败:', err);
}
}
// 8. Clipboard API
// 剪贴板操作
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
}
async function readClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('剪贴板内容:', text);
} catch (err) {
console.error('读取失败:', err);
}
}
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>Web平台正在快速发展,CSS和JavaScript不断推出新特性。关注新特性,学习新API,能构建更强大、更高效的Web应用。
</div>
</div>
</body>
</html>
新兴Web技术正在扩展Web平台的能力边界。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新兴Web技术 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.tech-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.tech-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>新兴Web技术</h1>
<h2>WebGPU</h2>
<div class="tech-demo">
<h3>下一代图形API</h3>
<div class="code-block">
<pre>
// WebGPU是WebGL的继任者,提供更现代的图形能力
async function initWebGPU() {
// 检查支持
if (!navigator.gpu) {
throw new Error('WebGPU不支持');
}
// 获取适配器
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
throw new Error('无法获取GPU适配器');
}
// 获取设备
const device = await adapter.requestDevice();
// 配置Canvas
const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device,
format,
alphaMode: 'premultiplied',
});
// 创建渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {
module: device.createShaderModule({
code: `
@vertex
fn main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
vec2<f32>(0.0, 0.5),
vec2<f32>(-0.5, -0.5),
vec2<f32>(0.5, -0.5)
);
return vec4<f32>(pos[vertexIndex], 0.0, 1.0);
}
`
}),
entryPoint: 'main'
},
fragment: {
module: device.createShaderModule({
code: `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0); // 红色
}
`
}),
entryPoint: 'main',
targets: [{
format: format
}]
},
primitive: {
topology: 'triangle-list'
}
});
// 渲染
function render() {
const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: textureView,
clearValue: { r: 0, g: 0, b: 0, a: 1 },
loadOp: 'clear',
storeOp: 'store'
}]
});
renderPass.setPipeline(pipeline);
renderPass.draw(3);
renderPass.end();
device.queue.submit([commandEncoder.finish()]);
requestAnimationFrame(render);
}
render();
}
// WebGPU优势
/*
1. 更现代的API设计
2. 更好的性能
3. 支持计算着色器
4. 跨平台一致性
5. 更好的错误处理
*/
</pre>
</div>
</div>
<h2>WebXR</h2>
<div class="tech-demo">
<h3>增强现实和虚拟现实</h3>
<div class="code-block">
<pre>
// WebXR支持VR和AR体验
async function initWebXR() {
// 检查支持
if (!navigator.xr) {
console.log('WebXR不支持');
return;
}
// 检查VR支持
const isVRSupported = await navigator.xr.isSessionSupported('immersive-vr');
if (isVRSupported) {
console.log('支持VR');
}
// 检查AR支持
const isARSupported = await navigator.xr.isSessionSupported('immersive-ar');
if (isARSupported) {
console.log('支持AR');
}
// 启动VR会话
const session = await navigator.xr.requestSession('immersive-vr', {
optionalFeatures: ['local-floor', 'bounded-floor']
});
// 设置渲染层
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl', {
xrCompatible: true
});
session.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
// 渲染循环
const referenceSpace = await session.requestReferenceSpace('local-floor');
function render(time, frame) {
const pose = frame.getViewerPose(referenceSpace);
if (pose) {
const layer = session.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
// 渲染场景
for (const view of pose.views) {
const viewport = layer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
// 渲染每个视角
renderScene(view);
}
}
session.requestAnimationFrame(render);
}
session.requestAnimationFrame(render);
}
// AR示例
async function startAR() {
const session = await navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['hit-test', 'local-floor']
});
// AR特定功能
const hitTestSource = await session.requestHitTestSource({
space: await session.requestReferenceSpace('viewer')
});
// 检测平面并放置虚拟对象
session.requestAnimationFrame((time, frame) => {
const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length > 0) {
const hit = hitTestResults[0];
const pose = hit.getPose(referenceSpace);
// 在检测到的位置放置对象
placeObject(pose.transform.position);
}
});
}
</pre>
</div>
</div>
<h2>WebNN</h2>
<div class="tech-demo">
<h3>Web神经网络API</h3>
<div class="code-block">
<pre>
// WebNN提供硬件加速的机器学习推理
async function runMLInference() {
// 检查支持
if (!('ml' in navigator)) {
console.log('WebNN不支持');
return;
}
// 创建神经网络上下文
const context = await navigator.ml.createContext({
devicePreference: 'gpu'
});
// 构建计算图
const builder = new MLGraphBuilder(context);
// 定义输入
const input = builder.input('input', {
type: 'tensor-float32',
dimensions: [1, 3, 224, 224]
});
// 定义权重
const weight = builder.constant({
type: 'tensor-float32',
dimensions: [64, 3, 7, 7]
}, new Float32Array(64 * 3 * 7 * 7));
// 构建网络层
const conv = builder.conv2d(input, weight, {
padding: [3, 3, 3, 3],
strides: [2, 2]
});
const relu = builder.relu(conv);
const pool = builder.maxPool2d(relu, {
windowDimensions: [3, 3],
strides: [2, 2]
});
// 构建计算图
const graph = await builder.build({ output: pool });
// 准备输入数据
const inputData = new Float32Array(1 * 3 * 224 * 224);
// ... 填充数据
// 执行推理
const outputs = await graph.compute({
input: inputData
});
console.log('推理结果:', outputs.output);
}
// WebNN优势
/*
1. 硬件加速(CPU, GPU, NPU)
2. 跨平台一致性
3. 隐私保护(本地推理)
4. 低延迟
5. 低功耗
*/
</pre>
</div>
</div>
<h2>WebTransport</h2>
<div class="tech-demo">
<h3>低延迟通信</h3>
<div class="code-block">
<pre>
// WebTransport提供低延迟、高吞吐量的通信
async function useWebTransport() {
// 创建连接
const url = 'https://example.com';
const transport = new WebTransport(url);
// 等待连接就绪
await transport.ready;
console.log('WebTransport连接成功');
// 1. 发送数据报(Datagrams) - 不可靠,低延迟
const datagramWriter = transport.datagrams.writable.getWriter();
await datagramWriter.write(new Uint8Array([1, 2, 3, 4, 5]));
// 接收数据报
const datagramReader = transport.datagrams.readable.getReader();
while (true) {
const { value, done } = await datagramReader.read();
if (done) break;
console.log('收到数据报:', value);
}
// 2. 发送流(Streams) - 可靠,有序
const stream = await transport.createUnidirectionalStream();
const writer = stream.writable.getWriter();
await writer.write(new Uint8Array([1, 2, 3]));
await writer.close();
// 3. 接收流
const reader = transport.incomingUnidirectionalStreams.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
// 读取流数据
const streamReader = value.readable.getReader();
while (true) {
const { value: data, done: streamDone } = await streamReader.read();
if (streamDone) break;
console.log('收到流数据:', data);
}
}
// 4. 双向流
const bidiStream = await transport.createBidirectionalStream();
// 发送
const bidiWriter = bidiStream.writable.getWriter();
await bidiWriter.write(new Uint8Array([1, 2, 3]));
// 接收
const bidiReader = bidiStream.readable.getReader();
const { value: response } = await bidiReader.read();
console.log('收到响应:', response);
// 关闭连接
await transport.close();
}
// WebTransport vs WebSocket
/*
WebTransport优势:
1. 支持不可靠传输(数据报)
2. 多路复用
3. 内置加密(QUIC)
4. 更好的拥塞控制
5. 支持单向和双向流
适用场景:
- 实时游戏
- 视频流
- 实时协作
- IoT应用
*/
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>新兴Web技术正在扩展Web平台的能力边界。WebGPU、WebXR、WebNN、WebTransport等技术,让Web应用具备了接近原生应用的能力,为Web开发带来了新的可能性。
</div>
</div>
</body>
</html>
Web生态系统持续发展,框架、工具、标准不断演进。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web生态发展 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.eco-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.eco-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.trend-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.trend-table th,
.trend-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.trend-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Web生态发展</h1>
<h2>前端框架趋势</h2>
<div class="eco-demo">
<h3>主流框架对比</h3>
<table class="trend-table">
<thead>
<tr>
<th>框架</th>
<th>特点</th>
<th>适用场景</th>
<th>趋势</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>React</strong></td>
<td>组件化、虚拟DOM、生态丰富</td>
<td>大型应用、企业级项目</td>
<td>稳定,Server Components</td>
</tr>
<tr>
<td><strong>Vue</strong></td>
<td>渐进式、易学、响应式</td>
<td>中小型项目、快速开发</td>
<td>Vue 3组合式API</td>
</tr>
<tr>
<td><strong>Svelte</strong></td>
<td>编译时框架、无虚拟DOM</td>
<td>性能敏感应用</td>
<td>快速增长</td>
</tr>
<tr>
<td><strong>Solid</strong></td>
<td>细粒度响应式、高性能</td>
<td>高性能应用</td>
<td>新兴框架</td>
</tr>
<tr>
<td><strong>Astro</strong></td>
<td>岛屿架构、多框架支持</td>
<td>内容网站、博客</td>
<td>快速崛起</td>
</tr>
<tr>
<td><strong>Qwik</strong></td>
<td>可恢复性、零 hydration</td>
<td>极致性能需求</td>
<td>创新架构</td>
</tr>
</tbody>
</table>
</div>
<h2>构建工具演进</h2>
<div class="eco-demo">
<h3>现代构建工具</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
1. Vite
- 基于ESM的快速开发服务器
- 极速冷启动
- 即时热更新
- 优化的生产构建
- 多框架支持
2. Turbopack
- Vercel开发的下一代打包工具
- 增量编译
- 极致性能
- 与Next.js深度集成
3. Rspack
- 基于Rust的Webpack替代品
- Webpack兼容
- 极致性能
- 渐进迁移
4. Bun
- JavaScript运行时
- 内置打包器
- 内置测试框架
- 极致性能
5. esbuild
- Go语言编写
- 极快的打包速度
- 简单配置
- 底层工具
// Vite配置示例
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
},
build: {
target: 'esnext',
minify: 'esbuild'
}
});
</pre>
</div>
</div>
<h2>全栈趋势</h2>
<div class="eco-demo">
<h3>全栈框架</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
1. Next.js
- React全栈框架
- SSR/SSG/ISR
- App Router
- Server Actions
- 边缘部署
2. Nuxt.js
- Vue全栈框架
- 文件路由
- 自动导入
- 服务端渲染
- 混合渲染
3. Remix
- React全栈框架
- 渐进增强
- 表单优先
- 错误边界
- 数据加载策略
4. SvelteKit
- Svelte全栈框架
- 文件路由
- SSR/SSG
- 类型安全
- 简洁API
5. Astro
- 多框架支持
- 岛屿架构
- 零JS默认
- 内容优先
- 部分hydration
// Next.js App Router示例
// app/page.tsx
export default async function Page() {
const data = await fetch('https://api.example.com/data', {
cache: 'no-store'
});
const posts = await data.json();
return (
<main>
<h1>博客文章</h1>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</main>
);
}
// Server Action
// app/actions.ts
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
const content = formData.get('content');
// 保存到数据库
await db.posts.create({
data: { title, content }
});
revalidatePath('/posts');
}
</pre>
</div>
</div>
<h2>TypeScript普及</h2>
<div class="eco-demo">
<h3>TypeScript成为标准</h3>
<div style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin: 10px 0;">
<pre>
// TypeScript已成为前端开发的事实标准
// 1. 类型安全
interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'guest';
}
function getUser(id: number): Promise<User> {
return fetch(`/api/users/${id}`).then(r => r.json());
}
// 2. 泛型
function createArray<T>(length: number, value: T): T[] {
return Array(length).fill(value);
}
const stringArray = createArray<string>(3, 'hello');
const numberArray = createArray<number>(3, 42);
// 3. 类型推断
const numbers = [1, 2, 3]; // number[]
const mixed = [1, 'two', true]; // (string | number | boolean)[]
// 4. 高级类型
type Partial<T> = {
[P in keyof T]?: T[P];
};
type Required<T> = {
[P in keyof T]-?: T[P];
};
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
// 5. 装饰器(实验性)
function logged(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${key} with`, args);
return original.apply(this, args);
};
return descriptor;
}
class Calculator {
@logged
add(a: number, b: number): number {
return a + b;
}
}
// TypeScript优势
/*
1. 类型安全,减少运行时错误
2. 更好的IDE支持
3. 代码自文档化
4. 重构更安全
5. 团队协作更友好
*/
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>Web生态系统持续发展,框架、工具、标准不断演进。关注生态趋势,选择合适的技术栈,能提高开发效率,构建更好的Web应用。
</div>
</div>
</body>
</html>
完成本章学习后,请尝试回答以下问题:
选择题: 以下哪个是2023年新增的CSS特性?
填空题: WebGPU是____的继任者,提供更现代的图形能力。
简答题: WebXR支持哪两种沉浸式体验?分别有什么应用场景?
实践题: 选择一个新兴Web技术(如WebGPU、WebXR),编写一个简单的示例程序。
应用题: 分析一个使用新兴Web技术的实际项目,总结其技术选型和应用效果。