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. VS MFC 添加菜单

    新建出来的基于对话框的MFC工程是没有菜单的,如何在对话框中添加菜单?又如何给菜单的菜单项添加事件应用响应?下面小编来具体描述一下,希望能帮助到一些人. 工具/原料   电脑一台 VS2010 方法/ ...

  2. 理解python的super

    def super(cls, inst): mro = inst.__class__.mro() return mro[mro.index(cls) + 1] super做了这些事 摘自:https: ...

  3. springBoot开启热部署

    springBoot开启热部署 这里使用devtools工具开启热部署 〇.搭建springbboot基础环境 一.添加依赖 <dependency> <groupId>org ...

  4. django的url匹配流程

    URL匹配流程(路由解析顺序): URL匹配流程说明 域名.端口.端口后的 /,以及查询字符串(问号后面的键值参数)不参与匹配 先到项目下的 urls.py 进行匹配,再到应用的 urls.py 匹配 ...

  5. 函数名后加const

    通过把类成员函数声明为const   以表明它们不修改类对象. 任何不会修改数据成员的函数都应该声明为const类型.如果在编写const成员函数时,不慎修改了数据成员,或者调用了其它非const成员 ...

  6. Super Ugly Number -- LeetCode

    Write a program to find the nth super ugly number. Super ugly numbers are positive numbers whose all ...

  7. symbol(s) not found for architecture arm64

    问题如下:       解决:更改环境 ok   Standard architectures (armv7, arm7s)

  8. 一致性hash-java实现treemap版

    把不同号段的数据储存在不同的机器上,以用来分散压力.假如我们有一百万个QQ号,十台机器,,如何划分呢? 最简单粗暴的方法是用QQ号直接对10求余,结果为0-9 分别对应上面的十台机器.比如QQ号为 2 ...

  9. Android Developer -- Bluetooth篇 开发实例之三 管理连接

    Managing a Connection When you have successfully connected two (or more) devices, each one will have ...

  10. wget下载网站

    命令格式如下: wget -r -p -np -k http://URL -r:在本机建立服务器端目录结构: -p: 下载显示HTML文件的所有图片: -np:只下载目标站点指定目录及其子目录的内容: ...