`

浏览器端的MVC模式

阅读更多
    为了达到多种风格切换的效果,已经不可以再象以前那样,进行无约束的html编码了。浏览器端的代码质量也不得不关心起来。
    对浏览器端代码,有3个部分,html,js,css。
    html- model
    css - view
    js  - controller

如:
对于一个日期控件
html中定义
<input type="text" class="date"/>

在css定义此date的样式
在js中的onDomReady中对所有定义为date的textinput,增加onclick的事件,达到弹出日期选择面板的效果。

按照这种方式开发,可以形成一套可重用性非常高的js/css库,并且大大的简化了页面的开发。

对于导航栏。
在html中定义
<div class="tree">
  <a>group a</a>
  <ul>
    <li><a>a1</a></li>
    <li><a>a2</a></li>
    <li><a>a3</a></li>
  </ul>
  <a>group b</a>
  <ul>
    <li><a>b1</a></li>
    <li><a>b2</a></li>
    <li><a>b3</a></li>
  </ul>
  <a>group c</a>
  <ul>
    <li><a>c1</a></li>
    <li><a>c2</a></li>
    <li><a>c3</a></li>
  </ul>
</div>

在css中定义其风格,在js中的onDomReady中,动态为tree中最上层的<a>增加onclick事件,达到展开/收起子节点的功能,可以做成树状或panel状。这样可以使树,菜单这些功能不再需要重复编码。

    对于这样一种编码的方式,确定html的结构,是非常重要的。对于上面导航栏的html,只定义了两层结构。如果要做成树的话,经常会出现3层甚至更多层。现在我迟迟没有确定一种确定的html结构,可以达到最简化的html,可以表达出一棵树的。
<node value="group a">
  <node value="a1"/>
  <node value="a2"/>
  <node value="sub node">
    <node value="sub1"/>
    <node value="sub2"/>
    <node value="sub sub">
      <node value="subsub1"/>
      <node value="subsub2"/>
    </node>
  </node>
</node>

如果可以这样,那该多好,可是这样不行,就算行也没有了链接的功能。哎,xml本身就是树状的结构,结果想表达一棵树还挺麻烦,谁可以提供一个html表达的最简单的树的格式?
分享到:
评论
6 楼 jasongreen 2007-08-13  
i_love_sc 写道
jasongreen 写道
javasciprt 对dom通过class进行寻找,是挺麻烦的,不知道有什么好的lib可以实现?


jquery


thank you  very much!!

发现jquery真是好东西。
5 楼 i_love_sc 2007-08-10  
jasongreen 写道
javasciprt 对dom通过class进行寻找,是挺麻烦的,不知道有什么好的lib可以实现?


jquery
4 楼 xly_971223 2007-08-09  
xhtml的过渡版和严格板就是要求我们这样做的
w3c的web标准把表现层抽象为:结构(xhtml) 表现(css0) 行为(js),目的是让表现层的开发更加规范
只可惜很多人都没有重视这些东东,都头来导致了表现层的维护成本太高
3 楼 一杯白开水 2007-08-09  
那就xpath吧,不过只能对XML进行查找, 你所要的lib可能就是这个,不过要结合js
2 楼 jasongreen 2007-08-09  
javasciprt 对dom通过class进行寻找,是挺麻烦的,不知道有什么好的lib可以实现?
1 楼 一杯白开水 2007-08-09  
用xml和xpath...?

相关推荐

    mvc模式jsp计算器

    **MVC模式与JSP计算器应用** 在Web开发领域,MVC(Model-View-Controller)模式是一种常用的设计模式,它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。MVC模式的主要目标是...

    MVC模式在Web应用中的一种实现.pdf

    传统的 MVC 模式实现方式是由 Model 和 Controller 在服务器端生成 View,然后将其传输到浏览器端,以便浏览器端进行显示。在这种实现方式下,大部分处理都集中在服务器端,而浏览器端的处理能力被闲置。然而,这种...

    jsp中的 mvc模式开发 实例

    本实例主要探讨如何在JSP中应用MVC模式进行开发,特别适合初学者学习。 **一、MVC模式介绍** MVC模式是一种软件设计模式,将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种...

    JSP-Servlet 简单mvc模式

    本项目“JSP-Servlet 简单mvc模式”旨在演示如何利用Java的JSP和Servlet技术实现一个基础的MVC架构。下面我们将深入探讨这一模式以及它在项目中的应用。 1. **模型(Model)**: 模型是应用程序的核心部分,负责...

    jsp编写的博客系统,采用mvc模式

    通过这个项目,你可以深入理解JSP和MVC模式在实际开发中的应用,同时也可以学习到如何设计和实现一个完整的Web应用。对于初学者,这是一个很好的实践平台,可以提升Web开发技能。而对于经验丰富的开发者,这个项目则...

    基于Servlet和jsp采用mvc模式开发的个人信息管理系统

    总的来说,JavaWeb开发利用Servlet处理后端逻辑,JSP生成动态网页,而MVC模式则提供了良好的架构设计,使得开发、测试和维护更为便捷。在个人信息管理系统中,这些技术的综合运用可以提供高效、安全的信息管理解决...

    JSP基于mvc模式的门户网站

    **JSP MVC模式详解** JSP(JavaServer Pages)是一种动态网页技术,它允许开发者将HTML代码与Java代码结合在一起,以实现服务器端的动态网页生成。在JSP中引入MVC(Model-View-Controller)模式,可以将业务逻辑、...

    MVC设计模式在Web开中的应用与研究.pdf

    在Web项目中,MVC模式的应用不仅提高了程序结构的合理性,降低了程序模块之间的耦合性,而且大大提高了代码的重用性。 MVC模式的三个组件构成:模型层(Model)、视图层(View)和控制层(Controller)。模型层负责...

    基于JSP MVC模式的简单计算器

    **基于JSP MVC模式的简单计算器** 在Web开发领域,模型-视图-控制器(Model-View-Controller,MVC)是一种广泛采用的设计模式,它将应用程序的不同部分分离,使得代码更加模块化、易于维护。在这个名为“MVCDemo3”...

    图书管理系统(mvc模式+javaweb)

    【图书管理系统(MVC模式+JavaWeb)】 图书管理系统是一个基于JavaWeb技术开发的应用,它采用了Model-View-Controller(MVC)设计模式,旨在实现对图书信息的管理,包括添加、删除、修改和查询等功能。这个系统并...

    一个学生信息管理系统,使用jsp+Servlet的MVC模式,mysql数据库

    《基于jsp+Servlet的MVC模式学生信息管理系统与MySQL数据库集成详解》 在现代教育管理中,信息系统的应用已经成为不可或缺的一部分。本系统——一个学生信息管理系统,采用的是经典的MVC(Model-View-Controller,...

    关于MVC开发模式

    这是因为MVC模式下增加了额外的层次,可能会增加服务器端的处理时间。 - **管理复杂性**:随着文件数量的增多,项目的管理变得越来越复杂。这要求开发者必须具备良好的项目管理和组织能力。 - **设计难度**:如何...

    MVC编程实训实验报告

    MVC模式是一种软件设计模式,常用于构建Web应用程序,它将应用程序的数据模型、用户界面和控制逻辑分离,使开发更加模块化,易于维护。 首先,实验的目的是实现以下功能: 1. 客户端能够上传任意文件到服务器,并将...

    基于 MVC模式的学生成绩管理系统

    【基于 MVC模式的学生成绩管理系统】是一种采用Model-View-Controller架构设计的Web应用程序,主要目的是将业务逻辑、数据模型和用户界面分离,提高代码的可维护性和可复用性。在本系统中,MyEclipse作为开发工具,...

    mvc模式用户注册及登录

    综上所述,"mvc模式用户注册及登录"是一个涵盖多种技术的综合实践,涉及MVC架构、JSP、AJAX以及安全措施,是Web开发中的基础且重要的一环。通过这样的系统,我们可以构建出高效、安全且用户体验良好的用户管理模块。

    基于MVC模式的旅游管理与推广系统设计和实现4800字.docx

    本系统采用B/S架构,服务器端处理业务逻辑,浏览器端负责展示界面。系统采用了MVC设计模式,其中: - **Model(模型)**:处理数据逻辑,负责数据与数据库的操作。 - **View(视图)**:处理数据显示,依据模型数据创建...

    34.在线音乐网站的设计与实现-基于JSP+ Mysql+B/S模式+MVC模式+SSM(SpringMVC4.2.3+Spri

    34.在线音乐网站的设计与实现|基于JSP+ Mysql+B/S模式+MVC模式+SSM(SpringMVC4.2.3+Spring4.2.3+Mybatis3.4.1)(可运行源码+数据库+lw) 内容概要:主要实现集人性化、高效率、便捷等优点于一身的在线音乐网站,完成...

    mvc模式下分页代码

    前端分页是在浏览器端处理分页,通常通过JavaScript或现代前端框架如React、Vue或Angular实现。这种方式可以减轻服务器的负担,但可能需要更多的客户端资源。前端分页通常需要与后端API交互,获取特定页面的数据,并...

    Servlet+JSP+JavaBean开发模式(MVC)开发用户登录注册程序

    **MVC架构**: MVC模式将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。在用户登录注册系统中: - **模型**(Model):JavaBean扮演模型角色,它持有数据并处理业务逻辑。 - **...

    J2EE平台上MVC设计模式的研究与实现.pdf

    ### J2EE平台上MVC设计模式的研究与实现 #### 概述 在现代软件开发,尤其是在Web应用领域,设计模式的运用已经成为提升软件质量和开发效率的关键。其中,MVC(Model-View-Controller)设计模式因其强大的组织能力...

Global site tag (gtag.js) - Google Analytics