編寫高質量代碼——html、css、javascript


【編寫高質量代碼】
1、注釋的必要性:增加代碼的可讀性。
2、web標准:由一系列的標准組合而成,其核心理念是將網頁的結構、樣式、行為分離,所以他可分為:結構標准、樣式標准和行為標准。
3、一個符合標准的網頁,標簽中的標簽名應該全部都是小寫,屬性要加上括號,樣式和行為不要夾雜在標簽中,而應該分別單獨存放在樣式文件和腳本文件中。理想狀態下,網頁源代碼有三部分組成:.html文件、.css文件、.js文件。
4、所謂高質量的代碼,在web標准的指導下,在實現結構、樣式和行為分離的基礎上,還要做到三點:精簡、重用、有序。
5、閑聊原生javascript、javascript類庫和Ajax:
原生的javascript是瀏覽器默認支持的腳本語言,ajax是一種利用javascript和XMLHttpRequest對象在客戶端和服務器端傳遞數據的技術,因為XMLHttpRequest對象也是用javascript來創建的對象,從某種意義上來說,ajax是javascript的一個子集。

【高質量的html】
標簽的語義化:原因是搜索引擎看不到視覺效果,看到的只是代碼,只能通過標簽來判斷內容的語義。
table布局的網頁有如下特點:
代碼量大,結構混亂;
標簽語義不明確,對搜索引擎不友好。

正確的做法是:先確定html,確定語義的標簽,再來選用合適的css。
當頁面內標簽無法滿足設計需求是,才會添加div和span來輔助實現

語義化標簽應注意的一些問題:
盡量少的使用無語義化標簽div和span;
在語義不明顯,即可用p也可以用div的地方,盡量用p。因為p默認情況下有上下間距,去樣式后可讀性更好,對兼容特殊終端有利。
不要使用純樣式標簽,例如:b、font、u等。該用css樣式。

【高質量的css】
怪異模型和DTD:有時候不遵從標准模型的的模式;DTD指的是document type definition,及文檔類型定義,它是一種保證html文檔格式正確的有效方法,一個DTD文檔包含元素的定義規則、元素的關系的定義規則、元素課使用的屬性,可使用的實體或符號規則。

如何 組織css:
人們比較推薦的組織方法:base、common、page,三個層次分別表示:base是最低層,會被所有頁面引用,這一層與ui設計無關,無論任何風格的設計都可以引用他;common層,是組建級的css可以重用的csspage層,是最高層,每個頁面的都不一樣。

什么是css  reset?
html標簽在瀏覽器里面有自己的默認樣式,通過重新定義標簽的樣式,“覆蓋”掉瀏覽器的默認樣式,就叫做css reset。例如:*{margin:0;padding:0;}就是最早的css reset ,有些人喜歡在通配符“*”中寫很多樣式,但這是非常不好的,因為css的很多樣式是具有繼承性的,但是繼承的權重是非常低的,比標簽選擇符的權重更低,這樣的寫法會破化css的繼承性,設置樣式時會增加很多額外的代碼。

css命名——命名空間的概念
首先,css命名推薦使用英語,不要使用漢語拼音 ,我們可以根據內容來選用合適的英文單詞來命名css,我們可以通過駱駝命名法和划線命名法來命名,駱駝命名法用於區別不同的單詞,划線用於區別不同的從屬關系。在css中還引入了面向對象編程的思想對css進行命名,及根據不同的盒子的從屬關系來進行命名。

在給幾個相同的盒子定義樣式的時候:多用組合,少用繼承。

margin的上下處理:如果對相鄰的模塊同時使用margin-top和margin-bottom,邊距會重合帶來不必要的麻煩,所以最好統一使用不同的margin-top或margin-bottom,不要混合使用。(總結:如果不確定模塊上下margin特別穩定,最好不要將它寫到模塊的類里,而是使用類的組合,單獨為上下margin掛用邊距的原子類,模塊最好不要混用,統一使用。)

