Javascript 设计模式：使用链接扩展jQuery对象+；命名空间

我需要有关JavaScript/jQuery设计模式的帮助。下面是一些HTML和JS代码，说明了我的工作，下面是从这些示例推断出的问题

一些带有嵌套div的

HTML

，用于创建遍历场景：

    <div class="box">
        BOX 1
        <div class="nested-boxes">
            <div class="box">
                BOX 1-1
                <div class="nested-boxes">
                    <div class="box">
                        BOX 1-1-1
                    </div>
                </div>
            </div>
            <div class="box">
                BOX 1-2
            </div>
        </div>
    </div>

现在，我的代码是这样的：

// I first need to call a global function:
$box = MyFunctions.Boxes.getBox($('#box-1-1'));

// Then I can start chaining my methods
$box.getParentBox().getNestedBoxes().each(function(){
    // however as soon as I use a native jQuery method, I end up with
    // a jQuery object which doesn't have my custom methods ans I need
    // to use a global function again.
    console.log($(this), MyFunctions.Boxes.getBox($(this)).showLabel());
});

Q1：如何编写我的函数而不必在名称中重复名称空间作为前缀（例如

myfunctions\u box\u

），同时避免与第三方代码冲突

每次我在jQuery对象上创建一个新函数作为自定义方法使用时（例如，

getParentBox

，

getnestedbox

…），我都必须手动将其映射到我的一个函数中（即，

myfunctions\u box\u getBox

）：

Q2：有没有办法自动映射我的自定义方法

下面的问题可能与上面的问题有关，但我更喜欢单独问，因为我觉得它们并不完全相同

只要我使用本机jQuery方法（如上例中的

each

），我就会得到没有自定义方法的jQuery对象，我需要再次调用其中一个全局函数来检索同一个对象，但会附加自定义方法

Q3：为我的全局函数创建jQuery插件以保持me代码的OO特性有意义吗（参见下面的示例）

---

Q1：如何编写函数而不必在名称中重复名称空间作为前缀（例如myfunctions\u Box），同时避免与第三方代码冲突？

现在的问题是，您的函数是全局函数，因此需要在其名称后附加名称空间，以防止名称冲突（但这仍然不能保证名称冲突的安全性）。您应该将整个javascript代码包装在一个自调用函数中，例如：

(function {
    $.extend(true, window, {
        MyFunctions: {
            Boxes: {
                getBox: getBox
            }
        }
    });

    function getBox($element) {
        // Do something.
        return $element;
    }
}());

getBox函数现在是私有的，您不必担心与第三方库等的名称冲突

---

（目前仅讨论第一个问题）

Q1：如何编写函数，而不必在名称中重复名称空间作为前缀（例如myfunctions\u Box），同时避免与第三方代码冲突？

现在的问题是，您的函数是全局函数，因此需要在其名称后附加名称空间，以防止名称冲突（但这仍然不能保证名称冲突的安全性）。您应该将整个javascript代码包装在一个自调用函数中，例如：

(function {
    $.extend(true, window, {
        MyFunctions: {
            Boxes: {
                getBox: getBox
            }
        }
    });

    function getBox($element) {
        // Do something.
        return $element;
    }
}());

getBox函数现在是私有的，您不必担心与第三方库等的名称冲突

（目前仅讨论第一个问题）

(function {
    $.extend(true, window, {
        MyFunctions: {
            Boxes: {
                getBox: getBox
            }
        }
    });

    function getBox($element) {
        // Do something.
        return $element;
    }
}());