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) ...
随机推荐
- [ CodeVS冲杯之路 ] P1166
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1166/ 有许久没有刷题了,忙着过中秋去了嘿嘿 首先它的每一行是独立的,我们可以直接把它拆分成 n 互不相关的子问题做 ...
- windows实时监测热插拔设备的变化2
//动态监测设备插拔 #include <Dbt.h> BEGIN_MESSAGE_MAP(ParticipateMeeting, CDialogEx) ON_WM_DEVICECHANG ...
- 《Linux命令、编辑器与shell编程》第三版 学习笔记---001
Linux概述 1.具有内核编程接口 2.支持多用户(同时) 3.支持多任务 4.支持安全的分层文件系统 a.标准 b.链接 c.权限 5.shell(命令解释器和编程语言) a.文件名生成(通配符和 ...
- java基础练习 12
public class Twelfth { /*海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子凭据分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均分成五 ...
- WebBrowser(超文本浏览框)控件默认使用IE9,IE10的方法
C#和易语言都可以使用该方法来变更默认的的IE版本 该文是通过修改注册表的方法实现,测试的时候发现易语言本身也是采用的这种方法 操作方法 打开注册表 HKEY_LOCAL_MACHINE (or HK ...
- postman的使用（转载）
Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP requests 从常用的 ...
- 将ros中suscriber和publisher写入class中
相比于笨拙的全局变量和全局函数,将suscriber和publisher成一个class,形式更加简洁和容易管理,一个节点就是一个类 参考资料 http://answers.ros.org/quest ...
- 网易 监控 openstack
http://www.360doc.com/content/16/0416/08/13792507_551022987.shtml
- 51nod 1051 最大子矩阵和 【最大子段和DP变形/降维】
[题目]: 一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 例如:*3的矩阵: - - - - 和最大的子矩阵是: - - Input 第1行:M和N, ...
- AtCoder Grand Contest 012 B Splatter Painting （反向处理 + 记忆化）
题目链接 agc012 Problem B 题意 给定一个$n$个点$m$条边的无向图,现在有$q$个操作.对距离$v$不超过$d$的所有点染色,颜色编号为$c$. 求每个点最后的颜色状态. 倒过 ...