这对我的 jQuery 脚本来说是一个好的结构吗？

Posted 2023-02-22

【中文标题】这对我的 jQuery 脚本来说是一个好的结构吗？

【英文标题】：Is this a good structure for my jQuery scripts?

【发布时间】：2011-11-23 03:58:32

【问题描述】：

我想将我的脚本组织在我所有网站的一个 .js 文件中（我现在一团糟），比如 C# 中的命名空间和类...

(function ($) 

    //private variables
    $.divref = $("#divReference");

    //Namespaces
    window.MySite = ;
    window.MySite.Home = ;
    window.MySite.Contact = ;

    //Public function / method
    window.MySite.Home.Init = function(params)
        alert("Init");

        MySite.Home.PrivateFunction();

        $.divref.click(function()
            alert("click");
        );
    ;

    //private function / method
    MySite.Home.PrivateFunction = function()
        alert("Private");
    ;

)(jQuery); 

这是 jQuery 和 JScript 中惯用的布局吗？

【问题讨论】：

您创建私有变量的方法是错误的。您将它们附加到 $ 对象，该对象将在您的代码完成执行后存在。你想要一个闭包。

@g.d.d.c 这将是一个很好的答案。

【参考方案1】：

我将继续发表我的评论作为答案，尽管我不是 100% 它解决了您关于 c# 命名空间及其在 javascript 中的相似性的问题（我不是 c# 程序员）。您实际上并没有创建私有变量，因为您将它们附加到此函数完成后将存在的 $ 对象。如果你想要私有变量，你需要使用闭包。这些看起来像这样：

var myObject = function () 
  var innerVariable = 'some private value';

  return 
    getter: function () 
      return innerVariable;
    
  
()

如果您尝试访问myObject.innerVariable，它将返回undefined，但如果您调用myObject.getter()，它将正确返回该值。这个概念是你想要在 JavaScript 中阅读的一个概念，也适用于一般的编程。希望对您有所帮助。

【讨论】：

是的，你是对的，我没有注意到这一点。它们是公共变量然后-。谢谢

【参考方案2】：

这更像是我将如何实现您正在尝试做的模式：

// MySite.Home Extension
window.MySite = 
    (function ($, root) 

        //private variables
        var $divref = $("#divReference");

        //private function / method
        var privateFunction = function()
            alert("Private");
        ;        

        root.Home = ;

        // Public variable
        root.Home.prop = "Click"

        //Public function / method
        root.Home.Init = function(params)
            alert("Init");

            private();

            $divref.click(function()
                alert(root.Home.prop);
            );
        ;

        return root;

    )(jQuery, window.MySite ||  );   

// MySite.Contact Extension
window.MySite = 
    (function ($, root) 

        root.Contact = ;

        // More stuff for contact

        return root;

    )(jQuery, window.MySite ||  ); 

第一个更改是将每个“命名空间”拆分为自己的模块模式，因此私有变量不会从命名空间流向命名空间（如果您确实打算将它们私有到命名空间，这将更像 C# esque）。其次，不是访问window.MySite，而是传入要扩展的对象（在这种情况下，我称之为root）。这会给你一些灵活性。

您的 私有方法 并不是真正私有的。要创建私有方法，您只需要创建一个函数 var，它绑定在闭包中，但不分配给外部可见对象的属性。最后，您可能不想使用$.somegarbage。就像评论中提到的那样，您正在向 $ 对象添加一个属性，当关闭完成时该属性仍然存在。如果您想要接近的东西，我会使用 $somegarbage，有些人似乎喜欢这样做，但是任何变量名称都适用于私有变量，只要变量绑定在闭包范围内（而不是其他地方）

你在正确的轨道上......

【参考方案3】：

您可能需要阅读 JavaScript 中的 Module pattern (more) 和闭包，以防止污染全局命名空间。