Using MVC pattern in HTML5 development

黄舟

Release： 2017-03-01 15:32:06

Original

1863 people have browsed it

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

Copy after login

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

Copy after login

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("对话测试");
};

Copy after login

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获取
};

Copy after login