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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM