公司上周举办了一次编程马拉松，时间为两天，我当然用了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 来调用它的视图。

控制器中的函数

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);
};

HTShop网上购物系统

HTShop网上购物系统由恒天网络科技有限公司根据国际先进技术和国内商务特点自主版权开发的一款具有强大功能的B2C电子商务网上购物平台。HTShop以国际上通用流行的B/S(浏览器/服务器)模式进行设计，采用微软公司的ASP.NET（C#）技术构建而成。 2007-11-10 HTShop CS 通用标准版 v1.1.11.10 更新内容自由更换模版功能开放 修改了购买多款商品，会员中心订单只显示

下载

load : 控制器中的load对象用来读取各种文件，使用方法如下

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模式 的内容，更多相关内容请关注PHP中文网（www.php.cn）！