两个月后
也许你确实需要一个库,ES5代码非常冗长,所以我创建了pd
原始回答
我正在寻找Node.js的面向对象解决方案/库。
你不需要使用库。你有ES5。
JavaScript没有经典的面向对象编程(OOP),它具有原型式OOP。
这意味着你只有对象。你可以做的唯一事情就是扩展、操作和克隆它们。
操作
var o = {};
o.foo = "bar";
扩展
var o = someObject;
Object.defineProperties(o, {
"foo": { value: "foo" },
"bar": { value: "bar" }
"method": { value: function () { } }
}
克隆
var o = someObject;
var p = Object.create(o);
克隆和扩展
var o = someObject;
var p = Object.create(o, {
"foo": { value: "foo" },
"bar": { value: "bar" }
"method": { value: function () { } }
}
了解如何使用Object.create
、Object.defineProperty
和Object.defineProperties
非常重要。
克隆操作并不是真正的克隆。它是根据一个蓝图创建一个新对象。蓝图是一个对象,它被放置在 [[Prototype]]
中。 [[Prototype]]
存在于 .__proto__
属性中,我将在演示中使用它。
var o = {};
var p = Object.create(o);
p.__proto__ === o; // true
var q = Object.create(p);
q.__proto__.__proto__ === o;
var r = Object.create(q);
r.__proto__.__proto__.__proto__ === o;
声明:.__proto__
已经被弃用,请勿在代码中使用。但是它在调试和检查健康时有其用途。
这里的关键点是,在r
中从o
访问属性需要向原型链上走3层,这会导致性能问题。为了解决这个问题,你应该克隆特定的蓝图而不是随意地克隆对象(每个对象应该有一个蓝图)。
var Parent = (function _Parent() {
var self = Object.create({});
return self;
}());
var createParent = function _createParent(foo) {
return Object.create(Parent, {
foo: { value: foo }
});
}
var Child = (function _Child() {
var self = Object.create(Parent);
return self;
}());
var createChild = function _createChild(bar) {
return Object.create(Child, {
bar: { value: bar }
})
};
这里是我正在处理的一些代码片段,你可以将其用作示例:
var Sketchpad = (function _SketchPad() {
var self = Object.create({});
var mousemove = function _mousemove(e) {
this.drawLine(e);
};
self._init = function _init() {
this.$elem.bind({
"mousemove": mousemove.bind(this),
});
this.pens = {};
$("#clear").bind("click", this.clear.bind(this));
$("#undo").bind("click", (function _undoPath() {
this.pen.undo();
}).bind(this));
return this;
};
self.clear = function() {
this.paper.clear();
};
return self;
}());
createSketch = function _createSketchPad(id, w, h) {
var paper = Raphael(id, w, h);
var pen = createPen(paper);
var o = Object.create(Sketchpad, {
paper: { value: paper },
$elem: { value: $("#" + id) },
pen: {
get: function() { return pen; },
set: function(v) { pen = v; }
}
});
return o._init();
};