前言：

<!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

js前端模块化的前世今生的更多相关文章

  1. js前端模块化之加载器原理解析(一)

    先来说一下前端模块化的价值:引用模块此处有详细的介绍,可以自行前往观看. 一.总结如下优点: (1)解决命名冲突(2)烦琐的文件依赖(3)模块的版本管理(4)提高可维护性(5)前端性能优化(6)跨环境 ...

  2. js前端模块化（一） commonjs

    随着浏览器的发展,很多页面逻辑迁移到了客户端(表单验证等),JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组 ...

  3. 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js

    问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...

  4. Angular JS - 8 - SeaJS与前端模块化

    一.前端模块化 关于前端模块化,参考以下链接 : https://github.com/seajs/seajs/issues/547 http://www.cnblogs.com/huiguo/cat ...

  5. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  6. 前端模块化开发之seaJs

    了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...

  7. 前端模块化：RequireJS

    前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果 ...

  8. 前端模块化开发学习之gulp&browserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  9. 基于fis的前端模块化和工程化方案

    前端构建工具 面对日益复杂的前端环境以及前端技术.node技术的高速发展,前端的开发也越来越工程化,体系化,也就是出现了前端自动化构建工具.他们完成的任务目标基本是: js,css,图片的自动压缩合并 ...

随机推荐

  1. C#设计模式学习笔记：(5)原型模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,记录一下学习过程以备后续查用.  一.引言 很多人说原型设计模式会节省机器内存,他们说 ...

  2. 硬盘500M，为什么没有500M。10M宽带，为什么网速没有10M？

    在天朝, 硬件厂商用1000代替1024, 通信公司,用 byte来代替bit. 比如 500G的硬盘,应该有 500 * 1024 *1024 *8 = 4.194304*10^9 位 但是按照厂商 ...

  3. go 函数传递结构体

    我定义了一个结构体,想要在函数中改变结构体的值,记录一下,以防忘记 ep: type Matrix struct{ rowlen int columnlen int list []int } 这是一个 ...

  4. 新年上新！极光认证 Web SDK 首版上线

    新年伊始,极光开发者服务也抢先为各位开发者朋友带来了"新年大礼包",几款明星产品都悉数有不少更新: 极光认证 Web SDK 版本上线 相信不少小伙伴早已熟知极光认证这款产品,3秒 ...

  5. .NET MVC强类型参数排除和包含

    MVC接收强类型对象时排除或只接收某几个属性使用Bind特性 只接收几个属性:Bind(Include="属性1,属性2,属性3,...") 排除某几个属性:Bind(Exclud ...

  6. PHP0010：PHP操作mysql

    cmd中清除之前的记录 cmd操作数据库的步骤: php 到 mysql的并发数 15个左右 for循环是要知道起点和终点 foreach是从结果集中取数据 而while可遍历自然结果集

  7. function_use

    # 函数说明文档,help(len) def sum1(a, b): """ 求和函数sum1 :param a: 参数1 :param b: 参数2 :return: ...

  8. 【3】Python中的广播

    Python-numpy中有一种很高效的方法:广播.  下面介绍一下广播. 实例:对于这个矩阵,如果想求每列元素的和,怎么才能不用for循环? (1,4)指的是一行四列的矩阵:axis决定了是横向(行 ...

  9. openlayers显示区域

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. PAT (Basic Level) Practice （中文）1023 组个最小数 (20 分) （排序）

    给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最小的数就 ...