框架集成：25. 框架选型与HTML：项 - 详细教程与实战指南

// 项目类型分析决策树
function selectFramework(project) {
    // 1. 内容型网站（博客、新闻、文档）
    if (project.type === 'content') {
        if (project.needInteractivity === 'low') {
            return 'Astro + 任意UI框架'; // 零JS默认
        }
        if (project.needInteractivity === 'medium') {
            return 'Next.js (SSG) 或 Nuxt.js (SSG)';
        }
    }

    // 2. 电商网站
    if (project.type === 'ecommerce') {
        if (project.scale === 'large') {
            return 'Next.js (SSR + ISR)'; // 大规模电商
        }
        return 'Nuxt.js 或 Next.js'; // 中小型电商
    }

    // 3. 管理后台
    if (project.type === 'admin') {
        if (project.needSEO === false) {
            return 'React + Vite 或 Vue + Vite'; // CSR即可
        }
        return 'Next.js 或 Nuxt.js';
    }

    // 4. 实时应用（聊天、协作工具）
    if (project.type === 'realtime') {
        return 'React + Socket.io 或 Vue + Socket.io';
    }

    // 5. 移动端优先
    if (project.type === 'mobile-first') {
        if (project.needNative === true) {
            return 'React Native 或 Ionic + Angular';
        }
        return 'Svelte (最小包体积) 或 PWA方案';
    }

    // 6. 企业级应用
    if (project.type === 'enterprise') {
        return 'Angular (完整方案) 或 React (灵活组合)';
    }

    // 7. 渐进式增强
    if (project.type === 'progressive') {
        return 'Vue (渐进式) 或 Svelte (轻量)';
    }

    return '根据团队经验选择';
}

// ==================== React ====================
// JSX - JavaScript中写HTML
function App() {
    return (
        <div className="container">
            <h1>Hello React</h1>
            <button onClick={handleClick}>Click</button>
        </div>
    );
}
// 特点：JSX是语法糖，编译为React.createElement()
// className替代class，事件使用驼峰命名，需要构建工具编译

// ==================== Vue ====================
// SFC - 单文件组件
// <template>
//     <div class="container">
//         <h1>Hello Vue</h1>
//         <button @click="handleClick">Click</button>
//     </div>
// </template>
// 特点：Template更接近原生HTML，v-bind/v-on指令，Scoped样式隔离

// ==================== Angular ====================
// 组件模板
// @Component({
//     selector: 'app-root',
//     template: `
//         <div class="container">
//             <h1>Hello Angular</h1>
//             <button (click)="handleClick()">Click</button>
//         </div>
//     `
// })
// 特点：模板语法扩展HTML，[()]双向绑定语法，依赖注入系统

// ==================== Svelte ====================
// Svelte组件
// <script>
// function handleClick() { /* ... */ }
// </script>
// <div class="container">
//     <h1>Hello Svelte</h1>
//     <button on:click={handleClick}>Click</button>
// </div>
// 特点：最接近原生HTML，编译时优化，无运行时，最小包体积

// 使用single-spa实现渐进式迁移
// 1. 安装single-spa: npm install single-spa

// 2. 主应用配置
import { registerApplication, start } from 'single-spa';

// 注册旧应用（jQuery/原生JS）
registerApplication({
    name: 'legacy-app',
    app: () => import('./legacy-app/bootstrap'),
    activeWhen: ['/legacy'],
});

// 注册新React应用
registerApplication({
    name: 'react-app',
    app: () => import('./react-app/bootstrap'),
    activeWhen: ['/dashboard', '/settings'],
});

// 注册新Vue应用
registerApplication({
    name: 'vue-app',
    app: () => import('./vue-app/bootstrap'),
    activeWhen: ['/products', '/orders'],
});

start();

// 3. React子应用引导
import singleSpaReact from 'single-spa-react';
const lifecycles = singleSpaReact({
    React,
    ReactDOMClient: ReactDOM,
    rootComponent: App,
});
export const { bootstrap, mount, unmount } = lifecycles;

