大型网站建设兴田德润专业,阿里云wordpress在哪里设置,仿cnzz 网站 源码,软件开发学校什么是commonjs规范 commonjs是一种模块化规范#xff08;nodejs的默认模块化规范#xff0c;新版的nodejs已经支持es6的模块化#xff0c;但它默认任然使用的是commonjs#xff09;#xff0c;通俗的说它将代码分割成了一个一个的模块#xff0c;让不同的模块拥有自己独…什么是commonjs规范 commonjs是一种模块化规范nodejs的默认模块化规范新版的nodejs已经支持es6的模块化但它默认任然使用的是commonjs通俗的说它将代码分割成了一个一个的模块让不同的模块拥有自己独立的作用域类似命名空间的隔断在不同的模块中实现了重复命名的效果同时支持模块的导入导出让模块与模块之间可以相互调用实现代码的复用。 tips模块化可以让代码分离开和减少命名冲突问题便于维护和开发 模块化的核心导入导出作用域隔离 commonjs的导入导出
作为模块最明显的特征就是支持导入导出在commonjs中使用requiremodule.exportsexports来导入和导出。
const obj {name: a,desc:这是a模块
}module.exports objconst obj {name: b,desc: 这是b模块
}module.exports obj;
// 导入模块
const a require(./a)
const b require(./b)console.log(a)
console.log(b)
以上是abindex模块,一个js文件就是一个模块在ab模块中各自有一个obj对象导出这里就实现了模块的命名分割在不同的模块使用声明同名的变量名。然后在index中导入并使用 可以看到成功的拿到了各自模块中的obj对象。 这就是commonjs的基本使用接下来分析一下它的模块化原理 commonjs的模块化原理
为什么可以在模块js文件中直接使用require和module.exports,exports进行导入导出
从用法上看很明显require是一个函数它接受一个模块js文件路径返回这个模块的导出的值而module.export,export是一个对象或者变量它用来接受值作为模块的导出也就是说commonjs使用一个函数进行导入一个对象或者变量进行导出 tips这里分析一下导入和导出的细节 导入获取一个模块导出的值 导出将模块中的值暴露出去丢给导入 分析一下 这个过程和函数的返回调用非常相似在函数中 1.你可以返回一个值作为函数的返回值导出 2.同时可以调用函数获取到它的返回值导入 3.同时在不去调用函数的情况下外部是没有办法拿到函数内部的东西隔离 4.函数可以重复调用模块也可以重复导入 在commonjs中一个模块就是一个js文件同时一个模块也是一个函数到这里可能会有点疑惑这里我们直接在任意一个模块中打印argument
console.log( arguments)
在js函数中出来箭头函数外都有一个argument参数它包含了这个函数调用时传入的参数 可以看到一共有5个参数这样可以还是不够清晰在打印一下argument的callee属性
const obj {name: a,desc:这是a模块
}module.exports obj// arguments.callee 函数本身
console.log( arguments.callee.toString()) 这下可以明显的看到在a模块的代码全都被放到了一个函数中这个函数有5个参数exports, require, module, __filename, __dirname这就是可以直接才模块中直接使用exports, require, module导入导出的原因。
所以在commonjs规范中所以的js文件都作为模块而对每一个js文件套上一层函数是实现模块的原理在不同的模块函数中由于没有互相调用这个顶层函数所以互相不能够访问到内部的数据。
到这里可以总结一下commonjs的原理了 commonjs是通过给每个js文件‘外套’一层函数实现的模块化即通过参数来导入导出函数间作用域的隔断函数的重复调用但是这种模块化是基于运行时的也就是说虽然编译时外套了一层函数但代码运行的时候才会进行导入导出这很好理解每个模块都是函数调用模块也是在模块内调用的函数运行了在能执行到导读导出的位置将导出的值封装再对象中 以上就是commonjs规范的模块化的原理下面介绍一下有关commonjs的细节问题 和es6的module模块化规范的区别
这主要从以下几个方面区分 1.ESmodule是通过importexportexport default 进行导入导出的 2.ESmodule是官方的规范浏览器和node环境下都实现了对它的支持 3.ESmodule的模块化是基于编译时在代码还没有执行时就已经进行了模块的导入导出输出对应的接口这是基于底层实现的 上面的第2点中commonjs只支持在node环境下直接使用浏览器种需要通过Babel进行转译才能使用而ESmodule要在浏览器‘type module’ 的script标签node环境下在package.json文件中配置typemodule字段就可以使用ESmodule的规范默认是type:commonjs ESMCJS导入导出importexport defaultexportrequiremodule.exportexports实现基于编译时基于运行时 有关ESmodule的使用可以参考js模块(module)和导入导出importexport_js import module-CSDN博客
导出的优先级
使用commonjs规范的导入导出时明显注意到导入只有require而导出可以使用exports和module.exports;如果同时存在这两个导出最终会是什么结果呢
const obj {name: a,desc:这是a模块
}// module.exports obj
exports.desc obj.desc;
exports.name obj.name;// arguments.callee 函数本身
// console.log( arguments.callee.toString())
const obj {name: b,desc: 这是b模块
}module.exports obj;const a require(./a)console.log(a); // { name: a, desc: 这是a模块 } a模块使用exports导出然后在b模块导入a并运行b.js可以看到结果和module.exports的导出方法是一样的都是将值赋给对象导出
如果同时存在module.export和exports导出最终会以module.exports为准因为在commonjs实现的require函数中最终返回的是module.exports ,在一个模块中this和export module.exports的优先级关系module.exports---exportsthis
console.log(this,exports,module.exports)this.val this;
exports.val exports;
module.exports {val:module.exports} ;console.log(this,exports,module.exports) 可以看到最开始module.exportsexports this都是一个空对象可以去改属性但是不能去修改这个对象否则导入会产生问题因为this和exports是指向的同一个对象所以exports的赋值覆盖了this
console.log(this,exports,module.exports)exports.val exports;
this.val this;
module.exports {val:module.exports} ;console.log(this,exports,module.exports) 颠倒一下顺序很容易就能看出来而module.exports不一样如果有单独导出值那么它会以导出的值为准若没有则会以this和exports的值为准
大致就是如果module.exports有值则返回module.exports否则会将thisexport的值赋值给module.exports再返回module.exports 下面测试一下导入的结果
index.js
exports.val exports;
this.val this;
module.exports {val:module.exports} ;b.js const index require(./index)console.log(index); index.js exports.val exports;
this.val this;
// module.exports {val:module.exports} ;
b.js const index require(./index)console.log(index); 可以看到最终就是区分有没有给module.exports赋值有的话以module.exports为准没有的话吧thisexportsthis和exports是同一个对象,this export的值赋给module.exports再以module.exports为准
