【2015-12-18】近期小结

1.Eclipse无法编译项目，工程上有一个大的红色感叹号！

最近一次碰到一种比较难搞的情况：web工程不编译了，并且项目上还出现了一个大的红色的感叹号（这个感叹号也表示该项目无法编译）。虽知道应该是去build path下找原因，但着实折腾了很久。。

把jar包删除了，再重新引用，问题依旧……

解决办法：其实我比较忽略problems的窗口，虽然绝大多数情况下，这个view里面的提示信息并没有什么卵用，但经过这次教训，我觉得当你遇到项目不生产class文件的类似棘手情况时，

查看Problems窗口很与必要！！

这次经人提醒，点开了Problems窗口，发现了一个组织项目正常编译的致命错误——jar包被打成一个User Library，而这些jar包里面混入了一个.ftl文件。就以为如此，我的项目才迟迟未能编译。remove之，终于

出现了熟悉的Building workspace进度条，最终终于正常生产class文件了！！

 

2.表示若干个参数（也有可能没有）用 Object... 

        public static void main(String[] args) {
		test();
		test("a", new Date());
		test(12);
	}
	
	public static void test(Object... objs) {
		//处理逻辑
	}

 上述代码，main方法都可以正常调用test方法。test方法的参数就是Object... objs; 并且当调用test方法传入了参数时，可以使用objs[n](n不应超过参数的个数-1)来访问第n+1个参数。

 但并不意味着obj是一个数组，比如你把test方法的声明改成test(Object[] objs)，而main方法依然如上述调用时，编译会报错！

 

3.注意到一个可能遇到的隐晦问题：注意类名相同，但类处在不同package中的情况。

比如我最近在做平台迁移的过程中，出现两个相同类名，但一个属于jar包，一个属于自定义的java类的接口。

定义一个实现类去实现的依然是jar包的接口，但我调用某方法，需要传入的实现类是应该实现自定义接口的，由此出现编译错误——虽然这个实现类是自定义的，但如果你实现的接口并不是该方法

要求的自定义的接口，会编译不通过的。虽然这2个接口同名，但他们没有任何关系，所以这个实现类实现哪个接口完全是两回事儿！

 

4.由js里ajax的url访问路径所发现的绝对路径、相对路径问题。

之前一直对绝对路径、相对路径傻傻分不清楚。今天终于有了一个比较清晰的概念。一般我们写ajax的url时，一般都是用绝对路径吧，这个是比较保险的做法。

绝对路径是以"/"打头的，相对路径则没有。比如你写Url: /test/action/get，则ajax会去访问如下地址：localhost:8080/test/action/get（当然localhost代表ip, test代表项目Context上下文）

一般来说，用绝对路径时，需要得出localhost:8080/test部分，即 ip:port/context部分，这部分的得出可以在Jsp中用request对象的方法求出，再在js中获取。但当你用的不是Jsp，而是模板

如ftl来渲染页面时，你就无法写java代码求出来了。。

还有一个比较经典的用纯粹的js来获取ip:port/context部分的方法：

function getRootPath() {
	var curWwwPath = window.document.location.href;
	var t = curWwwPath.lastIndexOf("/");
	var pathName = window.document.location.pathname;
	var pos = curWwwPath.indexOf(pathName);
	var localhostPath = curWwwPath.substring(0, pos);
	var projectName = pathName.substring(0, pathName.substr(1).indexOf("/")+1);
	return localhostPath + projectName;
}

 但这个方法具有潜在的局限性！

它跟你项目的部署方式有关，

方式一：如果你是通过把项目放在tomcat安装目录的webapps下，或者直接通过tomcat的Add and Remove部署时，这个方法是可行的。

方式二：但当你是通过修改conf/Catalina/localhost下的

ROOT.xml配置来部署时，此时你并不要指定项目的Context名，直接访问如localhost:8080就能访问项目主页了。。而且此时，上述的getRootPath()方法也不可行了！！