// 使用Nginx反向代理实现路由级迁移
// nginx.conf
// server {
//     listen 80;
//     server_name example.com;
//     location /legacy/ { proxy_pass http://old-app:3000/; }
//     location / { proxy_pass http://new-app:3001/; }
//     location /static/ { proxy_pass http://cdn:4000/; }
// }

// 或者使用Next.js Rewrites
// next.config.js
module.exports = {
    async rewrites() {
        return [
            {
                source: '/legacy/:path*',
                destination: 'http://old-app:3000/:path*',
            },
        ];
    },
};

// 将jQuery组件封装为Web Components
class LegacyDatePicker extends HTMLElement {
    connectedCallback() {
        this.innerHTML = '<div class="legacy-datepicker"></div>';
        $(this.querySelector('.legacy-datepicker')).datepicker({
            format: this.getAttribute('format') || 'yyyy-mm-dd',
            onSelect: (date) => {
                this.dispatchEvent(new CustomEvent('date-select', {
                    detail: { date },
                    bubbles: true,
                }));
            },
        });
    }

    disconnectedCallback() {
        $(this.querySelector('.legacy-datepicker')).datepicker('destroy');
    }
}
customElements.define('legacy-datepicker', LegacyDatePicker);

// 在React中使用
// <legacy-datepicker
//     format="yyyy-mm-dd"
//     onDateSelect={(e) => setDate(e.detail.date)}
// />

// ==================== 迁移前：jQuery ====================
$(document).ready(function() {
    $.get('/api/products', function(products) {
        var $list = $('#product-list');
        $list.empty();
        products.forEach(function(product) {
            var $item = $('<div class="product-item">')
                .append($('<h3>').text(product.name))
                .append($('<p>').text(product.description))
                .append($('<span class="price">').text('¥' + product.price))
                .append($('<button>').text('加入购物车')
                    .data('id', product.id)
                    .on('click', function() { addToCart($(this).data('id')); })
                );
            $list.append($item);
        });
    });
});

// ==================== 迁移后：React ====================
function ProductList() {
    const [products, setProducts] = useState([]);
    const [keyword, setKeyword] = useState('');

    useEffect(() => {
        fetch('/api/products')
            .then(res => res.json())
            .then(data => setProducts(data));
    }, []);

    const filteredProducts = products.filter(p =>
        p.name.toLowerCase().includes(keyword.toLowerCase())
    );

    return (
        <div>
            <input value={keyword}
                onChange={(e) => setKeyword(e.target.value)} />
            {filteredProducts.map(product => (
                <div key={product.id} className="product-item">
                    <h3>{product.name}</h3>
                    <p>{product.description}</p>
                    <span className="price">¥{product.price}</span>
                </div>
            ))}
        </div>
    );
}

// ==================== 第一层：HTML ====================
// 纯HTML表单 - 浏览器原生验证
// <form action="/api/register" method="POST">
//     <input type="text" name="username" required minlength="3" />
//     <input type="email" name="email" required />
//     <input type="password" name="password" required minlength="8" />
//     <button type="submit">注册</button>
// </form>

// ==================== 第二层：CSS ====================
// input:valid { border-color: #4caf50; }
// input:invalid { border-color: #f44336; }
// input:focus { outline: 2px solid #2196f3; }

// ==================== 第三层：JavaScript ====================
class FormValidator {
    constructor(form) {
        this.form = form;
        this.inputs = form.querySelectorAll('input');
        this.init();
    }

    init() {
        this.inputs.forEach(input => {
            input.addEventListener('input', () => this.validateField(input));
            input.addEventListener('blur', () => this.validateField(input));
        });
        this.form.addEventListener('submit', (e) => {
            if (!this.validateAll()) e.preventDefault();
        });
    }

    validateField(input) {
        if (input.validity.valueMissing) return false;
        if (input.validity.typeMismatch) return false;
        if (input.validity.tooShort) return false;
        return true;
    }

