ie9 js 怎么用

在IE9中使用JavaScript的最佳实践包括：使用标准的JavaScript语法、避免使用不兼容的现代特性、利用Polyfill、采取渐进增强和优雅降级的策略。 其中，利用Polyfill是一个有效的策略，可以确保你使用的现代JavaScript功能在IE9中也能正常工作。Polyfill是指一段代码，用于在不支持某些功能的浏览器中提供该功能的模拟实现。Polyfill通常是用来填补现代Web API的功能空缺。

一、使用标准的JavaScript语法

使用标准的JavaScript语法和API是确保代码在IE9中运行的基础。IE9对ECMAScript 5标准提供了基本支持，但是不支持ECMAScript 6及其后的版本。

1、避免使用现代特性

IE9不支持很多现代JavaScript特性，比如箭头函数、模板字符串、let/const等。因此，编写代码时要尽量避免使用这些特性。举例来说：

// 不要使用箭头函数
function add(a, b) {
    return a + b;
}
// 不要使用模板字符串
var name = 'John';
var greeting = 'Hello ' + name + '!';

2、使用兼容的API

IE9支持大部分基础的JavaScript API，但某些现代API，比如Array.prototype.forEach，Array.prototype.map，Promise等并不支持。因此，使用这些API时需要特别注意。

// 使用for循环代替forEach
var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

二、利用Polyfill

Polyfill是一个强大的工具，可以帮助开发者在IE9中使用现代JavaScript功能。Polyfill通常是用来填补现代Web API的功能空缺。

1、引入Polyfill库

有许多现成的Polyfill库可以使用，比如polyfill.io，es5-shim，es6-shim等。你可以直接通过CDN引入这些库。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2、手动编写Polyfill

对于一些简单的功能，可以手动编写Polyfill。例如，如果需要在IE9中使用Array.prototype.forEach，可以手动添加如下代码：

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(callback, thisArg) {
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

三、采取渐进增强和优雅降级的策略

渐进增强和优雅降级是两种应对浏览器兼容性问题的策略。

1、渐进增强

渐进增强的策略是从最基本的功能开始构建，然后逐步添加更高级的功能。这样，即使某些高级功能在IE9中不可用，基本功能仍然可以使用。

// 基本功能
function basicFeature() {
    console.log('This is a basic feature.');
}
// 高级功能
function advancedFeature() {
    if (typeof Promise !== 'undefined') {
        return new Promise(function(resolve, reject) {
            resolve('This is an advanced feature.');
        });
    } else {
        console.log('Advanced feature is not supported.');
    }
}
basicFeature();
advancedFeature();

2、优雅降级

优雅降级的策略是从完整的功能开始构建，然后确保在较旧的浏览器中仍能提供合理的替代方案。举例来说，如果使用fetch API，可以在不支持的浏览器中使用XMLHttpRequest作为替代。

function fetchData(url) {
    if (window.fetch) {
        return fetch(url).then(function(response) {
            return response.json();
        });
    } else {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(new Error(xhr.statusText));
                }
            };
            xhr.onerror = function() {
                reject(new Error('Network Error'));
            };
            xhr.send();
        });
    }
}
fetchData('https://api.example.com/data')
    .then(function(data) {
        console.log(data);
    })
    .catch(function(error) {
        console.error('Error fetching data:', error);
    });

四、使用现代工具和编译器

现代工具和编译器可以帮助你将现代JavaScript代码转换为兼容IE9的代码。

1、使用Babel编译器

Babel是一个流行的JavaScript编译器，可以将现代JavaScript代码转换为兼容旧浏览器的代码。你可以通过配置Babel，将ES6+代码编译为ES5代码。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

在项目根目录下创建一个.babelrc文件，并添加以下配置：

{
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "ie": "9"
            }
        }]
    ]
}

然后，通过Babel命令行工具编译JavaScript代码：

npx babel src --out-dir dist

2、使用Webpack打包

Webpack是一个流行的模块打包工具，可以与Babel结合使用，打包并编译JavaScript代码。你可以通过配置Webpack，将现代JavaScript代码转换为兼容IE9的代码。

npm install --save-dev webpack webpack-cli babel-loader

在项目根目录下创建一个webpack.config.js文件，并添加以下配置：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

然后，通过Webpack命令行工具打包JavaScript代码：

npx webpack

五、调试与测试

调试与测试是确保JavaScript代码在IE9中正常运行的重要步骤。

1、使用IE9开发者工具

IE9自带开发者工具，可以帮助你调试JavaScript代码。你可以通过按下F12键打开开发者工具，查看控制台日志，设置断点，查看网络请求等。

2、使用虚拟机或真实设备测试

为了确保代码在IE9中正常运行，建议在真实设备或虚拟机上进行测试。你可以使用Microsoft提供的免费虚拟机镜像，安装IE9进行测试。

3、利用自动化测试工具

自动化测试工具可以帮助你快速发现兼容性问题。你可以使用Selenium、BrowserStack等工具，自动化测试代码在IE9中的运行情况。

const { Builder, By, until } = require('selenium-webdriver');
(async function example() {
    let driver = await new Builder().forBrowser('internet explorer').build();
    try {
        await driver.get('http://www.example.com');
        let element = await driver.findElement(By.name('q'));
        await element.sendKeys('webdriver');
        await element.submit();
        await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
    } finally {
        await driver.quit();
    }
})();

通过上述方法和工具，你可以确保JavaScript代码在IE9中正常运行，同时利用现代开发工具和最佳实践，提高开发效率和代码质量。