模块化补充

补充

访问安全的处理

模块化的好处处理在于能够分模块解耦编写代码外。还能够保护私有变量。类似于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的验证，因为他会帮你下载所有文件