开篇

这篇文章是后补的,前端时间想写一些对于js开发的一些理解,就直接写了,后来发现很唐突,所以今天在这里补一个开篇。

我的js Mvc 框架 基于实用设计,过分设计等于没设计。本着简单的原则,它只实现以下2点。

1、html代码、逻辑、数据处理的分离。

2、组件化

对于现在web页面交互性要求越来越强的情况,开发复杂的js段应用就必不可少。

就拿一个评论模块来讲,你可能要求它调用简单、参数可配置、组件化。

组件化就不用说了,你肯定不希望你写的代码到处复制了。

以前我自己写js组件的时候最原始的办法是把html代码 隐藏在页面里,用的时候show一下

后来发现这样的话每个页面都要写一堆隐藏代码

所以就改进一下,把html代码用js用字符串拼接出来,这样就可以再各个地方调用了。

但是后来发现这样的代码维护很困难,而且不利于阅读。

于是就先到了分离

先来上一段组件调用代码

         var discussController, FACE;

         IceMx.Mvc.Get("Discuss","Face");

         IceMx.Event.AddEvent("MvcLoadOver", function () {
FACE = new FaceController();
discussController = new DiscussController();
discussController.GetBody().appendTo("#panelDiscuss");
});

这是一个评论模块儿的调用,其实这里面包含了两个组件,我把评论里的表情也分离出来了,以后想其他地方加入表情只要new这个表情对象就ok了。

这样的调用实现了组件化。

再来看看目录结构

尤其是html代码的分离是很有必要的

框架会动态载入对应的控制器、模型、视图并且将视图绑定到控制器的变量内。

就先写这么多吧,随后会逐步完整共享出来,想法很浅薄,望高手提供宝贵意见。

其他

若有兴趣请关注分类下的其他文章,如果能得到您的支持将不甚感激。

IceMx.Mvc 我的js MVC 框架 开篇的更多相关文章

  1. IceMx.Mvc 我的js MVC 框架 三、动手来写一个评论模块儿

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  2. IceMx.Mvc 我的js MVC 框架五、完善植物大战僵尸(雏形版增加动画)

    有图有真相 说明 实在找不到僵尸的素材,从网上扒了一个山寨的僵尸,只有4张的一个连续图片,所以动作有点僵硬,植物的图片是自己处理的,非专业所以……咳咳!. 背景是自己抠下来2块儿拼接的,看在这么辛苦的 ...

  3. IceMx.Mvc 我的js MVC 框架 一、html代码的分离(视图)

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  4. IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  5. IceMx.Mvc 我的js MVC 框架四、试水植物大战僵尸(雏形版)

    有图有真相 开始 最近老婆在家迷上了植物大战僵尸,每天回去躺床上就玩,有一天居然跟我说冰箱后边爬着好几只僵尸,当时我就惊呆了,后来才知道她是在说蟑螂,我去. 闲言少叙,书归正传,这是一个雏形,没有在界 ...

  6. IceMx.Mvc 我的js MVC 框架七、完善植物大战僵尸(增加阳光的消费和获得)

    话不多说,先上图 这次增加了阳光的消费和获得,增加了阳光的点击动画 重新排布了布局 有兴趣的话就研究下吧. 上一篇有朋友说让我把项目放到github上面维护,本人没用过这个,肯请朋友们帮小弟科普一下放 ...

  7. IceMx.Mvc 我的js MVC 框架六、完善植物大战僵尸(向日葵登场)

    有图有真相,废话不多说上图 看到园友的支持很受鼓舞,更觉得应该做下去,虽然自己是个菜鸟,但也应该共享自己的心得,只要有人获益那就是值得的. 我的下载需要csdn论坛的1个积分,之所以不完全免费出去是因 ...

  8. 全端开发必备!10个最好的 Node.js MVC 框架

      Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服 ...

  9. Mithril – 构建杰出 Web 应用的 JS MVC 框架

    Mithril 是一个客户端的 Javascript MVC 框架.它是一个工具,使应用程序代码分为数据层,UI 层和粘合层.提供了一个模板引擎与一个虚拟的 DOM diff 实现,用于高性能渲染,支 ...

随机推荐

  1. Tomcat剖析(一):一个简单的Web服务器

    Tomcat剖析(一):一个简单的Web服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三):连接器 ...

  2. Swift # Apple Pay集成

    苹果正式开放了Apple Pay支付系统.Apple Pay是一个基于NFC的支付系统,不久将被数以万计的线下零售商店予以支持.即便这项科技并不是彻底的突破性进展,但它足以推动许多公司和零售商来支持这 ...

  3. 【百度地图API】多家地图API文件大小对比

    原文:[百度地图API]多家地图API文件大小对比 于2011.6.9日更新百度地图API文件大小.同时更新图片. 任务描述: 明天就是元宵佳节啦~这是一个团团圆圆的节日,于是,再次想把各家API聚在 ...

  4. JqueryAjax异步加载在ASP.NET

    前台代码 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">< ...

  5. 猫学习IOS(十五)UI以前的热的打砖块游戏

    猫分享.必须精品 材料代号地址:http://blog.csdn.net/u013357243/article/details/44814523 原文地址:viewmode=contents" ...

  6. 网站静态化处理—web前端优化—上

    网站静态化处理—web前端优化—上(11) 网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是 ...

  7. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  8. JavaScript语言基础知识11

    JavaScript字符的比较. 在接下来的学习内容的开始,我们先来看一下alert()此功能,它是一个消息框. OK,接下来正式介绍代码: <HTML> <HEAD> < ...

  9. iptables的配置文件/etc/sysconfig/iptables不存在怎么办

    iptables的配置文件/etc/sysconfig/iptables不存在怎么办 首先要看一下iptables是否安装了,使用service iptables status或yum info ip ...

  10. Linux页快速缓存与回写机制分析

    參考 <Linux内核设计与实现> ******************************************* 页快速缓存是linux内核实现的一种主要磁盘缓存,它主要用来降低 ...