javascript 模块引擎 (手写草稿)
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 模块引擎 (手写草稿)的更多相关文章
- caffe+opencv3.3dnn模块 完成手写数字图片识别
最近由于项目需要用到caffe,学习了下caffe的用法,在使用过程中也是遇到了些问题,通过上网搜索和问老师的方法解决了,在此记录下过程,方便以后查看,也希望能为和我一样的新手们提供帮助. 顺带附上老 ...
- 手把手教你使用LabVIEW OpenCV DNN实现手写数字识别（含源码）
@ 目录 前言 一.OpenCV DNN模块 1.OpenCV DNN简介 2.LabVIEW中DNN模块函数 二.TensorFlow pb文件的生成和调用 1.TensorFlow2 Keras模 ...
- 22 道高频 JavaScript 手写面试题及答案
实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...
- Javascript之我也来手写一下Promise
Promise太重要了,可以说是改变了JavaScript开发体验重要内容之一.而Promise也可以说是现代Javascript中极为重要的核心概念,所以理解Promise/A+规范,理解Promi ...
- 微软手写识别模块sdk及delphi接口例子
http://download.csdn.net/download/coolstar1204/2008061 微软手写识别模块sdk及delphi接口例子
- javaScript（js）手写原生任务定时器源码
javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...
- JavaScript数组方法总结及手写
目录 手写数组衍生方法 1.检测是否为数组 2.类数组转化为数组 3.数组扁平化 4.数组去重 5.数组使用Math.max 手写数组内置方法 1. Array.prototype.filter 2. ...
- JavaScript手写new方法
1.看一下正常使用的new方法 function father(name){ this.name=name; this.sayname=function(){ console.log(this.nam ...
- 手写：javascript中的关键字new
简单介绍一下new new再熟悉不过了,new后面跟着构造函数,可以创建对象,这个对象的原型指向构造函数的原型对象,说起来可能有点绕,直接看代码吧 function Person(name, age) ...
随机推荐
- 行为型设计模式之观察者模式(Observer)
结构 意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 适用性 当一个抽象模型有两个方面, 其中一个方面依赖于另一方面.将这二者封装在独 ...
- [bzoj1833][ZJOI2010]count 数字计数——数位dp
题目: (传送门)[http://www.lydsy.com/JudgeOnline/problem.php?id=1833] 题解: 第一次接触数位dp,真的是恶心. 首先翻阅了很多很多一维dp,因 ...
- [LeetCode] Evaluate Reverse Polish Notation stack 栈
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- jquery 追加元素的方法（append prepend after before 的区别）
append() 方法在被选元素的结尾插入内容. prepend() 方法在被选元素的开头插入内容. after() 方法在被选元素之后插入内容. before() 方法在被选元素之前插入内容. &l ...
- windows 自动关机
按WIN+R在窗口中输入:shutdown -S -T 3600 然后回车.即可在一小时后关机,如果你想在半个小时后关机,那么就把3600改成1800单位是秒
- 【友盟统计报表解读】之错误分析iOS版
http://bbs.umeng.com/thread-6908-1-1.html 错误分析功能说明1.概述 错误分析是友盟为移动开发者提供的Crash收集和分析工具,帮助开发者监测App在移动设备上 ...
- .apache.commons.io 源代码学习（二）FilenameUtils类
FilenameUtils是apache common io中一个独立的工具类,对其他没有依赖,看其源代码的import即可知道. import java.io.File;import java.io ...
- cmake add_executable 与 include_directories
在cmake里add_executable里如果没有包含.cpp文件,该.cpp文件就不适用include_directories包含文件
- POJ 1769 Minimizing maximizer（DP+zkw线段树）
[题目链接] http://poj.org/problem?id=1769 [题目大意] 给出一些排序器,能够将区间li到ri进行排序,排序器按一定顺序摆放 问在排序器顺序不变的情况下,一定能够将最大 ...
- nginx的proxy_set_header
nginx配置的server段: listen 8888; server_name wyc.com; location /user { proxy_set_header HOST fake.com; ...