ded / klass Goto Github PK

Hi, I was wondering if anybody has developed a code mod to port klass classes to es2015 classes.

AFAICT, the semantic of klass matches the one of es2015 classes. So writing such a code mod shouldn't be too hard (with potential corner cases).
It would be nice to have an automated way to move code to new standard.

In the code below I expect the instance variable to have a "someMethod" method. Am I doing something wrong? Thanks

var BaseKlass = klass(function() {}).methods({  
    someMethod: function() {}
});

var SubKlass = BaseKlass.extend(function() {});

var instance = new SubKlass();

Please have a look in here https://github.com/dotnetwise/Javascript-FastClass
The performance tests are the first links at the top

why is there no closing semicolon at the end of the klass.min.js?
When merging (using grunt) with other js files it causes errors.

Consider this constructor:

'Thing': klass(
function (name, fixed) {
Object.defineProperty(this,
'CONST',
{
value: fixed,
writable: false,
enumerable: false,
configurable: false
});
this.gname = name;
}).methods({
'instMethod': function (param) {
return this.CONST + ' ' + this.gname + ' ' + param;
}
}),

Would be cool if you could
.constants({
'CONST': fixed
})

Either within the constructor ( to set the constant differently per instance ) or in the same place as the .methods() call to set constant values across all instances.

This is a feature request not a bug. It would be great to have klass on bower.

Currently, Klass.js wraps subclass methods by using function decompilation to detect a call to this.supr() and. This not only incurs a performance overhead, but exposes a leaky abstraction if the subclass method throws an exception. Consider the following example:

var Person = klass(function(name) {
  this.name = name;
}).methods({
  'walk': function() {
    console.log('Walking...');
  }
});

var SuperHuman = Person.extend(function(name) {
  // ...
}).methods({
  'supr': function() {
    console.log('Exposed method.');
  },
  'walk': function() {
    this.supr();
    console.log('Flying...');
  }
});

var kit = new SuperHuman('Kit');
kit.walk();

// => Walking...
// => Flying...

kit.supr();
// => Exposed method.

SuperHuman.implement({
  'walk': function() {
    this.supr();
    throw new Error('Exception.');
  }
});

kit.walk();
// => Error: Exception.

kit.supr;
// => Oops; `kit.supr` now references `Person#walk`.

kit.supr();
// => Walking...

In other words, if the subclassed method throws an exception, the original value of the supr method is not restored. A possible solution would be to wrap the execution of the method in a try...catch block; however, this will result in additional detrimental effects to performance. Alternatively, we could remove wrapping entirely, and simply provide a reference to the original superclass method as a property on the subclassed method. Incidentally, this technique was previously outlined in an article by T.J. Crowder. I think it's more robust, both in terms of performance and mitigating leaky abstractions, than the wrapping technique that Klass.js currently uses. We've also adopted T.J.'s technique in FuseJS, in place of Prototype's more convoluted inheritance scheme.

I would be happy to submit a pull request for this if you'd like, or even provide additional examples, but I'm interested in knowing if you think this is a good idea or not first.

How to use klass with event.Emitter

Given a super class:

var View = klass(function(templateId, containerId) {
    this.templateId = templateId;
    this.containerId = containerId;
});

I can't find a way to set the values of templateId and containerId from within a subclass constructor and be able to use them from the superclass constructor:

var MenuView = View.extend(function() {
    this.supr('val1', 'val2'); // doesn't work, no supr available
});

var MenuView = View.extend(function() {
    this.templateId = 'val1'; // properly sets values, but not until after the superclass constructor executes
    this.containerId = 'val2';
});

Instead of being able to do initialization logic inside of View's constructor, I have to wait until after MenuView is instantiated, and then manually call my own initialize method after the constructor chain executes.

I'm missing something about access "statics" parameteres.

I came across the following scenario this evening,

var MyTest1 = klass({
    initialize: function() {
        console.log('MyTest1 Constructor');
    }
});

var MyTest1Child = MyTest1.extend({});

var MyTest2 = klass({});

var instance = new MyTest2();

In the example above, the constructor on MyTest1 is being executed when instantiating MyTest2.

I would not expect this as MyTest2 doesn't have a constructor, nor does it extend anything.

This appears to happen to all subsequent objects declared after the first .extend() is made, and the constructor called is the constructor of the object being extended.

Note, this does not happen if declare a constructor on the extended object.

I was looking at how the mixin code works. In the test case paraphrased below, If I wanted to implement a mixin where I called the Sub-class's thing before the implemented thing, how do you do that? Calling this.thing directly will just give an infinite loop.