    validateAll() {
        let isValid = true;
        this.inputs.forEach(input => {
            if (!this.validateField(input)) isValid = false;
        });
        return isValid;
    }
}

// ==================== 第四层：框架增强 ====================
// React组件 - 最丰富的交互体验
function RegistrationForm() {
    const [formData, setFormData] = useState({
        username: '', email: '', password: '',
    });
    const [errors, setErrors] = useState({});

    // 实时用户名可用性检查
    const checkUsername = debounce(async (username) => {
        const available = await fetch(`/api/check-username?u=${username}`)
            .then(r => r.json());
        setErrors(prev => ({
            ...prev,
            username: available ? '' : '用户名已被占用',
        }));
    }, 300);

    return (
        <form onSubmit={handleSubmit}>
            <input value={formData.username}
                onChange={(e) => {
                    setFormData(prev => ({ ...prev, username: e.target.value }));
                    checkUsername(e.target.value);
                }} />
            {errors.username && <span className="error">{errors.username}</span>}
        </form>
    );
}

// ==================== 阶段1：CDN引入 ====================
// 在现有HTML中引入Vue，增强交互
// <div id="app">
//     <form @submit.prevent="submitForm">
//         <input v-model="username" placeholder="用户名" />
//         <button type="submit">提交</button>
//     </form>
// </div>
const { createApp, ref } = Vue;
createApp({
    setup() {
        const username = ref('');
        const submitForm = () => { /* ... */ };
        return { username, submitForm };
    },
}).mount('#app');

// ==================== 阶段2：组件化 ====================
// npm create vite@latest my-app -- --template vue
// 使用SFC单文件组件

// ==================== 阶段3：路由和状态管理 ====================
// npm install vue-router pinia
// stores/user.js
export const useUserStore = defineStore('user', {
    state: () => ({ user: null, token: '' }),
    actions: {
        async login(credentials) {
            const res = await fetch('/api/login', {
                method: 'POST',
                body: JSON.stringify(credentials),
            });
            const data = await res.json();
            this.user = data.user;
        },
    },
});

// ==================== 阶段4：SSR/SSG ====================
// 迁移到Nuxt.js: npx nuxi@latest init my-nuxt-app

