ව්යුහගත ක්ලෝනකරණය
HTML ප්‍රමිතියට අභ්‍යන්තර ව්යුහගත ක්ලෝනකරණය / අනුක්‍රමිකකරණ ඇල්ගොරිතම ඇතුළත් වේ එමඟින් වස්තූන්ගේ ගැඹුරු ක්ලෝන නිර්මාණය කළ හැකිය. එය තවමත් ඇතැම් බිල්ට් වර්ග වලට සීමා වී ඇත, නමුත් JSON විසින් සහය දක්වන වර්ග කිහිපයකට අමතරව එය දින, රෙජෙක්ස්, සිතියම්, කට්ටල, බ්ලොබ්, ගොනු ලැයිස්තු, රූප දත්ත, විරල අරා, ටයිප් කළ අරා සහ අනාගතයේ දී තවත් බොහෝ දේ සඳහා සහය දක්වයි. . එය ක්ලෝන කරන ලද දත්ත තුළ ඇති යොමු කිරීම් ද ආරක්ෂා කරයි, එමඟින් JSON සඳහා දෝෂ ඇති විය හැකි චක්‍රීය හා පුනරාවර්තන ව්‍යුහයන්ට සහාය වීමට ඉඩ සලසයි.
Node.js හි සහාය: පර්යේෂණාත්මක
v8Node.js හි මොඩියුලය දැනට (Node 11 වන විට) ව්යුහාත්මක අනුක්‍රමික API සෘජුවම නිරාවරණය කරයි , නමුත් මෙම ක්‍රියාකාරිත්වය තවමත් "පර්යේෂණාත්මක" ලෙස සලකුණු කර ඇති අතර අනාගත අනුවාදවල වෙනස් කිරීමට හෝ ඉවත් කිරීමට යටත් වේ. ඔබ අනුකූල අනුවාදයක් භාවිතා කරන්නේ නම්, වස්තුවක් ක්ලෝන කිරීම තරම් සරල ය:
const v8 = require('v8');
const structuredClone = obj => {
return v8.deserialize(v8.serialize(obj));
};
බ්‍රව්සර්වල Support ජු සහාය: සමහර විට අවසානයේ? 😐
ව්යුහාත්මක ක්ලෝනින් ඇල්ගොරිතම සඳහා බ්‍රව්සර් දැනට සෘජු අතුරු මුහුණතක් සපයන්නේ නැත, නමුත් ගෝලීය structuredClone()ශ්‍රිතයක් GitHub හි whatwg / html # 793 හි සාකච්ඡා කර ඇත . දැනට යෝජනා කර ඇති පරිදි, බොහෝ අරමුණු සඳහා එය භාවිතා කිරීම තරම් සරල වනු ඇත:
const clone = structuredClone(original);
මෙය නැව්ගත නොකරන්නේ නම්, බ්‍රව්සර්වල ව්යුහගත ක්ලෝන ක්‍රියාත්මක කිරීම නිරාවරණය වන්නේ වක්‍රව පමණි.
අසමමුහුර්ත ක්‍රියාකාරිත්වය: භාවිතා කළ හැකිය. 😕
පවත්නා ඒපීඅයි සමඟ ව්යුහාත්මක ක්ලෝනයක් නිර්මාණය කිරීම සඳහා පහළ මට්ටමේ ක්රමය වන්නේ පණිවුඩ චැනල්වල එක් වරායක් හරහා දත්ත පළ කිරීමයි . අනෙක් වරාය messageඅමුණා ඇති ව්යුහාත්මක ක්ලෝනයක් සහිත සිදුවීමක් විමෝචනය කරයි .data. අවාසනාවකට මෙන්, මෙම සිදුවීම් වලට ඇහුම්කන් දීම අනිවාර්යයෙන්ම අසමමුහුර්ත වන අතර සමමුහුර්ත විකල්ප අඩු ප්රායෝගික වේ.
class StructuredCloner {
constructor() {
this.pendingClones_ = new Map();
this.nextKey_ = 0;
const channel = new MessageChannel();
this.inPort_ = channel.port1;
this.outPort_ = channel.port2;
this.outPort_.onmessage = ({data: {key, value}}) => {
const resolve = this.pendingClones_.get(key);
resolve(value);
this.pendingClones_.delete(key);
};
this.outPort_.start();
}
cloneAsync(value) {
return new Promise(resolve => {
const key = this.nextKey_++;
this.pendingClones_.set(key, resolve);
this.inPort_.postMessage({key, value});
});
}
}
const structuredCloneAsync = window.structuredCloneAsync =
StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);
උදාහරණ භාවිතය:
const main = async () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = await structuredCloneAsync(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
main();
සමමුහුර්ත වැඩකිරීම්: භයානකයි! 🤢
ව්යුහාත්මක ක්ලෝන සමමුහුර්තව නිර්මාණය කිරීම සඳහා හොඳ විකල්ප නොමැත. මෙන්න ඒ වෙනුවට ප්රායෝගික නොවන හක්ක කිහිපයක්.
history.pushState()හා history.replaceState()ඔවුන්ගේ පළමු තර්කය ව්යුහගත පරිගණක ක්රිඩාවට සමාන, සෑදීමට සහ එම අගය නියම දෙකම history.state. මෙවැනි ඕනෑම වස්තුවක ව්යුහාත්මක ක්ලෝනයක් නිර්මාණය කිරීමට ඔබට මෙය භාවිතා කළ හැකිය:
const structuredClone = obj => {
const oldState = history.state;
history.replaceState(obj, null);
const clonedObj = history.state;
history.replaceState(oldState, null);
return clonedObj;
};
උදාහරණ භාවිතය:
'use strict';
const main = () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = structuredClone(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
const structuredClone = obj => {
const oldState = history.state;
history.replaceState(obj, null);
const clonedObj = history.state;
history.replaceState(oldState, null);
return clonedObj;
};
main();
සමමුහුර්ත වුවද මෙය අතිශයින් මන්දගාමී විය හැකිය. එය බ්‍රව්සර් ඉතිහාසය හැසිරවීම හා සම්බන්ධ සියලු පොදු කාර්යයන්ට යටත් වේ. මෙම ක්රමය නැවත නැවත ඇමතීමෙන් ක්‍රෝම් තාවකාලිකව ප්‍රතිචාර නොදක්වයි.
මෙම Notificationඉදිකිරීමටත් එයට සම්බන්ධිත දත්ත ව්යුහගත පරිගණක ක්රිඩාවට සමාන නිර්මාණය කරයි. එය පරිශීලකයාට බ්‍රව්සර් දැනුම්දීමක් ප්‍රදර්ශනය කිරීමට ද උත්සාහ කරයි, නමුත් ඔබ දැනුම් දීමේ අවසරය ඉල්ලා නොමැති නම් මෙය නිහ ly ව අසාර්ථක වනු ඇත. ඔබට වෙනත් අරමුණු සඳහා අවසර තිබේ නම්, අපි වහාම නිර්මාණය කළ දැනුම්දීම වසා දමමු.
const structuredClone = obj => {
const n = new Notification('', {data: obj, silent: true});
n.onshow = n.close.bind(n);
return n.data;
};
උදාහරණ භාවිතය:
'use strict';
const main = () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = structuredClone(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
const structuredClone = obj => {
const n = new Notification('', {data: obj, silent: true});
n.close();
return n.data;
};
main();
