web前端
您现在所在的位置:首页>企业动态>web前端

深入的探索Web前端

编辑:学到牛牛IT培训    发布日期: 2022-03-15 15:11:19  

知己知彼,百战不殆。如果说要了解前端开发,那么前端开发存在的问题就不得不说,只有掌握问题才会在工作中注意自己的方式,也更有可能为用户提供良好的前端服务。

1、浏览器兼容问题

在前端的发展过程中,浏览器起着很大的作用,各大浏览器厂商为了达到更好的效果吸引用户做了很大努力,但是同时因为这种扩展也造成了很大的问题,常常同样的网页内容在不同的浏览器中显示的效果会大不相同,甚至可能出现错误(可能因为某些标签并不能被所有浏览器支持),虽然后来针对这种情况制订了一系列的规范,但是这个遗留的问题一直影响到现在。

浏览器的差异最突出的要数IE浏览器,因为使用IE浏览器的用户一直很多,虽然从IE9之后情况有了很大变化,但是现在IE7、IE8依然有很大的用户量,甚至有人还在使用IE6,而这些版本都是在规范制定之前出现的版本,这就造成我们在开发的时候要花时间去考虑同样的效果是否能够达到相似的效果,如果无法实现是不是有替代的解决办法,如果不需要兼容这些浏览器那是否需要在用户使用这些浏览器访问的时候给出对应的提示。

2、代码指令

对于前端开发而言,常常接手的代码都是很糟糕的,很难从中找到一定的头绪。前端代码的问题主要是代码的结构混乱、在HTML页面中嵌入了大量的CSS、JavaScript内容、页面的布局方式随意、HTML内容不符合标准、性能差等等。试想当我们接手项目的时候看到的前端代码部分没有合理的组织结构,也没有制定一定的开发规范,各种效果的实现都很随意,同时在调试测试时常常会出现白屏的情况,你会作何感想?这样的项目你又能学到什么?

之前我曾经经历过一个类似于商城类的系统,当时接手的时候项目已经开发一年多了,但是当我看到代码的时候就完全傻眼了,因为代码不仅结构混乱,而且中间夹杂着大量废弃掉的代码,实现功能也很随意,都是从网上搜索来的,直接复制粘贴,另外各种变量的命名 诸如 aa、cc、dd这样内容很多。当时的我简直要奔溃了,现在想想那几个月的经历也是惨不忍睹。

3、从业人员

在Web前端发展快速、代码质量差、各种浏览器差异充斥的环境下负责前端开发工作的人又是怎样的呢?在我工作几年中大多时候都是自己在兼顾前端和后台的,但是本身我自己的前端水平一般,为了完善自己也常常会上一些博客、论坛、交流群中去观察别人如何做这件事的,但是很难发现一些特别吸引人的内容,因为常常他们会说的内容都是一些官话,比如注重代码结构、重构等等,但实际从他们分享的作品中你很难发现有什么内容是可以对应上的。

后来我逐渐发现这些人大多和我一样都是后端开发的,然后被迫去接触了一些前端开发的工作,但是并不深入,而且前端的很多内容并不能像后端那样可以分得十分清楚,所以大多时候大家都是一知半解的状态。除了后端开发人员的转型外,还有些前端人员是UI设计、平面设计这些人员过度来的,然而这些人之前只是在设计一些图片,并不了解开发是怎么一回事,常常会和后端人员争吵,因为在他们看来为什么我这样设计的内容后端却无法提供对应的数据呢?当然也有一些是经过培训或者因为日常爱好而从事这项工作,但同样因为经验的欠缺在一段时间内很难提供有力的支持。

提升工作效率的技巧

上边我们已经介绍了一些前端开发中常见的问题,这节我们主要聊一下如何来保证自己工作中的效率。

1、合理组织代码

如果你问我什么样的代码结构是合理的,甚至是最好的,我也没法回答。在实际开发中我们一般会把同类型的代码、同模块的代码文件尽量归类到相同的文件夹中。放到前端开发中我们涉及到的文件包括 JS、CSS、HTML、图片等等,在项目开始前组织代码结构的时候需要考虑如何保证结构的清楚、代码是否可以复用,除了这些之外还要尽可能的把相同类型的文件按照不同的模块放到不同的文件夹中(如何划分模块,可以按照功能或者业务逻辑来实现),通过这种划分方式,我们可以保证项目结构的清晰明了,而且对于后期的维护管理也是十分的重要的。

在我们通过浏览器访问网站的时候,浏览器会接受到网站返回的一系列文件(包括HTML、CSS样式、JS文件、还有图片),如果按照我们上边所说的方式去规划自己的项目的话,那最后导致的结果不就是在一次访问网站的时候我们会频繁的接受到服务端的文件吗,这样因为文件传输的文件可能很多,可能会影响到网页展示的时间,导致用户体验的降低,不是得不偿失了吗?针对这种情况其实也有一些工具会在项目后期帮助我们把文件进行压缩合并,所以上边说的代码组织方式是合适的。

2、规范命名

如果你经常听到公司的负责人告诉你开发一定要注意规范,但是在接手之前项目的时候却发现经常出现诸如 aa、bb等的这样让人费解的变量,那就离开吧,因为曾经因为这种情况我和负责人发生很大的争执,最终结果很不愉快。在项目开发中文件名称、变量、方法、函数,甚至HTML中ID的名称都会有一定的规范,这样做是为了保证代码的可读性。而且在有些项目组中是不希望出现汉语拼音的方式的,更别说有些开发人员喜欢随意的把自己熟悉的英文和汉语拼音结合起来使用的情况了。

