Last active
August 29, 2015 14:01
-
-
Save chrisslater/11557511 to your computer and use it in GitHub Desktop.
Extending an example BaseClass, using prototype, underscore and mixins.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Extending an example BaseClass, using prototype, underscore and mixins." /> | |
| <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> | |
| <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> | |
| <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> | |
| <script src="http://jashkenas.github.io/backbone/backbone-min.js"></script> | |
| <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Example mixin | |
| var ExtrasMixin = { | |
| getCollectionTotal: function(){ | |
| return this.collection.length; | |
| }, | |
| getCollection: function(){ | |
| return this.collection; | |
| } | |
| }; | |
| // Another example mixin | |
| var OthersMixin = { | |
| getRandomNumber: function(){ | |
| return Math.random(); | |
| } | |
| }; | |
| // An example BaseClass | |
| var Pagination = function(collection, noOfItemsInPage){ | |
| if (!collection) { | |
| throw "No collection"; | |
| } | |
| this.currentPage = 1; | |
| this.noOfItemsInPage = noOfItemsInPage || 10; | |
| this.collection = collection; | |
| }; | |
| // Extending BaseClass with custom functions and ExtrasMixin using Underscore.js | |
| _.extend(Pagination.prototype, { | |
| getNext: function(){ | |
| return this.currentPage + 1; | |
| } | |
| }, ExtrasMixin); | |
| // Extending BaseClass with a single method from OthersMixin | |
| Pagination.prototype.getRandomNumber = OthersMixin.getRandomNumber; | |
| // An example of creating a functional mixin using the Functional pattern | |
| var DraggableMixin = function(config){ | |
| this.startDrag = function(){}; | |
| this.onDrag = function(){}; | |
| this.returnConfig = function(){ | |
| return config; | |
| }; | |
| return this; | |
| }; | |
| // DraggableMixin method is called passing the config object | |
| DraggableMixin.call(Pagination.prototype, {foo: 'bar'}); | |
| var pagination = new Pagination([1,2,3,4,5]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment