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. win7 iis 7.0 碰到 503错误，找到的解决方案

    Service Unavailable HTTP Error 503. The service is unavailable. 今天要布署一个网站,在自己的电脑上,结果碰到服务器503错误,找应用程序 ...

  2. artTemplate 动态加载模版

    问题 之前项目中一直有用到artDialog对话框组件,作者后期又发布了js模版引擎,使用过几次,效果感觉还挺好.当自己想把模版放在html之外时,遇到了一点问题. 作者介绍的方式,是在js文件中,通 ...

  3. c/c++: c++函数返回类型什么情况带const

    c++ 函数的返回类型,包括const 什么时候起作用呢? 函数返回值不想其立即修改的. 例子如下,这是一个简单的避免产生隐形返回变量的方法,abc 的函数返回是引用,main函数中第10行,++ 操 ...

  4. xen 保存快照的实现之 —— device model 状态保存

    xen 保存快照的实现之 —— device model 状态保存 实现要点: 设备状态保存在 /var/lib/xen/qemu-save.x 文件这个文件由 qemu-dm 产生,也由 qemu- ...

  5. Python3在Windows安装配置及简单试用

    1,安装配置 安装版本是Python3.5,我的安装路径是E:\ImProgram\Python35 添加环境变量,将上述路径加入到path中 这样cmd打开命令窗口,输入python就能看到调用成功 ...

  6. Python的程序结构[7] -> 生成器/Generator -> 生成器浅析

    生成器 / Generator 目录 关于生成器 生成器与迭代器 生成器的建立 通过迭代生成器获取值 生成器的 close 方法 生成器的 send 方法 生成器的 throw 方法 空生成器的检测方 ...

  7. Python的网络编程[5] -> BOOTP + TFTP + FTP -> 实现一个简单的文件传输流程

    BOOTP-TFTP-FTP 目录 文件传输流程 服务器建立过程 客户端建立过程 1 文件传输流程 / File Transfer Flow 利用BOOTP,TFTP,FTP三种传输协议,建立起客户端 ...

  8. cake-walk

    Of course it was not a cake-walk in the beginning 3. This is going to be a cakewalk 这将易如反掌. 4. Julia ...

  9. Count of Smaller Numbers After Self -- LeetCode

    You are given an integer array nums and you have to return a new counts array. The counts array has ...

  10. 【bzoj2190】【仪仗队】欧拉函数+线性筛（浅尝ACM-J）

    向大(hei)佬(e)势力学(di)习(tou) Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪 ...