渲染用户信息和设备信息函数 - JavaScript 代码示例

渲染用户信息和设备信息函数 - JavaScript 代码示例

这段代码包含两个函数，renderUserInfo() 和 renderDevInfo()，用于渲染用户信息和设备信息。

renderUserInfo() 函数：

该函数用于渲染用户信息，包括用户基础属性和自定义属性。同时，它还负责展示用户详细信息的弹窗。

function renderUserInfo() {
    var count = 0,
        userAttrs = [],
        userDetailHtml = '';
    $('#userName-info, #userName-logo').text(htmlEncode(g_userName));
    $('#userName-info, #userName-logo').attr('title', htmlEncode(g_userName));
    $('.user-info_custom_attr').empty();

    for (key in basic_attr) { // 基础属性渲染
        if (_.indexOf(filterInfoArray, key) !== -1) continue;
        var name = basic_attr_mapTable[key];
        var val = basic_attr[key];
        if ('expire' === key) {
            val = val === 0 ? t('永久有效') : format(val * 1000);
        } else if ('lastonline' === key) {
            val = val === 0 ? '' : format(val * 1000);
        }

        name = htmlEncode(name);

        if ('phone' === key && !val) {
            val = '<span class='to-config-phone'>' + t('未配置') + '</span>';
        } else if ('mail' === key && !val) {
            val = '<span class='to-config-mail'>' + t('未配置') + '</span>';
        } else {
            val = htmlEncode(val);
        }

        if (count % 4 === 0) {
            renderAttr(name, val, true);
        } else {
            renderAttr(name, val);
        }
        count++;
        userAttrs.push({
            name: name,
            val: val
        });
    }
    for (var i = 0; i < custom_attr.length; i++) {
        if (count % 4 === 0) {
            renderAttr(custom_attr[i].name, custom_attr[i].value, true);
        } else {
            renderAttr(custom_attr[i].name, custom_attr[i].value);
        }
        count++;
    }
    $('.user-info_custom_attr').removeClass('one-line, two-line');
    if (count <= 4) {
        $('.user-info_custom_attr').addClass('one-line');
    } else if (count <= 8) {
        $('.user-info_custom_attr').addClass('two-line');
    }
    $('.device-content')[0].style.top = $('.userinfo').height() + 16 + 'px';
    for (var i = 0; i < userAttrs.length; i++) {
        userDetailHtml += '<div class='user-detail-list-item'>' +
            '<label class='user-detail-list-name ellipsis' title='' + userAttrs[i].name + ''>' + userAttrs[i].name + t('：') + '</label>' +
            '<label class='user-detail-list-val ellipsis' title='' + userAttrs[i].val + ''>' + userAttrs[i].val + '</label></div>';
    }
    $('#viewMoreWindow .pop-window-body').html(userDetailHtml);
}

renderDevInfo() 函数：

该函数用于渲染设备信息，包括绑定的设备数量和每个设备的详细信息。

function renderDevInfo() {
    $('#dev-nums').text(t('绑定终端（{0}）', bindDevCounts));
    for (key in bindJsonData) {
        createDevBox(bindJsonData[key], key);
    }
}

代码解释:

• 函数 renderUserInfo() 和 renderDevInfo() 分别用于渲染用户信息和设备信息。
• renderUserInfo() 函数遍历基础属性和自定义属性，并根据属性数量调整显示样式。
• renderDevInfo() 函数显示绑定的设备数量，并循环渲染每个设备的详细信息。
• 代码中使用了 htmlEncode() 函数进行 HTML 编码，以防止 XSS 攻击。
• t() 函数用于获取翻译后的文本，提升代码可维护性。

总结：

这段代码展示了如何使用 JavaScript 函数来渲染用户信息和设备信息。它使用动态样式调整，并通过循环遍历数据进行渲染，提高了代码的可读性和可维护性。