Cocos2d带给我的灵感

最近因为一点游戏灵感就又到Cocos官网想看看Cocos2d-js的更新情况，然后发现了官网又出了新的游戏开发工具Cocos creator。 看了一下介绍发现是使用cocos2d-js来开发便觉得很激动。马上就下载来尝试并学习了基本用法。

关于使用感受

这个开发工具给我最大的冲击就是组件化，将所有功能性的东西做成组件给节点使用，拼装好的节点还可以作为模板使用。 是一种结构性很强的开发方式，有非常强的重用性。

不过可惜的是在使用时还是有一些Bug存在，体验并不是很完美。不过就凭借这种合适我的开发模式就足以让我对其心动。

一些灵感

使用了一段时间之后就萌生了将这种模式运用于前端的想法，虽然这在很多时候并没有太大的便捷性。 在我之前的lcg.js框架中，使用的是自定义标签进行功能封装，就好像函数一样来将功能组件化。 可是各个功能不能很自由的组合，如果是一些飞冲突性功能的话应该可以将多个功能自由的绑定在相同的标签上。 现在有一些基本的构思并开发了一个基本的功能模型:

lcg.addPart("clear-text",{
    init:function(){
        var list = this.dom.childNodes;
        for(var i = list.length-1;i >= 0;i--){
            if(list[i].nodeName == "#text")
                this.dom.removeChild(list[i]);
        }
    }
});

以上是暂时设计的一种部件的模型，完成的功能是清除节点中的文本子节点。可以防止一些布局中有麻烦的空隙。 通过将各种各样的功能放在一个json中，让各个节点可以自由组合功能。下面也是一种部件定义。

lcg.addPart("base-header",{
    args:{
        width:1000,
        dir:"top",
        "margin-h":0,
        "margin-v":0
    },
    init:function(){
        var item = this.dom.querySelector("*");
        if(item)
            item.style["margin-left"] = "calc(50% - "+this["width"]/2+"px)";
        lcg.part(this.dom,"loc-float",this.args);
    }
});

上面是编写的一个基本的顶部栏的功能定义，args是该部件需要的参数及其初值。 初始化时通过第一个节点的margin-left来移动容器的内容，使得其内容如同指定宽度居中。 当然，这种用法需要CSS3的支持，小朋友们不要学。然后通过js来为dom添加另一个部件， 部件的功能可以通过其他部件的功能来完成，这样也会更加结构化。

下面是在HTML中对部件的使用

<div style="background-color:#ccc;" 
    parts="base-header:{'margin-v':60,'margin-h':50,width:900};
        scrool-hide:{min:200,rotate:450,time:500};
        clear-text">
    <a>aaaa</a>
    <a>vvvv</a>
    <a>bbbb</a>
</div>

如上，通过给标签设置一个parts属性来引用，内部类似style那样填多个参数，好在html属性可以换行，整个编码结构比较整齐。 上面的例子中标签使用了三个部件，并且base-header部件也成功引入了loc-float部件的功能。基本的逻辑完成了， 再进行一些完善就会将该内容更新到框架中。

一些遗憾

其实在最开始的构思当中是想将这样的思想主要运用到样式当中去的，可是在开发的过程中发现实际上CSS的功能和效率已经非常好了。 最重要的一点是通过行内样式无法使用CSS中的选择器，这样如同伪类、层级关系等就完全只能通过JS控制。 这样不管是对开发还是对执行效率都是不利的。

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 : http://evillcg.com/blog/item/1462702678/