如何通过参数动态调用jQuery操作优化loadTemplate函数以复用DOM插入逻辑

当然可以实现！你只需要给函数新增一个参数来指定DOM插入方法，利用JavaScript对象的方括号调用语法，就能用同一个函数处理所有DOM插入场景，不用写一堆重复的处理逻辑。

修改思路 #

1. 新增操作参数：给loadTemplate函数添加一个可选参数（比如insertMethod），默认值设为'after'，这样不传入参数时会保持原有行为，不会影响旧代码。
2. 动态调用DOM方法：通过$(target)[insertMethod]()的方式，用字符串参数来动态调用jQuery的DOM插入方法（比如append、prepend、before、after等）。
3. 简化渲染逻辑：把模板渲染的结果提前提取出来，避免重复写$.templates(...).render(...)的代码，让结构更清晰。

修改后的完整代码 #

function loadTemplate(templateName, templates, target, insertMethod = 'after') { 
  try { 
    $("<div/>").load(path, function () { 
      $(this).appendTo("body").unwrap(); 
      templates.map(template => { 
        // 先统一渲染模板，减少重复代码
        const renderedTemplate = template.hasOwnProperty("data")
          ? $.templates(template.name).render(template.data, utils)
          : $.templates(template.name).render();
        
        // 动态调用指定的DOM插入方法，然后执行动画
        $(target)[insertMethod](renderedTemplate).hide().fadeIn(200);
      }) 
    }); 
  } catch (error) { 
    console.error(error); 
  } 
}

使用示例 #

• 保持原有行为（在目标元素后插入）：

  loadTemplate('myTemplate', templateList, '#targetElement');
  

• 向目标元素内部追加内容：

  loadTemplate('myTemplate', templateList, '#targetElement', 'append');
  

• 向目标元素内部前置内容：

  loadTemplate('myTemplate', templateList, '#targetElement', 'prepend');
  

• 在目标元素前插入内容：

  loadTemplate('myTemplate', templateList, '#targetElement', 'before');
  

注意点 #

• 确保传入的insertMethod是jQuery支持的DOM插入方法名称，比如append、prepend、before、after、html等，否则会报错。如果需要更严谨，可以加个参数校验逻辑。
• 这里用了ES6的默认参数语法，如果需要兼容旧浏览器，可以改成insertMethod = insertMethod || 'after'的写法。

内容的提问来源于stack exchange，提问作者Super Retarded Dog