IceMx.Mvc
IceMx.Mvc 我的js MVC 框架 开篇
开篇
这篇文章是后补的,前端时间想写一些对于js开发的一些理解,就直接写了,后来发现很唐突,所以今天在这里补一个开篇。
我的js Mvc 框架 基于实用设计,过分设计等于没设计。本着简单的原则,它只实现以下2点。
1、html代码、逻辑、数据处理的分离。
2、组件化
对于现在web页面交互性要求越来越强的情况,开发复杂的js段应用就必不可少。
就拿一个评论模块来讲,你可能要求它调用简单、参数可配置、组件化。
组件化就不用说了,你肯定不希望你写的代码到处复制了。
以前我自己写js组件的时候最原始的办法是把html代码 隐藏在页面里,用的时候show一下
后来发现这样的话每个页面都要写一堆隐藏代码
所以就改进一下,把html代码用js用字符串拼接出来,这样就可以再各个地方调用了。
但是后来发现这样的代码维护很困难,而且不利于阅读。
于是就先到了分离。
先来上一段组件调用代码
1 var discussController, FACE;
2
3 IceMx.Mvc.Get("Discuss","Face");
4
5 IceMx.Event.AddEvent("MvcLoadOver", function () {
6 FACE = new FaceController();
7 discussController = new DiscussController();
8 discussController.GetBody().appendTo("#panelDiscuss");
9 });
这是一个评论模块儿的调用,其实这里面包含了两个组件,我把评论里的表情也分离出来了,以后想其他地方加入表情只要new这个表情对象就ok了。
这样的调用实现了组件化。
再来看看目录结构
尤其是html代码的分离是很有必要的
框架会动态载入对应的控制器、模型、视图并且将视图绑定到控制器的变量内。
就先写这么多吧,随后会逐步完整共享出来,想法很浅薄,望高手提供宝贵意见。
其他
若有兴趣请关注分类下的其他文章,如果能得到您的支持将不甚感激。
IceMx.Mvc的更多相关文章
- IceMx.Mvc 我的js MVC 框架 三、动手来写一个评论模块儿
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
- IceMx.Mvc 我的js MVC 框架 开篇
开篇 这篇文章是后补的,前端时间想写一些对于js开发的一些理解,就直接写了,后来发现很唐突,所以今天在这里补一个开篇. 我的js Mvc 框架 基于实用设计,过分设计等于没设计.本着简单的原则,它只实 ...
- IceMx.Mvc 我的js MVC 框架五、完善植物大战僵尸(雏形版增加动画)
有图有真相 说明 实在找不到僵尸的素材,从网上扒了一个山寨的僵尸,只有4张的一个连续图片,所以动作有点僵硬,植物的图片是自己处理的,非专业所以……咳咳!. 背景是自己抠下来2块儿拼接的,看在这么辛苦的 ...
- IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
- IceMx.Mvc 我的js MVC 框架四、试水植物大战僵尸(雏形版)
有图有真相 开始 最近老婆在家迷上了植物大战僵尸,每天回去躺床上就玩,有一天居然跟我说冰箱后边爬着好几只僵尸,当时我就惊呆了,后来才知道她是在说蟑螂,我去. 闲言少叙,书归正传,这是一个雏形,没有在界 ...
- IceMx.Mvc 我的js MVC 框架 一、html代码的分离(视图)
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
- IceMx.Mvc 我的js MVC 框架七、完善植物大战僵尸(增加阳光的消费和获得)
话不多说,先上图 这次增加了阳光的消费和获得,增加了阳光的点击动画 重新排布了布局 有兴趣的话就研究下吧. 上一篇有朋友说让我把项目放到github上面维护,本人没用过这个,肯请朋友们帮小弟科普一下放 ...
- IceMx.Mvc 我的js MVC 框架六、完善植物大战僵尸(向日葵登场)
有图有真相,废话不多说上图 看到园友的支持很受鼓舞,更觉得应该做下去,虽然自己是个菜鸟,但也应该共享自己的心得,只要有人获益那就是值得的. 我的下载需要csdn论坛的1个积分,之所以不完全免费出去是因 ...
- 【人在江湖飘,哪有不带刀】神器Jumony
大神博客:http://www.cnblogs.com/Ivony/p/3447536.html 项目地址:https://github.com/Ivony/Jumony 1.安装Jumony包 在N ...
随机推荐
- Android微信道共用,没有反应
研究2日,寻找良好的比较完整的文章一天.发送链接:http://www.apkbus.com/android-138326-1-1.html 然而,按照上面的教程一步一步做.结果点击分享或无反应. 出 ...
- C语言第11课
主要内容:函数指针 一.函数指针定义 int maxValue(int a,int b) { return a > b ? a : b; } 函数名和数组名一样是地址,存在在代码区 i ...
- ThinkPHP框架设计与扩展总结
详见:http://www.ucai.cn/blogdetail/7028?mid=1&f=5 可在线运行查看效果哦 导言:ThinkPHP框架是国内知名度很高应用很广泛的php框架,我们从一 ...
- 怎样下载并编译Android4.0内核源代码goldfish(图文)
关于怎样下载Android4.0源代码,请查看我的博客内还有一篇文章(相同是图文教程): http://blog.csdn.net/flydream0/article/details/7036156 ...
- Python - 字符串的替换(interpolation) 具体解释
字符串的插值(interpolation) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27054263 字符串的替换 ...
- selenium之多线程启动grid分布式测试框架封装(一)
一.设计思路 在国内市场上,IE内核的浏览器占据了绝大部分的市场份额,那么此次框架封装将进行IE系列的浏览器进行多线程并发执行分布式测试的封装. 运行时主进程与多线程关系如下:
- js 正则之 控制字符 \cX
原文:js 正则之 控制字符 \cX 前些天在司徒正美的群里有人问了这么个问题:正则表达式里特殊字符 \cX 到底是什么?确实,我之前也挺在意的,但是一直没去看到底是什么.在MDN上只说是控制字符(详 ...
- centos6的安装,一步一图,有图有真相
打开虚拟机VMware,点击文件,选择[新建虚拟机],如图所示
- 用一条SQL语句取出第 m 条到第 n 条记录的方法
原文:用一条SQL语句取出第 m 条到第 n 条记录的方法 --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本) * FROM Table id ...
- System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(string, string)已过时的解决办法
FormsAuthentication.HashPasswordForStoringInConfigFile 方法是一个在.NET 4.5中已经废弃不用的API,参见: https://msdn.mi ...