公司上周举办了一次编程马拉松，时间为两天，我当然用了lufylegend.js，为了让代码看起来更整洁一些，尝试着用javascript写了一个小的mvc框架，并开发了一个简单的demo，由于时间太短，游戏只完成了预计的一小部分。
本次开发的游戏截图如下。
测试连接如下
http://lufylegend.com/demo/mvcsample/
很多人一定会说，js开发根本不需要什么mvc，用了就是给自己找麻烦。在这里，我不去讨论需不需要的问题，只是我个人感觉这次的开发使用了mvc模式之后，代码各个模块确实一目了然，维护和扩展都相对方便了许多，很适合大中型的开发，当然对于小程序而言，也确实没有使用mvc的必要。现在我将这个框架公开，并在这里简单说明一下它的用法，这个框架是我在很短的时间内完成的，所以一定存在很多不完善的地方，如果你有更好的想法，也欢迎提出来一起讨论。
一，命名沿用我在lufylegend.js引擎中的命名方式，我给这个框架命名为lmvc，框架已被加入到lufylegend.js的下载包。
二，使用前提本框架是我在lufylegend.js引擎的基础上完成的，所以使用它的话，你需要引入lufylegend.js引擎。
lufylegend.js引擎官网
http://lufylegend.com/lufylegend
lufylegend.js引擎在线api文档链接
http://lufylegend.com/lufylegend/api
三，特点动态加载文件，你可能会把所有js文件写到了一起，但是工程很大的时候，你的js文件也会很大，会影响页面的显示速度，lmvc不但可以动态加载图片，还可以动态加载js，一个页面，你每次只需要加载与它相关的文件即可。
四，使用方法首先配置引擎中各路径lmvc.js_path，lmvc.img_path，lmvc.mvc_path，lmvc.api_path，lmvc.sound_path。
如果需要提前读取一些图片的话，需要将读取完的数据赋值给lmvc.datalist，在后面使用lmvc框架读取图片的时候，会自动对lmvc.datalist进行监测，重复的图片会不再次读取。
最后，调用lmvc.init();就可以进入indexcontroller了。
每一个***controller,***model,***view是一个组，使用之前必须先读取，使用控制器的loadmvc函数，可以读取一组mvc。
一组mvc中可以互调，在控制器controller中，可以使用 控制器.model 来调用它的模型，使用 控制器.view 来调用它的视图。在模型model中,可以使用 模型.controller 来调用它的控制器，使用 模型.view 来调用它的视图。在视图view中,可以使用 模型.controller 来调用它的控制器，使用 模型.model 来调用它的模型。
1,控制器controller简而言之，一个控制器就是一个类文件。控制器必须放到controllers文件夹内，控制器的名字以controller结尾。
在控制器中，可以使用 this.model 来调用它的模型，使用 this.view 来调用它的视图。
控制器中的函数construct() 控制器初始化结束后会直接调用此函数，如果有想要在控制器初期化结束后运行的代码，可以写在construct函数内，控制器的construct函数，在模型的construct函数运行之后运行。
loadmvc(name,callback,lastclass) 读取一组mvc，name是控制器的名称中去除controller的部分；callback是回调函数，当mvc的三个文件读取完之后，会自动调用此函数；lastclass需要设定为当前对象this。
loadmvc使用举例：
function indexcontroller(){
base(this,mycontroller,[]);
}
indexcontroller.prototype.construct=function(){
var self = this;
self.loadmvc("logo",self.logoload);
};
indexcontroller.prototype.logoload=function(){
var self = this;
var logo = new logocontroller();
self.view.addchild(logo.view);
};
load : 控制器中的load对象用来读取各种文件，使用方法如下this.load.model(names,callback) 读取一个或者多个模型。
this.load.view(names,callback) 读取一个或者多个视图。
this.load.library(names,callback) 读取一个或者多个外部类库。
this.load.helper(names,callback) 读取一个或者多个辅助函数文件。
this.load.image(loaddata,callback) 读取多张图片。
load.model和load.view一般是不用的，但是在一个控制器中要想使用另一组的模型和视图的时候，就需要个别读取了。
load.library的使用案例
function gamecontroller(){
base(this,mycontroller,[]);
}
gamecontroller.prototype.construct=function(){
var self = this;
self.load.library(["character","attackcharacter","face","bar","effects/effect02",
"effects/qinglong","effects/baihu","bitmapsprite","coolingtime"],self.libraryloadover);
};
gamecontroller.prototype.libraryloadover=function(){
var self = this;
var chara = new character();
self.view.addchild(chara);
load.helper的使用案例
function gamecontroller(){
base(this,mycontroller,[]);
}
gamecontroller.prototype.construct=function(){
var self = this;
self.load.helper(["talk","ui"],self.helperloadover);
};
gamecontroller.prototype.helperloadover=function(){
var self = this;
talk("对话测试");
};
load.image的使用案例
function gamecontroller(){
base(this,mycontroller,[]);
}
gamecontroller.prototype.construct=function(){
var self = this;
var list = self.model.getcommonimages();
self.load.image(list,self.loadimageover);
};
gamecontroller.prototype.loadimageover=function(){
var self = this;
//读取完图片后，可以通过lmvc.datalist获取
};
2,模型model模型是专门用来和数据打交道的，数据的存储等工作需要写到模型内。模型必须放到models文件夹内，模型的名字以model结尾。
在模型中，可以使用 this.controller 来调用它的控制器，使用 this.view 来调用它的视图。
3,视图view视图是一个lsprite的子对象。视图必须放到views文件夹内，视图的名字以view结尾。
在模型中，可以使用 this.controller 来调用它的控制器，使用 this.model 来调用它的模型。
4,辅助函数在控制器中可以通过this.load.helper来读取一个辅助函数文件。辅助函数文件必须放到helpers文件夹内。
5,类库在控制器中可以通过this.load.library来读取一个类库。类库必须放到libraris文件夹内，类库的名字与控制器，模型和视图的名字不同，它的名字就是类库的名字。
如果想要了解更详细的使用方法，大家可以下载lufylegend.js引擎，查看引擎包中的mvcsample这个具体的开发实例。
以上就是html5开发中使用mvc模式 的内容。