JavaScript案例0323

以下是一些涵盖不同高级JavaScript概念的案例，结合了现代特性、设计模式和底层原理：

案例1：基于Proxy的响应式数据系统（类似Vue3核心）

// 创建响应式系统
function reactive(target) {const handler = {get(obj, key, receiver) {track(obj, key);return Reflect.get(obj, key, receiver);},set(obj, key, value, receiver) {Reflect.set(obj, key, value, receiver);trigger(obj, key);return true;}};return new Proxy(target, handler);
}// 依赖跟踪与触发
const targetMap = new WeakMap();
let activeEffect = null;function track(target, key) {if (activeEffect) {let depsMap = targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap = new Map()));}let dep = depsMap.get(key);if (!dep) {depsMap.set(key, (dep = new Set()));}dep.add(activeEffect);}
}function trigger(target, key) {const depsMap = targetMap.get(target);if (!depsMap) return;const effects = depsMap.get(key);effects && effects.forEach(effect => effect());
}// 使用示例
const state = reactive({ count: 0 });function effect(fn) {activeEffect = fn;fn();activeEffect = null;
}effect(() => {console.log(`Count changed: ${state.count}`);
});state.count++; // 触发日志输出

技术点：

Proxy/Reflect实现数据劫持
依赖收集与发布订阅模式
WeakMap进行内存管理

案例2：Web Worker + OffscreenCanvas图像处理

// 主线程
const canvas = document.querySelector('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');worker.postMessage({ canvas: offscreen }, [offscreen]);// worker.js
self.onmessage = function(e) {const canvas = e.data.canvas;const ctx = canvas.getContext('2d');// 图像处理算法function processImage() {const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;// 灰度化处理for(let i = 0; i < data.length; i += 4) {const avg = (data[i] + data[i+1] + data[i+2]) / 3;data[i] = avg;data[i+1] = avg;data[i+2] = avg;}ctx.putImageData(imageData, 0, 0);}// 模拟实时处理setInterval(processImage, 100);
}

技术点：

多线程编程
OffscreenCanvas API
图像数据处理
内存转移（transferable objects）

案例3：基于Generator的协程调度器

class Scheduler {constructor() {this.queue = [];this.isRunning = false;}add(generatorFn) {this.queue.push(generatorFn);if (!this.isRunning) this.run();}async run() {this.isRunning = true;while (this.queue.length > 0) {const gen = this.queue.shift()();for await (const _ of gen) {// 每个yield让出执行权await new Promise(resolve => setTimeout(resolve, 0));}}this.isRunning = false;}
}// 使用示例
const scheduler = new Scheduler();function* task1() {console.log('Task 1 start');yield;console.log('Task 1 middle');yield;console.log('Task 1 end');
}function* task2() {console.log('Task 2 start');yield;console.log('Task 2 end');
}scheduler.add(task1);
scheduler.add(task2);/* 输出：
Task 1 start
Task 2 start
Task 1 middle
Task 2 end
Task 1 end
*/

技术点：

Generator函数控制执行流程
协程调度实现
模拟并发执行

案例4：WebGL数据可视化（3D散点图）

<canvas id="glCanvas"></canvas>
<script>
const vertexShaderSource = `attribute vec3 position;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;void main() {gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);gl_PointSize = 5.0;}
`;const fragmentShaderSource = `void main() {gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);}
`;// 初始化WebGL上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');// 创建着色器程序
const program = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);// 生成随机三维数据
const points = Array.from({length: 1000}, () => [Math.random()*2-1, Math.random()*2-1,Math.random()*2-1
]).flat();// 创建缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);// 渲染循环
function render() {gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);const positionAttr = gl.getAttribLocation(program, 'position');gl.enableVertexAttribArray(positionAttr);gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);gl.drawArrays(gl.POINTS, 0, points.length / 3);requestAnimationFrame(render);
}// 初始化视图矩阵等...
initCamera();
render();
</script>

技术点：

WebGL底层API使用
GLSL着色器编程
大规模数据渲染
三维坐标系处理

案例5：实现一个微型前端框架

class MiniFramework {constructor(config) {this.state = reactive(config.state);this.methods = config.methods;this.element = document.querySelector(config.el);this.template = config.template;this.compile();this.proxyMethods();}compile() {const regex = /{{(.*?)}}/g;const html = this.template.replace(regex, (_, key) => {return this.state[key.trim()];});this.element.innerHTML = html;// 事件绑定this.element.querySelectorAll('[@click]').forEach(el => {const method = el.getAttribute('@click').trim();el.addEventListener('click', this.methods[method].bind(this));});}proxyMethods() {Object.keys(this.methods).forEach(key => {this[key] = (...args) => {this.methods[key].apply(this, args);this.compile(); // 简单粗暴的重新渲染};});}
}// 使用示例
new MiniFramework({el: '#app',state: { count: 0 },methods: {increment() {this.state.count++;}},template: `<div><h1>{{ count }}</h1><button @click="increment">+</button></div>`
});