HTML5開發中使用MVC模式

公司上週舉辦了一次程式設計馬拉松，時間為兩天，我當然用了lufylegend.js，為了讓程式碼看起來更整潔有些，嘗試著用javascript寫了一個小的MVC框架，並開發了一個簡單的demo，由於時間太短，遊戲只完成了預計的一小部分。

本次開發的遊戲截圖如下。

測試連線如下

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

很多人一定會說，js開發根本不需要什麼MVC，用了就是給自己找麻煩。在這裡，我不去討論需不需要的問題，只是我個人感覺這次的開發使用了MVC模式之後，代碼各個模組確實一目了然，維護和擴展都相對方便了許多，很適合大中型的開發，當然對於小程式而言，也確實沒有使用MVC的必要。現在我將這個框架公開，並在這裡簡單說明一下它的用法，這個框架是我在很短的時間內完成的，所以一定存在很多不完善的地方，如果你有更好的想法，也歡迎提出來一起討論。

一，命名

沿用我在lufylegend.js引擎中的命名方式，我給這個框架命名為LMvc，框架已被加入到lufylegend .js的下載套件。

二，使用前提

本框架是我在lufylegend.js引擎的基礎上完成的，所以使用它的話，你需要引入lufylegend.js引擎。

lufylegend.js引擎官網

http://lufylegend.com/lufylegend

lufylegend.js引擎線上API文件連結

http://lufylegend. com/lufylegend/api

三，特點

動態載入文件，你可能會把所有JS文件寫到了一起，但是工程很大的時候，你的JS檔案也會很大，會影響頁面的顯示速度，LMvc不但可以動態載入圖片，還可以動態載入JS，一個頁面，你每次只需要載入與它相關的文件即可。

四，使用方法

先設定引擎中各路徑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 來呼叫它的模型，使用 控制器.view 來呼叫它的視圖。在模型Model中,可以使用 模型.controller 來呼叫它的控制器，使用 模型.view 來呼叫它的視圖。在視圖View中,可以使用 模型.controller 來呼叫它的控制器，使用 模型.model 來呼叫它的模型。

1,控制器Controller

簡而言之，一個控制器就是一個類別檔案。控制器必須放到Controllers資料夾內，控制器的名字以Controller結尾。
在控制器中，可以使用 this.model 來呼叫它的模型，使用 this.view 來呼叫它的視圖。

控制器中的函數

construct()	#控制器初始化結束後會直接呼叫此函數，如果有想要在控制器初期化結束後執行的程式碼，可以寫在construct函數內，控制器的construct函數，在模型的construct函數運作之後執行。
loadMvc(name,callback,lastClass)	讀取一組MVC，name是控制器的名稱中移除Controller的部分；callback是回呼函數，當MVC的三個檔案讀取完之後，會自動呼叫此函數；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(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）！