vue源码学习

什么是模板引擎

将数据要变为试图最优雅的解决方案

历史上出现过数据变为视图的方法

• 纯DOM

• 数组join法

• ES6的反引号法

  新增的 ${a}的语法糖

• 模板引擎

数组join法

//换行一样
var message='fanfan'
var str=[
    '<li>',
    '<div>'+message+'</div>',
    '</li>'
].join()

ES6的语法糖

let a='fanfan'
list.innerHTTML+=`
	<li>
		<div class="fanfan">
				${a}的信息
		</div>
	</li>
`

mustache库

{{ }} 像胡子 所以取名叫胡子

  var user = { name: "Olive", age: 23, sex: "girl" };
        var template = "My name is  {{name}} ,I'm  {{age}} ,Sex is {{sex}}";
        var view = Mustache.render(template, user)

   console.log(view);

简单模式下正则表达式可以实现

 var template = "My name is  {{name}} ,I'm  {{age}} ,Sex is {{sex}}";
    
            console.log(template.replace(/\{\{(\w+)\}\}/g,function(a,b,c){
                console.log(a,b,c);
                return '❤'
            }));

/**
	b 找出了里面的内容 可以用来替换
	{{name}} name 12
	{{age}} age 27
	{{sex}} sex 43
 	My name is  ❤ ,I'm  ❤ ,Sex is ❤*/

 
//进行函数封装
function likerender(template,data)
            {
                return template.replace(/\{\{(\w+)\}\}/g,function(findstr,$1){
                //匹配data对象里面的属性
                return data[$1]
                     });
            }

            var data={
                name:'fanfan',
                age:18,
                sex:'man'
            }

            console.log(likerender(template,data));
		
//My name is  fanfan ,I'm  18 ,Sex is man