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

沙盒模型

(function(){

//代码
})();

其实就是自调用函数,隔离的条件下,既要执行函数,又要不能污染其它对象。

  • 利用沙箱模式模拟块级作用域

var s = 0;
(function(){
for(var i = 0;i <=100;i++){
s += i;
}
console.log(i);//
})();
console.log(i);//i is not defined

凡是在函数中定义的变量,应当将变量提到前面

  • 经典案例介绍

function fn(a){
var result = [];
for(var i = 0,n = a.length;i < n;i++){
result[i] = function(){
return a[i];//此时i的值为3
};
}
return result;
}
var o = fn([10,20,30])
var f = o[0];
console.log(f());//undefined //下面函数用到了沙箱模式
function fn(a){
var result = [];
for(var i = 0,n = a.length;i < n;i++){
(function(){
var j = i;
result[i] = function(){
return a[j];
};
})();
}
return result;
}
var o = fn([10,20,30])
var f = o[1];
console.log(f());//
// 也可以这么写
function fn(a){
var result = [];
for(var i = 0,n = a.length;i < n;i++){
(function(j){result[i] = function(){return a[j];};
})(i);
}
return result;
}
var o = fn([10,20,30])
var f = o[2];
console.log(f());//

从上面函数可以看出,沙箱模式的优点

  • jQuery中缓存方法的分析

先看一个用闭包的缓存

var createCache = function(){
var internalCache = {};//定义一个空对象用于接收数据
var arr = [];//定义一个空数组用于接收数据并排序
return function ( k, v ) {//在这用到闭包模式
if ( v ) {
if ( !internalCache[ k ] ) {//判断缓存中是否有该数据,有则往下进行
if ( arr.length >= 3 ) {//假设缓存极限为3
var deleteKey = arr.shift();//截取数组第一个值返回该值
delete internalCache[ deleteKey ];//删除对象中的该值
}
arr.push( k ); // 缓存中没有数据的时候才会加进去
}
internalCache[ k ] = v;//匹配键值对
} else {
return internalCache[ k ];//
}
return internalCache;//返回该对象
};
}; var o = createCache();
o('oName', 'jim');
o('Name', 'yy');
o('gender','girl')
o('age', 24);
console.log(o('age', 24));//Object {Name: "yy", genser: "girl", age: 24} 在打印最后一个数据时,最后得到3个,可以看出数据已经缓存
console.log( o(['oName']) );//undefined
console.log( o(['Name']) );//yy
console.log( o(['age']) );//24

上面方法的优点:如果传入一个函数则少一变量,这样占用内存少。缺点就是数据暴露在外面,有安全隐患。

对以上函数作出改良

1、将键值对模型从闭包中提取出来, 放到函数名上
 2、 既然键值对存储在函数名上, 那么表示直接用 函数名[ key ] 就可以访问数据了

var createCache = function(){
var arr = [];
var cache = function ( k, v ) {
if ( !cache[ k ] ) {
if ( arr.length >= 3 ) {
var deleteKey = arr.shift();
delete cache[ deleteKey ];//递归
}
arr.push( k ); // 缓存中没有数据的时候才会加进去
}
cache[ k ] = v;
};
return cache;
}; var o = createCache();
o('oName', 'jim');
o('Name', 'yy');
o('gender','girl')
o('age', 24);
console.log( o['oName'] );//undefined
console.log( o['Name']);//yy
console.log( o['gender'] );//girl

再进一步改良,在jQuery中目标含明确,调用函数就是在缓存数据,没有修改数据的意图,无须判断该键(k)的存在

var createCache = function(){
var arr = [];
var cache = function ( k, v ) {
if ( arr.length >= 3 ) {//假设缓存数据的数量极限是3
delete cache[ arr.shift() ];//递归调用
}
arr.push( k ); // 缓存中没有数据的时候才会加进去
cache[ k ] = v;
};
return cache;
};
var o = createCache();
o('oName', 'jim');
o('Name', 'yy');
o('gender','girl')
o('age', 24);
console.log( o['oName'] );//undefined
console.log( o['Name']);//yy
console.log( o['gender'] );//girl

