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規範，須要在服務器端使用工具進行處理，才能夠在瀏覽器中運行

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。