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提供的⽅法可能并不太好⽤，⽐如只提供了ElementByld和ElementsByTagName，却没有提供ElementsByClassName。⼜⽐如，原⽣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、提⾼重⽤性 - 公共组件和私有组件的维护
避免出现冗余最好办法就是根据代码的重⽤度，把它们分成公共组件（不允许轻易修改）和私有组件两类。
web前端开发技术第三版pdf冗余和精简的⽭盾 - 选择集中还是选择分散（jQuery就选择了 “集中”，⽽YUI选择了 “分散”）
因为公共组件是预写好的，弹性才是它们最应该重点考虑的，毕竟不是特定为完成某功能⽽定制的，所以就算是按需加载，仍然可能会存在⽆⽤代码。这个是⽆法解决的，我们得认识到，只可能尽量减少冗余，不可能根除冗余。
为什么⽹页的维护⼯作会变得越来越难？
1、**浏览器：**不同浏览器对代码的⽽解析存在差异
2、**技术：**不同的⼯程师对代码的理解不同，理解不深容易写出可维护性差的代码
3、**团队合作：**合作不默契，容易导致代码累赘，可重⽤性差，维护困难，最终导致⽆⼈愿意维护
打造⾼质量代码 —— 精简、重⽤、有序。
所谓⾼质量的代码，在Web标准的思想指导下，在实现结构、样式和⾏为分离的基础上，还要做到三点：精简、重⽤、有序。精简的代码可以让⽂件变⼩，有利于客户端快速下载；重⽤可以让代码更易于精简，同时有助于提升开发速度；有序可以让我们更清晰地组织代码，使代码易于维护，有效应对变化。
Web标准是⼀套理论性的指导思想，它的最终⽬的是让代码更易于维护，标准本⾝是⼿段，⽽不是⽬的。在应⽤Web标准的实践中，有时候不遵循标准反⽽能带来更好的可维护性，如果你确信你的⽅案利⼤于弊，那么就去做吧，尽信标准不如⽆标准，过于教条主义是⼀件很愚蠢的事情。
如何才能提⾼Web前端代码的可读性和可重⽤性？
增加代码可读性 —— 注释
提⾼重⽤性 —— 公共组件和私有组件的维护冗余和精简的⽭盾 —— 选择集中还是选择分散磨⼑不误砍柴⼯ —— 前期的构思很重要
制订规范
团队合作的最⼤难度不是技术，是⼈

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。