createjs进阶—createjs的OOP


OOP大家都知道就是面向对象编程,对于编程方面,特别是大项目,可以说是必不可少的。可以用它来降低开发难度,提高代码的重用率等等。在createjs里可以用它给的api来达到OOP。

无论你是从as转到js,还是本来就是写js的,学会在createjs里OOP都是很必要的,废话不多说,我直接讲下怎么在createjs里OOP。

(不懂OOP的请先了解OOP后再看本教程)

 

1.类

一般语言(我先拿as作为例子),生成一个类一般是

public class MainView 然后调用的是 new MainView()这样子,在js里没有类这个概念,但是我们可以模仿,写一个差不多的。

我们先写出类:

function Map(){
   this.name = "中国"
}
var map = new Map();
console.log(map.name)

可以看到我们就输出了地图,这里的Map相当于构造函数

2.继承
刚才没有用到createjs的api 继承就需要用到了。

function Map(){
   this.name = "地图"
}
var map = new Map();
console.log(map.name);
 
var cls = {};
 
(function() {
   function ChinaMap(){
       this.Map_constructor();
       this.from = "中国";
   }
   var p = createjs.extend(ChinaMap,Map);
   cls.ChinaMap = createjs.promote(ChinaMap, "Map");
}());
var chinaMap = new cls.ChinaMap();
 
console.log(chinaMap.name,chinaMap.from);

输出出来是 地图 中国

这里的createjs.extend 相当于 支持OOP语言里的extends
而我定义的cls相当于是我保存类的一个地方
createjs.promote就理解成生成一个方法使this.Map_constructor();可以调用父类的构造函数

此外还有一种定义属性方法的方法

function Map(){
   this.name = "地图"
}
var map = new Map();
console.log(map.name);
 
var cls = {};
 
(function() {
   function ChinaMap(){
       this.Map_constructor();
       this.from = "中国";
   }
   var p = createjs.extend(ChinaMap,Map);
   p.traceFrom = function traceFrom()
   {
       console.log(this.from);
   }
   cls.ChinaMap = createjs.promote(ChinaMap, "Map");
}());
var chinaMap = new cls.ChinaMap();
 
console.log(chinaMap.name,chinaMap.from);
chinaMap.traceFrom();

使用p来定义方法可以方便在构造之前重写,也就是重写过后父类的构造使用的方法也会被重写。
CC调出来的类不能继承,也不能重写。

平时写as的童鞋写显示类的时候通常会继承Sprite 而在createjs中可以选择继承Container,千万不要也继承Sprite flash as的sprite和createjs的sprite不是一种东西
大家上面还看到了一个(function() {}());这个格式的语法吧,这个东西干嘛用的呢,做过前端的童鞋肯定知道,它叫闭包。简单的来说吧,js的var是全局的也就是你在一个类里面var了一个变量,如果再另一个类里面也命名了同名的var变量前面那个会被覆盖掉,但是闭包了就不会,所以在createjs里写类必须闭包。平时写as3的童鞋肯定经常会在for循环里var变量在这里也需要闭包操作。

3.重写
重写的话直接重新定义属性或者方法就可以了

function Map(){
   this.name = "地图"
}
var map = new Map();
console.log(map.name);
 
var cls = {};
 
(function() {
   function ChinaMap(){
       this.Map_constructor();
       this.from = "中国";
   }
   var p = createjs.extend(ChinaMap,Map);
   p.traceFrom = function traceFrom()
   {
       console.log(this.from);
   }
   cls.ChinaMap = createjs.promote(ChinaMap, "Map");
}());
 
(function() {
   function AmericaMap(){
       this.Map_constructor();
       this.name = "美国地图";
   }
   var p = createjs.extend(AmericaMap,Map);
   cls.AmericaMap = createjs.promote(AmericaMap, "Map");
}());
 
var americaMap = new cls.AmericaMap();
console.log(americaMap.name);

4.公有私有
js 没有 public private protected 等控制属性方法权限的语句,所以在js里只能是约束,如果带_线的是私有的,比如_name,如果看到这个方法不要轻易在类外改动。(可能有些人会说在Map的方法体里面直接var 就是私有的 但是实际上这与其他语言里的private实际上意义是不一样的 比如观察表达式就什么都没有了 所以我不建议这么做 嘛反正公有私有这东西本来就是拿来约束的)。

5.静态属性 静态方法 静态类 多态
这些大家自行百度吧,createjs并没有给出专门的api。


上一篇 下一篇