前言：

<!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. hive中parquet存储格式数据类型timestamp的问题

    当存储格式为parquet 且 字段类型为 timestamp 且 数据用hive执行sql写入. 这样的字段在使用impala读取时会少8小时.建议存储为sequence格式或者将字段类型设置为st ...

  2. git本地创建多个分支互不干扰

    git本地创建多个分支,互不干扰. 情景:在做某个需求a时,先需要修改紧急bug b:发版时发的是远程dev的代码.   方式一(推荐): (1)本地已有分支dev,写了需求a,先commit,即将工 ...

  3. 秋水逸冰实用Linux脚本收藏

    秋水逸冰的脚本非常受欢迎,奈何其本人博客已经不能访问(目前是这样,不知道别的地区是否能访问),实际上GitHub上他本人一直在维护,因为某些原因不放出他本人的GitHub地址.截止到2019年12月1 ...

  4. Linux安装ftp服务-详细步骤

    最近项目中用到了FTP服务器,于是整理了一份在Linux服务器上安装FTP的详细步骤供大家分享. 1.首先连接上自己的Linux服务器.我的Linux是CentOS 6 2.检查Linux服务器上是否 ...

  5. qt creator源码全方面分析(2-4)

    目录 Qt Creator API Reference 库 核心库 其他库 插件 Qt Creator API Reference Qt Creator的核心基本上只是一个插件加载器.所有功能都在插件 ...

  6. BZOJ #2989. 数列 [树套树]

    考虑转化问题模型,这个没必要可持久化,直接加点就可以了,还不用删点 每次的问题是求 曼哈顿距离,变成切比雪夫距离然后求解 然后我们考虑将这玩意旋转 45度, 然后原坐标的 \((x,y)\) 会变成 ...

  7. XGBoost学习笔记1

    XGBoost XGBoost这个网红大杀器,似乎很好用,完事儿还是自己推导一遍吧,datacamp上面有辅助的课程,但是不太涉及原理 它究竟有多好用呢?我还没用过,先搞清楚原理,hahaha~ 参考 ...

  8. WIN10与ubuntu双系统安装教程

    按照网上博客的安装教程安装的Win10+Ubuntu16.04双系统安装了好几遍都不成功?启动Ubuntu左上一直有个光标在闪?如果你的电脑也是双硬盘(装Windows系统的固态硬盘+机械硬盘),在安 ...

  9. js获取页面缩放比例

    今天在网上看到一位大神写的一篇文章,出处记不得了,只是因为我在做项目的时候需要用到所以看了一眼. 经理要求我把两张图表上下排列(非响应式的)改成可以适配浏览器的,刚开始只是想改样式,看到代码才发现原来 ...

  10. Docke-ce 安装

    Docker-ce 的安装 安装系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2 添加docker镜像源 yum-con ...