初入前端小江湖

八月，需要色彩！

（在此声明，此文偏向于个人成长的日志，并非干货）

转眼已经在公司工作一个月了，菜鸟正在奔跑！

我印象中的前端是写html，css，js仅此而已。然而真正工作起来，并不是那么一回事，整个一个小组，正儿八经搞前端的人就我一个半吊子，其他人都是后台选手，前台会一点html结构。我相信我的工作环境应该在现在来说还是比较普遍的，专业做前端的团队有，但并不是很多，大公司更多的拿到的是一套大项目，前台只是很小的一块，作为一个以优化为主的职业，在项目主管看起来也算是可有可无了。所以从这个项目开始，前端的工作就没有受到重视，所以我负责了包括原图的设计，美工的切图，前端页面的实现，前后台接口的实现，以及一些后台的杂活。虽然是菜鸡，但也有翅膀。这一个月里，工作之余更多的是对后台的了解，因为学习两个还称不上，只能说看看视频了解了解。这个小项目也快完成了，我来总结一下期间遇到的一系列问题。

一、移动端的项目不用考虑兼容的问题，但是需要考虑弹性设计。

首先，我采用的是vw，vh等单位，页面元素基本都position:absolute；这样写起来超级累。而且这个项目需要大量图片，以及背景图片，即使background-size:100%;之后仍会出现图片拉伸变形等问题。最后以iphone4为原稿，逐渐增强。最后的结果是费力不讨好，样式被否定换回重做。

第二次设计，以iphone6为原稿，宽度百分百，高度写死的方式，并且用媒体查询修改一些差的离谱的。期间考虑考使用rem的方式写页面，进过研究表明，rem近似于宽度百分百，对于高度自适应这个问题还是无法实现，所以现在移动端的页面大多还是高度写死，宽度自适应。

问题与改善。css3动画无法实现的问题，在iPhone手机能实现功能，安卓以三星为代表的手机无法实现微信自带浏览器css3，animation动画，至今无法解决。

        看视频以及前辈指导，背景图片需要单独放在一个div中设置

position:absolute;z-index:-1;background-size:100%;height:100%;width:100%;

页面元素的样式尽量不用写position:absolute;会出现因为手机屏幕大小不同导致多个元素挤压在一起的情况。

另外若不想手机页面元素超过整个屏幕的高度而出现滚动条的话，尽量不用margin，用padding。

二、关于JQ动态添加的元素无法绑定事件的情况

直接在动态添加的元素写事件如

var nav='<div><img src='' alt='' onclick='view()'/></div>';
$('body').append(nav);
function view(){
alert(ok);
}

至于为动态添加元素的父元素绑定on，我的情况是整个页面都是用JQ动态添加的，所以on事件无法使用。

三、刷新当前页面与关闭当前页面

最开始写的代码是a标签href="当前网页的地址"，结果在chrome上测试好用，在微信自带浏览器上就不好用了。

解决方法是在url后面加时间即：href="url&t="+new Date().getTime();

关闭页面最开始写的是window.close();然而并不好用，微信自带浏览器真实绝了。

解决方法是引用微信的JS方法，http://res.wx.qq.com/open/js/jweixin-1.0.0.js

wx.closeWindow();

四、移动端实现PC端hover的方法

click事件发生在点击结束之后，一定意义上也就是移动端的touchend。这并不符合用户体验要求。

解决方法是为body绑定touchStart事件，并且：active伪类实现，相同效果

JS部分：

try{
$('body').bind('touchStart',function(){})
}catch(e){}

CSS部分：

a{color:black;}
a:active{color:red;}

五、页面加载缓慢

真正运行这个项目的时候加载特别慢，一方面与服务器带宽太小有关，另一方面前端加载东西过多也有待优化。

1、引入的css和js尽量小于4个，有必要把一些JS合并，css压缩

2、如bootstrap，animation.css这样的文件只用其中的一小部分可以把需要用到的css粘贴出来而不需要整个文件引用。

3、关于DOM操作页面，尽量少的使用DOM操作以提升加载速度。并且减少页面的节点

4、必要时制作加载页面。

5、图标尽量使用雪碧图。

6、少引用字体。

以上是我的一些总结，下面我要写一些项目的改进，虽然项目已经结束了：

1、关于页面的过渡，只是简单的show、hide太死板，很难看。下次制作的话无论首屏页面的动画还是过渡页面都用animation.css制作动画，增强用户体验。

2、设计加载页面。

3、首屏与内容页分离，加载首屏的加载速度，增强用户体验

4、加入音乐

5、傻瓜式布局，让用户真正做到dont make me think;