使用谷歌关闭创建一个简单的绘图区域小部件
在这里,我尝试使用谷歌闭包创建一个包含单个圆圈的简单绘图区域小部件。
我通过在 html 脚本标记中调用 sketcher.load()
来加载它,并收到错误:
Uncaught TypeError: Cannot set property 'Widget' of undefined
- 这里不正确?
goog.provide('sketcher');
goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');
var sketcher = {};
sketcher.prototype.Widget = function(el){
goog.ui.Component.call(this);
this.parent_ = goog.dom.getElement(el);
this.g_ = new goog.graphics.createGraphics(600, 400);
this.appendChild(this.g_);$
var fill = new goog.graphics.SolidFill('yellow');
var stroke = new goog.graphics.Stroke(1,'black');
circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);
sketcher.prototype.load = function(){
var canvas = goog.dom.createDom('div', {'id':'canvas'});
goog.dom.appendChild(document.body, canvas);
var widget = new sketcher.Widget(canvas);
};
Here I've tried to create a simple drawing area widget containing a single circle, using google closure.
I load it by calling sketcher.load()
within html script tag and get an error:
Uncaught TypeError: Cannot set property 'Widget' of undefined
- what is not right here?
goog.provide('sketcher');
goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');
var sketcher = {};
sketcher.prototype.Widget = function(el){
goog.ui.Component.call(this);
this.parent_ = goog.dom.getElement(el);
this.g_ = new goog.graphics.createGraphics(600, 400);
this.appendChild(this.g_);$
var fill = new goog.graphics.SolidFill('yellow');
var stroke = new goog.graphics.Stroke(1,'black');
circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);
sketcher.prototype.load = function(){
var canvas = goog.dom.createDom('div', {'id':'canvas'});
goog.dom.appendChild(document.body, canvas);
var widget = new sketcher.Widget(canvas);
};
第一个问题:sketcher是一个命名空间,因为你goog.provid了它。您无需再次声明。
第二个问题:sketcher.Widget应该是这样,而不是sketcher.prototype.Widget。只有函数才有原型;你应该回去回顾一下对象在 JavaScript 中是如何工作的,除非那只是一个拼写错误。它应该看起来像这样。
First problem: sketcher is a namespace, because you goog.provide it. You don't need to declare it again.
Second problem: sketcher.Widget should be thus, not sketcher.prototype.Widget. Only functions have prototypes; you should go back and review how objects work in JavaScript unless that was just a typo. It should look like this.