Last active
January 12, 2025 07:50
-
-
Save crizstian/ba39c6fdbb30a40c738e3c07ea83b5c1 to your computer and use it in GitHub Desktop.
Code examples of SOLID principles for JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Code examples from the article: S.O.L.I.D The first 5 priciples of Object Oriented Design with JavaScript | |
| https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa#.7uj4n7rsa | |
| */ | |
| const shapeInterface = (state) => ({ | |
| type: 'shapeInterface', | |
| area: () => state.area(state) | |
| }) | |
| const solidShapeInterface = (state) => ({ | |
| type: 'solidShapeInterface', | |
| volume: () => state.volume(state) | |
| }) | |
| const manageShapeInterface = (fn) => ({ | |
| type: 'manageShapeInterface', | |
| calculate: () => fn() | |
| }) | |
| const square = (length) => { | |
| const proto = { | |
| length, | |
| type : 'Square', | |
| area : (args) => Math.pow(args.length, 2) | |
| } | |
| const basics = shapeInterface(proto) | |
| const abstraccion = manageShapeInterface(() => basics.area()) | |
| const composite = Object.assign({}, basics, abstraccion) | |
| return Object.assign(Object.create(composite), {length}) | |
| } | |
| const circle = (radius) => { | |
| const proto = { | |
| radius, | |
| type: 'Circle', | |
| area: (args) => Math.PI * Math.pow(args.radius, 2) | |
| } | |
| const basics = shapeInterface(proto) | |
| const abstraccion = manageShapeInterface(() => basics.area()) | |
| const composite = Object.assign({}, basics, abstraccion) | |
| return Object.assign(Object.create(composite), {radius}) | |
| } | |
| const cubo = (length) => { | |
| const proto = { | |
| length, | |
| type : 'Cubo', | |
| area : (args) => Math.pow(args.length, 2), | |
| volume : (args) => Math.pow(args.length, 3) | |
| } | |
| const basics = shapeInterface(proto) | |
| const complex = solidShapeInterface(proto) | |
| const abstraccion = manageShapeInterface(() => basics.area() + complex.volume()) | |
| const composite = Object.assign({}, basics, abstraccion) | |
| return Object.assign(Object.create(composite), {length}) | |
| } | |
| const areaCalculator = (s) => { | |
| const proto = { | |
| type: 'areaCalculator', | |
| sum() { | |
| const area = [] | |
| for (shape of this.shapes) { | |
| area.push(shape.calculate()) | |
| } | |
| return area.reduce((v, c) => c += v, 0) | |
| } | |
| } | |
| return Object.assign(Object.create(proto), {shapes: s}) | |
| } | |
| const volumeCalculator = (s) => { | |
| const proto = { | |
| type: 'volumeCalculator' | |
| } | |
| const areaCalProto = Object.getPrototypeOf(areaCalculator()) | |
| const inherit = Object.assign({}, areaCalProto, proto) | |
| return Object.assign(Object.create(inherit), {shapes: s}) | |
| } | |
| const sumCalculatorOputter = (a) => { | |
| const proto = { | |
| JSON() { | |
| return JSON.stringify(this.calculator.sum()) | |
| }, | |
| HAML() { | |
| return `HAML format output` | |
| }, | |
| HTML() { | |
| return ` | |
| <h1> | |
| Sum of the areas of provided shapes: | |
| ${this.calculator.sum()} | |
| </h1>` | |
| }, | |
| JADE() { | |
| return `JADE format output` | |
| } | |
| } | |
| return Object.assign(Object.create(proto), {calculator: a}) | |
| } | |
| const shapes = [ | |
| circle(2), | |
| square(5), | |
| square(6) | |
| ] | |
| const solids = [ | |
| cubo(4) | |
| ] | |
| const areas = areaCalculator(shapes) | |
| const volume = volumeCalculator(solids) | |
| const output = sumCalculatorOputter(areas) | |
| const output2 = sumCalculatorOputter(volume) | |
| console.log(output.JSON()) | |
| console.log(output.HAML()) | |
| console.log(output.HTML()) | |
| console.log(output2.HTML()) | |
| console.log(output.JADE()) | |
Great article Cristian ^, this article made me believe that I can code solutions to problem one day myself. Thanks for providing the code as a separate gist.
Thanks for share the article, I feel that applying solid in javascript does not have the same effect as in a poo language, the use of the object.assign does not convince m at all I would have expected to see "class". I think that the best way in js to make a robust and solid code is to aim at functional programming.
Great article!
Hi @crizstian This is kind of a silly question, probably and You most likely already touched on this in the article, but how would you handle multiple interfaces similar to the example found here for c#
If you don't mind clarifying this that would be great. Thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great article! I was just experimenting with
Object.freezeand noticed that this setup would not work withObject.freeze. However, freeze is new to me and I wonder if freeze would make sense in a factory pattern? Do you have an opinion about that, @crizstian? Thanks!