《编写高质量代码-web前端开发修炼之道》 读书笔记
- 代码量大,结构混乱;
- 标签语义不明确,对搜索引擎不友好。
- 尽可能少地使用无语义标签div和span。
- 在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。
- 不是用纯样式标签,例如b、font和u等,改用css设置。语义上需要强调的文本可以包含在strong或em标签里。
- 不推荐 * { margin:0; padding: 0 },推荐显示罗列出来。也不建议写成:{margin:0; padding:0; color:#000; font-size:12px;},因为这样会破坏css的继承性。
- .fl { float: left; display: inline } 其中display: inline是为了解决IE6的双外边距Bug。
- .zoom { zoom: 1 } 是IE的专有属性,为了触发IE的hasLayout。当zoom无效时,可以设置“position: relative”来触发hasLayout。
- 模块与模块之间尽量不要包含相同的部分,如果有相同的部分,应将它们提取出来,拆分成一个独立的模块。
- 模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。
- 块级元素可以设置width、height属性,行内元素设置width、height属性无效。
- 块级元素可以设置margin和padding属性。行内元素设置margin和padding的水平方向,即-left和-right有效,垂直方向的-top和-bottom无效。
- 通过修改display属性来切换块级元素和行内元素。
- 它只能对行内元素实现 display: inline-block;不可以是块级元素。
- *vertical-align是针对IE对hack,这也是不友好的,能不用hack就尽量不要使用hack。
- 水平居中
(1) 文本、图片等行内元素的水平居中:给父元素设置 text-align: center
(2) 确定宽度的块级元素的水平居中:给元素设置 margin-left: auto 和 margin-right: auto
(3) 不确定宽度的块级元素的水平居中:
I. 使用table包裹,并给table设置margin: 0 auto; 优点:做法巧妙。缺点:增加了无语义标签,加深了标签的嵌套层数
II. 使用display: inline/inline-block; 优点:简单明了,结构清晰。缺点:使用inline后变成了行内元素,缺少了某些特性,如:width, hieght…
III. 使用position: relative,给父元素设置float、position:relative和left:50%,子元素设置position:relative和left:-50%。 优点:结构清晰。缺点:position:relative会带来一些副作用。 - 垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中:给父容器设置相同的上下内边距实现。
(2) 父元素高度确定的单行文本的垂直居中:line-height: 父元素高度。
(3) 父元素高度确定的多行文本、图片、块级元素垂直居中:
I. 使用table包裹,缺点:添加了无语义标签,增加了嵌套层数。
II. 对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中,对不支持的IE6-7,使用特定格式的hack:给父子两层元素分别设置{ *position: absolute; *top: 50% }和{ *position: relative; *top: -50% }来实现居中。缺点:使用来hack不利于维护,设置position: relative; position: absolute; 带来一些副作用。
- 使用匿名函数将脚本包起来,可以有效控制全局变量,避免冲突隐患。
- 让JS不产生冲突,需要避免全局变量的泛滥,合理利用命名空间以及为代码添加必要的注视。
- DOMReady比window.onload更适合来调用初始化函数。
- 在页面的最后,即</body>标签之前再调用init函数,此时页面内的DOM节点不一定都“加载完成”了,但一定都“生成”了,从而模拟DOMReady的效果。
- 将CSS放在页头,在载入html元素之前,先载入它们的样式,这样可以避免html出现无样式状态;将javascript放在页尾,先将网页呈现给用户,再来加载页面内的脚本,避免javascript阻塞网页的呈现,减少页面空白的时间。
- base层和common层都是属于框架级的,page层是属于应用级的,它可以调用base层的接口和common层的组件。
- 如果一个函数内某个因素很不稳定,我们可以将它从函数内部分离出来,以参数的形式传入,从而将不稳定因素和函数解耦。
- 跨浏览器兼容
- 组件易用
- 组件可重用
- 组件可扩展
- 代码组织有序,高内聚低耦合。
- 数据和处理函数没有直接的关联,在执行操作的时候,我们不但要选择相应的处理函数,还要自己准备处理函数需要的数据,也就是说,在执行操作时,我们需要同时关注处理函数和数据。
- 数据和处理函数都暴露在同一个作用域内,没有私有和公有的概念,整个程序中所有的数据和处理函数都可以互相访问。到了开发后期和维护阶段,容易牵一发而动全身,从而加大了修改难度。
- 面向过程的思维方式是典型的计算机思维方式––输入数据给处理器,处理器内部执行运算,处理器返回结果。
- 在程序中我们管“物件”叫做“对象”,对象由两部分组成:“属性”和“行为”,对应客观世界中物件的“状态”和“动作”。
- 属性本质其实是个变量,也就是面向过程中的数据,而行为的本质其实是函数,也就是面向过程中的处理函数。不同的是,面向过程中,数据和处理函数并没有关联起来,共同属于某个物件。而面向对象将数据和处理函数定义到了一个对象的内部,作为这个对象的属性和行为存在。
- 作为函数存在,直接使用“()”进行调用,例如“function test() {}; test();”,test被用做函数,直接被“()”符号调用。其this指向window对象。
- 作为类的构造函数存在,使用new调用,例如“function test() {}; new test();”,test作为类的构造函数,通过new进行test类的实例化。其this指向的是实例对象。
- 如果是数值型、布尔型、字符型等基本数据类型,在进行赋值时会将数据复制一份,将复制的数据进行赋值,也就是通常所说的传值。
- 如果时数组、hash对象等复杂数据类型,在进行赋值时会直接用内存地址赋值,而不是将数据复制一份,也就是通常所说的传址。
- 通过DOM节点对象的getAttribute方法。
- 通过DOM节点对象的属性(兼容性更好)。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。