javascript - 我如何重构这段代码以使其更加面向对象？

Question

更新

所以我听从了'justkt的建议'和'xtofl '并对我的代码做了一些巨大的改变。我认为这是一个更好的设计，但仍请提供反馈和改进建议。

首先，我创建了一些枚举...

var SymbolName = {
    alpha : 0,
    beta : 1,
    // ... etc...
};
Object.freeze(SymbolName);

var TypeOfSymbol = {
    GreekSymbol : 0,
    // ... etc...
};
Object.freeze(TypeOfSymbol);

...然后我重构了我的 Symbol类的方法是取出我之前拥有的所有成员变量，并将其制作成一个对象，该对象可以记住每个 Symbol 4 个值。 ...

function Symbol(name, id, value, type) {

    var name = name;
    var id = id;
    var value = value;
    var type = type;

    this.getName = function() {
        return name;
    };

    this.getID = function() {

        return id;
    };

    this.getValue = function() {

        return value;
    };

    this.getMathMLTag = function() {

        var tag;
        switch (Number(type)) {

            case TypeOfSymbol.GreekSymbol:

                tag = 'mi';
                break;

            default:

                tag = 'mo';
                break;
        }
        return tag; 
    };
};

现在，创建并访问这些 Symbol对象，我创建了一个 Symbols具有所有可能的数组 Symbol 的对象对象...

function Symbols() {

    var theSymbols = new Array();

    // new Symbol(name, id, value, type)
    theSymbols[SymbolName.alpha] = new Symbol('alpha', 'symbol_' + SymbolName.alpha, 'α', TypeOfSymbol.GreekSymbol);
    // ... etc...

    this.getSymbol = function(symbolID) {

        return theSymbols[symbolID];
    };
};

所以现在一切都很容易了。我声明一个变量var symbols = new Symbols();如果我想获得符号，我可以这样做:

symbols.getSymbol(SymbolName.alpha); // get the Symbol object
symbols.getSymbol(SymbolName.alpha).getValue(); // get the Symbol value
symbols.getSymbol(SymbolName.alpha).getID(); // get the Symbol ID

这让我可以轻松创建 <div>每个Symbol s很容易:

$.fn.AppendGreekSymbols = function() {
    var symbol;
    var mathTag;
    var openingTags;
    var closingTags;

    // lower-case Greek Alphabet
    var index = SymbolRanges.GreekSymbolsStartIndex;

    for (index; index <= SymbolRanges.GreekSymbolsEndIndex; index++) {

        symbol = symbols.getSymbol(index);

        openingTags = '<div id=\"' + symbol.getID() + '\" class=\"symbol ' + symbol.getName() + '\">';
        mathTag = '<math display=\"block\"><' + symbol.getMathMLTag() + '>';
        closingTags = '</' + symbol.getMathMLTag() + '></math></div>';

        $('.greek-symbols').append(openingTags + mathTag + symbol.getValue() + closingTags);
    }
};

此外，我可以为所有 Symbol 定义一键单击处理程序轻松对象:

$(function() {

    $('div.symbol').click(function() {

        var targetSymbolID = $(this).attr('id').split('_')[1];
        var symbol = symbols.getSymbol(targetSymbolID);
        $().InsertSymbol(symbol);
    });
});

...就是这样!耶!我认为这是一个巨大的改变......我对这个重构过程和我提出的设计感到非常自豪。大家觉得怎么样？

原帖

我有一个Symbol类看起来像这样:

function Symbol() {
    // I need to define some functions in here  
};
Symbol.prototype.alpha = "α";
Symbol.prototype.Alpha = "A";
Symbol.prototype.beta = "β";
Symbol.prototype.Beta = "B";
Symbol.prototype.gamma = "γ";
Symbol.prototype.Gamma = "Γ";
Symbol.prototype.delta = "δ";
Symbol.prototype.Delta = "Δ";
... and so on for nearly 500 symbols...

每个符号将单独放入其自己的 <div class="symbol alpha"> 中元素，但是alpha将是与符号名称相对应的类名称...所以还有其他类似的元素，例如 <div class="symbol beta"> , <div class="symbol gamma">等等...所以要做到这一点，我会有很多重复的代码:

var symbol = new Symbol();
$('.greek-symbols').append('<div class="symbol alpha">' + symbol.alpha + '</div>');
$('.greek-symbols').append('<div class="symbol beta">' + symbol.beta + '</div>');
$('.greek-symbols').append('<div class="symbol gamma">' + symbol.gamma + '</div>');
... etc...

现在，我想要做的是为每个符号及其相应的 <div> 设置一个单击事件处理程序容器。同样，我会有很多重复的代码，如下所示:

$('div.symbol.alpha').click(function() {

    $().InsertSymbol(symbol.alpha);
});
$('div.symbol.beta').click(function() {

    $().InsertSymbol(symbol.beta);
});
... and so on...

我认为有更好的方法来做到这一点。理想情况下，我希望只有一个事件处理程序可以从类中解析出符号名称，在 Symbol 中查找它上课，并以这种方式做事。所以...

$('div.symbol').click(function() {

    // I know the following code doesn't correctly parse out the correct class,
    // I'll worry about that later, but the idea is clear
    var symbolName = $(this).attr('class'); // parse out the correct class, the symbol name
    $().InsertSymbol(Symbol.getSymbol(symbolName));
});

...以及 Symbol类，我会有这个getSymbol()函数将接受一个名称并查找符号并返回正确的符号。但是，我不确定如何在 JavaScript/jQuery 中执行此操作。我该如何建立这个逻辑？我不知道 JavaScript 是否有一个 HashMap 类，就像 Java 那样，那么查找这些符号的好方法是什么？

如果我需要进一步澄清，请告诉我。

附:我欢迎任何有关良好面向对象设计的来源/引用的建议

Answer 1

您可能会从面向对象的方法中受益:如果您定义一个 Symbol 类，它可能会有很多实例，而不是成员变量。

注意:代码尚未经过测试 - 请捕获这个想法。

编辑:jsfiddle位于http://jsfiddle.net/xtofl/ttjZw/4/

// the class:
function Symbol( name, lowname, upcase, lowcase ) {
   this.name = name;
   this.lowname = lowname;
   this.upcase=upcase;
   this.lowcase=lowcase;
}
// creates a div - may be done using jQuery DOM functions
Symbol.prototype.makedivs = function() {
   return "<div class='"+this->name+"'>"+this.upcase+"</div>"
         +"<div class='"+this->lowname+"'>"+this.lowcase+"</div>"
}
Symbol.prototype.addhandler = function() {
   var symbol = this;
   $(this->name).click()( function(e){ document.write( symbol->upcase ); } );
}



$(document).ready( function() {

  // the instances:
  var symbols = [
    new Symbol( 'alfa', 'Alfa', "&#x03B1;", "&#x03B1;" ),
    new Symbol( 'beta', 'Beta', "&#x03B1;", "&#x03B1;" ),
    //...
  ];
  for( var i = 0; i != symbols.length; ++i ) {
    symbols[i].addhandler();  
  }

});