当前位置：首页 > article >正文

JavaScript案例0323

article 2025/3/26 14:23:06

以下是一些涵盖不同高级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>
  `
});