代码之家 › 专栏 › 技术社区 › rg88

大型项目中的javascript(使用jquery)…组织、传递数据、私有方法等

jquery javascript

rg88 · 技术社区 · 15 年前

我正在做一个大型项目,它的组织方式如下: 根据需要包含多个javascript文件,大多数代码都包装在匿名函数中…

// wutang.js

//Included Files Go Here

// Public stuff
var MethodMan;

// Private stuff
(function() {

var someVar1;

MethodMan = function(){...};

var APrivateMethod = function(){...};

$(function(){
//jquery page load stuff here
    $('#meh').click(APrivateMethod);
});
})();

我想知道这里的一些事情。假设一个页面中包含许多这样的文件,那么什么可以访问文件之间传递数据的最佳方式是什么,以及什么?

例如,我假设 MethodMan() 任何包含页面上的任何内容都可以访问。是公开的,是吗?

var someVar1 只有特定匿名函数内的方法才可访问,其他任何地方都无法访问,是吗?也是如此 var APrivateMethod() 是吗?

如果我想要 APrivateMethod() 在另一个包含的页面中使用另一个匿名包装方法,使其他方法可以使用某些内容。在不同的包含页面上,在这些私有匿名函数之间传递数据的最佳方式是什么?我只需要把我想在他们之间使用的东西公之于众吗?如果我想最小化全局变量呢?

下面是什么?

var PootyTang = function(){
    someVar1 = $('#someid').text();
    //some stuff
};

在同一页使用的另一个包含文件中,我有:

var TangyPoot = function(){
    someVar1 = $('#someid').text();
    //some completely different stuff
};

在这些匿名(它们作为第一个示例包装)函数之间共享somevar1的值的最佳方法是什么?

2 回复 | 直到 15 年前

Claudiu 15 年前

您是对的-匿名函数中声明的任何变量都将保留在匿名函数中。因此,从第一个示例开始,methodman将对所有内容都可用,而somevar1确实是私有的。

当您谈到“包含”文件时,假设您只是复制并粘贴所有单独文件中的代码到一个大文件中。这基本上就是发生的事情。如果你想要 someVar1 要对不同的“模块”可用(因为这正是您使用匿名函数模拟的内容),然后在任何模块之外声明它,例如:

var someVar1 = "initialValue";
(function() { //module 1
    var PootyTang = function(){
        someVar1 = $('#someid').text();
        //some stuff
    };
})();
(function() { //module 1
    var TangyPoot = function(){
        someVar1 = $('#someid').text();
        //some stuff
    };
})();

在这种情况下,因为 SAMEVAR1 是全局的,它们将访问同一个变量。但请注意,如果您改为这样做:

(function() { //module 1
    var TangyPoot = function(){
        var someVar1 = $('#someid').text();
        //some stuff
    };
})();

您将创建一个单独的局部变量,名为 SAMEVAR1 这不会影响全球。

PatrikAkerstrand 15 年前

可以使用jquery的事件机制( bind 和 trigger )要以松散耦合的方式传递数据:

(function() { //module 1
    var Observable = function() {
         // [..]
         var $element = $('#someid');
         $('body').trigger('Observable:init', {element: $element});
    };
})();
(function() { //module 2
    var Observer = {
       onInit: function (e) {
       }
    };
    $('body').bind('Observable:init', Observer.onInit);
})();