4月29日 web学习笔记

WebAssembly是一种运行在现代网络浏览器中的堆栈虚拟机的二进制指令格式，适合在Web上运行高性能应用程序。

安装工具链：
bash

curl https://sh.rustup.rs -sSf | sh
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
示例代码：
rust

// src/lib.rs
use wasm_bindgen::prelude:😗;

[wasm_bindgen]

pub fn add(a: i32, b: i32) -> i32 {
a + b
}
编译和使用：
bash

wasm-pack build --target web
WebGL与图形渲染
WebGL简介：WebGL是一种JavaScript API，用于在浏览器中渲染2D和3D图形。
Three.js库：Three.js是一个流行的WebGL库，简化了3D图形的创建和渲染，提供了丰富的功能和易于使用的API。
安装：
bash

npm install three

JavaScript

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}

animate();
TypeScript高级主题
泛型：允许函数、接口和类操作各种类型，提高代码复用性和灵活性。
TypeScript

function identity(arg: T): T {
return arg;
}
高级类型：
交叉类型：合并多个类型。
联合类型：值可以是多种类型之一。
类型保护：确保类型安全。
示例：
TypeScript

type Admin = {
name: string;
privileges: string[];
};

type Employee = {
name: string;
startDate: Date;
};

type AdminEmployee = Admin & Employee;

const ae: AdminEmployee = {
name: '张三',
privileges: ['create-server'],
startDate: new Date(),
};