如何将函数作为参数传入jQuery模板并显示其返回的首个元素？

我懂你的需求：有时候data是返回数组的函数，有时候直接就是数组，你想在模板里显示它返回（或本身）的首个元素的Name，而且不想提前把data硬存成固定类型的变量。这里有个简洁的适配方案，完美覆盖两种场景：

步骤1：简化模板逻辑 #

既然只需要首个元素，没必要写each循环遍历找$index == 0，直接访问数组的第一个元素就行，还能加个空数组判断避免报错：

var template = '{{if $data.length > 0}}<span>${$data[0].Name}</span>{{/if}}';

步骤2：动态处理data参数 #

在传给jq.tmpl之前，判断data的类型：如果是函数，就执行它拿到返回的数组；如果是数组就直接用。这样不管data是什么类型，都能统一成数组传入模板：

// 动态适配data类型：函数就执行，数组直接用
var targetData = typeof data === 'function' ? data() : data;
// 渲染模板并设置文本
$('.dropdownText').text(jq.tmpl(template, targetData).text());

完整可运行代码 #

把两者结合起来，就是这样：

var template = '{{if $data.length > 0}}<span>${$data[0].Name}</span>{{/if}}';
var targetData = typeof data === 'function' ? data() : data;
$('.dropdownText').text(jq.tmpl(template, targetData).text());

为什么这个方案可行？ #

• 没有硬写死data的处理逻辑，完全根据它的实际类型动态适配，完美兼容函数和数组两种输入场景。
• 简化后的模板跳过了不必要的循环，直接定位首个元素，性能更优，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者Raul Buzilă