HTML5 개발에 MVC 패턴 사용

黄舟

풀어 주다： 2017-03-01 15:32:06

원래의

1864명이 탐색했습니다.

회사에서 지난주 이틀간 해커톤을 열었습니다. 물론 코드를 좀 더 깔끔하게 만들기 위해 lufylegend.js를 사용해서 작성해보는 분들도 계셨습니다. 자바스크립트로 작은 MVC 프레임워크를 만들고 간단한 데모를 개발했습니다. 짧은 시간으로 인해 게임은 예상한 양의 일부만 완료되었습니다.

이번에 개발된 게임 스크린샷은 다음과 같습니다.

테스트 연결은 다음과 같습니다

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

JS 개발에 MVC가 전혀 필요없다고 하시는 분들이 많을 겁니다. 여기에서는 이것이 필요한지 아닌지에 대해 논의하지는 않지만 개인적으로 이번 개발에서 MVC 모델을 사용한 후에는 코드의 각 모듈이 실제로 한눈에 명확하고 유지 관리 및 확장이 상대적으로 매우 편리하다고 생각합니다. 물론 소규모 프로그램의 경우 MVC를 사용할 필요가 없습니다. 이제 여기에서 이 프레임워크를 공개하고 그 사용법을 간략하게 설명하겠습니다. 이 프레임워크는 제가 짧은 시간에 완성한 것이므로 불완전한 부분이 많을 것입니다. 더 좋은 아이디어가 있으면 언제든지 제출해 주시기 바랍니다. 함께 토론하세요.

1. 네이밍

lufylegend.js 엔진에서 사용한 네이밍 방식에 따라 이 프레임워크의 이름을 LMvc로 지정하고 프레임워크를 추가했습니다. lufylegend .js 다운로드 패키지 .

2. 사용 전제조건

본 프레임워크는 lufylegend.js 엔진을 기반으로 제가 완성한 것이므로, 사용하기 위해서는 lufylegend.js를 도입해야 합니다. 엔진.

lufylegend.js 엔진 공식 홈페이지

http://lufylegend.com/ lufylegend

lufylegend.js 엔진 온라인 API 문서 링크

http://lufylegend .com/lufylegend/api

3. 기능

동적 파일 로딩, 모든 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는 그룹이므로 사용하기 전에 GroupMVC를 읽어야 합니다. .
MVC 그룹은 상호 운용될 수 있습니다. 컨트롤러에서는 Controller.model을 사용하여 해당 모델을 호출하고 Controller.view를 사용하여 해당 뷰를 호출할 수 있습니다. 모델에서는 model.controller를 사용하여 컨트롤러를 호출하고 model.view를 사용하여 뷰를 호출할 수 있습니다. 뷰 보기에서는 model.controller를 사용하여 컨트롤러를 호출하고 model.model을 사용하여 모델을 호출할 수 있습니다.

1, ControllerController

간단히 말하면 컨트롤러는 클래스 파일입니다. 컨트롤러는 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: 컨트롤러 로드 객체 in은 다양한 파일을 읽어오는 데 사용됩니다.

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

로그인 후 복사