AlloyRenderingEngine 开门大吉

In 未分类 on 2015年02月28日 by TAT.dnt view: 6,917

快速入口

不读文章可以直接拐向这里：

github:https://github.com/AlloyTeam/AlloyGameEngine

开门大吉

每次输入 kmdj 输入法自动提示【开门大吉】，输入 kmdjs 提示【开幕倒计时】，所以说 kmdjs 不仅仅是满满的血腥味
(kill all module define lib/framework, kill amd and cmd)，还有着美好的寓意。
一定要提 kmdjs 是因为 AlloyRenderingEngine 是基于 kmdjs 进行模块化开发（其实使用 kmdjs 已经没有模块的概念了），只要 class 和 namespace。
kmdjs 的核心的核心就是｛｝，class 全部挂在｛｝上。｛｝属于 namespace。所以很自然而然得轻松实现循环依赖。当然 kmdjs 还有很多优点，如：

支持依赖可视
支持循环依赖
支持命名重复
支持压缩打包
支持代码美化
支持远程加载
支持延迟加载
支持模块共享
支持平铺依赖
支持断点调试
支持独立打包
支持一键下载

github:https://github.com/kmdjs/kmdjs

再造轮子

看过一些 flash 团队的 html5 开源项目，也读了读很多 opengl 转 webgl 的工程师的游戏引擎教程，他们视野够广，图形方面经验也很丰富，
但是项目的组织架构千奇百怪，一个人一个花样，一个团队一个花样。所以，kmdjs 要出手了（当然也可以认为又多了一个新花样，
当至少是我觉得很满意、很清晰简洁的花样），去组织每一行没有归宿感的 js 代码。

目录结构

先看顶级目录结构

are

再看 build 里的目录结构

are

其中 main.js：

kmdjs.config({

name: "BuildARE",

baseUrl: "../src",

classes: [

{ name: "ARE.DisplayObject", url: "are/display" },

{ name: "ARE.Bitmap", url: "are/display" },

{ name: "ARE.Sprite", url: "are/display" },

{ name: "ARE.Stage", url: "are/display" },

{ name: "ARE.Shape", url: "are/display" },

{ name: "ARE.Container", url: "are/display" },

{ name: "ARE.Txt", url: "are/display" },

{ name: "ARE.Matrix2D", url: "are/util" },

{ name: "ARE.Loader", url: "are/util" },

{ name: "ARE.UID", url: "are/util" },

{ name: "ARE.CanvasRenderer", url: "are/renderer" },

{ name: "ARE.WebGLRenderer", url: "are/renderer" },

{ name: "ARE.GLMatrix", url: "are/util" },

{ name: "ARE.RAF", url: "are/util" },

{ name: "ARE.FPS", url: "are/util" },

{ name: "ARE.Particle", url: "are/display" },

{ name: "ARE.Util", url: "are/util" },

{ name: "ARE.Vector2", url: "are/util" },

{ name: "ARE.ParticleSystem", url: "are/display" }

]

});

define("Main", ["ARE"], {

ctor: function () {

this instanceof DisplayObject;

this instanceof Bitmap;

this instanceof Sprite;

this instanceof Stage;

this instanceof Shape;

this instanceof Container;

this instanceof Txt;

this instanceof Matrix2D;

this instanceof Loader;

this instanceof UID;

this instanceof CanvasRenderer;

this instanceof WebGLRenderer;

this instanceof GLMatrix;

this instanceof RAF;

this instanceof FPS;

this instanceof Particle;

this instanceof Util;

this instanceof Vector2;

this instanceof ParticleSystem;

}

})

ctor 是 Main 的构造函数，也是唯一一个会自动去 new 的构造函数，其余文件里面 difine 的 class 都需要自行去 new 才能执行。
ctor 里面的一大堆 instanceof 代码主要是为了产生依赖，所以需要合并提取的 class 都需要写进去。
最后直接打开 index 就能导出代码。

且看导出后的 are.js 的最后几行：

if (typeof module != 'undefined' && module.exports && this.module !== module) {

module.exports = ARE

}

