前言：

<!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. spark 报错 InvalidClassException: no valid constructor

    2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...

  2. 论AMD内核如何使用Android Studio虚拟机

    其实之前和老师求证过AMD内核要用虚拟机的话应求助第三方模拟器(不然速度太慢)或直接使用真机测试,当时拿着虚拟机的报错简单搜索了下只翻到了一个用谷歌第三方工具的(检索时关键词不对的锅),觉得麻烦就没去 ...

  3. js对象模型3

    3

  4. centos的安装与配置，Linux下基本命令、权限控制，解压缩文件以及软件的安装与卸载

    centos安装与网络配置 关机:shutdown -h now 重启:shutdown -r now 或 reboot linux目录结构与操作命令 使用ls命令查看目录结构 目录查看: ls [- ...

  5. promise链式调用

    var that = this;that.hello().then(res => { return that.world(res);}).then(res => { console.log ...

  6. BZOJ #2506. calc [根号分治，莫队，二分]

    \(p\) 是个正常范围, \(\sqrt p <= 100\) 比较小,预处理出来 \(a_i % p == k\) 的位置,然后丢进去,最后询问的 \(p\) 如果大于 \(100\) 就莫 ...

  7. 进程无法连接到 Subscriber"XXXXXXX"

    进程无法连接到 Subscriber“APP07”. 在订阅的机器上config 添加别名 APP07

  8. 【笔记】机器学习 - 李宏毅 - 8 - Backpropagation

    反向传播 反向传播主要用到是链式法则. 概念: 损失函数Loss Function是定义在单个训练样本上的,也就是一个样本的误差. 代价函数Cost Function是定义在整个训练集上的,也就是所有 ...

  9. 【NLP】暑假课作业3 - 词性标注（简单词频概率统计）

    作业任务: 使用98年人民日报语料库进行词性标注训练及测试. 作业输入: 98年人民日报语料库(1998-01-105-带音.txt),用80%的数据作为训练集,20%的数据作为验证集. 运行环境: ...

  10. 卸载Windows控制面板的程序和功能中找不到的一些软件的方法

    卸载Windows控制面板的程序和功能中找不到的一些软件的方法 找到卸载程序进行卸载即可