UPDATE
Поэтому я последовал совету ' justkt ' и ' xtofl ' и внес в свой код некоторые огромные изменения. Я думаю, что это лучший дизайн, но, пожалуйста, оставляйте отзывы и предложения по улучшению.
Во-первых, я создал несколько перечислений ...
var SymbolName = {
alpha : 0,
beta : 1,
// ... etc...
};
Object.freeze(SymbolName);
var TypeOfSymbol = {
GreekSymbol : 0,
// ... etc...
};
Object.freeze(TypeOfSymbol);
... затем я реорганизовал свой класс Symbol, убрав все переменные-члены, которые у меня были ранее, и превратив его в объект, который запоминает 4 значения на Symbol ...
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> s для каждого Symbol:
$.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);
}
};
Кроме того, я могу легко определить обработчик 1 клика для всех 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, так что будет хорошим способом поиска этих символов?
Дайте мне знать, если мне нужно уточнить.
p.s. Я приветствую любые предложения относительно источников / ссылок для хорошего объектно-ориентированного дизайна