首页 > 网站 > WEB开发 > 正文

编写可维护的JavaScript之简易模版

2024-04-27 14:23:28
字体:
来源:转载
供稿:网友

编写可维护的javaScript之简易模版

/* * 正则替换%s * @para arg1(text) 需要替换的模版 * @para arg2 替换第一处%s * @para arg3 替换第二处%s * 返回替换后的字符串 */var sPRintf = function (text) {    var i = 1,        args = arguments,        len = args.length;    return text.replace(/%s/g, function () {        return (i < len) ? args[i++] : "";    });};/**    // 文档    <ul id="my-list">        <li><a href="#">hello world</a></li>    </ul>    // 模版  type="text/template" 服务器不会解析的mime类型    <script type="text/template" id="list-item">        <li><a href="%s">%s</a></li>    </script>**/// 添加一个模版节点var addItem = function (url, text) {    var _script = document.getElementById("list-item"),        template = _script.text,        result = sprintf(template, url, text),        ele = document.getElementById("my-list"),        div = document.createElement("div");        // 正则替换后div.firstChild就是Node节点    div.innerHTML = result.replace(/^/s*/, "");      ele.appendChild(div.firstChild);        };addItem("www.google.com/", "google");


一种更好的方式

(function(){        var regexp = /(?:/{/{)([a-zA-z][^/s/}]+)(?:/}/})/g;         function render(template, data) {                return template.replace(regexp, function(fullMatch, capture) {            if(data[capture]) {                return data[capture];            } else {                return fullMatch;            }        });    }        window.renderTemplate = render;    })();var template = '{{birdname}}---{{birdname}} and name is {{author}}';var tpl_end = renderTemplate(template, {    "birdname": "silk",    "author": "David"});console.log(tpl_end); // silk---silk and name is David


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表