javascript - AngularJS:المصنع والخدمة؟




angularjs-service angularjs-factory (5)

هذا السؤال لديه بالفعل إجابة هنا:

EDIT Jan 2016: بما أن هذا لا يزال يحظى بالاهتمام. منذ أن سألت هذا عن بعض مشاريع AngularJS ، وبالنسبة لأولئك الذين استخدموا factory الغالب ، قاموا ببناء كائن وأعادوا الشيء في النهاية. بياناتي أدناه لا تزال صحيحة ، ولكن.

تحرير: أعتقد أنني أخيراً فهم الفرق الرئيسي بين الاثنين ، ولدي مثال التعليمات برمجية للتدليل. أعتقد أيضًا أن هذا السؤال مختلف عن التكرار المقترح. تقول النسخة المكررة إن الخدمة غير قابلة للحياة ، ولكن إذا قمت بإعدادها كما هو موضح أدناه ، فهذا يعني أنه في الواقع. يمكن إعداد الخدمة لتكون مماثلة تمامًا للمصنع. وسأقدم أيضًا رمزًا يوضح المكان الذي يخفق فيه المصنع في الخدمة ، والذي لا يبدو أن هناك إجابة أخرى.

إذا قمت بإعداد VaderService مثل ذلك (أي كخدمة):

var module = angular.module('MyApp.services', []);

module.service('VaderService', function() {
    this.speak = function (name) {
        return 'Join the dark side ' + name;
    }
});

ثم في جهاز التحكم الخاص بي يمكنني القيام بذلك:

module.controller('StarWarsController', function($scope, VaderService) {
    $scope.luke = VaderService.speak('luke');   
});

مع الخدمة ، يتم إنشاء مثيل في VaderService إلى وحدة تحكم ، لذلك يمكنني فقط استدعاء VaderService.speak ، ومع ذلك ، إذا قمت بتغيير VaderService إلى module.factory ، فإن رمز في وحدة تحكم لم تعد تعمل ، وهذا هو الفرق الرئيسي . مع مصنع ، لا يتم إنشاء مثيل VaderService إلى وحدة تحكم ، وهذا هو السبب في أنك تحتاج إلى إعادة كائن عند إنشاء مصنع (انظر المثال الخاص بي في السؤال).

ومع ذلك ، يمكنك إعداد خدمة بنفس الطريقة تمامًا كما يمكنك إعداد مصنع (يقوم IE بإرجاع كائن) وتتصرف الخدمة تمامًا مثل المصنع

نظرا لهذه المعلومات ، لا أرى أي سبب لاستخدام المصنع على الخدمة ، يمكن أن تفعل الخدمة كل شيء مصنع يمكن وأكثر من ذلك.

السؤال الأصلي أدناه.

أعلم أن هذا قد سئل عن الكثير من المرات ، لكنني حقاً لا أرى أي فرق وظيفي بين المصانع والخدمات. قرأت هذا البرنامج التعليمي: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

ويبدو أنه يقدم تفسيرا جيدا إلى حد معقول ، ومع ذلك ، قمت بإعداد تطبيقي على النحو التالي:

index.html و

<!DOCTYPE html>
<html>
    <head>
    <title>My App</title>
    <script src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/VaderService.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </head>

    <body ng-app="MyApp"> 
        <table ng-controller="StarWarsController">
            <tbody>
            <tr><td>{{luke}}</td></tr>
            </tbody>
        </table>
    </body>
</html>

app.js:

angular.module('MyApp', [
  'MyApp.services',
  'MyApp.controllers'
]);

controllers.js:

var module = angular.module('MyApp.controllers', []);

module.controller('StarWarsController', function($scope, VaderService) {
    var luke = new VaderService('luke');
    $scope.luke = luke.speak();
});

VaderService.js

var module = angular.module('MyApp.services', []);

module.factory('VaderService', function() {
    var VaderClass = function(padawan) {
        this.name = padawan;
        this.speak = function () {
            return 'Join the dark side ' + this.name;
        }
    }

    return VaderClass;
});

ثم عند تحميل index.html أراه "الانضمام إلى الجانب المظلم لوقا" ، عظيم. بالضبط كما هو متوقع. ولكن إذا قمت بتغيير VaderService.js إلى هذا (لاحظ module.service بدلاً من module.factory):

