Javascript的一段代码,求大神能帮忙解释下这段代码的结构或者解释下全文中不同位置的t,e,n,s的关系

weixin_38359335 2018-06-13 07:32:14
!function(){
void 0===window.Gama&&(window.Gama={}),window.Gama.Skeleton=function t(e,n,s){
function r(i,a){
if(!n[i]){
if(!e[i]){
var u="function"==typeof require&&require;
if(!a&&u)
return u(i,!0);
if(o)
return o(i,!0);
var p=new Error("Cannot find module '"+i+"'");
throw p.code="MODULE_NOT_FOUND",p
}
var l=n[i]={exports:{}};
e[i][0].call(l.exports,function(t){var n=e[i][1][t];return r(n?n:t)},l,l.exports,t,e,n,s)
}
return n[i].exports
}
for(var o="function"==typeof require&&require,i=0;i<s.length;i++)
r(s[i]);
return r
}
({
1:[function(t,e,n){e.exports=t("./lib/skeleton.js")},{"./lib/skeleton.js":2}],
2:[function(t,e,n){
function s(t,e){
this.ele=new r(t),this.image=e.image,this.tpJSON=e.tpJSON,this.skJSON=e.skJSON,this.scale=e.scale||1,this.initRoot(),this.initStruct()}
var r=t("@ali/gama-node"),o=t("@ali/gama-domino"),i=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}}();
s.prototype.normalizeTransform=function(t){t.x=t.x*this.scale||0,t.y=t.y*this.scale||0,t.skX=t.skX||0,t.skY=t.skY||0},
s.prototype.initRoot=function(){
var t=this.skJSON.armature[0];
if(this.bone={},this.slot={},this.skins=[],this.animation={},t){
this.bone.root=t.bone.filter(function(t){return"root"===t.name})[0],
this.normalizeTransform(this.bone.root.transform),
t.bone.forEach(function(t){t.children=[],t.slot=[]});
for(var e;t.bone.length>0;){
e=t.bone.shift();
var n=e.parent;
void 0!=n&&(this.bone[n]?(this.bone[e.name]=e,e.parent=this.bone[n],this.normalizeTransform(e.transform),this.bone[n].children.push(e)):t.bone.push(e))
}
for(;t.slot.length>0;){
var s=t.slot.pop(),n=s.parent;
this.bone[n]&&(s.parent=this.bone[n],s.skins=[],this.bone[n].slot.push(s),this.slot[s.name]=s)
}
for(;t.skin[0].slot.length>0;){
var r=t.skin[0].slot.shift();
this.slot[r.name]&&(r.parent=this.slot[r.name],this.slot[r.name].skins.push(r))
}
for(;t.animation.length>0;){
var o=t.animation.pop(),i=o.bone;
for(o.bone={};i.length>0;){
for(var a=i.pop(),u=0;u<a.frame.length;u++)
this.normalizeTransform(a.frame[u].transform);
o.bone[a.name]=a
}
this.animation[o.name]=o
}
}
},
s.prototype.updateSlotStatus=function(t,e){
for(var n=[],s=t;s;)
n.push(s),s=s.parent;
for(t.domino.setTranslation(0,0);n.length>0;){
var r=n.pop();
if(r.transform){
var o=r.transform;
e&&r.animTransform&&(o=r.animTransform),t.domino.translate(o.x||0,o.y||0).rotate(o.skX/180*Math.PI||0)
}
}
},
s.prototype.initStruct=function(){
for(var t in this.slot)
if(this.slot.hasOwnProperty(t)){
var e=this.slot[t],n=r.create("div");
e.div=n,this.ele.append(n),n.width(0).height(0).css({position:"absolute",zIndex:e.z||0}),e.domino=new o(n.ele),this.updateSlotStatus(e);
for(var s=0;s<e.skins.length;s++){
var i=e.skins[s];
i.divs=[];
for(var a=0;a<i.display.length;a++){
var u=r.create("div");
i.parent.div.append(u);
var p=i.display[a];
this.normalizeTransform(p.transform),p.name=p.name.substr(p.name.lastIndexOf("/")+1);
var l=this.tpJSON.frames[p.name+".png"].frame,c=this.tpJSON.meta.width,h=this.tpJSON.meta.height,f=this.scale,m=l.w*f,d=l.h*f;
u.width(m).height(d).css({position:"absolute",backgroundImage:"url("+(this.image.src||this.image)+")",backgroundPosition:l.x*f+"px "+l.y*f+"px",backgroundSize:c*f+"px "+h*f+"px",marginLeft:-m/2+"px",marginTop:-d/2+"px"});
var y=p.transform,v=new o(u.ele);
v.translate(y.x,y.y).rotate(y.skX/180*Math.PI)
}
}
}
},
s.prototype.play=function(t,e){
function n(){
var t=Date.now(),u=(t-r)/s%o.duration;
for(var p in o.bone)
for(var l=o.bone[p].frame,c=u,h=0;h<l.length;h++){
if(!(c>l[h].duration)){
var f=l[h],m=l[h+1],d=c/f.duration;
a.bone[p].animTransform={x:(1-d)*f.transform.x+d*m.transform.x+a.bone[p].transform.x,y:(1-d)*f.transform.y+d*m.transform.y+a.bone[p].transform.y,skX:(1-d)*f.transform.skX+d*m.transform.skX+a.bone[p].transform.skX,skY:(1-d)*f.transform.skY+d*m.transform.skY+a.bone[p].transform.skY};
var y=a.bone[p].animTransform;isNaN(y.x)||isNaN(y.y)||isNaN(y.skX)||isNaN(y.skY);break
}
c-=l[h].duration
}
a.update(),a.toStop?(a.isPlaying=!1,a.toStop=!1,e.callback&&e.callback(),a.onStop&&a.onStop()):i(n)
}
if(this.isPlaying)
return this.onStop=this.play.bind(this,t,e),void this.stop();
e=e||{};
var s=1e3/24;
e.fps?s=1e3/e.fps:e.interval&&(s=e.interval);
var r=Date.now(),o=this.animation[t],a=this;
this.isPlaying=!0,n()
},
s.prototype.stop=function(){this.toStop=!0},
s.prototype.update=function(){for(var t in this.slot)this.slot.hasOwnProperty(t)&&this.updateSlotStatus(this.slot[t],!0)},
e.exports=s
},
{"@ali/gama-domino":3,"@ali/gama-node":20}
],
2:[function(t,e,n){arguments[4][11][0].apply(n,arguments)},
{"./node-base.js":21,"./node-class.js":22,"./node-css.js":23,"./node-size.js":24,"./node-transform.js":25,"./node-utils.js":26,dup:11}
]
},{},[1])(1)}();
...全文
2326 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
owenzhang 2020-03-12
  • 打赏
  • 举报
