$Web开发$Web开发人员最易犯下的10种常见毛病

Web开发人员最易犯下的10种常见毛病

对如何完成同一项任务,摆在我们眼前的方案选项仿佛无穷无尽,特别是在开发一套能够运作在现代络环境之下的站时。

Web开发人员首先需要挑选一套Web托管平台及底层数据存储机制,并利用由提供的工具编写HTML、CSS和JavaScript代码,斟酌如何实现设计效果和哪些潜伏JavaScript库/框架可能会被包括于其中。

一旦选择被细化到这一层面,我们就能在络上找到大量相干文章、论坛和示例,并借此了解如何打造出更加出色的Web使用体验。

但是不管有多少条道路可供选择,开发人员都有可能在自己的选项当中迷失方向。虽然其中有些毛病与特定方案相干,但也有一些共同的挑战横亘在每一名Web开发人员眼前。

因此通过一系列研究、经验与近期视察,我整理出了下面这份十大常见毛病清单——目前确切有很多Web开发人员还在饱受其困扰,而我也给出了自己的解决意见。

以下这份清单不分前后顺序。

1.编写陈腐的HTML代码

毛病:

互联在发展初期只提供有限的几种标记选项,而如今这类选项已变得相当丰富。但是某些陈腐的陋习当下依然存在,而且很多从业者在编写HTML代码时好像依然活在上个世纪。

具体实例包括使用table元素进行布局、在更合适使用其它语义标签时继续使用span或div元素,还有使用诸如center或font等不支持当前HTML标准的标签,乃至利用大量nbsp;将条目排布在页面当中。

影响:

编写上述带有浓郁上世纪风格的HTML代码可能致使标记复杂程度太高,进而在不同浏览器中出现彼此相异的运行效果。另外,我们也没有任何理由在微软Edge乃至是IE新版本(包括IE9、10与11)当中使用此类复杂的标记方式。

如何避免:

不要再使用table元素处理内容布局了,另外严格限制其在显示表格数据时的使用频率。充分了解当前有哪些标记选项可供使用,具体可以查看中的汇总。使用HTML代码来描写页面内容,而非定义内容的显示方式。要正确显示设计内容,请优先使用CSS。

2.“在我的浏览器中明明没有问题……”

毛病:

开发人员可能会偏爱某款特定浏览器或极度鄙视另外一款浏览器,而且会将这类带有偏见的观点带入页测试工作当中。

在某些情况下,我们乃至有可能将来自络的示例代码直接纳入到项目当中,而并没有测试其能够在其它浏览器中正确得以渲染。再有,某些浏览器会在样式方面具有不同的默认值设定。

影响:

编写一个只适用于特定浏览器的站点极可能会给使用其它浏览器的用户带来非常糟的访问体验。

如何避免:

在开发进程中针对每一款浏览器及其版本进行页测试明显是不现实的。不过我们可以每隔特定一段时间就利用多种浏览器来检查自己的站是不是能够正常运作,这算是种比较理想的折衷办法。

目前不管大家使用哪种首选开发平台,都有大量免费工具可以帮助各位实现测试工作,具体包括免费虚拟机或站点扫描工具。

Browsershots或BrowserStack等站还能够提供快照,帮助我们了解特定页面在不同浏览器/版本/平台上具有怎样的渲染效果。而VisualStudio等工具也能够利用不同浏览器显示我们目前正在开发的单一页面。当利用CSS进行设计时,请记得对所有默认值进行“重新设定”。

如果大家的站点使用了任何面向单一浏览器所创建的特殊CSS功能,那末请留意处理各类提供程序前缀,包括-webkit-、moz-或-ms-。

作为行业趋势指南,我建议大家认真查阅下面提供的各参考站点(皆为英文原文):

?微软Edge开发博客:Abreakfromthepast,part2:SayinggoodbyetoActiveX,VBScript,attachEvent…

?:CSSvendorprefixesconsideredharmful

?BruceLawson:OnInterExplorersupporting-webkit-vendorprefixes

虽然以上参考资料已解释了我们该如何避免提供程序前缀及其相干理由,但大家也可以点击此处(址:)通过具体建议了解更多解决办法(英文原文)。

3.注意调剂格式

毛病:

通过提示的方式向用户索取信息(特别是以输入文本字段的方式),并单纯假定该数据能够如预期般从用户处取得。

影响:

在默许信任用户输入信息时,我们有可能面临大量意料之外的麻烦。如果所要求的数据未能被正确取得,或所取得的数据与底层数据格式不兼容,那末页面极可能产生毛病。更加严重的是,某些针对站数据库的故意违背行动乃至足以构成注入式攻击。

如何避免:

第一条建议就是要确保用户能够清晰地了解到站要求其输入哪种数据类型。就目前而言,单纯给出“请输入地址”的提示可能代表着用户需要输入公司地址、家庭住址乃至是电子邮箱地址!

除作出针对性说明以外,我们还应当充分发挥现代HTML当中所提供的数据有效性验证技术。不管数据在浏览器端是不是被视为有效,我们务必要在服务器端一样对其进行验证。

永久不要在未确认字段内容符合数据类型要求的情况下,允许用户所输入的多行索引T-SQL语句使用站点数据。

