我的外包日记

2014年10月24日，在经过了4个月的达内java培训后我正式进入IT行业，成为无锡某小型外包企业的一名雇员。

2014.10.27

    今天调试了半天hibernate的update语句无法更新而是新增一条数据，需要持久化类型的实体对象，调用set方法修改数据后再update。实际情况是前台页面的form上忘了加一句

<input type="hidden" name="user.id" value="${u.id }"/>
    没有将id值传递到Action中，没有主键信息所以无法找到对应数据更新只能新增插入数据。

    需要注意的是如果你是采用new对象再设置部分需要修改的属性然后update的话会将null更新到某些已经有内容的字段上，建议采用findById根据主键找到对象然后设置值，还有一个方法就是直接写hql语句，对于字段较多的情况执行效率更高。

2014.10.30
今天在找图标的时候偶然发现了个不错的资源。
阿里巴巴矢量图标库 http://www.iconfont.cn/repositories/10
其实这些都是特殊字体，可以通过申明字体，定义样式，最后再用对应编码来显示。

2014.10.31
html5中form新增了一个required属性（必填属性）。当表单中存在required属性的元素时，如果该元素的值为空，则无法提交表单。有了这个属性可以省去我们在js中写check校验了。

下午用jQuery写了一个简单的脚本来实现左右滑动切屏的功能。代码如下：
$(function(){
$("body").on("swipeleft",mySwipeleft);
$("body").on("swiperight",mySwiperight);
});   
function mySwipeleft(){
<!--获取当前page的页码，默认page的id格式为"pageX"-->
var pagenum=$.mobile.activePage.get(0).id.substring(4);
if(pagenum<10){
    $.mobile.changePage("#page"+(++pagenum),"slide", true, true); 
}
}
function mySwiperight(){
var pagenum=$.mobile.activePage.get(0).id.substring(4);
if(pagenum>1){
    $.mobile.changePage("#page"+(--pagenum),{transition:"slide",reverse:true}, true, true);
}
}


2014.11.02
今天学习了phoneGap插件的开发，并进行了测试。


2014.11.03
phoneGap中不使用<a href="XXX">加路由功能实现页面跳转，而是通过监听页面中的事件（如click）来实现跳转。这是为了避免网络通信过程中出现错误，第二次点击链接功能失效。（原理猜测：url地址被改变了而页面实际内容没变，再次点击浏览器“聪明”的发现地址相同没有进行跳转）


2014.11.05
今天遇到的一个问题，业务需求是点击删除按钮时替换它的img样式，然后弹出一个确认对话框，按确定删除，按取消将样式改回。写完代码在浏览器中显示效果不错，但是在手机测试时，还未修改样式就已弹出对话框，确认后就已删除，观察不到样式修改的效果。（弹出确认对话框时所有其他操作都被“冻结”）
然后我添加了一个延迟事件：setTimeout(function(){},100);
然而效果并不理想，经过测试：
$(this).attr("src","image/delete-2.png");
setTimeout(function(){alert("111")},10000);
fov_delete(this);
发现下方的fov_delete方法并不是等第二行的延迟事件执行结束后再运行的。给人感觉像是采用多线程的机制进行处理。其实不然，JS引擎是基于事件驱动，采用的是单线程运行机制。即JS引擎会只会顺序的从任务列表中取任务，并执行。SetTiemout和SetInternal这两个函数涉及到时间计数器，JS引擎本身就只能单线程运行，因此定时器需要由其他的外部线程来启动。所以对JS引擎而言，定时器线程可以被视为异步线程。但当定时器时间到达后，所触发的事件则必须在任务列表中排队，等候JS引擎的处理。
关于setTimeout下面有一个例子，可以帮助深入理解：
        setTimeout(function () { while (true) { } }, 1000);
        setTimeout(function () { alert('end 2'); }, 2000);
        setTimeout(function () { alert('end 1'); }, 100);
        alert('end');
      执行的结果是弹出‘end’‘end 1’，然后浏览器假死，就是不弹出‘end 2’。也就是说第一个settimeout里执行的时候是一个死循环，这个直接导致了理论上比它晚一秒执行的第二个settimeout里的函数被阻塞，这个和我们平时所理解的异步函数多线程互不干扰是不符的。
