[英]How to create common parent class in Javascript
I am trying to create Classes for Countries
, Regions
, Cities
to display Polygons
on Google Map. 我正在尝试为Countries
, Regions
, Cities
创建类,以在Google地图上显示Polygons
。
All the 3 Class will have almost the same methods. 所有3类将具有几乎相同的方法。 This means i have to copy all methods 3 times which is again the DRY
principle. 这意味着我必须将所有方法复制3次,这也是DRY
原理。
How may I extract a parent class from these child classes? 如何从这些子类中提取父类? A sample Country class looks like 一个示例Country类看起来像
/*
*
*
*
*/
function CountryPoly
{
/*
* Regular Expression Pattern to validate color values.
*/
this.colorPattern = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
/*
* Regular Expression Pattern to validate opacity values.
*/
this.opacityPattern = /^0\.[0-9]{1,2}$/;
/*
* Array containing the Child objects
*/
this.children = [];
/*
* default Polygon options.
*/
this.polyOptions = {
paths: [],
strokeColor: #FF0000,
strokeOpacity: 0.8,
strockWeight: 3,
fillColor: #FF0000,
fillOpacity: 0.35
}
}
CountryPoly.prototype = {
toString: function()
{
return "[object CountryPoly]";
},
setStrocColor: function(color)
{
if(color && this.colorPattern.test(color))
{
this.polyOptions.strokeColor = color;
}
},
setStrokeOpacity: function(opacity)
{
if(opacity && this.opacityPattern.test(opacity))
{
this.polyOptions.strokeOpacity = opacity;
}
},
setFillColor: function(color)
{
if(color && this.colorPattern.test(color))
{
this.polyOptions.fillColor = color;
}
},
setFillOpacity: function(opacity)
{
if(opacity && this.opacityPattern.test(opacity))
{
this.polyOptions.fillOpacity = opacity;
}
},
setStrockWeight: function(strockWeight)
{
if(strockWeight && !isNaN(parseInt(strockWeight)) && strockWeight < 5)
{
this.polyOptions.strockWeight = strockWeight;
}
},
setCoordinates: function(paths) {
// check if passed argument is Array.
if(paths.length) {
this.polyOptions.paths = paths;
}
}
getChildren: function() {
// Ajax Request to access child objects.
// this.children = Ajax Response
},
draw: function() {
//Draws the Polygon
}
}
You can use javascript's prototype
system which although isn't not classical OO via "Classes", it allows a similar behavior and is much more flexible. 您可以使用javascript的prototype
系统,尽管它不是通过“ Classes”进行的经典OO,但它具有类似的行为并且更加灵活。
var PolygonBase = function () {};
PolygonBase.prototype.colorPattern = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
PolygonBase.prototype..opacityPattern = /^0\.[0-9]{1,2}$/;
// ... etc ...
var Country = function () {};
Country.prototype = new PolygonBase();
Country.prototype.constructor = Country;
Take a look here: 在这里看看:
http://ejohn.org/blog/simple-javascript-inheritance/ http://ejohn.org/blog/simple-javascript-inheritance/
Example: 例:
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
},
dance: function(){
return this.dancing;
}
});
var Ninja = Person.extend({
init: function(){
this._super( false );
},
dance: function(){
// Call the inherited version of dance()
return this._super();
},
swingSword: function(){
return true;
}
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.