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>
.
