Lcg框架组件说明

看过Lcg.js框架介绍的大家应该了解到该框架的基本用法了，这是一个并没有封装什么功能性内容的框架。 它只是一个让开发者快速开发组件的框架，并附带着组件之间组合的结构。

今天我们来说一说这里的核心内容module，它使用js进行定义，并让Dom结构使用。

proxy代理

在module中的一个核心概念就是proxy，它是一个数据代理，它的所有内容都会被帧听， 当发生改变时会改变Dom结构中所有引入过相应数据的地方，它代表一个组件的数据层。proxy的结构由model定义。

<div lcg-module="test" style="color:#f00;">{{$p.name}}</div>

lcg.bind("test",{
    model:{
        name:"老城哥"
    }
})

老城哥

如上，我们通过在Dom结构中使用双花括号使用动态数据，并通过$p来引用name数据。 model中给出了name的默认值，在不进行设置的时候就会默认为该值。 这是proxy最基本的用法，现在我们增加在属性中的引用。

<div lcg-module="test" style="color:{{$p.style.color}};font-size:{{$p.style.size}}">{{$p.name}}</div>

lcg.bind("test",{
    model:{
        name:"老城哥",
        style:{
            color:"#00f",
            size:"30px"
        }
    }
})

老城哥

上面的例子中我们加入了新的内容，给属性加入了帧听。使得属性也可以随着proxy变化。

注意:model结构可以对多层object结构进行帧听，但是无法对数组进行帧听，在后面的预制表将说到数组。

init

init是每个相应Dom初始化时执行的方法，传递进来的参数有Dom、proxy、rootProxy。这个在上次的内容中有提到。 出来init外的其他方法可以通过this.dom和this.proxy来进行访问。

在init中我们可以对数据或Dom进行操作。比如下面这样

<div lcg-module="test2" style="color:#f00;">{{$p.name}}</div>

lcg.bind("test2",{
    model:{
        name:"老城哥"
    },
    init:function(dom,p){
        dom.onclick=function(){
            p.name+="-";
        }
    }
})

老城哥

现在我们为组件加入了一个点击事件，点击后就会在名字的末尾加一个"-"号。

层级组件

组件中可以使用其他组件，使用起来也很简单。

<div lcg-module="test3">
    {{$p.name}}击杀了
    <a style="margin-left:20px;" lcg-module-key="kd" lcg-module="test2">{{$p.kd.name}}</a>
</div>

lcg.bind("test3",{
    model:{
        name:"XX"
    }
})

XX击杀了老城哥

上面的例子在test3组件中加入了test2组件。并且使用test2组件的Dom结构增加了一个lcg-module-key属性。 这个属性表示通过什么来引用这个自己组件。在test2组件所在Dom中我们使用$p.kd.name来使用子组件的内容， 这里的kd就是lcg-module-key里面的值。通过它我们可以实现父子组件之间的层级引用。 不过这里是在Dom结构中使用，在定义组件的时候怎么进行跨级操作呢？

<div lcg-module="parent">
    {{$p.name}}击杀了<a style="margin-left:20px;" lcg-module-key="kd" lcg-module="child">{{$p.kd.name}}</a>
</div>

lcg.bind("parent",{
    model:{
        name:"XX"
    }
});

lcg.bind("child",{
    model:{
        name:"老城哥"
    },
    init:function(dom,p,root){
        root.name = "开心哒";
    }
});

开心哒击杀了老城哥

上面的代码使用了init的第三个参数，rootproxy。通过它可以获取到在当前结构中最外层的组件。

组件的继承

如果多个组件只是部分功能上存在差异或者某个组件要基于另一个组件的功能进行扩展的时候就可以用到组件的继承。

<div lcg-module="lcg">老城哥正在:{{$p.runing}}</div>
<div lcg-module="xl">小蓝正在:{{$p.runing}}</div>

lcg.bind("people",{
    model:{
        runing:""
    },
    init:function(){
        this.run();
    }
});

lcg.bind("lcg",{
    extend:"people",
    run:function(){
        this.proxy.runing = "吃着火锅唱着歌";
    }
});

lcg.bind("xl",{
    extend:"people",
    run:function(){
        this.proxy.runing = "听着老城哥唱歌";
    }
});

老城哥正在:吃着火锅唱着歌

小蓝正在:听着老城哥唱歌

我们定义了一个people组件代表人类，人类总是要做事情的，为了把做事情表达出来我们加入了runing数据。 然后我们创建了lcg和xl两个不同的人继承人类。他们也会拥有人类的所有内容结构(model)以及其他方法， init也是继承自人类，所以会自动执行init方法。在init方法中调用了run使得人类创建时就会开始做事。 我们给不同的人类设置不同的做事方式就完成了继承模式。

重构

有的时候我们继承一个父组件，希望能够改变或改善父组件的一个方法，这时我们就要了解一下重构。

<div lcg-module="lcg-coding">老城哥正在:{{$p.runing}}</div>

lcg.bind("lcg-coding",{
    extend:"lcg",
    init:function(dom,p,root){
        this._parent.init(dom,p,root);
        p.runing += "并且还在写代码";
    }
})

老城哥正在:吃着火锅唱着歌并且还在写代码

这回我们创建了一个编码中的老城哥，他可以一边做事一边写代码。我们首先让他继承自lcg， 然后重构他的init方法，在init方法中合适的位置执行父类的init方法。在父类的init方法执行完成之后再让他写代码。 当然，我们也可以不执行或执行多次父类的相应方法来进行重构。

结束语

组件module的功能已经介绍的差不多了，不过这依然只是这个框架的基本功能，组件和预制之间的结合才是这个框架最主要的部分。 依然希望这个框架可以适合大家。最近在试着开发sublime text的插件不过因为接触python不多所以得开始学习python才行了

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