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");