前端开发的一般流程

Posted 2020-08-15

前端的开发过程中主要有以下流程： 编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。
产品最终的结果是原型图，而原型图可以理解为设计的草图
设计师的结果是psd文件，他是很多个图层叠加在一起的结果，而前端的工作结果html页面，是把很多图层上的效果，有机的用html组织起来的过程。
前端是把转化后html交给下游服务端开发工程师，或叫后台开发，这个html里边包括一些交互的js文件等。总的来说前端是一个承前启后的岗位。
——————————
领导或甲方提出需求，然后产品分析需求，并且根据需求画出原型图，然后根据原型图出设计稿。
出完设计稿团队评审，过后交与前端制作静态页面，然后静态页面，交与设计审核，过后交给开发人员，进行动态数据的添加。
添加完之后，发布测试环境，产品测试领导审核，成功后，直接发布产品环境。或进行版本迭代。
这是整个的一个设计，开发，部署的流程。
————————

此段来自作者：豪情
链接：https://www.zhihu.com/question/32039469/answer/54382815
来源：知乎

产品经理下达任务----UI做图-------前端根据UI的图做效果-----与后台人员交流

工作中流程：
早上开早会，产品经理下达命令，讲述昨天完成任务，今日目标。

关于项目中的介绍：
一般有工作经验的人，常用的动态效果都会自己封装一个插件，比如说图片轮播，翻页，TAB切
换页面，这个时候面试官一定会问你，让你解释一下怎么封装的，这个时候就把源码跟解释一下就行
因为现在行业移动端比较火，先说移动端的项目！

移动端的项目：
用xxxjs做的，用这个JS实现了什么效果，在整体页面用什么布局模式，都适配那些，如果做到
适配的，介绍一个页面，从上到下，移动端会有上拉加载，下拉刷新，换页面加载，这些效果
要提前查好项目中的这些效果看源码知道是怎么做的，和面试官直接说就可以了，在这个项目
中遇到了哪些问题 如何解决的。（多说项目中的用到哪些技术，这些技术用在项目中的好处）

例如：
我做这个项目用到了
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~，实现下拉刷新，滑屏
，缩放等功能~，

在登录注册页，ios下软键盘弹出时挡住了登录文本框，经检查最外面盒子用了固定定位，ios
尽量不要用固定定位。

出现闪屏
解决：消除transition闪屏
.css{ 
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
-webkit-transform-style: preserve-3d; 
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ 
-webkit-backface-visibility: hidden; 
}

PC端的项目：

都调了哪些浏览器的兼容，在做这个项目中遇到的问题，如何解决的。

例如： IE6 垂直列表间隙的问题
问题：
li中有a且设置display:block时，ie6中列表间会出现空隙
解决：
1、li中加display:inline;
2、li使用float 然后 clear:both;
3、给包含的文本末尾添加一个空格
4、设置width

IE6背景闪烁的问题
问题：
链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有
将背景图缓存，每次触发hover的时候都会重新加载
解决：
可以用javascript设置ie6缓存这些图片：
document.execCommand("BackgroundImageCache",false,true);

关于frame
问题：
在IE中可以用 window.testFrame 取得该frame，FF中不行
解决方法：
window.top.document.getElementByIdx_x("testFrame").src = ‘xx.htm‘
window.top.frameName.location = ‘xx.htm‘

禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;