本章内容:
糟糕的页面实现,头疼的维护工作
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前端开发修改之道》笔记--第一章 从网站重构说起的更多相关文章

  1. 《编写高质量代码-Web前端开发修改之道》笔记--第二章 团队合作

    本章内容: 揭秘前端开发工程师 欲精一行,必先通十行 增加代码的可读性--注释 提高重用性--公共组件和私有组件的维护 冗余和精简的矛盾--选择集中还是选择分散 磨刀不误砍柴工--前期的构思很重要 制 ...

  2. 《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML

    本章内容: 标签的语义 为什么要使用语义化标签 如何确定你的标签是否语义良好 常见模块你真的很了解吗 标签的语义 HTML标签的设计都是有语义考虑的,部分标签的中文翻译图示及本章内容参看:3.1 标签 ...

  3. 编写高质量代码:Web前端开发修炼之道(一)

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  4. 读《编写高质量代码-Web前端开发修炼之道》笔记

    第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CS ...

  5. 编写高质量代码:Web前端开发修炼之道(四)

    这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...

  6. 编写高质量代码:Web前端开发修炼之道(三)

    第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...

  7. 编写高质量代码:Web前端开发修炼之道(二)

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  8. 《编写高质量代码——Web前端开发修炼之道》读后随笔

    结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...

  9. 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象

    JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...

随机推荐

  1. SAP BW 平面文件创建信息立方体

    T-CODE:RSA1 1.创建信息范围 2.创建信息范围 创建特性信息对象目录 创建关键指标信息对象目录 3.创建特性信息对象 依次创建客户,销售组织 4.创建关键指标 依次创建单价和金额 5.创建 ...

  2. Linux编程之《守护进程》

    Intro ----- 守护进程,也就是通常说的Daemon进程,是Linux中的后台服务进程.它是一个生存期较长的进程,通常独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程常 ...

  3. C# 之 将string数组转换到int数组并获取最大最小值

    1.string 数组转换到 int 数组 " }; int[] output = Array.ConvertAll<string, int>(input, delegate(s ...

  4. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

  5. MeasureSpec介绍

    在自定义View和ViewGroup的时候,我们经常会遇到int型的MeasureSpec来表示一个组件的大小,这个变量里面不仅有组件的尺寸大小,还有大小的模式. 这个大小的模式,有点难以理解.在系统 ...

  6. Linux 通过 load average 判断服务器负载情况

    Linux中load average判断服务器负载情况 转载文章 http://www.111cn.net/sys/linux/56003.htm 写的比较详细,推荐看看.

  7. Eclipse+Axis使用WSDL文件生成Web Service服务端/客户端

    JDK版本:1.5.0_22 Eclipse版本:Helios Service Release 2(3.6.2) WSDL文件的创建过程见http://blog.csdn.net/a19881029/ ...

  8. TortoiseGit无法勾选Load Putty Key,该选项为灰色的解决办法

    1.软件版本 Git版本:Git-1.9.0-preview20140217.exe TortoiseGit:TortoiseGit-1.8.8.0-64bit.msi     2.出现问题 使用右键 ...

  9. 解决TestNG报java.net.SocketException

    在运行TestNG时一直给我提示报“java.net.ScketException”问题, 网上查了下这个问题是要有网络写入的一些操作才会导致,我的程序也没有网络写入,因为我是使用的selenium+ ...

  10. Angular 2 从0到1 (三)

    作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...