代码结构优化
- 基于类对象
- 特性检测：在类的方法中，使用特性检测而非浏览器嗅探。例如，当使用
fetch API 时：
class MyClass {
async getData() {
if ('fetch' in window) {
try {
const response = await fetch('https://example.com/api/data');
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
}
} else {
// 兼容旧环境，可使用 XMLHttpRequest
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error('XHR error'));
}
}
};
xhr.send();
});
}
}
}
- 继承和原型链：合理使用继承和原型链，避免过度复杂的继承结构。在 ES6 类中，确保正确的
super 调用。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name +'makes a sound.');
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(this.name +'barks.');
}
}
- 闭包模块
- 模块化设计：保持模块的单一职责原则。例如，一个模块负责数据获取，另一个模块负责数据处理。
// dataFetch.js
const dataFetch = (function () {
async function fetchData() {
if ('fetch' in window) {
try {
const response = await fetch('https://example.com/api/data');
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
}
} else {
// 兼容旧环境，可使用 XMLHttpRequest
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error('XHR error'));
}
}
};
xhr.send();
});
}
}
return {
fetchData
};
})();
export default dataFetch;
- 避免内存泄漏：确保闭包不会持有不必要的外部引用。例如，在事件监听器回调使用闭包时，及时移除监听器。
const element = document.getElementById('myButton');
const clickHandler = (function () {
let count = 0;
return function () {
count++;
console.log('Clicked', count, 'times');
};
})();
element.addEventListener('click', clickHandler);
// 当不再需要时移除监听器
element.removeEventListener('click', clickHandler);
编译工具优化
- Babel：使用 Babel 进行代码转换，将新的 JavaScript 语法（如 ES6 类、箭头函数等）转换为旧环境兼容的语法。
- 安装：
npm install --save -dev @babel/core @babel/cli @babel/preset -env
- 配置文件
.babelrc：
{
"presets": [
[
"@babel/preset - env",
{
"targets": {
"browsers": ["ie >= 11"]
}
}
]
]
}
- 命令行转换：
npx babel src -d dist，将 src 目录下的文件转换并输出到 dist 目录。
- Webpack：Webpack 不仅可以打包代码，还能结合 Babel 进行转换。
- 安装：
npm install --save -dev webpack webpack - cli
- 配置文件
webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel - loader',
options: {
presets: [
[
'@babel/preset - env',
{
"targets": {
"browsers": ["ie >= 11"]
}
}
]
]
}
}
}
]
}
};
- 打包命令：
npx webpack --config webpack.config.js
测试策略优化
- 单元测试：使用 Jest 或 Mocha 等测试框架进行单元测试。
- Jest 示例：
- 安装：
npm install --save -dev jest
- 测试文件
myClass.test.js：
const MyClass = require('./myClass');
describe('MyClass', () => {
let myClass;
beforeEach(() => {
myClass = new MyClass();
});
it('should get data correctly', async () => {
const data = await myClass.getData();
expect(data).toBeDefined();
});
});
- Mocha 示例：
- 安装：
npm install --save -dev mocha chai
- 测试文件
myClass.test.js：
const { expect } = require('chai');
const MyClass = require('./myClass');
describe('MyClass', () => {
let myClass;
beforeEach(() => {
myClass = new MyClass();
});
it('should get data correctly', async () => {
const data = await myClass.getData();
expect(data).to.be.ok;
});
});
- 兼容性测试：使用 BrowserStack 或 Sauce Labs 等服务在多个浏览器和版本上进行测试。
- 配置示例：在
package.json 中添加脚本：
{
"scripts": {
"browserstack - test": "browserstack - local start && mocha --reporter mocha - browserstack - reporter"
}
}
- 运行测试前，确保设置好 BrowserStack 的认证信息等相关配置。
