模块化补充
补充
访问安全的处理
模块化的好处处理在于能够分模块解耦编写代码外。还能够保护私有变量。类似于private的效果。 在没有这些模块之前，是如何处理这些问题呢。 利用闭包
// utils引入 (function(){ var print = function(msg){ console.log('调用了'+msg) }; var add = function(){ print('加法') }; var utils = { add }; window.utils = utils })()
commonJs和esModule的不同
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。 参考：ES6模块与CommonJS的区别
commonJs
// utils.js let count = 1; setInterval(()=>{ ++count; },1000) module.exports = { count }; // main.js const utils = require('./utils'); setInterval(()=>{ console.log(utils.count) // 一直打印1 },1000)
esModule
// utils.js export let count = 1; let count = 1; setInterval(()=>{ ++count; },1000) // main.js import count from './utils'; setInterval(()=>{ console.log(count) // 打印1、2、3... },1000)
关键字讲解
module.exports、 export.utils = {}、export default、export const utils = {}
原生浏览器支持
type=module
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="module"> import {add} from './utils.js'; const res = add(1,2); console.log(res) </script> </body> </html> export const add = (num1, num2)=> { return num1+num2; }
ts中的内部和外部模块
namespace和module
预加载
prefetch 这玩意会影响 cmd的验证，因为他会帮你下载所有文件
