Heim > Artikel > Web-Frontend > 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 .
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 .
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
Viertens Verwendungsmethode
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 .
1, ControllerController
loadMvc-Verwendungsbeispiel: load.model和load.view一般是不用的,但是在一个控制器中要想使用另一组的模型和视图的时候,就需要个别读取了。 load.library的使用案例 load.helper的使用案例 load.image的使用案例 模型是专门用来和数据打交道的,数据的存储等工作需要写到模型内。模型必须放到Models文件夹内,模型的名字以Model结尾。 视图是一个LSprite的子对象。视图必须放到Views文件夹内,视图的名字以View结尾。 在控制器中可以通过this.load.helper来读取一个辅助函数文件。辅助函数文件必须放到Helpers文件夹内。 在控制器中可以通过this.load.library来读取一个类库。类库必须放到Libraris文件夹内,类库的名字与控制器,模型和视图的名字不同,它的名字就是类库的名字。 如果想要了解更详细的使用方法,大家可以下载lufylegend.js引擎,查看引擎包中的mvcSample这个具体的开发实例。 以上就是HTML5开发中使用MVC模式 的内容,更多相关内容请关注PHP中文网(www.php.cn)!Funktion im Controller
construct()
控制器初始化结束后会直接调用此函数,如果有想要在控制器初期化结束后运行的代码,可以写在construct函数内,控制器的construct函数,在模型的construct函数运行之后运行。
loadMvc(name,callback,lastClass)
读取一组MVC,name是控制器的名称中去除Controller的部分;callback是回调函数,当MVC的三个文件读取完之后,会自动调用此函数;lastClass需要设定为当前对象this。
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)
读取多张图片。
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);
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("对话测试");
};
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
在模型中,可以使用 this.controller 来调用它的控制器,使用 this.view 来调用它的视图。3,视图View
在模型中,可以使用 this.controller 来调用它的控制器,使用 this.model 来调用它的模型。4,辅助函数
5,类库