编写高质量代码 Web前端开发修炼之道 书摘精要

所属分类: 网页制作 / 应用技巧 阅读数: 530
收藏 0 赞 0 分享
(P4)
Web标准由一系列标准组合而成,其核心理念是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行为标准。
样式标准 —— XML标准、XHTML标准、HTML标准;
样式标准 —— CSS标准;
行为标准 —— DOM标准和 ECMAscript 标准;

(P23)CSS布局也就是俗称的 Div + CSS 布局,或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式,包括位置、大小、颜色等;

(P26)
CSS布局只是Web标准的一部分。在HTML、CSS、Javascript 这三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的;

先确定 HTML ,确定语义的标准,再来选用合适的 CSS;

(P27) 浏览器会根据标签的语义给定一个默认的样式;

(P29) Web Developer —— 网页调试插件

(P43) 在语义不明显,既可以用 <P> 也可以用 <div> 的地方,尽量用 <P> ,因为 <P> 默认情况下有上下间隔,去样式后的可读性更好,对兼容特殊终端有利;

(P46)
如果漏写 DTD 声明, Firefox 仍然会按照标准样式来解析网页,但在 IE 中(包括 IE6、IE7、IE8)就会触发怪异模式;

一种组织 CSS 的方法 —— base.css + common.css + page.css

(P58) 模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆成一个独立的模块;

(P60) 模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性;

(P71) HTML 标准的 class 属性和 id 属性不同,id 只能挂一个,而 class 可以挂多个,用空格分隔;

(P81) 如果不确定模块的上下 margin 特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下 margin 挂用于边框的原子类;

(P81) 权重的规则是这样的 —— HTML标签的权重是1,class 的权重是10,id 权重是100;

(P82) 如果 CSS 选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式 —— “就近原则”指的是选择符定义的先后顺序,而不是 class 名的先后顺序;

(P84) 为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低;

(P85) 少使用子选择器,就需要多添加 class ;

(P87) CSS Sprite “图片翻转技术” —— 将多张图片合并为一张,然后利用 background-position 属性来展示需要的部分;

(P88) 是否使用 CSS Sprite 主要取决于网站流量;

(P89) 一般情况下,建议尽量使用 class ,少用 id ;

(P93)
CSS hack ——
1. IE条件注释法 <!-- [if IE]> ...... <![endif]>
2. 选择符前缀法 *html *+html
3. 样式属性前缀法 "_" "*"

(P94) <a> 标签的四种状态排序问题 —— Love Hate 原则 —— L(link)ov(Visible)e, H(Hover)a(Active)te;

(P95)
块级元素: div、p、form、ul、ol、li

行内元素: span、strong、em

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度;

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化;

(P95)
块级元素可以设置 width、height 属性;
行内元素设置 width、height 属性无效;

(P96) 块级元素可以设置 margin 和 padding 属性。行内元素只有水平方向的 margin 和 padding 产生边距效果;

(P97) 块级元素和行内元素的 CSS 相关属性是 display ,其中块级元素对应于 display : block ,行内元素对应于 display : inline。 可以通过修改 display 属性来切换块级元素和行内元素;

(P103)
position : relate 和 position : absolute 都可以改变元素在文档中的位置。设置 position : relative 和 position : absolute 都可以让元素激活 left、top、right、bottom 和 z-index 属性(默认情况下,这些属性未激活,设置了也无效);

默认情况下,所有元素都是在 z-index : 0 这一层;

设置 position : relative 或 position : absolute 会让元素“浮”起来;

position : relative —— 会保留自己在 z-index : 0 层的占位;

position : absolute —— 会完全脱离文档流,不再在 z-index : 0 层保持占位符,其 left、top、right、bottom 值是相对于自己最近的一个设置了 position : relative 或 position : absolute 的祖先元素的,如果祖先元素全部没有设置 position : realtive 或 position : absolute ,那么就相对于 body 元素;

(P104)
float 元素属性不会让元素“上浮”到另一个 z-index 层,它仍然让元素在 z-index : 0 层排列, float 不能通过 left、top、right、bottom 属性精确地控制元素的坐标,它只能通过 float : left 和 float : right 来控制元素在同层里“左浮”和“右浮”。flaot 会改变正常的文档流排列,影响到周围元素;

