JavaScript 浏览器兼容性 #

// 检测ES6+特性支持
const ES6Features = {
  arrowFunctions: (() => {
    try {
      eval('var f = () => {};');
      return true;
    } catch (e) {
      return false;
    }
  })(),
  
  templateLiterals: (() => {
    try {
      eval('var x = 1; var y = `${x}`;');
      return true;
    } catch (e) {
      return false;
    }
  })(),
  
  destructuring: (() => {
    try {
      eval('var {a} = {a: 1};');
      return true;
    } catch (e) {
      return false;
    }
  })(),
  
  promises: typeof Promise !== 'undefined',
  
  asyncAwait: (() => {
    try {
      eval('async function test() {}');
      return true;
    } catch (e) {
      return false;
    }
  })(),
  
  modules: typeof import !== 'undefined',
  
  classes: (() => {
    try {
      eval('class Test {}');
      return true;
    } catch (e) {
      return false;
    }
  })(),
  
  spreadOperator: (() => {
    try {
      eval('var arr = [...[1,2,3]];');
      return true;
    } catch (e) {
      return false;
    }
  })()
};

console.log('ES6+特性支持情况:', ES6Features);

// 1. 基本特性检测
function supportsFeature(feature) {
  switch(feature) {
    case 'promises':
      return typeof Promise !== 'undefined';
    
    case 'fetch':
      return typeof fetch !== 'undefined';
    
    case 'arrowFunctions':
      try {
        eval('var f = () => {}');
        return true;
      } catch(e) {
        return false;
      }
    
    case 'classes':
      try {
        eval('class Test {}');
        return true;
      } catch(e) {
        return false;
      }
    
    case 'asyncAwait':
      try {
        eval('async function test() {}');
        return true;
      } catch(e) {
        return false;
      }
    
    case 'intersectionObserver':
      return 'IntersectionObserver' in window;
    
    case 'webWorkers':
      return 'Worker' in window;
    
    case 'serviceWorkers':
      return 'serviceWorker' in navigator;
    
    case 'localStorage':
      try {
        const test = '__test__';
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
      } catch(e) {
        return false;
      }
    
    default:
      return false;
  }
}

// 使用示例
if (supportsFeature('fetch')) {
  // 使用fetch API
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
} else {
  // 降级到XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  };
  xhr.send();
}

// 仅在特性检测不可行时使用
function getBrowserInfo() {
  const userAgent = navigator.userAgent;
  const browserInfo = {
    isIE: /MSIE|Trident/.test(userAgent),
    isEdge: /Edge/.test(userAgent),
    isChrome: /Chrome/.test(userAgent) && !/Edge/.test(userAgent),
    isFirefox: /Firefox/.test(userAgent),
    isSafari: /Safari/.test(userAgent) && !/Chrome/.test(userAgent),
    isMobile: /Mobile|Android|iPhone|iPad/.test(userAgent)
  };
  
  // 获取版本号
  if (browserInfo.isIE) {
    const match = userAgent.match(/(?:MSIE |rv:)(\d+\.\d+)/);
    browserInfo.version = match ? parseFloat(match[1]) : null;
  } else if (browserInfo.isChrome) {
    const match = userAgent.match(/Chrome\/(\d+\.\d+)/);
    browserInfo.version = match ? parseFloat(match[1]) : null;
  }
  
  return browserInfo;
}

// 使用示例
const browser = getBrowserInfo();
if (browser.isIE && browser.version < 12) {
  console.warn('您的浏览器版本较旧，建议升级以获得更好的体验');
}

// 1. Promise polyfill
if (typeof Promise === 'undefined') {
  window.Promise = require('es6-promise').Promise;
}

// 2. fetch polyfill
if (typeof fetch === 'undefined') {
  window.fetch = require('whatwg-fetch');
}

// 3. Object.assign polyfill
if (typeof Object.assign !== 'function') {
  Object.assign = function(target) {
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }
    
    const to = Object(target);
    for (let index = 1; index < arguments.length; index++) {
      const nextSource = arguments[index];
      if (nextSource != null) {
        for (const nextKey in nextSource) {
          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
    }
    return to;
  };
}

// 4. Array.includes polyfill
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    const o = Object(this);
    const len = parseInt(o.length) || 0;
    if (len === 0) return false;
    
    const n = fromIndex || 0;
    const k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    
    while (k < len) {
      if (o[k] === searchElement) return true;
      k++;
    }
    return false;
  };
}

