zoukankan      html  css  js  c++  java
  • ES6模块与CommonJS模块有什么区别?

    ES6 Module和CommonJS模块的区别:
    CommonJS是对模块的浅拷贝,ES6 Module是对模块的引用,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似const
    import的接口是read-only(只读状态),不能修改其变量值。 即不能修改其变量的指针指向,但可以改变变量内部指针指向,可以对commonJS对重新赋值(改变指针指向),
    但是对ES6 Module赋值会编译报错。

    <script type="text/javascript">
                // CommonJS是对模块的浅拷贝
                // lib.js
                var counter = 3;
                function incCounter() {
                    counter++;
                }
                module.exports = {
                    counter: counter,
                    incCounter: incCounter
                };
                // main.js
                var mod = require('./lib');
                
                console.log(mod.counter);  // 3
                mod.incCounter();
                console.log(mod.counter); // 3
            </script>
            <script type="text/javascript">
                // ES6 Module是对模块的引用
                // lib.js
                export let counter = 3;
                export function incCounter() {
                  counter++;
                }
                
                // main.js
                import { counter, incCounter } from './lib';
                console.log(counter); // 3
                incCounter();
                console.log(counter); // 4
            </script>
            <script type="text/javascript">
                // m1.js
                export var foo = 'bar';
                setTimeout(() => foo = 'baz', 500);
                
                // m2.js
                import {foo} from './m1.js';
                console.log(foo); //bar
                setTimeout(() => console.log(foo), 500); //baz
            </script>

    ES6 Module和CommonJS模块的共同点:
    CommonJS和ES6 Module都不可以对引入的对象进行赋值,即对对象内部属性的值进行改变。
    但是可以添加属性

    <script type="text/javascript">
                // lib.js
                export let obj = {};
                
                // main.js
                import { obj } from './lib';
                
                obj.prop = 123; // OK
                obj = {}; // TypeError
            </script>
    好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。
  • 相关阅读:
    学习之spring属性文件注入
    学习之spring自带缓存
    FreeMarker语法
    spring mvc 拦截器
    spring mvc 全局异常处理
    spring mvc 多视图配置
    学习之spring注解DI疑惑
    @Transactional详解
    mybatis关联查询
    shiro 实现 用户 a 操作b 的权限 ,用户 b 能够及时获知。b不需要退出登陆 。 关闭鉴权缓存,或者不配置缓存
  • 原文地址:https://www.cnblogs.com/wangxi01/p/11590106.html
Copyright © 2011-2022 走看看