JS沙箱模式实例分析

本文实例讲述了JS沙箱模式。分享给大家供大家参考,具体如下:

//SandBox(['module1,module2'],function(box){});
/*
*
*
* @function
* @constructor
* @param []  array   模块名数组
* @param callback function 回调函数
* 功能:新建一块可用于模块运行的环境(沙箱),自己的代码放在回调函数里,且不会对其他的个人沙箱造成影响
和js模块模式配合的天衣无缝
*
* */
function SandBox() {
  //私有的变量
  var args = Array.prototype.slice.call(arguments),
      callback = args.pop(),
      //模块可以作为一个数组传递,或作为单独的参数传递
      modules = (args && typeof args[0] == "string") ? args : args[0];
  //确保该函数作为构造函数调用
  if (!(this instanceof SandBox)) {
    return new SandBox(modules,callback);
  }
  //不指定模块名和“*”都表示“使用所有模块”
  if (!modules || modules[0] === "*") {
    for(value in SandBox.modules){
      modules.push(value);
    }
  }
  //初始化所需要的模块(将想要的模块方法添加到box对象上)
    for (var i = 0; i < modules.length; i++) {
      SandBox.modules[modules[i]](this);
    }
  //自己的代码写在回调函数里,this就是拥有指定模块功能的box对象
  callback(this);
}
 SandBox.prototype={
   name:"My Application",
   version:"1.0",
   getName:function() {
     return this.name;
   }
 };
/*
* 预定义的模块
*
* */
SandBox.modules={};
SandBox.modules.event=function(box){
  //私有属性
  var xx="xxx";
  //公共方法
  box.attachEvent=function(){
    console.log("modules:event------API:attachEvent")
  };
  box.dettachEvent=function(){
  };
}
SandBox.modules.ajax=function(box) {
  var xx = "xxx";
  box.makeRequest = function () {
  };
  box.getResponse = function () {
  };
}
SandBox(['event','ajax'],function(box){
  box.attachEvent();
})

运行效果截图:

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2017-09-03

JavaScript 设计模式之组合模式解析

怎么说呢?!就像是动物(组合对象)一样,当它生下后代(叶对象)时,它的后代就有了某种功能(比如:挖洞,听力好等等):也像是一棵树,它有一个根(组合对象)然后是从这个棵树向外冒出的其他枝杆(组合对象)以及从这些枝杆又向外长的叶子(叶对象).换句话说,就是当祖先已经有了,那么只要从这个祖先衍生出来的其他孩子(包括这个祖先下的其他组合对象)已经就具备了某种功能,看上去貌似又有些像是继承."组合模式"在组合对象的层次体系中有两种类型的对象:叶对象和组合对象.组合模式擅长于对大批对象进行操作.

JavaScript设计模式之工厂方法模式介绍

1. 简单工厂模式 说明:就是创建一个工厂类,里面实现了所对同一个接口的实现类的创建. 但是好像JavaScript 好像没有 接口 这号东西,所以我们去掉接口这个层; 当然,我们这里的 实现类 下的成员变量,方法应该都是一样的: 例如:这时举短信发送跟邮件发送的例子; 1>. 邮件发送[实现]类 复制代码 代码如下: function MailSender() {     this.to = '';     this.title = '';     this.content = ''; } M

JS实现闭包中的沙箱模式示例

本文实例讲述了JS实现闭包中的沙箱模式.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> //闭包实现模块化:沙箱模式 -->设

JavaScript的模块化:封装(闭包),继承(原型) 介绍

虽然 JavaScript 天生就是一副随随便便的样子,但是随着浏览器能够完成的事情越来越多,这门语言也也越来越经常地摆出正襟危坐的架势.在复杂的逻辑下, JavaScript 需要被模块化,模块需要封装起来,只留下供外界调用的接口.闭包是 JavaScript 中实现模块封装的关键,也是很多初学者难以理解的要点.最初,我也陷入迷惑之中.现在,我自信对这个概念已经有了比较深入的理解.为了便于理解,文中试图封装一个比较简单的对象. 我们试图在页面上维护一个计数器对象 ticker ,这个对象维护一

JavaScript 设计模式 安全沙箱模式