// 5. String.startsWith polyfill
if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(search, pos) {
    return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
  };
}

// 6. String.endsWith polyfill
if (!String.prototype.endsWith) {
  String.prototype.endsWith = function(search, this_len) {
    if (this_len === undefined || this_len > this.length) {
      this_len = this.length;
    }
    return this.substring(this_len - search.length, this_len) === search;
  };
}

// 使用polyfill.io服务
// 自动提供所需特性的polyfill
// <script src="https://polyfill.io/v3/polyfill.min.js"></script>

// 或者自定义polyfill.io请求
// <script src="https://polyfill.io/v3/polyfill.min.js?features=es6,es2017,es2018"></script>

// 本地polyfill管理
class PolyfillManager {
  constructor() {
    this.polyfills = new Map();
    this.loadedFeatures = new Set();
  }
  
  async load(features) {
    const missingFeatures = features.filter(feature => !this.loadedFeatures.has(feature));
    
    if (missingFeatures.length === 0) {
      return Promise.resolve();
    }
    
    // 这里可以实现动态加载polyfill的逻辑
    const promises = missingFeatures.map(feature => this.loadPolyfill(feature));
    
    await Promise.all(promises);
    
    missingFeatures.forEach(feature => {
      this.loadedFeatures.add(feature);
    });
  }
  
  loadPolyfill(feature) {
    // 根据特性加载对应的polyfill
    switch(feature) {
      case 'fetch':
        if (typeof fetch === 'undefined') {
          return import('whatwg-fetch');
        }
        break;
      case 'Promise':
        if (typeof Promise === 'undefined') {
          return import('es6-promise');
        }
        break;
      // 其他polyfill
    }
    return Promise.resolve();
  }
  
  checkSupport(features) {
    return features.map(feature => ({
      feature,
      supported: this.isFeatureSupported(feature)
    }));
  }
  
  isFeatureSupported(feature) {
    switch(feature) {
      case 'fetch':
        return typeof fetch !== 'undefined';
      case 'Promise':
        return typeof Promise !== 'undefined';
      case 'Array.includes':
        return Array.prototype.includes !== undefined;
      default:
        return false;
    }
  }
}

// 使用示例
const polyfillManager = new PolyfillManager();
const requiredFeatures = ['fetch', 'Promise', 'Array.includes'];

polyfillManager.checkSupport(requiredFeatures).then(results => {
  const unsupported = results.filter(r => !r.supported).map(r => r.feature);
  if (unsupported.length > 0) {
    console.log('需要加载的polyfill:', unsupported);
    return polyfillManager.load(unsupported);
  }
});

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          // 支持的浏览器版本
          browsers: [
            '> 1%',
            'last 2 versions',
            'ie >= 11'
          ]
        },
        useBuiltIns: 'usage', // 根据使用情况自动导入polyfill
        corejs: 3
      }
    ]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import', // 动态导入支持
    ['@babel/plugin-proposal-decorators', { legacy: true }], // 装饰器支持
    ['@babel/plugin-proposal-class-properties', { loose: true }] // 类属性支持
  ]
};

// 1. 基础功能优先
class FeatureManager {
  constructor() {
    this.features = new Map();
  }
  
  // 注册功能，按重要性排序
  registerFeature(name, implementation, requirements = []) {
    this.features.set(name, {
      implementation,
      requirements,
      enabled: this.checkRequirements(requirements)
    });
  }
  
  checkRequirements(requirements) {
    return requirements.every(req => {
      try {
        return eval(req);
      } catch (e) {
        return false;
      }
    });
  }
  
  getFeature(name) {
    const feature = this.features.get(name);
    if (feature && feature.enabled) {
      return feature.implementation;
    }
    return null;
  }
  
  // 启用增强功能
  enableEnhancements() {
    for (const [name, feature] of this.features) {
      if (!feature.enabled && this.checkRequirements(feature.requirements)) {
        feature.enabled = true;
        console.log(`启用增强功能: ${name}`);
      }
    }
  }
}

// 使用示例
const featureManager = new FeatureManager();

// 基础功能
featureManager.registerFeature('basic-ajax', {
  request: function(url, options) {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', url);
    xhr.onreadystatechange = options.onload;
    xhr.send(options.body);
    return xhr;
  }
});

// 增强功能
featureManager.registerFeature('enhanced-ajax', {
  request: function(url, options) {
    return fetch(url, options).then(response => response.json());
  }
}, ['typeof fetch !== "undefined"']);

// 根据支持情况使用合适的功能
const ajax = featureManager.getFeature('enhanced-ajax') || 
             featureManager.getFeature('basic-ajax');

if (ajax) {
  ajax.request('/api/data', { method: 'GET' })
    .then(data => console.log(data));
}

// 1. 特性检测和降级
class GracefulDegradation {
  static async loadWithFallback(loaders) {
    for (const loader of loaders) {
      try {
        const result = await loader();
        return result;
      } catch (error) {
        console.warn(`加载失败，尝试降级方案:`, error.message);
        continue;
      }
    }
    throw new Error('所有加载方案都失败了');
  }
  
  static async loadChartLibrary() {
    return this.loadWithFallback([
      // 现代图表库
      () => import('chart.js'),
      // 轻量级替代方案
      () => import('chartist'),
      // 简单实现
      () => Promise.resolve(this.createSimpleChart())
    ]);
  }
  
  static createSimpleChart() {
    // 简单的图表实现
    return {
      render: function(data, container) {
        const html = data.map(item => 
          `<div style="width: ${item.value}px; background: blue;">${item.label}</div>`
        ).join('');
        container.innerHTML = html;
      }
    };
  }
}

// 2. 功能降级
class Service {
  constructor() {
    this.useAdvancedFeatures = this.checkAdvancedSupport();
  }
  
  checkAdvancedSupport() {
    return 'fetch' in window && 
           'Promise' in window && 
           'IntersectionObserver' in window;
  }
  
  async fetchData(url) {
    if (this.useAdvancedFeatures) {
      // 使用现代API
      const response = await fetch(url);
      return response.json();
    } else {
      // 降级到传统方法
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(new Error(`HTTP ${xhr.status}`));
            }
          }
        };
        xhr.onerror = () => reject(new Error('Network error'));
        xhr.send();
      });
    }
  }
}

// 1. 浏览器兼容性测试
class CompatibilityTester {
  constructor() {
    this.testResults = new Map();
  }
  
  async runCompatibilityTests() {
    const tests = [
      this.testES6Features(),
      this.testAPIAvailability(),
      this.testDOMFeatures(),
      this.testPerformanceAPI()
    ];
    
    const results = await Promise.allSettled(tests);
    
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        this.testResults.set(['ES6', 'API', 'DOM', 'Performance'][index], result.value);
      } else {
        this.testResults.set(['ES6', 'API', 'DOM', 'Performance'][index], {
          supported: false,
          error: result.reason.message
        });
      }
    });
    
    return Object.fromEntries(this.testResults);
  }
  
  testES6Features() {
    const tests = {
      arrowFunctions: (() => {
        try {
          eval('() => {}');
          return true;
        } catch (e) {
          return false;
        }
      })(),
      templateLiterals: (() => {
        try {
          eval('`test`');
          return true;
        } catch (e) {
          return false;
        }
      })(),
      destructuring: (() => {
        try {
          eval('const {a} = {a:1}');
          return true;
        } catch (e) {
          return false;
        }
      })(),
      promises: typeof Promise !== 'undefined',
      modules: typeof import !== 'undefined'
    };
    
    return {
      supported: Object.values(tests).every(Boolean),
      details: tests
    };
  }
  
  testAPIAvailability() {
    const apis = {
      fetch: typeof fetch !== 'undefined',
      localStorage: typeof localStorage !== 'undefined',
      sessionStorage: typeof sessionStorage !== 'undefined',
      indexedDB: typeof indexedDB !== 'undefined',
      webSockets: typeof WebSocket !== 'undefined',
      serviceWorkers: 'serviceWorker' in navigator,
      intersectionObserver: 'IntersectionObserver' in window,
      mutationObserver: 'MutationObserver' in window
    };
    
    return {
      supported: Object.values(apis).every(Boolean),
      details: apis
    };
  }
  
  testDOMFeatures() {
    const features = {
      querySelector: 'querySelector' in document,
      addEventListener: 'addEventListener' in window,
      classList: 'classList' in document.createElement('div'),
      dataset: 'dataset' in document.createElement('div'),
      customElements: 'customElements' in window
    };
    
    return {
      supported: Object.values(features).every(Boolean),
      details: features
    };
  }
  
  testPerformanceAPI() {
    const features = {
      performance: 'performance' in window,
      navigationTiming: 'navigationStart' in performance.timing,
      resourceTiming: 'getEntriesByType' in performance
    };
    
    return {
      supported: Object.values(features).every(Boolean),
      details: features
    };
  }
  
  generateCompatibilityReport() {
    const results = Object.fromEntries(this.testResults);
    const allSupported = Object.values(results)
      .every(result => result.supported !== false);
    
    return {
      overall: allSupported ? 'Full support' : 'Partial support',
      results,
      recommendations: this.generateRecommendations(results)
    };
  }
  
  generateRecommendations(results) {
    const recommendations = [];
    
    if (!results.ES6.supported) {
      recommendations.push('Use Babel for ES6+ transpilation');
    }
    
    if (!results.API.supported) {
      recommendations.push('Add polyfills for missing APIs');
    }
    
    if (!results.performance.supported) {
      recommendations.push('Implement fallback performance monitoring');
    }
    
    return recommendations;
  }
}

