ஒரு கோப்பில் பல js ஐ எவ்வாறு இணைப்பது. வேர்ட்பிரஸில் உள்ள ஜாவாஸ்கிரிப்ட் கோப்புகளை ஒரு கோப்பாக இணைப்பது எப்படி

கொடுக்கப்பட்ட இரண்டு அல்லது அதற்கு மேற்பட்ட ஜாவாஸ்கிரிப்ட் பொருள்களின் உள்ளடக்கங்களை ஒருங்கிணைக்கிறது. தொழிற்சங்கத்தின் முடிவு இந்த பொருள்களில் முதன்மையானவற்றுக்கு எழுதப்பட்டுள்ளது (அதன் செயல்பாட்டிற்குப் பிறகு இது செயல்பாட்டின் மூலம் திருப்பித் தரப்படும்). செயல்பாடு இரண்டு பயன்பாடுகளைக் கொண்டுள்ளது:

பொருள்களின் உள்ளடக்கங்களை ஒருங்கிணைக்கிறது இலக்கு, பொருள்1,.., பொருள்என், முடிவை ஒரு பொருளில் வைப்பது இலக்கு.

பயன்பாட்டின் அம்சங்கள்

நீங்கள் இரண்டு அல்லது அதற்கு மேற்பட்ட பொருட்களைக் குறிப்பிட்டால், அதன் விளைவாக அவற்றின் தொழிற்சங்கமாக இருக்கும். நீங்கள் ஒரு பொருளை மட்டும் குறிப்பிட்டால், நீட்டிப்பு() செயல்பாடு அதன் உள்ளடக்கத்தை உலகளாவிய $ பொருளில் (jQuery) சேர்க்கும். எனவே, நூலகத்தின் பெயர்வெளியில் உங்கள் சொந்த செயல்பாடுகளைச் சேர்ப்பதன் மூலம் அதன் திறன்களை நீட்டிக்க முடியும். செருகுநிரல்களை எழுதும் போது இது பயனுள்ளதாக இருக்கும்.

பொருள்களை இணைப்பதன் விளைவாக, அவற்றில் முதலாவது மாற்றப்படும் என்பதை நினைவில் கொள்க (நீட்டிப்பு () செயல்பாட்டைச் செயல்படுத்துவதன் விளைவாக இது திரும்பப் பெறப்படும்). கொடுக்கப்பட்ட பொருள்கள் எதுவும் மாற்றப்படக்கூடாது என நீங்கள் விரும்பினால், நீங்கள் ஒரு அளவுருவாக அமைக்கலாம் இலக்குவெற்று பொருள்:

var பொருள் = $.நீட்டி (( ) , object1, object2) ;

சுழல்நிலை (ஆழமான) நகல்

பொருள்களை இணைக்கும்போது, ​​பொருந்தும் புலங்கள் மேலெழுதப்படும்:

var object1 = (ஆப்பிள்: 0, செர்ரி: 97) ; var பொருள்2 = (ஆப்பிள்: 5, துரியன்: 100) ; $.நீட்டி (object1, object2) ; /* முடிவு: (ஆப்பிள்:5, செர்ரி:97, துரியன்:100); */

முன்னிருப்பாக, நீட்டிப்பு() என்பது பொருள்களின் மீது ஒரு மேலோட்டமான தொழிற்சங்கத்தை செய்கிறது, அதாவது அவை உள்ளே மற்ற பொருட்களைக் கொண்டிருந்தால், நீட்டிப்பு() முந்தைய வழக்கில் இருந்ததைப் போலவே அவற்றை மேலெழுதும்:

var object1 = (ஆப்பிள்: 0, வாழைப்பழம்: (எடை: 52, விலை: 100) , செர்ரி: 97 ); var object2 = (வாழைப்பழம்: (விலை: 200) , துரியன்: 100 ); $.நீட்டி (object1, object2) ; /* முடிவு: (ஆப்பிள்:0, வாழைப்பழம்:(விலை:200), துரியன்:100, செர்ரி:97, ); */

இருப்பினும், நீங்கள் உண்மையை முதல் அளவுருவாகக் குறிப்பிட்டால், ஒரு ஆழமான நகல் செய்யப்படும், இதில் தொழிற்சங்க செயல்முறை உள் பொருள்களுக்குப் பயன்படுத்தப்படும் (முந்தைய வழக்கில் மீண்டும் எழுதுவதற்குப் பதிலாக):

var object1 = (ஆப்பிள்: 0, வாழைப்பழம்: (எடை: 52, விலை: 100) , செர்ரி: 97 ); var object2 = (வாழைப்பழம்: (விலை: 200) , துரியன்: 100 ); $.நீட்டி (உண்மை , பொருள்1, பொருள்2) ; /* முடிவு: (ஆப்பிள்:0, வாழைப்பழம்:(எடை:52, விலை:200), துரியன்:100, செர்ரி:97, ); */

இந்த நடவடிக்கை சேவையகத்திற்கான கோரிக்கைகளின் எண்ணிக்கையை குறைக்கிறது, இதனால் தளம் வேகமடைகிறது. இது குறிப்பாக HTTP1.1 மற்றும் 20 க்கும் மேற்பட்ட கோரிக்கைகள் தேவைப்படும் பக்கங்களுக்கு பொருந்தும். கூடுதலாக, இது சோதனையில் புள்ளிகளைச் சேர்க்கிறது (இது பலருக்கு மிக முக்கியமான விஷயம்).

