HTML5与前端框架（React、Vue、Angular等）

HTML5作为现代Web开发的基石，为前端框架提供了强大的原生支持。React、Vue和Angular等框架通过组件化、数据绑定等特性，与HTML5的语义化标签、Canvas、Web Storage等技术深度结合，构建出高性能的交互式应用。

HTML5的核心能力与前端框架的协同

HTML5的语义化标签（如<article>、<section>）为框架组件提供了更清晰的DOM结构。例如，在React中可以直接使用这些标签：

function ArticleComponent() {
  return (
    <article>
      <header>
        <h1>框架与HTML5整合</h1>
      </header>
      <section>
        <p>内容段落...</p>
      </section>
    </article>
  );
}

Web Components规范与框架组件模型形成互补。Vue的单文件组件（.vue）通过<template>标签声明HTML5结构：

<template>
  <div class="card">
    <video controls>
      <source src="demo.mp4" type="video/mp4">
    </video>
  </div>
</template>

数据存储与状态管理的结合

HTML5的Web Storage API常被用于框架的持久化状态存储。Angular服务中集成localStorage的典型实现：

@Injectable()
export class StorageService {
  getItem(key: string): any {
    return JSON.parse(localStorage.getItem(key));
  }

  setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }
}

IndexedDB与Vue的响应式系统结合示例：

// Vue3 Composition API
import { ref } from 'vue';

export function useIndexedDB() {
  const dbData = ref([]);
  
  const openDB = () => {
    const request = indexedDB.open('MyDatabase');
    request.onsuccess = (event) => {
      dbData.value = event.target.result;
    };
  };

  return { dbData, openDB };
}

图形渲染与动画技术

Canvas API在React中的动态应用：

function CanvasAnimation() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const ctx = canvasRef.current.getContext('2d');
    let frameCount = 0;
    
    const animate = () => {
      ctx.clearRect(0, 0, 300, 300);
      ctx.fillStyle = `hsl(${frameCount % 360}, 100%, 50%)`;
      ctx.fillRect(frameCount % 250, 50, 100, 100);
      frameCount++;
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return <canvas ref={canvasRef} width={300} height={300} />;
}

SVG与Vue的动态绑定：

<template>
  <svg width="200" height="200">
    <circle 
      :cx="position.x" 
      :cy="position.y" 
      r="20" 
      fill="blue"
      @mousemove="updatePosition"
    />
  </svg>
</template>

<script setup>
import { reactive } from 'vue';

const position = reactive({ x: 100, y: 100 });

function updatePosition(e) {
  position.x = e.offsetX;
  position.y = e.offsetY;
}
</script>

多媒体与WebRTC集成

React中实现视频滤镜效果的示例：

function VideoFilter() {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);

  const applyFilter = () => {
    const ctx = canvasRef.current.getContext('2d');
    ctx.filter = 'sepia(80%)';
    ctx.drawImage(videoRef.current, 0, 0);
  };

  return (
    <div>
      <video ref={videoRef} autoPlay controls onPlay={applyFilter} />
      <canvas ref={canvasRef} width="640" height="480" />
    </div>
  );
}

响应式设计与布局系统

CSS Grid与Angular组件的配合：

<!-- component.html -->
<div class="grid-container">
  <div *ngFor="let item of items" class="grid-item">
    {{ item.title }}
  </div>
</div>

<!-- component.css -->
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Flexbox在Vue中的动态调整：

<template>
  <div class="flex-container" :style="{ flexDirection: direction }">
    <div v-for="item in list" :key="item.id" class="flex-item">
      {{ item.content }}
    </div>
  </div>
  <button @click="toggleDirection">切换方向</button>
</template>

<script>
export default {
  data() {
    return {
      direction: 'row',
      list: [...] 
    };
  },
  methods: {
    toggleDirection() {
      this.direction = this.direction === 'row' ? 'column' : 'row';
    }
  }
};
</script>

性能优化策略

React虚拟DOM与HTML5 Intersection Observer API的结合：

function LazyImage({ src }) {
  const [isVisible, setIsVisible] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      });
    });

    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef}>
      {isVisible && <img src={src} alt="Lazy loaded" />}
    </div>
  );
}

Web Worker在Angular中的使用：

// worker.ts
self.onmessage = ({ data }) => {
  const result = heavyCalculation(data);
  postMessage(result);
};

// component.ts
const worker = new Worker('./worker', { type: 'module' });

worker.onmessage = ({ data }) => {
  this.processedData = data;
};

startCalculation() {
  worker.postMessage(this.inputData);
}

现代API的框架封装

Vue3组合式API封装Geolocation：

import { ref, onMounted } from 'vue';

export function useGeolocation() {
  const coords = ref(null);
  const error = ref(null);

  onMounted(() => {
    if (!navigator.geolocation) {
      error.value = 'Geolocation not supported';
      return;
    }

    navigator.geolocation.watchPosition(
      (position) => {
        coords.value = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      },
      (err) => {
        error.value = err.message;
      }
    );
  });

  return { coords, error };
}

React Hooks实现拖放API：

function DraggableItem({ children }) {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = (e) => {
    e.dataTransfer.setData('text/plain', 'custom-data');
    setIsDragging(true);
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      style={{ opacity: isDragging ? 0.5 : 1 }}
    >
      {children}
    </div>
  );
}

跨框架组件通信

Custom Events在Web Components中的使用：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="btn">Click</button>
    `;
    this.shadowRoot.getElementById('btn')
      .addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('custom-click', {
          detail: { timestamp: Date.now() },
          bubbles: true,
          composed: true
        }));
      });
  }
}

customElements.define('my-element', MyElement);

React中监听Web Components事件：

function ComponentWrapper() {
  const handleCustomClick = (e) => {
    console.log('Custom event:', e.detail);
  };

  useEffect(() => {
    const element = document.querySelector('my-element');
    element.addEventListener('custom-click', handleCustomClick);
    return () => {
      element.removeEventListener('custom-click', handleCustomClick);
    };
  }, []);

  return <my-element />;
}

测试与调试技术

Jest测试React组件中的HTML5特性：

test('video playback', () => {
  const { container } = render(<VideoPlayer />);
  const video = container.querySelector('video');
  
  // 模拟视频事件
  act(() => {
    video.dispatchEvent(new Event('play'));
  });
  
  expect(video.playing).toBeTruthy();
});

Cypress端到端测试Vue表单验证：

describe('Form Validation', () => {
  it('validates required fields', () => {
    cy.visit('/form');
    cy.get('input[required]').each(($el) => {
      cy.wrap($el).clear();
      cy.get('form').submit();
      cy.wrap($el).should('have.attr', 'aria-invalid', 'true');
    });
  });
});