前端工程化演进之路：从手工作坊到AI驱动的智能化开发

// 示例1-1: 2005年的轮播图实现function slideShow(){    var images = document.getElementsByTagName('img');    var current = 0;        setInterval(function() {        // 隐藏当前图片        images[current].style.display = 'none';                // 计算下一张        current = (current + 1) % images.length;                // 显示下一张        images[current].style.display = 'block';    }, 3000);}
// 示例1-2: 2024年的轮播图实现（React + Hooks）import { useState, useEffect } from 'react';import { motion, AnimatePresence } from 'framer-motion';
function Carousel({ images, interval = 3000 }){    const [current, setCurrent] = useState(0);        useEffect(() => {        const timer = setInterval(() => {            setCurrent(prev => (prev + 1) % images.length);        }, interval);                return () => clearInterval(timer);    }, [images.length, interval]);        return (        <AnimatePresence mode="wait">            <motion.img                key={current}                src={images[current]}                initial={{ opacity: 0, x: 100 }}                animate={{ opacity: 1, x: 0 }}                exit={{ opacity: 0, x: -100 }}                transition={{ duration: 0.5 }}            />        </AnimatePresence>    );}

// 示例2-1: 2008年典型的全局命名空间管理var MyApp = MyApp || {};
MyApp.Utils = {    addClass: function(element, className) {        if (element.className) {            element.className += ' ' + className;        } else {            element.className = className;        }    },        ajax: function(url, callback) {        var xhr = window.XMLHttpRequest ?             new XMLHttpRequest() :             new ActiveXObject("Microsoft.XMLHTTP");                    xhr.onreadystatechange = function() {            if (xhr.readyState == 4 && xhr.status == 200) {                callback(xhr.responseText);            }        };                xhr.open("GET", url, true);        xhr.send();    }};
// 所有功能都挂载在全局对象上MyApp.Cart = {    addItem: function(id) {        MyApp.Utils.ajax('/api/cart/add/' + id, function(response) {            console.log('Item added');        });    }};

// 示例2-2: jQuery带来的优雅编程方式$(document).ready(function() {    // 链式调用    $('.product-card')        .hover(            function() { $(this).addClass('hover'); },            function() { $(this).removeClass('hover'); }        )        .click(function() {            var productId = $(this).data('product-id');                        // AJAX变得如此简单            $.ajax({                url: '/api/cart/add',                method: 'POST',                data: { id: productId },                success: function(response) {                    $('#cart-count').text(response.count);                    $(this).find('.add-button')                        .text('已添加')                        .prop('disabled', true);                }            });        });});

// 示例2-3: 早期的Node.js构建脚本const fs = require('fs');const path = require('path');const uglifyJS = require('uglify-js');
// 合并JavaScript文件function combineJS(files, output){    let combined = '';        files.forEach(file => {        const content = fs.readFileSync(file, 'utf8');        combined += content + '\n';    });        // 压缩代码    const minified = uglifyJS.minify(combined);        // 写入文件    fs.writeFileSync(output, minified.code);    console.log(`已生成: ${output}`);}
// 使用combineJS([    'src/utils.js',    'src/components.js',    'src/main.js'], 'dist/app.min.js');

// 示例2-4: Grunt配置文件module.exports = function(grunt) {    grunt.initConfig({        // 文件监听        watch: {            scripts: {                files: ['src/**/*.js'],                tasks: ['jshint', 'concat', 'uglify']            },            styles: {                files: ['src/**/*.scss'],                tasks: ['sass', 'cssmin']            }        },                // JavaScript检查        jshint: {            all: ['src/**/*.js']        },                // 文件合并        concat: {            dist: {                src: ['src/**/*.js'],                dest: 'dist/app.js'            }        },                // 代码压缩        uglify: {            dist: {                files: {                    'dist/app.min.js': ['dist/app.js']                }            }        }    });        grunt.loadNpmTasks('grunt-contrib-watch');    grunt.loadNpmTasks('grunt-contrib-jshint');    grunt.loadNpmTasks('grunt-contrib-concat');    grunt.loadNpmTasks('grunt-contrib-uglify');        grunt.registerTask('default', ['jshint', 'concat', 'uglify']);};
// 示例2-5: Gulp的流式处理const gulp = require('gulp');const sass = require('gulp-sass');const autoprefixer = require('gulp-autoprefixer');const concat = require('gulp-concat');const uglify = require('gulp-uglify');const sourcemaps = require('gulp-sourcemaps');
// Sass编译任务gulp.task('styles', () => {    return gulp.src('src/styles/**/*.scss')        .pipe(sourcemaps.init())        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))        .pipe(autoprefixer({ browsers: ['last 2 versions'] }))        .pipe(sourcemaps.write('./'))        .pipe(gulp.dest('dist/css'));});
// JavaScript处理任务gulp.task('scripts', () => {    return gulp.src('src/js/**/*.js')        .pipe(sourcemaps.init())        .pipe(concat('app.js'))        .pipe(uglify())        .pipe(sourcemaps.write('./'))        .pipe(gulp.dest('dist/js'));});
// 监听文件变化gulp.task('watch', () => {    gulp.watch('src/styles/**/*.scss', gulp.series('styles'));    gulp.watch('src/js/**/*.js', gulp.series('scripts'));});
gulp.task('default', gulp.parallel('styles', 'scripts', 'watch'));

// 示例2-6: 不同模块化方案的对比
// AMD (RequireJS) - 异步模块定义define(['jquery', 'underscore'], function($, _) {    function privateMethod() {        console.log('私有方法');    }        return {        publicMethod: function() {            privateMethod();            $('.element').hide();        }    };});
// CMD (SeaJS) - 通用模块定义define(function(require, exports, module) {    var $ = require('jquery');    var _ = require('underscore');        function privateMethod() {        console.log('私有方法');    }        exports.publicMethod = function() {        privateMethod();        $('.element').hide();    };});
// CommonJS (Node.js) - 同步模块const $ = require('jquery');const _ = require('underscore');
function privateMethod(){    console.log('私有方法');}
module.exports = {    publicMethod: function() {        privateMethod();        $('.element').hide();    }};

