Question

上下文：使用Django ModelForm和模板，jQuery 1.3.2，IE8上的JavaScript，Firefox 3.5或Safari 4生成的HTML小部件。过程：内置一些jQuery的普通JavaScript函数，或 jQuery Enlightenment ，Cody Lindley，“向jQuery命名空间添加新函数”，p。 116。

我有一个jQuery结构，它使用不同的变量重复几次，所以一直在乞求变成一个函数。基本上，需要根据其他小部件的值启用或禁用某些小部件。我用两种方式写了这个函数。在普通JavaScript函数中使用jQuery代码的第一种方法如下：

function enable_or_disable_by_selection(master_id, master_id_value, dependent_ids) {
    /*
     * The master_id argument is the id attribute string of the master select element in the form
     * "#id_select_element_name".
     * The master_id_value argument is the selection value, a string, that causes the dependent
     * elements to be enabled when it is selected. In all other cases, they are disabled.
     * The dependent_ids argument is an array of dependent id attribute strings, such as
     * ["#id_element_1", "#id_element_2", "#id_element_3"]
     */

    /* ON CHANGE OF master_id SELECTION ELEMENT: */
    $(master_id).change(function() {
        /* If master_id_value is chosen, enable inputs for elements in dependent_ids: */
        if ($(master_id).val() == master_id_value) {
            for (var i = 0; i < dependent_ids.length; i++) {
                $(dependent_ids[i]).removeAttr("disabled");
            }
        }
        /* Otherwise disable inputs for elements in dependent_ids: */
        else {
            for (var i = 0; i < dependent_ids.length; i++) {
                $(dependent_ids[i]).attr("disabled", true);
            }
        }
    });
}

这很有效。第二种方式，由功能强大的Lindley先生推荐，将我的新功能放在jQuery命名空间中。他的基本推荐构造可能会被看到here。这有助于“避免创建可能产生冲突的全局代码”。以下是遵循这些建议的函数代码：

(function($){
    $.enable_or_disable_by_selection = function(master_id, master_id_value, dependent_ids){
    /*
     * The master_id argument is the id attribute string of the master select element in the form
     * "#id_select_element_name".
     * The master_id_value argument is the selection value, a string, that causes the dependent
     * elements to be enabled when it is selected. In all other cases, they are disabled.
     * The dependent_ids argument is an array of dependent id attribute strings, such as
     * ["#id_element_1", "#id_element_2", "#id_element_3"]
     */

    /* CHANGE OF master_id SELECTION ELEMENT: */
        $(master_id).change(function() {
            /* If master_id_value is chosen, enable inputs for elements in dependent_ids: */
            if ($(master_id).val() == master_id_value) {
                for (var i = 0; i < dependent_ids.length; i++) {
                    $(dependent_ids[i]).removeAttr("disabled");
                }
            }
            /* Otherwise disable inputs for elements in dependent_ids: */
            else {
                for (var i = 0; i < dependent_ids.length; i++) {
                    $(dependent_ids[i]).attr("disabled", true);
                }
            }
        });
    };
})(jQuery);

这也有效。它与jQuery中的逻辑相同。

我知道jQuery使用匿名函数和闭包来维护密码命名空间。请参阅John Resig撰写的“使用（function（）{}）（）”，here。但是，当我研究这两个片段时，我很难在第一个更简单的版本中看到风险。另外，我认为第二种方法有点慢，我错了吗？请帮我看看第二版的优点。我想知道为什么这样做。

总是欢迎与问题无关的有用观察。

Answer 1

1 - 你的第一个版本的风险附带你的功能是全局的，例如，你的页面添加了一些其他随机库，它会覆盖你的功能，它会有与您的小部件的其余API的灾难性影响。

我认为你想要创建可再发行的小部件，你必须对你的代码采取防御措施，尽可能保密你的库代码，并且在引入全局对象时你应该非常谨慎和谨慎。

2 - 第二个例子不是慢，你只是在jQuery对象中添加一个成员，属性的名称解析时间实际上是无关紧要的。

我建议你阅读有关命名空间和库设计的内容：

JavaScript Namespacing
Namespacing your JavaScript
Best Practices in JavaScript Library Design（视频和幻灯片）

新的jQuery函数应该放在jQuery名称空间中吗？

1 个答案: