AlloyRenderingEngine开门大吉

快速入口

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

github:https://github.com/AlloyTeam/AlloyRenderingEngine

website:http://alloyteam.github.io/AlloyRenderingEngine/

api:http://alloyteam.github.io/AlloyRenderingEngine/doc/

开门大吉

每次输入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代码。

目录结构

先看顶级目录结构

再看build里的目录结构

其中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工具的使用以及模块化的看法，确切说还没有进入主题，甚至跑题，

但是非常重要，待续。