Using MVC pattern in HTML5 development

The company held a hackathon last week for two days. Of course I used lufylegend.js to make the code look neater Some people tried to write a small MVC framework in javascript and developed a simple demo. Due to the short time, the game only completed a small part of the expected amount.

#The screenshots of the game developed this time are as follows.

The test connection is as follows

http://lufylegend.com/demo/mvcSample/

Many people will definitely say that there is no need for MVC at all in js development. If you use it, you will cause trouble for yourself. Here, I will not discuss whether it is necessary or not, but I personally feel that after using the MVC model in this development, each module of the code is indeed clear at a glance, and maintenance and expansion are relatively convenient. It is very suitable for large and medium-sized development. Of course For small programs, there is really no need to use MVC. Now I will make this framework public and briefly explain its usage here. This framework was completed by me in a short period of time, so there must be many imperfections. If you have better ideas, you are welcome to submit them. Come out and discuss .

First, naming

Follow the naming method I used in the lufylegend.js engine. I named this framework LMvc, and the framework has been added to lufylegend .js download package.

2. Prerequisites for use

This framework was completed by me based on the lufylegend.js engine, so to use it, you need to introduce the lufylegend.js engine.

lufylegend.js engine official website

##http://lufylegend.com/lufylegend

lufylegend.js engine online API documentation link

http://lufylegend. com/lufylegend/api

##3. Features

Dynamic loading of files, you may write all JS files together, But when the project is large, your JS files will also be large, which will affect the display speed of the page. LMvc can not only dynamically load images, but also dynamically load JS. For a page, you only need to load the files related to it each time. That’s it.

Four, usage method

First configure each path in the engine: LMvc.JS_PATH, LMvc.IMG_PATH, LMvc.MVC_PATH, LMvc.API_PATH, LMvc.SOUND_PATH.

If you need to read some pictures in advance, you need to assign the read data to LMvc.datalist. When you use the LMvc framework to read pictures later, LMvc.datalist will be automatically monitored, and duplicate pictures will not be Read again. Finally, call LMvc.init(); to enter IndexController.

Each ***Controller, ***Model, ***View is a group, which must be read before use. Use the loadMvc function of the controller to read a group. GroupMVC.

A group of MVCs can be interoperated. In the controller, you can use controller.model to call its model and controller.view to call its view. In a model, you can use model.controller to call its controller and model.view to call its view. In the view View, you can use model.controller to call its controller and model.model to call its model.

1, ControllerController

In short, a controller is a class file. The controller must be placed in the Controllers folder, and the name of the controller ends with Controller.

In the controller, you can use this.model to call its model and this.view to call its view.

Function in the controller

construct()	This function will be called directly after the controller is initialized. If you want to The code that is run after initialization is completed can be written in the construct function. The construct function of the controller is run after the construct function of the model is run.
loadMvc(name,callback,lastClass)	Read a set of MVC, name is the part of the controller name excluding the Controller; callback is the callback function, when After the three files of MVC are read, this function will be called automatically; lastClass needs to be set to the current object this.

loadMvc usage example:

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 : in the controller The load object is used to read various files. The usage method is as follows

this.load.model(names,callback)	Read one or more Model.
this.load.view(names,callback)	Read one or more views.
this.load.library(names,callback)	Read one or more external class libraries.
this.load.helper(names,callback)	Read one or more helper function files.
this.load.image(loadData,callback)	Read multiple images.

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）！