《编写高质量代码-Web前端开发修改之道》笔记--第一章 从网站重构说起
糟糕的页面实现,头疼的维护工作
工作中最大的考验和最不可回避的问题就是“变化”。我们不仅要实现需求,更重要的是考虑实现代码的可维护性,为未来可能出现的“变化”,提前做好准备。
- 所有老网页的典型毛病--新手可能会有的问题,中手也可能会有:
- div和table布局混用
- html标签名有大写、小写
- html标签属性有的加了引号,有的没加引号
- 历史遗留的、被淘汰的属性泛滥
- 样式组织混乱,有<style>标签内嵌网页的,也有<link>外链的,也有直接写在标签内的
- JavaScript有外链的,有写在<script>内的,也有写在html标签里的
- JavaScript和CSS的位置凌乱
- JavaScript的编码风格很不一致
- 无论是JavaScript还是CSS代码,看不到任何注释
这些毫无章法,结构(html)、样式(css)、行为(javascript)非常混乱的耦合着,在网页重构这场革命前,大多数网页都有这些毛病,未来的新手和过渡的中手都有很大可能会搞出其中的某些毛病。带来的维护难度之大,成本之高。
Web标准--结构、样式和行为的分离
一个符合标准的网页,标签中的标签名应该是小写的,属性要加上引号,样式和行为不在夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中。理想状态下,网页源码由三部分组成:.html、.css、.js文件。标签中混有样式和行为的写法是不推荐的。(注:个人有点看法,当初接收培训的时候,或看书自学的时候,老师/作者教的步骤就是先在html元素写样式和行为,然后才是在单独文件中写代码,由于前面已经有了习惯,而且认为能实现这个功能就行了,没必要非要弄到单独一个文件中。这就是“懒”的潜意识在作怪了。如果在教的时候完全不给他们知道标签上写样式和行为,只在单独文件中写,这种后期进入工作中写出的“烂”代码也不会出现,还有个table大布局,都是一个道理。如果教的顺序反过来,我想现在的情况应该会好些。只是说些看法,没有任何攻击,毕竟应该真心感谢那些前辈和老师。)
前端的现状
- 网页维护越来越难的三个层面:
-
- 浏览器层面:浏览器的向前兼容使得前端开发中被淘汰的技术、不推荐的方法依然广为流传和应用。除了Firefox Chrome Safari 对IE的挑战之外,ie的 6、7、8这些浏览器版本也在老而不死着,这些浏览器对网页代码的解析存在着不大不小的差异
- 技术层面:Web标准被重视和普通采用的时间不长,整个大环境对Web标准的理解还停留在概念层面,对“好的实现方案”仍处于摸索阶段。理解不深,则很容易写出可维护差的代码。
- 团队合作层面:随着网页表现力越来越高导致实现代码越来越复杂,随之给团队合作带来了麻烦。如果团队合作不默契,很可能需要不停打补丁,最后导致满地是“雷”,没人愿意去维护。
打造高品质的前端代码,提高代码的可维护性--精简、重用、有序
打造高品质的前端代码,在Web标准思想的指导下,在实现结构、样式和行为分离的基础上,还要做到三点:精简、重用、有序。精简的代码可以让文件变小,并有利于客户端下载;重用可以让代码更易于精简,同时有助于提高开发速度;有序可以让我们更清晰的组织代码,使代码易于维护,有效应对变化。
Web标准的最终目的是让代码更易于维护。在实践中,如果有时候不遵循标准反而能带来更好的维护性,且利大于弊,那么就去做吧,尽信标准不如无标准,过于教条主义很愚蠢不是?
《编写高质量代码-Web前端开发修改之道》笔记--第一章 从网站重构说起的更多相关文章
- 《编写高质量代码-Web前端开发修改之道》笔记--第二章 团队合作
本章内容: 揭秘前端开发工程师 欲精一行,必先通十行 增加代码的可读性--注释 提高重用性--公共组件和私有组件的维护 冗余和精简的矛盾--选择集中还是选择分散 磨刀不误砍柴工--前期的构思很重要 制 ...
- 《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML
本章内容: 标签的语义 为什么要使用语义化标签 如何确定你的标签是否语义良好 常见模块你真的很了解吗 标签的语义 HTML标签的设计都是有语义考虑的,部分标签的中文翻译图示及本章内容参看:3.1 标签 ...
- 编写高质量代码:Web前端开发修炼之道(一)
最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...
- 读《编写高质量代码-Web前端开发修炼之道》笔记
第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CS ...
- 编写高质量代码:Web前端开发修炼之道(四)
这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...
- 编写高质量代码:Web前端开发修炼之道(三)
第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...
- 编写高质量代码:Web前端开发修炼之道(二)
第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...
- 《编写高质量代码——Web前端开发修炼之道》读后随笔
结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
随机推荐
- AttributeBehavior
当事件触发的时候... 会循环所有behavior的events 为ower添加事件.....AttributeBehavior 为事件添加如下方法 public function evaluat ...
- Metadata Lock原理6
一 简介 上一篇文章 <MetaData Lock 之一> 简单的介绍了MySQL 引入MDL 的前因后果,本文深入了解MDL的实现原理和运行机制.二 MDL 的类型 meta ...
- MHA手动切换 原创2 (主参与复制)
monitor 执行下面命令后, --orig_master_is_new_slave :原主变为新从,即server1变成了slave1的从.slave2跟据app1.conf中配制也变成了slav ...
- UNIX基础知识之时间值
本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 长期以来,UNIX系统一直使用两种不同的时间值 ...
- debian创建apt-proxy代理
由于公司网络比较慢.所以需要建立一个代理服务器或镜象站点!考虑到创建和维护镜象的投入比较大!所以选择apt-proxy代理来做!可以缓解公司带宽不足的矛盾.而且只有在代理缓存,没有相应组件的情况下才去 ...
- mysql自动备份策略
目标:每7天做一个完整备份,每天做一份binlog日志,第二周将之前的备份删除并产生新的完整备份和binlog日志,备份要求每天2:00自动完成 mysql 版本:mysql5.5 1.开启binlo ...
- UTF8 与 UTF16 编码
Unicode 的发展,英文好的直接去 unicode.org 上去看吧,不好的可以移步到这里 看dengyunze的总结:<关于UTF8,UTF16,UTF32,UTF16-LE,UTF16- ...
- PHP读书笔记(5)-结构语句
PHP结构语句 顺序结构 顺序结构就像一条直线,按着顺序一直往下执行.我们编写的代码默认都是按照顺序结构执行的. 条件结构之if…else… 条件结构就像一个岔路口,可以向左走,也可以向右走.比如上洗 ...
- 仿UC浏览器图片加载进度条
前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...
- hdu 2196 树形dp
思路:先求以1为根时,每个节点到子节点的最大长度.然后再次从1进入进行更新. #include<iostream> #include<cstring> #include< ...