你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
当耐特

AlloyRenderingEngine入门系列【一】:开门大吉 0个回复 专栏 @ 框架与库

当耐特 发布于 4 年前

快速入口

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

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);
    }
})

Next

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

等待第一条回复
登录后回复,如无账号,请使用邀请码注册