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) ...
随机推荐
- Vim 自动补全成对的括号和引号
修改后: 1 :inoremap (()<ESC>i 2:inoremap )<c-r>=ClosePair(')')<CR> 3:inoremap {{}< ...
- C++ emplace_back
在C++开发过程中,我们经常会用STL的各种容器,比如vector,map,set等,这些容器极大的方便了我们的开发.在使用这些容器的过程中,我们会大量用到的操作就是插入操作,比如vector的pus ...
- JAVA快速功能
1.日期格式化 Date date=new Date(); //转换成时间格式12小时制 SimpleDateFormat df_12=new SimpleDateFormat("yyyy- ...
- poj2181 jumping cow
umping Cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7579 Accepted: 4559 Descr ...
- 51nod 1596 搬货物【贪心/二进制】
1596 搬货物 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 取消关注 现在有n个货物,第i个货物的重量是 2wi ...
- Apache CXF实战之四 构建RESTful Web Service
Apache CXF实战之一 Hello World Web Service Apache CXF实战之二 集成Sping与Web容器 Apache CXF实战之三 传输Java对象 这篇文章介绍一下 ...
- Binary Tree Vertical Order Traversal -- LeetCode
Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...
- La 4976 Defense lines
蓝书紫书上都有的一道题...这里就懒得说题解了. 但是我竟然WA了6次!为什么呢??? 一开始没看见连续子序列..... 后来插入的时候忘判断了是不是比前驱大.... 所以我们只需要维护一个权值递增( ...
- 查看linux内核版本及操作系统版本的命令
一.查看内核版本命令: (1)[root@localhost ~]#cat/proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012.b ...
- JAVA常见算法题(十二)
package com.xiaowu.demo; /** * 完全平方即用一个整数乘以自己例如1*1,2*2,3*3等,依此类推.若一个数能表示成某个整数的平方的形式,则称这个数为完全平方数. * 完 ...