// 使用示例
const tester = new CompatibilityTester();
tester.runCompatibilityTests()
  .then(report => {
    console.log('兼容性测试报告:', report);
  });

// 2. 在线兼容性测试服务集成
class BrowserStackTester {
  constructor(config) {
    this.config = config;
  }
  
  async testOnMultipleBrowsers(testScript) {
    const browsers = [
      { browser: 'Chrome', version: 'latest' },
      { browser: 'Firefox', version: 'latest' },
      { browser: 'Safari', version: 'latest' },
      { browser: 'Edge', version: 'latest' },
      { browser: 'IE', version: '11' }
    ];
    
    const results = {};
    
    for (const browser of browsers) {
      try {
        const result = await this.runTestOnBrowser(browser, testScript);
        results[`${browser.browser}_${browser.version}`] = result;
      } catch (error) {
        results[`${browser.browser}_${browser.version}`] = {
          status: 'error',
          error: error.message
        };
      }
    }
    
    return results;
  }
  
  async runTestOnBrowser(browser, testScript) {
    // 这里集成BrowserStack或其他云测试服务
    // 实际实现会调用外部API
    return {
      status: 'success',
      details: `Test passed on ${browser.browser} ${browser.version}`
    };
  }
}

// 1. 开发阶段兼容性检查
const CompatibilityChecklist = {
  // [ ] 使用特性检测而非浏览器检测
  featureDetection: function() {
    return 'fetch' in window; // 而不是检测浏览器类型
  },
  
  // [ ] 提供降级方案
  fallbacks: function() {
    if ('fetch' in window) {
      return fetch('/api/data');
    } else {
      return this.xhrFallback('/api/data');
    }
  },
  
  // [ ] 使用polyfill处理缺失特性
  polyfills: function() {
    if (!Array.prototype.includes) {
      // 加载Array.includes的polyfill
    }
  },
  
  // [ ] 配置适当的构建工具
  buildTools: function() {
    // Babel配置支持目标浏览器
    // Webpack配置适当的polyfill
  },
  
  // [ ] 测试多个浏览器
  testing: function() {
    // 在多个浏览器中测试
    // 使用自动化测试工具
  }
};

// 2. 兼容性工具函数
class CompatibilityUtils {
  // 检测并加载所需polyfill
  static async ensureCompatibility(requiredFeatures) {
    const missingFeatures = [];
    
    for (const feature of requiredFeatures) {
      if (!this.isFeatureSupported(feature)) {
        missingFeatures.push(feature);
      }
    }
    
    if (missingFeatures.length > 0) {
      console.log('加载缺失的polyfill:', missingFeatures);
      await this.loadPolyfills(missingFeatures);
    }
    
    return missingFeatures.length === 0;
  }
  
  static isFeatureSupported(feature) {
    const checks = {
      'Promise': () => typeof Promise !== 'undefined',
      'fetch': () => typeof fetch !== 'undefined',
      'Array.includes': () => Array.prototype.includes !== undefined,
      'Object.assign': () => Object.assign !== undefined,
      'String.startsWith': () => String.prototype.startsWith !== undefined,
      'IntersectionObserver': () => 'IntersectionObserver' in window,
      'WebSockets': () => 'WebSocket' in window
    };
    
    const check = checks[feature];
    return check ? check() : false;
  }
  
