AngularJS: เมื่อใดควรใช้บริการแทนโรงงาน

กรุณาอดทนกับฉันที่นี่ ฉันรู้ว่ามีคำตอบอื่น ๆ เช่น: AngularJS: บริการกับผู้ให้บริการกับโรงงาน

อย่างไรก็ตามฉันยังไม่สามารถคิดออกเมื่อคุณต้องการใช้บริการมากกว่าโรงงาน

จากสิ่งที่ฉันสามารถบอกได้ว่าโรงงานใช้กันทั่วไปเพื่อสร้างฟังก์ชั่น "ทั่วไป" ที่สามารถเรียกใช้โดยตัวควบคุมหลายตัว: การสร้างฟังก์ชั่นตัวควบคุมทั่วไป

เอกสารเชิงมุมดูเหมือนจะชอบโรงงานมากกว่าบริการ พวกเขายังอ้างถึง "บริการ" เมื่อพวกเขาใช้โรงงานซึ่งยิ่งทำให้สับสน! http://docs.angularjs.org/guide/dev_guide.services.creating_services

ดังนั้นเมื่อหนึ่งจะใช้บริการ

มีบางสิ่งที่เป็นไปได้หรือทำได้ง่ายกว่ามากกับบริการ

มีอะไรแตกต่างที่เกิดขึ้นเบื้องหลังหรือไม่ ความแตกต่างด้านประสิทธิภาพ / หน่วยความจำ?

นี่คือตัวอย่าง นอกเหนือจากวิธีการประกาศพวกเขาดูเหมือนกันและฉันไม่สามารถหาสาเหตุที่ฉันทำอย่างใดอย่างหนึ่งกับคนอื่น http://jsfiddle.net/uEpkE/

อัปเดต:จากคำตอบของโทมัสดูเหมือนจะบอกเป็นนัยว่าการบริการนั้นมีไว้สำหรับตรรกะที่ง่ายขึ้นและโรงงานสำหรับตรรกะที่ซับซ้อนมากขึ้นด้วยวิธีการส่วนตัวดังนั้นฉันจึงอัปเดตรหัสซอด้านล่างและดูเหมือนว่าทั้งสองสามารถรองรับฟังก์ชั่นส่วนตัวได้หรือไม่

myApp.factory('fooFactory', function() {
    var fooVar;
    var addHi = function(foo){ fooVar = 'Hi '+foo; }

    return {
        setFoobar: function(foo){
            addHi(foo);
        },
        getFoobar:function(){
            return fooVar;
        }
    };
});
myApp.service('fooService', function() {
    var fooVar;
    var addHi = function(foo){ fooVar = 'Hi '+foo;}

    this.setFoobar = function(foo){
        addHi(foo);
    }
    this.getFoobar = function(){
        return fooVar;
    }
});

function MyCtrl($scope, fooService, fooFactory) {
    fooFactory.setFoobar("fooFactory");
    fooService.setFoobar("fooService");
    //foobars = "Hi fooFactory, Hi fooService"
    $scope.foobars = [
        fooFactory.getFoobar(),
        fooService.getFoobar()
    ];
}

คำอธิบาย

คุณมีสิ่งต่าง ๆ ที่นี่:

ครั้งแรก:

• หากคุณใช้บริการคุณจะได้รับอินสแตนซ์ของฟังก์ชัน (" this" คำหลัก)
• ถ้าคุณใช้โรงงานคุณจะได้รับ ค่าที่ถูกส่งกลับโดยการเรียกใช้ฟังก์ชั่นการอ้างอิง (งบผลตอบแทนในโรงงาน)

อ้างอิง: เชิงมุมบริการเทียบกับเชิงมุมโรงงาน

ประการที่สอง:

โปรดทราบว่าผู้ให้บริการทั้งหมดใน AngularJS (ค่าคงที่บริการโรงงาน) ล้วนเป็นซิงเกิล!

ที่สาม:

การใช้อย่างใดอย่างหนึ่ง (บริการหรือโรงงาน) เป็นเรื่องเกี่ยวกับรูปแบบรหัส แต่ที่วิธีที่ใช้กันใน AngularJS คือการใช้โรงงาน

ทำไม

