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

想想自己的页面实现是否糟糕

Web标准--结构、样式和行为的分离

Web标准可分为三个部分：结构标准、样式标准、行为标准。

结构标准包括XML标准、XHTML标准、HTML标准

样式标准主要是指的CSS标准

行为标准主要包括DOM标准和ECS、ECMAScript标准。

所谓的高质量的代码，在WEB标准的思想指导下，在实现结构、样式、和行为分离的基础上，还要做到：精简、重用、有序。

注释可增加代码可读性。

公用组件和私有组件的维护可提高重用性

高质量的HTML

每个标签都有语义，所以我们应该使用有语义的标签，而且搜索引擎看不到视觉效果，看到的只有代码，只能通过标签来判断内容的语义。

先确定HTML，确定语义的标签，再来选用使用的CSS。

如何判断网页标签语义是否良好：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

语义化标签应该注意的问题：

高质量的CSS

模拟化css,也就是说将面向对象编程思想引用到组织css中，使用单一职责原理来划分模块。

1、模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。

2、模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

css命名建议：骆驼命名法用于区分不同单词，划线用于表示从属关系

在使用样式的时候，是挂多个class还是新建class，建议多用组合，少用继承。因为这样一方面减少了代码量，提高了可维护性，另一方面使类的职责更单一，增加了类的重用性，提高了开发效率。

（相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合）



HTML标签的权重是1，class的权重是10，id的权重是100。当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式，如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最近定义（这里说的是最后定义而非挂在class名的选择顺序），就采用哪个选择符的样式。

为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低，而低权重原则就是避免滥用子选择器。下面举个例子：



CSS sprite技术，在如下所说的情况下不能使用：

CSS Hack

IE条件注释法

只在IE下生效



只在IE6下生效



只在IE6以上版本生效



只在IE7上不生效



条件注释和style标签



条件注释和script标签



选择符前缀法：在css选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只能对特定浏览器生效



样式属性前缀法：在样式属性名前加前缀

CSS的那些事儿

IE6与IE7是不支持display:inline-block,了为兼容其它浏览器，就必须得触发行内元素的hasLayout。虽然这是一个hack，但是只能对行内元素实现display:inline-block,如果是块级元素就不行。

position:relative和position:absolute都可以改变元素在文档流（所谓的文档流就是z-index:0这一层）中的位置，设置了这俩属性之后就可以让元素激活left、top、right、bottom和z-index属性（默认情况下，这些属性未激活，设置了也无效），设置position:relative和position:absolute会让元素浮起来，也就是z-index值大于0， 但positon:relative会保留自己在z-index:0层的占位，而position:absolute会完全脱离文档流，它设置的left、right等属性的值会相对于自己最近的一个设置了position:relative或position:absolute的祖先元素，如果祖先元素全都没有设置position:relative或position:absolute，那么就是相对于body元素。

float也能改变文档流，float属性不会让元素上浮到另一个z-index层，它不能通过left、top、right、bottom属性精确的控制元素的坐标，只能通过float:left和float:right来控制元素在同层里的左浮和右浮，因为float会改变 正常的文档流排列，影响到周围元素。

position:absolute和float会隐式改变display类型，无论是什么类型的元素，只要设置了position:absolute、float:left、float:right中的任意一个，就会让元素以display:inline-block的方式显示。

水平居中：

1、文本、图片等行内元素的水平居中可以给给父元素设置text-align:center

2、确定宽度的块级元素的水平居中：通过设置自身的margin-left:auto和margin-right:auto来实现

3、不确定宽度的块级元素的水平居中方式：

　　1种方式：改变块级元素的display:inline然后使用text-align:center

　　2种方式：通过给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现

竖直居中：

1、父元素高度不确定竖直居中：通过给父元素设置相同的上下边距来实现

2、父元素高度确定的单行文本的竖直居中：通过给父元素设置line-height来实现，然后子元素的line-height和父元素的高度值相同

3、父元素高度确定的多行文本、图片、块级元素的竖直居中：

　　1、只有父元素为td和th时（td标签默认情况下隐式设置了vertical-align:middle），vertical-align属性才会生效，对于其它块级元素，默认情况下是不支持vertical-align属性,firefox和ie8下，可以设置块级元素的dispaly:table-cell，激活vertical-align，但是这种方法无法跨浏览器兼容

　　2、对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle，对不支持display:table-cell的ie6和ie7，使用特定hack



z-index设置为负值的时候，因为它位于z-index为0的body之下，被透明的body挡住了，所了绑定到z-index的负值的元素的事件可能就执行不了。

如果不设置z-index值 ，那么默认z-index的值为0，如果多个元素的z-index的值相同 ，那么后出现的元素会浮在先出现的元素之上

对于常规属性，统一使用node.xxx的方式读取，对于自定义属性，统一使用node.getAttribute("xxx")读取

动态加载css样式

function addStyleNode(str) {
var styleNode = document.createElement('style');
styleNode.type = 'text/css';
if (styleNode.styleSheet) {
styleNode.styleSheet.cssText = str;
} else {
styleNode.innerHTML = str;
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
}

注释规则

公共组件和各栏目的维护者都需要在文件头部加上注释说明

/**
*文件用途说明
*作者姓名
*联系方式
*制作日期
**/

大的模块注释方法

//===================================
//代码用途
//===================================

小的注释：

//代码说明

零碎点点

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

DRY（don't repeat yourself）

扩展内置类的行为

Array.prototype.each = function (func) {
for (var i = 0,n=this.length; i < n; i++) {
func(this[i], i);
}
}
Array.prototype.clone = function () {
var o = [];
this.each(function (v, k) {
o[k] = v;
});
return o;
}
Array.prototype.map = function (fun) {
var o = [];
this.each(function (v, k) {
o[k] = fun(v, k);
});
return o;
}
//delete是ie下的保留字  所以我们这会用Delete
Array.prototype.Delete = function (a) {
var o = this.clone();
for (var i = o.length,n=0; i > n; i--) {
if (o[i]==a) {
o.splice(i, 1);
}
}
return o;
}
var a = [1, 2, 3, 4, 5, ]
var str = '';
a.each(function (v, k) {
str += k + ':' + v + ' \n';
});
alert(str);
var b=a.map(function (v,k) {
return v * 10;
});
alert(a);
alert(b);
var c = b.Delete(20);
alert(c);

HTMLElement.prototype.next = function () {
var elem = this;
do {
elem = elem.nextSibling;
} while (elem&&elem.nodeType!=1);
}
HTMLElement.prototype.prev = function () {
var elem = this;
do {
elem = elem.previousSibling;
} while (elem && elem.nodeType != 1)
}
HTMLElement.prototype.first = function () {
var elem = this;
elem.firstChild;
return elem && elem.nodeType != 1 ? this.next(elem) : elem;
}
HTMLElement.prototype.last = function () {
var elem = this;
elem = elem.lastChild;
return elem && elem.nodeType != 1 ? this.prev(elem) : elem;
}

String.prototype.stripTags = function () {
return this.replace(/<\/?[^>]+>/gi, '');
}
String.prototype.toArray = function () {
return this.split('');
}
String.prototype.camelize = function () {
var oStringList=this.split('-');
if (oStringList.length == 1) {
return oStringList[0];
}
var camelizedString = this.indexOf('-') == 0
? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
: oStringList[0];
for (var i = 1,len=oStringList.length; i < len; i++) {
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
}
return camelizedString;
}

alert("<b><i>Hello</i>,world!</b>".stripTags() == "Hello,world!");
alert("abcdefg".toArray()[3] == 'd');
alert('background-color'.camelize() == "backgroundColor");