வேர்ட்பிரஸில் உள்ள ஜாவாஸ்கிரிப்ட் கோப்புகளை ஒரு கோப்பாக இணைப்பது எப்படி - செருகுநிரல் இல்லாத முறை

பொதுவாக, இந்த பணிக்கான செருகுநிரல்கள் உள்ளன, ஆனால் அந்த செருகுநிரல்களுக்கான கருத்துகளில் மட்டுமே "இது வேலை செய்யாது" என்ற உணர்வில் நிறைய மதிப்புரைகள் உள்ளன.

நீங்கள் அதை "முழுமையாக கைமுறையாக" செய்தால், உங்கள் கைகளால் குறியீட்டின் அனைத்து குவியல்களையும் எடுத்து அவற்றை ஒரு கோப்பில் நகலெடுக்க வேண்டும். இது போன்ற பல குறைபாடுகள் இருப்பதால் இந்த முறை பரிந்துரைக்கப்படவில்லை:

1.) ஜாவாஸ்கிரிப்ட் கோப்பின் கைப்பிடி பெயரைக் கண்டுபிடிப்பது கடினம், இது CSS கோப்புகளுக்கு முரணானது, அங்கு ஐடி பண்புக்கூறின் கைப்பிடி பெயரைக் கண்டறிய முடியும். இந்த கைப்பிடி முக்கியமானது, ஏனெனில் ஒன்றிணைப்பு செயல்முறை முடிந்ததும் ஸ்கிரிப்ட்களை பதிவுநீக்க இது தேவைப்படுகிறது.

2.) நெகிழ்வுத்தன்மை இல்லாமை. ஜாவாஸ்கிரிப்ட் கோப்பின் கூட்டல் அல்லது கழித்தல் இருந்தால், அந்த கோப்பை கைமுறையாக மீண்டும் இணைக்க வேண்டும்.

3.) ஒருங்கிணைந்த குறியீடு துண்டுகள் முரண்படாது என்பதற்கு எந்த உத்தரவாதமும் இல்லை. இது செயல்பாட்டு அழைப்புகள் மற்றும் ஜாவாஸ்கிரிப்ட் மாறி ஸ்கோப்களின் வரிசையுடன் தொடர்புடையது.

வேர்ட்பிரஸ்ஸில் உள்ள ஜாவாஸ்கிரிப்ட் கோப்புகளை ஒரு கோப்பாக இணைப்பது எப்படி - தானாகவே

வேர்ட்பிரஸ்ஸில் ஜாவாஸ்கிரிப்ட் கோப்புகளை தானாக ஒன்றிணைக்க, நீங்கள் முதலில் ஜாவாஸ்கிரிப்ட் கோப்புகளுக்கான பாதைகளை அவற்றின் விளக்க பெயர்களுடன் சேகரிக்க வேண்டும் (கையேடு முறையைப் போன்றது, தானாகவே மட்டுமே).

வேர்ட்பிரஸ் பக்கத்தில் பதிவேற்றப்பட்ட ஜாவாஸ்கிரிப்ட் கோப்புகள் பற்றிய அனைத்து தகவல்களையும் பொருளில் காணலாம் WP_Scripts.

இந்த பொருள் ஒரு மாறியில் சேமிக்கப்படுகிறது $wp_scriptsமற்றும் போன்ற டெம்ப்ளேட் பிரிவுகளில் அழைக்கப்படுகின்றன wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init. மிகவும் பொதுவான இரண்டு வழக்குகள் இங்கே உள்ளன.

ஒருமுறை.தலையில் (குறிச்சொல் ) wp_head ஹூக்கைப் பயன்படுத்தி இதைத் தீர்மானிக்கலாம்.

த்வாஸ்.அடித்தளத்தில் (குறிச்சொல்லுக்கு முன்) wp_footer ஹூக்கைப் பயன்படுத்தி இதைத் தீர்மானிக்கலாம்.

பயன்படுத்தப்படும் தீம் கோப்புறையில் உள்ள எடிட்டிங் செய்ய functions.php கோப்பைத் திறந்து, குறியீட்டைச் சேர்க்கவும்:

குறியீடு: add_action("wp_head", "show_head_scripts", 9999);
add_action("wp_footer", "show_footer_scripts", 9999);

// உடலைத் திறப்பதற்கு முன், மேலே தோன்றும்
செயல்பாடு show_head_scripts()(
உலகளாவிய $wp_scripts;
எதிரொலி"

"; print_r($wp_scripts->done); எதிரொலி "
";
}
// அடிக்குறிப்புக்குப் பிறகு, கீழே ஸ்பான்
செயல்பாடு show_footer_scripts()(
உலகளாவிய $wp_scripts;
எதிரொலி"
"; print_r($wp_scripts->done); எதிரொலி "
";
}

இப்போது நாம் பக்கத்தைத் திறந்து, அதன் மூலத்தைப் பார்த்து, JS கோப்புகளுக்கான பாதைகளின் பட்டியலைப் பார்க்கிறோம் (பக்கத்தின் மேல் மற்றும் கீழ்).

வேர்ட்பிரஸில் ஜாவாஸ்கிரிப்ட் கோப்புகளை ஒரு கோப்பாக இணைத்தல்

