Utilisation du modèle MVC dans le développement HTML5

L'entreprise a organisé un hackathon la semaine dernière pendant deux jours. Bien sûr, j'ai utilisé lufylegend.js pour rendre le code plus soigné. Certaines personnes ont essayé d'écrire. un petit framework MVC en javascript et développé une démo simple En raison du peu de temps, le jeu n'a réalisé qu'une petite partie du montant attendu.

Les captures d'écran du jeu développé cette fois sont les suivantes .

La connexion de test est la suivante

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

Beaucoup de gens diront certainement que MVC n'est pas du tout nécessaire dans le développement js. Si vous l'utilisez, vous vous causerez des problèmes. Ici, je ne discuterai pas de savoir si c'est nécessaire ou non, mais j'estime personnellement qu'après avoir utilisé le modèle MVC dans ce développement, chaque module du code est effectivement clair en un coup d'œil, et la maintenance et l'extension sont relativement pratiques. convient au développement de grande et moyenne taille. Bien sûr, pour les petits programmes, il n'est vraiment pas nécessaire d'utiliser MVC. Maintenant, je vais rendre ce cadre public et expliquer brièvement son utilisation ici. Ce cadre a été réalisé par moi en peu de temps, il doit donc y avoir de nombreuses imperfections. Si vous avez de meilleures idées, n'hésitez pas à les soumettre. discuter ensemble .

1. Nommer

Suivant la méthode de dénomination que j'ai utilisée dans le moteur lufylegend.js, j'ai nommé ce framework LMvc, et le framework a été ajouté à Package de téléchargement lufylegend .js .

2. Prérequis d'utilisation

Ce framework a été réalisé par mes soins sur la base du moteur lufylegend.js, donc pour l'utiliser, vous devez introduire le lufylegend.js moteur.

Site officiel du moteur lufylegend.js

http://lufylegend.com/ lufylegend

lien de documentation de l'API en ligne du moteur lufylegend.js

http://lufylegend .com/lufylegend/api

3. Fonctionnalités

Chargement dynamique des fichiers, vous pouvez écrire tous les fichiers JS ensemble, mais lorsque le projet est volumineux, vos fichiers JS seront également volumineux, ce qui affectera la vitesse d'affichage de la page. LMvc peut non seulement charger dynamiquement des images, mais également charger dynamiquement du JS. Pour une page, il vous suffit de charger les fichiers associés. à chaque fois.

Quatrièmement, méthode d'utilisation

Configurez d'abord chaque chemin dans le moteur : LMvc.JS_PATH, LMvc.IMG_PATH, LMvc.MVC_PATH, LMvc.API_PATH, LMvc.SOUND_PATH.
Si vous avez besoin de lire certaines images à l'avance, vous devez attribuer les données lues à LMvc.datalist Lorsque vous utilisez le framework LMvc pour lire des images plus tard, LMvc.datalist sera automatiquement surveillé et les images en double ne le seront pas. Relisez.
Enfin, appelez LMvc.init(); pour entrer dans IndexController.

Chaque ***Contrôleur, ***Modèle, ***Vue est un groupe et doit être lu avant utilisation. Utilisez la fonction loadMvc du contrôleur pour lire un groupe. .
Un groupe de MVC peut être interopéré. Dans un contrôleur, vous pouvez utiliser contrôleur.model pour appeler son modèle et contrôleur.view pour appeler sa vue. Dans un modèle, vous pouvez utiliser model.controller pour appeler son contrôleur et model.view pour appeler sa vue. Dans la vue View, vous pouvez utiliser model.controller pour appeler son contrôleur et model.model pour appeler son modèle.

1, ControllerController

En bref, un contrôleur est un fichier de classe. Le contrôleur doit être placé dans le dossier Contrôleurs et le nom du contrôleur se termine par Contrôleur.
Dans un contrôleur, vous pouvez utiliser this.model pour appeler son modèle et this.view pour appeler sa vue.

Fonction dans le contrôleur

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

Exemple d'utilisation de 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);
};

load : La charge L'objet dans le contrôleur est utilisé pour lire divers fichiers. La méthode d'utilisation est la suivante

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