Ez a művelet csökkenti a szerverhez intézett kérések számát, ezáltal felgyorsítja a webhely működését. Ez különösen igaz a HTTP1.1-re és a 20-nál több kérést igénylő oldalakra. Ráadásul pontokat ad a tesztben (ami sokak számára a legfontosabb).

Hogyan lehet Javascript fájlokat egyesíteni a WordPress-ben egyetlen fájlba - a beépülő modul nélküli módszer

Általában vannak bővítmények ehhez a feladathoz, de csak ezekhez a bővítményekhez fűzött megjegyzésekben található sok vélemény a „nem működik” szellemében.

Ha ezt "teljesen manuálisan" csinálja, akkor az összes kódhalmot kézbe kell vennie, és egy fájlba kell másolnia. Ez a módszer nem ajánlott, mivel számos hátránya van, például:

1.) Nehéz megtalálni a javascript fájl kezelőnevét, ez ellentétben a CSS fájlokkal, ahol megtaláljuk az id attribútum kezelőjének nevét. Ez a fogantyú fontos, mert szükségünk van rá a szkriptek regisztrációjának törléséhez, miután az egyesítési folyamat befejeződött.

2.) Rugalmasság hiánya. Ha van egy javascript-fájl összeadása vagy kivonása, akkor manuálisan újra kell kombinálnunk a fájlt.

3.) Nincs garancia arra, hogy a kombinált kódrészletek nem ütköznek egymással. Ez a függvényhívások sorrendjéhez és a JavaScript-változók hatóköréhez kapcsolódik.

Hogyan lehet Javascript fájlokat kombinálni egy fájlba a WordPress-ben - automatikusan

A javascript-fájlok WordPress-ben való automatikus egyesítéséhez először össze kell gyűjtenie a javascript-fájlok elérési útját a leíró nevükkel együtt (hasonlóan a kézi módszerhez, csak automatikusan).

Minden információt megtalálunk a webhelyre feltöltött javascript fájlokról WordPress oldal a WP_Scripts objektumban.

Ezt az objektumot a $wp_scripts változó tárolja, és olyan sablonszakaszokban hívják meg, mint a wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init . Íme néhány leggyakoribb eset.

Egyszer. A head-ben (tag) ezt a wp_head hook segítségével definiálhatjuk.

Dvas. A láblécben (a címke előtt) ezt a wp_footer hook segítségével definiálhatjuk.

Nyissa meg szerkesztésre a functions.php fájlt, amely a használt téma mappájában található, és adja hozzá a kódot:

Kód: add_action("wp_head", "show_head_scripts", 9999);
add_action("wp_footer", "show_footer_scripts", 9999);

// Felül jelenik meg, mielőtt kinyitná a törzset
függvény show_head_scripts()(
globális $wp_scripts;
visszhang ""; print_r($wp_scripts->done); visszhang "";
}
// Alul jelenik meg, a lábléc után
függvény show_footer_scripts()(
globális $wp_scripts;
visszhang ""; print_r($wp_scripts->done); visszhang "";
}

Most megnyitjuk az oldalt, megnézzük a forrását, és megnézzük a JS-fájlok elérési útjainak listáját (az oldal tetején és alján).

Javascript fájlok egy fájlba egyesítése a WordPressben

Az egyesítéshez össze kell gyűjteni a fájlok elérési útját, amely automatikusan felismerhető a tartalom megjelenítése előtt. A wp_enqueue_scripts hook alkalmas erre. Van itt néhány hátrány (lásd alább), de ez az egyetlen trükk, amelyet automatikusan alkalmazhatunk.

Hogyan történik (kódlogikai leírás):

1.) A javascript fájlleírót a függősége szerint másolja, hogy az összevonás után hibamentesen működjön. Ezt megtehetjük az all_deps metódus meghívásával a WP_Scripts objektumon ($wp_scripts->all_deps($wp_scripts->queue));

2.) Kód beszerzése javascript fájlokban (a file_get_contents használatával) és a többivel kombinálva. Beleértve a wp_localize_script honosítási parancsfájlt (ha van). Ez a szkript a $ wp_scripts-> regisztrált ["handle"] -> extra ["data"] alatt található

