Question

可以说我有以下html标签：

<button type="button" class="btn btn-primary btn-block" onclick="myFunction(); mySecondFunction();" title="It's a button!"></button>

这变得很长，并且开始很难读取它具有的属性，因此我想通过将每个属性放在新行中来包装标签，但是哪种方法是一种好方法呢？将>保留在最后一个属性上？将>放在自己的行上？

方法1：

<button 
  type="button" 
  class="btn btn-primary btn-block" 
  onclick="myFunction(); mySecondFunction();" 
  title="It's a button!"
>
  Button Text
</button>

方法2：

<button 
  type="button" 
  class="btn btn-primary btn-block" 
  onclick="myFunction(); mySecondFunction();" 
  title="It's a button!">
  Button Text
</button>

方法3：

<button 
type="button" 
class="btn btn-primary btn-block" 
onclick="myFunction(); mySecondFunction();" 
title="It's a button!">
  Button Text
</button>

方法4（仅在时间过长时自动换行）：

<button type="button" class="btn btn-primary btn-block" 
onclick="myFunction(); mySecondFunction();" title="It's a button!">
  Button Text
</button>

其他方法？

我知道无论如何在技术上都是可以接受的，但是请记住，代码编辑器如何管理制表和格式化以及纯可读性，想了解推荐的方法。

Answer 1

根据Google style guide的换行部分，方法2可能是您的最佳选择。该指南建议将>放在最后一个属性上：

<md-progress-circular
  md-mode="indeterminate"
  class="md-accent"
  ng-show="ctrl.loading"
  md-diameter="35">
</md-progress-circular>

包装长HTML标记，采用哪种方法？

1 个答案: