标签：style blog http color os io 使用 java ar
乐帝来到新的实习单位，也许是之前面试或者在爱奇艺实习的履历，很快被项目组“委以重任”。而不是老套路刚入职，先在架构师那培训两周，专心钻研框架，不问具体业务。乐帝只有几天看框架的时间，当被分配给框架页面时，还是不能得心应手，正如同事所说，学习还得按部就班，写写例子，看代码是不行的。
目前这家公司类似《走出软件作坊》作者阿朱所在行业，是面向中大型企业，提供人才管理解决方案的软件公司，时髦的词叫SAAS。这类公司层次要比外包公司高，却还有很多外包公司的特点，不像互联网公司有很大的自驱动空间。而一个行业劳累与否，要看这个行业是自驱动需求，还是被客户赶着催工期，总是被动响应，应接不暇。
由于公司有“外包”性质，也就不免外包式的行事方式，开发流程上比上次实习单位要规范先进不少，但对员工流动性也较高。乐帝目前所在办公工位，对面坐着项目经理，统管技术开发。每日工作除了跟踪项目进度和产品进行关于工期的拉锯战，剩下的就是面试，面试，还是面试。看到项目经理吐槽面试者的水平，各种刷人。乐帝不得不说，自己当初面试，忽悠的水平还是到了一定境界。
这样的情况就显得有些滑稽，做专业人才管理软件的公司，会因为招不到合适的人而困扰，又有多少软件能够真正解决问题呢？
乐帝当初选择这家公司而不是腾讯，看重这家公司能给乐帝技术上的提升要好很多。这两周里，验证了当初乐帝在任职要求中的推测。前端团队分为业务团队和架构团队，业务团队基本由公司入职一年左右的同事构成，架构团队则卧虎藏龙。
处于这样专业的前端开发团队中，不再只依靠百度来解决零星问题，而是有了一个广泛的知识面或者说知识库，遇到的问题，总是可以请教用更短、更优的方式来解决，自身成长也更加快速。下面来谈点干货。
（一）注册绑定页面及微信二维码登陆页面开发
项目背景：根据原型图及指定页面的格式，开发出注册、绑定和二维码扫描登陆页面。
请看开发效果图：
由于注册和绑定的效果图只有文字区别，这里乐帝只贴了一张图，微信登录页的效果图，乐帝采用了微信网页版的样式，不同的是，为了内容表达更明确，将“微信登录”字体放大了。
从这两个页面开始，乐帝开始了PC端页面开发的工作，这也正是一个前端开发工程师基本的技能。本单位要求兼容IE8、9、10、chrome、firefox。转移到PC端开发，页面上的内容会变得复杂，还要考虑到浏览器兼容性，很多比较先进的标准都需要避免使用。
(1).首先要处理的是居中布局定宽的问题，电脑屏幕尺寸的变化要远大于移动端尺寸变化，那么首要解决就是定宽和居中。
.login-outsideWrapper{
position: relative;
top:0px;
width:960px;
margin:0 auto;
} 乐帝这里的类是包裹所有页面内容的类。
通过以上三点，为整个页面的构建打下了基础。
(2).下面看一个经常遇到的问题：
<div class="login-header">
<div class="login-logo">
<img src="100003_medias_201464_beisenlogo.png">
</div>
<div class="login-rightItem">
<span><a href="#">招聘首页</a></span>
<em class="login-itemBorder">|</em>
<span><a href="#">登录</a></span>
<em class="login-itemBorder">|</em>
<span><a href="#">注册</a></span>
</div>
<div class="login-clear"></div>
</div>.login-rightItem{
width: 400px;
<span style="color:#ff0000;">float: right;</span>
font-size: 12px;
line-height: 80px;
margin-right: 65px;
text-align: right;
}<div style="clear:both;"></div>上述代码中text-align: right;保证了表单字体右对齐。
(3).绝对定位
构建了以上内容，当构建如果内容靠相对定位（relative）解决，那么相对位移只是视觉上的假象，在页面上还是会占据相应区域，致使对于不同浏览器会出现不同的位移差。这里乐帝采取绝对定位（absolute）来确定构建页面。
.login-outerWrapper{
<span style="color:#ff0000;">position: absolute;</span>
top:100px;
<span style="color:#ff0000;">left:50%;
width: 513px;
margin-left:-326px;
padding: 30px 70px 30px;</span>
border: 1px solid #c5cace;
border-radius: 1px;
background-color: #fff;
} 注册这个表单类，是通过绝对定位定位到指定位置的，同时代码中还包含了居中的问题。由于整个类是定宽的同时左右内边距也可以计算。在父级元素中居中，仅需要此外层元素右移50%（相对父元素），再相对自己宽度（内容宽+左右内边距）左移50%即可实现居中。
（3）.前景图还是后景图
让很多前端同仁纠结的在于，页面开发完还没完，兼容性测试经得起考验才会避免加班。而乐帝最开始开发注册页面时，涉及到背景图采用了css3的新属性background-size:cover。一拿给IE8检验，就露馅了。IE8根本不支持，这里同事给的建议是采用前景图构建背景，即通过绝对位移（absolute）将表单内容，移到img标签构造的前景图上，这样就能保证了很好地兼容IE8。
这里学会了兼容性测试一个非常重要的技巧，那就是看一个标签是否起作用，查看浏览器响应标签是否有显示即可，乐帝以后开发就可以尽情采取前景图来构造背景了，但从web标准上来说，这不得不说是一个委曲求全的方案。
乐帝目前所在项目组可谓PC、移动端都要抓。而公司当初放弃原生app的原因在于原生app固有缺陷：
于是乎web的优势就显现出来了，轻量、服务器修改，立马可显示更新。公司战略在微信同开发移动版。而做出来的移动版页面由于手机屏幕尺寸不同，会导致图片比例失真，影响用户体验。
乐帝采取了一个短小精悍的解决方案。通过同比例拉伸图片到屏幕尺寸，多出轮播尺寸的图片部分则会被隐藏掉。当然这种方案的问题在于可能用户上传的关键内容被隐藏，不过产品会对客户上传图片进行尺寸要求，也就不会存在这些问题了。
代码如下：
$(window).load(function()
{
Show();
});
function Show()
{
var wrapWidth = ($("#wrapper").css('width'));
var wrapHeight = ($("#wrapper").css('height'));
var picHeight = ($("#bgImage").css('height'));
var picWidth = ($("#bgImage").css('width'));
var d1 = parseFloat(wrapWidth)/parseFloat(picWidth);
var d2 = parseFloat(wrapHeight)/parseFloat(picHeight);
if(d1<d2){
with(document.documentElement) //为语句设置默认对象
{
$("#bgImage").css('width',parseInt(d2*parseInt(picWidth))+"px");
$("#bgImage").css('height',wrapHeight);
};
}else{
with(document.documentElement)
{
$("#bgImage").css('width',wrapWidth);
$("#bgImage").css('height',parseInt(d1*parseInt(picHeight))+"px");
};
}//比较两个放大的比例，根据放大较大即填充满div慢的同比例放大
}//在图片载入前就对图片处理，而不走轮播效果（三）为站点添加百度统计
根据要求有自动安装和手动安装两种方法，但考虑到开发和运维职权分立，乐帝采用教程，找到了项目中所有页面都会引用的页脚文件，将生成的脚本片段加入其中，即可完成安装。
（四）小小的思绪
目前的实习单位，所有用到的工具都是对开源项目及现有代码的整合优化，“不重复造轮子”，大大提高了开发效率，你没必要为了一个输入框开发自己的文本编辑器，很多问题网上都会有成熟的解决方案或开源软件，很多时候，界定问题比解决方案更重要。
开源的意义
标签：style blog http color os io 使用 java ar
原文地址：http://blog.csdn.net/yingyiledi/article/details/39120211
