javascript 模块引擎 (手写草稿)

1.试题：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// define
		(function(window){
			function fn(str){ // 构造函数fn
				this.str = str; // str
			}

			fn.prototype.format = function(){
				var arg = arguments; // 数组
				return this.str.replace(/\{(\d+)\}/ig,function(a,b){
					console.log(a); // 字符串
					console.log(b); // 0 1 2
					return arg[b]||"";  // arg[0]
				});
			}
			window.fn = fn;
		})(this);

		// user
		(function(){
			var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
			console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
		})();

		// defind
		/*
			{0} 模板   某一些字符  自定义的模板标识符{ }
			{1} 模板
			{2} 模板

			{{ }}  模板标识符

			mvc模式

			客户端的mvc
			1: 模板替换

			'<p><a href="{0}"></a><span>{2}</span></p>'.replace(a,b);

			a  原本字符串中有的子字符
			b  替换的内容

			正则表达式
			正则里面的表达式
		*/
	</script>
</body>
</html>

2.测试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 模板引擎
		// {{ }} 模板标识符  <% %>模板标识符
		var user = "{{13786188550}},{{137861212123}},{{13786129823}}"; // 字符串
		var exp = /\{\{\d+\}\}/ig;
		var result; // 定义全局变量
		/*var result = exp.exec(user); // exec 匹配一次
		console.log(result[0]); // 0 与正则相匹配的文本
		console.log(result[1]); // 1 与正则第一个子表达式相匹配的文本*/

		while((result=exp.exec(user))!==null){ //循环匹配 匹配多次
			console.log(result);
		}

		// js 模板引擎  是将数据与界面分离的过程
		// 客户端MVC结构的系统  模型(数据)   视图   控制器  {{ name }} 模板标识符  <% age %>模板标识符
		// 数据的替换
		// vue 指令    模板引擎通过识别js关键字,生成视图
		var model = {
			name:"max"
		}

	</script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>name:{{name}}</p>
		<p>age:{{age}}</p>
	</div>

	<script type="text/javascript">
		function contorller(id,data){ // 1.模型数据
			var conter = document.querySelector(id);
			var html = conter.innerHTML;
			var exp = /\{\{.+\}\}/ig;
			while((result=exp.exec(html))!==null){
				// console.log(result[1]);
				if(result[1]){
					html.replace(result[0],data[result[1].trim()])
				}
			}
			conter.innerHTML = html;
		}

		contorller("#app",{ // 1.模型数据
			name:"max",
			age:30
		})

		// data[result[1]] == data.name
	</script>
</body>
</html>

3.总结：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 存放虚拟DOM的容器 -->
	<div id="contend">11111</div>

	<!-- view 视图层 -->
	<script type="text/html" id="template">
		<!-- 虚拟DOM -->
		<p>name:{{name}}</p>
		<p>age:{{age}}</p>
		<p>height:{{height}}</p>
		<p>weight:{{weight}}</p>
	</script>

	<script type="text/javascript">
		// 控制器
		function mtp(tpl,data) { // 拿到视图测层的模板    模型的数据
			var conter = document.getElementById(tpl).innerHTML;
			var exp = /\{\{(.+)\}\}/ig;
			while((result=exp.exec(conter))!==null){ // 匹配多次
				if(result[1]){
					conter = conter.replace(result[0],data[result[1].trim()])
				}
			}
			return conter;
		}

		document.getElementById("contend").innerHTML = mtp("template",{
			name:"max",
			age:30,
			height:175,
			weight:75
		});

		/*
			解析html
			解析js
		*/
	</script>
</body>
</html>

.