// 示例2-7: Webpack配置演进// webpack.config.js (2016版本)const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {    entry: './src/index.js',    output: {        path: path.resolve(__dirname, 'dist'),        filename: 'bundle.[hash].js'    },    module: {        rules: [            {                test: /\.jsx?$/,                exclude: /node_modules/,                use: {                    loader: 'babel-loader',                    options: {                        presets: ['@babel/preset-env', '@babel/preset-react']                    }                }            },            {                test: /\.css$/,                use: ExtractTextPlugin.extract({                    fallback: 'style-loader',                    use: ['css-loader', 'postcss-loader']                })            },            {                test: /\.(png|jpg|gif|svg)$/,                use: {                    loader: 'url-loader',                    options: {                        limit: 8192,                        name: 'images/[name].[hash].[ext]'                    }                }            }        ]    },    plugins: [        new HtmlWebpackPlugin({            template: './src/index.html'        }),        new ExtractTextPlugin('styles.[hash].css')    ]};
// 示例2-8: Webpack 4/5的现代化配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {    mode: process.env.NODE_ENV || 'development',    entry: './src/index.js',    output: {        path: path.resolve(__dirname, 'dist'),        filename: '[name].[contenthash].js',        clean: true    },    module: {        rules: [            {                test: /\.(js|jsx|ts|tsx)$/,                exclude: /node_modules/,                use: {                    loader: 'swc-loader', // 使用更快的SWC替代Babel                    options: {                        jsc: {                            parser: {                                syntax: 'typescript',                                tsx: true                            },                             transform: {                                react: {                                    runtime: 'automatic'                                }                            }                        }                    }                }            },            {                test: /\.module\.css$/,                use: [                    MiniCssExtractPlugin.loader,                    {                        loader: 'css-loader',                        options: {                            modules: {                                localIdentName: '[name]__[local]--[hash:base64:5]'                            }                        }                    },                    'postcss-loader'                ]            }        ]    },    optimization: {        splitChunks: {            chunks: 'all',            cacheGroups: {                vendor: {                    test: /[\\/]node_modules[\\/]/,                    name: 'vendors',                    priority: 10                },                common: {                    minChunks: 2,                    priority: 5,                    reuseExistingChunk: true                }            }        },        runtimeChunk: 'single'    },    plugins: [        new HtmlWebpackPlugin({            template: './public/index.html'        }),        new MiniCssExtractPlugin({            filename: '[name].[contenthash].css'        }),        // 微前端支持        new ModuleFederationPlugin({            name: 'shell',            remotes: {                app1: 'app1@http://localhost:3001/remoteEntry.js'            }        })    ]};

// 示例2-9: React组件的演进// 2015年 - Class组件import React, { Component } from 'react';import PropTypes from 'prop-types';
classUserProfileextendsComponent {    static propTypes = {        userId: PropTypes.string.isRequired    };        state = {        user: null,        loading: true,        error: null    };        componentDidMount() {        this.fetchUser();    }        componentDidUpdate(prevProps) {        if (prevProps.userId !== this.props.userId) {            this.fetchUser();        }    }        fetchUser = async () => {        try {            this.setState({ loading: true });            const response = await fetch(`/api/users/${this.props.userId}`);            const user = await response.json();            this.setState({ user, loading: false });        } catch (error) {            this.setState({ error: error.message, loading: false });        }    };        render() {        const { user, loading, error } = this.state;                if (loading) return <div>Loading...</div>;        if (error) return <div>Error: {error}</div>;                return (            <div className="user-profile">                <h1>{user.name}</h1>                <p>{user.bio}</p>            </div>        );    }}
// 2020年 - Hooks + TypeScriptimport React, { useState, useEffect } from 'react';import { useQuery } from 'react-query';
interface User {    id: string;    name: string;    bio: string;}
interface UserProfileProps {    userId: string;}
const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {    const { data: user, isLoading, error } = useQuery<User>(        ['user', userId],        () => fetch(`/api/users/${userId}`).then(res => res.json()),        {            staleTime: 5 * 60 * 1000, // 5分钟            cacheTime: 10 * 60 * 1000// 10分钟        }    );        if (isLoading) return <div>Loading...</div>;    if (error) return <div>Error: {(error as Error).message}</div>;        return (        <div className="user-profile">            <h1>{user?.name}</h1>            <p>{user?.bio}</p>        </div>    );};
exportdefault UserProfile;

// 示例2-10: Vite配置 - 极简而强大import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import { visualizer } from 'rollup-plugin-visualizer';
exportdefaultdefineConfig({    plugins: [        react({            fastRefresh: true,            babel: {                plugins: [                    ['@babel/plugin-proposal-decorators', { legacy: true }]                ]            }        }),        visualizer({            open: true,            gzipSize: true,            brotliSize: true        })    ],        server: {        port: 3000,        hmr: {            overlay: true        }    },        build: {        target: 'esnext',        minify: 'esbuild',        rollupOptions: {            output: {                manualChunks: {                    'react-vendor': ['react', 'react-dom'],                    'lodash': ['lodash-es']                }            }        }    },        optimizeDeps: {        include: ['react', 'react-dom'],        esbuildOptions: {            target: 'esnext'        }    }});

// 示例2-11: 基于qiankun的微前端实现// 主应用配置import { registerMicroApps, start } from 'qiankun';
registerMicroApps([    {        name: 'vue-app',        entry: '//localhost:7100',        container: '#subapp-container',        activeRule: '/vue',        props: {            sharedData: { user: currentUser }        }    },    {        name: 'react-app',        entry: '//localhost:7200',        container: '#subapp-container',        activeRule: '/react'    }]);
start({    prefetch: true,    sandbox: {        strictStyleIsolation: true    }});
// 子应用配置export async function bootstrap(){    console.log('react app bootstraped');}
export async function mount(props){    ReactDOM.render(        <App {...props} />,        props.container             ? props.container.querySelector('#root')            : document.getElementById('root')    );}
export async function unmount(props){    ReactDOM.unmountComponentAtNode(        props.container             ? props.container.querySelector('#root')            : document.getElementById('root')    );}

// 示例3-2: 缓存策略实现// 1. 设置HTTP缓存头app.use((req, res, next) => {    // 静态资源设置长期缓存    if (req.url.match(/\.(js|css|png|jpg|jpeg|gif|ico)$/)) {        res.setHeader('Cache-Control', 'public, max-age=31536000'); // 1年        res.setHeader('ETag', generateETag(req.url));    }        // HTML文件不缓存    if (req.url.match(/\.html$/)) {        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');    }        next();});
// 2. localStorage缓存策略classLocalCache {    constructor(prefix = 'cache_') {        this.prefix = prefix;    }        set(key, value, expireTime = 3600000) { // 默认1小时        const data = {            value: value,            expire: Date.now() + expireTime        };                localStorage.setItem(this.prefix + key, JSON.stringify(data));    }        get(key) {        const data = localStorage.getItem(this.prefix + key);                if (!data) return null;                const parsed = JSON.parse(data);                // 检查是否过期        if (Date.now() > parsed.expire) {            localStorage.removeItem(this.prefix + key);            return null;        }                return parsed.value;    }}

// 示例3-2: 缓存策略实现// 1. 设置HTTP缓存头app.use((req, res, next) => {// 静态资源设置长期缓存if (req.url.match(/\.(js|css|png|jpg|jpeg|gif|ico)$/)) {        res.setHeader('Cache-Control', 'public, max-age=31536000'); // 1年        res.setHeader('ETag', generateETag(req.url));    }
// HTML文件不缓存if (req.url.match(/\.html$/)) {        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');    }
    next();});
// 2. localStorage缓存策略classLocalCache {    constructor(prefix = 'cache_') {this.prefix = prefix;    }
set(key, value, expireTime = 3600000) { // 默认1小时const data = {            value: value,            expire: Date.now() + expireTime        };
        localStorage.setItem(this.prefix + key, JSON.stringify(data));    }
    get(key) {const data = localStorage.getItem(this.prefix + key);
if (!data) return null;
const parsed = JSON.parse(data);
// 检查是否过期if (Date.now() > parsed.expire) {            localStorage.removeItem(this.prefix + key);return null;        }
return parsed.value;    }}

