模块模式中的 JavaScript 命名空间

Posted 2023-02-23

【中文标题】模块模式中的 JavaScript 命名空间

【英文标题】：JavaScript namespace in Module Pattern

【发布时间】：2013-05-07 13:56:32

【问题描述】：

我正在阅读有关创建 namespace 和模块化模式的 How Good C# Habits can Encourage Bad javascript Habits 文章，但我不明白使用 $ 和 jQuery 来创建命名空间的原因。看这段代码：

(function( skillet, $, undefined ) 
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() 
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    ;

    //Private Method
    function addItem( item ) 
        if ( item !== undefined ) 
            console.log( "Adding " + $.trim(item) );
        
        
( window.skillet = window.skillet || , jQuery ));

为什么它发送$作为参数然后用jQuery调用它？

【问题讨论】：

我很确定这是重复的，但我认为这个问题不是最清楚的。

【参考方案1】：

当您加载 jQuery 库时，它会将两个全局符号绑定到对主函数的引用：“jQuery”和“$”。但是，其他一些库也希望使用“$”，因此 jQuery 提供了一种解除“$”绑定并将其恢复为加载 jQuery 之前的状态的方法。通过在您的示例中使用该技术，您可以在代码中使用“$”，无论全局“$”是否引用 jQuery。

edit——你引用的那篇文章也有类似的解释：

传递的第二个参数[是] jQuery。这样做的好处是命名参数被引用为 $，这允许我们在匿名函数中将 jQuery 引用为 $，而不必担心它会与其他 JavaScript 库中声明的 $ 冲突。这是您在查看编写良好的 jQuery 代码时很可能会遇到的常见做法。

【讨论】：

抱歉这个愚蠢的问题，但如果我根本不想使用 jQuery，我还需要它吗？

使用这种方法可以保证，如果我在我的命名空间中使用$，我将调用 jQuery。如果我不想在我的模块中使用 jQuery，我可以简单地删除参数和 jQuery 对吗？对吗？

如果你不想使用 jQuery，那么这个例子是不相关的。如果你确实使用它，那么是的，通过这个技巧，“$”可以保证是对全局 jQuery 的引用。如果你不想使用它，只需省略第二个参数即可。