行内 JavaScript
- 写在元素上，仅适用 当前元素；通常只用于简单的逻辑
- 不符合结构 - 样式 - 行为三分离的原则，原生开发很少使用
- 框架中应用较多，如 React.js
<div onclick="alert('hi')">click me</div>
内部 JavaScript
- 写在页面的 <script> 内
- 仅适用 当前页面，不便于逻辑共享
<div onclick="fn()">click me</div>
<script>
function fn() {
alert('hi');
}
</script>
如果 JavaScript 需要操作元素，为保证元素已就绪，通常将 <script> 放在 <body> 的最后面
<body>
// ...
<script>
// ...
</script>
</body>
也可以写在 onload 函数中，此时脚本可以放在页面任何地方
<script>
window.onload=function(){
// ...
}
</script>
外部 JavaScript
- 将业务逻辑放在单独的 JavaScript 文件中，后缀名是 .js；使用 <script> 的 src 属性引入[推荐]
- 便于共享逻辑
- 库文件都是以外部 JavaScript 的形式引入，可以服务于多个项目|页面|模块
- 大部分都放在 <body> 最后面；有些 <script> 引入需要放在头部<head>，如设置字体
<body>
// ...
<script src="./tmp.js"></script>
</body>
代码组织
- 引入
- 变量声明
- 函数或方法声明
- 初始化
- 事件处理
let form=document.querySelector('form');
function submit(){
//your code
}
form.addEventListener('submit', submit);