// 示例3-3: 使用Performance API进行性能监控classPerformanceMonitor {    constructor() {        this.metrics = {};        this.init();    }        init() {        // 监听页面加载完成        window.addEventListener('load', () => {            this.collectMetrics();            this.reportMetrics();        });    }        collectMetrics() {        const perfData = performance.getEntriesByType('navigation')[0];        const paintEntries = performance.getEntriesByType('paint');                // 收集关键性能指标        this.metrics = {            // DNS查询时间            dns: perfData.domainLookupEnd - perfData.domainLookupStart,                        // TCP连接时间            tcp: perfData.connectEnd - perfData.connectStart,                        // 请求响应时间            request: perfData.responseEnd - perfData.requestStart,                        // DOM解析时间            domParse: perfData.domComplete - perfData.domInteractive,                        // 首次内容绘制            fcp: paintEntries.find(entry => entry.name === 'first-contentful-paint')?.startTime,                        // 首次有意义绘制            fmp: this.calculateFMP(),                        // 可交互时间            tti: this.calculateTTI(),                        // 总加载时间            loadTime: perfData.loadEventEnd - perfData.fetchStart        };    }        calculateFMP() {        // 自定义FMP计算逻辑        const heroElements = document.querySelectorAll('[data-hero]');        if (heroElements.length === 0) return null;                return Math.max(...Array.from(heroElements).map(el => {            const rect = el.getBoundingClientRect();            return rect.top < window.innerHeight ? performance.now() : null;        }).filter(Boolean));    }        calculateTTI() {        // 简化的TTI计算        return performance.timing.domInteractive - performance.timing.fetchStart;    }        reportMetrics() {        // 上报到监控平台        fetch('/api/metrics', {            method: 'POST',            headers: { 'Content-Type': 'application/json' },            body: JSON.stringify({                url: window.location.href,                metrics: this.metrics,                userAgent: navigator.userAgent,                timestamp: Date.now()            })        });    }}
// 使用new PerformanceMonitor();

// 示例3-4: Service Worker缓存策略// sw.jsconst CACHE_NAME = 'app-v1.0.0';const urlsToCache = [    '/',    '/styles/main.css',    '/scripts/main.js',    '/offline.html'];
// 安装阶段 - 缓存关键资源self.addEventListener('install', event => {    event.waitUntil(        caches.open(CACHE_NAME)            .then(cache => {                console.log('Opened cache');                return cache.addAll(urlsToCache);            })            .then(() => self.skipWaiting())    );});
// 激活阶段 - 清理旧缓存self.addEventListener('activate', event => {    event.waitUntil(        caches.keys().then(cacheNames => {            return Promise.all(                cacheNames.map(cacheName => {                    if (cacheName !== CACHE_NAME) {                        console.log('Deleting old cache:', cacheName);                        return caches.delete(cacheName);                    }                })            );        }).then(() => self.clients.claim())    );});
// 请求拦截 - 实现缓存策略self.addEventListener('fetch', event => {    const { request } = event;    const url = new URL(request.url);        // 不同资源采用不同策略    if (url.origin === location.origin) {        if (request.url.includes('/api/')) {            // API请求：网络优先，失败后使用缓存            event.respondWith(networkFirst(request));        } elseif (request.url.match(/\.(js|css|png|jpg|jpeg|svg|gif)$/)) {            // 静态资源：缓存优先            event.respondWith(cacheFirst(request));        } else {            // HTML：网络优先，确保内容最新            event.respondWith(networkFirst(request));        }    }});
// 缓存优先策略async function cacheFirst(request){    const cache = await caches.open(CACHE_NAME);    const cached = await cache.match(request);        if (cached) {        return cached;    }        try {        const response = await fetch(request);        if (response.ok) {            cache.put(request, response.clone());        }        return response;    } catch (error) {        return caches.match('/offline.html');    }}
// 网络优先策略async function networkFirst(request){    const cache = await caches.open(CACHE_NAME);        try {        const response = await fetch(request);        if (response.ok) {            cache.put(request, response.clone());        }        return response;    } catch (error) {        const cached = await cache.match(request);        return cached || caches.match('/offline.html');    }}

