JavaScript沙箱模式
Posted 流楚丶格念
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript沙箱模式相关的知识，希望对你有一定的参考价值。
概念
沙箱：环境，黑盒，在一个虚拟的环境中模拟真实世界，做实验，实验结果和真实世界的结果是一样，但是不会影响真实世界。
说白了：沙箱就是javascript中一块完全独立的区域，使用的都是自己独立的属性和方法。
就是一个自调用函数(立即执行函数)，(function(){})()
比如说下面的代码
var num=10;
console.log(num+10);
改用沙盒就是
//沙箱---小环境
(function () {
var num=20;
console.log(num+10);
}());
沙箱的用途
- 沙箱模式一般应用在书写第三方框架
- 为第三方框架书写插件
- 书写功能独立的一些组件
沙箱模式的优势
- 沙箱模式不会再外界暴露任何的全局变量，也就不会造成全局变量的污染。
- 沙箱中的所有数据，都是和外界完全隔离的，外界无法对其进行修改，保证代码安全性。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div>这是div</div>
<div>这是div</div>
<div>这是div</div>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<script>
var getTag = 10;
var dvObjs = 20;
var pObjs = 30;
(function () {
//根据标签名字获取元素
function getTag(tagName) {
return document.getElementsByTagName(tagName)
}
//获取所有的div
var dvObjs = getTag("div");
for (var i = 0; i < dvObjs.length; i++) {
dvObjs[i].style.border = "2px solid pink";
}
//获取所有的p
var pObjs = getTag("p");
for (var i = 0; i < pObjs.length; i++) {
pObjs[i].style.border = "2px solid pink";
}
}());
console.log(getTag);
console.log(dvObjs);
console.log(pObjs);
</script>
</body>
</html>
以上是关于JavaScript沙箱模式的主要内容，如果未能解决你的问题，请参考以下文章