2014-09-16 13 views
6

Was ist die beste Praxis, wenn Sie eine Factory mit 4 verwandten Methoden haben, jeder dieser ist wirklich lang (200 Zeilen Code) und Sie wollen eine riesige Datei von 800 zu vermeiden + Zeilen Code?Factory-Methoden in mehreren Dateien Angular JS

Eine Lösung besteht darin, 4 Fabriken unter demselben Modul zu erstellen, von denen jedes eine einzelne Methode und eine eigene Datei ausgibt. Dann injiziere alle von ihnen in den Controller, der sie benötigt.

Gibt es eine bessere Lösung? Ich möchte die Factory einmal erstellen und dann Methoden hinzufügen, so wie ich die Modulerweiterung mit dem Modulmuster gemacht habe. Dann muss ich nur einmal die Fabrik einspritzen und alle Methoden zur Verfügung stellen.

+0

Warum sind Ihre Methoden 200 Zeilen Code? Klingt wie ein Refactor ist die beste Lösung. Möglicherweise eine dieser riesigen Methoden für Code Review post. –

+0

Leider kann ich sie nicht mehr verkleinern, aber nicht alle, aber ich verstehe deinen Standpunkt. Ich habe eine Reihe von versuchen/fangen und wenn/sonst durch aufgrund der Anwendungslogik zu gehen. – Mirko

+0

Wenn es sich nicht um sensiblen Code handelt, könnten Sie irgendwo ein Beispiel für eine Ihrer riesigen Methoden veröffentlichen? Aus reiner Neugier möchte ich einen sehen. –

Antwort

1

Sie Ihren Code auch den alten Vanille js Stil arrangieren können und diese Bibliotheken in Ihren Diensten wie dies zugreifen dann am Ende mit einem Objekt Mirko, das Sie außerhalb des Bereichs Ihrer eckigen App zugreifen können, aber es wird in keiner Weise von anderen externen Apis (nicht für eckig geschrieben) abweichen, die Sie in Ihrer App verwenden möchten. Die Art und Weise, wie Sie mit Ihrer eigenen "externen" API umgehen, kann nach Art der alten Schule erfolgen, eine Datei pro Klasse, z. 'FunService'.

Es ist vielleicht nicht die schönste Lösung, aber es wird eine einfache Abstraktion sein.

Nur zu sagen ...

+0

Danke. Das wäre genau das Szenario, das ich nach Angular portieren möchte;) Ich habe eine existierende App mit dem Modulmuster, wo meine Objekte unter einem APP-Hauptobjekt namespaced sind, dann 'APP.Module1 = {}', 'APP.Module2 {} 'und so weiter. Ich dachte, dass Angular einen Weg hatte, damit umzugehen, bin ich der Einzige, der lange Methoden hat? (Wenn 200 Zeilen mit Kommentaren "lang" genannt werden können) – Mirko

+0

Nun, ich habe Ihre Frage geupdated, weil ich wissen wollte, ob es eine bessere Alternative als die, die ich vorschlage, gibt. Ich denke, wir spielen das Wartespiel :) –

+0

Vorläufig ist dies immer noch die beste Lösung und ich werde es akzeptieren. Lass uns warten! – Mirko

0

Vielleicht Segment Ihre Methoden durch andere Fabriken, die auf Ihre „Haupt“ Fabrik injiziert werden kann:

// file 1 
angular.module('foo').factory('segment1', function() { 
    return { 
    method: function() { 
     // ... super long method 
    } 
    }; 
}); 

// file 2 
angular.module('foo').factory('segment2', function() { 
    return { 
    method: function() { 
     // ... super long method 
    } 
    }; 
}); 

// your main factory file 
angular.module('foo').factory('myFactory', function (segment1, segment2) { 
    return { 
    method1: segment1.method, 
    method2: segment2.method 
    }; 
} 
+0

Ah, du schlägst mich dazu :) –

+0

Nur ein Mecker aber, dies wird immer noch erfordern, dass ich 4 Fabriken, plus eine, um sie zu aggregieren. Gibt es eine Chance, eine bestehende Fabrik zu finden und ihr eine Methode hinzuzufügen? – Mirko

+0

Ich denke nicht, traurig .. Es wird Präzedenzfall definierten Fabrik 'löschen'. – meriadec

3

Ich mag würde die Fabrik einmal erstellen, dann fügen Sie Methoden, um es, wie ich war Modulvergrößerung unter Verwendung des Modulmusters. Dann muss ich nur einmal die Fabrik einspritzen und alle Methoden zur Verfügung stellen.

Ja, das funktioniert:

var Mirko = { }; 

Mirko.FunService = { 
    getAllSomething : function (p1, p2) { 
    }, 
    ... 
}; 

angular.module('myModule').factory('BigService', function(){ 
    return { 
    methodOne : Mirko.getAllSomething, 
    ... 
    }; 
}); 

werden Sie:

// In your main module file. 
angular.module('myModule', []); 


// file1.js 
angular.module('myModule').factory('BigService1', function(){ 
    // Your actual implementation here. 
    console.log('I am BigService1'); 
}); 


// file2.js 
angular.module('myModule').factory('BigService2', function(){ 
    // Your actual implementation here. 
    console.log('I am BigService2'); 
}); 


// ... additional files 


// Separate file/service to aggregate your big factory services. 
angular.module('myModule').service('AggregateService', [ 
     // Add dependencies 
     'BigService1','BigService2', 
function(BigService1, BigService2){ 
    // Return an object that exposes the factory interfaces. 
    return { 
     service1: BigService1, 
     service2: BigService2 
    }; 
}]);