首页 > 其他 > 详细

模块化补充

时间:2020-08-30 19:31:53      阅读:61      评论:0      收藏:0      [点我收藏+]

补充

访问安全的处理

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

模块化补充

原文:https://www.cnblogs.com/dshvv/p/13585932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!