HTML5開発でのMVCパターンの使用

先週、会社は 2 日間続いたハッカソンを開催しました。もちろん、コードをよりきれいに見せるために、私は lufylegend.js を使用して、JavaScript で小さな MVC フレームワークを作成しようとしました。簡単なデモを開発しました 時間が短かったため、ゲームは予定されていた量のほんの一部しか完成しませんでした。

今回開発したゲームのスクリーンショットは以下の通りです。

テスト接続は次のとおりです

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

多くの人は、JS開発にはMVCはまったく必要ないと言うでしょう。使用すると自分自身に迷惑がかかります。必要かどうかはここでは議論しませんが、今回の開発でMVCモデルを使ってみて個人的に感じたのは、確かにコードの各モジュールが一目瞭然で、メンテナンスや拡張が比較的楽であるということです。大規模および中規模の開発に適しています。もちろん、小規模なプログラムの場合は、MVC を使用する必要はありません。このフレームワークをここで公開し、その使用法を簡単に説明します。このフレームワークは私が短期間で完成させたものなので、もっと良いアイデアがある場合は、ぜひ提出してください。一緒に話し合ってください。

まず、

という名前は、lufylegend.js エンジンで使用した命名方法に従い、このフレームワークは lufylegend.js のダウンロード パッケージに追加されました。

その二、使用の前提条件

このフレームワークは lufylegend.js エンジンをベースに私が完成させたものなので、使用するには lufylegend.js エンジンを導入する必要があります。

lufylegend.jsエンジン公式Webサイト

http://lufylegend.com/lufylegend

lufylegend.jsエンジンオンラインAPIドキュメントリンク

http:/ / lufylegend.com/lufylegend/api

3つの特徴

すべてのJSファイルをまとめて書くこともできますが、プロジェクトが大きい場合、JSファイルも大きくなります。ページの表示速度。LMvc は画像を動的にロードするだけでなく、ページに関連するファイルを毎回ロードするだけで済みます。

4番目、使用方法

まずエンジン内の各パスを設定します: LMvc.JS_PATH、LMvc.IMG_PATH、LMvc.MVC_PATH、LMvc.API_PATH、LMvc.SOUND_PATH。
事前にいくつかの画像を読み取る必要がある場合は、読み取ったデータを LMvc.datalist に割り当てる必要があります。後で LMvc フレームワークを使用して画像を読み取ると、LMvc.datalist が自動的に監視され、重複した画像が再度読み取られることはありません。 。 選ぶ。
最後に、LMvc.init(); を呼び出して IndexController に入ります。

各***Controller、***Model、***Viewはグループであり、使用前にコントローラのloadMvc関数を使用してMVCのグループを読み取る必要があります。
MVC のグループは相互変調できます。コントローラーでは、controller.model を使用してそのモデルを呼び出し、controller.view を使用してそのビューを呼び出すことができます。モデルでは、model.controller を使用してそのコントローラーを呼び出し、model.view を使用してそのビューを呼び出すことができます。ビュー View では、model.controller を使用してそのコントローラーを呼び出し、model.model を使用してそのモデルを呼び出すことができます。

1、コントローラー

つまり、コントローラーはクラスファイルです。コントローラーは「Controllers」フォルダーに配置する必要があり、コントローラーの名前は「Controller」で終わります。
コントローラーでは、this.model を使用してそのモデルを呼び出し、this.view を使用してそのビューを呼び出すことができます。

コントローラー内の関数

construct()	この関数は、コントローラーの初期化後に直接呼び出されます。コントローラーの初期化後に実行したいコードがある場合は、construct関数に記述することができます。コンストラクターの構築関数は、モデルの構築関数が実行された後に実行されます。
loadMvc(name,callback,lastClass)	MVC のセットを読み取ります。name はコントローラー名の一部であり、コントローラー コールバックはコールバック関数です。MVC の 3 つのファイルが読み取られると、この関数を自動的に呼び出します。lastClass を現在のオブジェクト this に設定する必要があります。

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 : コントローラー内のloadオブジェクトを使用して各種ファイルを読み込みます

this.load.model(名前、コールバック)	1 つ以上のモデルを読み取ります。
this.load.view(names,callback)	1 つ以上のビューを読み取ります。
this.load.library(names,callback)	1 つ以上の外部クラス ライブラリを読み取ります。
this.load.helper(names,callback)	1 つ以上のヘルパー関数ファイルを読み取ります。
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）！