zoukankan      html  css  js  c++  java
  • 一种轻便且灵活的js模板的思路

    一种轻便且灵活的js模板的思路

    项目地址:https://github.com/j20041426/template

    思路背景

    在Vue、React、Angular等大前端框架异军突起的今天,写前端时已经很难用得上普通模板引擎了。因为这些框架都自带DOM渲染的功能,甚至由于虚拟DOM技术的存在,使得DOM渲染的效率比普通模板引擎更高。

    但是在某些场景,仍然有用模板引擎的需求,比如写插件之类的(我就是在写插件的时候想到这个问题的-_-)。如果直接拼接HTML代码,会让整体代码的可读性变低;但是我又不想用现成的模板引擎,感觉有点太重了,本来写插件就想要轻便效率。

    于是,我就有了一个处于直接拼接HTML代码和使用模板引擎之间的一个思路。(很可能我并不是第一个想到的,在这里只是探讨一下)

    先贴代码

    var template = function(temp, params, repeat){
      var ret = "";
      var repeat = repeat || 1;
      
      for(var i = 0; i < repeat; i++){
        ret += temp.replace(/{{[w]+}}/g,function(a,b){
          var value = params[a.replace(/[{}]/g,"")];
          if(typeof value === "function"){
            return value.call(this, i);
          }else{
            return value;
          }
        })
      }
      
      return ret;
    }
    

    因为一般用模板来生成HTML代码,最常用的功能就是遍历和条件判断,这个思路就是基于这一点出发的。

    参数temp是模板字符串,例如'<div class="{{clas}}">{{prefix}}:{{num}}</div>',因为我用Vue比较多,所以这里用的也是{{}}

    参数repeat表示当前模板字符串需要重复的次数,比如传10的话,就会生成10个div

    参数params用来定义模板里的变量,例如:

    {
    	"clas": function(index){
    	    return index % 2 ? 'even' : 'odd';
    	},
    	"num": function(index){
    	    return index + 1;
    	},
    	"prefix": "No"
    }
    

    变量名称一定要一一对应。

    参数里可以定义常量,比如"prefix": "No",表示模板中的prefix变量会被替换为字符串No
    还可以定义成一个function,这个function接收当前遍历的index作为参数:

    "num": function(index){
        return index + 1;
    }
    

    返回值则会被替换到对应的模板变量中,比如这个num就会被替换成1到10。

    function里也可以再放入一个template,比如:

    var temp = '<ul>{{lists}}</ul>';
    var lists = '<li>{{content}}</li>';
    var t = template(temp, {
        "lists": function(){
            return template(lists, {
                "content": function(index){
                    return index % 2 ? '偶数' : '奇数';
                }
            }, 10);
        }
    });
  • 相关阅读:
    无线安全课堂:手把手教会你搭建伪AP接入点
    转载——开阔自己的视野,勇敢的接触新知识
    关于系统架构的一些总结
    MessageBox.Show()如何换行
    不患寡而患不均
    由CHAR(2)引发的BUG
    DataRow.RowState 属性
    C# 使用TimeSpan计算两个时间差
    利用反射调出其他项目的界面
    DB2 中将date类型的转换成timestamp
  • 原文地址:https://www.cnblogs.com/MrEgg1013/p/7273555.html
Copyright © 2011-2022 走看看