低權重原則——避免濫用子選擇器
當不同選擇符的設置有沖突時,會采用權重高的選擇符設置的樣式。權重的規則是這樣的:html 標簽的權重為1,class的權重為10,id的權重是100,p的權重是1等。如果css選擇符的權重相同,那么樣式會遵循就近原則,那個選擇符最后定義,就采用那個選擇符定義的樣式。
使用子選擇器,會增加css選擇符的權重,css的權重越高。樣式越不容易被覆蓋,越容易對其他選擇符產生影響,為了保證樣式容易被覆蓋,提高可維護性,css選擇符需要保證權重盡可能低。相比之下,新添class更利於維護。

css sprite
css sprite即將網站的背景圖片合並在一張大紙上,圖片的加載是會發出http請求的,一張圖需要一個http請求,多張就要多條http請求,http請求越多,訪問服務器的次數就越多,服務器的壓力就越大,這樣講多張圖合並在一張上,會大大減少網頁的http請求,減少服務器的壓力。但是他也會“降低開發效率”,“增大維護難度”。所以,是否使用css sprite 主要取決於網站的流量。

display:inline-block:它是行內的塊級元素,他擁有塊級元素的特點,可以設置寬度、長度,但是他卻不可以獨占一行他的寬度並不占滿父元素,而是和行內元素一樣,可以和其他行內元素排在同一行里。

文檔流: 網頁雖然看上去是二維結構,但實際上他是有z軸的,z軸的大小由z-index控制,默認情況下,所有元素都在z-index:0 ;這層,元素根據自己的display類型、長度 等屬性排列在z-index:0 這層,這就是文檔流。

position:relative和position:absolute都可以改變元素在文檔流中的位置,設置position:relative和position:absolute就會激活left、top、right、bottom和z-index屬性,(默情況下,這些屬性未經激活,是沒有效果的)。當網頁設置了position:relative和position:absolute是,網頁的z軸被激活,這時設置的position:relative和position:absolute都會高於z-index:0;層;相比之下,position:relative會保留在z-index:0;層原有的位置(空間),只是相對於z-index:0;層高了一層;而position:absolute會完全脫離文檔流,不再z-index:0;層保留占位符。對其做的定位都是相對於他自己最近的一個設置了position:relative和position:absolute的祖先元素或body元素。根據元素的不同定位概念,我們就可以對其進行一些相關的樣式。

【高質量的javascript】
在團隊合作時,為了避免js代碼的沖突:
1、用匿名函數將腳本包起來,可以有效控制全局變量,避免沖突隱患。如果要實現兩個功能的之間的通信,有時我們可以定義一個全局變量,利用全局作用域的變量在各個匿名函數間搭起橋梁。
2、如果添加的全局變量太多,就違背了用匿名函數的初衷,所以應該嚴格控制全局變量的數量 。這時,我們就可以有”hash對象“作為全局變量,如下代碼:

<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
var GLOBAL={};
</script>
<script type="text/javascript">
(
function(){
var a=123; b="hello world";
GLOBAL.str2
=a;
GLOBAL.str
=b;
})();
</script>
<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
(
function(){
var a, c="abc";
})();
</script>
<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
(
function(){
var a=GLOBAL.str2,b=GLOBAL.str;
var d="adang is very handsome";
d
=b+","+d+a;
})();
</script>

 使用普通的變量作為全局變量,擴展性很差,所以我們可以使用一個{}對象類型的變量作為全局變量,如果匿名函數間需要多個變量來做通信橋梁,我們可以將這些變量作為全局變量的屬性,這樣既可以保證全局變量的個數,同時擴展性很好。大多數開發者推薦使用大寫的GLOBAL作為全局變量的變量名。
3、為了解決全局變量的沖突,我們可以使用命名空間。命名空間是一個特殊的前綴,在javascript中她其實是一個 通過{}對象實現的。在不同的匿名函數中,我們根據功能不同生命不同的命名空間,然后每個匿名函數的GLOBAL對象的屬性都不要直接掛在GLOBAL對象上,而是掛在此匿名函數的命名空間下,如:

<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
var GLOBAL={};
</script>
<script type="text/javascript">
(
function(){
var a=123; b="hello world";
GLOBAL.A
={};
GLOBAL.A.str2
=a;
GLOBAL.A.str
=b;
})();
</script>
<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
(
function(){
var a, c="abc";
GLOBAL.B
={};
GLOBAL.B.str
=c;
})();
</script>

