Lcg框架介绍

最新推荐文章于 2023-11-21 22:06:09 发布

wurichengn

最新推荐文章于 2023-11-21 22:06:09 发布

阅读量508

点赞数

分类专栏：框架相关文章标签： LcgJS 前端框架

框架相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在之前看了Cocos2d的新开发工具之后，我对模块化的概念理解有了很大的改变。再看看我之前做的框架，简直什么傻逼自定义标签啦。就连自己都无法优雅的使用框架算什么框架。所以在这之后我下定决心完全推翻之前的模式重新开发一个框架，一个符合我的模块化思想的框架。

关于Lcg.js框架

Lcg.js最初是我为了方便自己的开发，为我自己设计的模块化开发框架。在我看来框架不分好坏，只分是否合适，我将我心目中的开发模式称之为组件化开发模式。简单的说就是开发项目之前先开发组件，开发项目时对组件进行组合，最终合并为一个完整的体系。

这种感觉就好比我们现在要开一个咖啡厅，我们不是先开门，而是先把各种咖啡做好，在客人来的时候把他需要的咖啡给他。当然，程序里的内容不同于生活中存在资源的浪费。

如何使用新的Lcg.js框架

就和其他的框架一样，首先的自然是引入js文件<script type="text/javascript" src="js/lcg.js"></script>

接下来我们就可以开始使用Lcg.js了。

组件

组件是这个框架的核心部分，它把一个Dom结构封装成一个部分，在这个结构中只需要关心自己要完成的内容。组件中可以包含其他组件，这样可以把小组件组合起来组成一个大组件来作为整个系统的或系统部分的控制器。

在我们的咖啡厅中有着各种不同的咖啡，以及桌椅和杯子。每一个东西都是咖啡厅的一部分，它们只需要完成自己的工作，作为店长的我们只要能将它们合理的组合起来就可以让我们的咖啡厅开张。这里这些组成部分就好比组件。

那么我们如何使用组件呢？可以看看下面的代码:

HTML代码 <div lcg-module="coffee">{{proxy.name}}的价格是{{proxy.pice}}</div>

JS代码lcg.bind("coffee",{ model:{ name:"", pice:0 }, init:function(dom,proxy){ proxy.name = "猫屎咖啡"; proxy.pice = 20; } });

猫屎咖啡的价格是20

上面的内容就是最终的执行结果，Dom的属性lcg-module是表示该Dom要引用一个组件，属性值是对应的组件名。在内容中有使用双层花括号包含的内容，这样的内容属于动态内容，将会执行一段js代码来改变内容。动态内容中可以包含proxy(或者使用简称$p)的内容，这个是组件数据的一个代理，当组件代理数据发生变化，相应的内容也会随之变化。这里我们使用了代理数据中的name和pice。可以使用动态数据的位置只有文本和标签属性值。

在JS中我们定义了coffee组件，组件的内容是一个json数据。model是一个组件的数据结构以及初始值，在这里所包含的数据都可以加入代理进行使用并可以进行变化的帧听。init是每一个使用该组件的Dom都会执行的初始化方法，参数有三个,分别是Dom标签、proxy代理、以及根组件代理。至于根组件代理是什么我们之后会提到。这里我们修改了代理的内容，相应的实际Dom内容也随之改变了。

现在我们修改一下init的内容，让它随机显示我们一个咖啡的价格

init:function(dom,p){ var list = [ {name:"猫屎咖啡",pice:20}, {name:"拿铁咖啡",pice:18}, {name:"原味咖啡",pice:17}, {name:"牛奶咖啡",pice:22} ] var step = function(){ setTimeout(step,1000); var id = Math.floor(Math.random()*4); p.name = list[id].name; p.pice = list[id].pice; } step(); }

猫屎咖啡的价格是20

在上面的代码中我们每秒改变一次proxy代理的内容，相应的Dom结构里注册了代理的地方都会进行改变。这里的Dom结构就相当于是视图的控制，而js绑定的组件则是进行逻辑控制，proxy代理则进行数据的控制。这里只是组件最基本的使用，我后面会专门对组件的功能进行说明。

预制

如果说咖啡是一种组件的话，那当我们调出一种不错的口味的咖啡，把它单独作为一种咖啡，之后只进行细微的口味调整。这种特别的咖啡我们可以把它作为预制。

我们使用js开发出组件后，再为其配上合适的Dom结构，就可以将其封装成一个预制。例如下面的代码:

<div lcg-module="coffee"> <a style="color:#f33">{{$p.name}}</a> 的价格为 <a style="color:#33f">{{$p.pice}}</a> </div>

猫屎咖啡的价格为 20

我们首先还是使用我们之前定义的coffee组件，并搭建一个合适的Dom结构。接下来我们为我们的组件再增加一个参数:轮播频率，以此控制轮播的速度

lcg.bind("coffee",{ model:{ name:"aa", pice:0, step:800 }, init:function(dom,p){ var list = [ {name:"猫屎咖啡",pice:20}, {name:"拿铁咖啡",pice:18}, {name:"原味咖啡",pice:17}, {name:"牛奶咖啡",pice:22} ] var step = function(){ setTimeout(step,p.step); var id = Math.floor(Math.random()*4); p.name = list[id].name; p.pice = list[id].pice; } step(); } });

牛奶咖啡的价格为 22

我们在model中加入了新的参数step来控制播放速度，在循环中以此作为轮播间隔。现在我们把定义好的内容做成预制并使用。

<div lcg-module="coffee2" lcg-prefab="coffee"> <a style="color:#f33">{{$p.name}}</a> 的价格为 <a style="color:#33f">{{$p.pice}}</a> </div> <lcg-prefab type="coffee" values="{step:50}"></lcg-prefab> <lcg-prefab type="coffee" values="{step:100}"></lcg-prefab> <lcg-prefab type="coffee" values="{step:200}"></lcg-prefab> <lcg-prefab type="coffee" values="{step:400}"></lcg-prefab> <lcg-prefab type="coffee"></lcg-prefab>

拿铁咖啡的价格为 18

猫屎咖啡的价格为 20

拿铁咖啡的价格为 18

原味咖啡的价格为 17

牛奶咖啡的价格为 22

我们给一个绑定了组件的标签添加一个lcg-prefab属性就可以将一个标签定义为预制，当标签被定义为预制的时候它将不会再出现在Dom结构中，它只是作为一个模板一样的存在。我们可以通过lcg-prefab标签来使用它，其中type属性是要使用的预制名， values属性是使用的预制的参数，数值将覆盖相应组件代理的默认值。

这是预制最基本的用法，在后续的内容中我会继续对这些概念进行说明。