javascript - 如何改进 JavaScript 的结构以更好地利用 OOP

Question

我目前正在开发一个 JavaScript 项目，该项目比我习惯的项目要大一些。过去我制作过奇怪的轮播和基本的视觉效果。

这一次，我正在开发一个项目，该项目或多或少是在浏览器中制作文件管理解决方案。

我的第一段代码是允许用户使用键盘命令(箭头和Shift)和鼠标(单击和Shift单击)选择单个和多个文件

我使用了一种设计模式，这是我在另一个项目上观察同事代码时学到的，但我对调用函数和全局(对象)变量所需的代码量不满意，例如:

SW.selection.addItemsToSelection($(this))

或

SW.selection.vars.$selectedItems

完整代码可以在 JSFiddle here 上看到

我的问题是:

(a) 是否有更好的结构可以用来更有效地组织此代码。

和

(b) 我对 OOP 只有最模糊的理解，因为我很难将其应用于现实世界的问题 - 考虑到它是一个大型 JS 应用程序的片段，如何按照 OOP 方法最好地构造这段代码。

我希望这些不是太含糊!这是我真的很难理解的事情，但我想大大改进我的 JavaScript，所以采取罕见的步骤在这里发布。

Answer 1

如果您位于对象范围内，则可以在大多数地方将 SW.selection 替换为 this。

设计模式看起来像一个“单例”(或者在 JavaScript 中是等效的:对象)，因此不需要像继承等花哨的 OOP 东西。您可能会考虑的一件事是在单例中拥有私有(private)变量的可能性:

SW.selection = (function() {
    var private = 'I’m private';
    return {
        public: function() {
            return private;
        }
    }
}());

SW.selection.public(); // returns 'I’m private', 
                       // but the private variable is not accessible from here

这样，您就可以将变量存储在私有(private)范围中，这样您就不需要每次使用 SW.selection.vars.myvar 等通过整个单例来访问它们。