Web前端编写高质量代码-优快云博客

本文链接：https://blog.youkuaiyun.com/www0925/article/details/108405376

Web前端编写高质量代码

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

文章目录

Web前端编写高质量代码
@[toc]
web前端如何才能做的更好？
原生JavaScript、JavaScript类库和Ajax的区别：
Ajax
JavaScript类库又是什么呢？

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复杂得多。其实这是误解！

image_1eh98hruj1f0p7a152b10771v3r9.png-38.7kB

事实上，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选择了 “分散”）

    因为公共组件是预写好的，弹性才是它们最应该重点考虑的，毕竟不是特定为完成某功能而定制的，所以就算是按需加载，仍然可能会存在无用代码。这个是无法解决的，我们得认识到，只可能尽量减少冗余，不可能根除冗余。