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

時間 2019-11-11

標籤編寫高質量代碼 html css javascript 欄目 HTML 简体版

原文原文鏈接

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

【高質量的html】
標籤的語義化：緣由是搜索引擎看不到視覺效果，看到的只是代碼，只能經過標籤來判斷內容的語義。
table佈局的網頁有以下特色：
代碼量大，結構混亂；
標籤語義不明確，對搜索引擎不友好。javascript

正確的作法是：先肯定html，肯定語義的標籤，再來選用合適的css。
當頁面內標籤沒法知足設計需求是，纔會添加div和span來輔助實現css

語義化標籤應注意的一些問題：
儘可能少的使用無語義化標籤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進行命名，及根據不一樣的盒子的從屬關係來進行命名。html

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

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：它是行內的塊級元素，他擁有塊級元素的特色，能夠設置寬度、長度，可是他卻不能夠獨佔一行他的寬度並不佔滿父元素，而是和行內元素同樣，能夠和其餘行內元素排在同一行裏。node

文檔流：網頁雖然看上去是二維結構，但實際上他是有z軸的，z軸的大小由z-index控制，默認狀況下，全部元素都在z-index：0 ；這層，元素根據本身的display類型、長度等屬性排列在z-index：0 這層，這就是文檔流。web

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元素。根據元素的不一樣定位概念，咱們就能夠對其進行一些相關的樣式。ajax

【高質量的javascript】
在團隊合做時，爲了不js代碼的衝突：
一、用匿名函數將腳本包起來，能夠有效控制全局變量，避免衝突隱患。若是要實現兩個功能的之間的通訊，有時咱們能夠定義一個全局變量，利用全局做用域的變量在各個匿名函數間搭起橋樑。
二、若是添加的全局變量太多，就違背了用匿名函數的初衷，因此應該嚴格控制全局變量的數量。這時，咱們就能夠有」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做爲全局變量的變量名。
三、爲了解決全局變量的衝突，咱們可使用命名空間。命名空間是一個特殊的前綴，在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>

四、由於生成命名空間是一個很是經常使用的功能因此咱們能夠進一步將生成命名空間的功能定義爲一個函數，方便調用，如：

<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方法，就能夠在須要的命名空間的匿名函數中調用。
五、改善這種代碼後，咱們就須要給代碼添加適當的註釋，以提升代碼的可維護性。讓js不產生衝突，須要避免全局變量的泛濫，合理使用命名空間以及爲代碼添加必要的註釋。

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

在不分離的代碼中，css通常放在頁頭，javascript通常放在頁尾。

javascript的分層概念與javascript庫
一、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。