4.反应速度太过缓慢

毛病:

对包含有大量高品质图象和/或图片的页面,我们应当利用img元素对其高度及宽度属性进行调剂。而来自页面中的CSS和JavaScript等文件链接常常也体积庞大。另外,源HTML标记的存在常常会带来不必要的复杂性与加载负担。

影响:

如何某个页面的完全渲染时间太长,那末一部分用户可能会放弃访问乃至不耐烦地重新加载全部页面。在某些情况下,如果页面的处理时耗太长,乃至可能引发其它未知毛病。

如何避免:

不要以为互联的传输速度愈来愈快就可以毫无顾忌地设计出臃肿的页面成果。相反,将来回于浏览器与站点之间的每一点流量都视为运营本钱。

图片可以说是页面臃肿问题的罪魁祸首,因此为了最大限度下降图片给页面带来的加载本钱,请从以下三个角度进行考量:

问问自己:“页面中所包括的所有图片都是必要的吗?”如果答案是否定的,那末去掉那些不必要的图象。大家也可以点击此处对自己的站进行扫描,从而获得建议以了解哪些图片可以进行紧缩。

利用ShrinkO’Matic或RIOT这类工具来将自己的图片尺寸控制在最低水平。

采取图片预加载方案。这虽然不会下降初始下载的具体本钱,但却能够让站点上其它使用相干图片的页面具有更出色的载入速度。

另一种降低成本的方式则是紧缩CSS与JavaScript链接文件的体积。目前我们可以选择大量工具来帮助自己完成这项评估工作,其中包括MinifyCSS和MinifyJS。

在结束第四点毛病之前,我们还得提一句,请在HTML当中使用style或script标签之前做出准确的判断(同第一点)。

5.编写出“应当能够起效”的代码

毛病:

无论是JavaScript还是运行在服务器端的代码,作为开发人员我们都应当通过测试来验证其实际运行效果,从而保证其一定能够在部署以后发挥预期作用。大家的代码在履行时不应引发任何毛病,由于在此之前我们已对其进行了充分测试。

影响:

包括未经测试代码的站点极可能以极为糟的方式在供最终用户使用时产生各类毛病。这不仅会严重影响到用户的实际感受,同时毛病信息内容的具体类型也可能会向打算入侵站点的黑客泄漏那些本该遭到严格保护的细节线索。

如何避免:

人是不可避免会出错的,因此我们应当将这类哲学思惟带入编程工作。在JavaScript当中,我们应当确保利用一切最好技术手段来避免毛病的产生,并在其实际出现后及时捕捉。另外一种有助于提高代码质量的办法就是针对未来可能出现的变更对代码进行单元测试。

服务器端的代码毛病必须要在用户还没有发觉时即被发现并加以修复。只向用户显示必要的毛病提示,而且请大家再用点心,把自己的HTTP毛病页面设计得漂亮一点。

6.编写fork代码

毛病:

出于支持所有浏览器及其各个版本的崇高理念,某些开发人员会创建不同的代码来对应每一种可能的运行场景。这些代码以if语句循环为基础,并针对各类实际方向提供对应的fork版本。

影响:

随着浏览器版本的不断更新,对fork代码文件的管理将变得非常复杂乃至没法实现。另外正如第一点中所言,这样做其实完全没有必要。

如何避免:

在代码内部进行功能检测,而非针对浏览器/版本着手。功能检测技术方案的出现显著下降了代码数量,而且也保证了代码更易于浏览并管理。

大家可以斟酌利用Modernizr等库来帮助自己在实现功能检测的同时,以自动化方式为那些已没法适应HTML5或CSS3的陈腐浏览器提供后备支持。

7.采取非响应式设计

毛病:

在进行站点开发工作时,假定用户具有与开发人员/设计师相等同的显示器尺寸。

影响:

当在移动装备或某些超大型屏幕上查看站点时,用户体验也会因此遭到影响——例如没法查看到页面中的某些重要方面,乃至没法导航至其它页面。

如何避免:

将响应式设计纳入开发考量。在站点当中使用响应式设计,乃至以一样的方式进行图片尺寸调理,在这方面Bootstrap这款高人气库绝对能够帮上各位大忙。

8.构建毫无意义的页面

毛病:

在面向公众的页面当中包含有实用性内容及信息,但不提供任何与搜索引擎相干的关键字、标签及提示。不提供无障碍访问功能。

影响:

在这种情况下,用户将很难通过搜索引擎找到我们的页面,这将致使其难以乃至根本没法取得理想的访问量。另外页面内容需要经过精心设计,以保证不会在用户查看进程中操作其视力。

如何避免:

使用SEO(即搜索引擎优化)机制并支持HTML访问性。在SEO方面,请确保添加标签以提供包括关键字及相干描写的有意义页面内容。

要实现更出色的可访问体验,大家可以检查每一条img或area标签之下的alt=yourimagedescription属性。固然,单纯做到这些还远远不够,大家可以点击此处(址:
































北京医治白癜风费多少钱
北京医治白癜风费一般是多少钱



转载请注明:http://www.guyukameng.com/html/652.html