最终业务代码如下：（需要特别注意的时如果用到this，请先将其获取并赋值保存）
$(function(){
$('.fov_delete').click(
function(){
$(this).attr("src","image/delete-2.png");
/*手机测试时img的src还未来得及改变就已弹出confirm，
添加了一个延时方法，但是延时方法会破坏$(this)，
所以需要先将其获取赋值给obj*/
var obj=$(this);
setTimeout(function(){fov_delete(obj);},10);   
});
});
function fov_delete(obj){
if( confirm('您确定要删除吗？') ){
    $(obj).parent().parent().parent().remove();
}else{
$(obj).attr("src","image/delete.png");
}
}

2014.11.06
代码规范与优化非常重要,也许是程序猿的强迫症吧，看着一大堆的style直想吐。不改成规范的样式心里就难受。为了优美的样式有时反而“主次颠倒”了。小公司做外包一般都比较赶工期，不会太在意这些细节。而我会习惯性的考虑代码的复用性，使其能够更广泛的支持相似的功能，不论是css还是jQuery我基本不会去使用id选择器，而是会选用类选择器和层级选择。

2014.11.10
很多触类旁通的东西无需逐一询问别人自己测试下验证所想即可（大家不觉得自己想出来的知识记忆更深么？），知识都是这么一点一滴积累起来的。
代码如下：
    events: {'click #clickone>div':'showAddPage',
      'click #clicktwo>div':'showAddPage',
      'click #clickthree>div':'showAddPage'
    },
events:{}是PhoneGap API，通过JavaScript截获本地事件。它以一对event：function的形式捕捉事件并加以执行。其中event的格式（事件类型+空格+监听对象）后半部分（如：#clickone）非常类似css的选择器，从上述代码中可以看出已经使用了">"（子元素选择符）简化了，看到后我的第一反应是为何不进一步简化？想到就做，经测试完全可行。
代码如下：
events: {'click #clickone>div,#clicktwo>div,#clickthree>div':'showAddPage'},
仅仅只有这样吗？当然不！你可以随意测试你所知的css选择器。（比如:nth-child(odd)）


2014.11.11
今天在写html页面的时候意外遇到个问题，然后发现原来html源码中的换行会被浏览器解析成空格显示到页面中，通常我们源码换行的时候都是页面内容也换行或是切换到下一个块元素，所以我们基本察觉不到。比如今天我遇到的问题，简化一下就是这样：
我希望的显示效果是这样的：
html中：<div><img><span><img></div>
页面中：图字图
而实际上因为页面元素的属性过长（比如style、class、src等等）换行后变成这样：
html中：<div>
<img>
<span>
<img>
</div>
页面中：图 字 图
最终图与文字之间多了一个空格，百度了一下没找到什么好的解决方案，自己思索了一下在img上加了个margin:0 -10px;把空格占用的空间给顶回去了，问题就此结束。如果谁有去除源码换行带来的空格的方法记得联系我哦。


2014.11.24
今天调了半天接口，最后终于找到了问题所在：cancleOrder取消订单的接口名叫这个……以后要注意了，尤其是与他人合作的项目，还是复制黏贴的好，这种调用别人的东西不起眼的拼写错误，够你debug好久了。


2014.11.25
经过多次修改，手机端的前台界面UI基本已经完成，今天有时间就来总结一下这些日子的界面开发。我们选用的是jquerymobile这个开源框架，刚开始的时候都在学习如何使用它，说句实话jquerymobile的表现力非常丰富，各种炫酷的样式。但是并不适合我们这个项目，美工对于界面要求非常细致，很多时候我们不得不想办法覆盖掉框架自带的样式，对于某些渲染时自动添加的元素更是无可奈何（比如nvbar、listview），最后只得花大力气推倒重来，用html5原生的功能来实现。到头来我们只用到了jquerymobile封装好的方法功能类的东西，对于界面表现的css样式则是完全抛弃。我不禁思索，也许我们使用执行效率更高而界面表现力稍弱的jqmobi更加适合，jquerymobile大概更加适合制作界面随性的个人应用或是炫酷的时尚功能，对于风格严谨的企业应用还是要根据UI设计使用原生的html5元素。


2014.11.27
分享一下近些日子做前台设计得心得，有很多细节可以说，但我认为最重要的一点应该是整体框架布局。一般我都是在html中写好布局结构然后到Firefox中写css样式，边看效果边修改效率较高，当然chrome也很强大~但我用惯了Firefox^_^,以下是我归纳的心得，从大局到细节、从常用到偶尔遇到进行了阐述：


