早期Cocos组件化思想的框架，拿出来祭奠一下

前言

   不要被这牛逼的标题吓到，通俗的讲就是当时在设计这款框架的时候Cocos大家庭中还没有CocosCreator编辑器, 有的小伙伴可能想问有没有现在的Creator牛逼,我可以很负责任的说没有, 毕竟这个框架先于Creator诞生的, 但我仍然还可以很负责任的说我当时在编写这款框架的时候绝对的用心并且对原有的引擎做了一定量的定制改造，结合了Unity组件化思想，结合了NodeJs的事件管理机制, 里面的一些设计思想对我至今都很受益。

框架预览

框架简介【Fdt】Foundation的缩写

支持模块儿化开发, 避免全局命名冲突、易于维护。
组件化开发, 能像U3D一样为某个节点添加组件。
提供了新的事件系统, 可以非常容易的绑定类的方法, 方便好用。
一个网络管理器
一个数据中心
一个完整的UI管理系统

引擎修改前后对比

脚本加载流程改造

   代码加载流程遵循模块化思想在CommonJs方式下做了一定量的封装改造,重写了require方法改为了include加载流程,所有的代码单元只需要__greturn包装器进行包装即可实现加载, 使用起来及其方便。

在项目入口app.js头部添加

require("src/fdt/Init.js")
include("src/FDTApp.js")

显示UI逻辑

this.uiMgr.push(UIP.Main);

UIP定义如下

__greturn = function (module) {
   UIP = {
      Main : CreateUIP("res/Main.json", "src/ui/UIMain.js")
   }
}

UIMain.js如下:

__greturn = function (module) {
    var UIMain = UIBehaviour.extend("UIMain", {

      awake: function () {
        /* 支持了节点可以挂载脚本, 这在当时cocos时代是没有的哦 */
        this.node.findNode("Button_1").addComp("test/MoveH.js");
        /* Node扩展了onClick方法 */
        this.node.findNode("Button_1").onClick(this.changeClick, this);
        /* 对scrollView全方位的重写支持组件的方式并支持分页、回收缓存 */
        let c = this.contentView.addComp("fdt/comctrl/GridList.js", {
            itemPrefab: { path: "testScrollview.json", script: "test/UIPTestScrollView.js" },
            itemWidth: 400,
            itemHeight: 30,
            column: 1,
            row: 10,
            spacing: { left: 0, right: 0, top: 0, bottom: 0 },
            dir: ccui.ScrollView.DIR_VERTICAL,
            isBounceEnabled: false,
            scrollBarEnabled: false,
            layoutCallback: function (st) {
                st.sort(function (a, b) { return a.id > b.id; });
            }
        });
        /* 创建10页 */
        for (var k = 1; k <= 10; ++k) {
            c.addPage(k, true);
        }
        c.setCurPage(1);
        c.selectItem(1, 0);
     },

     onInit: function () {
        cc.log('onInit......')
     },

     onUnInit: function () {
        cc.log('onUnInit......')
     },

     onEnable: function () {
        cc.log('onEnable......')
     },

     onDisable: function () {
        cc.log('onDisable......')
     },

     onDestroy: function () {
        cc.log('onDestroy......')
     }
  });

  module.exports = UIMain;
}

效果预览

下载链接

Fdt