关于javascript的沙箱模式以及缓存方法的更多相关文章

  1. 关于JavaScript的沙箱模式

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

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

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

  3. javascript沙箱模式

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

  4. javascript闭包(Module模式)的用途和高级使用方式

    javascript闭包(Module模式)的用途和高级使用方式 javascript闭包的用途:1. 匿名自执行函数:或者可以理解为,避免污染全局变量2. 缓存:源于闭包的核心特性便是保存状态,应用 ...

  5. JavaScript SandBox沙箱设计模式

    沙箱模式常见于YUI3 core,它是一种采用同一构造器(Constructor)生成彼此独立且互不干扰(self-contained)的实例对象,而从避免污染全局对象的方法. 命名空间 JavaSc ...

  6. JavaScript 沙盒模式

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

  7. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  8. javascript优化--07模式(对象)02

    沙箱模式: 解决空间命名模式的几个缺点: 命名空间模式中无法同时使用一个应用程序或库的两个版本运行在同一个页面中,因为两者需要相同的全局符号: 以点分割,需要输入更长的字符,解析时间也更长: 全局构造 ...

  9. javascript代码复用模式

    代码复用有一个著名的原则,是GoF提出的:优先使用对象组合,而不是类继承.在javascript中,并没有类的概念,所以代码的复用,也并不局限于类式继承.javascript中创建对象的方法很多,有构 ...

随机推荐

  1. C语言实践——学生信息管理

    这是本人做的第一个实践项目,用的知识都是书上有的,没有很多很复杂的知识 同时因为没有学习 C语言 图形方面的知识,所以界面做得很丑,暂时先这样吧 源文件: #include <stdio.h&g ...

  2. Windows的历史zt

    原文地址:http://windows.microsoft.com/zh-CN/windows/history#T1=era0 1975–1981:Microsoft 起步 Microsoft 联合创 ...

  3. android 自定义控件,自定义属性设置

    做listView的上拉下拉刷新,网上找了个历程.但是有些界面只有上拉刷新,有些界面是下拉刷新.觉得应该在xml里定义一个属性控制上下拉使能. 0.关于自定义控件: 自定义控件设计主要方式有:a) 继 ...

  4. 部署vc2008开发的程序(三种办法,但是我觉得这种办法最不好)

    如果你编译了一个VC2008的默认的CRT/MFC的应用程序,如果目标部署电脑上没有安装相应的VC2008的动态库,当运行你的程序的时 个,会出现如下错误信息.   这是因为程序使用了基于VC2008 ...

  5. Android 使用Jsoup解析Html

    想要做一个看新闻的应用,类似Cnbeta客户端的东西.大致思路如下:根据链接获取新闻列表页的html代码,然后解析,找到所有的新闻标题和新闻链接用listView显示,当点击ListView的Item ...

  6. cocos2d-x创建场景

    今天开始学习Cocos2d-x,使用的版本是2.1.4,这个版本比较老,对应的参考资料也比较齐全. 在mac/xcode环境下,代码是写在Classes文件夹下的,和iOS应用类似,程序从AppDel ...

  7. BZOJ 2716 Violet 3 天使玩偶 CDQ分治

    题目大意:初始给定平面上的一个点集.提供两种操作: 1.将一个点增加点集 2.查询距离一个点最小的曼哈顿距离 K-D树是啥...不会写... 我仅仅会CDQ分治 对于一个询问,查询的点与这个点的位置关 ...

  8. IHttpModule与IHttpHandler的区别整理

    IHttpModule与IHttpHandler的区别整理1.先后次序.先IHttpModule,后IHttpHandler. 注:Module要看你响应了哪个事件,一些事件是在Handler之前运行 ...

  9. java中两个对象间的属性值复制,比较,转为map方法实现

    package com.franson.study.util; import java.lang.reflect.InvocationTargetException; import java.lang ...

  10. 红豆带你从零学C#系列之:开始C#编程(二)

    控制台程序开发之补充说明 你已经动手操作过我们上一篇文章中的控制台程序输入输出了吗朋友? 如果没有的话,强烈建议你先回去做一遍再来继续学习噢!上一篇文章地址:点击这里 一.    你问我答 问:代码是 ...