JavaScript沙箱模式
2021/6/10 20:23:14
本文主要是介绍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沙箱模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21订单系统资料入门教程:轻松管理你的订单
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java部署资料:新手入门教程
- 2024-09-21Java订单系统资料:新手入门教程与实战指南
- 2024-09-21Java管理系统资料入门教程
- 2024-09-21从零开始学习Java监控系统资料
- 2024-09-21Java就业项目资料:新手入门的必备教程
- 2024-09-21Java全端资料:初学者指南
- 2024-09-21Java全栈资料入门教程及资源汇总
- 2024-09-21Java日志系统资料入门教程