前端的开发过程中主要有以下流程: 编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。
产品最终的结果是原型图,而原型图可以理解为设计的草图
设计师的结果是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;