编写高质量代码 | 笔记

@charset "utf-8";

/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
a {color: inherit;text-decoration: none;}

/*文字排版*/
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:20px;}
.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.no_dct{text-decoration:none;}

/*定位布局*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.mlr0{margin-left:0;margin-right:0;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.vm{verticle-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.zoom{zoom:1;}
.hidden{visiility:hidden;}
.none{display:none;}
.oh{verflow: hidden;}

/*长度高度*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w{width:100%}
.h30{height:30px;}
.h100{height:100px;}
.h{height:100%}

/*边距*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}

4.模块化CSS——在CSS中引入面向对象编程思想

①如何划分模块——单一职责

拆分技巧：

1）模块和模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块

2）模块应在保证数量尽可能少的原则下,做到尽可能简单,以提供重用性

②CSS的命名——命名空间的概念

驼峰命名法用于区别不同单词，划线用于表明从属关系

用工程师姓名首字母缩写作为标识符

③挂多个class还是新建class——多用组合，少用继承

遵循面向对象设计的“单一职责”原则，在面向对象编程里，有个很重要的原则“多用组合，少用继承”，避免产生类爆炸。

总结：如果不确定模块的上下margin的稳定性，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用编剧的原子类（例如：mt10、mt20）。而且为了避免上下margin重合的出现，统一使用margin-top或者margin-bottom，不要混用margin-top和margin-bottom。

5.低权重原则——避免滥用子选择器

当不同选择符样式有冲突时，会选择权重高选择符的样式。权重相同时，遵循就近原则，会选择最后定义的样式。

少用子选择器，为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

6.CSS sprite

将多张背景图片合成一张大图，当修改图片时在最后新增图片，而不要重新修改图片的定位，以减少修改难度。

使用雪碧图会减少了http请求数，但会“降低开发效率”和“增加维护难度”，是否使用取决于网站的流量大小。

7.CSS的常见问题

①CSS的编码风格

一行式

②id和class

尽量使用class，少用id，因为id不能重用，会限制网站的扩展性。

③CSS hack

IE条件注释法

优点：兼容性最好。

缺点：将同一选择符分散到三个文件中去控制，增加了开发和维护成本。

选择符前缀法

相较于IE注释法，样式可集中起来，维护性增强。但不能用于内联样式。

样式属性前缀法

前缀只在特定浏览器下有效，例如：“_”只在IE6下生效，“*”在IE6和IE7下生效。

样式属性前缀法比选择符前缀法聚合程度更高，代码更简洁，可维护性更强。

④超链接访问后hover样式不出现问题

简单好记原则：love hate

l(link)ov(visited)e h(hove)a(active)te

四、高质量的JS

1.养成良好的编程习惯

①团队合作——如何避免JS冲突

用匿名函数避免冲突

匿名函数之间的通信：

全局变量
hash对象

用命名空间解决冲突问题，根据功能声明不同的命名空间，以及定义生成命名空间的函数

添加注释,可大大提高代码的可维护性，相关注释如下：

// 功能A

// 工程师甲

// email:

// 2009-11-04

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

②给程序一个统一的入口——window.onload和DOMReady

onload事件要求网页内所有的元素全部加载完毕后才会触发，JS框架提供的DOMReady只判断页面内所有的DOM节点是否已经全部完成

③CSS放在页头，JS放在页尾

④引入编译的概念——文件压缩

2.JS的分层概念和JS库

①JS如何分层

JS也可分为base层、common层、page层。

②base层

属于框架级代码。应加上命名空间。可分三块：操作DOM；操作事件；模仿其他语言提供原生JS不提供的函数

职责：解决不同浏览器下的差异；扩展JS底层提供的接口。

功能：给common和page提供接口。

document.all是IE支持的属性

JS兼容问题：透明度，event对象，冒泡，on、attachEvent和addEventListener

自定义常用用法弥补原生JS的不足

③common层

依赖base层提供的接口，提供可复用的组件。

像cookie，drag，Tab

④page层

完成页面功能需求

⑤JS库

3.编程实用技巧

①弹性

②getElementById、getElementsByTagName和getElementsByClassName

③可复用性

同一个页面里id只能出现一次，所以如果你的程序需要被多出复用，就一定不能使用id作为JS作为获取DOM借点的挂钩。

④避免产生副作用

⑤通过传参实现定制

如果一个函数内某个因素很不稳定，可以将它从函数内部分离出来，以参数的形式传入，从而实现将不稳定因素和函数解耦。

⑥控制this关键词的指向

在某些情况下，this在不同浏览器下的指向不同。

JS伪协议和内联事件对this的指向不同。

setTimeout、setInterval会改变this的指向，this指向window。

DOM节点DomNode调用函数时，this指向该Dom节点

setTimeout、setInterval和DOM节点DomNode改变的都是直接调用函数里的this的指向，使用匿名函数将我们的处理函数封装起来，可以将我们的处理函数由直接调用变为匿名函数间接调用。匿名函数调用方式，如下：

call和apply也可改变this的指向，在JS中使用继承就会用到call和apply方法。

⑦预留回调接口

当某些操作不在函数的主流程中执行，而是通过某些操作来触发的时候，可以通过设置回调函数来实现。

添加回调的接口可增加函数的可扩展性。

⑧编程中的DRY规则

在编程里有一个很出名的规则叫DRY——don't repeat yourself，强调不要将相同的代码重复编写多次。

⑨用hash对象传参

function test(config){

var oA=config.a || 1,oB=config.b || 2,oC=config.c || 3;

}

test({a:4,b:5,c:6})

test({b:5,c:6})

4.面向对象编程

①面向过程编程和面向对象编程

②编程

类定义

公有和私有

继承

编写高质量代码 | 笔记

一、开发中待解决问题

二、高质量的HTML

1.标签的语义化

2.如何确定标签是否语义良好

3.常见模块你真的了解吗

三、高质量的CSS

1.怪异模式和DTD

2.如何组织CSS

3.推荐的base.css