开篇

这篇文章是后补的,前端时间想写一些对于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. java 字符串反转

    描述:给我一个字符串,例如I love java,输出: java love I   方法一 public class StringReverse { public void swap(char[] ...

  2. 利用WebBrowser彻底解决Web打印问题

    原文:利用WebBrowser彻底解决Web打印问题 利用WebBrowser彻底解决Web打印问题(包括后台打印) BS架构下的打印大家是怎么解决的呢,我最近作了一个项目正好负责这一块,不仅要求打印 ...

  3. cscope的使用

    转自:http://easwy.com/blog/archives/advanced-vim-skills-cscope/ 本节所用命令的帮助入口: :help cscope 在前面的文章中介绍了利用 ...

  4. Ubuntu 14.04 关机键无效解决方法

         这几天開始研究ubuntu 14.04软件,安装Cairo-Dock后发现右上角的关机.重新启动.注销菜单点击都没了反应仅仅能通过命令实现,后来经过研究,发现仅仅要设置了 Cairo-Doc ...

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

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

  6. addEventListener 与attachEvent

    第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...

  7. C语言库函数大全及应用实例十一

    原文:C语言库函数大全及应用实例十一                                         [编程资料]C语言库函数大全及应用实例十一 函数名: setbkcolor 功 能 ...

  8. EasyUI的后台界面

    EasyUI的后台界面搭建及极致重构 〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用 ...

  9. 基于protobuf的RPC实现

    可以比较使用google protobuf RPC实现echo service可见.述. google protobuf仅仅负责消息的打包和解包.并不包括RPC的实现.但其包括了RPC的定义.如果有以 ...

  10. ThinkPad E431/E531 ubuntu 14.04 安装无线网卡驱动

    ubuntu系统装好之后无限网卡驱动并不能用.须要自己下载无线网卡驱动.以下是最简单的方法: sudo apt-get install linux-headers-generic build-esse ...