请问reder里应该怎么写

js占位符问题

StinsonZhao

3.5k22131

发布于
2016-12-27

就是把模板节点内包含的所有节点中有模板标记值的用正则找出来，然后用数据模型的值去替换掉呀

慕少艾

3.5k269

发布于
2016-12-27

拿去玩。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="template" class="{{className}}">
        <div class="user_profile">
            <div class="user_avatar">
                <img src="{{user.avator}}" alt="">
            </div>
            {{user.name}}
        </div>
    </div>
</body>
<script>
function render(template, context) {
    var tokenReg = /(\\)?\{\{([^\{\}\\]+)(\\)?\}\}/g;
    return template.replace(tokenReg, function(word, slash1, token, slash2) {
        if (slash1 || slash2) {
            return word.replace('\\', '');
        }
        var variables = token.replace(/\s/g, '').split('.');
        var currentObject = context;
        var i, length, variable;

        for (i = 0, length = variables.length; i < length; ++i) {
            variable = variables[i];
            currentObject = currentObject[variable];
            if (currentObject === undefined || currentObject === null) return '';
        }
        return currentObject;
    })
}

var m = {
    className: 'user',
    user: {
        name: 'xiaoming',
        avator: 'http://imgsrc.baidu.com/forum/pic/item/ab64034f78f0f736d0d308f60255b319ebc41313.jpg'
    }
}

var template = document.getElementById('template').outerHTML;
document.getElementById('template').outerHTML = render(template, m)
</script>

</html>

精简版，不考虑\\，容错率略低，供参考。

function render(el, modal) {

    // 利用正则获取所有形如{{...}}的字符串进行替换
    el.outerHTML = el.outerHTML.replace(/{{([^}]+)}}/g, function(str, keys) {
    
        // 去掉字符串多余的空格，用“.”切分成数组
        return keys.trim().split('.').reduce(function(a,b){
        
            // 以数组的每一个元素作为对象属性名，获取子对象
            return a[b] || "";
            
        // reduce对象的初始值设为modal
        }, modal);
    })
}

DustarMao

1.2k21124

发布于
2016-12-28

更新于
2016-12-28

一个不破坏dom结构的实现

function render(el, model) {
    function renderElement(el) {
        Array.from(el.attributes).forEach(renderAttr);
        Array.from(el.childNodes).forEach(function (node) {
            if (node instanceof Text)
                renderText(node);
            if (node instanceof Element)
                renderElement(node);
        });
    }
    function renderText(text) {
        text.data = renderStr(text.data);
    }
    function renderAttr(attr) {
        attr.value = renderStr(attr.value);
    }
    function renderStr(str) {
        return str.replace(/(\\)?\{\{(.*?)(\\)?\}\}/g, function (word, pre, token, post) {
            if (pre || post) {
                return word.replace('\\', '');
            }
            var value = token
                .replace(/\s/g, '')
                .split('.')
                .reduce(function (context, member) {
                    if (context === null || context === undefined)
                        return;
                    else
                        return context[member];
                }, model);
            if (value === null || value === undefined)
                return '';
            else
                return value;
        });
    }
    renderElement(el);
}

js占位符问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？