只要设置了 position : absolute 、float : left 或 float : right 中任意一个,都会让元素以 display : inline-block 的方式显示 —— 可以设置长宽、默认宽度并不占满父元素,就算显式地设置 display : inline 或者 display : block 也仍然无效;

值得注意的是, position : relative 却不会隐式改变 display 的类型;

(P104)
行内元素水平居中 —— text-align : center
块级元素水平居中 (确定宽度) —— margin-left : auto 和 margin-right : auto

(P111)
CSS中有一个用于竖直居中的属性 vertical-align ,但只有当父元素为 <td> 或 <th> 时,这个 vertial-align 属性才会生效;

<td> 标签默认情况下就隐式地设置了 vertical-align 的值为 middle ;

(P114) 注意: main 的内容比起 sidebar 更重要,无论 sidebar 和 main 在样式上谁左谁右,在HTML标签上要保证 main 的标签在 sidebar 之前被加载;

(P136) 用匿名函数将脚本包起来,可以有效地控制全局变量,避免冲突隐患;

(P147)
添加必要的注释,可以大大提高代码的可维护性,对于团队合作来说,更是十分有必要的;

让JS不产生冲突,需要避免全局变量的泛滥,合理使用命名空间以及为代码添加必要的注释;

(P153) window 对象会在网页内元素全部加载完毕以后出发 onload 事件;

(P153) DOMReady 只判断页面内所有的 DOM 节点,是否已经全部生成,至于子节点的内容是否加载完成,它并不关心。 DOMReady 触发的速度比 window.onload 更快;

(P159) CSS 放在页头,Javascript 放在页尾;

(P174) attachEvent 是 IE 支持的方法,而 addEventListener 是 Firefox 支持的方法,attachEvent 和 addEventListener 方法支持监听处理函数的叠加,而不是覆盖;

(P185) 很多开源的 Javascript 库可以为我们提供强大的 base 层和 common 层,最常见的 Javascript 库有 jQuery 和 YUI 等;

(P186)
jQuery 本身分成两大部分: jQuery 核心文件 和 jQuery UI 文件。 jQuery UI 文件依赖 jQuery 核心文件;

jQuery 核心文件提供了 base 层功能,还提供了部分 common 层功能, jQuery UI 文件提供了 common 层功能;

(P194)
因为一个页面内,相同的 id 只能出现一次,所以它不适合来获取一组有“相似功能”的 DOM 节点;

用标签名来获得 DOM 节点,让程序和 HTML 结构耦合太紧;

(P196) 同一页面里 id 只能出现一次,所以如果你的程序需要被多处复用,就一定不能使用 id 作为 Javascript 获得 DOM 节点的挂钩;

(P198) 组件需要指定一个根节点,以保持每个组件之间的独立性;

(P205) 如果一个函数内某个因素很不稳定,我们可以将它从函数内部分离出来,以参数的形式传入,从而将不稳定因素和函数解耦;

(P223)
面向对象英文全称叫做 Object Oriented ,简称 OO 。OO 其实包括 OOA (Object Oriented Analysis,面向对象分析)、OOD (Object Oriented Design,面向对象分析) 和 OOP (Object Oriented Programming,面向对象的程序设计)。面向对象的语法只对应 OOP ,只是 OO 的一部分;

OOA 和 OOD 是面向对象编程的思想,和具体语言无关,而 OOP 是面向对象编程工具,和选用语言相关;

OOA 和 OOD 与具体要求语言无关,一般情况下可以轻易跨语言重用;

(P224) 从大局上决定程序品质的,不是 OOP ,而是 OOA 和 OOD;

(P225) 函数在 Javascript 中既可以当做普通函数使用,也可以用作类来使用,在充当类的时候,它本身又担负着构造函数的责任;

(P228) 用 this xxx 定义的属性是公有的, 而用 var xxx 定义的属性是私有的;

(P230) 原型中的行为一定是公有的,而且无法访问私有属性;

(P231) 放在构造函数里的私有行为,实现真正的似有;

(P253) 无论在类的构造函数中还是在原型中,this 都指向实例化的对象;

(P239) 作为函数的 function ,其 this 指向的是 window 对象,而作为类构造函数的 function ,其 this 指向的是实例化对象;

(P259) 对于常规属性,统一使用 node.xxx 的方式读取,对于自定义属性,统一使用 node.getAttribute("xxx")读取;
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多