//沙箱
//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界 //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. Java多线程概念及优缺点,多线程的地位|乐字节

    大家好,乐字节小乐有来咯,上次说完了Java网络编程探究|乐字节,这次我们来看看线程相关的吧. Java线程主要讲述的内容有: 1.线程概念 多线程,说白了就是多条执行路径,原来是一条路径,就主路径( ...

  2. Python31之类和对象1(三大特征:多封继——多疯子)

    一.对象: Python即是面向对象的编程也是面向过程的编程语言,其内部可谓是无处不对象,我们所熟知的列表,字符串等工厂函数本质上都是对象.对象其实是对属性和方法的封装. 属性是对象的静态特征 方法是 ...

  3. qt 旧项目编译运行提示 “启动程序失败,路径或者权限错误?” 原因及解决方法

    qt 旧项目编译运行提示 "启动程序失败,路径或者权限错误?" 原因及解决方法 原因 Qt Creator在打开项目文件的同时会生成.pro.user文件,.pro.user文件叫 ...

  4. Centos下的 .so is not an ELF file

    1 错误描述: 测试程序时,发现报错: 动态库不是一个ELF文件, 此时确定LD_LIBRARY_PATH设置正确,然后执行ldconfig命令,发现如上图: 后来执行:file liblog4cpp ...

  5. django使用pyecharts(3)----django加入echarts_定时全量更新

    三.Django 前后端分离_定时全量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...

  6. 代码质量控制 & 编程注意项

    目录 代码质量控制 编程注意项 代码&功能优化 代码优化 功能&模块优化 其他 小技巧 调试 用于记录工作中出现的问题和编程时需要注意的重点,保证代码质量和编程效率     代码质量控 ...

  7. Linux上安装pstree命令(-bash: pstree: command not found)

    一.pstree命令的安装 1.在 Mac OS上 brew install pstree 2.在 Fedora/Red Hat/CentOS yum -y install psmisc 3.在 Ub ...

  8. django类视图as_view()方法解析

    使用视图函数时,django完成URL解析之后,会直接把request对象以及URL解析器捕获的参数(比如re_path中正则表达捕获的位置参数或关键字参数)丢给视图函数,但是在类视图中,这些参数不能 ...

  9. win7实现tensorflow中的物体识别

    实现条件: 1.win7 2.python 3.运行所需要的库:matplotlib.lxml.pillow.Cython 具体参考:https://github.com/tensorflow/mod ...

  10. Machine Learning Technologies(10月20日)

    Linear regression SVM(support vector machines) Advantages: ·Effective in high dimensional spaces. ·S ...