如何封装重复HTML生成逻辑为可复用JS函数并解决传参问题？

你的问题出在错误地将代码逻辑以字符串形式返回，导致变量作用域混乱、模板字符串插值失效。正确的做法是让函数接收依赖参数，在函数内部完成HTML拼接并返回最终的HTML字符串，而非返回一段可执行代码。

正确的封装实现 #

// 封装生成播放列表HTML的函数
function generatePlaylistHtml(playlists, activeCourseId) {
  let strhtml = "";
  // 遍历播放列表数据
  for (let i = 0; i < playlists.length; i++) {
    const item = playlists[i];
    // 拼接基础HTML结构
    strhtml += `<div class="list-group-item list-group-item-action user-learning-playlist-container">
        <div class="d-flex w-100 justify-content-between">
          <div class="title">
            <h6 class="mt-2">${item.title}</h6>
          </div>`;
    
    // 根据ispresent状态生成对应按钮
    let actionbutton;
    if (item.ispresent === 1) {
      actionbutton = ` 
            <button type="button" class="btn btn-secondary" id="btn-remove-course-from-playlist" data-course-id="${item.courseid}" data-playlist-id="${item.playlistid}" data-playlist-detail-id="${item.playlistdetailid}">
             <h6 class="m-0">Remove</h6>
            </button>`;
    } else {
      actionbutton = `
            <button type="button" class="btn btn-secondary" id="btn-add-course-to-playlist" data-course-id="${activeCourseId}" data-playlist-id="${item.id}">
             <h6 class="m-0">
               <i class="icon fa fa-plus"></i>Add
             </h6>
            </button>`;
    }
    
    // 拼接按钮和闭合标签
    strhtml += `${actionbutton}
        </div>
      </div>`;
  }
  return strhtml;
}

在AJAX请求中调用函数 #

在你的AJAX回调里，只需传入对应的数据即可：

// 假设这是你的AJAX回调部分
// ...
const playlistData = response.data;
const playlistHtml = generatePlaylistHtml(playlistData, activecourseid);
$("#playlist-modal").html(playlistHtml);
// ...

关键改进点说明 #

• 参数传递：函数明确接收playlists（播放列表数据数组）和activeCourseId（当前课程ID）两个依赖参数，避免依赖全局变量，提升复用性。
• 模板字符串正确使用：直接在函数内部拼接HTML，模板字符串的插值${}能正确访问函数内部的item变量。
• 逻辑分离：函数只负责生成HTML字符串，更新DOM的操作放在外部，符合单一职责原则，后续可灵活将生成的HTML用于其他容器。

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