zoukankan      html  css  js  c++  java
  • IceMx.Mvc 我的js MVC 框架 一、html代码的分离(视图)

    介绍

    本人菜鸟,一些自己的浅薄见解,望各位大神指正。

    本框架有以下优点

    1、简单(调用简单、实现简单、不过度设计)

    2、视图、控制器、模型分离(分离对于维护十分有必要)

    3、组件化(每一个mvc模块儿的实现都是一个组件的实现,M+V+C = 组件)

    视图的分离

    在博客园拜读了许多大神的js文章学到了不少东西,于是有了自己写一个JS MVC 框架的想法,动手写了一些东西拿出来和大家分享一下。

    众所周知MVC  M模型 C 控制器 V 视图

    以前曾做过把视图和逻辑分离 算是两层架构吧

    当时的想法是 用html 文件单独存放html代码,在需要的时候动态载入,这样的好处是可以利用cdn加速,因为html代码是静态的嘛。

    先来看看以前的丑陋代码

    htm+="<div>文章标题</div>"
    htm+="<div>文章文章内容</div>"
    htm+="<div>评论列表</div>";

    这种代码很多很长很乱,很多时候美工需要维护这些代码,这个时候他就犯愁了,谁维护谁犯愁。

    用html文件单独存放这些html的话就省去了拼接,而且维护更容易维护,并且用vs打开的话你会看到完整的格式,管理很好管理。

    实现的方式以前是利用jquery 的load 方法把视图加载到一个页面的一个隐藏div中,然后就可以给控制器(C)利用了。

    视图大概的样子

    1 <textarea style='display:none' id='view1'>
    2 <div>文章标题</div>
    3 <div>文章内容</div>
    4 <div>评论列表</div>
    5 </textarea>

    为什么要加textarea 呢 ?因为如果不放到textarea里的话,如果视图里面有图片之类的东西,在加载视图的时候会直接会立即请求图片,这个加载造成了延时,当时是这么想的,也不知道对不对。

    还有一个原因是如果不放到textarea  的话当控制器想页面创建视图的以后,同一个视图其实在页面就有两个版本了。感觉不太好。

    这样就达到了视图和逻辑的分离。他们之间唯一的关系就是控制器通过id来使用视图,和视图里面的元素。

    后来我对视图的加载进行了改进,放弃了用load方法加载视图的做法,因为这样会污染页面,该成了直接加载到变量里,把变量绑定到控制器里,这样会更干净一些。

    其他

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

  • 相关阅读:
    超链接标签、链接地址、锚文本及图片标签
    有序无序列表,div盛放逻辑版块,table表格
    函数的默认值与动态参数arguments的总结
    浏览器中常见的html语义化标签
    html基本介绍,了解html与css,html语法和结构
    js函数与作用域,了解函数基本概念
    JavaScrip流程控制之switch选择,for循环
    JavaScript之if流程控制演练,if写在区间内怎么解决
    JavaScript数据类型typeof()和转换
    C++走向远洋——60(十四周阅读程序、STL中的简单容器和迭代器)
  • 原文地址:https://www.cnblogs.com/ajimidan/p/3293223.html
Copyright © 2011-2022 走看看