var module = angular.module('MyApp.services', []);

module.service('VaderService', function() {
    var VaderClass = function(padawan) {
        this.name = padawan;
        this.speak = function () {
            return 'Join the dark side ' + this.name;
        }
    }

    return VaderClass;
});

ثم أعد تحميل index.html (لقد تأكدت من تفريغ ذاكرة التخزين المؤقت وأعدت عملية إعادة تحميل قوية). يعمل بالضبط نفس الشيء كما فعل مع module.factory. فما هو الفرق الوظيفي الحقيقي بين الاثنين؟


Answers

$ تقديم الخدمة

إنهم من الناحية الفنية نفس الشيء ، إنه في الواقع تدوين مختلف لاستخدام وظيفة provider خدمة $provide .

  • إذا كنت تستخدم فصلًا دراسيًا: يمكنك استخدام تدوين الخدمة .
  • إذا كنت تستخدم كائنًا ، فيمكنك استخدام تدوين المصنع .

والفرق الوحيد بين service وترميز factory هو أن الخدمة جديدة والمحطة ليست كذلك. ولكن بالنسبة لكل شيء آخر ، يبدو كلاهما ، رائحته ويتصرفان بنفس الطريقة. مرة أخرى ، إنه مجرد اختصار لوظيفة $ provided.provider .

// Factory

angular.module('myApp').factory('myFactory', function() {

  var _myPrivateValue = 123;

  return {
    privateValue: function() { return _myPrivateValue; }
  };

});

// Service

function MyService() {
  this._myPrivateValue = 123;
}

MyService.prototype.privateValue = function() {
  return this._myPrivateValue;
};

angular.module('myApp').service('MyService', MyService);

Factory Service هو مجرد غلاف provider .

مصنع

يمكن Factory إرجاع أي شيء يمكن أن يكون class(constructor function) أو instance of class أو string أو number أو boolean . إذا قمت بإرجاع دالة constructor ، يمكنك إنشاء مثيل في جهاز التحكم الخاص بك.

 myApp.factory('myFactory', function () {

  // any logic here..

  // Return any thing. Here it is object
  return {
    name: 'Joe'
  }
}

الخدمات

الخدمة لا تحتاج إلى إرجاع أي شيء. ولكن عليك تعيين كل شيء في this المتغير. لأن الخدمة ستقوم بإنشاء المثيل بشكل افتراضي واستخدامه ككائن أساسي.

myApp.service('myService', function () {

  // any logic here..

  this.name = 'Joe';
}

كود angularjs الفعلي وراء الخدمة

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
        return $injector.instantiate(constructor);
    }]);
}

انها مجرد المجمع حول factory . إذا رجعت شيئًا من service ، فستتصرف مثل Factory .

IMPORTANT : ستكون النتيجة المرتجعة من "المصنع" و "الخدمة" مخبأً مؤقتًا وسيتم إرجاع نفس جميع أجهزة التحكم.

متى يجب علي استخدامها؟

Factory هو الأفضل في جميع الحالات. يمكن استخدامه عندما يكون لديك دالة constructor يجب أن يتم إنشاء مثيل في وحدات تحكم مختلفة.

Service هي نوع من كائن Singleton . سوف يكون الكائن الإرجاع من الخدمة نفسه لكل وحدة التحكم. يمكن استخدامه عندما تريد أن يكون لديك كائن واحد للتطبيق بأكمله. على سبيل المثال: تفاصيل المستخدم المصادق عليها.

لمزيد من الفهم ، اقرأ

http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/


  • إذا كنت تستخدم خدمة ، فستحصل على وظيفة دالة ("هذه" الكلمة الرئيسية).
  • إذا كنت تستخدم مصنعًا ، فستحصل على القيمة التي يتم إرجاعها من خلال استدعاء مرجع الوظيفة (بيان الإرجاع في المصنع)

المصنع والخدمة هي الوصفات الأكثر استخدامًا. والفرق الوحيد بينهما هو أن وصفة الخدمة تعمل بشكل أفضل لكائنات من نوع مخصص ، في حين أن المصنع يمكن أن ينتج أدوات وسمات JavaScript الأساسية.

