AlloyRenderingEngine开门大吉

2015-02-28 20:10 【当耐特】阅读(1367) 评论(0) 编辑收藏举报

快速入口

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

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代码。

目录结构

先看顶级目录结构

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工具的使用以及模块化的看法，确切说还没有进入主题，甚至跑题，
但是非常重要，待续。

刷新页面返回顶部

当耐特