<script>
默认: 同步加载js文件，
1.script标签放在头部中会先于DOM加载，js会无法获取DOM节点；
2.script标签放在底部，同步加载js，会等待所有DOM加载完毕；
async属性: 异步加载js，js一旦加载完，会立即执行js；如DOM非常多，js非常少，会导致js找不到DOM节点；
defer属性: 异步加载js，会等到DOM全部加载完才会执行js；等于将<script>写在<body>最后方式；
<head>
<title>Document</title>
同步加载js
<script src="demo.js"></script>
async 异步加载js
<script src="demo.js" async></script>
defer 异步加载js
<script src="demo.js" defer></script>
</head>
<body>
同步加载js，放在尾部等待所有DOM加载完毕；
<script src="./demo.js"></script>
</body>
<body>
<h5>hello</h5>
异步加载js，DOM全部加载完后才执行；
<script type="module">
import show from './demo.js'
import say from './demo2.js'
show(1);
say();
</script>
</body>
模块化
浏览器环境支持ES6模块化方式；
Node环境支持CommonJs模块化，node需要14.15.1以上版本同时支持Es6模块化方式，通过babel第三方插件在node中使用ES6的模块化；
模块化就是把单独的一个功能封装到一个模块(js/ts文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；这样方便代码的重用、提升开发效率、方便后期维护；
// CommonJs -> Node环境
module.export = 'xxx'; // 导出
exports.xxx = function(){}; // 导出
require('xxx'); // 引入
// 浏览器环境 -> Es6模块化
export default { // 默认导出
demo: ()=>{}
}
export let demo2; // 分别导出
import demo from './xxx'; // 导入
import { demo2 } from './xxx'; // 分别导入
ES6模块化
默认导出 和 按需导出; as取别名;
import m, {s1 as sss1, say} from './m1'
m.show(); // 'c'
console.log(sss1) // 'a'
say(); // 'hello'
m1.js
let a = 1;
let b = 2;
let c = 3;
let show = ()=>{
console.log('c')
}
//默认导出 只能一个文件中使用一次
export default {
a,b,show
}
export let s1 = 'a';
export let s2 = 'b';
export function say() {
console.log('hello');
}
直接导入
import './m1'
m1.js
for(var i = 0; i < 3; i++){
console.log(i);
}
CommonJs模块化
导入和导出
const m = require('./utils/demo');
console.log(m.username); // 'zhangsan'
m.say(); // 'hello'
module.exports.username = 'zhangsan';
module.exports.say = function(){
console.log('hello');
}
- exports对象：简化module.exports；指向的是同一个对象；
const m = require('./utils/demo2');
console.log(m.username); // undefined
console.log(m.age); // 22
exports.username = 'lisi';
module.exports = {
age: 22,
say(){
console.log('你好');
}
}
