ජාවාස්ක්රිප්ට් හි පැරණි අනුවාදයන්ට ආනයනය කිරීම, ඇතුළත් කිරීම හෝ අවශ්‍යතාවයක් නොතිබුණි, එබැවින් මෙම ගැටළුව සඳහා විවිධ ප්‍රවේශයන් වර්ධනය කර ඇත.
නමුත් 2015 (ES6) සිට, ජාවා ස්ක්රිප්ට් තිබුනේ ES6 මොඩියුල ද සහයෝගය ද, Node.js ආනයන මොඩියුලයක් සම්මත බොහෝ නවීන බ්රවුසරයන් .
පැරණි බ්රව්සර් සමඟ අනුකූල වීම සඳහා, වෙබ් පැක් සහ රෝල්අප් වැනි මෙවලම් සහ / හෝ බාබෙල් වැනි පාරදෘශ්‍ය මෙවලම් සාදන්න භාවිතා කළ හැකිය.
ES6 මොඩියුල
ධජය සමඟ v8.5 සිට ECMAScript (ES6) මොඩියුලයන් Node.js හි සහය දක්වා ඇති අතර --experimental-modulesධජය නොමැතිව අවම වශයෙන් Node.js v13.8.0 සිට. "ESM" (එදිරිව Node.js මීට පෙර CommonJS ආකාරයේ මොඩියුලය පද්ධතිය [ "CJS"]) ඔබ එක්කෝ භාවිතා සක්රිය කිරීමට "type": "module"දී package.jsonහෝ ලබා දෙන දීර්ඝ ලිපි ගොණු .mjs. (ඒ හා සමානව, .cjsඔබේ පෙරනිමිය ESM නම් Node.js හි පෙර CJS මොඩියුලය සමඟ ලියා ඇති මොඩියුල නම් කළ හැකිය .)
භාවිතා කිරීම package.json:
{
"type": "module"
}
ඉන්පසු module.js:
export function hello() {
return "Hello";
}
ඉන්පසු main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
භාවිතා කරමින් .mjs, ඔබට ඇත්තේ module.mjs:
export function hello() {
return "Hello";
}
ඉන්පසු main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
බ්‍රව්සර්වල ECMAScript මොඩියුල
වෙබ් බ්රව්සර සෘජුවම සම්මතයන් මොඩියුලයන් පැටවීම සඳහා සහයෝගය තිබුණා (Webpack වැනි කිසිදු ආයුධ හා උපකරණ) සිට සෆාරි 10.1, ක්රෝම් 61, ෆයර්ෆොක්ස් 60, සහ එජ් 16. දී වත්මන් සහාය පරීක්ෂා කරන්න caniuse . Node.js .mjsදිගුව භාවිතා කිරීමට අවශ්‍ය නැත ; මොඩියුල / ස්ක්රිප්ට් මත ගොනු දිගු කිරීම බ්රව්සර් සම්පූර්ණයෙන්ම නොසලකා හරියි.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
වැඩිදුර කියවන්න https://jakearchibald.com/2017/es-modules-in-browsers/
බ්‍රව්සර්වල ගතික ආනයන
ගතික ආනයන මඟින් ස්ක්‍රිප්ටයට අවශ්‍ය පරිදි වෙනත් ස්ක්රිප්ට් පූරණය කිරීමට ඉඩ දෙයි:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
වැඩිදුර කියවන්න https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js අවශ්‍යයි
පැරණි CJS මොඩියුල විලාසය, තවමත් Node.js හි බහුලව භාවිතා වේ, module.exports/require පද්ධතිය වේ.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
පූර්ව සැකසුම් අවශ්‍ය නොවන බ්‍රව්සර්වල බාහිර ජාවාස්ක්රිප්ට් අන්තර්ගතයන් ඇතුළත් කිරීමට ජාවාස්ක්රිප්ට් සඳහා වෙනත් ක්‍රම තිබේ.
AJAX පැටවීම
ඔබට AJAX ඇමතුමකින් අමතර ස්ක්‍රිප්ටයක් පටවා evalඑය ක්රියාත්මක කිරීමට භාවිතා කළ හැකිය. මෙය වඩාත් සරලම ක්‍රමයයි, නමුත් එය ජාවාස්ක්රිප්ට් සෑන්ඩ්බොක්ස් ආරක්ෂක ආකෘතිය නිසා එය ඔබගේ වසමට සීමා වේ. භාවිතා කිරීමeval කිරීම දෝෂ, හක්ක සහ ආරක්ෂක ගැටළු සඳහා දොර විවර කරයි.
පැටවීම ලබා ගන්න
ෆයිච් ඉන්ජෙක්ට් පුස්තකාලය fetchභාවිතයෙන් ස්ක්රිප්ට් පරායත්තතාවයන් ක්රියාත්මක කිරීමේ අනුපිළිවෙල පාලනය කිරීම සඳහා පොරොන්දු භාවිතා කරමින් ඩයිනමික් ආනයන මෙන් ඔබට ඇමතුමක් සමඟ ස්ක්රිප්ට් එකක් හෝ කිහිපයක් පූරණය කළ හැකිය :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
jQuery පැටවීම
මෙම jQuery පුස්තකාල පැටවීම ක්රියාකාරිත්වය සපයයි එක් අනුකූලව :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
ගතික ස්ක්රිප්ට් පූරණය
ඔබට ස්ක්රිප්ට් URL සමඟ ස්ක්රිප්ට් ටැග් එකක් HTML එකට එක් කළ හැකිය. JQuery හි පොදු කාර්ය වළක්වා ගැනීම සඳහා මෙය කදිම විසඳුමකි.
ස්ක්‍රිප්ටයට වෙනත් සේවාදායකයක වාසය කළ හැකිය. තවද, බ්‍රව්සරය කේතය ඇගයීමට ලක් කරයි. මෙම <script>වෙබ් පිටුව හෝ බවට ටැගය ඖෂධයක් එන්නත් කළ හැකි <head>, හෝ හුදෙක් අවසන් පෙර, ඇතුළු </body>ටැගය.
මෙය ක්රියාත්මක විය හැකි ආකාරය පිළිබඳ උදාහරණයක් මෙන්න:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
මෙම ශ්‍රිතය <script>පිටුවේ ප්‍රධාන කොටසේ කෙළවරට නව ටැගයක් එක් කරයි , එහිදීsrc ගුණාංගය URL වෙත සකසා ඇති අතර එය පළමු පරාමිතිය ලෙස ශ්‍රිතයට ලබා දේ.
මෙම විසඳුම් දෙකම ජාවාස්ක්රිප්ට් පිස්සුව: ගතික ස්ක්රිප්ට් ලෝඩින් හි සාකච්ඡා කර නිදර්ශනය කර ඇත .
ස්ක්රිප්ට් ක්රියාත්මක වූ විට හඳුනා ගැනීම
දැන්, ඔබ දැනගත යුතු විශාල ප්‍රශ්නයක් තිබේ. එසේ කිරීමෙන් ඔබ කේතය දුරස්ථව පටවන බව අඟවයි . නවීන වෙබ් බ්රව්සර් මඟින් ගොනුව පටවා ඔබගේ වර්තමාන ස්ක්රිප්ට් එක දිගටම කරගෙන යනු ඇත. (මෙය jQuery ක්‍රමය සහ අතින් ගතික ස්ක්රිප්ට් පැටවීමේ ක්‍රමය යන දෙකටම අදාළ වේ.)
එයින් අදහස් වන්නේ ඔබ මෙම උපක්‍රම කෙලින්ම භාවිතා කරන්නේ නම්, ඔබ එය පටවන ලෙස ඉල්ලා සිටීමෙන් පසු ඊළඟ පේළියේ අලුතින් පටවන ලද කේතය භාවිතා කිරීමට ඔබට නොහැකි වනු ඇති බැවින් එය තවමත් පටවනු ලැබේ.
උදාහරණයක් ලෙස: my_lovely_script.jsඅඩංගු MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
ඉන්පසු ඔබ පිටු පහර නැවත රීලෝඩ් කරන්න F5. එය ක්රියාත්මක වේ! අවුල් සහගත ...
ඉතින් ඒ ගැන කුමක් කළ යුතුද?
හොඳයි, මා ඔබට ලබා දුන් සබැඳියෙන් කතුවරයා යෝජනා කරන හැක් ඔබට භාවිතා කළ හැකිය. සාරාංශයක් ලෙස, කඩිමුඩියේ සිටින පුද්ගලයින් සඳහා, ස්ක්රිප්ට් පටවන විට ඔහු නැවත ඇමතුම් ශ්‍රිතයක් ක්රියාත්මක කිරීමට සිදුවීමක් භාවිතා කරයි. එබැවින් ඔබට දුරස්ථ පුස්තකාලය භාවිතයෙන් සියලුම කේත ඇමතුම් ලබා ගැනීමේ ශ්‍රිතයට ඇතුළත් කළ හැකිය. උදාහරණයක් වශයෙන්:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
ලැම්බඩා ශ්‍රිතයක් තුළ ස්ක්රිප්ට් පටවා ඇති පසු ඔබට භාවිතා කිරීමට අවශ්‍ය කේතය ඔබ ලියයි :
var myPrettyCode = function() {
// Here, do whatever you want
};
එවිට ඔබ ඒ සියල්ල ක්රියාත්මක කරයි:
loadScript("my_lovely_script.js", myPrettyCode);
ස්ක්රිප්ට් එක DOM පූරණය කිරීමෙන් පසුව හෝ ඊට පෙර බ්‍රව්සරය මත පදනම්ව සහ ඔබ රේඛාව ඇතුළත් කළේද යන්න සැලකිල්ලට ගන්න script.async = false;. එය තියෙනවා පොදුවේ ජාවාස්ක්රිප්ට් පැටවීම කැකිල්ලේ මහා මෙම සාකච්ඡා කරන.
ප්‍රභව කේතය ඒකාබද්ධ කිරීම / පෙර සැකසීම
මෙම පිළිතුරේ ඉහළින් සඳහන් කළ පරිදි, බොහෝ සංවර්ධකයින් ඔවුන්ගේ ව්‍යාපෘති වලදී පාර්සල්, වෙබ් පැක් හෝ බාබෙල් වැනි ගොඩනැඟිලි / පාරදෘශ්‍ය මෙවලම් භාවිතා කරයි, ඔවුන්ට ඉදිරියට එන ජාවාස්ක්රිප්ට් සින්ටැක්ස් භාවිතා කිරීමට ඉඩ සලසයි, පැරණි බ්රව්සර් සඳහා පසුගාමී අනුකූලතාවයක් සපයයි, ලිපිගොනු ඒකාබද්ධ කරයි, අවම කරන්න, කේත බෙදීම ආදිය සිදු කරන්න.