javascript - 是否有一种干净的方法来访问命名空间内的私有(private)变量

Question

我正在使用来自 https://github.com/smith/namespacedotjs 的命名空间脚本将特定于控件的 javascript 和 jQuery 代码封装在我的 ASP.NET MVC 应用程序中。如果不使用命名空间，同名的方法可能会相互干扰并导致不良行为。

这是我的 当前工作代码 :

<script type="text/javascript">

Namespace('MyCompany.MyApp.ReviseDrawingNumber.AddSheetNumber', {

        SelectDrawingNumbersControl: {
            selectedIds: [],

            setSelectedIds: function() {
                // wire up checkboxes
                $('#DrawingSheetNumbersGrid :checkbox').live('change', function(e) {
                    var $check = $(this);
                    console.log($check);
                    if ($check.is(':checked')) {
                        // add id to selectedIds
                        MyCompany.MyApp.ReviseDrawingNumber.AddSheetNumber.SelectDrawingNumbersControl.selectedIds.push($check.val());
                    }
                    else {
                        // remove id from selectedIds
                        MyCompany.MyApp.ReviseDrawingNumber.AddSheetNumber.SelectDrawingNumbersControl.selectedIds =
                            $.grep(MyCompany.MyApp.ReviseDrawingNumber.AddSheetNumber.SelectDrawingNumbersControl.selectedIds, function(item, index) {
                            return item != $check.val();
                        });
                    }
                });
            }    
        }
    });

</script>

但是，在上面的代码示例中，请注意我使用了一个变量“selectedIds”，它是一个字符串数组。由于这个变量被声明为我的命名空间的一部分，我现在被迫从同一命名空间内的其他方法中通过它的完全限定路径来引用它。

理想情况下，我更愿意写这样的东西:

<script type="text/javascript">

Namespace('MyCompany.MyApp.ReviseDrawingNumber.AddSheetNumber', {

        SelectDrawingNumbersControl: {
            selectedIds: [],

            setSelectedIds: function() {
                // wire up checkboxes
                $('#DrawingSheetNumbersGrid :checkbox').live('change', function(e) {
                    var $check = $(this);
                    console.log($check);
                    if ($check.is(':checked')) {
                        // add id to selectedIds
                        selectedIds.push($check.val());
                    }
                    else {
                        // remove id from selectedIds
                        selectedIds = $.grep(selectedIds, function(item, index) {
                            return item != $check.val();
                        });
                    }
                });
            }    
        }
    });

</script>

我上面现有的代码示例 #1 感觉非常麻烦 - 我习惯于编写 C# 并从同一 namespace 引用对象，而不完全限定它们(即代码示例 #2)。

我看过 Ben Cherry 的 documented module pattern ，我开始使用；然而，每次创建或更新模块时，在模块代码中传递所需的所有全局变量的列表似乎是维护的噩梦。

命名空间解决方案似乎在语法上更清晰，如果我可以取消完全限定“私有(private)”变量的需要，那将是绝对完美的。

有没有人对这个 JavaScript 困境有好的解决方案？

Answer 1

我认为解决您的问题的最简单方法是在您打算使用的任何方法中保留对您的控件的引用。实际上，您只是为类名取别名。

        setSelectedIds: function() {
            //keep a reference to SelectDrawingNumbersControl in case we need it
            var that = this;

            // wire up checkboxes
            $('#DrawingSheetNumbersGrid :checkbox').live('change', function(e) {
                var $check = $(this);
                console.log($check);
                if ($check.is(':checked')) {
                    // add id to selectedIds
                    that.selectedIds.push($check.val());
                }
                else {
                    // remove id from selectedIds
                    that.selectedIds =
                        $.grep(that.selectedIds, function(item, index) {
                        return item != $check.val();
                    });
                }
            });
        }