ThreeJS源码学习1

版本

如图，我们使用的是r122版本的库，控制台输出版本号显示”123dev“

整体结构

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.THREE = {}));
}(this, (function (exports) {
		//源码正文
 })));

打开three.js源码文件就可以看到上述代码，记录几个要点：

1. (function(){}())是一种立即执行函数的写法，就是不需要调用直接运行的意思
2. （this,(function (exports){})）中对应函数的两个参数,第二个参数是AMD规范写法，挂在define后面的封装模块，可参考JavaScript模块化编程
3. 接下来是函数主体花括号中的内容：本质上是在源码入口处的环境检测，目的是防止变量污染并且检测执行环境等。
   详细翻译一下：

//这是UMD写法，也就是集结了 CommonJs、CMD、AMD 的规范于一身
//exports：commomjs规范
//define：amd规范
//判断当前运行环境支持那种模块化规范
//先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
if(typeof exports === 'object' && typeof module !== 'undefined'{
factory(exports)
}else{
//判断是否存在define.amd属性，可判断当前的文件加载是否遵循AMD规范，然后执行对应的加载模式
	if(typeof define === 'function' && define.amd){
		define(['exports'], factory)
	}else{
	//如果既不是node环境，也不是amd环境，则
		global = typeof globalThis !== 'undefined' ? 
		globalThis : global ||self, factory(global.THREE = {})
	}
}

4. 第一个参数this应该是全局对象window
5. globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）
6. 最终这段开头代码最终结果可以通俗的理解为：exports=window.THREE={}