命名空间 JavaScript本身中没有提供命名空间机制,所以为了避免不同函数.对象以及变量名对全局空间的污染,通常的做法是为你的应用程序或者库创建一个唯一的全局对象,然后将所有方法与属性添加到这个对象上. 复制代码 代码如下: /* BEFORE: 5 globals */ // constructors function Parent() {} function Child() {} // a variable var some_var = 1; // some objects var mo

javascript设计模式之解释器模式详解

神马是"解释器模式"? 先翻开<GOF>看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如何创建一个抽象语法树.它不涉及语法分析.抽象语法树可用一个表驱动的语法分析程序来完成,也可用手写的(通常为递归下降法)语法分析程序创建,或直接client提供. 解析器: 指的是把描述客户端调用要求的表达式,经过解析,形成一个抽象语法树的程序. 解

JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

常用的Javascript设计模式小结

<Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

JavaScript设计模式之观察者模式(发布者-订阅者模式)

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

JavaScript利用闭包实现模块化

利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } } 正如在这

javascript 设计模式之单体模式 面向对象学习基础

单体模式(singleton) 单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问: 一个单体主要分为三部分 用于访问内部信息的入口变量(如:Sky) 属性(如:nickName/age/timeInfo) 方法(如:sayHello) 基本结构 复制代码 代码如下: var Sky = { /* * 作用一,变量管理 */ nickName: "sky", age: "26", /* * 作用二,加载

JavaScript设计模式之单体模式全面解析

单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚). 单体模式是javascript里面最基本但也是最有用的模式之一. 特点: 1. 可以用来划分命名空间,从而清除全局变量所带来的危险或影响. 2. 利用分支技术来来封装浏览器之间的差异. 3. 可以把代码组织的更为一体,便于阅读和维护. 单体模式的基本写法: /* 最基本的单体模式 */ var her = { name: 'Anna', sex: 'wom

javascript设计模式之单体模式学习笔记

单体模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一变量进行访问. 单体模式的优点是: 可以用来划分命名空间,减少全局变量的数量. 使用单体模式可以使代码组织的更为一致,使代码容易阅读和维护. 可以被实例化,且实例化一次. 什么是单体模式?单体模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次. 但是并非所有的对象字面量都是单体,比如说模拟数组或容纳数据的话,那么它就不是单体,但是如果是组织一批相关的属性和方法在

学习JavaScript设计模式之迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. JavaScript中的Array.prototype.forEach 一.jQuery中的迭代器 $.each([1, 2, 3], function(i, n) { console.log("当前下标为:"+ i + " 当前元素为:"+ n ); }); 二.实现自己的迭代器 var each = function(ary, callback) { for(var i

JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析

本文实例讲述了JavaScript设计模式之工厂模式和抽象工厂模式定义与用法.分享给大家供大家参考,具体如下: 1.工厂模式: 虽然Object构造函数和对象字面量都可以用来创建单个对象,但这个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码.为了解决这个问题,开始使用工厂模式. 利用工厂模式,可以实现不指定特定的类而创建出对象,也就是说,不需要使用new关键字来创建特定类或子类的实例. var TravelTeam = function(){}; TravelTeam.pr

JavaScript设计模式之代理模式实例分析

本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静

JavaScript设计模式之命令模式实例分析

本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

JavaScript设计模式之门面模式原理与实现方法分析

本文实例讲述了JavaScript设计模式之门面模式原理与实现方法.分享给大家供大家参考,具体如下: 外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系统的功能和责任).本角色会将所有从客户端发来的请求委派到相应的子系统去. 2. 子系统角色 可以同时有一个或多个子系统.每一个子系统都不是一个单独的类,而是一些类的集合.每一个子系统都可以被客户端直

javascript设计模式之Adapter模式【适配器模式】实现方法示例

本文实例讲述了javascript设计模式之Adapter模式.分享给大家供大家参考,具体如下: 所谓Adapter模式就是适配器模式,主要是指使两个原本没有关联的类结合一起使用. JS实现Adapter模式示例如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="json.js"&g

JavaScript中实现单体模式分享

单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对象语言虽然在单体模式的思想上是一致的,但是实现起来还是有差异的. 首先来看看传统面向对象语言对于单体模式的定义:单体模式是只能被实例化一次并且可以通过一个众所周知的访问点来访问的类.这个定义有两点突出了传统面向对象语言的特征,即类和实例化,所以对于传统面向对象语言来讲,单体模式是建立在其类和实例化的