Javascript Create Dynamic Object Class

Question

JS TOOLS

Angular 1.5.x & lodash 4.x

QUESTION

I’m trying to create an object factory pattern that creates object / classes . In my example below I’m create object models for content types e.g. Article, Document, Images, etc. Given my skill limitations I’m replicating the Article example below for every content type. Is there a way in JavaScript to create a dynamic object class with a unique prototype.

CURRENT APPROACH

 // constructor injection
_Constructor.$inject = [];
function _Constructor() {
    function __constructor(data, keys) {
        _.assign(this, _.pick(data, keys));
    }
    return __constructor;
}

// one of many content type models
Article.$inject = ['__constructor'];
function Article(__constructor) {
    function Article(data) {
        var fillables = Object.freeze(['id','title','subtitle','body','body']);
        __constructor.call(this, data, fillables);
    }

    Article.prototype = Object.create(__constructor.prototype);
    Article.prototype.constructor = Article;
    return Article;
}

IDEAL OUTCOME

Create a content type model factory pattern that allows me to create unique content type object models. Pseudo example:

var documentFillables =  Object.freeze(['id', 'name', 'body']),
    documentData = {id:1,name:'My Document', body: 'coolbody stuff'},
    Document = new ModelFactory('Document', documentData, documentFillables),
    articleFillables =  Object.freeze(['id', 'title', 'subtitle']),
    articleData = {id:1,title:'My Article', subtitle: 'My Subtitle'},
    Article = new ModelFactory('Article', articleData, articleFillables);

Note I've played around with merge, extend and clone and although I can replicate and extend objects I end up with a fair amount of code redundancy and/or generic objects i.e. have many ModelFactory() but no Article().

AWolf · Accepted Answer · 2016-06-23 20:40:58Z

You could create a service (a factory that is returning a constructor function) that is common to all of your document types.

Inside of that function you can use angular.extend to extend the default values with your passed data.

Also take care to the naming e.g. don't use document to avoid naming conflicts with the browsers document object. That's why I named it myDocument.

To create extended factories you can use dependency injection in the factory function and extend the base (see code for imageService as an example).

Please have a look at the demo below or in this jsfiddle.

angular.module('demoApp', [])
  .factory('content', ContentService)
  .factory('article', ContentService)
  .factory('myDocument', ContentService)
  .factory('myImage', imageService)
  .controller('mainController', MainController);

function MainController(article, myDocument, myImage) {
  console.log(new article({
    title: 'Test'
  }));
  console.log(new myDocument({
    title: 'second'
  }));
  console.log(new myImage({
    title: 'image'
  }));
  var newImage = new myImage({
    title: 'placeholder img',
    src: 'https://placehold.it/300'
  });
  console.log(newImage);

  this.newImage = newImage;
}

function generateUUID() {
  var d = new Date().getTime();
  if (window.performance && typeof window.performance.now === "function") {
    d += performance.now(); //use high-precision timer if available
  }
  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
}

/*
// base not really needed, just as example
function base(options) {
	angular.extend(this, {
        id: generateUUID(),
        title: '',
        subtitle: '',
        body: ''
    }, options);
}*/

function ContentService() {
  return function(options) {
    //base.call(this, options);
    angular.extend(this, {
      id: generateUUID(),
      title: '',
      subtitle: '',
      body: ''
    }, options);
  };
}

function imageService(content, $window) {

  return function(options) {
    var contentFactory = new content(options);

    angular.extend(contentFactory, {
      example: function() {
        $window.alert('extended service: ' + contentFactory.title);
      }
    });

    return contentFactory;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
  <h3>
    click image to test extended content class
    </h3>
  <img ng-src="{{ctrl.newImage.src}}" ng-click="ctrl.newImage.example()" />
  <p>
    {{ctrl.newImage.title}}
  </p>
</div>

Collectives™ on Stack Overflow

Javascript Create Dynamic Object Class

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related