  static async loadPolyfills(features) {
    const polyfillPromises = features.map(feature => this.loadPolyfill(feature));
    await Promise.all(polyfillPromises);
  }
  
  static loadPolyfill(feature) {
    // 这里可以集成CDN或本地polyfill
    const polyfills = {
      'Promise': () => import('es6-promise'),
      'fetch': () => import('whatwg-fetch'),
      'Array.includes': () => {
        if (!Array.prototype.includes) {
          Array.prototype.includes = function(searchElement, fromIndex) {
            return this.indexOf(searchElement, fromIndex) !== -1;
          };
        }
        return Promise.resolve();
      }
    };
    
    const loader = polyfills[feature];
    return loader ? loader() : Promise.resolve();
  }
}

// 3. 兼容性初始化
async function initializeApp() {
  // 检查并确保兼容性
  const requiredFeatures = [
    'Promise',
    'fetch',
    'Array.includes',
    'Object.assign'
  ];
  
  const isCompatible = await CompatibilityUtils.ensureCompatibility(requiredFeatures);
  
  if (!isCompatible) {
    console.warn('浏览器兼容性问题，请考虑升级浏览器');
  }
  
  // 继续应用初始化
  console.log('应用初始化完成');
}

// 智能polyfill加载
class SmartPolyfillLoader {
  constructor() {
    this.loadedPolyfills = new Set();
  }
  
  // 根据浏览器支持情况动态加载polyfill
  async loadRequiredPolyfills() {
    const requiredPolyfills = this.detectRequiredPolyfills();
    
    if (requiredPolyfills.length === 0) {
      return;
    }
    
    console.log('加载所需polyfill:', requiredPolyfills);
    
    // 并行加载polyfill
    const loadPromises = requiredPolyfills.map(polyfill => 
      this.loadPolyfill(polyfill)
    );
    
    await Promise.all(loadPromises);
  }
  
  detectRequiredPolyfills() {
    const polyfills = [];
    
    if (typeof Promise === 'undefined') {
      polyfills.push('Promise');
    }
    
    if (typeof fetch === 'undefined') {
      polyfills.push('fetch');
    }
    
    if (!Array.prototype.includes) {
      polyfills.push('Array.prototype.includes');
    }
    
    if (!Object.assign) {
      polyfills.push('Object.assign');
    }
    
    if (typeof Symbol === 'undefined') {
      polyfills.push('Symbol');
    }
    
    return polyfills;
  }
  
  async loadPolyfill(name) {
    if (this.loadedPolyfills.has(name)) {
      return Promise.resolve();
    }
    
    // 加载polyfill
    switch (name) {
      case 'Promise':
        await import('es6-promise/auto');
        break;
      case 'fetch':
        await import('whatwg-fetch');
        break;
      case 'Array.prototype.includes':
        if (!Array.prototype.includes) {
          Array.prototype.includes = function(searchElement, fromIndex) {
            const fromIndexAsNumber = fromIndex ? Number(fromIndex) : 0;
            if (fromIndexAsNumber >= 0) {
              return this.slice(fromIndexAsNumber).indexOf(searchElement) !== -1;
            } else {
              return this.slice(0, this.length + fromIndexAsNumber).indexOf(searchElement) !== -1;
            }
          };
        }
        break;
      case 'Object.assign':
        if (!Object.assign) {
          Object.assign = function(target) {
            if (target == null) {
              throw new TypeError('Cannot convert undefined or null to object');
            }
            const to = Object(target);
            for (let index = 1; index < arguments.length; index++) {
              const nextSource = arguments[index];
              if (nextSource != null) {
                for (const nextKey in nextSource) {
                  if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                    to[nextKey] = nextSource[nextKey];
                  }
                }
              }
            }
            return to;
          };
        }
        break;
    }
    
    this.loadedPolyfills.add(name);
  }
}

// 使用智能polyfill加载器
const polyfillLoader = new SmartPolyfillLoader();
polyfillLoader.loadRequiredPolyfills()
  .then(() => {
    console.log('兼容性准备就绪');
    // 启动应用
  });