其他分享
首页 > 其他分享> > js前端模块化的前世今生

js前端模块化的前世今生

作者:互联网

前言:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<!-- 前端模块化的必须性。
由于展示的方便性,将以下多个scrit块视为多个script文件 -->

<!-- 小明的文件 -->
<script type="text/javascript">
    var flag = true;
</script>

<!-- 小方的文件 -->
<script type="text/javascript">
    var flag = false;
</script>

<!-- 小明的文件 -->
<script type="text/javascript">
    if(flag){
        // 此刻无法打印,因为 flag变量在小方的文件里已被污染
        console.log(333);
    }
</script>
</body>
</html>

初代模块化解决方案:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<!-- 前端模块化的必须性。
由于展示的方便性,将以下多个scrit块视为多个script文件 -->

<!-- 小明的文件 -->
<script type="text/javascript">
    (function(){
        var flag = true;
        let module1 = {
            flag
        };
        window.module1 = module1;
    })();
    
</script>

<!-- 小方的文件 -->
<script type="text/javascript">
    (function(){
        var flag = true;
        let module2 = {
            flag
        };
        window.module2 = module2;
    })();
    var flag = false;
</script>

<!-- 小明的文件 -->
<script type="text/javascript">
    if(module1.flag){
        // 此刻可以打印,各个模块只暴露出相应的模块对象,拒绝了变量污染
        console.log(333);
    }
</script>
</body>
</html>

模块化之commonJS规范:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<!-- 前端模块化的必须性。
由于展示的方便性,将以下多个scrit块视为多个script文件 -->

<!-- 小明的文件 -->

<!-- modeleA.js -->
<script type="text/javascript">
    // 导出
    module.exports = {
        flag: true,
    }
</script>



<script type="text/javascript">
    // 导入
    let {flag} = require('modeleA');
</script>

<!-- 注意:以上代码在浏览器不能直接运行,它基于Node.js环境 -->
</body>
</html>

 

ES6解决方案:

 

test.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<!-- 前端模块化的必须性。
由于展示的方便性,将以下多个scrit块视为多个script文件 -->


<script src="module1.js" type="module"></script>


<script type="module">
    // 导入
    import {num1,num2 } from 'module1.js';

</script>

</body>
</html>
module1.js
    // ERROR :  flag is not defined
    // ? type="module" : 这个js文件属于一个模块,有自己的空间
    //console.log(flag);
    let num1 = 1,num2 = 2;
    /*导出方式1:*/
    export {
        num1
    }
    /*导出方式2:*/
    export var num2 = num2

 

标签:今生,num2,模块化,module1,js,flag,let,var
来源: https://www.cnblogs.com/cl94/p/12261116.html