10.Web组件复用

简介: 1.静态包含(一个指令)在软件工程中构建可复用组件可极大的提高软件生产效率、增强系统的可维护性HTML标记对于一个web应用系统中的页面都是通用的,比如公司标志、版权声明、导航菜单JSP中引用的web组件复用的两种方式:静态包含、动态包含。

1.静态包含(一个指令)

在软件工程中构建可复用组件可极大的提高软件生产效率、增强系统的可维护性
HTML标记对于一个web应用系统中的页面都是通用的,比如公司标志、版权声明、导航菜单
JSP中引用的web组件复用的两种方式:静态包含、动态包含。

在JSP源文件转换成对应Servlet源文件时将当前JSP文件和其包含的所有其他文件合并成一个Servlet文件
JSP中的include伪指令实现静态包含
include标准语法:<%@include file=“地址”%>      

包含文件中要避免使用<html><body>等可能会影响原JSP网页中标签的元素
<%@include %>指令只有一个属性file
<%@include%>指令可以放在JSP页面的任意位置,其file所指的路径是相对路径

静态包含规则:

1.file属性值不能是一个动态表达式
错误示例:<% String myUrl=“copy.html” %><%@ include file=“<%=myUrl%>” %>

2.

File属性值不能向被包含的文件传递参数

错误示例:<%@ include file=“other.jsp?abc=qwe”%>

3.

由于被包含文件之间可以共享变量,尽量减少文件之间的联系,降低耦合度,增强可复用度

2.动态包含

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

动态包含是指客户端请求时,将请求转发给当前JSP文件包含的其他对象
使用JSP的include动作指令和forward动作指令实现动态包含
include 和forward相当与Servlet中的RequestDispatcher.include()和RequestDispatcher.forward()方法

 include动作指令:

include允许当前页面将客户端请求暂时转交给所包含的对象,一旦对象执行完毕,返回当前JSP页面
include动作指令相当于方法的调用
标准语法:<jsp:include page=“地址” flush=“true”>

动态包含作用域范围:

动态包含中的包含文件和被包含文件各自独立编译、执行,彼此之间不能访问各自定义的变量(即page作用域范围内的对象),只能共享request范围、session范围、application范围对象

include 动作指令规则:

page属性值可以是相对路径或代表相对路径的表达式;

page属性指向的文件既可以是动态文件也可以是静态文件

两种包含的比较:

 

include伪指令

include动作指令

规则

<%@include     %>

<jsp:include  />

编译时间

较慢(资源必须被解析)

较快

执行时间

较快

较慢(因为每次请求资源必须被解析)

灵活性

较差(页面内容必须固定)

较好(页面在运行时可动态选择)

动作发生的时间

页面转换期间

请求期间

被包含的内容

文件的内容

页面的输出

产生Servlet数目

1

n

 变静态包含被包含页面可以访问包含页面中的变量

静态包含所包含的文件能够含有影响整个页面的JSP内容(如:import语句,声明)

参数的传递:

静态包含不存在参数传递的问题
动态包含可以传递参数:
直接在包含动作中传递
使用<jsp:param>
使用request.set/getAttribute()方法

 使用注意事项:

静态包含:
被包含页面中的指令不能与包含页面中有冲突(要注意变量多次声明问题)
动态包含:
使用XML格式,不要忘记标签封口

forward动作指令:

forward动作指令允许将客户请求转发到另一个资源文件,即每当遇到此动作指令就停止执行当前的JSP,转而执行被转发的指定资源
语法格式:<jsp:forward page=“地址”/>
page属性必须存在,用于指定要包含的静态或动态文件,可以是字符串或表达式

forward指令与include动作指令

forward动作指令在调用转发操作后不会继续处理指令后的任何代码

include动作指令在调用转发操作后,完成转发操作后将继续处理指令后的代码

动态指令的参数传递:

使用<jsp:param name=“” value=“”/>可以传递一个或多个参数给动态页面
与include动作指令、forward动作指令一起使用
注意:<jsp:param />标签传递参数时,会替换request对象同名的参数值

3.使用JavaBean组件;

概述:

JavaBean通过封装属性和方法成为具有某种功能或者处理某个业务的对象,简称Bean

JavaBean中所有的属性最好定义为private,每个属性都定义public的setter和getter方法对其进行操作

 

JavaBean命名规则:

JSP使用JavaBean:

在JSP中使用<jsp:useBean>操作元素来加载JavaBean程序

使用<jsp:setProperty>操作元素来设置JavaBean的属性值

使用<jsp:getProperty>操作元素获取JavaBean的属性值

useBean动作指令:

属性

功能描述

示例

id

使用此变量名来分辨不同的Bean

id=“address”

scope

JavaBean存在的范围(作用域范围)

scope=“session”

class

JavaBean对应的类名

class=“AddressBean”

type

引用JavaBean变量的类型

type=“AddressBean”

beanName

装载序列化JavaBean名或创建实例类名,使用java.beans.Beans.instantiate方法

beanName=“AddressBean”

 

setProperty动作指令:

属性

功能描述

name

JSP页面中的JavaBean标识名称

property

JavaBean的属性名称

value

被赋予JavaBean属性的新值

param

HttpServletRequest的参数(参数名称与JavaBean名称不相同时需要设置)

getProperty()动作指令:
 

属性

功能描述

name

JSP页面中的JavaBean标识名称

property

JavaBean的属性名称

 
目录
相关文章
|
4月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
180 0
|
4月前
|
Web App开发 JavaScript 前端开发
[译] 用 Web Worker 改善 Vue 组件性能
[译] 用 Web Worker 改善 Vue 组件性能
|
2月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
78 2
|
2月前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
43 3
|
1月前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
51 0
|
5月前
|
Web App开发 前端开发 安全
2024年新一代WebOffice内嵌网页组件,Web网页在线编辑Word/Excel/PPT
WebOffice控件面临兼容性、用户体验和维护难题。随着浏览器更新,依赖插件的技术不再适用,如Chrome不再支持NPAPI和PPAPI。产品普遍不支持多版本Office并存,定制能力弱,升级复杂。猿大师办公助手提供了解决方案,它兼容多种浏览器,包括最新版和国产浏览器,不依赖插件,支持文档对比,具有丰富的功能和接口,兼容多种Office版本,允许源码级定制,提供终身技术支持,并实现静默在线升级。适用于多种行业和操作系统。
336 12
|
4月前
|
数据可视化 数据挖掘 持续交付
Axure Web端元件库:从Quick UI到500+组件的飞跃
在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能,赢得了全球设计师和开发者的信赖。而Axure Web端元件库,则是这一平台上的一颗璀璨明珠,它以超过500个精心设计的组件为基础,为设计师们打开了一扇通往高效、高质量原型设计的大门。
199 0
|
5月前
|
设计模式 JavaScript 前端开发
Web Components详解-组件通信
Web Components详解-组件通信
108 6
|
7月前
|
域名解析 缓存 网络协议
JavaEE精选-Web组件
JavaEE精选-Web组件
47 1
|
7月前
|
JavaScript 前端开发 API
Vue中的组件:构建现代Web应用的基石
Vue中的组件:构建现代Web应用的基石