混合开发 ​

// 调用原生功能
// Android 调用方式
if (window.AndroidBridge) {
    AndroidBridge.showToast('Hello from Web!');
    const deviceInfo = AndroidBridge.getDeviceInfo();
}

// iOS 调用方式
if (window.webkit && window.webkit.messageHandlers) {
    window.webkit.messageHandlers.iOSBridge.postMessage({
        action: 'showToast',
        data: 'Hello from Web!'
    });
}

// 通用桥接封装
class NativeBridge {
    static callNative(method, data) {
        if (window.AndroidBridge) {
            // Android 调用逻辑
            return AndroidBridge[method](data);
        } else if (window.webkit && window.webkit.messageHandlers) {
            // iOS 调用逻辑
            return new Promise((resolve) => {
                window.webkit.messageHandlers.iOSBridge.postMessage({
                    action: method,
                    data: data,
                    callbackId: this.generateCallbackId(resolve)
                });
            });
        }
    }
    
    static generateCallbackId(resolve) {
        const id = 'callback_' + Date.now();
        window[id] = resolve;
        return id;
    }
}

// 使用封装后的桥接
NativeBridge.callNative('showToast', 'Hello World!');

// WebView 预加载和缓存策略
class WebViewPreloader {
    constructor() {
        this.preloadedWebViews = new Map();
    }
    
    // 预初始化 WebView
    preloadWebView(url) {
        const webView = this.createWebView();
        webView.loadUrl(url);
        this.preloadedWebViews.set(url, webView);
    }
    
    // 获取预加载的 WebView
    getPreloadedWebView(url) {
        return this.preloadedWebViews.get(url);
    }
}

// Web 资源预加载
function preloadCriticalResources() {
    const criticalResources = [
        '/css/main.css',
        '/js/app.js',
        '/images/logo.png'
    ];
    
    criticalResources.forEach(url => {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = url;
        link.as = url.endsWith('.css') ? 'style' : 
                  url.endsWith('.js') ? 'script' : 'image';
        document.head.appendChild(link);
    });
}

// 渲染优化策略
class RenderOptimizer {
    // 减少重绘和回流
    static batchDOMUpdates(callback) {
        requestAnimationFrame(() => {
            // 批量更新DOM
            callback();
        });
    }
    
    // 图片懒加载
    static setupLazyLoading() {
        const lazyImages = document.querySelectorAll('img[data-src]');
        
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        lazyImages.forEach(img => imageObserver.observe(img));
    }
    
    // 虚拟滚动
    static setupVirtualScroll(container, itemHeight, totalItems, renderItem) {
        let visibleStart = 0;
        let visibleEnd = Math.ceil(container.clientHeight / itemHeight);
        
        container.addEventListener('scroll', () => {
            const scrollTop = container.scrollTop;
            const newStart = Math.floor(scrollTop / itemHeight);
            const newEnd = newStart + visibleEnd;
            
            if (newStart !== visibleStart) {
                visibleStart = newStart;
                visibleEnd = newEnd;
                this.renderVisibleItems(container, visibleStart, visibleEnd, 
                                      itemHeight, totalItems, renderItem);
            }
        });
    }
}

// 开发环境检测和调试工具
class HybridDevTools {
    // 检测运行环境
    static getEnvironment() {
        return {
            isAndroid: !!window.AndroidBridge,
            isIOS: !!(window.webkit && window.webkit.messageHandlers),
            isWeb: !this.isAndroid && !this.isIOS,
            platform: this.getPlatform(),
            version: this.getAppVersion()
        };
    }
    
    // 远程调试
    static enableRemoteDebugging() {
        if (this.getEnvironment().isWeb) {
            // 在浏览器中启用调试
            localStorage.setItem('debug', 'hybrid:*');
        }
    }
    
    // 性能监控
    static setupPerformanceMonitoring() {
        const observer = new PerformanceObserver((list) => {
            list.getEntries().forEach((entry) => {
                console.log(`${entry.name}: ${entry.duration}ms`);
                
                // 发送性能数据到监控平台
                this.reportPerformance(entry);
            });
        });
        
        observer.observe({entryTypes: ['navigation', 'paint', 'resource']});
    }
}

class HotUpdateManager {
    constructor() {
        this.currentVersion = '1.0.0';
        this.updateServer = 'https://api.example.com/updates';
    }
    
    // 检查更新
    async checkForUpdates() {
        try {
            const response = await fetch(`${this.updateServer}/check`, {
                method: 'POST',
                body: JSON.stringify({
                    version: this.currentVersion,
                    platform: this.getPlatform()
                })
            });
            
            const updateInfo = await response.json();
            
            if (updateInfo.hasUpdate) {
                this.downloadUpdate(updateInfo);
            }
        } catch (error) {
            console.error('检查更新失败:', error);
        }
    }
    
    // 下载更新
    async downloadUpdate(updateInfo) {
        const downloadUrl = updateInfo.downloadUrl;
        
        // 显示下载进度
        this.showDownloadProgress();
        
        try {
            const response = await fetch(downloadUrl);
            const updatePackage = await response.json();
            
            // 验证更新包
            if (this.validateUpdate(updatePackage)) {
                // 应用更新
                await this.applyUpdate(updatePackage);
                this.showUpdateSuccess();
            }
        } catch (error) {
            console.error('下载更新失败:', error);
            this.showUpdateError();
        }
    }
    
    // 应用更新
    async applyUpdate(updatePackage) {
        // 备份当前版本
        await this.backupCurrentVersion();
        
        // 逐个更新文件
        for (const file of updatePackage.files) {
            await this.updateFile(file.path, file.content);
        }
        
        // 更新版本号
        await this.updateVersion(updatePackage.version);
        
        // 重新加载应用
        this.reloadApplication();
    }
}