美文网首页
模块化规范(CommonJs,AMD,ES6)

模块化规范(CommonJs,AMD,ES6)

作者: Ordinary_zz | 来源:发表于2021-02-23 16:28 被阅读0次

    CommonJS

    阮一峰教程
    node中使用的是commonjs规范
    特点:适用于服务器。
    require
    1、执行被加载模块中的代码
    2、得到被加载模块中的exports导出接口对象
    exports
    1、node是模块作用域,默认文件中的成员只在当前文件模块有效
    2、对于希望可以被其他模块访问的成员,我们就需要把这些公开的成员都挂载到exports接口对象中就可以了
    3、模块输出的值是值的缓存,不存在动态更新

    var module = {
          exports: {}
    }
    return module.exports
    每个模块默认会提供exports变量:exports = module.exports
    所有需要注意的是:不能直接给exports变量赋值,这样会切断exports与module.exports的引用关系
    

    CommonJS加载模块时同步的,只有加载完成,才能执行后面的操作

    AMD规范

    AMD
    参考1
    参考2
    特点:异步加载,适用于浏览器
    所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成后,运行这个回调函数

    require([module],callback)
    

    RequireJS工具库遵守的是AMD规范

    ES6

    参考教程
    特点:浏览器和服务器通用的模块解决方案。
    使用:
    export:规定模块的对外接口;export 存在动态更新;

    /*profiles.js*/
    导出变量:  
    export var firstname = 'es6'
    导出函数:
    export function add(x,y) {
       return x+y
    }
    批量导出:
    var firstname = 'es6' 
    var lastname = 'amd'
    function add(x,y) {
       return x+y
    }
    export { firstname, lastname , add}
    导出时希望重命名 as
    function v1() {}
    export { v1 as test1}
    

    注意
    export导出时需要与模块内部的变量建立一一对应的关系。export不可以放在块级作用域内
    错误写法:

    export 1 不可以直接输出值
    
    var m =1
    export m    改正: export {m}
    
    function f() {}
    export f    改正:export {f}
    

    import:输入其他模块提供的功能
    import命令接收{},大括号里面指定从其他模块导入的变量名。大括号里的变量名必须与被导入模块(profiles.js)对外接口的名称相同

    import { firstname,lastname,add } from './profiles.js'
    希望重新定义名字 as
    import { firstname as first} from './profiles.js'
    

    import 输入的变量为只读,不允许修改接口,可改写接口属性
    import语句会提升到整个模块的头部,首先执行。在编译阶段执行,代码运行前,静态执行。
    整体加载

    /*circle.js*/
    function area(radius) {
      return Math.PI * radius * radius;
    }
    function circumference(radius) {
      return 2 * Math.PI * radius;
    }
    export { area, circumference }
    
    /*main.js*/
    /*逐一加载*/
    import { area, circumference} from './circle.js'
    /*整体加载*/
    import { * as circle } from './circle.js'
    console.log('圆面积:' + circle.area(5))
    

    默认输出export default

    不再指定名字
    /*default.js*/ 
    export default funtion() {
      console.log('foo')
    }
    // 或者
    funtion foo() {
      console.log('foo')
    }
    export default foo // export default后可以不使用大括号{}
    /*main.js*/ 
     import foo from  './default.js' // import后不再使用大括号{}
    foo() // 'foo'
    

    注意:

    // 正确
    export var a = 1
    // 错误
    export default var a =1
    // 正确
    var a =1
    export default a
    // 错误
    export a
    export 42
    //正确
    export default 42
    // 解析
    export default a 等同于  export { a as default }
    

    相关文章

      网友评论

          本文标题:模块化规范(CommonJs,AMD,ES6)

          本文链接:https://www.haomeiwen.com/subject/bwhrfltx.html