ஒன்றிணைக்க, கோப்புகளுக்கான பாதைகளை நீங்கள் சேகரிக்க வேண்டும், அவை உள்ளடக்கம் காட்டப்படும் முன் தானாகவே கண்டறியப்படும். wp_enqueue_scripts ஹூக் இதற்கு ஏற்றது. இங்கே சில குறைபாடுகள் உள்ளன (கீழே விவரிக்கப்பட்டுள்ளது), ஆனால் இதுவே நாம் தானாகவே பயன்படுத்தக்கூடிய ஒரே தந்திரம்.

இது எவ்வாறு செய்யப்படுகிறது (குறியீடு தர்க்க விளக்கம்):

1.) ஜாவாஸ்கிரிப்ட் கோப்பு விளக்கத்தை அதன் சார்புக்கு ஏற்ப நகலெடுக்கிறது, இதனால் ஒன்றிணைந்த பிறகு அது பிழைகள் இல்லாமல் வேலை செய்ய முடியும். WP_Scripts ஆப்ஜெக்ட்டில் ($wp_scripts->all_deps($wp_scripts->வரிசை)) all_deps முறையை அழைப்பதன் மூலம் இதைச் செய்யலாம்;

2.) ஜாவாஸ்கிரிப்ட் கோப்புகளில் குறியீட்டைப் பெறுதல் (file_get_contents ஐப் பயன்படுத்தி) மற்றும் மீதமுள்ளவற்றுடன் இணைத்தல். உள்ளூர் ஸ்கிரிப்ட் wp_localize_script (ஏதேனும் இருந்தால்) உட்பட. இந்த ஸ்கிரிப்டை $ wp_scripts-> பதிவுசெய்யப்பட்ட ["கைப்பிடி"] -> கூடுதல் ["தரவு"] இல் காணலாம்

3.) ஒருங்கிணைந்த குறியீட்டை ஒரு கோப்பில் எழுதுதல் (file_put_contents ஐப் பயன்படுத்தி) மற்றும் wp_enqueue_scripts செயல்பாட்டைப் பயன்படுத்தி ஏற்றுதல்.

4.) ஒன்றிணைக்கப்பட்ட அனைத்து ஸ்கிரிப்ட்கள்/கைப்பிடிகளை பதிவுநீக்கவும், இது கடைசி பத்தியில் விவரிக்கப்பட்ட செயல்முறையை முடித்த பிறகு செய்யப்படுகிறது (நாம் ஒரு ஸ்கிரிப்டைப் பதிவு செய்வதை நீக்கினால், அதன் சார்பு ஸ்கிரிப்டும் பதிவு செய்யப்படாமல் இருக்கும்).

என்ஜின் இந்தப் பணிகளைச் செய்ய, பின்வரும் குறியீட்டை உங்கள் functions.php கோப்பில் ஒட்டவும்:

குறியீடு: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
செயல்பாடு merge_all_scripts()
{
உலகளாவிய $wp_scripts;

/*
#ஒன்று. அதன் சார்பு அடிப்படையில் கைப்பிடிகளை மறுவரிசைப்படுத்தவும்,
செய்ய வேண்டிய_பண்பில் முடிவு சேமிக்கப்படும் ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->வரிசை);

// புதிய கோப்பு இடம்: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DirectORY_SEPARATOR . "merged-script.js";

$merged_script = "";

// ஜாவாஸ்கிரிப்ட் கோப்புகளை லூப் செய்து $merged_script மாறியில் சேமிக்கவும்
foreach($wp_scripts->to_do as $handle)
{
/*
url ஐ சுத்தம் செய்யுங்கள், எடுத்துக்காட்டாக wp-content/themes/wdc/main.js?v=1.2.4
wp-content/themes/wdc/main.js ஆக
*/
$src = strtok($wp_scripts->registered[$handle]->src, "?");

/**
#2. ஜாவாஸ்கிரிப்ட் கோப்பை இணைக்கவும்.
*/
// src என்றால் url http / https
என்றால் (strpos($src, "http") !== false)
{
// எங்கள் தள url ஐப் பெறவும், எடுத்துக்காட்டாக: http://webdevzoom.com/wordpress
$site_url = site_url();

/*
நாங்கள் உள்ளூர் சேவையகத்தில் இருந்தால், urlஐ தொடர்புடைய பாதைக்கு மாற்றவும்,
எ.கா. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
ஆக: /wp-content/plugins/wpnewsman/css/menuicon.css,
இது HTTP கோரிக்கையை மீண்டும் பயன்படுத்துவதற்காக

இல்லை என்றால், எ.கா. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
பின்னர் அப்படியே விட்டு விடுங்கள் (நாங்கள் அதைத் தவிர்ப்போம்)
*/
என்றால் (strpos($src, $site_url) !== தவறு)
$js_file_path = str_replace($site_url, "", $src);
வேறு
$js_file_path = $src;

/*
file_get_contents செயல்பாட்டைப் பயன்படுத்த, நாம் ஸ்லாஷை அகற்ற வேண்டும்,
எ.கா. /wp-content/plugins/wpnewsman/css/menuicon.css
wp-content/plugins/wpnewsman/css/menuicon.css ஆக
*/
$js_file_path = ltrim($js_file_path, "/");
}
வேறு
{
$js_file_path = ltrim($src, "/");
}

// பின்னர் கோப்பு இருப்பதை சரிபார்த்து பின்னர் ஒன்றிணைக்கவும்
(கோப்பு_இருந்தால்($js_file_path))
{
// #3. wp_localize_script உள்ளதா எனச் சரிபார்க்கவும்
$localize = "";
(@key_exist இருந்தால்("தரவு", $wp_scripts->பதிவுசெய்யப்பட்ட[$handle]->கூடுதல்)) (
$localize = $obj->கூடுதல்["தரவு"] . ";";
}
$merged_script .= $localize . file_get_contents($js_file_path) . ";";
}
}

