前言：

<!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. jmeter-json提取器提取的内容含”引号

    这时如果直接赋值会报错  解决方法: 1.用vars.get("Object")提取变量的值 2.用代码提取,最后把提取到的Object或Array转为String

  2. HDU-1754 I Hate It （树状数组模板题——单点更新，区间查询最大值）

    题目链接 ac代码(注意字符读入前需要注意回车的影响) #include<iostream> #include<cstdio> #include<cstring> ...

  3. [SDOI2018]反回文串

    题意 问有多少个长度为\(N\)且字符集大小为\(K\)的字符串可以通过回文串旋转 (把第一个字符移到最后)若干次得到.\(K\le N≤10^{18}\) 做法 ARC64F的加强版 设\(h(d) ...

  4. 吴裕雄--天生自然 R语言数据可视化绘图（2）

    par(ask=TRUE) opar <- par(no.readonly=TRUE) # save original parameter settings library(vcd) count ...

  5. Django如何连接mysql

    1.设置django的mysql驱动为pymysql 因为django默认的是使用MySqlDb连接mysql数据库,但是由于该模块不支持python3.4以上版本,所以使用pymysql模块 在项目 ...

  6. linux安装Nginx 以及 keepalived 管理Nginx

    linux安装Nginx 1.1将Nginx素材内容上传到/usr/local目录(pcre,zlib,openssl,nginx)(注意:必须登录用对这个文件具有操作权限的) 1.2安装pcre库 ...

  7. 限定输入框只能输入数字, TextBox的TextChanged事件调用

    /// <summary> /// 限定输入框只能输入数字, TextBox的TextChanged事件调用 /// </summary> /// <param name ...

  8. VSCode添加git bash作为默认终端

    VSC添加git bash作为默认终端的settings.json添加 { "terminal.integrated.shell.windows": "D:\\Progr ...

  9. iptables (二) nat & tcp_wrapper

    一.nat 之前网络防火墙的示例中,如果内网是私网地址,那么内网主机如何与外网通信呢? 这时候,iptables要实现内网和外网通信,有两种方式: nat: Network Address Trans ...

  10. 剑指offer-面试题14-剪绳子-动态规划法

    /* 题目: 给定一个长度为n的绳子,把绳子剪为m段,(n>1,m>1) 求各段绳子乘积的最大值. */ /* 思路: 动态规划. f(n)=max(f(1)*f(n-1),f(2)*f( ...