开篇

这篇文章是后补的,前端时间想写一些对于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. sql server 视图 的一个例子

    这是一个 有点复杂的查询.我现在 想把他封装 成 视图  其中  B.RecordID= 41 提供给 视图外查询. create view view_UserRecord as select Rec ...

  2. Model Validation in Asp.net MVC

    原文:Model Validation in Asp.net MVC 本文用于记录Pro ASP.NET MVC 3 Framework中阐述的数据验证的方式. 先说服务器端的吧.最简单的一种方式自然 ...

  3. JAVA基本的编程50称号(7-9称号)详细解释

    一个.叙述性说明 1.输入一行字符.在这些信件统计.空格.出现频率的数字和其他字符的总数和每一个字符.         程序分析:使用String类的matchs()分别统计符合正則表達式的每类字符的 ...

  4. 第4章1节《MonkeyRunner源码剖析》ADB协议及服务: ADB协议概览OVERVIEW.TXT翻译参考(原创)

    天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...

  5. 客户端javascript

    <script> function moveon(){ var answer=confirm("hello,good morning!");//通过弹出对话框询问用户 ...

  6. Android注入事件的三种方法比较

    方法1:使用内部APIs 该方法和其他所有内部没有向外正式公布的APIs一样存在它自己的风险.原理是通过获得WindowManager的一个实例来访问injectKeyEvent/injectPoin ...

  7. MonkeyDevcie API 实践全记录

    1.    背景 使用SDK自带的NotePad应用作为实践目标应用,目的是对MonkeyDevice拥有的成员方法做一个初步的了解. 以下是官方列出的方法的Overview. Return Type ...

  8. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  9. C语言两个libxml2库使用的问题

    最近使用libxml2想做点东西,翻看一些example后还是有些疑问,去segmentfault问了下,感谢@pingjiang的热心解答,问题解决,记录如下 (一)如下是一个XML文件,p为根结点 ...

  10. Spring IOC之Classpath扫描和管理的组件

    在前面的大部分例子我们使用XML去指明配置数据去定义在Spring容器中的每一个BeanDefinition.上一节我们展示了如何在 代码层注解的方式来提供大量的配置信息.即使在这些例子中,但是,基础 ...