Reference


خدمة مقابل مصنع

الفرق بين المصنع والخدمة هو بالضبط مثل الفرق بين الوظيفة والكائن

مزود المصنع

  • يعطينا قيمة إرجاع الدالة أي. يمكنك فقط إنشاء كائن وإضافة خصائص إليه ثم إرجاع نفس الكائن.عند قيامك بتمرير هذه الخدمة إلى وحدة التحكم الخاصة بك ، فإن تلك الخصائص الموجودة على الكائن ستكون متوفرة الآن في وحدة التحكم هذه من خلال المصنع. (السيناريو الافتراضي)

  • سينجلتون وسيتم إنشاؤه مرة واحدة فقط

  • مكونات قابلة لإعادة الاستخدام

  • المصنع هو وسيلة رائعة للتواصل بين وحدات التحكم مثل مشاركة البيانات.

  • يمكن استخدام التبعيات الأخرى

  • عادة ما تستخدم عندما يتطلب مثيل الخدمة منطق إنشاء معقدة

  • لا يمكن حقنه في وظيفة .config() .

  • تستخدم لخدمات غير قابلة للتهيئة

  • إذا كنت تستخدم كائنًا ، فيمكنك استخدام مزود المصنع.

  • بناء الجملة: module.factory('factoryName', function);

مقدم الخدمة

  • يعطينا مثال وظيفة (كائن) - قمت بمجرد إنشاء كلمة رئيسية "جديدة" وستضيف خصائص إلى "هذا" وستقوم الخدمة بإرجاع "هذا" .عندما تمرر الخدمة إلى وحدة التحكم الخاصة بك ، هذه الخصائص على "هذا" ستكون متاحة الآن على وحدة التحكم هذه من خلال الخدمة الخاصة بك. (السيناريو الافتراضي)

  • سينجلتون وسيتم إنشاؤه مرة واحدة فقط

  • مكونات قابلة لإعادة الاستخدام

  • يتم استخدام الخدمات للاتصال بين وحدات التحكم لمشاركة البيانات

  • يمكنك إضافة خصائص ووظائف إلى كائن خدمة باستخدام this الكلمة الأساسية

  • يتم حساب التبعيات كوسيطة منشئ

  • يستخدم لمنطق إنشاء بسيط

  • لا يمكن حقنه في وظيفة .config() .

  • إذا كنت تستخدم صفًا ، فيمكنك استخدام موفر الخدمة

  • بناء الجملة: module.service('serviceName', function);

عينة تجريبي

في المثال أدناه ، حددت MyService و MyFactory . لاحظ كيف في. .service قمت بإنشاء طرق الخدمة باستخدام this.methodname. في .factory لقد قمت بإنشاء كائن مصنع وتعيين الطرق إليه.

AngularJS .service

module.service('MyService', function() {

    this.method1 = function() {
            //..method1 logic
        }

    this.method2 = function() {
            //..method2 logic
        }
});

AngularJS. مصنع

module.factory('MyFactory', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..method1 logic
        }

    factory.method2 = function() {
            //..method2 logic
        }

    return factory;
});

ألقِ نظرة أيضًا على هذه المواد الجميلة

ارتباك حول الخدمة مقابل المصنع

http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

Angular.js: خدمة مقابل مزود مقابل مصنع؟


لا أريد بأي حال من الأحوال التنافس مع إجابة مارك ، ولكن أردت فقط إبراز القطعة التي جعلت كل شيء أخيراً ينقر على أنه شخص جديد لميراث جافا سكريبت وسلسلة نموذجه الأولي .

الخاصية فقط يقرأ البحث في سلسلة النموذج الأولي ، وليس يكتب. لذلك عندما قمت بتعيين

myObject.prop = '123';

لا تبحث عن السلسلة ، ولكن عند ضبطها

myObject.myThing.prop = '123';

هناك قراءة دقيقة مستمرة في عملية الكتابة تلك التي تحاول البحث عن myThing قبل الكتابة إلى دعامة. ولهذا السبب فإن الكتابة إلى object.properties من الطفل يحصل على كائنات الوالدين.





javascript angularjs angularjs-service angularjs-factory