原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处

今天我们要读的书是Web 前端开发修炼之道

第1章 从网站重构说起

1.1 糟糕的实现,头疼的维护

曾经, 网页代码很乱.

1.2 Web 标准,结构,样式和行为的分离

分离了.

1.3 前端的现状

人员参差不齐.

小结:

本章相当于引论。

第2章 团队合作

小结:

团队和沟通这个永远是个凑字数的好话题。


第3章 高质量的HTML

3.1 标签的语义

标签是有语义的。

HTML 标签的设计是有语义的。

标签名 语义 翻译
div divisiton 分隔
span span 范围
ol ordered list 排序
ul unordered list 不排序列表
li list item 列表项目
h1 ~ h6 header 1 to header6 标题1 到 标题6
p paragraph 段落

实际上,div 和p 的语义其实是没有的。那为什么还需要这两个东西呢?

3.2 为什么要使用语义化标签

html + css 布局取代了传统的table 布局,使得结构和样式得到了彻底分离。结构是最重要的,标签的语义化就是让结构更加清楚的有效手段。

3.3 语义良好的评判标准

去掉样式,看网页结构是否组织良好,是否任然有很好的可读性。

3.4 实例

  • 尽可能的少用div 和span
  • p 和div 优先选择p
  • 不用纯样式标签,例如b,font,u 等,改用CSS 设置。

第4章 高质量的CSS

4.1 怪异模式和DTD

DTD(Data Type Definition), 如果没有声明DTD 类型,IE 会按照怪异模式去解析。

在标准模式中,浏览器根据规范表现页面,而怪异模式模拟老式的浏览器以兼容很老很老的站点。具体表现的差别这里不特别展开,一般情况下我们都应该避免触发怪异模式,选用标准模式。

4.2 如何组织CSS

  • base.css + common.css + page.css
  • 通用+项目+灵活

base 层提供CSS reset 和原子类。base 层是稳定的,一般不需要任何的修改。

common 层提供组件级的Css 类,一般由单人维护。

page 层提供各种灵活的样式定义,由各开发人员维护。

4.3 推荐的base.css

这个不错,值得推荐

4.4 模块化CSS

4.4.1 如何划分模块

4.4.2 CSS 的命名

借鉴类和属性的方式命名class。

采用划线分割外加骆驼命名法,使用划线表明层级关系。

4.4.3 多用组合,少用继承

说白了就是挂多个class

4.4.4 margin 问题

不要混用mt mb

4.5 低权重原则

不要滥用子选择器。CSS 样式是可以有重叠的,冲突的时候采用权重高的。

HTML 标签的权重是1,class 是10, id 是100,如果权重相同,就取就近原则。

除非样式很稳定,否则建议多添加class, 少用子选择器。

需要将很重要3个字变绿色,一般来说有两个方案如下:

很多人采用方案1,因为这个方案更加的简洁,但是当有新的需求出现的时候,比如说将小心处理这几个字设置成绿色。

子选择器影响来将来要添加的代码。因为子选择器的权重比较高,而越高的权重对以后的样式越有可能带来影响,因此少用子选择器会更加有利于维护。

4.6 CSS sprite

用不用是个问题

4.7 CSS 的常见问题

4.7.1 多行式和单行式

单行

4.7.2 id 还是class

从css 的角度来说,推荐多用class

  • id 只能出现一次,不可重复,class 可以任意多次。
  • id 权重为100, class 权重为10.

按照低权重原则,我们优先使用class.


第5章 高质量的JavaScript

5.1 良好的编程习惯

5.1.1 避免JS冲突

使用(function(){})()

使用var Global={} 来作全局变量

使用var Global.Chat={} 来作命名空间

5.1.2 统一的入口

5.1.3 CSS 放页头,JavaScript 放页尾

5.1.4 文件压缩

5.2 JavaScript 分层

5.3 技巧

5.4 面向对象编程

JavaScript 是基于原型的语言,new 实例化出来的对象,属性和行为来自于构造函数和原形。当我们声明一个类的时候,同时也生成了一个对应的原型。这个其实和.NET/JAVA 中的类型对象是一致的。

优先级是构造函数优于原型。

原型是个hash 对象。一般来说,把属性放在构造函数中,方便接受参数。一般来说,不介意把所有方法都写在构造函数中,因为每个实例对象只会指向同一个原型,但是每个实例对象都会复制构造函数里的所有方法。比较费内存。当然还有一些比如说私有属性,get set 之类的东西,这里略过。

5.5 其他问题

[读书笔记] Web 前端开发修炼之道的更多相关文章

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

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  2. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

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

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

  4. 《Web前端开发修炼之道》-读书笔记CSS部分

    如何组织CSS-分层 应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角 ...

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

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

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

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

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

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

  8. web前端开发修炼之道--编写高质量代码

    想想自己的页面实现是否糟糕 Web标准--结构.样式和行为的分离 Web标准可分为三个部分:结构标准.样式标准.行为标准. 结构标准包括XML标准.XHTML标准.HTML标准 样式标准主要是指的CS ...

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

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

随机推荐

  1. 1、.NET平台概述

        本学习主要参考Andrew Troelsen的C#与.NET4高级程序设计,这小节主要述说以下几个东西:     宏观上讨论一下.net相关的主题:程序集.CIL(Common Interme ...

  2. linux中Makefile文件相关内容

    第一章.概述什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional(专业)的程序员,m ...

  3. Tesseract-OCR 3.05 躲过语言文字识别(运行程序+中英日韩语言包)

    最新版本 静态编译 tesseract 3.05.00dev leptonica-1.73 libgif 5.1.3 : libjpeg 8c : libpng 1.6.16 : libtiff 3. ...

  4. Java for LeetCode 203 Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. Example Given: 1 --> 2 -- ...

  5. imageNamed 与 imageWithContentsOfFile的区别

    如题,是不是大家为了方便都这样加载图片啊 myImage = [UIImage imageNamed:@"icon.png"];那么小心了这种方法在一些图片很少,或者图片很小的程序 ...

  6. 带有 thead、tbody 以及 tfoot 元素的 HTML 表格

    设置样式: <head><style type="text/css">thead {color:green}tbody {color:blue;height ...

  7. spring boot集成redis的血泪史

    首先说明环境不是我搭建的,然后因项目需要添加redis的时候,麻烦来了.springboot 用的是1.5.9因为以前弄过redis,所以直接拿过来,麻烦了首先是莫名的错误,连项目都启动不了.但是最后 ...

  8. Windows下命令行怎样登录MySQL

    直接cmd回车然后 “ mysql -u root -p  ”  登录时出现错误,原来是权限不够 打开cmd时需要以管理员的身份打开 然后继续使用 “ mysql -u root -p ” 还是不行, ...

  9. Linux 下安装 storm

    一:准备工作 (机器部署情况详见)这篇博客 3台安装supervisor,2台安装nimbus (1)安装jdk1.8 (2)安装zookeeper3.4.5 以上两部分安装可查看这篇博客 (3)下载 ...

  10. linux配置 ssh 免密 登录

    1:第一步给每一台电脑生成公私钥 使用   在 root 目录下面 使用  ssh-keygen -t rsa ,然后不停敲回车.就可以生成公私钥.默认放在  .ssh 目录下面. 2:进入.ssh ...