// 示例3-5: Core Web Vitals监控实现import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
classWebVitalsMonitor {    constructor() {        this.vitals = {};        this.init();    }        init() {        // Largest Contentful Paint (LCP) - 最大内容绘制        getLCP(this.handleMetric.bind(this, 'LCP'));                // First Input Delay (FID) - 首次输入延迟        getFID(this.handleMetric.bind(this, 'FID'));                // Cumulative Layout Shift (CLS) - 累积布局偏移        getCLS(this.handleMetric.bind(this, 'CLS'));                // 其他性能指标        getFCP(this.handleMetric.bind(this, 'FCP'));        getTTFB(this.handleMetric.bind(this, 'TTFB'));                // 监听页面可见性变化，在页面隐藏时上报        document.addEventListener('visibilitychange', () => {            if (document.visibilityState === 'hidden') {                this.reportVitals();            }        });    }        handleMetric(name, metric) {        this.vitals[name] = {            value: metric.value,            rating: this.getRating(name, metric.value)        };                // 实时上报关键指标        if (['LCP', 'FID', 'CLS'].includes(name)) {            this.reportMetric(name, metric);        }    }        getRating(name, value) {        const thresholds = {            LCP: { good: 2500, needsImprovement: 4000 },            FID: { good: 100, needsImprovement: 300 },            CLS: { good: 0.1, needsImprovement: 0.25 },            FCP: { good: 1800, needsImprovement: 3000 },            TTFB: { good: 800, needsImprovement: 1800 }        };                const threshold = thresholds[name];        if (value <= threshold.good) return'good';        if (value <= threshold.needsImprovement) return'needs-improvement';        return'poor';    }        reportMetric(name, metric) {        // 使用sendBeacon确保数据发送        const data = {            metric: name,            value: metric.value,            rating: this.getRating(name, metric.value),            url: window.location.href,            timestamp: Date.now()        };                navigator.sendBeacon('/api/vitals', JSON.stringify(data));    }        reportVitals() {        const data = {            vitals: this.vitals,            url: window.location.href,            timestamp: Date.now()        };                navigator.sendBeacon('/api/vitals/batch', JSON.stringify(data));    }}
// 初始化监控new WebVitalsMonitor();

// 示例3-6: React代码分割实践import React, { lazy, Suspense } from 'react';import { Routes, Route } from 'react-router-dom';
// 路由级代码分割const Home = lazy(() => import('./pages/Home'));const Profile = lazy(() => import('./pages/Profile'));const Settings = lazy(() => import('./pages/Settings'));
// 带有重试机制的懒加载const lazyWithRetry = (componentImport) =>     lazy(async () => {        try {            return await componentImport();        } catch (error) {            // 刷新页面，可能是新版本部署导致的chunk加载失败            window.location.reload();            return componentImport();        }    });
// 预加载组件const prefetchComponent = (componentPath) => {    import(componentPath);};
function App(){    // 在空闲时预加载其他路由    React.useEffect(() => {        if ('requestIdleCallback' in window) {            requestIdleCallback(() => {                prefetchComponent('./pages/Profile');                prefetchComponent('./pages/Settings');            });        }    }, []);        return (        <Suspense fallback={<LoadingSpinner />}>            <Routes>                <Route path="/" element={<Home />} />                <Route path="/profile" element={<Profile />} />                <Route path="/settings" element={<Settings />} />            </Routes>        </Suspense>    );}
// 组件级懒加载const HeavyComponent = lazy(() =>     import('./components/HeavyComponent'));
function PageWithHeavyComponent(){    const [showHeavy, setShowHeavy] = React.useState(false);        return (        <div>            <button onClick={() => setShowHeavy(true)}>                加载重型组件            </button>                        {showHeavy && (                <Suspense fallback={<div>加载中...</div>}>                    <HeavyComponent />                </Suspense>            )}        </div>    );}

// 示例3-7: AI驱动的智能预加载classSmartPrefetch {    constructor() {        this.userPattern = [];        this.predictions = new Map();        this.threshold = 0.7; // 预测置信度阈值        this.init();    }        init() {        // 监听用户导航行为        this.observeNavigation();                // 监听鼠标悬停        this.observeHover();                // 定期分析用户模式        this.analyzePatterns();    }        observeNavigation() {        // 记录页面访问序列        const currentPage = window.location.pathname;        this.userPattern.push({            page: currentPage,            timestamp: Date.now(),            referrer: document.referrer        });                // 发送到AI模型进行分析        this.predictNextPage();    }        observeHover() {        document.addEventListener('mouseover', (e) => {            const link = e.target.closest('a');            if (link && link.href) {                // 用户悬停在链接上，可能要点击                this.prefetchWithPriority(link.href, 'high');            }        });    }        async predictNextPage(){        // 调用AI预测API        const response = await fetch('/api/ai/predict-navigation', {            method: 'POST',            headers: { 'Content-Type': 'application/json' },            body: JSON.stringify({                pattern: this.userPattern.slice(-10), // 最近10个页面                currentPage: window.location.pathname,                timeOfDay: new Date().getHours(),                deviceType: this.getDeviceType()            })        });                const predictions = await response.json();                // 预加载高概率页面        predictions.forEach(pred => {            if (pred.probability > this.threshold) {                this.prefetchPage(pred.url, pred.probability);            }        });    }        prefetchPage(url, priority) {        const link = document.createElement('link');        link.rel = 'prefetch';        link.href = url;        link.as = 'document';                if (priority === 'high') {            link.rel = 'prerender'; // 高优先级使用prerender        }                document.head.appendChild(link);    }        getDeviceType() {        const ua = navigator.userAgent;        if (/mobile/i.test(ua)) return'mobile';        if (/tablet/i.test(ua)) return'tablet';        return'desktop';    }}

// 示例4-1: 使用AI生成的React组件// 开发者输入注释：创建一个带搜索、排序、分页的用户表格组件
import React, { useState, useEffect, useMemo } from 'react';import {     Table,     Input,     Select,     Pagination,     Space,     Button,     Tag } from 'antd';import { SearchOutlined, SortAscendingOutlined } from '@ant-design/icons';
const UserTable = ({     dataSource,     loading = false,    onUserSelect,    allowMultiSelect = false}) => {    // 状态管理    const [searchText, setSearchText] = useState('');    const [sortField, setSortField] = useState('name');    const [sortOrder, setSortOrder] = useState('ascend');    const [currentPage, setCurrentPage] = useState(1);    const [pageSize, setPageSize] = useState(10);    const [selectedRows, setSelectedRows] = useState([]);        // 搜索过滤逻辑    const filteredData = useMemo(() => {        if (!searchText) return dataSource;                return dataSource.filter(user =>             Object.values(user).some(value =>                 String(value).toLowerCase().includes(searchText.toLowerCase())            )        );    }, [dataSource, searchText]);        // 排序逻辑    const sortedData = useMemo(() => {        const sorted = [...filteredData].sort((a, b) => {            const aValue = a[sortField];            const bValue = b[sortField];                        if (sortOrder === 'ascend') {                return aValue > bValue ? 1 : -1;            }            return aValue < bValue ? 1 : -1;        });                return sorted;    }, [filteredData, sortField, sortOrder]);        // 分页数据    const paginatedData = useMemo(() => {        const start = (currentPage - 1) * pageSize;        return sortedData.slice(start, start + pageSize);    }, [sortedData, currentPage, pageSize]);        // 表格列配置    const columns = [        {            title: 'ID',            dataIndex: 'id',            key: 'id',            width: 80,        },        {            title: '姓名',            dataIndex: 'name',            key: 'name',            sorter: true,            render: (text, record) => (                <a onClick={() => onUserSelect?.(record)}>{text}</a>            ),        },        {            title: '邮箱',            dataIndex: 'email',            key: 'email',        },        {            title: '角色',            dataIndex: 'role',            key: 'role',            render: (role) => (                <Tag color={role === 'admin' ? 'red' : 'blue'}>                    {role}                </Tag>            ),        },        {            title: '状态',            dataIndex: 'status',            key: 'status',            render: (status) => (                <Tag color={status === 'active' ? 'green' : 'gray'}>                    {status === 'active' ? '活跃' : '禁用'}                </Tag>            ),        },        {            title: '操作',            key: 'action',            render: (_, record) => (                <Space size="middle">                    <Button size="small" type="link">编辑</Button>                    <Button size="small" type="link" danger>删除</Button>                </Space>            ),        },    ];        return (        <div className="user-table-container">            {/* 搜索和筛选栏 */}            <Space style={{ marginBottom: 16 }}>                <Input                    placeholder="搜索用户"                    prefix={<SearchOutlined />}                    value={searchText}                    onChange={(e) => setSearchText(e.target.value)}                    style={{ width: 200 }}                />                <Select                    value={sortField}                    onChange={setSortField}                    style={{ width: 120 }}                >                    <Select.Option value="name">按姓名</Select.Option>                    <Select.Option value="email">按邮箱</Select.Option>                    <Select.Option value="role">按角色</Select.Option>                </Select>                <Button                    icon={<SortAscendingOutlined />}                    onClick={() => setSortOrder(                        sortOrder === 'ascend' ? 'descend' : 'ascend'                    )}                >                    {sortOrder === 'ascend' ? '升序' : '降序'}                </Button>            </Space>                        {/* 数据表格 */}            <Table                rowSelection={allowMultiSelect ? {                    type: 'checkbox',                    selectedRowKeys: selectedRows.map(r => r.id),                    onChange: (_, rows) => setSelectedRows(rows),                } : null}                columns={columns}                dataSource={paginatedData}                loading={loading}                pagination={false}                rowKey="id"            />                        {/* 分页器 */}            <Pagination                current={currentPage}                pageSize={pageSize}                total={sortedData.length}                onChange={(page, size) => {                    setCurrentPage(page);                    setPageSize(size);                }}                showSizeChanger                showTotal={(total) => `共 ${total} 条记录`}                style={{ marginTop: 16, textAlign: 'right' }}            />        </div>    );};
exportdefault UserTable;

// 示例4-2: AI驱动的错误诊断系统classAIErrorDiagnostic {    constructor() {        this.errorPatterns = new Map();        this.solutions = new Map();        this.init();    }        init() {        // 捕获全局错误        window.addEventListener('error', this.handleError.bind(this));        window.addEventListener('unhandledrejection', this.handlePromiseRejection.bind(this));                // 监控React错误边界        this.setupReactErrorBoundary();                // 监控网络错误        this.monitorNetworkErrors();    }        async handleError(event){        const error = {            message: event.message,            filename: event.filename,            lineno: event.lineno,            colno: event.colno,            stack: event.error?.stack,            timestamp: Date.now(),            userAgent: navigator.userAgent,            url: window.location.href        };                // 获取AI诊断建议        const diagnosis = await this.getDiagnosis(error);                // 显示诊断结果        this.showDiagnosisUI(diagnosis);                // 尝试自动修复        if (diagnosis.autoFix) {            this.attemptAutoFix(diagnosis);        }    }        async getDiagnosis(error){        try {            const response = await fetch('/api/ai/diagnose', {                method: 'POST',                headers: { 'Content-Type': 'application/json' },                body: JSON.stringify({                    error,                    context: this.getErrorContext(),                    previousErrors: this.getPreviousErrors()                })            });                        return await response.json();        } catch (e) {            returnthis.getLocalDiagnosis(error);        }    }        getLocalDiagnosis(error) {        // 本地错误模式匹配        const patterns = [            {                pattern: /Cannot read prop.*of undefined/i,                diagnosis: '尝试访问未定义对象的属性',                suggestions: [                    '使用可选链操作符 (?.) 进行安全访问',                    '在访问前进行空值检查',                    '使用默认值或空对象'                ],                example: `// 错误代码const value = user.profile.name;
// 修复方案1：可选链const value = user?.profile?.name;
// 修复方案2：默认值const value = user?.profile?.name || 'Anonymous';
// 修复方案3：解构with默认值const { profile: { name = 'Anonymous' } = {} } = user || {};                `            },            {                pattern: /Network request failed/i,                diagnosis: '网络请求失败',                suggestions: [                    '检查网络连接',                    '实现重试机制',                    '添加离线处理逻辑'                ],                example: `// 带重试的网络请求async function fetchWithRetry(url, options = {}, retries = 3){    for (let i = 0; i < retries; i++) {        try {            const response = await fetch(url, options);            if (response.ok) return response;        } catch (error) {            if (i === retries - 1) throw error;            await newPromise(r => setTimeout(r, 1000 * Math.pow(2, i)));        }    }}                `            }        ];                const matched = patterns.find(p => p.pattern.test(error.message));        return matched || { diagnosis: '未知错误', suggestions: [] };    }        showDiagnosisUI(diagnosis) {        // 创建诊断UI组件        const diagnosticPanel = document.createElement('div');        diagnosticPanel.className = 'ai-diagnostic-panel';        diagnosticPanel.innerHTML = `            <div class="diagnostic-header">                <h3>🤖 AI错误诊断</h3>                <button class="close-btn">&times;</button>            </div>            <div class="diagnostic-body">                <div class="diagnosis">                    <strong>问题：</strong>${diagnosis.diagnosis}                </div>                <div class="suggestions">                    <strong>建议：</strong>                    <ul>                        ${diagnosis.suggestions.map(s => `<li>${s}</li>`).join('')}                    </ul>                </div>                ${diagnosis.example ? `                    <div class="code-example">                        <strong>代码示例：</strong>                        <pre><code>${diagnosis.example}</code></pre>                    </div>                ` : ''}                ${diagnosis.autoFix ? `                    <button class="auto-fix-btn">自动修复</button>                ` : ''}            </div>        `;                document.body.appendChild(diagnosticPanel);    }}

// 示例4-3: AI智能图片优化classAIImageOptimizer {    constructor() {        this.imageQueue = [];        this.userContext = this.getUserContext();        this.init();    }        getUserContext() {        return {            connection: navigator.connection?.effectiveType || '4g',            deviceMemory: navigator.deviceMemory || 8,            screenResolution: `${window.screen.width}x${window.screen.height}`,            viewport: `${window.innerWidth}x${window.innerHeight}`,            devicePixelRatio: window.devicePixelRatio || 1        };    }        init() {        // 拦截所有图片加载        this.interceptImageLoading();                // 监听网络变化        if ('connection' in navigator) {            navigator.connection.addEventListener('change', () => {                this.userContext = this.getUserContext();                this.reoptimizeImages();            });        }    }        interceptImageLoading() {        // 使用MutationObserver监听DOM变化        const observer = new MutationObserver((mutations) => {            mutations.forEach((mutation) => {                mutation.addedNodes.forEach((node) => {                    if (node.tagName === 'IMG') {                        this.optimizeImage(node);                    }                                        // 检查子元素                    if (node.querySelectorAll) {                        node.querySelectorAll('img').forEach(img => {                            this.optimizeImage(img);                        });                    }                });            });        });                observer.observe(document.body, {            childList: true,            subtree: true        });    }        async optimizeImage(img){        const originalSrc = img.dataset.src || img.src;                if (!originalSrc) return;                // 获取AI优化建议        const optimization = await this.getOptimizationStrategy(img, originalSrc);                // 应用优化策略        this.applyOptimization(img, optimization);    }        async getOptimizationStrategy(img, src){        const imgContext = {            src,            width: img.width || img.getAttribute('width'),            height: img.height || img.getAttribute('height'),            importance: img.getAttribute('importance') || 'auto',            isAboveFold: this.isAboveFold(img),            ...this.userContext        };                try {            const response = await fetch('/api/ai/optimize-image', {                method: 'POST',                headers: { 'Content-Type': 'application/json' },                body: JSON.stringify(imgContext)            });                        return await response.json();        } catch (error) {            // 降级到本地优化策略            returnthis.getLocalOptimization(imgContext);        }    }        getLocalOptimization(context) {        const strategy = {            format: 'webp', // 默认使用WebP            quality: 85,            lazy: !context.isAboveFold,            responsive: true        };                // 根据网络状况调整        switch (context.connection) {            case'slow-2g':            case'2g':                strategy.quality = 60;                strategy.placeholder = 'blur';                break;            case'3g':                strategy.quality = 70;                break;            case'4g':            default:                strategy.quality = 85;                break;        }                // 根据设备内存调整        if (context.deviceMemory < 4) {            strategy.quality -= 10;            strategy.maxWidth = 1024;        }                return strategy;    }        applyOptimization(img, strategy) {        const originalSrc = img.dataset.src || img.src;                // 构建优化后的URL        const optimizedUrl = this.buildOptimizedUrl(originalSrc, strategy);                if (strategy.lazy && !this.isAboveFold(img)) {            // 懒加载            img.dataset.src = optimizedUrl;            img.classList.add('lazy');            this.observeLazyImage(img);        } else {            // 立即加载            img.src = optimizedUrl;        }                // 添加响应式图片支持        if (strategy.responsive) {            img.srcset = this.generateSrcset(originalSrc, strategy);            img.sizes = this.generateSizes();        }    }        isAboveFold(element) {        const rect = element.getBoundingClientRect();        return rect.top < window.innerHeight && rect.bottom > 0;    }}

// 示例4-4: AI驱动的个性化UI系统classAIPersonalizationEngine {    constructor() {        this.userProfile = this.loadUserProfile();        this.interactions = [];        this.preferences = new Map();        this.init();    }        init() {        this.trackUserInteractions();        this.analyzeUserBehavior();        this.applyPersonalization();    }        trackUserInteractions() {        // 跟踪点击事件        document.addEventListener('click', (e) => {            this.interactions.push({                type: 'click',                target: e.target.tagName,                timestamp: Date.now(),                coordinates: { x: e.clientX, y: e.clientY }            });        });                // 跟踪滚动行为        let scrollTimer;        window.addEventListener('scroll', () => {            clearTimeout(scrollTimer);            scrollTimer = setTimeout(() => {                this.interactions.push({                    type: 'scroll',                    position: window.scrollY,                    timestamp: Date.now()                });            }, 100);        });                // 跟踪表单输入        document.addEventListener('input', (e) => {            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {                this.interactions.push({                    type: 'input',                    field: e.target.name || e.target.id,                    timestamp: Date.now()                });            }        });    }        async analyzeUserBehavior(){        // 每分钟分析一次用户行为        setInterval(async () => {            if (this.interactions.length < 10) return;                        const analysis = await this.getAIAnalysis();            this.updatePreferences(analysis);            this.applyPersonalization();                        // 清理旧的交互数据            this.interactions = this.interactions.slice(-100);        }, 60000);    }        async getAIAnalysis(){        try {            const response = await fetch('/api/ai/analyze-behavior', {                method: 'POST',                headers: { 'Content-Type': 'application/json' },                body: JSON.stringify({                    interactions: this.interactions,                    currentPreferences: Array.from(this.preferences.entries()),                    userProfile: this.userProfile                })            });                        return await response.json();        } catch (error) {            console.error('AI analysis failed:', error);            return null;        }    }        applyPersonalization() {        // 应用主题偏好        if (this.preferences.get('theme') === 'dark') {            document.body.classList.add('dark-theme');        }                // 调整字体大小        const fontSize = this.preferences.get('fontSize') || 'medium';        document.documentElement.style.setProperty('--base-font-size',             fontSize === 'large' ? '18px' : fontSize === 'small' ? '14px' : '16px'        );                // 重新排序导航菜单        this.reorderNavigation();                // 个性化推荐内容        this.personalizeContent();    }        reorderNavigation() {        const navItems = document.querySelectorAll('.nav-item');        const usage = this.preferences.get('navigationUsage') || {};                // 根据使用频率排序        const sorted = Array.from(navItems).sort((a, b) => {            const aUsage = usage[a.dataset.id] || 0;            const bUsage = usage[b.dataset.id] || 0;            return bUsage - aUsage;        });                const nav = document.querySelector('.navigation');        sorted.forEach(item => nav.appendChild(item));    }        personalizeContent() {        // 根据用户兴趣展示相关内容        const interests = this.preferences.get('interests') || [];                document.querySelectorAll('[data-category]').forEach(element => {            const category = element.dataset.category;                        if (interests.includes(category)) {                element.classList.add('highlighted');                element.style.order = -1; // 移到前面            } else {                element.classList.remove('highlighted');                element.style.order = 0;            }        });    }}

// 示例4-5: AI驱动的智能CI/CD配置// .github/workflows/ai-powered-ci.ymlname: AI-Powered CI/CD Pipeline
on:  push:    branches: [main, develop]  pull_request:    branches: [main]
jobs:  ai-analysis:    runs-on: ubuntu-latest    outputs:      risk-level: ${{ steps.analyze.outputs.risk }}      test-strategy: ${{ steps.analyze.outputs.strategy }}        steps:      - uses: actions/checkout@v2            - name: AI代码分析        id: analyze        run: |          # 调用AI API分析代码变更          ANALYSIS=$(curl -X POST https://api.ai-ci.com/analyze \            -H "Authorization: Bearer ${{ secrets.AI_API_KEY }}" \            -d '{              "repo": "${{ github.repository }}",              "commit": "${{ github.sha }}",              "diff": "$(git diff HEAD~1)"            }')                    echo "::set-output name=risk::$(echo $ANALYSIS | jq -r '.risk_level')"          echo "::set-output name=strategy::$(echo $ANALYSIS | jq -r '.test_strategy')"    dynamic-testing:    needs: ai-analysis    runs-on: ubuntu-latest        strategy:      matrix:        test-suite: ${{ fromJson(needs.ai-analysis.outputs.test-strategy) }}        steps:      - uses: actions/checkout@v2            - name: 设置Node.js        uses: actions/setup-node@v2        with:          node-version: '18'          cache: 'npm'            - name: 安装依赖        run: npm ci            - name: 运行测试        run: |          # 根据AI建议运行不同的测试套件          npm run test:${{ matrix.test-suite }}            - name: AI性能分析        if: matrix.test-suite == 'performance'        run: |          npm run build          npm run lighthouse:ci                    # 将性能数据发送给AI进行分析          node scripts/ai-perf-analysis.js
// scripts/ai-perf-analysis.jsconst fs = require('fs');const fetch = require('node-fetch');
async function analyzePerformance() {    // 读取Lighthouse报告    const report = JSON.parse(        fs.readFileSync('.lighthouseci/report.json', 'utf8')    );        // 提取关键指标    const metrics = {        lcp: report.audits['largest-contentful-paint'].numericValue,        fid: report.audits['max-potential-fid'].numericValue,        cls: report.audits['cumulative-layout-shift'].numericValue,        tti: report.audits['interactive'].numericValue,        tbt: report.audits['total-blocking-time'].numericValue,        speedIndex: report.audits['speed-index'].numericValue    };        // 获取AI优化建议    const response = await fetch('https://api.ai-ci.com/performance', {        method: 'POST',        headers: {            'Content-Type': 'application/json',            'Authorization': `Bearer ${process.env.AI_API_KEY}`        },        body: JSON.stringify({            metrics,            url: process.env.DEPLOY_URL,            commit: process.env.GITHUB_SHA,            branch: process.env.GITHUB_REF        })    });        const suggestions = await response.json();        // 生成优化报告    const report = generateOptimizationReport(suggestions);        // 创建GitHub Issue或PR评论    await createGitHubComment(report);}
function generateOptimizationReport(suggestions) {    return `## 🤖 AI性能优化建议    ### 性能评分：${suggestions.score}/100
### 关键问题：${suggestions.issues.map(issue => `- ⚠️ ${issue.description}`).join('\n')}
### 优化建议：${suggestions.recommendations.map((rec, i) => `${i + 1}. **${rec.title}**   - 影响：${rec.impact}   - 实施难度：${rec.difficulty}   - 建议代码：   \`\`\`${rec.language}   ${rec.code}   \`\`\``).join('\n')}
### 预期改进：- LCP: ${suggestions.expectedImprovements.lcp}- FID: ${suggestions.expectedImprovements.fid}- CLS: ${suggestions.expectedImprovements.cls}`;}
analyzePerformance().catch(console.error);

// 示例5-1: 未来的AI编程助手// 开发者只需要描述需求const requirement = `创建一个用户登录表单，要求：1. 支持邮箱和手机号登录2. 包含记住我功能3. 支持社交媒体登录（Google、GitHub）4. 有表单验证5. 响应式设计`;
// AI自动生成完整组件const LoginForm = await AI.generateComponent(requirement);
// AI还会生成测试用例const tests = await AI.generateTests(LoginForm);
// 以及文档const docs = await AI.generateDocumentation(LoginForm);

// 示例5-2: 浏览器端AI推理import * as tf from '@tensorflow/tfjs';import wasmModule from './ai-model.wasm';
classBrowserAI {    async initialize(){        // 加载WASM模块        this.wasmInstance = await WebAssembly.instantiate(wasmModule);                // 加载AI模型        this.model = await tf.loadLayersModel('/models/model.json');    }        async predict(input){        // 在浏览器端直接运行AI推理        const tensor = tf.tensor(input);        const prediction = this.model.predict(tensor);                return prediction.array();    }        async processImage(imageElement){        // 使用WASM加速图像处理        const imageData = this.getImageData(imageElement);        const processed = this.wasmInstance.exports.processImage(            imageData.data,            imageData.width,            imageData.height        );                return processed;    }}

// 示例5-3: 构建个人学习系统classLearningSystem {    constructor() {        this.skills = new Map();        this.learningPath = [];        this.progress = {};    }        // 技能评估    assessCurrentLevel() {        const assessment = {            'JavaScript基础': this.testJavaScript(),            '框架掌握': this.testFrameworks(),            '工程化': this.testEngineering(),            '性能优化': this.testPerformance(),            'AI应用': this.testAI()        };                returnthis.generateLearningPlan(assessment);    }        // 生成个性化学习计划    generateLearningPlan(assessment) {        const plan = [];                Object.entries(assessment).forEach(([skill, level]) => {            if (level < 60) {                plan.push({                    skill,                    priority: 'high',                    resources: this.getResources(skill, level),                    timeEstimate: this.estimateTime(skill, level)                });            }        });                return plan.sort((a, b) =>             this.getPriorityWeight(a.priority) -             this.getPriorityWeight(b.priority)        );    }        // 实践项目推荐    recommendProjects(skillLevel) {        const projects = {            beginner: [                '个人博客系统',                'Todo应用with AI',                '天气预报应用'            ],            intermediate: [                '电商平台前端',                '社交媒体应用',                '在线协作工具'            ],            advanced: [                '低代码平台',                'AI驱动的CMS',                '实时协作编辑器'            ]        };                return projects[skillLevel];    }}

// 示例5-4: 致敬每一位前端开发者classFrontendDeveloper {    constructor(name) {        this.name = name;        this.skills = new Set();        this.experience = [];        this.passion = Infinity;    }        learn(technology) {        this.skills.add(technology);        console.log(`${this.name} 掌握了 ${technology}`);        returnthis;    }        build(project) {        this.experience.push(project);        console.log(`${this.name} 完成了 ${project}`);        returnthis;    }        evolve() {        const currentYear = new Date().getFullYear();        console.log(`            ${this.name} 在 ${currentYear} 年：            - 掌握技能：${this.skills.size} 项            - 项目经验：${this.experience.length} 个            - 热情指数：${this.passion}                        继续前进，永不止步！        `);        returnthis;    }}
// 每一位读者都是主角const you = new FrontendDeveloper('You');you.learn('HTML/CSS/JavaScript')   .learn('React/Vue/Angular')   .learn('Webpack/Vite')   .learn('TypeScript')   .learn('AI Integration')   .build('个人博客')   .build('企业官网')   .build('电商平台')   .build('AI应用')   .evolve();
// 前端的未来，由我们共同创造！