1

JavaScript オブジェクトの兄弟メソッドのプロパティにアクセスできないため、prototype メソッドを使用してそれらのプロパティを拡張しています。

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/

質問: これはプロトタイプ方式の適切な利用ですか? そうでない場合、兄弟メソッドのプロパティへのアクセスを拡張するための規則は何ですか?

私はこれを正しく表現していないかもしれません。もっと明確に説明できると思われる場合は、この質問を自由に編集してください

4

1 に答える 1

0

where name is an object を使用しているときname.prototype.method = function() {}は、JavaScript クラスを扱っています。私の知る限り、多くの JavaScript フレームワークがこれを使用しています (おそらく jQuery も)。JavaScript クラスのプロパティについてはまだ聞いたことがありません。

于 2013-07-21T08:41:25.837 に答える