js file实现
JavaScript 文件实现基础
创建 JavaScript 文件通常以 .js 为扩展名，文件内容包含 JavaScript 代码。以下是基本实现方式：
创建文件
- 新建文本文件，命名为
script.js - 确保文件扩展名是
.js而非.txt
基础代码结构
// 单行注释
/* 多行注释 */
// 变量声明
const message = "Hello World";
// 函数定义
function showAlert() {
alert(message);
}
// 事件监听
document.getElementById('myButton').addEventListener('click', showAlert);浏览器中使用 JavaScript
HTML 引入方式
<!-- 外部引入 -->
<script src="script.js"></script>
<!-- 内联脚本 -->
<script>
console.log("Inline script");
</script>加载时机控制
<!-- 异步加载 -->
<script async src="script.js"></script>
<!-- 延迟执行 -->
<script defer src="script.js"></script>Node.js 环境实现
模块化开发
// 导出模块
module.exports = {
add: function(a, b) {
return a + b;
}
};
// 导入模块
const math = require('./math.js');
console.log(math.add(2, 3));ES6 模块语法
// 导出
export const PI = 3.14;
// 导入
import { PI } from './constants.js';现代 JavaScript 特性
箭头函数
const sum = (a, b) => a + b;模板字符串
const name = "Alice";
console.log(`Hello ${name}`);解构赋值
const [x, y] = [1, 2];
const { age } = { name: 'Bob', age: 30 };调试与错误处理
控制台输出
console.log("Info message");
console.error("Error message");错误捕获
try {
riskyOperation();
} catch (error) {
console.error(error.message);
}性能优化建议
- 使用
const和let替代var - 避免全局变量污染
- 使用事件委托减少事件监听器
- 合理使用防抖和节流函数
- 模块化代码提高可维护性
构建工具集成
webpack 配置示例
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
}
};Babel 转译配置
{
"presets": ["@babel/preset-env"]
}
