AngularJS 1.4x如何扩展工厂对象

AngularJS 1.4x how to extend a factory object

本文关键字:扩展 工厂 对象 4x 何扩展 AngularJS      更新时间:2023-09-26

解决方案

感谢下面的回答。将它应用到我的实际代码中,效果很好。

// NOTE : called from another service, but removed function wrap around and angular module setup for brevity sake
// article is serverObject
var articleInstance = new Article(article);
console.log(articleInstance instanceof Article)
// true
console.log(articleInstance.isProduct(article))
// true (in my case)
/*
* Create the constructor from server article object using lodash
*/
ArticleConstructor.$inject = [];
function ArticleConstructor() {
    return function(data) {
        var keys = ['app_id', 'body', 'headline', 'object_type', 'url', 'status'
        ];
        _.assign(this, _.pick(data, keys));
    };
}
/*
* Extend the iief constuctor - ArticleConstruct
*/
Article.$inject = ['ArticleConstructor'];
function Article(ArticleConstructor) {
    function ArticleExtended(data) {
        ArticleConstructor.call(this, data);
    }
    //  create the new Article object with the ArticleConstructor prototype object and properties
    ArticleExtended.prototype = Object.create(ArticleConstructor.prototype);
    // Article inherits a constructor property from its prototype i.e. ArticleConstructor
    ArticleExtended.prototype.constructor = ArticleExtended;
    ArticleExtended.prototype.isProduct = function () {
        return this.object_type == 3;
    };
    ArticleExtended.prototype.hasImage = function () {
        return _.has(this, 'image');
    };
    return ArticleExtended;
}

如何扩展下面的工厂对象。我正在使用lodash自动水合工厂构造函数,这很好,但现在我的原始方法都没有执行,例如isIcon()返回错误消息-"isIcon不是函数"。我一直在寻找答案,但大多数构造函数示例在对象末尾使用传统的return service;,这很好,但后来迫使我回到更手动的方法来构建构造函数。我觉得我错过了一些显而易见的东西。

使用AngularJS 1.4.8

要扩展的工厂对象

// AJS factory - the problem child
ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function ImageUnableToExtendFn(IMG_TYPE) {
  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };
 return function(data) {
    var keys = ['id', 'src', 'alt', 'type'];
       _.assign(this, _.pick(data, keys));
    };
});

我尝试过用angular.extend()扩展IIEF工厂,但也不起作用(下面的例子):

angular.extend(imageOfUnableToExtendFn, {
    isIcon: function(img) {
        return img.type === IMG_TYPE.ICON;
    }
})

以上详细信息仅供参考

define([
   'angular',
   'lodash'
], function(angular, _) {
'use strict';
ImageService.$inject = ['ImageClassicFn', 'ImageUnableToExtendFn'];
function ImageService(ImageClassicFn, ImageUnableToExtendFn) {
    var imageService = {
        images: null,
        createInstance: function(serverImageObject) {
            var self = this,
                imageOfClassicFn,
                imageOfUnableToExtendFn,
                isIcon,
            if (angular.isDefined(serverImageObject)) {
                imageOfClassicFn = new ImageClassicFn();
                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                console.log('IS ICON', isIcon);
                // >  true of false 
                imageOfUnableToExtendFn = new ImageUnableToExtendFn(serverImageObject);
                // result is a hydrated instance of ImageClassicFn with mapped keys using lodash
                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                // ERROR - isIcon is not a function 
                // Attempting to extend manually fails silently 
                angular.extend(imageOfUnableToExtendFn, {
                    isIcon: function(img) {
                        return img.type === IMG_TYPE.ICON;
                    }
                })
                isIcon = imageOfClassicFn.isIcon(serverImageObject);
                // SAME ERROR - isIcon is not a function 
            }
        }
    };
    return imageService;
}
ImageClassicFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {
  function Image(id, src, alt, type) {
    this.id = id;
    this.src = src;
    this.alt = alt;
    this.type = type;
  }
  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };
    return Image;
});
ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {
  Image.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };
return function(data) {
    var keys = ['id', 'src', 'alt', 'type'];
       _.assign(this, _.pick(data, keys));
    };
});

return angular.module('content.images', [
    ])
     .constant("IMG_TYPE", {
        "ICON": 1,
    })
    .factory('ImageClassicFn', ImageClassicFn)
    .factory('ImageUnableToExtendFn', ImageUnableToExtendFn)
    .service('ImageService', ImageService);

});

javascript中的子类划分有点棘手。看看这篇关于javascript继承的SO文章。

基本上,这就是你通常做这件事的方式,包裹在1.x角模块中:

ImageClassicFactory.$inject = ['IMG_TYPE'];
function ImageClassicFactory(IMG_TYPE) {
  function ImageClassic(id, src, alt, type) {
    this.id = id;
    this.src = src;
    this.alt = alt;
    this.type = type;
  }
  ImageClassic.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };
  return ImageClassic;
});
module.factory('ImageClassic', ImageClassicFactory);

ImageExtendedFactory.$inject = ['IMG_TYPE', 'ImageClassic'];
function ImageExtendedFactory(IMG_TYPE, ImageClassic) {
  function ImageExtended(id, src, alt, type) {
      ImageClassic.call(this, id, src, alt, type);
  }
  ImageExtended.prototype = Object.create(ImageClassic.prototype);
  ImageExtended.prototype.constructor = ImageExtended;
  ImageExtended.prototype.isIcon = function (img) {
    return img.type === IMG_TYPE.ICON;
  };
  return ImageExtended;
});
module.factory('ImageExtended', ImageExtendedFactory);