//沙箱
//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界 //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的更多相关文章

  1. 初涉JavaScript模式 (12) : 沙箱模式

    引子 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSe ...

  2. 关于javascript的沙箱模式以及缓存方法

    在javascript函数代码中,经常会不经意出现全局变量,很可能造成对全局对象的污染,由于这种弊端的存在,那么沙箱模式油然而生.沙箱模式又称为沙盒模式.隔离模式.在js中只有函数可以限定变量作用域, ...

  3. javascript沙箱模式

    沙箱模式解决了命名空间模式的如下几个缺点: 1.对单个全局变量的依赖变成了应用程序的全局变量依赖.在命名空间模式中,是没有办法使同一个应用程序或库的2个版本运行在同一个页面中.2.对这种以点分割的名字 ...

  4. 沙箱模式的chrome浏览器的运行

    getUserMedia在chrome 47后已经不可以从非安全源访问(Insecure Origins),但测试搭建apprtc时服务器一般没有添加HTTPS安全验证,chrome就没有权限访问麦克 ...

  5. 关于JavaScript的沙箱模式

    从语言学的角度上来说,允许代码无节制地使用全局变量,是最错误的选择之一.而更可怕的,就是一个变量"可能"成为全局的(在未知的时间与地点).但是这两项,却伴随JavaScript这门 ...

  6. JavaScript 沙盒模式

    微前端已经成为前端领域比较火爆的话题,在技术方面,微前端有一个始终绕不过去的话题就是前端沙箱 什么是沙箱 Sandboxie(又叫沙箱.沙盘)即是一个虚拟系统程序,允许你在沙盘环境中运行浏览器或其他程 ...

  7. Javascript模式(第五章对象创建模式)------读书笔记

    一 命名空间模式 1 命名空间模式的代码格式 var MYAPP={ name:"", version:"1.0", init:function(){ } }; ...

  8. JS中跨域和沙箱的解析

    先来直接分析源码,如下: <!DOCTYPE HTML><html><head> <meta charset="UTF-8"/> & ...

  9. 《JavaScript模式》第5章 对象创建模式

    @by Ruth92(转载请注明出处) 第5章:对象创建模式 JavaScript 是一种简洁明了的语言,并没有其他语言中经常使用的一些特殊语法特征,如 命名空间.模块.包.私有属性 以及 静态成员 ...

随机推荐

  1. Select 查询语句

    1.1  查询语句 1.1.1     select select 用于从数据看查询数据.语法 select field1,filed2,.. . from tablename [where cond ...

  2. LeetCode 605. 种花问题(Can Place Flowers) 6

    605. 种花问题 605. Can Place Flowers 题目描述 假设你有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花卉不能种植在相邻的地块上,它们会争夺水源,两者都会死去. ...

  3. ubuntu下安装amqp扩展

    目录 环境 下载扩展: 安装amqp: 验证 环境 系统 ubuntu 16.04 php 7.1 下载扩展: sudo apt-get -y install gcc make autoconf li ...

  4. Python05之常用操作符

    主要有三类:算数运算符,比较运算符,逻辑运算符 一.算数运算符: 加(+)减(-)乘(*)除(/)幂运算(**)地板除(//)取余数(%) 注:/和//的区别: 数据1 / 数据2 = 数据3   ( ...

  5. FZU2018级算法第三次作业 3.16 station

    题目大意: 给出1-n共n个数的入栈顺序,可以随时出栈,求出栈的最大字典序. 输入示例 输出示例 51 2 3 4 5 5 4 3 2 1 54 2 5 3 1 5 3 2 4 1 题目分析: 假设目 ...

  6. 转:数据库实例自动crash并报ORA-27157、ORA-27300等错误

    rhel7.2上安装12C RAC数据库后,其中一个数据库实例经常会自动crash.查看alert日志发现以下错误信息: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Errors ...

  7. django使用pyecharts(6)----django加入echarts_增量更新_定长_坐标轴定长

    六.Django 前后端分离_定时增量更新图表(坐标轴定长) 1.安装 djangorestframework linux pip3 install djangorestframework windo ...

  8. Redis string操作命令

    字符串类型  string set 从v2.6.12版本开始,Redis增强了set功能, 语法如下: SET key value [EX seconds] [PX milliseconds] [NX ...

  9. WUSTOJ 1304: 最大最小公倍数(Java)

    题目链接:

  10. Fabric交易流程

    (内容可能有些乱,请见谅,日后会对格式进行整理!) #### 在1.0及以后的版本中,客户端应用会先向Fabric CA申请用户所需要的Fabric中的准入证书,用于签名提案以及交易,然后由客户端(A ...