• ES6的模块化规范和CommonJS的模块化规范的差异


    ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成:export 和 import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

    /** 定义模块 math.js **/
    
    var n = 1;
    
    function add(){
        
    return 2+3
    
    }
    
    export {
        n,
        add
    }
    
    
    /** 引用模块  main.js**/
    
    import { n , add } from './math.js'
    
    
    

    如上例所示,使用import命令的时候,用户需要知道所要加载的变量名或函数名。其实ES6还提供了export default命令,为模块指定默认输出,对应的import语句不需要使用大括号。这也更趋近于ADM的引用写法。

    /** export default 定义输出  math.js**/
        //输出
        export default { basicNum, add };
        
    /** 引用模块   main.js**/
       
         //引入
        import math from ‘./math‘;
        
        alert(math.n);
    
        math.add();
    }
    
    
    

    CommonJS

    Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。实际使用时,用module.exports定义当前模块对外输出的接口(不推荐直接用exports),用require加载模块。
    
    
        //定义模块 math.js       
        var n = 0;
        function add(a, b) {
            return a + b;
        }
        module.exports = { //在这里写上需要向外暴露的函数、变量
            add: add,
            n: n
        }
    
        /** 引入模块 require **/
    
        //引用自定义的模块时,参数包含路径,可省略.js
        var math = require(‘./math‘);
        math.add(2, 5);
    
    
        //引用核心模块时,不需要带路径
        var http = require(‘http‘);
        http.createService(...).listen(3000);
    
    

    import 时候的路径问题(新手容易碰到)

    • 开始玩的时候,总是出现 cannot find module 问题,原来 在 import 的时候 如果不使用相对路径或者绝对路径,node默认会去node_modules/文件夹下去找,例如:
    
    import * as obj from 'nav'
    
    // node 会试着去寻找 node_modules/nav.js 文件,如果没有找到会接着找 nav 文件夹,如果文件夹存在,会找文件夹内的index.js文件,找不到就会报错
    
    // 正确写法
    import * as obj from './exports'
    
    
  • 相关阅读:
    【flutter学习】基础知识(一)
    【软件测试学习】 敏捷开发(二)
    【软件测试学习】 软件测试初步认识(一)
    【hugo】- hugo 监听浏览器切换title
    【hugo】- hugo 博客 添加鼠标单击特效
    春风十里
    一眼就能看懂的C#委托、多播委托和事件的区别与联系。
    js控制的DataGrid的URL参数不能动态刷新表格的问题
    [报错解决].net web api测试页面ajax 报错400 的问题
    [MVC]使用jquery.form.js 异步上传文件
  • 原文地址:https://www.cnblogs.com/koala0521/p/7862553.html
Copyright © 2020-2023  润新知