由於avalon以綁定屬性實現對DOM的選擇與操作,頁面的美觀與除錯就變得至關重要。參考boostrap的HTML規範,並制定如下
屬性所排列的規範
class (class, id, name與瀏覽器的原生選擇器相關,因此需前)
id,name (這個定義的順序直接影響到元素的attributes中的特性節點的排列順序,id具有獨佔性,慎用)
data-* 這涉及到內部dataset物件的生成,並且表示元件的data-button-*屬性應排在只表示快取的data-*屬性前面
ms-* 沒有屬性值的排在有屬性值的前面, 依長度排列
type title for hre f src style等原生屬性, 依長度排列
#使用者自訂屬性, 依長度排列
<p class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front" data-drag-handle="handle" data-drag-before-start="beforeStart" ms-draggable ms-visible="toggle" ms-css-width="width" ms-css-height="height" tabindex="-1" style="position: absolute;" > <p class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" > <span class="ui-dialog-title" >{{title|html}}</span> <button class="ui-dialog-titlebar-close" data-button-text="false" data-button-icon-primary="ui-icon-closethick" ms-widget="button" ms-click="close" type="button" >close</button> </p> </p>
註,我們應該盡可能少用ID,因為較新的瀏覽器中,它們都學IE5那樣直接把ID映射成一個全局變數,可能會引發各種奇怪問題。單頁應用的設計原則就是元件化,在這裡面,不應有頁面的觀念,只應有元件的觀念。在元件系統裡首先應該避免的是全域變量,id不幸就是這方面的典型。
空格與換行的處理
標籤名如有屬性,第一個屬性必須與它同行,第二個屬性換行,位置於第一個屬性對齊,其他屬性照辦
屬性格式的規範
屬性名必須小寫, 屬性值必須用雙引號括起,對於表單元素的布林屬性(如checked, selected, disabled)直接忽略屬性值
閉合的規則
自閉包標籤必須以「/>」結束,其他的格式都應為「
以上是詳解avalon的HTML規範的詳細內容。更多資訊請關注PHP中文網其他相關文章!