javascript - 在 mootools 的自定义方法中使用 Options 构造函数中定义的属性

Question

我从 Mootools 框架开始。由于我希望代码可重用，因此我尝试使用类来实现。

在下面显示的代码中，目的是使用 SVG 的 Raphael 框架绘制 map 。代码工作正常，但我在 Options 对象内部的属性方面遇到问题。

var Map = new Class({

Implements : [ Options ],

pathsArr: {},

Options: {
    canvas: {
        container: 'map',
        cheight: 500,
        cwidth: 900,
    },
    attributes: {
        fill: '#006699',
        stroke: '#3899E6',
        'stroke-width': 1,
        'stroke-linejoin': 'round'
    }   
},

initialize: function (pathsArr, options){
    this.setOptions(Options);
    this.pathsArr = paths;
    console.log(this.pathsArr);
},

setCanvas: function(){
    console.log(this.Options.canvas);
    R = Raphael(this.Options.canvas.container, this.Options.canvas.cwidth, this.Options.canvas.cheight);
    return R;
},

drawPaths: function(){
    console.log(this.Options.attributes);
    for (var country in this.pathsArr){
        var shape = R.path(this.pathsArr[country].path);
        var attri = this.Options.attributes;
        console.log(attri);
        
    }
}

});

好的，正如您所看到的，我正在使用 console.log 来了解这里发生的情况。当我检查该行中的属性时

console.log(this.Options.attributes);

我在 Google Chrome 控制台中看到此信息

当我认为我需要类似检查 Options 对象外部的 pathsArr 时发生的情况时。

在我需要 attribute 属性的地方什么也没有发生。就像这两行一样。

var attri = this.Options.attributes;
shape.attr(attri);

我不明白为什么如果我这样做，它会得到正确的结果。

console.log(this.Options.attributes.fill);

Answer 1

Javascript 区分大小写。使用 setOptions(options) 和 this.options 而不是 Options。仅当引用 Options 更改器(mutator)时，大写的 O 才会出现，如 Implements: [Options] 指令中所示。

目前，您的 Options 成员无法通过 setOptions 调用进行设置，因为它正在寻找 this.options。

您仅使用 this.Options，这是您的默认选项，从未更新。并且 this.options 设置为 Options 更改器(mutator)，正如您在编写 this.setOptions(Options) 时所指示的那样。

编辑:

另外，在下面的代码中:

initialize: function (pathsArr, options){
    this.setOptions(Options);
    this.pathsArr = paths;  // <----- `paths` is undefined