转载

AlloyRenderingEngine继承

写在前面

不读文章，只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine

然后star一下，多谢支持:)。

前几天发了篇向ES6靠齐的Class.js，当初jr为什么不把父类的实例暴露给子类，其原因还是为了延续原型继承的习惯，子类重写就会覆盖掉父类的方法，父类的方法就会丢，如下面的代码，就堆栈溢出了：

var Parent = function () { } Parent.prototype.a = function () { }  var Child = function () { } Child.prototype = new Parent(); Child.prototype.a = function () {     this.a(); }  var child = new Child(); child.a();

而jr的Class.js可以让你通过this._super访问父类同类方法，修复了原型继承同名无法访问父类的弱点，当然也可以hack一下，先赋给变量或者某个属性。如：

var Parent = function () { } Parent.prototype.a = function () {  alert(1) } var Child = function () { } Child.prototype = new Parent(); Child.prototype.parentA = Child.prototype.a; Child.prototype.a = function () {  this.parentA(); } var child = new Child(); child.a();

但是这样的话，代码不就很丑陋了吗！？

所以AlloyRenderingEngine选择使用了JR的Class.js，然后在其基础之上扩展了静态方法和属性，以及 静态构造函数 。

所以就变成了这样：

var Person = Class.extend({   statics:{    //静态构造函数会直接被Class.js执行    ctor:function(){       //这里的this相当于Person    },    Version:"1.0.0",    GetVersion:function(){      return Person.Version;    }   },   ctor: function(isDancing){     this.dancing = isDancing;   },   dance: function(){     return this.dancing;   } });  var Ninja = Person.extend({   ctor: function(){     this._super( false );   },   dance: function(){     // Call the inherited version of dance()     return this._super();   },   swingSword: function(){     return true;   } });

AlloyRenderingEngine继承

AlloyRenderingEngine内置了Container对象，用来管理元素，Stage对象也是继承自Container对象，还有，Container对象继承自DisplayObject，所以Container对象也能够设置scale、x、y、alpha、rotation、compositeOperation…等，设置的属性能够叠加到子元素上。

x、y、rotation、scaleX、scaleY、skewX、skewY…等直接矩阵叠加，也就是子元素的呈现跟父容器、父容器的父容器、父容器的父容器的父容器…都有关系；

其实alpha是乘法叠加(如：容器的透明度是0.5，容器内部的元素透明度为0.9，最后容器内部元素呈现的透明度就是0.45);；

compositeOperation先查找自己，自己没定义，再向上查找，直到找到定义了compositeOperation的，就使用该compositeOperation，有点类似决定定位元素找父容器的感觉。

很多情况下，我们需要继承Container对象来封装一些自定义的对象。

比如封装一个按钮：

var Button = Container.extend({  ctor: function (image) {   this._super();   this.bitmap = new Bitmap(image);   this.bitmap.originX = this.bitmap.originY = 0.5;   this.add(this.bitmap);   //鼠标指针的形状   this.cursor = "pointer";   this._bindEvent();  },  _bindEvent: function () {   this.onHover(function () {    this.scale = 1.1;   }, function () {    this.scale = 1.0;   })   this.onMouseDown(function () {    this.scale = 0.9;   })   this.onMouseUp(function () {    this.scale = 1.1;   })  } });

使用这个button就很方便了：

var  stage = new Stage("#ourCanvas"); var button = new Button("button.png"); button.x = 100; button.y = 100; button.onClick(function () {     console.log("你点击我了"); }) stage.add(button);

简单吧！