Skip to main content

Coffeescript/Javascript Mixins - Idiot Seeking Explanation


I preface this by saying my Javascript experience is very weak. Lots of jQuery, very little real comprehension. I have read numerous books on javascript and, while I am not a poor programmer, the prototypal nature of Javascript just does not click with my brain.



I have been reading up on Mixins using Coffeescript or just plain Javascript from the following sources ...



http://arcturo.github.com/library/coffeescript/03_classes.html (near the bottom)



and



http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/



And while I am able to compile the various examples, I have a major question that seems to be preventing me from making progress in comprehending them.



I have no idea what in the world is going on ...



To start, I will explain the coffeescript that is confusing me...




moduleKeywords = ['extended', 'included']

class Module
@extend: (obj) ->
for key, value of obj when key not in moduleKeywords
@[key] = value

obj.extended?.apply(@)
this

@include: (obj) ->
for key, value of obj when key not in moduleKeywords
# Assign properties to the prototype
@::[key] = value

obj.included?.apply(@)
this



A number of questions come up here.



1. First of all, what are we accomplishing with the moduleKeywords variable? I'm not understanding what that is even doing.



2. Secondly, what is up with the extended?.apply(@) ? What is really going on here? I can look at the javascript compilation and see the following code ..




Module.extend = function(obj) {
var key, value, _ref;
for (key in obj) {
value = obj[key];
if (__indexOf.call(moduleKeywords, key) < 0) {
this[key] = value;
}
}
if ((_ref = obj.extended) != null) {
_ref.apply(this);
}
return this;
};



Say what? Can anyone shed some general light on this?



From deeper down in The Little Book on Coffeescript , I see an implementation.




ORM =
find: (id) ->
create: (attrs) ->
extended: ->
@include
save: ->

class User extends Module
@extend ORM



Here is how I read this ...



  • create literal ORM .

  • Declare method find accepting a parameter.

  • Declare method 'create' accepting a parameter.

  • Declare method 'extended', with sub-method 'include', with sub-method 'save'.



This is where I get the most lost.



The literal ORM has a method, extended , and then Module is implemented/extended by the 'class' User . So I take this to mean that User has the same shape as Module . That part makes sense so far, simplistic inheritance. But then I get lost on @extend ORM .



@extend is a method on Module , but what is the extended method doing? When is it called? How is it implemented?



Can anyone assist me in clearing some of this up?


Source: Tips4allCCNA FINAL EXAM

Comments

  1. extend copies the methods from the "module" object onto the object being extended
    include copies the methods from the "module" object onto the prototype of the object being extended


    1 The moduleKeywords is used to protect some methods of the module, so the are not copied to object, because they have special meaning

    2 The extended?.apply(@) says that if the module has a property named extended than assume it's a function and then call this function having the "this" in the function equal to @, @ being the extended object, you can think of it as saying something like (although not quite, but it's just an intuition) @.extended() (@ == this in coffeescript)

    "apply" function in JS
    the existential operator in CS

    ReplyDelete
  2. You are confused by meaning and use for extended and included Module keywords. But it is explained in book that those are used as callbacks after extending and including.

    So in final example ORM has "extended" callback. The "extend" function will on end call "extended" and pass it @ (or this or in our example User) so @(this.)include will also run on User and it will include function "save".

    You could also do the reverse:

    ORM =
    save ->
    included: ->
    @extend
    find: (id) ->
    create: (attrs) ->

    class User extends Module
    @include ORM

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex