• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5开发中使用MVC模式

HTML5开发中使用MVC模式

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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一般是不用的,但是在一

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5中的nav标签的详解
  • 2018-12-03使用Canvas处理图片的方法介绍
  • 2018-12-03HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载_html5教程技巧
  • 2018-12-03H5牛牛游戏源码前端开发的古怪现象
  • 2018-12-03使用HTML5/CSS3五步快速制作便签贴特效代码示例分享(图文)
  • 2018-12-03什么是标准模式?总结标准模式的实例用法
  • 2018-12-03分享29个基于Bootstrap的HTML5响应式网页设计模板_html5教程技巧
  • 2018-12-03利用图片预加载组件提升html5移动页面的用户体验
  • 2018-12-03html5 利用canvas实现超级玛丽简单动画_html5教程技巧
  • 2018-12-03移动端HTML5如何开发?跟PC端有什么区别?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于特效性能,canvas、css3、jquery那个更适合手机端?
    • H5最全面解读
    • Web Storage概述和本地数据库
    • 使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
    • 鼠标移出事件的案例以及详解
    • HTML5中的强制下载属性download使用实例解析_html5教程技巧
    • HTML5新标签之Canvas详细介绍
    • 关于HTML5中input标签(type属性)的详细介绍
    • 关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解
    • HTML5 用动画的表现形式装载图像 _html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有