data-behavior模式：JavaScript开发者的最佳实践

<!-- 混乱的做法：同一个类既用于样式又用于行为 -->
<button class="btn btn-primary modal-trigger">打开弹窗</button>

// 问题：
// 1. 如果修改CSS类名，JS代码也需要修改
// 2. 设计师可能不知道某个类被JS使用
// 3. 重构风险高
$('.modal-trigger').on('click', openModal);

<!-- 清晰的做法：使用data-behavior标记行为 -->
<button class="btn btn-primary" data-behavior="modal-trigger">打开弹窗</button>

// 优点：
// 1. CSS类名变化不影响JS
// 2. 明确区分样式和行为
// 3. 易于理解和维护
$('[data-behavior="modal-trigger"]').on('click', openModal);

<button 
  class="btn btn-primary" 
  data-behavior="modal-open" 
  data-modal="signup">
  注册
</button>

<div class="modal" data-behavior="modal" data-modal-name="signup">
  <div class="modal-content">
    <h2>注册</h2>
    <button data-behavior="modal-close">关闭</button>
  </div>
</div>

// JavaScript处理
$(document).ready(function() {
  // 打开弹窗
  $('[data-behavior="modal-open"]').on('click', function() {
    var modalName = $(this).data('modal');
    $('[data-behavior="modal"][data-modal-name="' + modalName + '"]').show();
  });
  
  // 关闭弹窗
  $('[data-behavior="modal-close"]').on('click', function() {
    $(this).closest('[data-behavior="modal"]').hide();
  });
});