美文网首页
5行代码的简易模板解析函数

5行代码的简易模板解析函数

作者: TOPro | 来源:发表于2018-02-23 17:11 被阅读7次

    不喜欢拼字符串,es6也没法使用,很捉急
    没办法只能出大招,自己动手丰衣足食

    function simpleTpl(tpl,opts){
        return tpl.replace(/(\{.+?\})/g,function(all,cap1){
            return opts[cap1.replace(/\}|\{/g,"")] || "";
        })
    }
    

    举个栗子

    var file="css/index.less";
    var command = simpleTpl(
        "lessc {file} {fileNotExt}.css --js -x --source-map={fileNotExt}.css.map",
        {
            file:file,
            fileNotExt:file.split(/\.[^.]+?$/)[0]
        }
    )
    console.log(command)
    //lessc css/file.less css/index.css  --js -x --source-map=css/file.css.map
    

    与没有使用模板函数的情况相比,可读性还是有一定区别的

    
    var file="css/index.less";
    var fileNotExt = file.split(/\.[^.]+?$/)[0];
    var command = "lessc "+file+" "+fileNotExt+".css" + 
    " --js -x --source-map="+fileNotExt + ".css.map";
    console.log(command)
    //lessc css/file.less css/index.css  --js -x --source-map=css/file.css.map
    

    相关文章

      网友评论

          本文标题:5行代码的简易模板解析函数

          本文链接:https://www.haomeiwen.com/subject/uwbxxftx.html