您的位置:首页 > Web前端 > JavaScript

模块functionJavaScript学习笔记(二十五) 沙箱模式

2013-05-29 19:53 513 查看
改章节朋友在青岛吃饭的时候突然想到的...之前就有想写几篇关于模块function的条记,所以回家到之后就奋笔疾书的写出来发表了

依赖一个独一全局的变量作为程序的全局符号。在命名空间模式中,没有办法存在两个版本程序或者类库在雷同的页面中运行,因为它们都需要雷同的全局符号,比如:MYAPP

长的带点的名称去输入和运行时解析,比如:MYAPP.utilities.array

望文生义,沙箱模式给模块提供一个环境运行而不影响其它模块和它们私有的沙箱。

new Sandbox(function (box) { // your code here... });

对象box和命名空间模式里头的MYAPP比拟像,它将会具有让你代码运行需要的所有类库功能函数。

一些技巧(强制new模式),你可以假设new并且在创立对象的时候不需要它

这个Sandbox() 构造函数可以接受一个额外的配置参数(configuration argument )指定这个对象实例创立所需要的模块名,我们希望代码模块化,那么绝大部分Sandbox()提供的函数将会包含在模块中

有了这两个额外的功能,我们看一些实例化对象的例子代码像什么模样。

Sandbox(['ajax', 'event'], function (box) { // console.log(box); });

这个例子和后面的相似,但这一次模块名是作为独立的参数传递的:

Sandbox('ajax', 'dom', function (box) { // console.log(box); });

那么应用通配符 * 参数表示"所有可用的模块"怎么样?便利起见,让我们假设当没有模块被传递,沙盒会假设 * .

Sandbox('*', function (box) { // console.log(box); }); Sandbox(function (box) { // console.log(box); });

还有一个例子可以说明如何多次实例化沙盒对象,并且你甚至可以一其中嵌套在另一个而没有干扰:

Sandbox('dom', 'event', function (box) { // work with dom and event Sandbox('ajax', function (box) { // another sandboxed "box" object // this "box" is not the same as // the "box" outside this function //... // done with Ajax }); // no trace of Ajax module here });

就想你在这些例子中看到的,当应用沙盒模式时,你可以将你的代码包裹进回调函数保护全局的命名空间。

现在让我们看一下如何着手实现Sandbox()构造函数。

添加模块(Adding Modules)

在实现真正的构造函数之前,让我们看看如何添加模块。

Sandbox()

函数也是一个对象,我们可以给它添加一个叫做

modules

的属性。这个属性将会是另外一个包含键值对的对象,键是模块的名字,值是每一个模块的实现函数。

每日一道理

宽容,是一种坦荡,可以无私无畏,无拘无束,无尘无染。宽容,是一种豁达,是比海洋和天空更为博大的胸襟,是宽广和宽厚的叠加,延续和升华。宽容有度,宽容无价,宽以待人,这是人生处世的基本法则。

Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {};
box.getStyle = function () {};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// access to the Sandbox prototype if needed:
// box.constructor.prototype.m = "mmm";
box.attachEvent = function () {};
box.dettachEvent = function () {};
};
Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {};
box.getResponse = function () {};
};

在这个例子中,我们添加了模块dom,event和ajax,都是一些在任何类库或庞杂的web项目中常见的基础功能函数。

实现构造函数(Implementing the Constructor)

最后,让我们来实现Sandbox()构造函数(平日你可能会重命名这类类型的构造函数,起一个对你的类库或者程序有意义的名字):

function Sandbox() {
// turning arguments into an array
var args = Array.prototype.slice.call(arguments),
// the last argument is the callback
callback = args.pop(),
// modules can be passed as an array or as individual parameters
modules = (args[0] && typeof args[0] === "string") ? args : args[0],
i;
// make sure the function is called
// as a constructor
if (!(this instanceof Sandbox)) {
return new Sandbox(modules, callback);
}
// add properties to `this` as needed:
this.a = 1;
this.b = 2;
// now add modules to the core `this` object
// no modules or "*" both mean "use all modules"
if (!modules || modules === '*') {
modules = [];
for (i in Sandbox.modules) {
if (Sandbox.modules.hasOwnProperty(i)) {
modules.push(i);
}
}
}
// initialize the required modules
for (i = 0; i < modules.length; i += 1) {
Sandbox.modules[modules[i]](this);
}
// call the callback
callback(this);
}
// any prototype properties as needed
Sandbox.prototype = {
name: "My Application",
version: "1.0",
getName: function () {
return this.name;
}
};

在这个实现的重点:

文章结束给大家分享下程序员的一些笑话语录:

程序员喝酒

  我偶尔采用“木马策略”、“交叉测试”,时间不长就开始“频繁分配释放资源”,“cache”也是免不了的了,

  不过我从不搞“轮巡”,也不会“捕获异常”,更不会“程序异常”,因为我有理性

克制的。  

---------------------------------
原创文章 By
模块和function
---------------------------------
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: