I am building an application in JavaScript using ExtJS.
As I add more functions to it, I believe that I would like to encapsulate functionality in classes that inherit from each other. Based on C # and PHP, I find that the object-oriented paradigms in JavaScript are completely different and do not really see that it offers what I need for this.
So I'm working on the DailyJS Let Build a Framework tutorial, which seems to be a very structured way to turn JavaScript into a more object-oriented language with classes, inheritance, etc. From my point of view, this is what I need, but it’s embarrassing for me to build all this basic functionality myself on top of JavaScript in order to be able to use a language like PHP or C #, that is, to build a class hierarchy and then create objects with it.
For my task (reducing complexity with abstraction) an OOP infrastructure like this is created over Javascript - is it the right approach, or should I use JavaScript in a different way or maybe use a framework that already exists?
The following are examples of how this structure builds and inherits classes.
HTML:
<!DOCTYPE html> <html> <body> <meta http-equiv="Content-Type" content="text/html; charset: utf-8"> <script type="text/javascript" src="js/dp.core.js"></script> <script type="text/javascript" src="js/dp.oo.js"></script> <script type="text/javascript"> //core document.write('<p>' + dp.VERSION + '</p>'); //define and use class var Layout = dp.Class({ initialize: function(idCode, name) { this.idCode = idCode; this.name = name; }, showChildren: function() { return '(show children)'; }, toString: function() { return 'idCode=' + this.idCode + ', name=' + this.name; } }); var layout = new Layout('layout', 'Layout'); document.write('<p>' + layout.showChildren() + '</p>'); document.write('<p>' + layout + '</p>'); //define and use inheriting class var OrderApprovalLayout = dp.Class(Layout, { initialize: function() { this.$super('initialize', arguments); }, toString: function() { return 'OrderApprovalLayout: ' + this.$super('toString'); } }); var orderApprovalLayout = new OrderApprovalLayout('orderApprovalLayout', 'Order Approval Layout'); document.write('<p>' + orderApprovalLayout + '</p>'); </script> </body> </html>
JavaScript:
dp.Class = function() { return dp.oo.create.apply(this, arguments); } dp.oo = { create: function() { var methods = null, parent = undefined, klass = function() { this.$super = function(method, args) { return dp.oo.$super(this.$parent, this, method, args); }; this.initialize.apply(this, arguments); }; if (typeof arguments[0] === 'function') { parent = arguments[0]; methods = arguments[1]; } else { methods = arguments[0]; } if (typeof parent !== 'undefined') { dp.oo.extend(klass.prototype, parent.prototype); klass.prototype.$parent = parent.prototype; } dp.oo.mixin(klass, methods); dp.oo.extend(klass.prototype, methods); klass.prototype.constructor = klass; if (!klass.prototype.initialize) klass.prototype.initialize = function(){}; return klass; }, mixin: function(klass, methods) { if (typeof methods.include !== 'undefined') { if (typeof methods.include === 'function') { dp.oo.extend(klass.prototype, methods.include.prototype); } else { for (var i = 0; i < methods.include.length; i++) { dp.oo.extend(klass.prototype, methods.include[i].prototype); } } } }, extend: function(destination, source) { for (var property in source) destination[property] = source[property]; return destination; }, $super: function(parentClass, instance, method, args) { return parentClass[method].apply(instance, args); } };