JavaScript沙箱模式

向右看齐 2022-10-21 03:51 131阅读 0赞

### 文章目录 ###

*   *  概念
     *  沙箱的用途
     *   *  沙箱模式的优势
     *  案例

## 概念 ##

沙箱：环境，黑盒，在一个虚拟的环境中模拟真实世界，做实验，实验结果和真实世界的结果是一样，但是不会影响真实世界。

说白了：沙箱就是JavaScript中一块完全独立的区域，使用的都是自己独立的属性和方法。

就是一个自调用函数(立即执行函数)，(function()\{\})()

比如说下面的代码

var num=10;
    console.log(num+10);

改用沙盒就是

//沙箱---小环境
    (function () { 
      var num=20;
      console.log(num+10);
    }());

## 沙箱的用途 ##

*  沙箱模式一般应用在书写第三方框架
 *  为第三方框架书写插件
 *  书写功能独立的一些组件

### 沙箱模式的优势 ###

*  沙箱模式不会再外界暴露任何的全局变量，也就不会造成全局变量的污染。
 *  沙箱中的所有数据，都是和外界完全隔离的，外界无法对其进行修改，保证代码安全性。

## 案例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221021/12b65ba7c40c4532962eee3a811b6ce1.png