zoukankan      html  css  js  c++  java
  • 5-es6的模块化开发与其它的不同

    1、加载机制不同
    es是静态加载,其它是动态加载。
    Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
    CommonJS 和 AMD、CMD 模块,都只能在运行时确定这些东西。
    比如,其它模块就是对象(运行时,查找对象),输入时必须查找对象属性。ES6 模块不是对象,而是通过export命令显式指定输出的代码(编译时,代码合并重构),再通过import命令输入。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比其它模块的加载方式高

    2、输出值不同
    加载机制不同,导致了他们export输出的也不同
    其它模块机制输出的是一个值的拷贝,而ES6模块输出的是值的引用。
    其它模块输出的是被输出值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值
    由于ES6输入的模块变量,只生成一个动态的只读引用,所以这个变量是只读的,对它进行重新赋值会报错,只能改变对象属性的值,不能够改变引用。如果是一个基本数据类型,不是引用类型的数据,也不能改变他的值,按照js尿性字符串和布尔就不是引用,举例子不能用这种类型数据写demo,否则演示不出效果

    实例证明

    (CMD)
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="wrapp">
            <button>改变</button>
        </div>
        <script src="lib/jquery-3.2.1.min.js"></script>
        <script src="lib/sea.js"></script>
        <script src="js/app.js"></script>
    </body>
    </html>

    app.js

    /**
     *模块:
     *功能:入口
     */
    seajs.use(['./js/hello'],function (hello) {
        $('button').click(function () {
            hello.up()
            console.log(hello.msg)
        })
    });

    hello.js

    define(function (require, exports, modul) {
        var msg=0;
        function up() {
            msg++
        }
        modul.exports={
            up:up,
            msg:msg
        };
    })


    效果



     Es6
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="wrapp">
        <button>改变</button>
    </div>
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="bundle.js"></script>
    </body>
    </html>

    app.js

    /**
     *模块:
     *功能:入口
     */
    import * as hello from './hello';
    $('button').click(function () {
        hello.up()
        console.log(hello.msg)
    })

    hello.js

    var msg=0;
    function up() {
        msg++
    }
    export {up,msg} ;

    效果

    3、总结
    现在es6模块开发尚未被浏览器实现,所有的理论都是在webpack基础上的,不代表最终结果,随时可能被颠覆

    参考
    http://blog.csdn.net/pcaxb/article/details/53670097
    https://www.cnblogs.com/diligenceday/p/5503777.html

  • 相关阅读:
    在做城市选择界面时,获取首字母并转化为大写,发现好多网上的代码,个别汉字不能转为拼音(漯河、鄢陵等)
    微信小程序之开发的坑
    前端学习之学习网站
    前端学习之Angular cli
    前端学习之npm国内镜像cnpm和yarn的快速安装
    eclipse Team之pull操作从GitLab上更新项目到本地
    前端学习之angular项目的本地运行步骤
    前端学习之vscode脚本禁用的问题
    maven项目启动提示:启动过滤器异常
    前端学习之Node.js安装及环境配置
  • 原文地址:https://www.cnblogs.com/dshvv/p/8391850.html
Copyright © 2011-2022 走看看