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>

.

javascript 模块引擎 (手写草稿)的更多相关文章

  1. caffe+opencv3.3dnn模块 完成手写数字图片识别

    最近由于项目需要用到caffe,学习了下caffe的用法,在使用过程中也是遇到了些问题,通过上网搜索和问老师的方法解决了,在此记录下过程,方便以后查看,也希望能为和我一样的新手们提供帮助. 顺带附上老 ...

  2. 手把手教你使用LabVIEW OpenCV DNN实现手写数字识别（含源码）

    @ 目录 前言 一.OpenCV DNN模块 1.OpenCV DNN简介 2.LabVIEW中DNN模块函数 二.TensorFlow pb文件的生成和调用 1.TensorFlow2 Keras模 ...

  3. 22 道高频 JavaScript 手写面试题及答案

    实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...

  4. Javascript之我也来手写一下Promise

    Promise太重要了,可以说是改变了JavaScript开发体验重要内容之一.而Promise也可以说是现代Javascript中极为重要的核心概念,所以理解Promise/A+规范,理解Promi ...

  5. 微软手写识别模块sdk及delphi接口例子

    http://download.csdn.net/download/coolstar1204/2008061 微软手写识别模块sdk及delphi接口例子

  6. javaScript（js）手写原生任务定时器源码

    javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...

  7. JavaScript数组方法总结及手写

    目录 手写数组衍生方法 1.检测是否为数组 2.类数组转化为数组 3.数组扁平化 4.数组去重 5.数组使用Math.max 手写数组内置方法 1. Array.prototype.filter 2. ...

  8. JavaScript手写new方法

    1.看一下正常使用的new方法 function father(name){ this.name=name; this.sayname=function(){ console.log(this.nam ...

  9. 手写：javascript中的关键字new

    简单介绍一下new new再熟悉不过了,new后面跟着构造函数,可以创建对象,这个对象的原型指向构造函数的原型对象,说起来可能有点绕,直接看代码吧 function Person(name, age) ...

随机推荐

  1. 求LCA最近公共祖先的离线Tarjan算法_C++

    这个Tarjan算法是求LCA的算法,不是那个强连通图的 它是 离线 算法,时间复杂度是 O(m+n),m 是询问数,n 是节点数 它的优点是比在线算法好写很多 不过有些题目是强制在线的,此类离线算法 ...

  2. 【IDEA】IDEA下maven项目无法提示和使用EL表达式的解决办法

    今天在IDEA创建web项目之后发现无法使用EL和JSTL, 一.如果JSP中无法自动提示EL表达式,比如${pageContext.request.contextPath},可在pom.xml的&l ...

  3. DNS 资源记录解释

    ;SOA授权的开始;;SOA或授权的开始记录用来表示区域的启动;每个区域必须只有一个SOA记录;从名字服务器,在不能和主服务器通信的情况下,将提供12小时DNS服务, 在指定的时间后停止为那个区域提供 ...

  4. UVA 10746 Crime Wave - The Sequel

    最小费用最大流 源点->警察->bank->汇点 剩下的模板就可以 #include <map> #include <set> #include <li ...

  5. Windows基础-使用XAudio2播放音频（本质是WASAPI）

    对于常见的音频播放,使用XAudio2足够了. 时间是把杀猪刀,滑稽的是我成了猪 早在Windows Vista中,M$推出了新的音频架构UAA,其中的CoreAudio接替了DSound.WaveX ...

  6. itatis中的数据库配置

    <!--com.microsoft.sqlserver.jdbc.SQLServerDriver --> <property name="JDBC.Driver" ...

  7. Spring与Struts2的整合

    一.复制jar文件. 把struts2-spring-plugin-..*.jar和spring.jar复制到Web工程的WEB-INF/lib目录下,并且还需要复制commons-logging.j ...

  8. hihocoder1236(2015长春网赛J题) Scores(bitset && 分块)

    题意:给你50000个五维点(a1,a2,a3,a4,a5),50000个询问(q1,q2,q3,q4,q5),问已知点里有多少个点(x1,x2,x3,x4,x5)满足(xi<=qi,i=1,2 ...

  9. Laravel向视图传递变量的两种方法

    //方法一 return view('home.user')->with('datas', $datas); //方法二 return view('home.user.my-indent',co ...

  10. 关于yii2 的db log 日志 错误处理errorHandler

    log 通过配置Web.config来完成 1 数据库增加 ‘前缀_log’表 2 配置Web.config 'bootstrap' => ['log'], 'components' => ...