前端自我修养--知识点总结

**

项目经验总结

**

一、v-if和v-show 的区别

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。具体如下：

1、实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点
v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
①、v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点
②、v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

2、编译过程
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
①、v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
②、v-show只是简单的基于css切换；

3、编译条件
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
①、v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；
②、v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

4、性能消耗
①、v-if有更高的切换消耗，不适合做频繁的切换；
②、v-show有更高的初始渲染消耗，适合做频繁的切换；

二、关于${pageContext.request.contextPath}的理解 （转载）

${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于<%=request.getContextPath()%> 。
也就是取出部署的应用程序名或者是当前的项目名称

比如我的项目名称是demo1在浏览器中输入为http://localhost:8080/demo1/a.jsp ${pageContext.request.contextPath}或<%=request.getContextPath()%>取出来的就是/demo1,而"/"代表的含义就是http://localhost:8080

故有时候项目中这样写${pageContext.request.contextPath}/a.jsp

绝对路径与相对路径的比较

１）采用相对路径遇到的问题

        相对路径固然比较灵活，但如果想复制页面内的代码却变得比较困难，因为不同的页面具有不同的相对路径，复制后必须修改每一个连接的路径。 

如果页面被多于一个的页面所包含，那么被包含页面中的相对路径将是不正确的。
如果采用Struts的Action返回页面，那么由于页面路径与 Action路径不同，使得浏览器无法正确解释页面中的路径，如页面为/pages/cust/cust.jsp，图片所有目录为/images /title.gif，这时在/pages/cust/cust.jsp中的所用的路径为”http://images.cnblogs.com /title.gif”，但是如果某一个Action的Forward指向这个JSP文件，而这个Action的路径为/cust/manage.do， 那么页面内容中”http://images.cnblogs.com/title.gif”就不再指向正确的路径了。
解决以上问题似乎只有使用绝对路径了。

２）采用绝对路径遇到的问题

随
着不同的Web应用发布方式，绝对路径的值也不同。如Web应用发布为MyApp，则路径”/MyApp/images/title.gif”是正确的，
但发布为另一应用时如MyApp2，这个路径就不对了，也许这个情况比较少，但以default方式发布Web应用时以上绝对路径也不
同：”/images/title.gif”。

3)．解决方案

１）采用绝对路径，但为了解决不同部署方式的差别，在所有非struts标签的路径前加$pageContext.request.contextPath，如原路径为：”/images/title.gif”，改为“${pageContext.request.contextPath}/images/title.gif”。
代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。

缺点：
操作不便，其他工具无法正确解释${pageContext.request.contextPath}
２） 采用相对路径，在每个JSP文件中加入base标签，如：

这样所有的路径都可以使用相对路径。

缺点：
对于被包含的文件依然无效。
真正使用时需要灵活应用１）和２），写出更加健壮的代码。

在使用的时候可以使 用$pageContext.request.contextPath，也同时可以使用<${pageContext.request.contextPath}，放入一个JSP文件中，将用C：set放入一个变量中，然后在用的时候用EL 表达式取出来。

[java] view plain copy print?

<c:set var=“ctx” value="${pageContext.request.contextPath}" />