前端工程化演进之路：从手工作坊到 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 + TypeScript
import 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.js
const 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;
            }
        });
    }
}