前端刚实习的一些建议(包含一些问题的解决：移动端滑动监听不灵敏，video层级过高)

     自己刚实习（前端岗位），也算完整的做了一个项目，我感觉在项目中更多的是熟悉公司的业务逻辑，每个公司都有自己的一套构建方案，也有自己的环境，比如测试环境，预发布环境等等。
写这个主要是想分享一下，我在公司这一段时间所接受到的东西，前面也说了，每个公司都有每个公司的业务逻辑，也有自己的一套构建方案，所以公司不同，索要熟悉的业务也不同，甚至部门不同，还会有所不同。下面是我的一些个人关于这段时间的一个总结，希望能给刚实习的朋友一点帮助。
     1.我们在接到项目的时候，会着急去做，先做一点是一点，要尽快的完成任务，我们每一个人都是这样，刚实习嘛，要多做，这没什么问题，我也是这样，然后我就赶忙的写，想到什么就写什么，但是，因为从开始就没有一个好的构思（好的构思是指你项目中所用的布局，所选用的框架等等），导致你的项目，无论是可维护性，可扩展性等等，都不尽人意，扩展性，比如新的需求添加进来之后，在你项目的基础上，添加新的需求，如果刚开始没有一个好的构思的话，你会发现添加新的需求会非常非常的费劲，如果构思非常好的话，只需要简单的几行代码就搞定的事，你却需要非常非常多的代码去解决这个需求，在这我非常有感触。所以在你拿到项目需求的时候，一定不要着急去做，要想想项目中可能遇到的问题，以及解决方案，虽然我们不可能100%的想到遇到的所有问题，但是50%及以上还是没什么问题的，所以，先构思，一定要有一个好的构思方案才能写出好的代码。
     2.关于移动端视频的播放，这个是一大坑点，不同的浏览器会采取不同的措施，微信内置浏览器会调起一个全屏播放，这个是x5的播放器，而其他的浏览器会有不同的反应，有的会全屏，有的不会，所以关于浏览器的视频播放这块，需要你们重点考虑一下。我可以给你们一些建议，关于IOS端的话没什么问题，可以正常播放，引入h5的< video>然后，别忘了加上一个poster属性，在视频没播放的时候给一张海报图，但是Android这个端你会发现这样播放视频会有不同的结果。因为Android端的video层级很高，也就是说没有什么可以覆盖在video之上，（说的过于绝对，还是有方法的，要不然怎么出现弹幕视频呀，是吧，不过并不适合我的项目），非常的不美观，简单一点的解决方案：在视频没有播放的时候，用图片当作视频然后再图片的正中央位置添加一个播放的按钮图片(并且给视频添加上display:none属性)，当用户点击图片中的播放按钮的时候，我们让图片和播放按钮全部消失，然后把视频的display属性修改为block，然后当视频暂停的时候，我们再然视频none，并且让图片的播放按钮显示出来，这是一种比较中性的解决方案。
     3.关于移动端的监听事件，有很多种解决方案，但是等你真的去做的时候，有可能会遇到我的问题，我是使用了zepot这库，也就是移动版的jquery，我添加了监听事件，swipeUp，swipeDown，swipeLeft，swipeRight，然后我们会发现，有的时候滑动会非常的不灵敏，多次滑动只会触发一次滑动事件，有很多方面的原因，其中有一点就是在浏览器本身也存在了监听滑动，比如UC浏览器，他监听右滑返回上一级，这样话，你的监听可能就会出现不灵敏的现象，这个时候我们想到了使用event.preventDefault()；思路不错，但是还有个小小的弯路，如果你单纯的在你监听的事件中添加这行代码，还会不灵敏；怎么办呢？代码如下（需要引入zepto）：

var main = $('.f-main');
main.on('touchstart', function(event) {
	event.preventDefault();
	main.on('swipeUp', function(event) {
		event.preventDefault();
		//上滑事件触发
	})
	main.on('swipeDown', function(event) {
		event.preventDefault();
			//下滑事件触发
	})
	main.on('swipeLeft', function(event) {
		event.preventDefault();
			//左滑事件触发
	})
	main.on('swipeRight', function(event) {
		event.preventDefault();
		//右滑事件触发
	})
	})

注意：我们需要提前一步禁止浏览器的默认事件，所以这样写，你的监听滑动会非常的灵敏并且代码也看似很简洁，但是需要注意一点就是你禁止了浏览器的默认事件，意味着什么呢？那就是< a>标签会失效，这个要注意做一些处理。
     4.emmm，注意写代码的规范性，每个公司都有它相对应的规范，这个要注意，还有，重要的事情说三遍，要有注释，注释，注释，你别写了几百行代码一个注释都没有，让人摸不着你写的是个什么东西。注意功能点用函数封装，然后调用，函数的上面写明函数是干嘛用的，然后函数的命名需要英文，然后驼峰命名法。你的代码不是你一个人的，在团队中要考虑到比人的感受，你不知道你的代码以后别人是不是会扩展功能，别人会不会复用你的代码，所以注释要写好。
     5.QA，这个我是实习的时候才了解的，我们写好的代码，需要交给QA去审查，当然他不是看你的代码，而是看你的效果，满不满足要求。有问题就要重新修改。
     6.视觉走查，这个流程，视觉会细致的看你的效果设计，包括各种，行间距，px距离等等，可能你不信，几px的差距，视觉都能给你找出来，用工具测量的。所以严格按照视觉稿走。
     7.最后可能要给产品看一下，当然有的有，有的没有。
     8.总结一下整个流程，首先我们接到需求，然后拿到交互稿和视觉稿，然后我们需要花点时间先构思一下，根据视觉稿，先做出静态的网页，然后根据交互稿做交互（其实就是用js写一些动态的东西）然后我们将代码部署到测试环境，交给QA（或者是测试人员）检查代码，他们只是看你的效果，因为他们不懂代码，当然QA会发现你代码中的一些问题，你需要即使的改正，最后，视觉人员会过一遍视觉，有没有问题，然后最终上线，你以为上线就没事了？No，然后回溯，你做的项目只是一个大项目中的一小部分，然后会有人站在用户的角度，审查整个项目是否有问题，有问题之后再重新修改。
     9.上面提到一个视觉稿，还有一个交互稿，这是你开发的时候用的两个，一个用来做静态布局，一个是你写js用来进行交互的。

总结：其实刚实习，更多的是熟悉一下公司的业务，和公司的业务。也就是由生到熟的过程。当然有时间的话注意提高自己。