2013-07-21 3 views
1

Поскольку вы не можете получить доступ к свойствам методов sibling в объекте javascript, я использовал метод прототипа для расширения этих свойств.Правильная архитектура объектов-прототипов

var ColorGen = function ColorGen() {} 

ColorGen.prototype = {}; 

ColorGen.prototype.settings = { 
    gridContainer : 'gridContainer', 
    xSquareCount : 50, 
    ySquareCount : 50, 
    xLength   : 500, 
    yLength   : 500, 
    gridArr   : [] 
}; 

ColorGen.prototype.totalSquares = function() { 
    return (this.settings.xSquareCount * this.settings.ySquareCount); 
}; 

ColorGen.prototype.squareDim = function(length, count) { 
    return Math.round(length/count); 
}; 

ColorGen.prototype.hueStep = function() { 
    return (360/this.totalSquares()); 
}; 

ColorGen.prototype.populateGrid = function() { 
    var width = this.squareDim(this.settings.xLength, this.settings.xSquareCount), 
     height = this.squareDim(this.settings.yLength, this.settings.ySquareCount); 

    for(var i=0, k = this.settings.xSquareCount * this.settings.ySquareCount; i < k; i++) { 
     var square = document.createElement('DIV'); 

     square.setAttribute("style", "background: hsla("+(Math.round(this.hueStep() * i))+", 100%, 50%, 1.0); width: "+width+"px; height: "+height+"px; display: inline-block; position: relative;"); 

     this.settings.gridArr.push(square); 
    } 

}; 
    ColorGen.prototype.setGridContainer = function() { 
    document.getElementById(this.settings.gridContainer).setAttribute('style', 'width: '+this.settings.xLength+'px; height: '+this.settings.yLength+'px; position: relative; overflow: hidden;'); 
} 

ColorGen.prototype.appendGrid = function() { 
var gridSquares = this.settings.gridArr; 

for(square in gridSquares) { 
    if (document.getElementById(this.settings.gridContainer) !== null) { 
     document.getElementById(this.settings.gridContainer).appendChild(gridSquares[square]); 
    } 
} 
} 

var colorgen = new ColorGen(); 

colorgen.setGridContainer(); 
colorgen.populateGrid(); 
colorgen.appendGrid(); 

Вот скрипка: http://jsfiddle.net/Ua6Mp/embedded/result/

Вопрос: Является ли это подходящее использование способа-прототипа? Если нет, то каково соглашение о расширении доступа к свойствам метода sibling?

Возможно, я неправильно сформулировал это. Не стесняйтесь редактировать этот вопрос, если вы считаете, что это может быть описано более четко.

+0

Методы свойства, являющегося родственным для другого метода одного и того же родительского объекта. Извините, если я не очень хорошо описываю это ... – monners

+0

пример того, что было бы лучше ... возможно, встроенные комментарии в вашем коде. –

+0

одно примечание: вы переписываете 'ColorGen.prototype = {}'. он потеряет свойство 'constructor'. – rab

ответ

0

Когда вы используете name.prototype.method = function() {}, где имя - это объект, с которым вы имеете дело с классами JavaScript. Насколько мне известно, многие фреймворки JavaScript используют это (возможно, jQuery тоже). Я еще не слышал о свойствах классов JavaScript.

Смежные вопросы