前端模块化规范之Common.js

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

Common.js

本篇文章只介绍Common.js的常用方法，详细文档见 参考链接

Common.js特点

• 所有代码都运行在模块作用域内，不会污染全局作用域
• 模块只会执行一次，然后缓存，多次加载会读取缓存
• 模块会按照代码中出现的顺序一次加载

暴露模块

1. module.exports
module.exports属性表示当前文件向外暴露的接口。其他文件引入改模块，其实就是读取module.exports暴露的内容

    // test01.js
    let a = 1;
    let fun = function(){
        console.log("这是fun1函数")
    };

    module.exports = {
        a,
        fun
    }

    // test02.js
    let obj = require("./test01")
    console.log(obj) // { a: 1, fun: [Function: fun] }

2.exports.xxx
为了方便，Node为每个模块提供了一个exports变量，指向module.exports，我们在暴露模块时，也可以直接向exports对象中添加方法

    // test03.js
    let name  = 'Jsnewbie'
    let fun = function(){
        console.log("我是fun函数")
    }

    exports.name = name
    exports.fun =fun

    // test02.js
    let obj = require("./test03")
    console.log(obj) // { name: 'Jsnewbie', fun: [Function: fun] }

注意： 不能直接将exports变量指向一个值,因为这样等于切断的与module.exports的联系。如果觉得两者之间很难区分，那么直接使用module.exports暴露模块

   // test04.js
   exports.hello = function(){
    console.log("hello函数")
    }
   module.exports = "Jsnewbie"

    // test02.js
    let obj = require("./test03")
    console.log(obj) // Jsnewbie
    //这里输出"Jsnewbie"是因为moule.exports被重新赋值了，所以上面的hello函数无法暴露出来，只能暴露出"Jsnewbiw这个字符串"

引入模块

require
require命令用于加载模块文件，然后返回该模块的exports对象(也就是暴露出来的对象),如果没有发现指定模块，会报错

加载规则

• require("/xxx/xxx"),以"/"开头，表示引入的是一个位于绝对路径的模块

• require("./xxx/xxx"),以"./"开头,表示引入的是一个相对路径

• require("axios"),不以"./"或者"/"开头，表示引入的是一个第三方的模块或者Node默认提供的模块