如果一個匿名函數中的程序非常復雜,變量名很多,命名空間還可以進一步擴展,生成二級命名空間,如:

<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
var GLOBAL={};
</script>
<script type="text/javascript">
(
function(){
var a=123; b="hello world";
GLOBAL.A
={};
GLOBAL.A.CAT
={};
GLOBAL.A.DOG
={};
GLOBAL.A.CAT.name
="mimi";
GLOBAL.A.DOG.name
="tom";
GLOBAL.A.CAT.move
=function(){
//
}
GLOBAL.A.str2
=a;
GLOBAL.A.str
=b;
})();
</script>

4、因為生成命名空間是一個非常常用的功能所以我們可以進一步將生成命名空間的功能定義為一個函數,方便調用,如:

<div>
xxxxxxxxxx
</div>
<script type="text/javascript">
var GLOBAL={};
GLOBAL.namespace
=function(str){
var arr=str.split("."),o=GLOBAL;
for(i=(arr[0]=="GLOBAL")?1:0; i<arr.length;i++){
o[arr[i]]
=o[arr[i]] || {};
o
=o[arr[i]];
}
}
</script>
<script type="text/javascript">
(
function(){
var a=123; b="hello world";
GLOBAL.namespace(
"A.CAT");
GLOBAL.namespace(
"A.DOG");
GLOBAL.A.CAT.name
="mimi";
GLOBAL.A.DOG.name
="tom";
GLOBAL.A.CAT.move
=function(){
//
}
GLOBAL.A.str2
=a;
GLOBAL.A.str
=b;
})();
</script>

我們給GLOBAL對象添加namespace方法,就可以在需要的命名空間的匿名函數中調用。
5、改善這種代碼后,我們就需要給代碼添加適當的注釋,以提高代碼的可維護性。讓js不產生沖突,需要避免全局變量的泛濫,合理使用命名空間以及為代碼添加必要的注釋。

給程序一個統一的入口——window.onload和DOMReady
為了不讓javascript代碼零散的在獨立的進行游擊,我們需要在功能上對程序進行 職能划分,網頁的javascript從功能上,應該分為兩個部分——框架部分和應用部分。框架部分提供的是對javascript代碼的組織作用,包括定義全局變量、定義命名空間方法等。他和具體應用無關。應用部分提供的是頁面的功能邏輯。

在不分離的代碼中,css一般放在頁頭,javascript一般放在頁尾。

javascript的分層概念與javascript庫
1、javascript也可以像css那樣分為三層:base層、common層、page層。base層主要職責是封裝不同瀏覽器下javascript的差異,提供統一接口,還有就是擴展javascript語言底層提供的接口,讓他提供更多更為易用的接口;common層則是是提供可供復用的組件和頁面的具體功能沒有直接關系;page層是最頂層,寫網頁的具體功能。


(1)base層
下面是一些典型的javascript兼容性問題
透明度:在IE下透明度是通過濾鏡實現的,而在firebox下透明度是通過css的opacity屬性實現的。
為了實現兼容性,就可以將透明度功能封裝成setopacity函數,如下:

function setopacity(node, level){
node=typeof node=="string" ? document.getElementById(node):node;
if(document.all){
node.style.filter='alpha(opacity'+ level+')';
}else{
node.style.opacity=level/100;
}
}

event對象:在IE中,event對象是作為window的屬性作用於全局作用域中,而在firebox中,event對象是作為事件的參數存在的,這樣就會產生一些兼容性問題,對此,我們也可以通過封裝函數來避免。


冒泡:對於一些事件的冒泡,我們也可以通過設置IE下event對象的cancelBubble屬性為true來實現,在firebox下,可以通過調用event對象的stopPropagation方法來實現。


on、attachEvent 和addattachListener:我們一般對DOM節點進行監聽事件,我們一般是采用on xxx方式,這樣會造成前面事件的覆蓋,為此,我們可以 用attachEvent 和addattachListener代替on xxx。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com