//2016-06-01 至 2016-06-30 前端工作知识点总结
六月学习目标：
1、阅读完成《BackboneJs 实战》---ok
2、swipe 和slickjs的对比异同、slickjs图片响应式是否会变形、准备云涛分享首页优化主题
3、css3渐变色 ---ok
4、sourceTree的使用
5、angularJs
总结：
1、添加jar包：
在WEB-INF下的lib文件夹下，选中jar包右击-build path-add即可。在Referenced Libraries中会显示添加的jar包
2、 IE9对propertychange和input的兼容bug处理
解决方案一： 为ie9时设置定时器，一定时间内执行自定义的方法以模拟监听变化。
具体步骤如下：http://blog.csdn.net/cuixiping/article/details/7450542
解决方案二：为ie9时，使用js的监听，判断是否和和初始字符一致
具体步骤如下：http://www.tuicool.com/articles/3MjUNbU
//其他浏览器
$("#J_searchProduct").on("input propertychange",function(){
//执行自定义的方法，实现交互行为
});
//IE9兼容处理
var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = /(msie\s|trident.*rv:)([\w.]+)/.exec(userAgent.toLowerCase());
if (isIE != null) {
var IEVersion = "IE" + parseInt(isIE[2]);
if(IEVersion && IEVersion==="IE9"){
var searchInput = document.getElementById("J_searchProduct");
var lastValue = searchInput.value;
var onInput = function() {
if (lastValue !== searchInput.value) {
//执行自定义的方法，实现交互行为
}
};
var onFocusChange = function(event) {
if (event.type === "focus") {
document.addEventListener("selectionchange",onInput,false);
} else {
document.removeEventListener("selectionchange",false);
}
};
searchInput.addEventListener("input",false);
searchInput.addEventListener("focus",onFocusChange,false);
searchInput.addEventListener("blur",false);
}
}
3、ie9使用图片进行css3的兼容方式：
比如：css3渐变样式的实现。ie9只能使用图片替代。
HTML代码如下：
css代码如下：
//使用渐变的图片实现渐变样式
.leftMenuBg{
background: url(../../img/layout/icon_18.png);
}
//使用css3渐变实现渐变样式
.leftMenu{
width: 10px;
background: -webkit-linear-gradient(rgba(255,255,0.82),#80D763,#fff);
background: -moz-linear-gradient(rgba(255,#fff);
background: -ms-linear-gradient(rgba(255,#fff);
background: -o-linear-gradient(rgba(255,#fff);
background: linear-gradient(rgba(255,#fff);
}
注意：这里要把css3实现的样式类放在后面。
4、浏览器调试器直接取色的方法：
调试面板Element——点击任意一个有颜色的样式属性——点击颜色——点击toggle color picker的拾色器，就可以选择页面中任意位置的颜色值了，包括图片颜色的读取。
5、ps设置选取颜色设置透明度值：
选中选区后——右击——通过剪切的图层——再设置该图层透明度的值
ps选择中选区，改变颜色，不改变透明度。
选择魔棒选区下的快速选区工具——点击图片——ctrl+delete设置为背景色，不会改变图片个别像素的的透明度值。
6、
（1）复制后，命令行终端，按下键盘上的insert，可黏贴复制的内容
（2）端口的作用：通过端口来区分出同一台电脑内不同应用或者进程，从而实现一条物理网线（通过分组交换技术——比如internet）同时链接多个程序
（3）npm安装依赖模块，没指定registry：默认从npm官方安装
指定registry是从淘宝的源安装的。
（4）window终端新建一个文件夹mkdir/ 新建一个文件touch /查看文件夹ls /查看文件 vi
（5）superagent是个http方面的库，可以发起get \ post请求；
cheeiro用来从网页中以css selector取数。
7、跨行table，hover的处理方式：
方案一：
每一个整体的tr都用tbody来包裹，tbody:hover{ }
http://jo2.org/html-rowspan-tr-hover/
方案二：
给每一个有跨行的tr都加一个类，tr:not(.noHover):hover{ }
或者给整个table加一个类，table:not(.noHover) tr:hover{ }
8、
后台报错： ShiroUser cannot be resolved to a type
原因：可能是jsp没有加载相关的包
解决方案：jsp中顶部引入包，比如：
<%@ page language="java" import="org.apache.shiro.SecurityUtils"%>
<%@ page language="java" import="xxxxxxxxxxxxxxxxxxxxxxx.shiro.ShiroUser"%>
9、ctrl+shift+N 新建文件夹
体会：
1、有必要在每天固定的时间，一点一点的吸收东西，每天一点。比如看博文，看github上别人写的学习教程，跟着做，算是入个门。
2、对于页面的细节，应该静下心来，一点一点优化，很多觉得解决不了的，原来是自己太浮躁啦，还是可以解决的，多思考，静下心。这一个月也主要都在做一些页面的细节优化。
关键是积累经验，快速解决小细节问题，记录每次新问题的处理方式。