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. 官网cocos2d

    http://cocos2d.spritebuilder.com/download           官网 https://github.com/cocos2d/cocos2d-spritebuil ...

  2. 华为上机测试题（及格分数线-java）

    PS:自己写的,自测试OK,供大家参考. /* 描述:10个学生考完期末考试评卷完成后,A老师需要划出及格线,要求如下:(1) 及格线是10的倍数:(2) 保证至少有60%的学生及格:(3) 如果所有 ...

  3. koa2-cors应答跨域请求实现

    var koa = require('koa'); var app = new koa(); var router = require('koa-router')(); // CORS是一个W3C标准 ...

  4. SpringMvc+Spring+Mybatis+Maven整合

    一.建立数据库表,使用generator自动生成相关代码: /* SQLyog Ultimate v11.24 (32 bit) MySQL - 5.1.62-community : Database ...

  5. python接口自动化3-自动发帖（session）【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  6. AC日记——[HNOI2008]水平可见直线 bzoj 1007

    1007 思路: 维护一个下凸壳: 用单调栈来维护这玩意儿: 先将斜率排序: 然后判断栈顶元素和当前元素的交点x是否小于栈顶元素和栈顶上一个元素的交点x: 注意: 人神共愤的精度问题和输出空格问题: ...

  7. JDK7集合框架源码阅读（四） LinkedHashMap

    基于版本jdk1.7.0_80 java.util.LinkedHashMap 代码如下 /* * Copyright (c) 2000, 2010, Oracle and/or its affili ...

  8. Flask插件系列之flask_celery

    现在继续学习在集成的框架中如何使用celery. 在Flask中使用celery 在Flask中集成celery需要做到两点: 创建celery的实例对象的名字必须是flask应用程序app的名字,否 ...

  9. 牛客小白月赛3 I 排名【结构体排序/较复杂/细节】

    链接:https://www.nowcoder.com/acm/contest/87/I 来源:牛客网 题目描述 Cwbc和XHRlyb都参加了SDOI2018,他们特别关心自己的排名. 我们定义每一 ...

  10. Codeforces Beta Round #4 (Div. 2 Only) A. Watermelon【暴力/数学/只有偶数才能分解为两个偶数】

    time limit per test 1 second memory limit per test 64 megabytes input standard input output standard ...