Java教程

JavaScript沙箱模式

本文主要是介绍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沙箱模式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航