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

黄舟

Libérer： 2017-03-01 15:32:06

original

1928 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion