slimbox将DOM包装在一个变量中-

Question

我已经安装了Slimbox，它工作正常。

然而，Slimbox作者已经包装了所有Slimbox代码，并在设置了一些全局var之后，在var中初始化了DOM。

var Slimbox = (function() {

// Global variables, accessible to Slimbox only
var win = window, ie6 = Browser.ie6, options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,

// Preload images
preload = {}, preloadPrev = new Image(), preloadNext = new Image(),

// DOM elements
overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number,

// Effects
fxOverlay, fxResize, fxImage, fxBottom;

// now initialize the DOM
window.addEvent('domready', function() {

// *************
// This is where the problem arises. 
// I call ajax actions here, and some functions which are external to 'domready' 
// *************
pageInit();
setupFormSubmit('product_bid', 'afterPlaceBid');
setupAjaxAction('delete_validate_id_link', 'afterDelete');
setupAjaxAction('move_validate_down_link', 'afterMoveValidate');
//etc...

});
// end the DOM function



function afterMoveValidate(){  
}

function afterDelete() { 
}

// all the Slimbox functions are here too... 
etc..

//end the var Slimbox
})

问题是我的外部函数虽然还在var中，但没有全局作用域，而Slimbox函数有。

这在没有Slimbox的情况下是可行的，我在Slimbox中初始化了DOM并具有外部函数。

有没有人能帮我想出一个想法/解释？

谢谢

Answer 1

slimbox的作者所做的就是实现模型模式。如果你测试下面的代码，你会注意到你不能从外部访问privateVar或privateFunction。但是，您可以通过publicVar和` `publicFunction访问它们。

因此，放入slimbox函数(或modelPattern bellow)中的所有内容都不能从外部访问，只能访问在返回的对象中“导出”的部分。因为只有这部分会在"slimbox“变量(或下面的modelPattern )中。

var modelPattern = (function() {

    // Global variables, accessible to Slimbox only
    var privateVar = 'private';

    function privateFunction() {
        console.log(privateVar);
    }

    return {
        publicVar: 'public',
        publicFunction: function() {
            console.log(privateVar);
        }
    };
})();

modelPattern.publicFunction();
if (!modelPattern.privateFunction) {
    console.log("privateFunction is not defined");
}​

您可以在此小提琴中看到代码的结果，只需启动您的javascript控制台，以便您可以看到输出。http://jsfiddle.net/ArE2x/