初识AngularJs(2)

最新推荐文章于 2022-01-18 17:13:07 发布

Luffy_ying

最新推荐文章于 2022-01-18 17:13:07 发布

阅读量440

点赞数

分类专栏： Frames

本文链接：https://blog.csdn.net/Luffy_ying/article/details/52245693

版权

Frames 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在使用Angularjs之前，我们试试自己去完成一些它的职务：解析变量区分作用域

1.识别变量

</head>
<body>
	<div id="div1">
		{{ name }}
	</div>
	<script>
		var name="zhangsan";
		var oDIv=document.getElementById('div1');
		var text=oDIv.innerText;
		//采用正则匹配
		//var re=new RegExp();  0~9a~zA~Z_   \w
		var re=/{{\w+}}/ig;
		oDIv.innerHTML=text.replace(re,name);
	</script>
</body>
</html>

这样，我们通过正则，就将{{name}}这个东西给解析成了zhangsan.解析了变量。

2、表达式识别

<body>
	<div id="div1">
		{{ 1 +2 }}
	</div>
	<script>
		var oDiv=document.getElementById('div1');
		var text=oDiv.innerText;
		var re=/{{.+}}/ig;
		var aa=text.split('+');
		if(aa.length==2){
			var a1=parseInt(aa[0].substr(2));
			var a2=parseInt(aa[1].substr(0,aa[1].length-2));
			var val=a1+a2;
		}
		oDiv.innerHTML=text.replace(re,val);
		</script>
</body>

3、但是复杂的变量就没办法精准的实现，而且在不采用getelement的时候，作用域也是我们无法确定的，angularjs应运而生