Web前端编写高质量代码
标签(空格分隔): Web前端
web前端如何才能做的更好?
1、必须掌握基本的开发技术:CSS、HTML、DOM、 BOM、Ajax、JavaScript等
CSS布局是前端开发工程师的基本功,CSS的使用比重占到了所有技能的50%〜70%
对JavaScript的使用有所要求,不仅要会使用原生的JavaScript,还要会使用JavaScript类库和Ajax
2、了解不同浏览器上的兼容情况、渲染原理和存在的Bug
3、掌握网站性能优化、SEO和服务器端的基础知识
4、使用工具富足开发
5、除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持,等等。
PS:代码质量是前端开发中应该重点考虑的问题之一。代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。
原生JavaScript、JavaScript类库和Ajax的区别:
Ajax
原生JavaScript是浏览器默认支持的脚本语言,Ajax是一种利用JavaScript和XMLHttpRequest对象在客户端和服务器端传送数据的技术,因为XMLHttpRequest对象也是用JavaScript来创建的对象,所以从某种意义上来说,Ajax是JavaScript的一个子集。很多刚进入这个行业的朋友将Ajax和JavaScript并列起来讲,甚至认为Ajax比 JavaScript复杂得多。其实这是误解!
事实上,Ajax只是种提交数据的方式,与传统的表单提交方式相比的确有所不同,但其核心内容其实非常少,学习起来并不困难。前端开发中最复杂的技术其实是JavaScript。
JavaScript类库又是什么呢?
因为浏览器默认支持的JavaScript(我们常称为原生JavaScript)会因浏览器的不同而有所差异,例如IE支持document.all
属性,而Firefox不支持。同时,原生JavaScript提供的方法可能并不太好用,比如只提供了document.getElementByld
和document.getElementsByTagName
,却没有提供document.getElementsByClassName
。又比如,原生JavaScript并不提供富文本编辑器和拾色器这种复杂的UI工具。基于这些原因,于是出现了JavaScript类库。 JavaScript类库是在原生JavaScript的基础上,封装了跨浏览器兼容的特性并扩展了一些功能,提供了一些原生JavaScript没有的API,供开发者快速开发JavaScript程序使用。
CSS布局
CSS布局具有代码量少、结构精简、语义清晰等优点。代码量少,浏览器端的下载时间就会更短,语义清晰就会对搜索引擎更友好。
CSS布局只是Web标准的一部分。在HTML、CSS、JavaScript这三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的。正确的做法是,先确定HTML,确定语义的标签,再来选用合适的CSS
网站重构
为什么要重构网站
1、根据W3C标准进行重构后,可以让前端的代码组织更有序,显著改善网站的性能,还能提高可维护性,对搜索引擎也更友好;
2、重构后的网站能带来更好的用户体验,用HTML+CSS重新布局后的页面,文件更小,下载速度更快
重构的本质是构建一个前端灵活的MVC框架:
MVC框架,即HTML作为信息模型(Model), CSS控制样式(View), JavaScript负 责调度数据和实现某种展现逻辑(Controller)。
有哪些技术因素会导致应用难以维护?
PS:我们在制作网页的时候,不仅要实现需求,更重要的是耍考虑实现代码的可维护性,为未来可能出现的“变化”提前做好准备。
属性名有大写的,也有小写的;
标签属性有的加了引号,有的没有加引号;
历史遗留的、被淘汰的属性泛滥:
样式组织混乱,有用<style>标签写进网页里的,有用<link>外链的,也有直接写在标签内的;
JavaScript有外链的,有写在<scirpt>标签内的,也有写在标签里的;
JavaScript和CSS的位置零乱;
JavaScript的编码风格很不--致:
无论是JavaScript代码还是CSS代码,都看不到任何注释:
符合Web标准 —— 结构、样式和行为分离
Web标准由一系列标准组合而成,其核心理念就是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行为标准。
结构标准包括XML标准、XHTML标准、HTML标准;
样式标准主要是指CSS标准;
行为标准主要包括DOM标准和ECMAScript标准。
高质量的Web前端代码应该满足哪些条件(一个符合标准的网页)
1、标签中的属性名应该全部都是小写的,属性值要加上引号
2、结构、样式和行为的分离
样式和行为不再夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中。理想状态下,网页源代码由三部分组成:.html文件、.css文件和.js文件。标签中混有样式和行为的写法是不推荐的
3、增加代码可读性 - 注释
"一个好的代码,注释要占1/3的篇幅",虽然有些夸张了点,不过它表明了注释的重要性。
4、提高重用性 - 公共组件和私有组件的维护
避免出现冗余最好办法就是根据代码的重用度,把它们分成公共组件(不允许轻易修改)和私有组件两类。
冗余和精简的矛盾 - 选择集中还是选择分散(jQuery就选择了 “集中”,而YUI选择了 “分散”)
因为公共组件是预写好的,弹性才是它们最应该重点考虑的,毕竟不是特定为完成某功能而定制的,所以就算是按需加载,仍然可能会存在无用代码。这个是无法解决的,我们得认识到,只可能尽量减少冗余,不可能根除冗余。
为什么网页的维护工作会变得越来越难?
1、**浏览器:**不同浏览器对代码的而解析存在差异
2、**技术:**不同的工程师对代码的理解不同,理解不深容易写出可维护性差的代码
3、**团队合作:**合作不默契,容易导致代码累赘,可重用性差,维护困难,最终导致无人愿意维护
打造高质量代码 —— 精简、重用、有序。
所谓高质量的代码,在Web标准的思想指导下,在实现结构、样式和行为分离的基础上,还要做到三点:精简、重用、有序。精简的代码可以让文件变小,有利于客户端快速下载;重用可以让代码更易于精简,同时有助于提升开发速度;有序可以让我们更清晰地组织代码,使代码易于维护,有效应对变化。
Web标准是一套理论性的指导思想,它的最终目的是让代码更易于维护,标准本身是手段,而不是目的。在应用Web标准的实践中,有时候不遵循标准反而能带来更好的可维护性,如果你确信你的方案利大于弊,那么就去做吧,尽信标准不如无标准,过于教条主义是一件很愚蠢的事情。
如何才能提高Web前端代码的可读性和可重用性?
增加代码可读性 —— 注释
提高重用性 —— 公共组件和私有组件的维护
冗余和精简的矛盾 —— 选择集中还是选择分散
磨刀不误砍柴工 —— 前期的构思很重要
制订规范
团队合作的最大难度不是技术,是人