Verwendung des MVC-Musters in der HTML5-Entwicklung

Das Unternehmen hat letzte Woche zwei Tage lang einen Hackathon abgehalten. Natürlich habe ich lufylegend.js verwendet, um den Code ordentlicher aussehen zu lassen. Einige Leute haben versucht zu schreiben ein kleines MVC-Framework in Javascript und entwickelte eine einfache Demo Aufgrund der kurzen Zeit hat das Spiel nur einen kleinen Teil der erwarteten Menge fertiggestellt.

Die Screenshots des diesmal entwickelten Spiels sind wie folgt .

Die Testverbindung ist wie folgt

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

Viele Leute werden definitiv sagen, dass es in der js-Entwicklung überhaupt keinen Bedarf für MVC gibt. Wenn Sie es verwenden, werden Sie sich selbst Probleme bereiten. Ich werde hier nicht diskutieren, ob es notwendig ist oder nicht, aber ich persönlich bin der Meinung, dass nach der Verwendung des MVC-Modells in dieser Entwicklung tatsächlich jedes Modul des Codes auf einen Blick klar ist und die Wartung und Erweiterung relativ praktisch ist Geeignet für große und mittlere Entwicklungen. Natürlich ist die Verwendung von MVC für kleine Programme nicht erforderlich. Jetzt werde ich dieses Framework veröffentlichen und seine Verwendung hier kurz erläutern. Dieses Framework wurde von mir in kurzer Zeit fertiggestellt. Wenn Sie bessere Ideen haben, können Sie diese gerne einreichen gemeinsam besprechen .

1. Benennung

Gemäß der Benennungsmethode, die ich in der lufylegend.js-Engine verwendet habe, habe ich dieses Framework LMvc genannt, und das Framework wurde hinzugefügt lufylegend .js-Download-Paket .

2. Voraussetzungen für die Verwendung

Dieses Framework wurde von mir auf Basis der lufylegend.js-Engine fertiggestellt. Um es zu verwenden, müssen Sie also die lufylegend.js einführen Motor.

offizielle Website der lufylegend.js-Engine

http://lufylegend.com/ lufylegend

Link zur Online-API-Dokumentation zur lufylegend.js-Engine

http://lufylegend .com/lufylegend/api

Dynamisches Laden von Dateien, Sie können alle JS-Dateien zusammen schreiben Wenn das Projekt groß ist, sind auch Ihre JS-Dateien groß, was sich auf die Anzeigegeschwindigkeit der Seite auswirkt. LMvc kann nicht nur Bilder dynamisch laden, sondern auch JS. Für eine Seite müssen Sie nur die zugehörigen Dateien laden jedes Mal dazu.

Viertens Verwendungsmethode

Konfigurieren Sie zunächst jeden Pfad in der Engine: LMvc.JS_PATH, LMvc.IMG_PATH, LMvc.MVC_PATH, LMvc.API_PATH, LMvc.SOUND_PATH.

Wenn Sie einige Bilder im Voraus lesen müssen, müssen Sie die gelesenen Daten LMvc.datalist zuweisen. Wenn Sie das LMvc-Framework später zum Lesen von Bildern verwenden, wird LMvc.datalist automatisch überwacht und es werden keine doppelten Bilder angezeigt Lesen Sie noch einmal.

Rufen Sie abschließend LMvc.init(); auf, um IndexController aufzurufen.

Jeder ***Controller, ***Modell, ***Ansicht ist eine Gruppe und muss vor der Verwendung gelesen werden. Verwenden Sie die LoadMvc-Funktion des Controllers, um eine Gruppe zu lesen .

Eine Gruppe von MVCs kann miteinander interagieren. In einem Controller können Sie „controller.model“ zum Aufrufen seines Modells und „controller.view“ zum Aufrufen seiner Ansicht verwenden. In einem Modell können Sie model.controller zum Aufrufen seines Controllers und model.view zum Aufrufen seiner Ansicht verwenden. In der Ansicht View können Sie model.controller verwenden, um seinen Controller aufzurufen, und model.model, um sein Modell aufzurufen.

1, ControllerController

Kurz gesagt, ein Controller ist eine Klassendatei. Der Controller muss im Ordner „Controller“ abgelegt werden und der Name des Controllers endet mit „Controller“.

In einem Controller können Sie this.model verwenden, um sein Modell aufzurufen, und this.view, um seine Ansicht aufzurufen.

Funktion im Controller

construct()	控制器初始化结束后会直接调用此函数，如果有想要在控制器初期化结束后运行的代码，可以写在construct函数内，控制器的construct函数，在模型的construct函数运行之后运行。
loadMvc(name,callback,lastClass)	读取一组MVC，name是控制器的名称中去除Controller的部分；callback是回调函数，当MVC的三个文件读取完之后，会自动调用此函数；lastClass需要设定为当前对象this。

loadMvc-Verwendungsbeispiel:

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: Die Last Das Objekt im Controller wird zum Lesen verschiedener Dateien verwendet. Die Verwendungsmethode ist wie folgt

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