avalon 的HTML规范

由于avalon以绑定属性实现对DOM的选择与操作,页面的美观与调试就变得至关重要。参照boostrap的HTML规范,制定如下

属性排列的规范

  1. class (class, id, name与浏览器的原生选择器相关,因此需靠前 )
  2. id,name (这个定义的顺序直接影响到元素的attributes中的特性节点的排列顺序,id具有独占性,慎用)
  3. data-* 这涉及到内部dataset对象的生成,并且表示组件的data-button-*属性应排在只表示缓存的data-*属性前面
  4. ms-* 没有属性值的排在有属性值的前面, 依长度排列
  5. type title for hre f src style等原生属性, 依长度排列
  6. 用户自定义属性, 依长度排列
<div 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;"
>
<div 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>
</div>
</div>

注,我们应该尽可能少用ID,因为较新的浏览器中,它们都学IE5那样直接把ID映射成一个全局变量,可能会引发各种奇怪问题。单页应用的设计原则就是组件化,在这里面,不应有页面的观念,只应有组件的观念。在组件系统里首先应该避免的就是全局变量,id不幸就是这方面的典型。

空格与换行的处理

标签名如有属性,第一个属性必须与它同行,第二个属性换行,位置于第一个属性对齐,其他属性照办

属性格式的规范

属性名必须小写, 属性值必须用双引号括起,对于表单元素的布尔属性(如checked, selected, disabled)直接忽略属性值

闭合的规则

自闭包标签必须以“/>”结束,其他的格式都应为“<xxx>ffffffffffffffff</xxx>”

上一篇:吴裕雄--天生自然PYTHON爬虫:爬取某一大型电商网站的商品数据(效率优化以及代码容错处理)


下一篇:开课选课系统APP基本功能实现