所以，当你不方便求出basePath即ip:port/context部分，而且又不想受限项目的部署方式时，你只能用相对路径了。。因为js和访问的url的相对位置是不受部署方式影响的。

同时，必须意识到一个重要的概念：写ajax的url用相对路径时，是目标url相对于该js所在的页面的url的相对路径，而不是相对于该js的访问url，也不是物理路径。

如目标url为:localhost:8080/test/action/get

该js所在的页面的访问url为：localhost:8080/test/action2/view 

则js写ajax的url相对路径时，应该是这样url: ../action/get（..表示退一级，此时是action所在级别，localhost:8080/test，再访问action2/get即可访问到目标url）

如果该js所在的页面的访问url为：localhost:8080/test/action/view 

则js写ajax的url相对路径时，应该是这样url: get（同级的话，直接去掉本身view，再写目标的get）

ajax的url访问路径小结：tomcat部署项目的方式虽然是方式一比较常见，而一般绝对路径的basePath部分（ip:port/context）也可以得到，但你不能完全忽视方式二的部署方式，此时通过js代码也不能

得到basePath;而且你前端的渲染方式不是jsp时，并不能通过java代码求出basePath。此时相对路径是个不错的选择！

 

5.div布局小结

1)：为div按百分比设置高度，需为其上一级设置高度，否则无效（因为html默认是按内容解释其高度的，刚开始是啥也没有的），如一个div的上一级是body，则需为body和html同时设置高度（用px数值或百分比），这样为该div设置高度才会有效。

（注：这儿之所也要为html设置高度，是因为递归，想让Body按百分比设置高度的话，body的上一级html当然也得设置啦！）

2)：只用一个margin属性代替margin-top margin-right margin-bottom margin-left 

margin:10px 5px 15px 20px;依次代表上边距margin-top为10px 右边距margin-right为5px 下边距margin-bottom为15px 左边距margin-left为20px（顺时针的方向就对了）

3)：设置若干个div在一行显示，每行都必须要有一个float:left属性。还需注意要在一行显示的div宽度要适中，否则会因为太宽而把排在其后面的div“挤”到下一行。

4):如果想让一个div在一排div（指的是若干个div在同一行）下面显示，需要一个大的div把这行div包起来。否则该div默认会重叠显示在顶部。

 

5):设置背景图片 background:url('图片路径')

 

6.实现微博圆形头像效果

<div class="imgDiv" align="center" ><a href="#"><img class="image" src="img/wy.png" /></a>网银</div>

 css（关键）——参考于「知乎」:

.imgDiv{ margin-left:42%;text-align:center;width: 40px;   height: 40px;   padding:2px;   background: #ececec;   border-radius:40px;   box-shadow: 0px 0px 1px rgba(0,0,0,0.4);   -moz-border-radius: 40px;   -webkit-border-radius: 40px;}
.image{  width:40px;    height:40px;    line-height: 0;		/* remove line-height */     display: inline-block;	/* circle wraps image */   border-radius: 50%;	/* relative value */   -moz-border-radius: 50%;   -webkit-border-radius: 50%;   transition: linear 0.25s;}

 

7.为td的width设百分比

最近在做表格的列宽设置时，发现td设width的百分比没什么用。因为发现一旦某一列的内容过长，它会把其他列的空间挤掉，本想通过设置一个百分比，让内容自动过长的时候可以自动换行，但结果无济于事。

解决办法：table设置样式style="table-layout:fixed;"  同时td加上样式td{word-wrap:break-word;}  就很有用哦，不信试试。

 

8.其他

1）使用bootstrap的select控件时，如果是动态加载option选项，则需要调用这一句刷新，否则会失效！

$('.selectpicker').selectpicker('refresh');  //其中.selectpicker为使用了bootstrap的select样式的下拉框的class~~

2）jquery数组对象使用[0]或get(0)方法得到的是dom对象，想使用JQuery对象必须再次用$符号括起来；

3）float:left使用的前提是被赋予该属性的div块同属于一个大的父div；