class StarRating extends HTMLElement {
    static get observedAttributes() {
        return ['value', 'max', 'readonly'];
    }

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this._value = 0;
        this._max = 5;
        this._readonly = false;
    }

    connectedCallback() {
        this.render();
        this.setupEvents();
    }

    attributeChangedCallback(name, oldVal, newVal) {
        switch (name) {
            case 'value': this._value = Number(newVal) || 0; break;
            case 'max': this._max = Number(newVal) || 5; break;
            case 'readonly': this._readonly = newVal !== null; break;
        }
        if (this.shadowRoot) this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .star { font-size: 24px; cursor: pointer; }
                .star.active { color: #ffc107; }
                .star.inactive { color: #e0e0e0; }
            </style>
            <div class="stars">
                ${Array.from({ length: this._max }, (_, i) => `
                    <span class="star ${i < this._value ? 'active' : 'inactive'}"
                          data-value="${i + 1}">
                        ${i < this._value ? '★' : '☆'}
                    </span>
                `).join('')}
            </div>
        `;
        this.setupEvents();
    }

    setupEvents() {
        if (this._readonly) return;
        const stars = this.shadowRoot.querySelectorAll('.star');
        stars.forEach(star => {
            star.addEventListener('click', () => {
                this._value = Number(star.dataset.value);
                this.setAttribute('value', String(this._value));
                this.dispatchEvent(new CustomEvent('rating-change', {
                    detail: { value: this._value },
                    bubbles: true, composed: true,
                }));
                this.render();
            });
        });
    }
}
customElements.define('star-rating', StarRating);

// ==================== 在React中使用 ====================
function ProductReview() {
    const [rating, setRating] = useState(0);
    const ratingRef = useRef();

    useEffect(() => {
        const el = ratingRef.current;
        if (el) {
            el.value = rating;
            el.addEventListener('rating-change', (e) => {
                setRating(e.detail.value);
            });
        }
    }, [rating]);

    return <star-rating ref={ratingRef} />;
}

// ==================== 在Vue中使用 ====================
// Vue对Web Components支持更好
// <template>
//     <star-rating :value="String(rating)" @rating-change="onRatingChange" />
// </template>
// Vue配置：
// app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-');

// ==================== 在Angular中使用 ====================
// import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })

// ==================== 在Svelte中使用 ====================
// <star-rating value={String(rating)} on:rating-change={onRatingChange}>
// </star-rating>

// React组件输出为Web Component
// npm install @github/react-to-webcomponent
import reactToWebComponent from '@github/react-to-webcomponent';

function MyButton({ label, onClick }) {
    return <button onClick={onClick} className="my-btn">{label}</button>;
}
customElements.define(
    'my-button',
    reactToWebComponent(MyButton, React, ReactDOM)
);

// Vue组件输出为Web Component
import { defineCustomElement } from 'vue';
const MyButtonCe = defineCustomElement({
    props: ['label'],
    emits: ['click'],
    template: `<button @click="$emit('click')" class="my-btn">{{ label }}</button>`,
});
customElements.define('my-button-vue', MyButtonCe);

// ==================== Astro ====================
// 岛屿架构 - 默认零JS
// ---
// import ReactCounter from '../components/ReactCounter';
// import VueNewsletter from '../components/VueNewsletter.vue';
// ---
// <ReactCounter client:load />        // 仅这个组件加载React运行时
// <VueNewsletter client:visible />   // 仅在可见时加载Vue运行时
// <HeavyWidget client:idle />        // 仅在空闲时加载

// ==================== Solid.js ====================
// 细粒度响应式 - 无Virtual DOM
import { createSignal, For } from 'solid-js';
function TodoList() {
    const [todos, setTodos] = createSignal([]);
    const addTodo = () => {
        setTodos(prev => [...prev, { id: Date.now(), text: input() }]);
    };
    return (
        <ul>
            <For each={todos()}>
                {(todo) => <li>{todo.text}</li>}
            </For>
        </ul>
    );
}

// ==================== Qwik ====================
// 可恢复性 - 零初始JS
import { component$, useSignal } from '@builder.io/qwik';
export default component$(() => {
    const count = useSignal(0);
    return (
        <div>
            <p>Count: {count.value}</p>
            {/* 点击时才加载事件处理代码 */}
            <button onClick$={() => count.value++}>Increment</button>
        </div>
    );
});

// ==================== HTMX ====================
// 回归HTML - 用属性声明交互
// <button hx-post="/api/like" hx-target="#like-count" hx-swap="innerHTML">
//     点赞
// </button>

// 根据项目特征选择框架的决策工具
const frameworkDecisionMatrix = {
    'content-site': {
        small: { recommended: 'Astro', reason: '零JS默认，SEO最优' },
        medium: { recommended: 'Next.js (SSG)', reason: 'React生态丰富' },
        large: { recommended: 'Next.js (ISR)', reason: '增量静态再生成' },
    },
    'web-app': {
        small: { recommended: 'Vue + Vite', reason: '上手快，体积小' },
        medium: { recommended: 'React + Next.js', reason: '生态最大' },
        large: { recommended: 'Angular', reason: '完整方案，适合大团队' },
    },
    'ecommerce': {
        small: { recommended: 'Nuxt.js', reason: 'SEO友好，开发效率高' },
        large: { recommended: 'Next.js (SSR + ISR)', reason: '性能最优' },
    },
    'admin-dashboard': {
        small: { recommended: 'Vue + Element Plus', reason: '组件库丰富' },
        large: { recommended: 'React + Ant Design Pro', reason: '企业级方案' },
    },
    'mobile': {
        hybrid: { recommended: 'React Native', reason: '原生性能，生态成熟' },
        pwa: { recommended: 'Svelte + SvelteKit', reason: '最小包体积' },
    },
};