温故知新:haml与html

先上两段代码

haml代码

.container
  .col-md-6
    .container
      %video(ng-repeat='url in urls' id='{{url.flag}}' ng-show='{{url.flag}}' controls )
        %source(src="{{url.name}}")
  .col-md-6
    .container
      %br
      .row
        .col-md-1
        .col-md-10
          {{content}}
      %br
      .rom
        .col-md-1
        .col-md-10.text-center
          %input(class='form-control' ng-model='result')
      %br
      %br
      .rom
        .col-md-9
        .col-md-1.text-center
          %button(class='btn btn-primary')确定
          %div(template)

对应的html代码

<div class='container'>
  <div class='col-md-6'>
    <div class='container'>
      <video controls='controls' id='{{url.flag}}' ng-repeat='url in urls' ng-show='{{url.flag}}'>
        <source src='{{url.name}}'></source>
      </video>
    </div>
  </div>
  <div class='col-md-6'>
    <div class='container'>
      

      <div class='row'>
        <div class='col-md-1'></div>
        <div class='col-md-10'>
          {{content}}
        </div>
      </div>
      

      <div class='rom'>
        <div class='col-md-1'></div>
        <div class='col-md-10 text-center'>
          <input class='form-control' ng-model='result' />
        </div>
      </div>
      

      

      <div class='rom'>
        <div class='col-md-9'></div>
        <div class='col-md-1 text-center'>
          <button class='btn btn-primary'>确定</button>
          <div template='template'></div>
        </div>
      </div>
    </div>
  </div>
</div>

好吧，相形见绌，html在haml的映衬下，显得层次凌乱而且繁琐，haml代码不但层次清晰，而且写法上也很方便快捷：
带class的div可以直接写成.className（注意前面的 点）；
带id的div可以直接写成#id.
修改的时候也很好修改，也不用担心因为div繁多而造成的混乱。
不过很重要的一点是haml是严格要求缩进的，通过缩进来展现层次和所属关系。