-2

I'm coming from a classical oop background and trying to grasp the new js modular systems. Anyway I'll still need classical things like private and public methods and variables, inheritance, overloading with superior module call and class initialization (like a classical constructor or something). So with the help of SO community, I made this Module Pattern example:

var MODULE = (function(self) {
   ...
})(SUPER_MODULE)

complete example: http://jsfiddle.net/ehe122e0/10/

so now I'm trying to grasp AMD and CommonJS modules. Can someone translate that example (I mean the complete jsfiddle example) to AMD and/or CommonJS ? It would be really helpful.

Any working example of the features I mentioned above using these formats is helpful.

Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73
  • Seems more like two questions, You a'e asking about classical classes, which would be the same regardless of how its exposed, e.g global, commonjs, amd, system. Then at the same time you're asking about OO and module systems, which makes it all ambiguous. Could you rephrase this to be an actual clear, answerable question? Don't want to flag it since you put a bounty on it, but it's really vague at the moment. – Casper Beyer Feb 23 '15 at 13:37
  • Done. Do you think it's better now ? if it's still not ok. Could you please make an edit proposal so I can see what you mean ? :) thanks for you help – Nelson Teixeira Feb 23 '15 at 13:50
  • 1
    Alright thats better, I'll follow up with an answer later. – Casper Beyer Feb 23 '15 at 14:01
  • common js is simply your module with the "global" _module_'s _exports_ property set to what you call _self_. – dandavis Feb 26 '15 at 19:15

2 Answers2

1

All i can say is read, read, read and then read some more. Here's a good start:

"Writing Modular Javascript" by Addy Osmani: http://addyosmani.com/writing-modular-js/

"AMD The Definite Source" by Kris Zyp: http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/

"Why AMD" on RequireJS: http://requirejs.org/docs/whyamd.html

And there's much much more but you'll come across it on your path to modularity, good luck :)

iH8
  • 27,722
  • 4
  • 67
  • 76
-2

If you only code your javascript on the client side (browser) you won't be able to use common js. So amd is the way to go! You will need amdefine and requirejs to fulfill that goal.

However, if you also use javascript on the server side with node.js, you will face some common js. In this case, I would suggest you to use a real javascript OOP framework able to load both common js and amd modules (in order to use your classes on the client side and on the server side). You can try Danf for example (it will abstract this complexity for you).

Note that the pattern you gave in the jsfiddle for your classes is not a really good pattern. Just one reason is you duplicate the methods of your classes for each instance (bad for your memory). Try to use the power of the prototype instead!

Gnucki
  • 5,043
  • 2
  • 29
  • 44
  • Actually I had an "earlier version" than this example. This one: http://jsfiddle.net/vqqrf2cb/24/ but I find the methods are also duplicated and this is a more "verbous" way of doing things. I'll try to enhance it later. Can you give me some idea on how I could change it to use prototype ? – Nelson Teixeira Feb 24 '15 at 16:39
  • 2
    I just did it for your last class Operations, here is the jsfiddle http://jsfiddle.net/vqqrf2cb/28/ . However, you're right, you certainly should use amd modules to separate the implementation of your classes in different files. This would result in a better and cleaner code. – Gnucki Feb 24 '15 at 17:15
  • Well I think I understand what you're saying. Using this call/prototype scheme, the modules/objects wouldn't repeat the function in the lower classes. But I think the better would try to do this in the Modular Pattern example don't you think ? someone told me here on SO, that this Object.create thing is an "old way" of doing things and the Modular Pattern and the AMD is a better way. So I think the best way would be AMD with call/prototype ? is that it ? – Nelson Teixeira Feb 24 '15 at 19:44
  • Actually I already done some tests using AMD. Here: http://jsfiddle.net/4L276f89/9/. In my machine the modules are file separated. I had to do this way to adapt to JSFiddle. If I convert this to using prototype, would you think we can consider it the "best way" to do it ? – Nelson Teixeira Feb 24 '15 at 19:45
  • You can do both of course. This is how it is done in the framework I told you in my answer. You can take a look at the file [lib/utils.js at the function extend](https://github.com/gnodi/danf/blob/master/lib/utils.js). Then, at a random file using this extend function like [lib/ajax-app/ready-processor/links.js](https://github.com/gnodi/danf/blob/master/lib/ajax-app/ready-processor/links.js). AMD and prototypal inheritance do different things. One cannot replace the other. AMD is mainly about loading dependencies in a logical and asynchrone way not about any OOP inheritance. – Gnucki Feb 24 '15 at 20:09
  • I see. Just one last thing I didn't understand: you advise me to use prototypal inheritance, yet in the functions you pointed me to, the properties are copied. Isn't this the method replication you were advising me against ? Why not using jquery's extend method instead of this then ? – Nelson Teixeira Feb 24 '15 at 20:34
  • I think the job of jquery is to manipulate the dom not to do that kind of thing.What you call "properties" are specific to each instance because their values are different (not the case of methods). Like for any other OOP language in fact. However, I understand your question and you can make a parallel with [C# fields and properties](http://stackoverflow.com/questions/295104/what-is-the-difference-between-a-field-and-a-property-in-c). It is a good practice to use [properties in javascript](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) too! – Gnucki Feb 25 '15 at 09:33