一、对齐方式
属性名称:float
描述:设置对象的浮动方式
语法:float:none|left|right;
技巧:可用margin或padding来控制与其他元素的距离。
注意:设置float属性后会使其脱离父元素，需要给父元素设置class="clearfix"创建一个隐形的内容为空的块来清除浮动。
.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}


二、定位样式
属性名称:position
描述:设置对象的定位方式
语法:position:static|fixed|relative|absolute;
static:采用标准文档流实现,为默认的定位方式。
fixed:脱离标准文档流,其与父对象的位置关系可以通过TRBL(top、bottom、left、right)进设置。
absolute:脱离标准文档流,,其与父对象的位置关系可以通过TRBL进设置。
relative:不脱离文档流,其TRBL的位置是相对于原来应该出现的位置发生偏移。
top(bottom、left、right)
描述:设置与父对象顶（底、左、右）部的距离
语法:top:value;
注意:以上所说的脱离文档流的定位方式对齐的父对象要求是除了static以外的定位方式，否则会继续向更上层的父元素对齐直到body，因此一般将需要定位的元素设为absolute，然后将其父元素设为relative。此外TRBL属性中top和bottom是相冲突的，你不可能同时与顶部和底部都去靠近对齐，left和right也是如此，默认情况（以及冲突情况）下是以top和left为基准。


三、div与table
div比起table的优势很明显，解析速度快，结构简单，配合css可以随心所欲的改变样式和定位，使用极其广泛，可谓万能元素；但是table仍未退役，当你需要表现整齐的表格内容时，table更加简单，可以很少甚至不设置样式，此外还有一点是垂直居中，div只能通过设置一些样式来模拟垂直居中，无法做到正真的自动垂直居中。
建议:布局时（尤其是大的整体布局）尽量使用div，当遇到表格式内容或者有需要做根据内容自动垂直居中的样式时使用table更加省力。
注意:使用table时将cellspacing和cellpadding设为0，避免边框线干扰。另外不清楚是不是jquerymobile自带的渲染造成的table中的文字较大,大约是正常的1.3倍，需要在table上设置一下fontsize:100%;或者为其中的文字内容设置时小一些。


四、一些其余的不常用的细节知识
元素叠放顺序:z-index，值越大显示位置越上层
文本样式：
加粗:<b>...</b>
加粗:<strong>...</strong>
倾斜:<i>...</i>
倾斜:<em>...</em>
下划线:<u>...</u>
删除线:<s>...</s>
删除线:<strike>...</strike>
上标:^...
下标:_...
<font>标记:<font face="字体" size="字号" color="颜色">...</font>
转译符：
大于号: &gt;
小于号: &lt;
连接符: &amp;
单引号: &apos;(IE不支持)/&#39;
双引号: &quot;
不间断空格:&nbsp;
注册商标:&reg;
版权符号:&copy;


2014.12.02
使用jquerymobile的一些注意事项：
1、命名，因为使用changepage的切换页面的时候两个页面会同时出现在屏幕中，此时它们的css甚至js会互相影响，尤其是id，由于其唯一性，当出现重复时只找到第一个就不再继续向下查找了。建议id和css在命名时前面加上页面名称缩写加斜杠，比如：mymsg_div_f。
2、尽量少在元素中写内置样式，样式和界面分离。这是为了方便维护和加强代码复用率，此外过多的样式会使源码过长元素的层次结构不清晰。（这条不仅仅是jquerymobile应该是所有的设计都应该遵循的）
3、尽量少在页面中写内部样式（即在html中写<style>……</style>）理由不仅仅是上面那一条，有些时候处于为了覆盖jquerymobile自带的样式而这样写（直接修改则会影响所有页面）但是这样写经常会为了省力而使用全局性的选择器如table{……}，这样在切换页面时如果下一个页面也有table元素则会被影响到，出现不希望看到的效果，切换完成时再瞬间修改成希望看到的样式，这样的用户体验很不好。
以上几点是我们在使用jquerymobile做项目时遇到的几个比较明显的问题（同时也是花了大力气整改的）此外还有些未解决的问题希望能够得到帮助：关于input输入框的问题，首先点击之后页面不会被软键盘顶上来，其次当输入框获得焦点时，页面可以向四周拖动（大约3px）正常情况下左右应该是固定的只能上下滑动，还有一点就是点击input之后再进行页面切换会有白条出现。