前端面试遇到的项目难点？
2024-11-26 10:12:31
业务逻辑很复杂而且多变
『前端的逻辑复杂度基本不如后端』这个只是但从数据处理的角度来看的，前端对于数据处理的确是模板+变量一套一展示就好了，这个是挺简单的。
前端逻辑复杂度主要在于数据+UI+交互的实现，就比如一个简单的多tab页的功能，可以用CSS实现、用JS实现，JS可以通过切换removeDOM或者添加classname隐藏，虽然效果上都可以实现，removeDOM无法原有结构的状态，添加classname的CSS方式很难实现初始化状态。除此之外还可能需要对浏览器进行兼容性处理+响应式。然后突然来个业务需求说要加个iframe嵌入别人的页面，或者改什么效果，如果之前开发的不合理，基本上要重做了。
相比后端，只输出数据模型给前端，如果业务不需要什么字段了，甚至让前端不读取好了，改都不用改。我们几次大的业务平台重构，前端基本要重新开发一遍（效果、交互完全不同），后端模型和数据库则可以递进式的复用、扩展、升级。这也是导致前端需要堆人大力出奇迹的问题。
垂直领域运李解决方案很难
切页面是没什么难度的，但是在淘宝一到双十一、双十二大促根据经常多变的运营需求切几百个页面就很难了。这已经不是堆人堆外包可以解决的了，所以我们有TMS等各种运营系统，前端切模块，运营自己设置图片、文案、组装成运营页面，想改自己在后台改不用麻烦前端。这一套系统是个比较庞大的工程，从模块规范、模块开发工具链、模块发布和版本管理、在线管理、在线可视化搭建、数据填写和数据源导入、页面生成和CDN同步等等，都需要前端架构师设计然后开发。设计这个系统是很难的。
再比如富文本内容发布业务需求，光是一个富文本编辑器就很复杂，要实现各种功能和兼容性，更复杂的是要适应业务发展。当时刚开始交接淘宝内容业务的时候，需要重新开发编辑器等，跟后端大神们进行讨论推测旁配迟未来业务可能会有大量表单而且需要完全的数据驱动，所以我们前端设计开发了现在有个项目表单很多，用什么技术框架合适？-知乎技术产品然后后端有对应的SDK进行解析和数据存储、表单生成服务，前端只需要开发组件，然后后端按照业务需求进行配置即可产出内容发布表单。
此外，富文本我们选用了JSONbase的存储，对比HTMLbase的编辑器，因为淘宝内容详情页充满了各种商品、优惠券、店铺等信息，而且这些信息是需要被理解、识别而且在详情页输出前实时补全最新价格、优惠券可用状态、店铺名等信息的。用传统输出HTML的编辑器输出，让后端解析的话复杂度太高了，每一种素材你都需要设计、约束特定的HTML标记让后端进行解析。所以我们基于跳转中...封装了一套JSONbase的富文本编辑器，设计了完全数据驱动的插件机制，可以通过配置任意控制要提供的功能等。
?????
??????虽然知乎的编辑器也是基于draft-js开发的，但遇到的业务挑战完全不同。它不需要功能动态变化，因为所有人都一样。然后不知道是后端的数据处理逻辑的问题，它在提交和回填的时候是通过HTML作为媒介进行传播，将draft-js的JSON数据协议转成HTML提交给后端存储。所以不同业务场景、特点，需要完卖贺全不同的前端解决方案，在开发这些垂直解决方案的时候，业务分析、技术选型、架构设计、开发落地是非常难的。
你觉得web前端项目的难点有哪些项目开发难点：
1.Web架构的独特帆氏颤性
2.Web标态败准和相关技术的纷繁复杂和飞速发展
3.浏览器兼容性
4.交叉领域和多重目标
5.组织核岁架构和开发流程
前端面试中遇到的问题总结
}
.containerdiv{
width:100px;
height:100px;
background-color:pink;/*方便看效果/
}
单行文本：
text-align:center/line-height等于行高
未知容器的宽高，利用transform属性：
div{
position:absolute;/相对定位或绝对定位均可/
width:500px;
height:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:pink;/方便看效果*/
}
缺点：烂漏迹不兼容ie8
4.表格布局(display:table-cell)
优点：写法容易如果不指定高度，内容会自搜厅动撑开
缺点：如果超出表格高度，其余表格也需要同时调整高度
5.网格布局
display:grid;
grid-template-rows:100px;
grid-template-columns:300pxauto300px;
缺点：需要指定高度
一、左边固定，右边自适应的饥并布局
二、右边固定，左边自适应的布局
（1）闭包的形式
(2)vue2的形式
functioncreatAry(m,n){
varary=[];
functionaryPush(m,n){
if(ary.length==m)returnary;//递归结束条件
ary.push(n);
returnaryPush(m,n);//这里必须要写return，否则输出为undefined
}
return(aryPush(m,n))
}
console.log(creatAry(3,4));
*json数组转object对象
*vueajax通信
前端开发的难点到底在什么地方?不同级别的前端面临的难点各不相同，不可一概而论；
业务开发的前端难点在于对业务的理解和把控能力；
平台开发的前端难点在于产品化的把控和推进能力。
观点1：不同级别的前端面临的难点各不相同，不可一概而论。
其他回答有说CSS难，有说CSS不难的，每个人水平不同，这样争论毫无意义。我刚学前端时觉得JS/CSS/浏览器兼容问题都很难，现在觉得也就那样，因为前端路子广，办法总比问题多。后来觉得要评估好需求，把控好项目质量比较难，很多时候我们是在干事，在解决问题，不是只埋头写代码，时间一长你会发现前端工作中，技术问题往往比较好解决，反而资源+协作问题比较麻烦。现在对我来说比较难的是快速产品化的能力，如何从无到有去做出一些有价值的东西。
举一个简单粗暴的例子吧：阿里前端很多，P5/P6一大把，但是P8/P9的非常少，为什么？进阶的难点在哪里？
前端开发的难点跟前端进阶的难点是非常相似的。阿里对每个前端层级都有一个标准，这也从侧面回答了这个问题，比如对P5来说，难点可能是写好业务代码，保证其灵活性和可维护性，能解决各种适配问题；对P6来说则需要独挡一面，能独立owner需求，而P7则需要在某方面技术有深迅闷入理解，等等。
能提出这个问题首先得恭喜题主，说明题主在当前阶段遇到瓶颈了，需要向下一个level出击了。
观点2：业务开发的前端难点在于对业务的理解和把控能力。
业务逻辑开发本身并不是难点，谁都可以写。但是对于你自己负责的这块业务，后续业务的发展方向和潜力，你有去了解过吗？当业务方提需求过来时你是只负责执行还是和业务方一起探讨更合理的方案？你有没有给自己负责的产品提过一些建议？做过一些改善措施？如果前端只是作为一个执行者，作为一种被调度的资源，那么即使最终项目取得了好的成绩，跟你有多大关系？你自己会有多大的成就感？
另外一个很重要的点：就是对业务的把控能力。业务方总是会催着上线，开发时间不断被压缩该怎么办？进度不如预期怎么办？开发遇到瓶颈怎么办？发布新功能翻车了怎么办？
我见过有默默加班保证进度的，也有跟需求方重新谈延期的，有发布出问题冲昌并手足无措的，也有自己默默修复的，有遇到瓶颈一筹莫展的，也有及时跟老板沟通，跟业务方撕逼的…如何优雅的处理这些问题，有时候比写代码更散迹难。为什么有的人业务代码逻辑混乱，写的一团糟？我不相信是智力问题，反倒更相信是对项目本身没有把控好，本来排了5天工作量的需求被业务方压到了3天，你还能保证写出健壮而不失风度的代码？
观点3：平台开发的前端难点在于产品化的把控和推进能力。
做业务时有人给你提需求，帮你出交互视觉稿，你只要负责写页面就行了。但是在支付宝前端，很多内部平台和技术产品都是技术自己主导，你需要自己发现问题，出方案，设计数据库，自己出页面，这是一个从无到有的创造的过程。并且要保证你做的东西是真正解决问题的，而不是做一些自己觉得很牛逼实际上并没有解决用户痛点的东西，用我老板的话说就是对产品的把控能力，不要跑偏了。前端是最容易做出产品化东西的工程师了，因为后端不会做UI，UI不会写代码，唯前端兼顾，这是最大优势。
再一个就是对产品的推进能力了，你做的东西可能需要各种资源？如何争取？可能牵扯到多方利益？如何权衡？东西做出来了如何推广?如何在用户的一片骂声中奋勇前进？
印象中很多平台型产品，刚开始投入使用时都是一片骂声，各种问题，说实话负责这些产品的程序员压力是相当大的，天天被骂还得彻夜帮别人解决问题，还得不断优化系统，你说难不难？
以上三点就是本文所展现的理念，希望能对大家有帮助。
面试Web前端需要注意什么？会面试哪些问题？作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：
第一：注意自己的仪容仪表
面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二：再次检查面试时所需的资料是否都已带全
这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因判缺为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样掘缓辩的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。
第三：面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。
第四：等候面试官时，仔细观察多了解面试公司
在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。
第五：放松心情，保持自信
面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉哪颤了，像以上五点细节性的东西也是一定要掌握的。
面试题系列：
网页链接
热门标签
