web前端开发面临的困难 前端开发过程中遇到过什么困难？
2023-09-01 05:02:20 | 我爱编程网
前端开发过程中遇到过什么困难？
前端开发 过程中遇到的困难还是很多1、面试中前端开发过程中遇到的困难这个问题主要是相看面试者是不是有独立解决问题的能力及解决问题的方案以及工作中的的一些两点
2、遇到这样的问题可以说出一个自己解决的比较完美的问题，如：vue不适合做cms，因为 单页面应用 对seo很不友好，解决的方法就是：我们使用nuxt技术，在保证使用vue语法开发的同时，也使用了服务端渲染技术保证了seo效果，这个过程突出了自己的学习nuxt等新技术的能力
3、另外也是有很多实际的开发问题不好解决，的但是那些自己解决不好的问题不适合 在面试的过程中说的
前端开发的难点到底在什么地方
业务逻辑很复杂而且多变
『前端的逻辑复杂度基本不如后端』这个只是但从数据处理的角度来看的，前端对于数据处理的确是模板 + 变量一套一展示就好了，这个是挺简单的。
前端逻辑复杂度主要在于数据 + UI + 交互的实现，就比如一个简单的多 tab 页的功能，可以用 CSS 实现、用 JS 实现，JS 可以通过切换 remove DOM 或者添加 classname 隐藏，虽然效果上都可以实现，remove DOM 无法原有结构的状态，添加 classname 的 CSS 方式很难实现初始化状态。除此之外还可能需要对浏览器进行兼容性处理 + 响应式。然后突然来个业务需求说要加个 iframe 嵌入别人的页面，或者改什么效果，如果之前开发的不合理，基本上要重做了。
相比后端，只输出 数据模型 给前端，如果业务不需要什么字段了，甚至让前端不读取好了，改都不用改。我们几次大的业务平台重构，前端基本要重新开发一遍（效果、交互完全不同），后端模型和数据库则可以递进式的复用、扩展、升级。这也是导致前端需要堆人大力出奇迹的问题。
垂直领域解决方案很难
切页面是没什么难度的，但是在淘宝一到双十一、 双十二 大促根据经常多变的运营需求切几百个页面就很难了。这已经不是堆人堆外包可以解决的了，所以我们有 TMS 等各种运营系统，前端切模块，运营自己设置图片、文案、组装成运营页面，想改自己在后台改不用麻烦前端。这一套系统是个比较庞大的工程，从模块规范、模块开发工具链、模块发布和版本管理、在线管理、在线可视化搭建、数据填写和数据源导入、页面生成和 CDN 同步等等，都需要前端架构师设计然后开发。设计这个系统是很难的。
再比如富文本内容发布业务需求，光是一个 富文本编辑器 就很复杂，要实现各种功能和兼容性，更复杂的是要适应业务发展。当时刚开始交接淘宝内容业务的时候，需要重新开发编辑器等，跟后端大神们进行讨论推测未来业务可能会有大量表单而且需要完全的数据驱动，所以我们前端设计开发了 现在有个项目表单很多，用什么技术框架合适？ - 知乎 技术产品然后后端有对应的 SDK 进行解析和数据存储、表单生成服务，前端只需要开发组件，然后后端按照业务需求进行配置即可产出内容发布表单。
此外，富文本我们选用了 JSON base 的存储，对比 HTML base 的编辑器，因为淘宝内容详情页充满了各种商品、优惠券、店铺等信息，而且这些信息是需要被理解、识别而且在详情页输出前实时补全最新价格、优惠券可用状态、店铺名等信息的。用传统输出 HTML 的编辑器输出，让后端解析的话复杂度太高了，每一种素材你都需要设计、约束特定的 HTML 标记让后端进行解析。所以我们基于 跳转中... 封装了一套 JSON base 的富文本编辑器，设计了完全数据驱动的插件机制，可以通过配置任意控制要提供的功能等。
虽然知乎的编辑器也是基于 draft-js 开发的，但遇到的业务挑战完全不同。它不需要功能动态变化，因为所有人都一样。然后不知道是后端的数据处理逻辑的问题，它在提交和回填的时候是通过 HTML 作为媒介进行传播，将 draft-js 的 JSON
数据协议
转成 HTML 提交给后端存储。所以不同业务场景、特点，需要完全不同的前端解决方案，在开发这些垂直解决方案的时候，业务分析、技术选型、架构设计、开发落地是非常难的。
我爱编程网
web前端工程师工作中遇到难以解决的问题
我爱编程网(https://www.52biancheng.com)小编还为大家带来web前端工程师工作中遇到难以解决的问题的相关内容。
1）.margin-top,margin-bottom不能正常显示时一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
div{height:0;overflow:hidden;}
例
CSS样式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法：在P标签前后各加2个空的div：<div></div>
二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2）.div层中高度自适应问题
网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
网站中用到最多了。
3）.div层中子层的居底部对齐问题
div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
对齐就涉及到了position定位问题；
例
div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近写的网站中 就用到了
4）.div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
只会成一条线了，此时在最外层的后面加上<div ></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix； 学生书网里用到最多了。
5）.解决IE8下div移位、错位等兼容性问题
在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.单行文字居中与字体样式问题
在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7）.鼠标滑上去的特殊效果
往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
例如 -home.cn/main.aspx
10）.ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
11）.list-style-image的用法
div中经常用到新闻列表前面有图标的样式，有两种简单的方法
一.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显示
二. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的小图标即可在ie6，ie7，ie8,ff中都正常显示但，ie6需要不断的刷新才能正常显示小图标；
12）.
IE6 li:hover兼容问题
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!］>
</script>
13）.ie6下支持position:absolute;
最近写一个短信平台的页面用到的底部固定的层，在ff和ie7,ie8下都是好的，可到ie6下就不行了，转了整个地球终于出来了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调用即可！详细请见“高度自适应屏幕尺寸！”
14）.border:none;与border:0;的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏
总结：
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。
15）.ie下。png的图片不会有灰色背景出现
注：首推PNG8，即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是，输出时把“杂边”设置为和背景接近的颜色
1.几经周折终于把ie6下.png有色图问题解决了，原来IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明图片部分，会显示为淡淡的灰绿色。在网页中头部加个代码<!--[if IE 6]>
<script type="text/javascript" src=" -content/themes/HotNewspro/js/pngfix.js "></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可！ 以上就是今天分享给大家的内容了，想要了解更多前端开发资讯，敬请关注我爱编程网！更多相关文章关注我爱编程网：www.52biancheng.com
免责声明：文章内容来自网络，如有侵权请及时联系删除。
请问python后端开发一般需要什么技术?第一阶段：Python语言基础主要学习Python最基础知识，如Python3、数据类型、字符串、函数、类、文件操作等。阶段课程结束后，学员需要完成Pygame实战飞机大战、2048等项目。第二阶段：Python语言高级主要学习Python库、正则表达式、进程线程、爬虫、遍历以及MySQL数据库。第三阶段：Pythonweb
如何在spark基础二次开发基于javaswing的pc客户端packageorg.jivesoftware.spark.ui;importjava.util.ArrayList;importorg.jivesoftware.spark.util.log.Log;importorg.jivesoftware.spark.util.ModelUtil;importorg.j
学Python的发展前景好吗随着近几年Python的飞速发展，应用范围逐步趋于广泛，后端开发、前端开发、爬虫、金融量化分析、人工智能、自动化运维、自动化运维、大数据，Python都有涉及。Python相对其他编程语言来讲，语法较简单，就算没有任何编程基础，我们也可以学习和掌握Python编程开发，是新时代的宠儿!因此参加Python工程师培训机构的人越来越多。Python有很多吸引程
javaweb开发工具有哪些1.JDK（Java开发工具包）如果你打算用Java开发一些小程序和应用程序，那么首先得给自己准备一个类似于JDK的工具，其中包括必要的JavaComplier、JavaRuntimeEnvironment（JRE）和JavaAPI。这是开始Java之旅的第一步。2.EclipseIDE如果咨询一些经验丰富的Java开发人员关于他们最喜欢的JavaI
初学者想学ARM嵌入式，应该选ARM9还是ARM11开发板？对于ARM嵌入式的初学者，建议用ARM9开发板。首先，从功能上来说，ARM11要比ARM9强一些，但是性能优异并不代表适合初学者。对于初学者来说ARM11的有些功能是冗余。其次，学习ARM9或者ARM11就在所难免学习其所支持的操作系统Linux（ARM11可以支持Android）。目前，市面上ARM9的开发版的价格要比AR
Python未来发展前景怎么样？首先从国家培养人才方向上来讲，国务院发布《新一代人工智能发展规划》，人工智能正式纳入国家发展战略，并且已经有数个省份将Python纳入到高考体系，国家计算机二级考试新增“Python语言程序设计”科目。这些都直接证明了Python的发展前景十分广阔。其次再说一下Python人才的供需情况，随着最近五年Python的持续走热，越来越多的公司开始使用Pyt
怎样用QtCreator编辑运行python脚本我们首先来看看QtCreator能不能编辑运行python脚本。可以看到新建项目的选项里并没有python相关的选项，看了并不能用QtCreator来管理python项目。我们来看看另一个方面，看看QtCreator能不能创建编辑python的相关文件吧。可以看到，有python的相关选项，点击左侧的Python标签，在中间部分可
java的开发环境是什么？java需要JDK来提供他的运行环境，装好JDK并设置好环境变量之后，就可以进行JAVA开发了，用文本文档就可以编写JAVA源码。不过为了提高编码质量和编写速度就需要一些开发工具了。开发工具我觉得最好用也是功能最强大的的就非eclipse莫属了，它是免费的，myeclipse要收费不过网上有好多注册码，要进行web开发的话就弄一个myeclipse吧。当然ecl
-
公司网站费用会计分录如何编制？2023-11-18 03:26:42
-
web前端开发好处 web前端工程师的优点和缺点2023-09-10 08:51:48
-
前端开发框架都有哪些2023-10-29 23:07:03
-
怎么用css 让整个table位置页面水平居中，2023-10-26 19:22:26
-
Web 前端自学，有哪些建议？2023-10-26 18:47:07
-
如何选择合适的web前端培训机构2023-10-20 19:50:40