沙箱模式以及其使用到的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 是一种简洁明了的语言,并没有其他语言中经常使用的一些特殊语法特征,如 命名空间.模块.包.私有属性 以及 静态成员 ...
随机推荐
- 封装transform函数(设置和获取transform的属性和属性值)
(function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...
- 转录组组装软件stringtie
StringTie是約翰·霍普金斯大學计算机生物中心开发的一款转录组组装软件,在组装转录本的完整度,精度和速度方面都较以往的cufflinks 有很大的提升,也是目前有参考基因组转录组主流的组装软件. ...
- CSS的三种基本框架
CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...
- oracle 生成随机日期+时间
oracle 生成随机日期+时间 SELECT to_date(TRUNC(DBMS_RANDOM.VALUE(to_number(to_char(to_date('20110101','yyyymm ...
- 题解-CTS2019随机立方体
problem \(\mathtt {loj-3119}\) 题意概要:一个 \(n\times m\times l\) 的立方体,立方体中每个格子上都有一个数,如果某个格子上的数比三维坐标中至少有一 ...
- springboot2.x配置druid sql监控
后端接口响应慢,通常我们就需要优化代码和sql,如果项目中使用druid连接池,那么我们可以利用其提供的sql监控功能,来帮助我们快速定位慢sql已经sql执行次数等问题,springboot2之后, ...
- PIE二次开发——大气校正
窗体设计: 代码: private void button_src_Click(object sender, EventArgs e) { OpenFileDialog openFile = new ...
- POJ1222、POJ3279、POJ1753--Flip
POJ1222-EXTENDED LIGHTS OUT POJ3279-Fliptile POJ1753-Flip Game 为什么将着三个题放一起讲呢?因为只要搞明白了其中一点,就可以一次3ac了- ...
- 在浏览器输入URL回车后发生了什么?
本文由 简悦 SimpRead 转码, 原文地址 https://4ark.me/post/b6c7c0a2.html 这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最 ...
- jquery判断数据类型源码解读
var class2type = {}; ("Boolean Number String Function Array Date RegExp Object Error").spl ...