沙箱模式以及其使用到的IIFE
//沙箱
//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界 //360沙箱模式
//将软件和操作系统进行隔离,以达到安全的目的 //苹果手的app使用的就是沙箱模式去运行
//隔离app的空间,每个app独立运行 //JS中的沙箱模式
//沙箱模式的基本模型 // (function(){
// var a = 123;
// })(); var sum = 0;
for(var i = 1; i<=100;i++){
sum+=i;
}
console.log(sum); var a =123; (function(){ //在沙箱中将所有变量的定义放在最上方 //中间就放一些逻辑代码 //最后,如果需要,就给外界暴露一些成员(通过window) var sum = 0;
for(var i = 1; i<=100;i++){
sum+=i;
}
console.log(sum);
})(); //为什么要使用立即执行函数表达式(IIFE)
//因为IIFE不会再外界暴露任何的全局变量,但是又可以形成一个封闭的空间
//刚好可以实现沙箱模式 //jQuery当中的沙箱模式
(function(win){ var itcast = {
getEle:function () { }
} //如果需要在外界暴露一些属性或者方法,就可以将这些属性和方法
//加到window全局对象上去
//但是这window全局对象不可以直接引用,因为直接引用会破坏沙箱原则
//所以我们选择使用传参的形式将 window对象 传入沙箱内
//此时沙箱内使用window对象的时候,不会再去全局搜索window对象
//而使用的就是沙箱内部定义的形参 win.itCast = win.$ = itcast; })(window) //沙箱模式一般应用在书写第三方框架
//或者为第三方框架书写插件
//或者书写功能独立的一些组件 //沙箱模式的优势
//1.沙箱模式使用的是IIFE,不会再外界暴露任何的全局变量,也就不会造成全局变量污染
//2.沙箱中的所有数据,都是和外界完全隔离的,外界无法对其进行修改,也就保证了代码的安全性 //js中沙箱模式的实现原理就是
//函数可以构建作用域!上级作用域不能直接访问下级作用域中的数据
IIFE的用途
严格来讲,IIFE并不是闭包,因为它并不满足函数成为闭包的三个条件。但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义。
IIFE一般用于构造私有变量,避免全局空间污染
接下来用一个需求实现来更直观地说明IIFE的用途。假设有一个需求,每次调用函数,都返回加1的一个数字(数字初始值为0)
【1】全局变量
一般情况下,我们会使用全局变量来保存该数字状态

var a = 0;
function add(){
return ++a;
}
console.log(add());//1
console.log(add());//2

【2】自定义属性
但上面的方法中,变量a实际上只和add函数相关,却声明为全局变量,不太合适。
将变量a更改为函数的自定义属性更为恰当

function add(){
return ++add.count;
}
add.count = 0;
console.log(add());//1
console.log(add());//2

【3】IIFE
其实这样做,还是有问题。有些代码可能会无意中将add.count重置
使用IIFE把计数器变量保存为私有变量更安全,同时也可以减少对全局空间的污染

var add = (function(){
var counter = 0;
return function(){
return ++counter;
}
})();
console.log(add())//1
console.log(add())//2

注意事项
执行如下代码会报错,提示此时的a是undefined

var a = function(){
return 1;
}
(function(){
console.log(a());//报错
})();

这是因为没有加分号,浏览器将上面代码解释成如下所示
var a = function(){
return 1;
}(function(){
console.log(a());//报错
})();
如果加上分号,就不会出错了

var a = function(){
return 1;
};
(function(){
console.log(a());//1
})();
沙箱模式以及其使用到的IIFE的更多相关文章
- 初涉JavaScript模式 (12) : 沙箱模式
引子 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSe ...
- 关于javascript的沙箱模式以及缓存方法
在javascript函数代码中,经常会不经意出现全局变量,很可能造成对全局对象的污染,由于这种弊端的存在,那么沙箱模式油然而生.沙箱模式又称为沙盒模式.隔离模式.在js中只有函数可以限定变量作用域, ...
- javascript沙箱模式
沙箱模式解决了命名空间模式的如下几个缺点: 1.对单个全局变量的依赖变成了应用程序的全局变量依赖.在命名空间模式中,是没有办法使同一个应用程序或库的2个版本运行在同一个页面中.2.对这种以点分割的名字 ...
- 沙箱模式的chrome浏览器的运行
getUserMedia在chrome 47后已经不可以从非安全源访问(Insecure Origins),但测试搭建apprtc时服务器一般没有添加HTTPS安全验证,chrome就没有权限访问麦克 ...
- 关于JavaScript的沙箱模式
从语言学的角度上来说,允许代码无节制地使用全局变量,是最错误的选择之一.而更可怕的,就是一个变量"可能"成为全局的(在未知的时间与地点).但是这两项,却伴随JavaScript这门 ...
- JavaScript 沙盒模式
微前端已经成为前端领域比较火爆的话题,在技术方面,微前端有一个始终绕不过去的话题就是前端沙箱 什么是沙箱 Sandboxie(又叫沙箱.沙盘)即是一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程 ...
- Javascript模式(第五章对象创建模式)------读书笔记
一 命名空间模式 1 命名空间模式的代码格式 var MYAPP={ name:"", version:"1.0", init:function(){ } }; ...
- JS中跨域和沙箱的解析
先来直接分析源码,如下: <!DOCTYPE HTML><html><head> <meta charset="UTF-8"/> & ...
- 《JavaScript模式》第5章 对象创建模式
@by Ruth92(转载请注明出处) 第5章:对象创建模式 JavaScript 是一种简洁明了的语言,并没有其他语言中经常使用的一些特殊语法特征,如 命名空间.模块.包.私有属性 以及 静态成员 ...
随机推荐
- Android模拟器Genymotion安装使用教程详解
一.注册\登录 打开Genymotion官网,https://www.genymotion.com/ ,首先点击右上角的Sign in进行登录操作.如何登录就不细讲了,下面讲一下如何注册(备注:注册按 ...
- dotnet core use Redis to publish and subscribe
安装Redis 同样我这边再次使用Docker, 方便快捷: # 拉取镜像 docker pull redis # 运行镜像 docker run -d -p 6379:6379 --name red ...
- 题解 CF1216B 【Shooting】
题目大意:给你n个数,让你找到一种排列方式,使得$\sum\limits_{i=1}^{n}a[i]*(b[i]-1)$($b$为$a$的一种排列)最小 应该可以一眼看出是贪心,因为大的放前面先射击一 ...
- 在被调用函数中获取资源及C++中的引用
#include <iostream> using namespace std; struct Teacher{ char name[64]; int age; }; //在被调用函数 获 ...
- 【HC89S003F4开发板】 7ASM&C混合编程
HC89S003F4开发板ASM&C混合编程 一.前言 在配套资料里有实现ASM&C混合编程的说明文档,这里来实现这个功能. 二.实现ASM&C混合编程 1.打开 Keil 工 ...
- PowerBuilder学习笔记之3应用对象
教材地址:https://wenku.baidu.com/view/49121fdb6f1aff00bed51e05.html?sxts=1565760465744 3.1.1什么是应用对象(Appl ...
- (转) 嵌入式 Linux 利用 udev 实现自动检测挂载U盘
本文链接:https://blog.csdn.net/cfl927096306/article/details/95180940 udev配置文件是/etc/udev/udev.conf,也许长这样: ...
- VBA switch语句
当用户想要根据Expression的值执行一组语句时,使用Switch Case语句. 每个值被称为一个”情况”,并根据每种情况变量接通测试.如果测试表达式与用户指定的任何Case不匹配,则执行Cas ...
- nginx关闭日志功能access_log关闭
网上一堆错误示例,我就不吐槽了,未经验证的各种关闭配置.emmm.... 错误示例: error_log off ; access_log on; 以上这些会产生名字为 off/on 的日志文件... ...
- 分享一个仿网易新闻客户端iPhone版的标签式导航ViewController
该Controller是一个容器,用于容纳其他的controller.效果与网易新闻客户端的标签式导航基本一样: (1)点击上面的标签,可以切换到对应的controller,标签下面的红色提示条的长度 ...