// இணைக்கப்பட்ட ஸ்கிரிப்டை தற்போதைய தீம் கோப்பகத்தில் எழுதவும்
file_put_contents($merged_file_location , $merged_script);

// #நான்கு. இணைக்கப்பட்ட கோப்பின் URL ஐ ஏற்றவும்
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");

// 5. கைப்பிடிகளை நீக்கவும்
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script ($ handle);
}
}

இணைப்பு வெற்றிகரமாக உள்ளதா என்பதைச் சரிபார்க்கவும்

நாங்கள் வலைப்பதிவு பக்கத்திற்குச் சென்று, மூலத்தைத் திறந்து அதில் உள்ள கோப்பைத் தேடுகிறோம் merged-script.js

உங்கள் உலாவியின் "டெவலப்பர் கருவிகளை" (Google Chrome இல் F12 ஐ அழுத்தவும்) திறந்து, கன்சோல் தாவலைத் தேர்ந்தெடுக்கவும்.

பணியகம் பிழையின் உரையைக் காட்டுகிறது மற்றும் அது நிகழ்ந்த இடத்தைக் குறிக்கிறது. merged-script.js கோப்பில் சாபங்கள் எதுவும் இல்லை என்றால், எல்லாம் சரியாக இருக்கும்.

இணைப்பில் பங்கேற்காத பிற ஸ்கிரிப்ட்களின் செயல்பாட்டைச் சரிபார்க்கவும்.

நீங்கள் பூனை அங்கு படித்த ஆங்கிலத்தில் அசல் கட்டுரை.

படித்தல் 2 நிமிடம். 20.04.2017 அன்று வெளியிடப்பட்டது

வணக்கம்!மிகவும் சுவாரஸ்யமான மற்றும் மிகவும் பயனுள்ள வேர்ட்பிரஸ் செருகுநிரல்களை நாங்கள் தொடர்ந்து பகுப்பாய்வு செய்கிறோம்! உங்கள் தளத்தை மேம்படுத்த CSS மற்றும் JS கோப்புகளை எவ்வாறு இணைப்பது என்பதை இன்று நீங்கள் கற்றுக் கொள்வீர்கள். இயல்பாக, அனைத்து CSS மற்றும் JS கோப்புகளும் தனித்தனியாகக் காட்டப்பட்டு, தளத்தில் ஒரு சுமையை உருவாக்குகிறது. தளத்தை வேகமாக ஏற்றுவதற்கு இந்தக் கோப்புகளை ஒரே கோப்பாக இணைக்கலாம். மிகவும் எளிமையான மற்றும் பயனுள்ள சொருகி!

நீங்கள் வேர்ட்பிரஸ் நிர்வாக குழுவிலிருந்து நேரடியாக செருகுநிரலை நிறுவலாம். பக்கத்திற்கு செல்: செருகுநிரல்கள் - புதியதைச் சேர்க்கவும் , தேடல் படிவத்தில் செருகுநிரலின் பெயரை உள்ளிட்டு, Enter ஐ அழுத்தி, செருகுநிரலை நிறுவி செயல்படுத்தவும்.


திசைகாட்டி பயன்படுத்தவும்,செருகுநிரலை இயக்க இங்கே பெட்டியை சரிபார்க்கவும்.

திசைகாட்டி கம்பைலர் பாதை,கோப்பு இசையமைப்பாளரின் பாதை இங்கே.

Sass கம்பைலரின் பாதை (.sass வடிவமைப்பிற்கு மட்டுமே தேவை - .scss அல்ல), CSS கோப்புகளுக்கான பாதை (முகவரி).

காபிஸ்கிரிப்ட் கம்பைலரின் பாதை,ஸ்கிரிப்ட்களுக்கான பாதை.

சுருக்க பாணிகள்,பாணிகளை மேம்படுத்தவும்.

அமுக்கி ஸ்கிரிப்டுகள்,ஸ்கிரிப்ட்களை மேம்படுத்தவும்.

அடிக்குறிப்பின் ஸ்கிரிப்ட் குறிச்சொல்லில் async பண்புக்கூறு,ஸ்கிரிப்ட்களை ஒத்திசைவற்ற முறையில் ஏற்றவும்.

விலக்குவதற்கான ஆதாரங்கள்இங்கே நீங்கள் சில ஸ்கிரிப்டுகள் அல்லது பாணிகளை விலக்கலாம்.

பதிவை செயல்படுத்தவும்,பதிவு கோப்புகளை பதிவு செய்வதை இயக்கவும்.

வளர்ச்சி முறை,நீங்கள் இந்த விருப்பத்தை இயக்கினால், ஒவ்வொரு முறையும் பக்கம் மீண்டும் ஏற்றப்படும் போது தற்காலிக சேமிப்பு நீக்கப்படும்.

சேமிக்க,உங்கள் மாற்றங்களைச் சேமிக்கவும்.

வெற்று சொத்துகள், மினிஃபையின் தற்காலிக சேமிப்பு,தற்காலிக சேமிப்பை கைமுறையாக அழிக்க இந்த தாவலைக் கிளிக் செய்யவும்.


எல்லாம் தயார்!அமைப்புகளைச் சேமித்த பிறகு, உங்கள் தளத்தில் உள்ள அனைத்து ஸ்கிரிப்ட்களும் ஸ்டைல்களும் ஒரே கோப்பில் இணைக்கப்படும். இது உங்கள் தளத்தின் மூலக் குறியீட்டில் தோன்றும் ஸ்கிரிப்டுகள் மற்றும் பாணிகளைக் குறிக்கிறது. இந்த வழியில் உங்கள் வலைத்தளம் வேகமாக ஏற்றப்படும்!

தி Object.assign()ஒன்று அல்லது அதற்கு மேற்பட்டவற்றிலிருந்து எண்ணக்கூடிய அனைத்து சொந்த பண்புகளின் முறை நகல்கள் மூல பொருள்கள்ஒரு இலக்கு பொருள். இது இலக்கு பொருளைத் திருப்பித் தருகிறது.

இந்த ஊடாடும் உதாரணத்திற்கான ஆதாரம் GitHub களஞ்சியத்தில் சேமிக்கப்பட்டுள்ளது. ஊடாடும் எடுத்துக்காட்டுகள் திட்டத்திற்கு நீங்கள் பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/interactive-examples ஐ க்ளோன் செய்து எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும்.

தொடரியல்

Object.assign(இலக்கு , ... ஆதாரங்கள்)

அளவுருக்கள்

இலக்கு பொருள் - ஆதாரங்களின் பண்புகளை எதற்குப் பயன்படுத்த வேண்டும், அது மாற்றியமைக்கப்பட்ட பிறகு திருப்பியளிக்கப்படும். ஆதாரங்கள் மூலப் பொருள்(கள்) - நீங்கள் விண்ணப்பிக்க விரும்பும் பண்புகளைக் கொண்ட பொருள்கள்.

திரும்ப மதிப்பு

இலக்கு பொருள்.

விளக்கம்

இலக்கு பொருளில் உள்ள பண்புகள் ஒரே விசையைக் கொண்டிருந்தால், மூலங்களில் உள்ள பண்புகளால் மேலெழுதப்படும். பிற்கால ஆதாரங்கள்" பண்புகள் முந்தையவற்றை மேலெழுதுகின்றன.

Object.assign() முறை நகலெடுக்கும் எண்ணத்தக்கமற்றும் சொந்தம்ஒரு மூலப் பொருளிலிருந்து இலக்கு பொருளுக்கு பண்புகள். இது [] மூலத்திலும் [] இலக்கிலும் பயன்படுத்துகிறது, எனவே அது பெறுபவர்களையும் அமைப்பாளர்களையும் அழைக்கும். எனவே அது ஒதுக்குகிறதுபண்புகள், நகலெடுப்பதற்கு எதிராக அல்லது புதிய பண்புகளை வரையறுத்தல். ஒன்றிணைக்கும் மூலங்களில் பெறுபவர்கள் இருந்தால், புதிய பண்புகளை ஒரு முன்மாதிரியாக இணைப்பது பொருத்தமற்றதாக இருக்கலாம்.

சொத்து வரையறைகளை (அவற்றின் எண்ணிக்கை உட்பட) முன்மாதிரிகளில் நகலெடுக்க, அதற்குப் பதிலாக Object.getOwnPropertyDescriptor() மற்றும் Object.defineProperty() ஐப் பயன்படுத்தவும்.

சரம் மற்றும் சின்னம் பண்புகள் இரண்டும் நகலெடுக்கப்படுகின்றன.

பிழை ஏற்பட்டால், எடுத்துக்காட்டாக, ஒரு சொத்து எழுத முடியாததாக இருந்தால், ஒரு TypeError எழுப்பப்படும், மேலும் பிழை எழுப்பப்படுவதற்கு முன்பு ஏதேனும் பண்புகள் சேர்க்கப்பட்டால் இலக்கு பொருள் மாற்றப்படும்.

எடுத்துக்காட்டுகள்

ஒரு பொருளை குளோனிங்

const obj = (a: 1); const copy = Object.assign((), obj); கன்சோல் பதிவு (நகல்); // (அ: 1)

ஆழமான குளோன் எச்சரிக்கை

ஆழமான குளோனிங்கிற்கு, நாம் மாற்றுகளைப் பயன்படுத்த வேண்டும், ஏனெனில் Object.assign() சொத்து மதிப்புகளை நகலெடுக்கிறது.

மூல மதிப்பு ஒரு பொருளின் குறிப்பாக இருந்தால், அது குறிப்பு மதிப்பை மட்டுமே நகலெடுக்கும்.

செயல்பாட்டு சோதனை() ("கண்டிப்பாகப் பயன்படுத்து"; obj1 = (a: 0, b: (c: 0)); 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)); obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // ( "a": 0, "b": ( "c": 0))) test();

பொருட்களை ஒன்றிணைத்தல்

const o1 = (a: 1); const o2 = (b: 2); const o3 = (c: 3); const obj = Object.assign(o1, o2, o3); கன்சோல் பதிவு (obj); // ( a: 1, b: 2, c: 3 ) console.log(o1); // ( a: 1, b: 2, c: 3 ), இலக்கு பொருளே மாற்றப்பட்டது.

ஒரே பண்புகளைக் கொண்ட பொருட்களை ஒன்றிணைத்தல்

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); கன்சோல் பதிவு (obj); // ( a: 1, b: 2, c: 3 )

