首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >原型对象的正确结构

原型对象的正确结构
EN

Stack Overflow用户
提问于 2013-07-21 07:19:26
回答 1查看 110关注 0票数 1

考虑到您不能访问javascript对象中的兄弟方法的属性,我一直在使用prototype方法来扩展这些属性。

代码语言: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/

问:这是对原型方法的适当利用吗?如果不是,扩展对同级方法属性的访问的约定是什么?

我可能说得不对。如果您认为可以更清楚地描述这个问题,请随时编辑它。

EN

回答 1

Stack Overflow用户

发布于 2013-07-21 08:41:25

当您使用name.prototype.method = function() {}时,名称是一个对象,您处理的是JavaScript类。据我所知,许多JavaScript框架都使用这个(可能也是jQuery )。我还没有听说过JavaScript类中的属性。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17769997

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档