3.) A kombinált kód kiírása egy fájlba (a file_put_contents használatával) és betöltése a wp_enqueue_scripts függvény segítségével.

4.) Töröljük az összes összevont szkript/handle regisztrációját, ez az utolsó bekezdésben leírt folyamat befejezése után történik (ha törölünk egy szkriptet, akkor a függő szkriptje is törlődik).

Annak érdekében, hogy a motor elvégezze ezeket a feladatokat, illessze be a következő kódot a functions.php fájlba:

Kód: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
függvény merge_all_scripts()
{
globális $wp_scripts;

/*
#1. Rendezd át a fogantyúkat a függőségük alapján,
Az eredmény a to_do tulajdonságba kerül mentésre ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->queue);

// Új fájl helye: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "merged-script.js";

$merged_script = "";

// Javascript-fájlok ismétlése és mentése a $merged_script változóba
foreach($wp_scripts->to_do as $handle)
{
/*
Tisztítsa meg az URL-t, például wp-content/themes/wdc/main.js?v=1.2.4
lesz wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->registered[$handle]->src, "?");

/**
#2. Kombinálja a javascript fájlt.
*/
// Ha az src az url http / https
if (strpos($src, "http") !== false)
{
// Szerezze meg webhelyünk URL-jét, például: http://webdevzoom.com/wordpress
$site_url = site_url();

/*
Ha helyi szerveren vagyunk, módosítsa az url-t relatív elérési útra,
például. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
lesz: /wp-content/plugins/wpnewsman/css/menuicon.css,
ez a HTTP-kérés csökkentésére szolgál

Ha nem, pl. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
majd hagyd úgy ahogy van (kihagyjuk)
*/
if (strpos($src, $site_url) !== false)
$js_file_path = str_replace($site_url, "", $src);
más
$js_file_path = $src;

/*
A file_get_contents függvény használatához el kell távolítanunk a perjelet,
például. /wp-content/plugins/wpnewsman/css/menuicon.css
wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
más
{
$js_file_path = ltrim($src, "/");
}

// Ellenőrizze a későbbi fájl létezését, majd egyesítse
if (file_exists($js_file_path))
{
// #3. Ellenőrizze a wp_localize_script fájlt
$localize = "";
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) (
$localize = $obj->extra["adat"] . ";";
}
$merged_script .= $localize . file_get_contents($js_file_path) . ";";
}
}

// írja be az egyesített szkriptet az aktuális témakönyvtárba
file_put_contents($merged_file_location , $merged_script);

// #4. Töltse be az egyesített fájl URL-címét
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. A fogantyúk regisztrációjának törlése
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script($handle);
}
}

Ellenőrizze, hogy az egyesítés sikeres volt-e

Megyünk a blog oldalára, megnyitjuk a forrást, és megkeressük benne a mellékelt merged-script.js fájlt

Ezután győződjön meg arról, hogy az egyesített szkriptben nincsenek hibák a böngésző „fejlesztői eszközeinek” megnyitásával (nyomja meg az F12-t Google Chrome) és válassza a Konzol lapot.

A konzol megjeleníti a hiba szövegét, és utal arra a helyre, ahol a hiba történt. Ha nincsenek átkok a merged-script.js fájlon, akkor minden rendben van.

Ellenőrizze a többi olyan szkript működését, amelyek nem vettek részt az egyesítésben.

Eredeti angol nyelvű cikk, amit ott olvastál.

77

A CSS- és JS-fájlok konszolidálásával és tömörítésével próbálom optimalizálni a webhely teljesítményét. A kérdésem inkább a (konkrét) lépésekhez kapcsolódik, hogyan lehet ezt elérni, tekintettel a jelenlegi helyzetre (bár ez más fejlesztőknél is gyakori).

Egy termékkiadáshoz szeretnék 3 CSS-fájlt egyesíteni, és például a YUI Compressor segítségével kicsinyíteni. De akkor frissítenem kell az összes olyan oldalt, amelyen szükség van erre a 3 fájlra, hogy hivatkozzanak az újonnan megváltozott CSS-re. Úgy tűnik, hogy hibára hajlamos (pl. sok fájlban töröl és hozzáad néhány sort). Van más kevésbé kockázatos megközelítés? Ugyanez a probléma a JS fájlokkal.

• 13 válasz

Válogatás:

Tevékenység

12

Futtathatja egy hangya feladatban, és ezért beillesztheti az üzenetekbe/precommit hookokba, ha svn/git-et használ.

FRISSÍTÉS: Jelenleg a grundot használom a CONCAT-tal, lekicsinyítem és megcsonkítja a hozzájárulásokat. Használhatja figyelővel, így új minifájlokat hozhat létre háttér minden alkalommal, amikor a forrás változik. Az uglify contrib nemcsak a konzolnaplókat töri meg, hanem eltávolítja a nem használt függvényeket és tulajdonságokat is.

19

Frissítenem kell minden olyan oldalt, amelyen szüksége van erre a 3 fájlra, hogy hivatkozhassak az újonnan gyökerező CSS-re.

Először is azt mondanám, hogy legyen általános címe. Ezért, ha szükséges, nem szükséges az összes fejlécet módosítani. Jó gyakorlatok- legyen egy címsor vagy 2-3. Mivel szükség van az oldalára, megváltoztathatja a címét. Így ha ki szeretné bővíteni webalkalmazását, kevésbé lesz kockázatos és fárasztó.

Nem említetted a fejlesztői környezetedet. Látható, hogy számos tömörítőeszköz van felsorolva a különböző környezetekhez. És te használod jó eszköz azaz YUI kompresszor.

6

Nem látom, hogy megemlítenéd a tartalomkezelő rendszert (Wordpress, Joomla, Drupal stb.), de ha bármilyen népszerű CMS-t használsz, ott minden beépülő modul/modul elérhető (ingyenes opciók), amelyek csökkentik és gyorsítótárazzák a css-t és a js-t.

A beépülő modul használata lehetővé teszi a tömörítetlen verziók szerkeszthetővé tételét, majd a módosítások végrehajtásakor a beépülő modul automatikusan tartalmazza a módosításokat, és újratömöríti a fájlt. Csak győződjön meg arról, hogy olyan beépülő modult választ, amely lehetővé teszi a fájlok kizárását (pl. egyéni fájl js), ha eltör valamit.

A múltban megpróbáltam kézben tartani ezeket a fájlokat, és ez mindig karbantartási rémálommá válik. Sok sikert, remélem ez segített.

3

Ha előfeldolgozást végez a kiszolgált fájlokon, valószínűleg be kell állítania egy megfelelő összeállítási rendszert (például egy Makefile-t). Így a forrásfájlok nem duplikálódnak, és amikor változtatásokat hajt végre, futtatja a "make" parancsot, és frissíti az összes automatikusan generált fájlt. Ha a build rendszer már telepítve van, ismerje meg, hogyan működik és használja. Ha nem, akkor hozzá kell adnia.

Tehát először találja ki, hogyan egyesítheti és kicsinyítheti a fájlokat parancs sor(a YUICompressor dokumentációjában). Jelöljön ki egy könyvtárat az automatikusan generált dolgoknak, külön azoktól a dolgoktól, amelyeken dolgozik, de elérhető a webszerver számára, és ott adja ki a kimenetet, például gen/scripts/combination.js. Helyezze be a használt parancsokat a Makefile-ba, és ismételje meg a „make”-t minden alkalommal, amikor változtatást hajtott végre, és azt szeretné, hogy az életbe lépjen. Ezután frissítse a fejléceket a többi fájlban, hogy a kombinált és mini fájlokra mutasson.

5

Azok számára, akik valami könnyedebbre és rugalmasabbra vágynak, ma létrehoztam a js.sh-t a probléma megoldására. Ez egy egyszerű parancssori eszköz, amely a JS-fájlokat célozza meg, és könnyen módosítható, hogy gondoskodjon a CSS-fájlokról. Előnyök:

• könnyen konfigurálható több fejlesztő általi használatra egy projektben
• A JS-fájlokat a script_order.txt fájlban megadott sorrendben egyesíti
• tömöríti őket a Google Closure Compiler programmal
• A JS-t felosztja< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
• Létrehoz egy kis PHP fájl a megfelelő címkékkel
• Használat: js.sh -u yourname

Lehetne rajta némi fejlesztés, de az én használati esetemben jobb, mint az összes eddig látott megoldás.

4

Az első optimalizálás lépés a fájlok kicsinyítése. (A GULP-t nagyon ajánlom kicsinyítéshez és optimalizáláshoz. Egyszerű figyelő megoldás, telepítés és minden fájl egyszerre tömörítve. Támogatja az összes CSS-t, JS-t, less-t, sass-t stb.)

VAGY Old school megoldás:

1) Általában optimalizálási folyamatként, a webhely teljesítményének optimalizálása érdekében próbálja meg az összes CSS-t egy fájlba egyesíteni, és tömörítse a fájlt az Iránytű segítségével. Ily módon a statikus CSS-re vonatkozó több kérelmet egy helyettesíti.

2) Több JS-probléma, amelyet a CDN (vagy a Google Libraries által tárolt) használatával megoldhat, így a kérések egy másik szerverre érkeznek, mint az Öné. Így a szerver nem várja meg az előző kérés befejezését, mielőtt elküldi a következőt.

3) Ha saját, helyileg tárolt JavaScript-kóddal rendelkezik, rejtse el az egyes fájlokat a Brackets „JavaScript Compression” beépülő modul segítségével. A JavaScript tömörítése alapvetően egyetlen kattintással történik. zárójel- ingyenes szerkesztő CSS-hez és JS-hez, de használható PHP-hez és más nyelvekhez is. Számos beépülő modul közül választhat mind a front-end, mind a külső fejlesztők számára. Általánosságban elmondható, hogy "egy kattintás" az összes (eddig több) parancs végrehajtásához. Btw, a zárójelek váltották fel a nagyon drága Dreamweaveremet ;)

3) A CSS minimalizálása érdekében próbáljon meg olyan eszközöket használni, mint a Sass , Compass .

Megjegyzés: A CSS még keverés vagy változók használata nélkül is tömörítésre kerül (egyszerű használat tiszta CSSés a Compass "watch" parancsa tömöríti azt neked).

Remélem ez segít!

1

A szimfonikus projektemben valami ilyesmit csinálok

(# layout.html.twig #) (% blokkstílusok %) (% if app.environment == "prod" %) (% else %) (% endif %) (% endblock %) (# some-view.html .twig #) (% kiterjeszti az "AppMainBundle::layout.html.twig" %) (% blokkstílusok %) (( szülő() )) (% if app.environment != "prod" %) (% else %) (%endblock%)

Amikor a DEV verzió készen áll a gyártásra, használom

Olvasás 2 perc. Közzétéve 2017.04.20

Helló! Folytatjuk a legérdekesebb és leghasznosabb WordPress bővítmények elemzését! Ma megtudhatja, hogyan kombinálhat CSS- és JS-fájlokat webhelye optimalizálása érdekében. Alapértelmezés szerint az összes CSS- és JS-fájl külön-külön jelenik meg, így terhelés jön létre a webhelyen. Ezeket a fájlokat egy fájlba egyesítheti a webhely gyorsabb betöltődése érdekében. Nagyon egyszerű és hasznos plugin!

A bővítményt közvetlenül innen telepítheti WordPress adminisztrációs panelek. Menj az oldalra: Bővítmények – Új hozzáadása, írja be a bővítmény nevét a keresőmezőbe, nyomja meg az Enter billentyűt, telepítse és aktiválja a bővítményt.

– Használja az Iránytűt, jelölje be ezt a négyzetet a bővítmény engedélyezéséhez.

– Iránytű fordító elérési útja, a fájlok fordítójának elérési útja itt van feltüntetve.

– A Sass fordító elérési útja (csak .sass formátum esetén szükséges – .scss nem), CSS fájlok elérési útja (címe).

– CoffeeScript fordító elérési útja, szkriptek elérési útja.

– Stílusok tömörítése, stílusok optimalizálása.

– Szkriptek tömörítése, szkriptek optimalizálása.

– Aszinkron attribútum a lábléc szkriptcímkéjén, a szkriptek aszinkron betöltése.

– Kizárandó erőforrások, itt zárhat ki bizonyos szkripteket vagy stílusokat.

– Napló aktiválása, naplófájl napló engedélyezése.

– Fejlesztési mód, ha engedélyezve van adott paramétert, akkor az oldal minden újratöltésekor a gyorsítótár törlődik.

– Mentés, módosítások mentése.

– Ürítse ki az AssetsMinify gyorsítótárát, kattintson erre a fülre a gyorsítótár kézi törléséhez.

Minden készen áll! A beállítások mentése után a webhelyén található összes szkript és stílus egy fájlba egyesül. Ez a webhely forráskódjában megjelenő szkriptekre és stílusokra vonatkozik. Így weboldala gyorsabban töltődik be!

Az Object.assign() metódus minden felsorolható saját tulajdonságot másol egy vagy többről forrás objektumok a célobjektum. Visszaadja a célobjektumot.

Ennek az interaktív példának a forrása egy GitHub-tárolóban van tárolva. Ha szeretne hozzájárulni az interaktív példák projekthez, kérjük, klónozza a https://github.com/mdn/interactive-examples oldalt, és küldjön lehívási kérelmet.

Szintaxis Object.assign(target , ... sources) Paraméterek target A célobjektum - mire kell alkalmazni a forrás tulajdonságait, amely a módosítás után kerül visszaadásra. források A forrásobjektum(ok) – az alkalmazni kívánt tulajdonságokat tartalmazó objektumok. visszatérési értéket

A célobjektum.

Leírás

A célobjektum tulajdonságait felülírják a források tulajdonságai, ha ugyanaz a kulcsuk. Későbbi források" tulajdonságai felülírják a korábbiakat.

Az Object.assign() metódus csak másol felsorolhatóés saját tulajdonságait a forrásobjektumtól a célobjektumig. A []-t használja a forráson és a []-t a célon, így meghívja a gettereket és a settereket. Ezért azt hozzárendeli tulajdonságok, szemben a másolással vagy új tulajdonságok meghatározásával. Ez alkalmatlanná teheti új tulajdonságok prototípusba való egyesítését, ha az összevonási források gettereket tartalmaznak.

A tulajdonságdefiníciók (beleértve a felsorolhatóságukat) prototípusokba másolásához használja helyette az Object.getOwnPropertyDescriptor() és Object.defineProperty() függvényeket.

Mind a String, mind a Symbol tulajdonságok másolásra kerülnek.

Hiba esetén, például ha egy tulajdonság nem írható, egy TypeError jelenik meg, és a célobjektum megváltozik, ha bármilyen tulajdonság hozzáadásra kerül a hiba felbukkanása előtt.

Példák Objektum klónozása const obj = ( a: 1 ); const copy = Object.assign((), obj); konzolnapló(másolás); // ( a: 1 ) Figyelmeztetés a Deep Clone-ra

A mély klónozáshoz alternatívákat kell használnunk, mivel az Object.assign() a tulajdonságértékeket másolja.

Ha a forrásérték hivatkozás egy objektumra, akkor csak a referenciaértéket másolja.

Függvényteszt() ( "használjon szigorút"; legyen obj1 = ( a: 0 , b: ( c: 0)); legyen obj2 = Object.assign((), obj1); console.log(JSON.stringify(obj2) ); // ( "a": 0, "b": ( "c": 0)) obj1.a = 1; console.log(JSON. stringify(obj1)); // ( "a": 1, "b": ( "c": 0)) console.log(JSON.stringify(obj2)); // ( "a": 0, "b": ( "c": 0)) obj2.a = 2 ; console.log(JSON.stringify(obj1)); // ( "a": 1, "b": ( "c": 0)) console.log(JSON.stringify(obj2)); // ( " a": 2, "b": ( "c": 0)) obj2.b.c = 3; console.log(JSON.stringify(obj1)); // ( "a": 1, "b": ( " c": 3)) console.log(JSON.stringify(obj2)); // ( "a": 2, "b": ( "c": 3)) // Deep Clone obj1 = ( a: 0 , b: ( c: 0)); legyen obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // ( "a": 0, "b": ( "c": 0))) teszt();

Objektumok egyesítése const o1 = ( a: 1 ); const o2 = (b: 2); const o3 = (c: 3); const obj = Object.assign(o1, o2, o3); konzolnapló(obj); // ( a: 1, b: 2, c: 3 ) console.log(o1); // ( a: 1, b: 2, c: 3 ), maga a célobjektum megváltozik. Azonos tulajdonságú objektumok összevonása const o1 = ( a: 1, b: 1, c: 1 ); const o2 = (b:2, c:2); const o3 = (c: 3); const obj = Object.assign((), o1, o2, o3); konzolnapló(obj); // ( a: 1, b: 2, c: 3 )

A tulajdonságokat később a paraméterek sorrendjében felülírják más objektumok, amelyek ugyanazokkal a tulajdonságokkal rendelkeznek.

Szimbólumtípusú tulajdonságok másolása const o1 = ( a: 1 ); const o2 = ( : 2 ); const obj = Object.assign((), o1, o2); konzolnapló(obj); // ( a: 1, : 2 ) (vö. 1207182. hiba a Firefoxon) Object.getOwnPropertySymbols(obj); // A prototípus lánc tulajdonságai és a nem felsorolható tulajdonságok nem másolhatók const obj = Object.create(( foo: 1 ), ( // foo az obj prototípus láncán van. bar: ( érték: 2 // bar is nem felsorolható tulajdonság. ), baz: ( érték: 3, felsorolható: igaz // baz egy saját felsorolható tulajdonság. ) )); const copy = Object.assign((), obj); console.log(copy) ; // ( baz: 3 ) A primitívek objektumokba lesznek csomagolva const v1 = "abc"; const v2 = igaz; const v3 = 10; const v4 = Symbol("foo"); const obj = Object.assign(() , v1, null, v2, undefined, v3, v4); // A primitívek tördelve, a null és a meghatározatlan figyelmen kívül maradnak. // Megjegyzés, csak a karakterlánc-burkolók rendelkezhetnek saját felsorolható tulajdonságokkal. console.log(obj); / / ( "0": "a", "1": "b", "2": "c" ) A kivételek megszakítják a folyamatban lévő másolási feladatot const target = Object.defineProperty((), "foo", ( érték: 1 , írható: false )); // A target.foo egy csak olvasható tulajdonság Object.assign(target, ( bar: 2 ), ( foo2: 3, foo: 3, foo3: 3 ), ( baz: 4 ) ) ; // TypeError: "foo" csak olvasható // A kivétel a target.foo console.log(target.bar) hozzárendelésekor jelenik meg; // 2, az első forrás sikeresen másolása megtörtént. console.log(target.foo2); // 3, a második forrás első tulajdonsága sikeresen másolásra került. console.log(target.foo); // 1, a kivétel ide kerül. console.log(target.foo3); // undefined, a metódus hozzárendelése befejeződött, a foo3 nem lesz másolva. console.log(target.baz); // undefined, a harmadik forrás sem lesz másolva. Hozzáférők másolása const obj = ( foo: 1, get bar() ( return 2; ) ); let copy = Object.assign((), obj); konzolnapló(másolás); // ( foo: 1, bar: 2 ) // A copy. bar értéke obj. bar"s getter" visszatérési értéke. // Ez egy hozzárendelési függvény, amely a teljes leíró függvényt másolja a completeAssign(target, ...sources) ( sources.forEach(source => ( let descriptors = Object.keys(source).) reduce((descriptors, key) =>) descriptors = Object.getOwnPropertyDescriptor(forrás, kulcs); leírók visszaadása; ), ()); // Az Object.assign alapértelmezés szerint felsorolható szimbólumokat is másol Object.getOwnPropertySymbols(source).forEach(sym => ( legyen descriptor = Object .getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) ( leírók = leíró; ) )); Object.defineProperties(cél, leírók); )); cél visszatérése; ) copy = teljesKijelölés((), obj); konzolnapló(másolás); // ( foo:1, get bar() ( return 2 ) ) Polifill

Ez a többkitöltés nem támogatja a szimbólumtulajdonságokat, mivel az ES5 egyébként nem rendelkezik szimbólumokkal:

If (typeof Object.assign !== "function") ( // Írhatónak kell lennie: true, enumerable: false, konfigurálható: true Object.defineProperty(Object, "assign", ( érték: function assign(target, varArgs)) ( // A függvény .length értéke 2 "use strict"; if (target === null || target === undefined) ( throw new TypeError("A meghatározatlan vagy nullát nem lehet objektummá konvertálni"); ) var to = Object( cél); for (var index = 1; index< arguments.length; index++) { var nextSource = arguments; if (nextSource !== null && nextSource !== undefined) { for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to = nextSource; } } } } return to; }, writable: true, configurable: true }); }

Műszaki adatok Leírás

ECMAScript legújabb vázlat (ECMA-262) Az "Object.assign" meghatározása a specifikációban.

Böngésző kompatibilitás

Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készült. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.

Frissítse a kompatibilitási adatokat a GitHubon

Asztali mobil szerver Chrome Edge Firefox Internet Explorer Opera Safari Android webnézet Chrome Androidra Firefox Androidra Opera Androidra Safari iOS rendszeren Samsung Internet Node.jshozzárendelni

Chrome teljes támogatás 45

Edge Teljes támogatás 12

Firefox teljes támogatás 34

IE Nincs támogatás Nem

Opera teljes támogatás 32

A Safari teljes támogatása 9

WebView Android Teljes támogatás 45

Chrome Android Teljes támogatás 45

Firefox Android Teljes támogatás 34

Opera Android Teljes támogatás 32

Safari iOS teljes támogatás 9

Samsung Internet Android Teljes támogatás 5.0

nodejs Teljes támogatás 4.0.0

Jelmagyarázat Teljes támogatás Teljes támogatás Nincs támogatás Nincs támogatás

Két vagy több adott JavaScript objektum tartalmát egyesíti. Az egyesülés eredménye az első objektumra íródik (végrehajtása után a függvény is visszaadja). A funkciónak kétféle felhasználása van:

összefűzi az objektumok tartalmát cél, tárgy1,.., tárgyN, az eredményt objektumba helyezve cél.

Használati jellemzők

Ha kettő vagy több objektumot ad meg, az eredmény ezek egyesítése lesz. Ha csak egy objektumot ad meg, az extend() függvény hozzáadja a tartalmát a globális $ objektumhoz (jQuery). Így kibővítheti a könyvtár képességeit, ha saját függvényeket ad hozzá a névteréhez. Ez hasznos lehet bővítmények írásakor.

Emlékezzünk vissza, hogy az objektumok kombinálása eredményeként az első megváltozik (az extend() függvény végrehajtása eredményeként is visszakerül). Ha egyikre sincs szüksége adott tárgyakat nem változott, paraméterként beállítható célüres objektum:

var object = $.extend (( ) , object1, object2) ;

Rekurzív (mély) másolat

Objektumok egyesítésekor a megfelelő mezők felülíródnak:

var object1 = ( alma: 0 , cseresznye: 97 ) ; var object2 = ( alma: 5 , durian : 100 ) ; $.extend (objektum1, objektum2) ; /* Az eredmény: ( alma:5, cseresznye:97, durian:100 ); */

Alapértelmezés szerint az extend() sekély egyesülést hajt végre az objektumokon, ami azt jelenti, hogy ha más objektumokat is tartalmaznak, akkor az extend() felülírja őket, mint az előző esetben:

var object1 = ( alma: 0 , banán: ( súly: 52 , ár: 100 ) , cseresznye: 97 ) ; var object2 = ( banán: ( ár: 200 ) , durian: 100 ) ; $.extend (objektum1, objektum2) ; /* Eredmény: ( alma:0, banán:(ár:200), durian:100, cseresznye:97, ); */

ha azonban első paraméterként igazat ad meg, akkor a rendszer egy mélymásolást hajt végre, amelyben az egyesülési eljárást a belső objektumokra alkalmazza (ahelyett, hogy átírná, mint az előző esetben):

var object1 = ( alma: 0 , banán: ( súly: 52 , ár: 100 ) , cseresznye: 97 ) ; var object2 = ( banán: ( ár: 200 ) , durian: 100 ) ; $.extend (igaz , objektum1, tárgy2) ; /* Eredmény: ( alma:0, banán:(súly:52, ár:200), durian:100, cseresznye:97, ); */