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. sqlmap注入一般步骤

    1. 找到注入点url2. sqlmap -u url -v 1--dbs 列出数据库或者 sqlmap -u url -v 1 --current-db 显示当前数据库3. sqlmap -u ur ...

  2. 【原创】Linux环境下的图形系统和AMD R600显卡编程(10)——R600显卡的3D引擎编程

    3D图形处理流水线需要流经多个硬件单元才能得到最后的渲染结果,流水线上的所有的硬件单元必须被正确编程,才能得到正确的结果. 总体上看,从图形处理流水线的源头开始,需要准备好vertex和index,在 ...

  3. 【原创】Linux环境下的图形系统和AMD R600显卡编程(7)——AMD显卡的软件中断

    CPU上处理的中断可以分成“硬件中断”和“软件中断”两类,比如网卡产生的中断称为硬件中断,而如果是软件使用诸如"int 0x10"(X86平台上)这样的指令产生中断称为软件中断,硬 ...

  4. TMS320F28379D 使用心得之 SCI

    原文地址https://blog.csdn.net/qq_39545674/article/details/82597106 一.SCI 简介SCI(Serial Communication Inte ...

  5. V4或者V7包重复冲突,但是不知道删除那个的问题

    加这行代码在dependencies统一级别 configurations { all*.exclude group: 'com.android.support', module: 'support- ...

  6. 利用NPOI组件产Excel完整操作

    最终还是要使用NPOi了.刚开始做的是用com组件,发现如果本机不按照excel就不能使用,后来把其中一支改为了用Itextsharp产生pdf,但是还有几支批次要产生Excel,只能改用NPOI了. ...

  7. java中的BigInteger

    头文件 import java.io.*; import java.math.*; 读入 Scanner cin = Scann(System.in); while(cin.hasNext()) &l ...

  8. 洛谷——P1093 奖学金

    P1093 奖学金 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相 ...

  9. NOIP2016_day1_No1玩具谜题

    #include <iostream> #include <cstdio> using namespace std; int main () { freopen("t ...

  10. [HDU4336]Card Collector(min-max容斥,最值反演)

    Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...