呈现JavaScript模板

我希望在用户将鼠标悬停在特定链接上时显示一个弹出窗口

为此，我首先通过Ajax从服务器请求特定的JSON数据

服务器查询数据库，并转义用户使用

htmlspecialchars（）

和echos

json\u encode（$data）

提供的任何数据

然后，客户端使用下面的模板组装HTML

然后，客户端显示弹出窗口

我的问题只与呈现模板有关

是否有更好的方法可以提供以下一项或全部好处

模板更具可读性

模板更容易维护

模板可以扩展

不需要创建显示电话号码等的自定义方法

站点比XSS更安全

htmlspecialchars转义从服务器移动到客户端

我还没有想到的其他好处

多谢各位

function getTemplate(type,json) {
    switch(type) {
        case 'person':
            return '<dl><dt>Name:</dt><dd>'+((d.firstname&&json.lastname)?json.firstname+' '+json.lastname:((json.firstname)?json.firstname:json.lastname))+'</dd>'
            +'<dt>Account:</dt><dd>'+json.account_name+'</dd>'
            +((json.title)?'<dt>Title:</dt><dd>'+json.title+'</dd>':'')
            +'<dt>User Name:</dt><dd>'+json.username+'</dd>'
            +'<dt>Password:</dt><dd>'+json.password+'</dd>'
            +'<dt>Communication Method:</dt><dd>'+json.communication_method+'</dd>'
            +((json.email)?'<dt>Email:</dt><dd>'+json.email+'</dd>':'')
            +((json.account_phone)?'<dt>Account Phone:</dt><dd>'+ayb.display_phone(json.account_phone)+'</dd>':'')
            +((json.phone)?'<dt>Direct Phone:</dt><dd>'+ayb.display_phone(json.phone)+'</dd>':'')
            +((json.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+ayb.display_phone(json.mobile_phone)+'</dd>':'')
            +((json.account_fax)?'<dt>Account Fax:</dt><dd>'+ayb.display_phone(json.account_fax)+'</dd>':'')
            +((json.fax)?'<dt>Direct Fax:</dt><dd>'+ayb.display_phone(json.fax)+'</dd>':'')
            +((json.address || json.location)?'<dt>Address:</dt><dd>'+json.address+((json.address && json.location)?'<br>':'')+json.location+'</dd>':'')
            +'</dl>';
            break;
        case 'company':
            return 'bla bla bla';
            break;
        case 'somethingElse':
            return 'bla bla bla';
            break;
            return '<h1>Invalid Template</h1>';
    }
}

函数getTemplate（类型，json）{ 开关（类型）{ 案例“人”： 返回“Name:”+（（d.firstname&&json.lastname）？json.firstname+“”+json.lastname:（（json.firstname）？json.firstname:json.lastname））+“” +'帐户：'+json.Account_name+'' +（（json.title）？'title:'+json.title+''：） +'用户名：'+json.username+'' +'密码：'+json.Password+'' +'通信方法：'+json.Communication_Method+'' +（（json.email）？'email:'+json.email+''：） +（（json.account\u phone）-“account phone:”+ayb.display\u phone（json.account\u phone）+''：） +（（json.phone）？“直接电话：”+ayb.display_电话（json.phone）+''：） +（（json.mobile_phone）-“mobile phone:”+ayb.display_phone（json.mobile_phone）+''：） +（（json.account\u fax）-“account fax:”+ayb.display\u phone（json.account\u fax）+“”：“”） +（（json.fax）？“直接传真：”+ayb.display_电话（json.fax）+''：） +（（json.address | | json.location）？“地址：”+json.address+（（json.address&&json.location）？”
：“”）+json.location+“”） +''; 打破 “公司”一案： 返回“blablabla”； 打破 “某物”案例： 返回“blablabla”； 打破 返回“无效模板”； } }

---

下面是一个使用mustache.js的：

html:

Name:{{firstname}{{lastname}}
帐户：{{Account_name}
{{{#标题}
标题：{{Title}}
{{/title}}
用户名：{{username}
密码：{{Password}}
通信方法：{{通信方法}
{{{电子邮件}
电子邮件：{{Email}
{{/email}
{{{账户电话}
账户电话：{{{{{{Account{Phone}}{{/display{Phone}}
{{/account\u phone}
布拉布拉
什么东西

json:

  var json = {
        "firstname": "Basha",
        "lastname": "tasha",
        "account_name":"presonal",
        "title":"MR",
        "username":"basha",
        "password":"******",
        "communication_method":"phone<b>xss safe</b>",
        "account_phone": "1231231234"
    };

var json={
“名字”：“巴沙”，
“姓氏”：“塔莎”，
“账户名称”：“个人”，
“头衔”：“先生”，
“用户名”：“basha”，
“密码”：“*******”，
“通信方法”：“phonexss安全”，
“账户电话”：“1234”
};

js:

$（文档）.ready（函数（）{
var输出=$（“#输出”）；
type=“person”；
var template=$（“#”+type）.html（）；
如果（模板==未定义）模板=“无效模板”；
//在调用Mustache.render（模板，json）之前，可以为phone render注入客户端回调
json.display_phone=函数（）{
返回函数（val，render）{
var phone=render（val）；
返回电话。替换（/（\d{3}）（\d{3}）（\d{4}）/，“$1-$2-$3”）；
}
};
var html=Mustache.render（模板，json）；
append（html）；
});

它是安全的

---

请注意，自定义方法是在json数据“display\u phone”中发送的。

为什么不使用angular js？@jQueryAngryBird不知道它是什么。有棱角的js与胡子和把手类似吗？我会调查的。htmlspecialchars（）不会逃避任何东西。它将字符转换为html实体。addslashes（）或mysqli_escape_string（）是用来转义字符的。@Brian。让我重新措辞。我希望客户端能够防止XSS。@ jQuangYangGryBangEangLujs看起来是一个非常强大的框架，我将强烈考虑在未来的项目中使用它。不过，现在我只想更好地呈现一些模板。谢谢你，Ammaroff，电话的回拨通常在客户端处理吗？例如，客户端将JSON转换为对象，然后重写该属性？或者服务器直接用回调创建JS对象。是的，回调是从客户端处理的。您可以在从服务器获取后将display_phone注入json，我更新了上面的解决方案。我更新了解决方案您可以访问我回答中的更新链接谢谢您的帮助！我更新的答案中最新的plunker链接显示了如何从服务器获取json

  var json = {
        "firstname": "Basha",
        "lastname": "tasha",
        "account_name":"presonal",
        "title":"MR",
        "username":"basha",
        "password":"******",
        "communication_method":"phone<b>xss safe</b>",
        "account_phone": "1231231234"
    };

$(document).ready(function () {
var output = $("#output");
type = "person";
var template = $("#"+type).html();

if(template == undefined) template = "<h1>Invalid Template</h1>";

//you can inject client side callback for phone render before calling Mustache.render(template,json)

  json.display_phone= function () {
   return function (val, render) {
       var phone = render(val);
            return phone.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

        }
    };
    var html = Mustache.render(template, json);

    output.append(html);

 });