3、持续的重构代码

重构代码,无论是前端还是后端开发都是一个必不可少的话题,但是经常这部分内容是会被忽略掉的。重构就是在不改变代码效果的前提下按照一种比较之前方式更好的方案对代码进行优化,在重构代码之前一定要确定不会影响之前的功能。

在重构代码之前除了要充分的评估是否存在风险外,还要明确重构的目的和范围,不要盲目的大范围修改,而且需要注意的事重构的过程中需要不断的进行测试来确保修改的内容不会对系统功能产生影响。

4、前端框架的使用

前端开发因为浏览器之间的差异、缺乏规范意识等一系列因素,所以和后端开发会有很大的不同,特别是从后端转型过来,需要很长时间才可以适应这种前端开发的形式,不过随着一些前端框架的使用使得那些即使不是特别熟悉前端开发的人员也可以开发出一个美丽漂亮的页面。

注意框架的特点,不同框架需要掌握的内容不尽相同,有些可能只需要掌握几个方法就好,而有些需要掌握太多内容,因为这方面的差异,所以无形就会增加学习的成本,也就是时间问题,通常我们的开发工作时间并不是那么充足。除了学习的内容多少外,框架是否具备一定的文档支持、用户数目多少也需要考虑,因为没有这些很难保证我们出现问题的时候可以及时的处理。

除了要掌握这些框架的操作处理方式外,也要试着去了解框架的设计原理,以便在工作中更好的应用和选择。

5、不要只在一个浏览器测试

正如我们一直所说的一样,浏览器在web发展中一直扮演着重要的角色,同时因为浏览器之间存在的差异常常也会为我们开发造成不小的问题。虽然目前浏览器基本上都很好的支持了相关的规范,但是支持的水平并不相同,这就需要我们在开发中对不同的浏览器进行测试(主要是针对那些主流的浏览器)。

为了避免在不同浏览器中出现差异,这就要求我们保证自己的代码质量,尽量避免涉及到浏览器兼容处理的问题,另外在项目开始时最好明确支持的浏览器范围。

规范前端代码

规范代码,这是在所有的软件开发中都在强调的内容,但是保证规范就会避免错误吗?当然不是,规范只是在开发团队中大家需要统一遵守的约定,在符合这个约定下开发的代码可以被团队中任意人员阅读和理解,相反如果团队中每个人都按照自己的开发方式去实现代码,没有统一的风格,那就会造成类似的功能实现方式会有很多种,这样情况下作为一个刚刚进入团队中的新人应该如何学习呢?另外因为采取不同的实现方式就会有优劣存在,那么出现问题的时候如何排查呢?这都是问题。另外需要注意的是在不同的开发团队中开发规范可能是不同的,但是就我的几年的工作经验而言,几乎没有看到一份明确的开发规范,在实际开发中我们所谓的规范大多都是函数命名、操作处理问题方法等等。

在前端的开发规范是针对HTML、CSS、JavaScript而言的,一般针对它们所说的规范都是从如下几个方面来说的。

1、符合标准

所谓的标准就是W3C制定的Web标准。在Web发展之处并没有所谓的规范存在,所以造成同样的页面在不同的浏览器中无法显示相同的效果,所以专门成了W3C这样的组织去制定对应的规范来避免各种不规则而引发的问题。这些规范包括使用语言的规范、使用原则、引擎解释行为等,对于这些内容可以分为三个部分,即结构标准(即XML标准、XHTML标准、HTML标准)、表现标准(针对CSS样式)、行为标准(ECMAScript标准、DOM 标准两部分)。

2、格式规范统一

这部分内容比较琐碎,包括命名、代码的缩进、空格、空行、注释等,在团队中对这些内容有统一的标准主要为了增强代码的可读性和维护性。

3、前端代码的性能

这主要是针对浏览器而言,简单说就是访问页面所用的时间。这个时间包括后端处理、代码文件传输、页面渲染、JS文件加载和运行,为了缩短这部分时间需要我们编写简洁并且符合标准的代码,同时通过压缩文件等手段来减少文件传输的时间。

4、安全考虑

最初人们考虑系统安全主要是针对后端而言的,但是随着Web技术的不断发展,现在在前端模块的安全问题也变得不容忽视。常常会利用一些手段来操作JavaScript文件、HTML内容、CSS属性值来达到自己的目的,针对这方面我们需要有必要的安全校验和编码来提高代码的安全性。

如上几点就是常说的前端开发中需要规范的内容,而且网页是作为信息展示而存在的,至于我们到底在页面中实现多少绚丽的效果并没有多大价值,所以在前端开发而言还是应该注重这种规范和标准,这样才可以保证我们完成的代码在一定程度上避免出现错误。

免费试学
课程好不好,不如实地听一听

封闭学习

2

1

联系我们

电话:028-61775817

邮箱:1572396657@qq.com

地址:成都市金牛区西城国际A座8楼

  • web前端_Html5资源教程和资源分享-学到牛牛
    web前端_Html5资源教程和资源分享-学到牛牛

    扫一扫,免费咨询

  • web前端_Html5资源教程和资源分享-学到牛牛
    web前端_Html5资源教程和资源分享-学到牛牛

    微信公众号

  • web前端_Html5资源教程和资源分享-学到牛牛
web前端_Html5资源教程和资源分享-学到牛牛

学一流技术,找高薪工作

web前端_Html5资源教程和资源分享-学到牛牛

7-24小时服务热线:

028-61775817

版权声明 网站地图

蜀ICP备2021001672号

课程问题轻松问