அளவுருக்கள் வரிசையில் பின்னர் அதே பண்புகளைக் கொண்ட பிற பொருள்களால் பண்புகள் மேலெழுதப்படுகின்றன.

குறியீடு-தட்டப்பட்ட பண்புகளை நகலெடுக்கிறது

const o1 = (a: 1); const o2 = ( : 2 ); const obj = Object.assign((), o1, o2); கன்சோல் பதிவு (obj); // ( a: 1, : 2 ) (பயர்பாக்ஸில் cf. பிழை 1207182) Object.getOwnPropertySymbols(obj); //

முன்மாதிரி சங்கிலியின் பண்புகள் மற்றும் எண்ண முடியாத பண்புகளை நகலெடுக்க முடியாது

const obj = Object.create(( foo: 1 ), ( // foo is on obj's prototype chain. bar: ( value: 2 // bar is a non-numerable property. ), baz: (மதிப்பு: 3, எண்ணக்கூடியது: உண்மை // baz என்பது ஒரு சொந்த எண்ணக்கூடிய சொத்து. ) )); const copy = Object.assign((), obj); console.log(copy); // (baz: 3 )

முதற்பொருள்கள் பொருள்களுக்குப் போர்த்தப்படும்

const v1="abc"; const v2 = true; const v3 = 10; const v4 = சின்னம்("foo"); const obj = Object.assign((), v1, null, v2, undefined, v3, v4); // பழமையானவை மூடப்பட்டிருக்கும், பூஜ்யமானவை மற்றும் வரையறுக்கப்படாதவை புறக்கணிக்கப்படும். // குறிப்பு, சரம் ரேப்பர்கள் மட்டுமே அவற்றின் சொந்த எண்ணிடக்கூடிய பண்புகளைக் கொண்டிருக்க முடியும். கன்சோல் பதிவு (obj); // ( "0": "a", "1": "b", "2": "c" )

விதிவிலக்குகள் நடந்து கொண்டிருக்கும் நகலெடுக்கும் பணிக்கு இடையூறு விளைவிக்கும்

கான்ஸ்ட் இலக்கு = Object.defineProperty((), "foo", (மதிப்பு: 1, எழுதக்கூடியது: தவறு )); // target.foo என்பது படிக்க-மட்டும் சொத்து. assign(இலக்கு, (பார்: 2), (foo2: 3, foo: 3, foo3: 3), (baz: 4 )); // தட்டச்சுப் பிழை: "foo" என்பது படிக்க மட்டுமே // target.foo console.log(target.bar) ஐ ஒதுக்கும்போது விதிவிலக்கு எறியப்படும்; // 2, முதல் ஆதாரம் வெற்றிகரமாக நகலெடுக்கப்பட்டது. console.log(target.foo2); // 3, இரண்டாவது மூலத்தின் முதல் சொத்து வெற்றிகரமாக நகலெடுக்கப்பட்டது. console.log(target.foo); // 1, விதிவிலக்கு இங்கே கொடுக்கப்பட்டுள்ளது. console.log(target.foo3); // வரையறுக்கப்படவில்லை, ஒதுக்கும் முறை முடிந்தது, foo3 நகலெடுக்கப்படாது. console.log(target.baz); // வரையறுக்கப்படவில்லை, மூன்றாவது மூலமும் நகலெடுக்கப்படாது.

அணுகல்களை நகலெடுக்கவும்

const obj = (foo: 1, get bar() ( return 2; ) ); நகலெடுப்பதை விடுங்கள் = பொருள்.ஒதுக்கீடு((), obj); கன்சோல் பதிவு (நகல்); // (foo: 1, bar: 2 ) // நகல். பட்டியின் மதிப்பு obj. bar's getter's return value. // இது ஒரு ஒதுக்கீட்டுச் செயல்பாடாகும், இது முழு விளக்கமான செயல்பாடு முழுஅசைன்(இலக்கு, ...மூலங்கள்) (sources.forEach(source =>) (ஆதாரங்கள் = Object.keys(source)) குறைக்கலாம்((விளக்கங்கள், விசை) => ( descriptors = Object.getOwnPropertyDescriptor(source, key); return descriptors; ), ()); // முன்னிருப்பாக, Object.assign எண்ணக்கூடிய சின்னங்களையும், Object.getOwnPropertySymbols(source) forEach(sym => (ஆதாரம்) .getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) ( descriptors = descriptor; ) ); Object.defineProperties(இலக்கு, விளக்கங்கள்); )); திரும்ப இலக்கு; ) copy = completeAssign((), obj); கன்சோல் பதிவு (நகல்); // (foo:1, பெறு பட்டி() (திரும்ப 2 ) )

பாலிஃபில்

இந்த பாலிஃபில் குறியீட்டு பண்புகளை ஆதரிக்காது, ஏனெனில் ES5 இல் எப்படியும் குறியீடுகள் இல்லை:

(பொருள்.ஒதுக்கீடு வகை // .செயல்பாட்டின் நீளம் 2 "கண்டிப்பாகப் பயன்படுத்து"; என்றால் (இலக்கு === பூஜ்யம் || இலக்கு === வரையறுக்கப்படாதது) (புதிய TypeError("வரையறுக்கப்படாத அல்லது பூஜ்யத்தை பொருளாக மாற்ற முடியாது"); ) var to = Object( இலக்கு); (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 }); }

விவரக்குறிப்புகள்

விவரக்குறிப்பு
ECMAScript சமீபத்திய வரைவு (ECMA-262)
அந்த விவரக்குறிப்பில் "Object.assign" என்பதன் வரையறை.

உலாவி இணக்கத்தன்மை

இந்தப் பக்கத்தில் உள்ள பொருந்தக்கூடிய அட்டவணை கட்டமைக்கப்பட்ட தரவிலிருந்து உருவாக்கப்பட்டது. நீங்கள் தரவுக்கு பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/browser-compat-data ஐப் பார்க்கவும் மற்றும் எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும்.

GitHub இல் பொருந்தக்கூடிய தரவைப் புதுப்பிக்கவும்

டெஸ்க்டாப்கைபேசிசர்வர்
குரோம்விளிம்புபயர்பாக்ஸ்இன்டர்நெட் எக்ஸ்புளோரர்ஓபராசஃபாரிஆண்ட்ராய்டு வெப்வியூAndroidக்கான ChromeAndroid க்கான Firefoxஆண்ட்ராய்டுக்கான ஓபராiOS இல் Safariசாம்சங் இணையம்Node.js
ஒதுக்ககுரோம் முழு ஆதரவு 45எட்ஜ் முழு ஆதரவு 12பயர்பாக்ஸ் முழு ஆதரவு 34IE ஆதரவு இல்லைஓபரா முழு ஆதரவு 32சஃபாரி முழு ஆதரவு 9WebView Android முழு ஆதரவு 45Chrome Android முழு ஆதரவு 45பயர்பாக்ஸ் ஆண்ட்ராய்டு முழு ஆதரவு 34Opera Android முழு ஆதரவு 32சஃபாரி iOS முழு ஆதரவு 9சாம்சங் இணைய ஆண்ட்ராய்டு முழு ஆதரவு 5.0nodejs முழு ஆதரவு 4.0.0

புராண

முழு ஆதரவுமுழு ஆதரவு ஆதரவு இல்லைஆதரவு இல்லை

77

CSS மற்றும் JS கோப்புகளை ஒருங்கிணைத்து சுருக்கி தளத்தின் செயல்திறனை மேம்படுத்த முயற்சிக்கிறேன். நான் எதிர்கொள்ளும் உண்மையான சூழ்நிலையில் இதை எவ்வாறு அடைவது என்பதற்கான (கான்கிரீட்) படிகளுடன் எனது கேள்வி மிகவும் தொடர்புடையது (இது மற்ற டெவலப்பர்களுக்கும் பொதுவானதாக இருக்க வேண்டும் என்றாலும்).

தயாரிப்பு வெளியீட்டிற்கு, 3 CSS கோப்புகளை ஒன்றாக இணைத்து, எ.கா. YUI கம்ப்ரஸரைப் பயன்படுத்தி சிறியதாக்க விரும்புகிறேன். ஆனால், புதிதாக மாற்றப்பட்ட CSSஐக் குறிப்பிட, அந்த 3 கோப்புகள் தேவைப்படும் எல்லா பக்கங்களையும் நான் புதுப்பிக்க வேண்டும். இது பிழையாகத் தெரிகிறது (எ.கா. நீங்கள் நீக்கி, பல கோப்புகளில் சில வரிகளைச் சேர்க்கவும்). வேறு ஏதேனும் குறைவான ஆபத்தான அணுகுமுறை? JS கோப்புகளுக்கும் இதே பிரச்சினை.

  • 13 பதில்கள்
  • வரிசைப்படுத்துதல்:

    செயல்பாடு

12

நீங்கள் அதை ஒரு எறும்புப் பணியில் இயக்கலாம், எனவே நீங்கள் svn/git ஐப் பயன்படுத்தினால், அதை உங்கள் செய்திகளில்/முன் கமிட் ஹூக்குகளில் சேர்க்கலாம்.

புதுப்பிப்பு:தற்போது நான் CONCAT, குறைமதிப்பு மற்றும் சிதைக்கும் பங்களிப்புகளுடன் கிரண்ட் பயன்படுத்துகிறேன். நீங்கள் ஒரு கண்காணிப்பாளருடன் இதைப் பயன்படுத்தலாம், இதன் மூலம் ஆதாரம் மாறும்போதெல்லாம் பின்னணியில் புதிய மினிஃபைல்களை உருவாக்கும். uglify contrib கன்சோல் பதிவுகளை உடைப்பது மட்டுமல்லாமல், பயன்படுத்தப்படாத செயல்பாடுகள் மற்றும் பண்புகளை நீக்குகிறது.

19

புதிதாக வேரூன்றிய CSSஐக் குறிப்பிட, இந்த 3 கோப்புகள் தேவைப்படும் எல்லா பக்கங்களையும் நான் புதுப்பிக்க வேண்டும்.

முதலில், உங்களுக்கு ஒரு பொதுவான தலைப்பு இருக்க வேண்டும் என்று நான் கூறுவேன். எனவே, தேவையான போது, ​​அனைத்து தலைப்புகளையும் மாற்ற வேண்டிய அவசியமில்லை. ஒரு தலைப்பு அல்லது 2-3 இருப்பது நல்ல நடைமுறை. உங்கள் பக்கம் தேவை என்பதால், உங்கள் தலைப்பை மாற்றலாம். எனவே உங்கள் இணைய பயன்பாட்டை நீட்டிக்க விரும்பினால், அது குறைவான அபாயகரமானதாகவும், கடினமானதாகவும் இருக்கும்.

உங்கள் வளர்ச்சி சூழலை நீங்கள் குறிப்பிடவில்லை. வெவ்வேறு சூழல்களுக்குப் பல சுருக்கக் கருவிகள் பட்டியலிடப்பட்டிருப்பதைக் காணலாம். நீங்கள் ஒரு நல்ல கருவியை அதாவது YUI கம்ப்ரஸரைப் பயன்படுத்துகிறீர்கள்.

6

நீங்கள் உள்ளடக்க மேலாண்மை அமைப்பு (Wordpress, Joomla, Drupal, போன்றவை) குறிப்பிடுவதை நான் காணவில்லை, ஆனால் நீங்கள் ஏதேனும் பிரபலமான CMS ஐப் பயன்படுத்தினால், அவற்றில் அனைத்து செருகுநிரல்கள்/தொகுதிகள் உள்ளன (இலவச விருப்பங்கள்) அவை உங்கள் css மற்றும் js ஐக் குறைக்கும் மற்றும் தேக்கிக்கொள்ளும்.

ஒரு செருகுநிரலைப் பயன்படுத்துவது சுருக்கப்படாத பதிப்புகளைத் திருத்தக்கூடியதாக வைத்திருக்கும் திறனை வழங்குகிறது, பின்னர் நீங்கள் மாற்றங்களைச் செய்யும்போது, ​​செருகுநிரல் தானாகவே உங்கள் மாற்றங்களைச் சேர்த்து கோப்பை மீண்டும் சுருக்குகிறது. நீங்கள் ஒரு செருகுநிரலைத் தேர்வுசெய்துள்ளீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், அது ஏதேனும் உடைந்தால், கோப்புகளை (தனிப்பயன் js கோப்பு போன்றவை) விலக்க அனுமதிக்கும்.

இந்த கோப்புகளை கையில் வைத்திருக்க நான் கடந்த காலத்தில் முயற்சித்தேன், அது எப்போதும் ஒரு பராமரிப்பு கனவாக மாறும். நல்ல அதிர்ஷ்டம், இது உதவியது என்று நம்புகிறேன்.

3

நீங்கள் சேவை செய்யும் கோப்புகளை முன் செயலாக்கம் செய்கிறீர்கள் என்றால், நீங்கள் ஒரு முறையான உருவாக்க அமைப்பை (மேக்ஃபைல் போன்றவை) அமைக்க விரும்புவீர்கள். இந்த வழியில் நீங்கள் மூலக் கோப்புகளை நகல் இல்லாமல் வைத்திருக்கிறீர்கள் மற்றும் நீங்கள் மாற்றங்களைச் செய்யும் போதெல்லாம் "உருவாக்கு" என்பதை இயக்கி, தானாகவே உருவாக்கப்பட்ட அனைத்து கோப்புகளையும் புதுப்பிக்கவும். பில்ட் சிஸ்டம் ஏற்கனவே நிறுவப்பட்டிருந்தால், அது எவ்வாறு செயல்படுகிறது மற்றும் பயன்படுத்துகிறது என்பதை அறியவும். இல்லையெனில், நீங்கள் அதை சேர்க்க வேண்டும்.

எனவே, கட்டளை வரியிலிருந்து (YUICompressor ஆவணத்தில்) உங்கள் கோப்புகளை எவ்வாறு இணைப்பது மற்றும் சிறியதாக்குவது என்பதை முதலில் கண்டுபிடிக்கவும். தானாக உருவாக்கப்படும் பொருட்களுக்கான கோப்பகத்தை அமைக்கவும், நீங்கள் பணிபுரியும் ஆனால் இணைய சேவையகத்திற்குக் கிடைக்கும் பொருட்களிலிருந்து தனித்தனியாக, gen/scripts/combination.js போன்றவற்றை வெளியிடவும். நீங்கள் பயன்படுத்திய கட்டளைகளை Makefile இல் வைத்து, ஒவ்வொரு முறையும் நீங்கள் மாற்றங்களைச் செய்து, அது நடைமுறைக்கு வர விரும்பினால் "make" என்பதை மீண்டும் செய்யவும். காம்போ மற்றும் மினி கோப்புகளை சுட்டிக்காட்ட மற்ற கோப்புகளில் உள்ள தலைப்புகளைப் புதுப்பிக்கவும்.

5

கொஞ்சம் இலகுவான மற்றும் நெகிழ்வான ஒன்றை விரும்பும் நபர்களுக்காக, இந்த சிக்கலை தீர்க்க இன்று js.sh ஐ உருவாக்கினேன். இது JS கோப்புகளை இலக்காகக் கொண்ட எளிய கட்டளை வரி கருவியாகும், இது CSS கோப்புகளை கவனித்துக்கொள்வதற்கு எளிதாக மாற்றியமைக்கப்படலாம். நன்மைகள்:

  • ஒரு திட்டத்தில் பல டெவலப்பர்கள் பயன்படுத்த எளிதாக கட்டமைக்கப்பட்டது
  • script_order.txt இல் குறிப்பிடப்பட்டுள்ள வரிசையில் JS கோப்புகளை ஒருங்கிணைக்கிறது
  • கூகுளின் மூடல் கம்பைலர் மூலம் அவற்றை சுருக்குகிறது
  • JS ஐ பிரிக்கிறது< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
  • ஒரு சிறிய PHP கோப்பை உருவாக்குகிறது
  • செர்ஜி சாவென்கோவ்

    சில வகையான "குறைவான" விமர்சனம் ... எங்கோ அவசரத்தில் இருப்பது போல்