test('should implement a wrapper method for mixins', 5, function () {
...
inst.implement({
thing: function (n) {
console.log('Implement#thing()');
ok(true, 'called implementer');
//this.supr(); would be called by subclass' thing, if we could
this.thing(); // WARNING infinite loop. want to call the Sub's thing, not the base thing
// this.myself(); would be a good expression for that
this.boooshr();
},
boooshr: function () {
console.log('Implement#boooshr()');
ok(true, 'called boooshr');
}
}).thing();

Would it be possible to insert a semi-colon right at the end of the script? I'm using juicer (https://github.com/cjohansen/juicer) for compilation (merging) and without this I'm experiencing an error ("...return this;};context.klass = klass;return klass;}) is not a function").

PhotoSwipe use your library (see download version 3.0.5). I think the used version of your library is a snapshot and not a tagged version.

I add PhotoSwipe to the CdnJS. But the released klass version (1.0) is not combatible with the used verion in PhotoSwipe. A tagged version is a condition to add the CdnJS.

Could you check the used version in PhotoSwipe and provide a tag. I will be add the new release to CdnJS.

Many thanks.

Links
PhotoSwipe: http://www.photoswipe.com/
PhotoSwipe Download: http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip
CdnJS: http://cdnjs.com and https://github.com/cdnjs/cdnjs

Within the closure loop you need to maintain a reference to any old vaue of the .supr property. See John Resigs simple inheritance.

Test case:

var A = klass({
    first: function(){
        return "first";
    },
    second: function(){
        return "second";
    }
}), B=A.extend(function(){}).methods({
    first: function(){
        this.second();
        return this.supr();
    },
    second: function(){
        return this.supr();
    }
});

console.log( new A().second()); // "second"
console.log( new A().first()); // "first"
console.log( new B().second()); // "second"
console.log( new B().first()); // "second", should be "first"

mfg Kambfhase

The 5th edition of ECMAScript (ES5) forbids use of arguments.callee() in strict mode.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee

This test case will show green even when it fails:
Commenting out the Baz initialize function shows a test pass.
You need to change ok(false,...) in both Foo and Bar's initialize function to have an actual test.

test('object literal with initialize shouldn't bubble constructor', 1, function () {
var Foo = $k({
initialize: function() {
ok(true, 'object literal with initialize shouldn't bubble constructor');
}
});

var Bar = Foo.extend({
  initialize: function() {
    ok(true, 'object literal with initialize shouldn\'t bubble constructor');
  }
});

var Baz = Bar.extend({
  initialize: function() {
    ok(true, 'object literal with initialize shouldn\'t bubble constructor');
  }
});

//should only fire Baz's init
var baz = new Baz();

})

Hi there,

we just noticed that klass will leak a global 'supr' value when you call a supr-using method without a this-context.

What happens, is that the wrapper will assign this.supr to the correct super method - but of course this is now the windows (or global) object.

I'm actually not entirely sure how this should be fixed, what we came up with was to either raise if this === window or just remove this.supr after the super call has taken place if the supr key wasn't not the object before the call.

Interestingly this.supr(...) actually works, even when the wrong this context is used for a method. (Which is actually quite surprising)

Asserting that this cannot be the global object supr() using code seems to make most sense here.

What do you think?

Package JSON specifies 1.4.0 but there is only a tag for 1.3.1.

If you could add a license to the project, that would be great.

Hi,

I currently use Object.subclass() to write "class" based JS. I was recommended klass today and decided to check it out. I like it, especially the cleaner API, and the fact it's Node compliant.

I have a small issue though. Take the following,

var Object1 = klass({
    initialize: function() {
        console.log('Init 1');
    }
});

var Object2 = Object1.extend({
    initialize: function() {
        console.log('Init 2');
    }
});

var Object3 = Object2.extend({
    initialize: function() {
        console.log('Init 3');
    }
});

var myObject = new Object3();

The following is outputted,

Init 3
Init 3
Init 3

There are a few problems with this,

1. I noticed your docs state "super class is automagically called" when extending and overriding the constructor. I think this should be more consistent with a non-constructor method where the super is only called if you explicitly state it should be using this.supr(), as with any other language OOP model.
2. Regardless of point 1, I would expect each initialize() to execute in order, not the last most defined being excuted N times, where N is the number of extentions.

I would personally prefer point 1 to be implemented. Without it, I can't move to klass, and it just seems to make sense if you're implementing a Class model.

Thanks.

As soon as Google Chrome comes across the Klass file, it just spits out the error "TypeError: undefined is not a function." It's also not working in Internet Explorer.

Hi there,

if a method throws an exception, then the code that resets the supr property does not get executed and therefore the this.supr poperty is out of sync. Consider a situation like this:

var Super = klass({
throwing: function() { throw new Exception(); },
catching: function() {}
};
var Sub = Super.extend({
throwing: function() { this.supr() },
catching: function() {
try {
this.throwing()
} catch() {
this.supr()
}
}
}

Here the supr() call in catching will actually call throwing again.

Just using your example,

var klass = require("klass")

var Person = klass(function (name) {
  this.name = name
})
  .statics({
    head: ':)',
    feet: '_|_'
  })
  .methods({
    walk: function () {}
  })

  var SuperHuman = Person.extend(function (name) {
  // super class is automagically called
  })
    .methods({
      walk: function() {
        this.supr()
        this.fly()
      },

      fly: function() {}

    })

new SuperHuman('Zelda').walk()

console.log(Person.head);
console.log(SuperHuman.head);

outputs:
:)
undefined

Is this by design?