HTML5开发中使用MVC模式
来源:互联网 发布:ubuntu切换到登陆界面 编辑:程序博客网 时间:2024/05/10 21:27
公司上周举办了一次编程马拉松,时间为两天,我当然用了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引擎官网
lufylegend.js引擎在线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模式
- HTML5开发中使用MVC模式
- HTML5开发中使用MVC模式
- Android开发中MVC模式的使用
- 在PHP中使用MVC模式进行开发
- iOS开发中如何高效使用MVC设计模式
- 使用mvc模式开发网站
- 【转】javascript中MVC模式开发
- 移动开发中MVC模式和分层
- Unity3d中UI开发的MVC模式
- Unity3d中UI开发的MVC模式
- iOS开发中MVC、MVVM模式详解
- Unity3d中UI开发的MVC模式
- Unity3d中UI开发的MVC模式
- Unity3d 中 UI 开发的 MVC 模式
- 移动开发中MVC模式和分层
- Unity3d中UI开发的MVC模式
- Unity3d中UI开发的MVC模式
- 编程中的runtime_error问题
- 股市风云
- linux 新建用户、用户组 以及为新用户分配权限
- Codeforces Round #215 (diy.2) B.Sereja and Suffixes
- Makefile条件编译debug版和release版
- HTML5开发中使用MVC模式
- 深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第四节 参数传递对堆栈的影响 2
- makefile及条件编译
- hdu 4213 Sokoban(模拟)
- Andorid Activity生命周期
- LeetCode(2) AddTwoNumbers
- Linux和windows换行符区别及使用说明
- PL\SQL 学习笔记(二) pl\sql 变量声明 与 exception
- Sqlite使用