基于Bootstrap 4模态框的视频jQuery代码优化：实现DRY原则

嗨，看到你这段重复的代码就知道肯定头疼——每个模态框都写一遍几乎一样的事件绑定，完全违反了DRY（Don't Repeat Yourself）原则！别担心，咱们用类选择器和DOM关系来一次性解决这个问题，以后加多少个视频模态框都不用改JS代码。

第一步：调整HTML结构 #

给所有包含视频的模态框添加一个统一的类，比如video-modal，同时给模态框内的目标视频也加个专属类（比如autoplay-video），这样定位更精准：

<!-- 示例模态框结构 -->
<div class="modal fade video-modal" id="video1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <video class="autoplay-video" controls>
          <source src="your-video-url.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>

<!-- 其他视频模态框只需要复制上面的结构，改ID和视频地址即可，不用改类 -->

第二步：编写通用的JS代码 #

只需要绑定一次事件，利用Bootstrap模态框的事件，结合this定位当前触发事件的模态框，再找到里面的视频元素：

// 给所有带video-modal类的模态框统一绑定事件
$('.video-modal')
  // 模态框显示完成后播放视频
  .on('shown.bs.modal', function() {
    // 找到当前模态框内的autoplay-video元素，调用play()
    $(this).find('.autoplay-video')[0].play();
  })
  // 模态框关闭后暂停视频
  .on('hidden.bs.modal', function() {
    $(this).find('.autoplay-video')[0].pause();
  });

为什么这比原来的代码好？ #

• 完全符合DRY原则：不管你有10个还是100个视频模态框，这段代码都能搞定，不用重复写N遍几乎一样的绑定逻辑
• 易于维护：以后要修改播放/暂停的逻辑，只需要改这一段代码就行，不用逐个找每个视频的绑定
• 灵活扩展：新增视频模态框时，只需要给模态框加上video-modal类，视频加上autoplay-video类，不用碰JS代码

这样就彻底告别重复的WET（Write Everything Twice）代码啦！

内容的提问来源于stack exchange，提问作者DianaHeit