it-swarm.com.de

jquery verlängern vs angular verlängern

Was ist der Unterschied zwischen diesen beiden Funktionen?

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

Während das jquery.extend gut dokumentiert ist, fehlen dem angular.extend Details und die Kommentare dort geben keine Antworten. ( https://docs.angularjs.org/api/ng/function/angular.extend ).

Bietet angle.extend auch Deep Copy?

62
Renaud

angular.extend und jQuery.extend sind sehr ähnlich. Beide erstellen eine flache Eigenschaftskopie von einem oder mehreren Quellobjekten zu einem Zielobjekt. Also zum Beispiel:

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 liefert eine tiefe Kopie:

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.

Zurück zu extend: Ich sehe nur einen signifikanten Unterschied: Mit extend von jQuery können Sie nur ein Objekt angeben. In diesem Fall ist jQuery selbst das Ziel.

Gemeinsame Dinge:

  • Es ist eine flache Kopie. Wenn also src eine Eigenschaft p hat, die auf ein Objekt verweist, erhält dst eine Eigenschaft p, die auf das verweist. gleiches Objekt (keine Kopie des Objekts).

  • Sie geben beide das Zielobjekt zurück.

  • Beide unterstützen mehrere Quellobjekte.

  • Beide führen die mehreren Quellobjekte in der Reihenfolge aus, sodass das letzte Quellobjekt "gewinnt", wenn mehr als ein Quellobjekt denselben Eigenschaftsnamen hat.

Testseite: Live Copy | Live Source

<!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>
96
T.J. Crowder

Es gibt einen subtilen Unterschied zwischen den beiden, der in den vorherigen Antworten nicht erwähnt wurde.

mit jQueries .extend () können Sie bedingt Schlüssel, Wertepaare hinzufügen, nur wenn der Wert definiert ist. In jQuery lautet dies also: $.extend({}, {'a': x ? x : undefined}); gibt {} zurück, falls x undefiniert ist.

In Angulars .extend () jedoch gilt Folgendes: angular.extend({}, {'a': x ? x : undefined}); gibt {'a': undefined} zurück, auch wenn x undefiniert ist. Der Schlüssel wird also da sein, egal was passiert.

Dies kann gut oder schlecht sein, je nachdem, was Sie brauchen. Auf jeden Fall ist dies ein Unterschied in Verhalten zwischen den beiden Bibliotheken.

31
asafge

Die Version 1.0.7 von angularjs gibt an, dass die Methoden extend & copy nicht mehr über die internen $$ hashKey-Werte von angularjs kopiert werden.

Siehe Versionshinweise @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md

angle.copy/angular.extend: Kopieren Sie $$ hashKey nicht in Kopier-/Erweiterungsfunktionen. (6d0b325f, # 1875)

Ein schneller Test der Methode angular.copy in den Chomre-Entwicklungstools zeigt, dass eine tiefe Kopie erstellt wird.

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

angle.extend erstellt dagegen eine flache Kopie.

6
Mike Pugh

.extend () in AngularJS funktioniert ähnlich wie jQueries .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
RavenHursT