02 Commonjs规范基础使用详解

时间 2020-07-15

标签 commonjs 规范基础使用详解繁體版

原文原文链接

Commonjs规范

1.1 commonjs规范说明

每个js文件就是一个模块，文章中我说的模块能够等价为一个js文件html

node应用由模块组成，采用的commonjs模块规范。每个js文件就是一个模块，拥有本身独立的做用域，变量，以及方法等，对其余的模块都不可见。node

CommonJS规范规定，每一个模块内部，module变量表明当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。require方法用于加载模块。浏览器

在服务器端：模块的加载和运行是同步的，意味着可能致使堵塞，速度慢服务器
在浏览器端：浏览器看不懂这种规范，服务器须要将模块编译打包，再发给浏览器函数

1.2 基本语法

关于模块的语法主要就是暴露模块和引入模块工具

1.21暴露模块

上面咱们说了，每一个模块对默认有一个module变量，这个变量表明当前模块；这个变量有exports属性ui

console.log(JSON.stringify(module)); // {exports,......}
console.log(typeof module);  // object
console.log(typeof module.exports) // object

咱们能够打开vs code，输入以上代码，运行；能够验证存在module对象和exports属性；且exports属性也指向一个对象code

exports对象会向外暴露，因此暴露模块使用 module.exportshtm

每一个js文件除了有一个默认的module变量，还有一个默认的exports变量，这个变量指向module.exports属性，因此也能够直接使用exports.x暴露模块对象

// example.js
var x = 5;
var add = function (x=0,y=0) {
  return x+y;
};
exports.x = x; // 就至关于module.exports.x = x;
module.exports.add = add;

1.22引入模块

module.exports属性表示当前模块对外输出的接口，其余文件加载该模块，实际上就是读取module.exports变量

// ex2.js
var example = require('./example.js');

console.log(example.x); // 5
console.log(example.add(5,6)); // 11

require函数至关于直接把example.js这个模块当中module.exports对象加载进来，而后返回这个对象，赋值给example变量

第三方的模块不须要写路径，直接写名字便可:

var path = require('path')

1.3问题

若是咱们建立一个html文件，引入这个js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commonjs规范</title>
</head>
<body>
    <script src="./ex2.js"></script>
</body>
</html>

会报错Uncaught ReferenceError: require is not defined，由于浏览器不理解这种规范

总结

每一个js文件都默认有一个module变量，该变量指向一个对象，这个对象有一个属性叫exports
每一个js文件都默认有一个exports变量，这个变量指向module.exports对象
require实际上就是加载别的js文件的module.exports对象进来，返回这个对象，而后咱们接受这个对象去使用
require加载本身写的模块时加路径，加载第三方模块时，能够直接使用名字
浏览器不理解Commonjs规范，须要在服务器端使用工具进行处理，才能够在浏览器中运行