เพราะ "วิธีการจากโรงงานเป็นวิธีที่พบได้บ่อยที่สุดในการนำวัตถุเข้าสู่ระบบฉีดขึ้นรูป AngularJS มันมีความยืดหยุ่นสูงและมีตรรกะการสร้างที่ซับซ้อนเนื่องจากโรงงานเป็นหน้าที่ปกติเราจึงสามารถใช้ประโยชน์จากขอบเขตศัพท์ใหม่เพื่อจำลอง" ส่วนตัว "ตัวแปรสิ่งนี้มีประโยชน์มากเพราะเราสามารถซ่อนรายละเอียดการใช้งานของบริการที่กำหนดได้"

( อ้างอิง : http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821 )

การใช้

บริการ:อาจมีประโยชน์สำหรับการแบ่งปันฟังก์ชั่นยูทิลิตี้ที่มีประโยชน์ในการเรียกใช้โดยการต่อท้าย()การอ้างอิงฟังก์ชันฉีด อาจจะทำงานด้วยinjectedArg.call(this)หรือคล้ายกัน

Factory:อาจมีประโยชน์ในการส่งคืนฟังก์ชัน 'class' ที่สามารถเป็น new`ed เพื่อสร้างอินสแตนซ์ได้

ดังนั้นให้ใช้โรงงานเมื่อคุณมีตรรกะที่ซับซ้อนในบริการของคุณและคุณไม่ต้องการเปิดเผยความซับซ้อนนี้

ในกรณีอื่น ๆถ้าคุณต้องการที่จะกลับมาเช่นการให้บริการเพียงแค่ใช้บริการ

แต่คุณจะเห็นเวลาที่คุณจะใช้โรงงานใน 80% ของกรณีฉันคิดว่า

สำหรับรายละเอียดเพิ่มเติม: http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/

อัปเดต:

โพสต์ที่ยอดเยี่ยมที่นี่: http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html

"ถ้าคุณต้องการให้ฟังก์ชั่นของคุณถูกเรียกเหมือนฟังก์ชั่นปกติให้ใช้ factoryถ้าคุณต้องการให้ฟังก์ชั่นของคุณถูกยกตัวอย่างด้วยโอเปอเรเตอร์ใหม่ให้ใช้บริการหากคุณไม่ทราบความแตกต่างให้ใช้ factory"

อัปเดต:

ทีม AngularJS ทำงานและให้คำอธิบาย: http://docs.angularjs.org/guide/providers

และจากหน้านี้:

"Factory and Service เป็นสูตรอาหารที่ใช้กันมากที่สุดความแตกต่างเพียงอย่างเดียวคือสูตรบริการจะทำงานได้ดีขึ้นสำหรับวัตถุประเภทที่กำหนดเองในขณะที่ Factory สามารถผลิตดั้งเดิมและฟังก์ชัน JavaScript"

allernhwkimโพสต์คำตอบแรกในคำถามนี้เชื่อมโยงไปยังบล็อกของเขาแต่ผู้ดูแลลบมัน เป็นโพสต์เดียวที่ฉันพบซึ่งไม่เพียง แต่บอกวิธีการทำสิ่งเดียวกันกับบริการผู้ให้บริการและโรงงาน แต่ยังบอกคุณว่าคุณสามารถทำอะไรกับผู้ให้บริการที่คุณไม่สามารถทำได้จากโรงงานและด้วย โรงงานที่คุณไม่สามารถใช้บริการได้

โดยตรงจากบล็อกของเขา:

app.service('CarService', function() {
   this.dealer="Bad";
    this.numCylinder = 4;
});

app.factory('CarFactory', function() {
    return function(numCylinder) {
      this.dealer="Bad";
        this.numCylinder = numCylinder
    };
});

app.provider('CarProvider', function() {
    this.dealerName = 'Bad';
    this.$get = function() {
        return function(numCylinder) {
            this.numCylinder = numCylinder;
            this.dealer = this.dealerName;
        }
    };
    this.setDealerName = function(str) {
      this.dealerName = str;
    }      
});

นี่แสดงให้เห็นว่า CarService จะผลิตรถยนต์ที่มี 4 สูบอยู่เสมออย่างไรคุณไม่สามารถเปลี่ยนรถยนต์แต่ละคันได้ ในขณะที่ CarFactory ส่งคืนฟังก์ชันดังนั้นคุณสามารถทำได้new CarFactoryในคอนโทรลเลอร์ของคุณโดยส่งผ่านถังจำนวนหนึ่งไปยังรถคันนั้น คุณไม่สามารถทำได้new CarServiceเพราะ CarService ไม่ใช่วัตถุ

เหตุผลที่โรงงานไม่ทำงานเช่นนี้:

app.factory('CarFactory', function(numCylinder) {
      this.dealer="Bad";
      this.numCylinder = numCylinder
});

และส่งคืนฟังก์ชันโดยอัตโนมัติเพื่อให้คุณยกตัวอย่างเนื่องจากคุณไม่สามารถทำสิ่งนี้ได้ (เพิ่มสิ่งต่าง ๆ ในต้นแบบ / ฯลฯ ):

app.factory('CarFactory', function() {
    function Car(numCylinder) {
        this.dealer="Bad";
        this.numCylinder = numCylinder
    };
    Car.prototype.breakCylinder = function() {
        this.numCylinder -= 1;
    };
    return Car;
});

มาดูกันว่าโรงงานผลิตรถยนต์อย่างไร

ข้อสรุปจากบล็อกของเขาค่อนข้างดี:

สรุปแล้ว,

---------------------------------------------------  
| Provider| Singleton| Instantiable | Configurable|
---------------------------------------------------  
| Factory | Yes      | Yes          | No          |
---------------------------------------------------  
| Service | Yes      | No           | No          |
---------------------------------------------------  
| Provider| Yes      | Yes          | Yes         |       
---------------------------------------------------  

1. ใช้บริการเมื่อคุณต้องการเพียงวัตถุอย่างง่ายเช่น Hash เช่น {foo; 1, bar: 2} มันเป็นรหัสที่ง่าย แต่คุณไม่สามารถยกตัวอย่างได้

2. ใช้โรงงานเมื่อคุณต้องการสร้างอินสแตนซ์ของวัตถุเช่นลูกค้าใหม่ (), ความคิดเห็นใหม่ (), ฯลฯ

3. ใช้ผู้ให้บริการเมื่อคุณต้องการกำหนดค่า เช่นการทดสอบ URL, QA URL, URL การผลิต

หากคุณพบว่าคุณเพิ่งส่งคืนวัตถุในโรงงานคุณควรใช้บริการ

อย่าทำสิ่งนี้:

app.factory('CarFactory', function() {
    return {
        numCylinder: 4
    };
});

ใช้บริการแทน:

app.service('CarService', function() {
    this.numCylinder = 4;
});

แนวคิดสำหรับผู้ให้บริการเหล่านี้ง่ายกว่าที่ปรากฏในตอนแรก หากคุณแยกผู้ให้บริการและดึงส่วนต่าง ๆ ออกมามันจะชัดเจนมาก

จะนำมันก็เป็นหนึ่งในผู้ให้บริการเหล่านี้ในแต่ละเป็นรุ่นพิเศษของอื่น ๆ ในลำดับนี้: provider> factory> value/ /constantservice

ตราบใดที่ผู้ให้บริการทำในสิ่งที่คุณสามารถคุณสามารถใช้ผู้ให้บริการเพิ่มเติมลงในห่วงโซ่ซึ่งจะส่งผลให้การเขียนรหัสน้อยลง ถ้ามันไม่สำเร็จสิ่งที่คุณต้องการคุณสามารถขึ้นไปข้างบนโซ่และคุณจะต้องเขียนโค้ดเพิ่มเติม

ภาพนี้แสดงให้เห็นถึงสิ่งที่ฉันหมายถึงในภาพนี้คุณจะเห็นรหัสสำหรับผู้ให้บริการด้วยส่วนที่เน้นแสดงให้คุณเห็นว่าส่วนใดของผู้ให้บริการที่สามารถใช้ในการสร้างโรงงานค่า ฯลฯ แทน

_{(ที่มา: simplygoodcode.com )}

สำหรับรายละเอียดเพิ่มเติมและตัวอย่างจากโพสต์บล็อกที่ฉันได้ภาพจากไปที่: http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

ทั้งโรงงานและการบริการส่งผลให้วัตถุเดี่ยวที่สามารถกำหนดค่าโดยผู้ให้บริการและฉีดเข้าไปในตัวควบคุมและเรียกใช้บล็อก จากมุมมองของหัวฉีดนั้นไม่มีความแตกต่างอย่างแน่นอนว่าวัตถุนั้นมาจากโรงงานหรือบริการ

ดังนั้นเมื่อจะใช้โรงงานและเมื่อใดจะใช้บริการหรือไม่ มันจะเพิ่มความนิยมในการเขียนโค้ดของคุณลงไป ถ้าคุณชอบรูปแบบ JS แบบโมดูลาร์ให้ไปที่โรงงาน ถ้าคุณชอบฟังก์ชั่นคอนสตรัคเตอร์ ("คลาส") ให้ไปใช้บริการ โปรดทราบว่าสไตล์ทั้งสองสนับสนุนสมาชิกส่วนตัว

ข้อดีของบริการอาจเป็นได้ง่ายขึ้นจากมุมมอง OOP: สร้าง "คลาส" และร่วมกับผู้ให้บริการนำรหัสเดียวกันมาใช้ซ้ำในโมดูลและเปลี่ยนแปลงพฤติกรรมของวัตถุที่สร้างอินสแตนซ์โดยการจัดหา พารามิเตอร์ที่แตกต่างกับตัวสร้างในบล็อกการกำหนดค่า

ไม่มีสิ่งใดที่โรงงานไม่สามารถทำได้หรือทำได้ดีกว่าเมื่อเปรียบเทียบกับบริการ และข้อรอง ดูเหมือนว่าโรงงานจะได้รับความนิยมมากขึ้น เหตุผลที่สะดวกในการจัดการสมาชิกส่วนตัว / สาธารณะ บริการจะงุ่มง่ามมากขึ้นในเรื่องนี้ เมื่อทำการเข้ารหัสบริการคุณมีแนวโน้มที่จะทำให้สมาชิกวัตถุของคุณเป็นสาธารณะโดยใช้คำสำคัญ“ นี่” และอาจพบว่าสมาชิกสาธารณะเหล่านั้นไม่สามารถมองเห็นได้ด้วยวิธีส่วนตัว (เช่นฟังก์ชั่นภายใน)

var Service = function(){

  //public
  this.age = 13;

  //private
  function getAge(){

    return this.age; //private does not see public

  }

  console.log("age: " + getAge());

};

var s = new Service(); //prints 'age: undefined'

Angular ใช้คำหลัก“ ใหม่” เพื่อสร้างบริการให้กับคุณดังนั้นอินสแตนซ์ที่ส่งผ่านไปยังตัวควบคุมจะมีข้อเสียเปรียบเดียวกัน แน่นอนคุณอาจเอาชนะปัญหาโดยใช้สิ่งนี้ / ที่:

var Service = function(){

  var that = this;

  //public
  this.age = 13;

  //private
  function getAge(){

    return that.age;

  }

  console.log("age: " + getAge());

};

var s = new Service();// prints 'age: 13'  

แต่ด้วยค่าบริการคงที่ขนาดใหญ่สิ่งนี้จะทำให้โค้ดอ่านได้ไม่ดี ยิ่งกว่านั้นต้นแบบบริการจะไม่เห็นสมาชิกส่วนตัว - สาธารณะเท่านั้นที่จะมีให้:

var Service = function(){

  var name = "George";

};

Service.prototype.getName = function(){

  return this.name; //will not see a private member

};

var s = new Service();
console.log("name: " + s.getName());//prints 'name: undefined'

ข้อสรุปโดยใช้ Factory สะดวกกว่า เนื่องจาก Factory ไม่มีข้อบกพร่องเหล่านี้ ฉันจะแนะนำให้ใช้มันเป็นค่าเริ่มต้น

แม้ว่าพวกเขาจะบอกว่าบริการและโรงงานทั้งหมดเป็นแบบซิงเกิลฉันก็ไม่เห็นด้วย 100 เปอร์เซ็นต์เลย ฉันจะบอกว่าโรงงานไม่ใช่แบบซิงเกิลตันและนี่คือจุดตอบของฉัน ฉันจะคิดถึงชื่อที่กำหนดทุกองค์ประกอบ (บริการ / โรงงาน) ฉันหมายถึง:

โรงงานเพราะไม่ได้เป็นเดี่ยวคุณสามารถสร้างได้มากเท่าที่คุณต้องการเมื่อคุณฉีดเพื่อให้การทำงานเช่นโรงงานของวัตถุ คุณสามารถสร้างโรงงานของเอนทิตีของโดเมนของคุณและทำงานอย่างสะดวกสบายยิ่งขึ้นกับวัตถุนี้ซึ่งอาจเป็นเหมือนวัตถุของแบบจำลองของคุณ เมื่อคุณดึงวัตถุหลาย ๆ ชิ้นคุณสามารถแมปวัตถุเหล่านี้ในวัตถุนี้และมันสามารถทำหน้าที่เป็นชั้นอื่น ๆ ระหว่าง DDBB และรุ่น AngularJs คุณสามารถเพิ่มวิธีการไปยังวัตถุเพื่อให้คุณวางวัตถุของแอป AngularJs ได้อีกเล็กน้อย

ในขณะที่บริการเป็นแบบซิงเกิลดังนั้นเราสามารถสร้าง 1 ชนิดเท่านั้นอาจไม่ได้สร้าง แต่เรามีเพียง 1 อินสแตนซ์เมื่อเราฉีดเข้าไปในคอนโทรลเลอร์ดังนั้นบริการจึงให้บริการที่เหมือนบริการทั่วไป (การพักสายการทำงาน .. ) เพื่อควบคุม

แนวคิดคุณสามารถคิดเหมือนบริการที่ให้บริการโรงงานสามารถสร้างหลายอินสแตนซ์ (วัตถุ) ของคลาสได้

บริการ

ไวยากรณ์ : module.service ('serviceName', ฟังก์ชัน); ผลลัพธ์ : เมื่อประกาศ serviceName เป็นอาร์กิวเมนต์แบบฉีดคุณจะได้รับการอ้างอิงฟังก์ชันจริงที่ส่งผ่านไปยัง module.service

การใช้งาน : อาจมีประโยชน์สำหรับการแบ่งปันฟังก์ชั่นยูทิลิตี้ที่มีประโยชน์ในการเรียกใช้โดยการต่อท้าย () กับการอ้างอิงฟังก์ชั่นการฉีด สามารถเรียกใช้กับ injectedArg.call (นี่) หรือคล้ายกันได้

โรงงาน

ไวยากรณ์ : module.factory ('factoryName', ฟังก์ชัน);

ผลลัพธ์ : เมื่อประกาศ factoryName เป็นอาร์กิวเมนต์แบบฉีดคุณจะได้รับค่าที่ส่งคืนโดยเรียกใช้การอ้างอิงฟังก์ชันที่ส่งผ่านไปยัง module.factory

การใช้งาน : อาจมีประโยชน์ในการส่งคืนฟังก์ชัน 'คลาส' ที่สามารถเป็น new'ed เพื่อสร้างอินสแตนซ์ได้

ผู้ให้บริการ

ไวยากรณ์ : module.provider ('providerName', ฟังก์ชัน);

ผลลัพธ์ : เมื่อประกาศ providerName เป็นอาร์กิวเมนต์แบบฉีดคุณจะได้รับค่าที่ส่งคืนโดยเรียกใช้เมธอด $ get ของการอ้างอิงฟังก์ชันที่ส่งผ่านไปยัง module.provider

การใช้งาน : อาจเป็นประโยชน์สำหรับการส่งคืนฟังก์ชัน 'คลาส' ที่สามารถเป็น new'ed เพื่อสร้างอินสแตนซ์ แต่ต้องใช้การกำหนดค่าบางอย่างก่อนที่จะถูกส่ง อาจมีประโยชน์สำหรับคลาสที่นำมาใช้ใหม่ในโครงการหรือไม่ ยังคงมีหมอกในนี้

สามารถใช้ทั้งวิธีที่คุณต้องการ : ไม่ว่าจะสร้างวัตถุหรือ j ust เพื่อเข้าถึงฟังก์ชั่นจากทั้งสอง

คุณสามารถสร้างวัตถุใหม่จากบริการ

app.service('carservice', function() {
    this.model = function(){
        this.name = Math.random(22222);
        this.price = 1000;
        this.colour = 'green';
        this.manufacturer = 'bmw';
    }
});

.controller('carcontroller', function ($scope,carservice) { 
    $scope = new carservice.model();
})

บันทึก :

• บริการโดยค่าเริ่มต้นส่งคืนวัตถุและไม่ใช่ฟังก์ชั่นการสร้าง
• นั่นคือเหตุผลที่ฟังก์ชั่นตัวสร้างถูกตั้งค่าเป็นคุณสมบัติ this.model
• เนื่องจากบริการนี้จะส่งคืนวัตถุ แต่ แต่ภายในวัตถุนั้นจะเป็นฟังก์ชันตัวสร้างซึ่งจะใช้ในการสร้างวัตถุใหม่

คุณสามารถสร้างวัตถุใหม่จากโรงงาน

app.factory('carfactory', function() {
    var model = function(){
        this.name = Math.random(22222);
        this.price = 1000;
        this.colour = 'green';
        this.manufacturer = 'bmw';
    }
    return model;
});

.controller('carcontroller', function ($scope,carfactory) { 
    $scope = new carfactory();
})

บันทึก :

• โรงงานโดยค่าเริ่มต้นส่งกลับฟังก์ชั่นการสร้างและไม่วัตถุ
• นั่นคือสาเหตุที่วัตถุใหม่สามารถสร้างขึ้นได้ด้วยฟังก์ชั่นคอนสตรัคเตอร์

สร้างบริการเพื่อเข้าถึงฟังก์ชั่นที่เรียบง่าย

app.service('carservice', function () {
   this.createCar = function () {
       console.log('createCar');
   };
   this.deleteCar = function () {
       console.log('deleteCar');
   };
});

.controller('MyService', function ($scope,carservice) { 
    carservice.createCar()
})

สร้างโรงงานเพื่อเข้าถึงฟังก์ชั่นที่เรียบง่าย

app.factory('carfactory', function () {
    var obj = {} 
        obj.createCar = function () {
            console.log('createCar');
        };
       obj.deleteCar = function () {
       console.log('deleteCar');
    };
});

.controller('MyService', function ($scope,carfactory) { 
    carfactory.createCar()
})

สรุป:

• คุณสามารถใช้ทั้งวิธีที่คุณต้องการว่าจะสร้างวัตถุใหม่หรือเพียงแค่เข้าถึงฟังก์ชั่นที่เรียบง่าย
• จะไม่มีการเข้าชมใด ๆ เลยโดยใช้อันใดอันหนึ่ง
• ทั้งคู่เป็นวัตถุเดี่ยวและสร้างอินสแตนซ์เดียวเท่านั้นต่อแอป
• เป็นเพียงตัวอย่างเดียวทุกครั้งที่มีการอ้างอิงของพวกเขา
• ในเอกสารเชิงมุมโรงงานที่เรียกว่าบริการและการให้บริการที่เรียกว่าบริการ

โรงงานและบริการเป็นวิธีที่ใช้กันมากที่สุด ข้อแตกต่างระหว่างพวกเขาก็คือวิธีการบริการทำงานได้ดีขึ้นสำหรับวัตถุที่ต้องการลำดับชั้นการสืบทอดในขณะที่โรงงานสามารถผลิตดั้งเดิมและฟังก์ชั่น JavaScript

ฟังก์ชั่นผู้ให้บริการเป็นวิธีการหลักและที่เหลือก็แค่น้ำตาลซินแทคติค คุณต้องการมันก็ต่อเมื่อคุณกำลังสร้างชิ้นส่วนของรหัสที่สามารถใช้ซ้ำได้ซึ่งต้องการการกำหนดค่าระดับโลก

มีห้าวิธีในการสร้างบริการคือ: ค่า, โรงงาน, บริการ, ผู้ให้บริการและค่าคงที่ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับบริการเชิงมุมได้ที่นี่บทความนี้อธิบายวิธีการทั้งหมดนี้พร้อมตัวอย่างตัวอย่างที่ใช้งานได้จริง

.