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) ...
随机推荐
- zero(NOIP模拟赛 Round 4)
题目描述 假设x=N!,那么x的末尾有多少个零呢? 输入 一行,一个整数N. 输出 输出只有一个整数,表示x末尾零的个数. 这道题目,我们看一看数据范围, 10^1000肯定是高精啦! 然后我们再想一 ...
- python2 登录带验证码的页面
#!/usr/bin/python#-*- coding: utf-8 -*- import os,json;import urllib,urllib2;import cookielib; #获取co ...
- 在C#中调用格式工厂进行任意视频格式到FLV的转换
1.下载安装格式工厂和完美解码器 2.运行格式工厂,转换一个RMVB到FLV,注意找个大点的,使时间长一些.防止在未执行步骤3时就结束了 3.在进程中查看某个进程的命令行参数是什么? wmic pro ...
- MVC5 WebAPI 跨域处理
问题描述: 在使用ASP.NET的MVC5进行WebAPI开发的时候,在跨域的情况下会报跨域的错, No 'Access-Control-Allow-Origin' header is present ...
- 我从16ASPX上下了一个程序在运行时出错是怎么回事？运行时出现用户SA登陆失败，但是我已经把数据库导入SQL
如果你账号密码正确,那你可能没有打开你的管线服务,或者没有配置好你的客户端
- [thinkphp] 如何解析ajaxReturn返回的json字符串
success: function(data){ var dataObj=eval("("+data+")");//转换为json对象 alert(dataOb ...
- Python的网络编程[0] -> socket[1] -> socket 模块
socket 1. 常量 / Constants AF_* 和 SOCK_* 分别属于 AddressFamily 和 SocketType 1.1 AF_*类常量 socket.AF_UNIX: ...
- HDU6383 2018 “百度之星”程序设计大赛 - 初赛（B） 1004-p1m2 （二分)
原题地址 p1m2 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- SQL 序号列ROW_NUMBER，RANK，DENSE_RANK、NTILE
原文:SQL 序号列ROW_NUMBER,RANK,DENSE_RANK.NTILE SQL 2005新增加相关函数 : ROW_NUMBER,RANK,DENSE_RANK.NTILE 窗口函数 O ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...