回复
呼叫大师,帮忙解惑。谢谢!
owenzhang 2020-03-11
  • 打赏
  • 举报
回复
请教大师下面这种是什么意思,能麻烦讲解下吗?谢谢!

({
1:[function(t,e,n){e.exports=t("./lib/skeleton.js")},{"./lib/skeleton.js":2}],
2:[function(t,e,n){
...
...
],
2:[function(t,e,n){arguments[4][11][0].apply(n,arguments)},
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
回复 1
引用 11 楼 weixin_38359335 的回复:
那么t 在递归使用的过程中代表什么呢,skeleton?
t是函数名,在这里可以当作一个变量看,变量t的值是一个函数,并赋值给Skeleton。 你的代码是压缩过的,t原本可能是一个有意义的名字,比如toDoSomething,由于它是局部有意义,对外部不可见,所以压缩的时候直接转成一个简短名字,减少字符数。 所以t呢,在它所在的作用域中就相当于Skeleton。
weixin_38359335 2018-06-15
  • 打赏
  • 举报
回复
那么t 在递归使用的过程中代表什么呢,skeleton?
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
回复
引用 9 楼 ambit_tsai 的回复:
给你翻译一下,就很好懂了

// void 0 === undefined
if(window.Gama === undefined){	// 若Gama在window中未定义
	// 往全局对象window中,添加一个名为Gama的空对象
	window.Gama = {};
}
// 对Gama对象的Skeleton方法赋值一个具名函数,该函数接收三个参数
window.Gama.Skeleton = function t(e,n,s){
	/* code */
};
上面代码就是原代码的白话版
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
回复 1
给你翻译一下,就很好懂了

// void 0 === undefined
if(window.Gama === undefined){	// 若Gama在window中未定义
	// 往全局对象window中,添加一个名为Gama的空对象
	window.Gama = {};
}
// 对Gama对象的Skeleton方法赋值一个具名函数,该函数接收三个参数
window.Gama.Skeleton = function t(e,n,s){
	/* code */
};
天际的海浪 2018-06-15
  • 打赏
  • 举报
回复
引用 11 楼 weixin_38359335 的回复:
那么t 在递归使用的过程中代表什么呢,skeleton?
当function关键字出现在行首(语句首),它是一条“语句”。 当function关键字不是出现在行首(语句首),它就是一条“函数表达式”。 t是函数表达式的函数名,t 和 Skeleton 是一样的值,都是存放着这个函数的引用地址。 函数表达式的函数名等同函数内的局部变量(函数声明语句的函数名等同全局变量),只能在函数内使用。方便函数自己调用自己,也就是递归
huwao 2018-06-14
  • 打赏
  • 举报
回复
void 0===window.Gama&&(window.Gama={}) 的意思是当window.Gama这个属性不存在时,就创建个window.Gama并赋值为一个空对象{} window.Gama.Skeleton=function t(e,n,s) 是为window.Gama对象添加一个名为Skeleton的方法。 t是方法的函数名,e,n,s是方法的参数,等同于局部变量。
qq_37096275 2018-06-14
  • 打赏
  • 举报
回复
javascript
qq_42460125 2018-06-14
  • 打赏
  • 举报
回复
javascript
天际的海浪 2018-06-13
  • 打赏
  • 举报
回复
引用 1 楼 weixin_38359335 的回复:
或者哪位大神先帮忙解读下这个函数的标题是什么意思: void 0===window.Gama&&(window.Gama={}),window.Gama.Skeleton=function t(e,n,s)
void 0===window.Gama&&(window.Gama={}) 的意思是当window.Gama这个属性不存在时,就创建个window.Gama并赋值为一个空对象{} window.Gama.Skeleton=function t(e,n,s) 是为window.Gama对象添加一个名为Skeleton的方法。t是方法的函数名(只能在函数内使用,一般用于函数递归调用),e,n,s是方法的参数,等同于局部变量
weixin_38359335 2018-06-13
  • 打赏
  • 举报
回复
或者哪位大神先帮忙解读下这个函数的标题是什么意思: void 0===window.Gama&&(window.Gama={}),window.Gama.Skeleton=function t(e,n,s)

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