• 前端模块化之CommonJS


    一、CommonJS特点

    ​ 经过前面讨论,已经知道无模块化时项目中存在的问题。CommonJS的特点就是解决这些问题即:

    ​ 1.每个文件都是一个单独的模块,有自己的作用域,声明的变量不是全局变量(除非在模块内声明的变量挂载到global上)

    ​ 2.每个文件中的成员都是私有的,对外不可见

    ​ 3.A模块依赖B模块时,在A模块内部使用require函数引入B模块即可,模块之间依赖关系更加清晰

    ​ 4.模块的加载有缓存机制,当加载完一次后,后续再加载就会读取缓存中的内容

    ​ 5.模块的加载顺序是按照代码的书写顺序来加载

    二、CommonJS的应用环境

    ​ 应用在Node.js中。CommonJS的加载机制是同步的,在Node环境中模块文件是存在本地硬盘中,所以加载起来比较快,不用考虑异步模式。

    三、CommonJS的用法

    ​ 已经知到CommonJS规范下,每个文件就是一个模块,都有私有作用域,那如何才能让外部访问某个模块中的内容呢?

    ​ 方式1:把模块中的成员挂载到global全局对象中 【非常不推荐】

    ​ 方式2:使用模块的成员module.exports或者exports导出成员

    ​ 最后在外部使用require函数引入所需模块

    方式1:把变量挂载到global模块下【看完忘掉即可】

    //module-b.js
    var a = 10;
    global.a = a;
    
    //module-a.js
    require("./module-b.js");
    console.log(a); //10
    

    方式2:使用module.exports导出成员

    1、使用module.exports单个导出

    //module-b.js
    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    module.exports.a = a;
    module.exports.add = add;
    
    //module-a.js
    const moduleB = require("./module-b.js");
    
    console.log(moduleB.a); //10
    console.log(moduleB.add(1, 1)); //2
    

    2、使用module.exports直接导出一个对象

    //module-b.js
    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    module.exports={a,add};
    
    //module-a.js
    const moduleB = require("./module-b.js");
    
    console.log(moduleB.a); //10
    console.log(moduleB.add(1, 1)); //2
    

    3、使用exports代替module.exports来导出成员

    //module-b.js
    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    exports.a=a;
    exports.add=add;
    //使用exports时 不可使用下面这种方式导出成员
    exports={a,add}
    
    //module-a.js
    const moduleB = require("./module-b.js");
    
    console.log(moduleB.a); //10
    console.log(moduleB.add(1, 1)); //2
    

    由代码可见,在使用module.exports和exports导出成员时略有不同,具体是为什么呢?稍后作出解释

    四、module.exports、exports和require为什么可以直接使用?

    从我们平时写代码的经验来看,在一个文件中可以使用的成员由以下几种情况:

    1、全局成员

    2、在文件内部声明了该成员

    但我们所了解的代码运行环境中的全局成员只有一个,像window和global这种,那大概率不是全局成员。而且我们在模块内部并未声明这三个变量,那为何能直接使用呢?

    其实在node运行环境中,每个模块都是运行在一个函数中,正是因为这个函数的存在,才让每个模块有了私有作用域

    (function (exports, require, module, __filename, __dirname) {
      // HERE IS YOUR CODE
    });
    

    通过代码来证明一下这个函数的存在

    既然我们写的代码都在函数内部,那我们应该通过arguments能获取到这个函数的参数

    //module-a.js
    console.log('模块中的第一句代码');
    console.log(arguments.length)
    
    //运行结果
    模块中的第一句代码
    5
    

    arguments.length的值是5,那八成就是这个样子了。但感觉说服力不强,继续看...

    //module-a.js
    console.log('模块中的第一句代码');
    console.log(arguments.callee.toString())
    
    //运行结果
    模块中的第一句代码
    function (exports, require, module, __filename, __dirname) {
        console.log('模块中的第一句代码');
        console.log(arguments.callee.toString())
    }
    

    终于露出了庐山真面目,为什么可以直接用,应该一目了然了!(可以尝试打印一下这个五个参数中都是什么内容)

    五、module.exports和exports

    通过打印module成员,可以看到exports是module下的一个对象。module的exports属性表示当前模块对外输出的桥梁,module.exports指向的成员都会被暴露出去

    以上示例中的写法都是把模块内的成员挂载到module.exports中暴露出去的

    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    module.exports.a = a;
    module.exports.add = add;
    或者使用
    module.exports={a,add}
    

    exports又如何导出的呢?

    //module-a.js
    console.log(module.exports)
    console.log(exports)
    //输出结果
    {}
    {}
    

    两个成员都是对象,那会不会是同一个东西呢?

    //module-a.js
    console.log(module.exports)
    console.log(exports)
    console.log(module.exports===exports)
    //输出结果
    {}
    {}
    true
    

    可见两个成员完全相等,则指向的堆内存的地址是同一个,所以使用exports导出模块内的成员也是理所应当的了。

    所以模块最外部函数应该是有这么一句代码的

    (function (exports, require, module, __filename, __dirname) {
        exports=module.exports={}; //指向同一个内存地址
      // HERE IS YOUR CODE
    });
    

    既然exports和module.exports是指向的是同一个内存,按说用法是一样的,为什么上边使用exports导出成员时,特意说明不可以使用exports直接导出一个对象呢?不妨试一下:

    //module-b.js
    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    
    // module.exports = { a, add };
    exports = { a, add};
    
    const moduleB = require("./module-b.js");
    
    console.log(moduleB)//{}
    console.log(moduleB.a)//undefined
    

    实验得出,通过exports直接导出一个对象时在外部并拿不到导出的数据,为什么呢?

    看一下module.exports和exports在内存中的情况

    当加载该模块时,执行完exports=module.exports={}后的内存情况

    当执行完exports={a,add}时的内存情况

    当exports={a, add}时,exports在内存中和module.exports指向的就不是同一个内存地址了,说白了抱不了module.exports的大腿了,咱们上面说过,模块导出成员是通过module.exports导出的。exports和module.exports不是同一个内存时,exports自然无法导出成员了。

    既然如此那就把导出的成员老老实实挂载到exports下吧。整洋气一些,module.exports和exports同时使用

    //module-b.js
    const a = 10;
    const add = function(a, b) {
        return a + b;
    }
    
    module.exports = add;
    exports.a = a;
    
    //module-a.js
    const moduleB = require("./module-b.js");
    
    console.log(moduleB)//Function
    console.log(moduleB.a)//undefined
    

    纳尼???把导出的成员挂载到exports下了为何引用的时候还是undefined???

    注意:在使用exports.a=a前 使用了module.exports=add了,这时候使用exports为什么导不出成员,大家应该都明白了【原因同上】

    为了避免在导出成员时,有这样或那样的问题,建议在模块中全部使用module.exports吧

    六、require()

    通过上面一系列的代码案例可以看出,require的作用是加载所依赖的文件。说白了就是执行了所加载模块的最外层的函数。

    //module-b.js
    const a = 10;
    console.log('module-b中打印', a)
    module.exports = { a };
    
    //module-a.js
    const moduleB = require("./module-b.js");
    console.log(moduleB);
    
    执行module-a.js的结果:
    
    module-b中打印 10
    { a: 10 }
    

    module-b.js中的console.log执行了。可见require函数确实令模块最外部的函数执行了。

    由require执行完后有个参数来接受返回值看出,模块最外部的函数执行完后是有返回值的,那么模块最外部的函数应该是这个样子:

    (function (exports, require, module, __filename, __dirname) {
      exports = module.exports = {}; //指向同一个内存地址
      // HERE IS YOUR CODE
      return module.exports;//把module.exports返回出去,同时module.exports下挂载的成员也返回出去了
    });
    

    1、require加载文件的方式(后缀名默认是js)

    ​ (1)通过相对路径加载模块,以"./"或"../"开头。比如:require("./module-b")是加载同级目录下的module-b.js

    ​ (2)通过绝对路径加载模块,以"/"开头,这时候会去磁盘盘符根目录或者网站根目录去找此模块。比如:require("/module-b"),此时 会去根目录去找module-b.js

    ​ (3)直接通过模块名加载,比如:require("math"),这是加载提供node内置的核心模块或者node_modules目录中安装的模块。当加 载的是node_modules中的模块时,查找规则如下

    //文件所在目录  E:/Work/Module/CommonJs/module-a.js
    const math = require("math");
    查找规则:【假设每次在对应的目录下都没找到math模块】
    1、先去CommonJS目录下的node_modules中去查找math模块
    2、再去Module文件夹下的node_modules中去查找math模块
    3、再去Work文件夹下node_modules中去查找math模块
    4、再去E盘下的node_modules中去查找math模块
    最顶级目录还找不到的话则报错...
    

    2、模块的加载机制

    CommonJS模块的加载机制是,引入的值是输出的值的拷贝,一旦模块内的值导出后,在外部如何改变都不会影响模块内部,同样模块内部对这个值如何改变也不会影响模块外部,犹如“嫁出去的女儿,泼出去的水”

    End of the article,share a word with you!
    所谓的焦虑和迷茫,其实是身体懒惰和脑子勤奋的矛盾。I'm on my way!
  • 相关阅读:
    docker安装和hub
    sql获取时间、年龄
    在eclipse中配置Tomcat时,出现“Cannot create a server using the selected type”的错误。
    ajax简单做html查询删除(鲜花)
    java使用jsp建立项目+视频
    java根据数据库自动生成代码
    java连接数据库增删改查公共方法
    制作二维码java
    富文本编译器
    java字符串类型和时间类型的转换
  • 原文地址:https://www.cnblogs.com/zhaojian-08/p/14377815.html
Copyright © 2020-2023  润新知