您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

ThreeJS源码学习1

整体结构

    • 版本
    • 整体结构

版本

threejs版本
如图,我们使用的是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 = {})
	}
}
  1. 第一个参数this应该是全局对象window
  2. globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象(也就是全局对象自身)
  3. 最终这段开头代码最终结果可以通俗的理解为:exports=window.THREE={}

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进