Question

我想创建自己的命名空间，例如 $ JQuery

 (function(app) {
     app.fn.log = function(data) {
          console.log(data);
        };
 }(app));

 app.log("data");

但是此代码返回错误 - 未捕获的ReferenceError：app未定义

如何创建自己的命名空间？

Answer 1

在javascript中实现命名空间的一种常用方法是利用module pattern和即时函数进行范围界定（就像你在问题中所展示的那样）。这也允许您传入具有非冲突名称的对象，并使用您喜欢的参数化名称，如$，如下所示：

//Global script declaration
var NAMESPACE = {};

//Check if you need to initialize your namespace
NAMESPACE.FooSpace = NAMESPACE.FooSpace || {};

//Some other script
NAMESPACE.FooSpace = (function($) {
    function Foo1() {
    }

    function Foo2() {
        return $.getSomething(); //some existing function inside of someObjectWithANonConflictingName object
    }    

    return { Foo1: Foo1, Foo2: Foo2 };
})(someObjectWithANonConflictingName);

//somewhere else in code (call as a constructor function)
var foo = new NAMESPACE.FooSpace.Foo1();
//somewhere else in code (call as regular function)
var foo2 = Foo2();

这种方法有助于防止命名冲突，因为您可以简单地添加到NAMESPACE对象，以便具有重叠的函数和变量名称。
它还为您提供了额外的好处，即能够将变量或函数重命名为可能与流行库冲突的内容。
此外，这有助于真正减少全局命名空间，因为它全部保存在NAMESPACE对象中。
它为你提供了另一种选择，可以将某些东西附加到窗口对象上（有些人觉得这很令人反感）。

Answer 2

window.app = {};

(function(app) {
    app.log = function(data) {
         console.log(data);
       };
}(app));

app.log("data");

jQuery与它的fn略有不同：当您使用$('selector')语法来查找需要处理的元素时，jQuery将返回包含所有{{em>包装的所有{{1>} 1}} - 除了内置函数之外你做的定义。

因此，如果您需要实现某种可扩展性，您应首先考虑这种包装。例如：

fn.func

顺便问一下，你想解决什么问题？

在你的情况下，当然有一个例外，因为window.app = function(p) { // do whatever you need var wrapper = { // standard common fields }; if (app.fn) { // extend wrapper with app.fn } return wrapper; };没有被匿名函数执行时定义。

Answer 3

您的语法没问题，但您必须定义app。您正在将应用作为参数传递给IIFE，但未定义应用！如果你想以app身份访问jQuery，只需使用jQuery对象调用你的IIFE：

(function(app) {
     app.fn.log = function(data) {
          console.log(data);
        };
 }($)); // where $ is your jQuery.

和

$.log("data");

小心！日志功能将在IIFE范围内外使用！

如何在javascript中创建自定义命名空间或类

3 个答案: