前言：

<!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. 回炉重造之重读Windows核心编程-006-线程

    线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...

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

    目录 Semantic Highlighting 通用高亮 高亮和折叠块 Semantic Highlighting Qt Creator将C++,QML和JavaScript语言理解为代码,而不是纯 ...

  3. 洛谷P1331-搜索基础-什么是矩形？(我的方案)

    原题链接:https://www.luogu.com.cn/problem/P1331 简单来说就是给出一个由‘#’和‘.‘组成的矩阵.需要识别存在几个矩形(被完全填充的).如果有矩形相互衔接则认为出 ...

  4. PHP0014：PHP操作文件

    查看源代码 用这种方式抓取网页,和原始网页一模一样. 数组不能用echo 将一个网页保存到本地html文件

  5. java面试必问问题总结

    1. 自我介绍 2. get跟load的区别 3. 什么是重载,什么是重写 4. HashTable跟HashMap的区别 5. Jsp九大隐式对象 6. Forword和redirect 的区别 7 ...

  6. STL中的Set和Map——入门新手篇

    STL中的Set和Map 先来看一段网络上的文字描述: 上图是一段关于STL中Set集合的描述,同样的,也近似适合Map的描述.上述文字中,描述了最为重要的特征: Set和Map,底层调用了红黑树的结 ...

  7. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

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

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

  9. object解构赋值

    let options = { title: 'menu', width: 100, height: 200 } //如果简写,变量名必须和属性名一致 let {title,width,height} ...

  10. linux查找含有xxx内容的文件

    find . -name *.json |xargs grep "6379" |awk '{print $1}'|uniq