Is it possible to give javascript partial class behavior like C# or monkey patching like Ruby does?

Question

The idea behind partial classes is that you can group certain functions together. The best example of this in C# is putting control definitions in one file and the event handlers in another. In Ruby, you can use Monkey patching to replace entire functions etc to get code to do something you want it to.

I haven't found a reason to do this yet, but I figure as web improves, more of an application is going to be on the client side so I'm wondering if some of the great features I find in server-side languages, I can also use in Javascript.

Does anyone know?

https://stackoverflow.com/a/62142995/1599699 – Andrew Feb 05 '23 at 00:20 — Andrew, Feb 05 '23 at 00:20

score 7 · Answer 1 · answered May 14 '11 at 00:07

// file 1

function augment() {
    this.monkey = "monkey";
}

// file 2

function augmentMore() {
    this.patch = "patch";
}

// file 3

var o = {};
augment.call(o);
augmentMore.call(o);
console.log(o.monkey + o.patch);

Monkey patching works. partial classes can work by convention. For example consider this convention.

// file main
function SomeObject() {
    for (var i = 0, ii = SomeObject.Partial.length; i < ii; i++) {
         SomeObject.Partial[i].apply(this, arguments);
    }
}

SomeObject.Partial.SomeName = function() {
   ...
}

// file extra
SomeObject.Partial.SomeOtherName = function() {
   ...
}

JavaScript is surprisingly powerful. Was there a specific example you were looking for?

Really like that second example. Exactly what I needed. – CarbonMan Nov 05 '14 at 11:08 — CarbonMan, Nov 05 '14 at 11:08

score 4 · Answer 2 · answered May 14 '11 at 00:12

If such a split makes real sense then you can do this:

File #1

function MyObjectType() { this.init(); }

File #2

MyObjectType.prototype.init = function() { this.one = 1; }

File #3

MyObjectType.prototype.onClick = function() { if(this.one == 1) alert("I am so alone..."); }

And somewhere else you can use it as:

var myObject = new MyObjectType();
myObject.onClick();

Welcome to prototype yet kinda functional programming world!

score 4 · Answer 3 · answered Feb 16 '12 at 18:21

I'm expanding upon Raynos' partial classes example. The following is tested and works:

//  In Car.js
function Car(domelement, wheels, engine, color) {
    this.domelem = domelement;

    //  Wire in partial classes from other files
    for(var i = 0, ii = Car.Partial.length; i < ii; i++) {
         Car.Partial[i].apply(this, arguments);
    }
}
Car.Partial = [];  //  Prepare for declaration of additional partial classes

//  In Car.Events.js
Car.Partial[0] = function Events() {
    //  Create some events on Car with jQuery
    $(this.domelem).click(function() { alert('Car clicked.'); });
}

You can then use a build tool to combine the files into a single script, or you can simply reference the files in order:

<script src="Car.js"></script>
<script src="Car.Events.js"></script>
<script>
    //  Turn first paragraph into our Car object
    var myCar = new Car($('p').get(0));
</script>

score 2 · Answer 4 · edited Aug 09 '19 at 01:30

Here is one approach using ES6 and compatible with ES5 using Babel:

In this example I create a MyClass in several files, using three files:

index.js (this is important so you can import the class just via the folder name)

symbols.js (this contains the symbols for private members)

additionalMethods.js (a file that is later attached to the class prototype)

index.js content

import symbols from "./symbols";

export default class MyClass {
  [symbols.existentPrivateMethod]() {
    return "this is the result";
  }
}

import additionalMethod, {anotherAdditionalMethod, additionalPrivateMethod} from "./additionalMethods";
const additionalMethodsObject = {
  additionalMethod: additionalMethod,
  anotherAdditionalMethod: anotherAdditionalMethod
};
additionalMethodsObject[symbols.additionalPrivateMethod] = additionalPrivateMethod;

Object.assign(MyClass.prototype, additionalMethodsObject);

additionalMethods.js contents

import symbols from "./symbols";

export default function additionalMethod() {
  return this[symbols.existentPrivateMethod]();
}

export function anotherAdditionalMethod() {
  return this[symbols.additionalPrivateMethod]();
}

export function additionalPrivateMethod() {
  return "yet another result";
}

symbols.js content

const symbols = {
  existentPrivateMethod: Symbol("myPrivateMethod"),
  additionalPrivateMethod: Symbol("additionalPrivateMethod")
};

export default symbols;

Complete project https://github.com/nicosommi/partialClass

Complete explanation https://nicosommi.com/2015/08/10/partial-class-approach-for-es6/

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

Redefine the type through inheritance approach like this:

var Dog = Class.extend({
    init:function(data){
         data = data || {};
         this.name = data.name;
    },
    run:function(){ 
        /*impl*/
    }
});

/*other js file that require first file */
var Dog = Dog.extend({
   init:function(data){ 
       this._super(data); 
   },
   bark:function(){ 
       return 'woof';
   }
});

The only problem in this approach is the dependency management, but it works.

obs: using John Resing class.js, but could be written in typescript, ES6, AngularJs, ... and many other libraries.

Is it possible to give javascript partial class behavior like C# or monkey patching like Ruby does?

5 Answers5

Linked