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>
相关文章
|
6月前
|
设计模式 缓存 JavaScript
JavaScript 简单实现观察者模式和发布-订阅模式
JavaScript 简单实现观察者模式和发布-订阅模式
32 0
|
4月前
|
前端开发 JavaScript
JavaScript基础知识:JavaScript 中的异步编程有哪些模式?
JavaScript基础知识:JavaScript 中的异步编程有哪些模式?
37 0
|
9月前
|
设计模式 前端开发 JavaScript
|
9月前
|
设计模式 前端开发 JavaScript
|
9月前
|
JavaScript
【常见面试题】JS 发布者、订阅者模式
面试中经常出现问到如何实现JS 发布者、订阅者模式。
76 2
【常见面试题】JS 发布者、订阅者模式
|
5月前
|
JavaScript 程序员 Go
一图看懂编程语言迁移模式:终点站是Python、Go、JS
一图看懂编程语言迁移模式:终点站是Python、Go、JS
|
5月前
|
存储 前端开发 JavaScript
如何使用CSS和JavaScript实施暗模式?
如何使用CSS和JavaScript实施暗模式?
|
6月前
|
移动开发 JavaScript
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
30 0
|
8月前
|
设计模式 开发框架 JavaScript
理解JavaScript 的发布者_订阅者模式
理解JavaScript 的发布者_订阅者模式
47 0
|
9月前
|
存储 设计模式 前端开发