Web前端编写高质量代码

标签（空格分隔）： Web前端

文章目录

Web前端编写高质量代码@[toc]web前端如何才能做的更好？原生JavaScript、JavaScript类库和Ajax的区别：AjaxJavaScript类库又是什么呢？ CSS布局 网站重构为什么要重构网站重构的本质是构建一个前端灵活的MVC框架：有哪些技术因素会导致应用难以维护？符合Web标准 —— 结构、样式和行为分离高质量的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前端代码的可读性和可重用性？

增加代码可读性 —— 注释 提高重用性 —— 公共组件和私有组件的维护 冗余和精简的矛盾 —— 选择集中还是选择分散 磨刀不误砍柴工 —— 前期的构思很重要 制订规范 团队合作的最大难度不是技术，是人