Web项目中前端页面引用外部Js和Css的路径问题

公众号：南宫一梦

Web项目中前端页面引用外部Js和Css的路径问题

一般我们在做Web项目时，通常会将多个页面引入的公共js和css文件抽取出来，单独写成一个公共文件，以期方便各个页面单独引入，达到复用。

1、抽取分离公共的js和css代码，并新建成一个文件取名 common.jsp。

<%@ taglib prefix="yy" uri="http://java.sun.com/jsp/jstl/core"%>
<yy:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<head><%--  ./表示当前文件所在目录 ,./可省略 --%><%-- /表示根目录  --%><%-- ../../ 代表上两级目录  --%><link href="${path}/statics/css/Top.css" rel="stylesheet" type="text/css"><link href="${path}/statics/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css"><%--2020/6/11新加--%><link href="${path}/statics/easyui/themes/insdep/easyui.css" rel="stylesheet" type="text/css"><link href="${path}/statics/easyui/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css"><link href="${path}/statics/easyui/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css"><link href="${path}/statics/easyui/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css"><link href="${path}/statics/easyui/themes/insdep/icon.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="${path}/statics/easyui/jquery.min.js"></script><script type="text/javascript" src="${path}/statics/js/jquery-form.js"></script><%--2020/6/11新加--%><script type="text/javascript" src="${path}/statics/easyui/jquery.cookie.js"></script><script type="text/javascript" src="${path}/statics/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${path}/statics/easyui/datagrid-detailview.js"></script><script type="text/javascript" src="${path}/statics/easyui/themes/insdep/jquery.insdep-extend.min.js"></script><script type="text/javascript" src="${path}/statics/uploader/swfobject.js"></script><%--2020/6/11新加--%><script type="text/javascript" src="${path}/statics/uploader/jquery.uploadify.v2.1.4.js"></script><%--2020/6/11新加--%><script type="text/javascript" src="${path}/statics/autocomplete/jquery.autocomplete.js"></script><%--2020/6/11新加--%></head>

相对路径

绝对路径

具体的某一个文件所在的路径，譬如：G:/testworkspace/logo.png

用法

项目中常用相对路径写法，因为当本地项目部署到服务器后，文件路径一般会发生改变，使用绝对路径会找不到对应的文件
但是这里我用的是${path}，好处在于其它页面引入common.jsp时，可以不用考虑其它页面所处的页面层级路径。
因为如果你在common.jsp里使用相对路径的话，当其它页面所处的页面层级路径不在同一层时，这时其它页面引入common.jsp后会导致部分页面找不到引入的资源(js和css)。

2、引入页面通过指令元素：include:<%@ include file=""%> 和动作元素include：<jsp:include page="" />

区别

指令元素include：<%@ include file=“文件的相对路径或绝对路径”%>
先包含合并成为一个文件，变量共享不能同名，然后进行编译。
动作元素include：<jsp:include page=“文件的相对路径或绝对路径” />
先各自编译成自己的Servlet，然后再包含。变量各自独立，可以同名不影响。

总结

指令元素include是在编译阶段就处理所需要的文件，优点是执行速度快。但是被处理的文件在逻辑和语法上依赖于当前的jsp页面，这导致jsp程序的逻辑变得复杂混乱。
动作元素include是在当前的JSP页面运行阶段才处理所需要引入的文件，缺点是执行要慢一点。但是被处理的文件在逻辑和语法上独立与当前的JSP页面。

强烈建议

正规开发中，个人强烈反对使用@include指令，而建议使用<jsp:include page=” ” />指令。保持jsp页面的逻辑语义清晰，比处理速度快(当然两者效率上差异不是很大)更重要。
使用<jsp:include page=” ” />指令的好处：假设现在又a.jsp，在a中include文件b.jsp，当jsp页面发生修改时
假设使用了@include：如果b被修改了，a不会发现b的改变，除非a也被修改了。
假设使用了jsp:include：如果b被修改了，执行时a马上会察觉到b的变化。

Web项目中前端页面引用外部Js和Css的路径问题相关推荐

Web项目中前端页面通过URL传中文或 # 特殊字符到后台出现乱码解决方案
对于刚入行新手来说碰到URL传递中文数据到后台出现乱码或是传递包含特使符号'#'后端获取不到的情况是比较头疼的事,这里我就告诉你这两个的解决的方式: 1.URL传递中文前端页面:中文字符串用 enc ...
jsp页面引用相关js，css文件路径问题
1. <script type="text/javascript" src="js/jquery-1.8.3.js"></script> ...
Struts项目中前端页面向后台页面传参中文出现乱码（Get请求）
问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...
html中body引入js,ASP.NET MVC中在 @RenderBody() 或者 @Html.Partial()中需要使用引入外部js，css...
今天想在后台封装一下bootstraptree这个插件,引入jquery.js bootstrap.js bootstrap.css bootstrap-tree.js后,我在页面查看脚本错误就连最简 ...
ASP.NET MVC中在 @RenderBody() 或者 @Html.Partial()中需要使用引入外部js，css
今天想在后台封装一下bootstraptree这个插件,引入jquery.js bootstrap.js bootstrap.css bootstrap-tree.js后,我在页面查看脚本错误就连最简 ...
web开发中前端页面是如何跟后端服务器数据交互的
后端服务器一般是指servlet容器,用于执行java源程序常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页. 这里前端 ...
web项目中的相对路径和绝对路径
文章目录一.相对路径与绝对路径 1.相对路径 1.绝对路径二. web应用中相对路径与绝对路径的使用三.Web 绝对路径与相对路径的利弊一.相对路径与绝对路径 1.相对路径相对路径就是相对于 ...
npm 引用子项目模块_Java / Web项目中的NPM模块Browser-Sync
npm 引用子项目模块 Browser-Sync是一个方便的基于Node.js的NPM模块,可用于更快的Web开发. 浏览器同步可在许多设备之间同步文件更改和交互. 最重要的功能是实时重新加载. 我们 ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...

Web项目中前端页面引用外部Js和Css的路径问题

Web项目中前端页面引用外部Js和Css的路径问题

1、抽取分离公共的js和css代码，并新建成一个文件取名 common.jsp。

相对路径

绝对路径

用法

2、引入页面通过指令元素：include:<%@ include file=""%> 和动作元素include：<jsp:include page="" />

区别

总结

强烈建议

Web项目中前端页面引用外部Js和Css的路径问题相关推荐

最新文章

热门文章

Web项目中前端页面引用外部Js和Css的路径问题

Web项目中前端页面引用外部Js和Css的路径问题

1、抽取分离公共的js和css代码，并新建成一个文件取名 common.jsp。

相对路径

绝对路径

用法

2、 引入页面通过指令元素：include:<%@ include file=""%> 和动作元素include：<jsp:include page="" />

区别

总结

强烈建议

Web项目中前端页面引用外部Js和Css的路径问题相关推荐

最新文章

热门文章

2、引入页面通过指令元素：include:<%@ include file=""%> 和动作元素include：<jsp:include page="" />