zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    设计模式之一(策略模式)
    电脑开机进入不了XP界面
    IBM X系列笔记本通过U盘安装系统方法全攻略
    DELPHI 访问其它电脑文件(局域网)
    笔记本维修小插曲 屏幕不亮处理方式
    delphi 笔记
    电脑小子的新婚夜
    如何得到动态链接库的输出函数(delphi tdump.exe)
    sql server重复数据处理
    如何使用jQuery向asp.net Mvc传递复杂json数据Filter篇
  • 原文地址:https://www.cnblogs.com/cl94/p/12261116.html
Copyright © 2011-2022 走看看