Suppose there is such a code:

draw.cube().color('white').size(100).rotate(50).scale(2); draw.circle().color('white').size(100).rotate(50).scale(2); draw.rect().color('white').size(100).rotate(50).scale(2);

I want to mark that it is not jQuery. As you notice .color('white').size(100).rotate(50).scale(2); in every line repeated.
Question: how to reduce the code to something like this:

 draw.cube().setParams(); draw.circle().setParams(); draw.rect().setParams(); function setParams = ... ?
  • I want to mark that it is not jQuery - but it was worth marking. What kind of objects are these ? - Grundy

3 answers 3

Did you mean chaining?

 var Geometry = function(type) { this._type = type; this._color = 'transparent'; this._size = 1; this._rotation = 0; this._scale = 1; }; Geometry.prototype = { constructor: Geometry, setColor: function(color) { this._color = color; return this; }, setSize: function(size) { this._size = size; return this; }, setRotation: function(rotation) { this._rotation = rotation; return this; }, setScale: function(scale) { this._scale = scale; return this; }, setParams: function(settingObject) { this.setColor(settingObject.color); this.setSize(settingObject.size); this.setRotation(settingObject.rotation); this.setScale(settingObject.scale); return this; }, toString: function() { return 'This is ' + this._type + ': color=' + this._color + ' size=' + this._size + ' rotation=' + this._rotation + ' scale=' + this._scale; } } var Draw = function() {}; Draw.prototype = { constructor: Draw, cube: function() { return new Geometry('cube') }, circle: function() { return new Geometry('circle') }, rect: function() { return new Geometry('rect') } } var draw = new Draw(); var cube1 = draw.cube().setColor('red').setRotation('20deg').setSize(2).setScale(0.25); var cube2 = draw.cube().setParams({ color: 'red', rotation: '20deg', size: 2, scale: 0.25 }); console.log(cube1.toString()); console.log(cube2.toString());

Or an additional method to simplify property assignment

 var setParams = function(geometry, settingObject) { geometry .setColor(settingObject.color) .setSize(settingObject.size) .setRotation(settingObject.rotation) .setScale(settingObject.scale); }; var Geometry = function(type) { this._type = type; this._color = 'transparent'; this._size = 1; this._rotation = 0; this._scale = 1; }; Geometry.prototype = { constructor: Geometry, setColor: function(color) { this._color = color; return this; }, setSize: function(size) { this._size = size; return this; }, setRotation: function(rotation) { this._rotation = rotation; return this; }, setScale: function(scale) { this._scale = scale; return this; }, toString: function() { return 'This is ' + this._type + ': color=' + this._color + ' size=' + this._size + ' rotation=' + this._rotation + ' scale=' + this._scale; } } var Draw = function() {}; Draw.prototype = { constructor: Draw, cube: function() { return new Geometry('cube') }, circle: function() { return new Geometry('circle') }, rect: function() { return new Geometry('rect') } } var draw = new Draw(); var cube1 = draw.cube().setColor('red').setRotation('20deg').setSize(2).setScale(0.25); var cube2 = draw.cube(); setParams(cube2, { color: 'red', rotation: '20deg', size: 2, scale: 0.25 }); console.log(cube1.toString()); console.log(cube2.toString());

Or add a method to the prototype

 Geometry.prototype.setParams = function(settingObject) { this.setColor(settingObject.color) .setSize(settingObject.size) .setRotation(settingObject.rotation) .setScale(settingObject.scale); return this; };

Or inherit a class and extend its functionality.

 var GeometryExt = function() { Geometry.apply(this, arguments); }; GeometryExt.prototype = Object.create(Geometry.prototype); GeometryExt.prototype.setParams = function(settingObject) { this.setColor(settingObject.color) .setSize(settingObject.size) .setRotation(settingObject.rotation) .setScale(settingObject.scale); return this; }; var cubeExt = new GeometryExt('Mega-cube'); cubeExt.setParams({ color: 'red', rotation: '20deg', size: 2, scale: 0.25 });
  • It would be appropriate for me to add a method to the prototype, but I tried to do this even before contacting the forum. The situation is this: I have a ready-made class that I take from a file. draw = SVG('drawing') But before that I try to extend this class: SVG.prototype.colorIt = function(){ ... return this; } SVG.prototype.colorIt = function(){ ... return this; } As a result, when I call draw.rect().colorIt() I get colorIt' is undefined - igolka97
  • one
    @ igolka97 is correct - because you added the draw.colorIt method, not draw.rect().colorIt . You need a monkey patch for the class responsible for one figure, not the whole SVG. Just keep in mind: monkey patch leads to problems . - Pavel Mayorov
  • @PavelMayorov and how to patch all the figures at once? - igolka97
  • @ igolka97 most likely, they should have a base class, it remains only to find it. - Pavel Mayorov
  • @PavelMayorov but I’ll find it right now. Just can not imagine how the code will look when I find the base class. - igolka97

I'll try and I make 5 cents

 let elements = []; elements.push(draw.cube()); elements.push(draw.circle()); elements.push(draw.rect()); element.forEach((element) => { element.color('white').size(100).rotate(50).scale(2); })

    Everything is much simpler. You need to write a function and transfer objects to it.

     function setParams(shape){ shape.color('white').size(100).rotate(50).scale(2); } // затем вызваем так setParams(draw.cube()); setParams(draw.circle()); setParams(draw.rect());

    • It would have come up, but I need to call the function by referring to the newly created methods of the class, and not use the functional view. - igolka97
    • @ igolka97 And where does this strange demand come from? - Pavel Mayorov
    • @PavelMayorov oh, I, too, Mayorov: D And here, it will be necessary to refactor the already existing code too much. If nothing happens, then it is better to leave everything as it is with a ton of lines: P - igolka97