else if (typeof define === 'function' && define.amd) {

define(ARE)

}

else {

win.ARE = ARE

};

这样的话，你就可以随意码了，比如：

var stage = new ARE.Stage("#ourCanvas", localStorage.webgl == "1");

var txt = new ARE.Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

为了避免打点，js 工程师一般这么干：

with (ARE) {

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

}

(function (Stage, Txt) {

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

})(ARE.Stage, ARE.Txt)

(function (ARE) {

var Stage = ARE.Stage, Txt = ARE.Txt;

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

})(ARE)

require(["./ARE"], function (ARE) {

var Stage = ARE.Stage, Txt = ARE.Txt;

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

})

define(function (require) {

var ARE = require("./ARE");

var Stage = ARE.Stage, Txt = ARE.Txt;

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

})

终于知道 js 的世界有多混乱了吧？！
写一段程序需要频繁打点是不对的，一是慢，二是麻烦。js 工程师为了避免打点几乎绞尽脑汁。
上面是避免打点的一些手段，如果使用 kmdjs，妈妈再也不用担心打点了：

define("Main", ["ARE"], {

ctor: function () {

var stage = new Stage("#ourCanvas");

var txt = new Txt({

txt: "Alloy Rendering Engine",

fontSize: 25,

fontFamily: "arial"

});

stage.add(txt);

}

})

这篇主要讲了下目录结构以及 kmdjs 在 are 中的作用，还有 are 的 build 工具的使用以及模块化的看法，确切说还没有进入主题，甚至跑题，
但是非常重要，待续。

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2015/02/alloyrenderingengine-ru-men-xi-lie-yi-kai-men-da-ji/

分享到:

123 2015 年 3 月 6 日

12345

回复
SinChan 2015 年 3 月 5 日

怎么感觉和 require.js 那么的相似？

回复
- dntzhang 2015 年 3 月 8 日
  
  完全不一样啊！requirejs/seajs/xxjs 都 one module one file, kmdjs 是 one class one file，粒度更细，更强大。
  
  回复
  - Oscar 2015 年 3 月 11 日
    
    跟 requirejs 本質上是一樣的，每個文件放 module 還是 class 完全是你寫代碼時怎麼組織項目結構的問題
    
    回复
    - dntzhang 2015 年 3 月 12 日
      
      本质不一样，kmdjs 更加细粒度，而且可以抽取出若干个 class 或者 namespace 转成 amd/cmjs/window 的模块使用
      而且 kmdjs 只需要浏览环境就可以干许多工程化的事情，还有就是 kmdjs 可以通过 define 实现继承，
      还有就是 kmdjs 完美支持循环依赖，还有就是 kmdjs 可以在 js 运行前暴露 js 的若干问题，而不是运行后，
      甚至可以用于检查代码质量，还有就是………
      
      回复
J.Chen 2015 年 3 月 3 日

说真的，我看了你们 Github 上面那么多废弃的项目，真的不敢 Fork，也不敢用。

回复
- 路人甲 2015 年 3 月 5 日
  
  alloy 系列一直会更新
  
  回复
06wj 2015 年 3 月 2 日

打点是神马。。

回复
- dntzhang 2015 年 3 月 2 日
  
  打点就是访问｛｝下的 class 啊，需要打点才能出来啊。
  
  回复
- dntzhang 2015 年 3 月 2 日
  
  比如要使用 Txt, 需要 ARE.Txt
  
  回复

AlloyTeam

AlloyTeam

快速入口

开门大吉

再造轮子

目录结构

Next

123 2015 年 3 月 6 日

SinChan 2015 年 3 月 5 日

dntzhang 2015 年 3 月 8 日

Oscar 2015 年 3 月 11 日

dntzhang 2015 年 3 月 12 日

J.Chen 2015 年 3 月 3 日

路人甲 2015 年 3 月 5 日

06wj 2015 年 3 月 2 日

dntzhang 2015 年 3 月 2 日

dntzhang 2015 年 3 月 2 日

发表评论