avalon 的HTML规范

最新推荐文章于 2021-06-15 19:37:11 发布

转载最新推荐文章于 2021-06-15 19:37:11 发布 · 126 阅读

本文详细介绍了使用Avalon通过绑定属性实现DOM选择与操作的方法，遵循Bootstrap HTML规范，制定属性排列规范。强调了组件化设计原则，减少ID的使用，避免全局变量，提供空格与换行的处理建议，以及属性格式和闭合规则的指导，旨在优化页面的美观性和调试效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于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等原生属性，依长度排列
用户自定义属性, 依长度排列

<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不幸就是这方面的典型。