javascript jquery विस्तार बनाम कोणीय विस्तार




angularjs extend (4)

इन दो विस्तार कार्यों के बीच क्या अंतर है?

  angular.extend(a,b);
  $.extend(a,b);

जबकि jquery.extend अच्छी तरह से कोणीय दस्तावेज है .extend विवरण की कमी है और टिप्पणियां कोई जवाब नहीं प्रदान करते हैं। ( https://docs.angularjs.org/api/ng/function/angular.extend )।

Angular.extend भी गहरी प्रति प्रदान करता है?


angular.extend और angular.extend बहुत समान हैं। वे दोनों एक या अधिक स्रोत वस्तुओं से एक गंतव्य वस्तु पर एक उथली संपत्ति प्रतिलिपि करते हैं। तो उदाहरण के लिए:

var src = {foo: "bar", baz: {}};
var dst = {};
whatever.extend(dst, src);
console.log(dst.foo);             // "bar"
console.log(dst.baz === src.baz); // "true", it's a shallow copy, both
                                  // point to same object

angular.copy एक गहरी प्रति प्रदान करता है:

var src = {foo: "bar", baz: {}};
var dst = angular.copy(src);
console.log(dst.baz === src.baz); // "false", it's a deep copy, they point
                                  // to different objects.

extend करने के extend वापस प्राप्त extend : मुझे केवल एक महत्वपूर्ण अंतर दिखाई देता है, जो कि jQuery का extend आपको केवल एक ऑब्जेक्ट निर्दिष्ट extend अनुमति देता है, जिस स्थिति में jQuery स्वयं ही लक्ष्य है।

साधारण चीजें:

  • यह एक उथली प्रति है। तो अगर src में एक प्रॉपर्टी p जो किसी ऑब्जेक्ट को संदर्भित करती है, तो dst को एक प्रॉपर्टी p मिल जाएगी जो एक ही ऑब्जेक्ट को संदर्भित करता है (ऑब्जेक्ट की प्रति नहीं)।

  • वे दोनों गंतव्य वस्तु वापस करते हैं।

  • वे दोनों एकाधिक स्रोत वस्तुओं का समर्थन करते हैं।

  • वे दोनों क्रमशः एकाधिक स्रोत ऑब्जेक्ट करते हैं, और इसलिए एक से अधिक स्रोत ऑब्जेक्ट का एक ही संपत्ति नाम होने पर अंतिम स्रोत ऑब्जेक्ट "जीत" जाएगा।

टेस्ट पेज: लाइव कॉपी | लाइव स्रोत

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>Extend!</title>
</head>
<body>
  <script>
    (function() {
      "use strict";
      var src1, src2, dst, rv;

      src1 = {
        a: "I'm a in src1",
        b: {name: "I'm the name property in b"},
        c: "I'm c in src1"
      };
      src2 = {
        c: "I'm c in src2"
      };

      // Shallow copy test
      dst = {};
      angular.extend(dst, src1);
      display("angular shallow copy? " + (dst.b === src1.b));
      dst = {};
      jQuery.extend(dst, src1);
      display("jQuery shallow copy? " + (dst.b === src1.b));
      $("<hr>").appendTo(document.body);

      // Return value test
      dst = {};
      rv = angular.extend(dst, src1);
      display("angular returns dst? " + (rv === dst));
      dst = {};
      rv = jQuery.extend(dst, src1);
      display("jQuery returns dst? " + (rv === dst));
      $("<hr>").appendTo(document.body);

      // Multiple source test
      dst = {};
      rv = angular.extend(dst, src1, src2);
      display("angular does multiple in order? " +
                  (dst.c === src2.c));
      dst = {};
      rv = jQuery.extend(dst, src1, src2);
      display("jQuery does multiple in order? " +
                  (dst.c === src2.c));

      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>

पिछले उत्तरों में उल्लेखित दोनों के बीच एक सूक्ष्म अंतर है।

jQuery का .extend () आपको सशर्त रूप से कुंजी, मूल्य जोड़ों को जोड़ने की अनुमति देता है , केवल तभी मूल्य निर्धारित किया जाता है । तो jQuery में, यह: $.extend({}, {'a': x ? x : undefined}); यदि x अनिर्धारित है तो {} वापस आ जाएगा।

कोणीय में .extend () हालांकि, यह: angular.extend({}, {'a': x ? x : undefined}); {'a': undefined} वापस आ जाएगा, भले ही x अपरिभाषित हो। तो कुंजी वहाँ होगी, कोई फर्क नहीं पड़ता कि क्या।

आपको जो चाहिए वह इस पर निर्भर करता है कि यह एक अच्छी या बुरी चीज हो सकती है। वैसे भी यह दो पुस्तकालयों के बीच व्यवहार में एक अंतर है।


AngularJS में .extend () jQuery के समान काम करता है .extend ()

http://jsfiddle.net/Troop4Christ/sR3Nj/

var o1 = {
    a: 1,
    b: 2,
    c: {
        d:3,
        e:4
    }
},
    o2 = {
        b: {
            f:{
                g:5
            }
        }
    };


console.log(angular.extend({}, o1, o2));
console.log(o1);
console.log(o2);

1.0.7 कोणीय बिल्डों का कहना है कि विस्तार और प्रतिलिपि विधियों को कोणीय आंतरिक $$ हैशके मानों पर प्रतिलिपि नहीं बनाते हैं।

रिलीज नोट्स @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md

angular.copy / angular.extend: कॉपी / विस्तार कार्यों में $$ हैशकी की प्रतिलिपि न लें। (6 डी 0 बी 325 एफ, # 1875)

Chomre dev उपकरण विधि में angular.copy का एक त्वरित परीक्षण दिखाता है कि यह एक गहरी प्रतिलिपि करता है।

x = {p: 3, y: {x: 5}}
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z = angular.copy(x);
Object {p: 3, y: Object}
z
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z.y.x = 1000
    1000
x
Object {p: 3, y: Object}
p: 3
y: Object
    x: 5
    __proto__: Object
__proto__: Object
z
Object {p: 3, y: Object}
p: 3
y: Object
   x: 1000
   __proto__: Object
__proto__: Object

दूसरी ओर angular.extend एक उथली प्रति करता है।





extend