স্ট্রাকচার্ড ক্লোনিং
এইচটিএমএল স্ট্যান্ডার্ডটিতে একটি অভ্যন্তরীণ কাঠামোগত ক্লোনিং / সিরিয়ালাইজেশন অ্যালগরিদম অন্তর্ভুক্ত যা বস্তুর গভীর ক্লোন তৈরি করতে পারে। এটি এখনও কিছু অন্তর্নির্মিত প্রকারের মধ্যেই সীমাবদ্ধ, তবে জেএসওএন সমর্থিত কয়েকটি প্রকারের পাশাপাশি এটি তারিখ, রেজিএক্স্পস, মানচিত্র, সেটস, ব্লবস, ফাইললিস্টস, ইমেজড্যাটাস, স্পারস অ্যারে, টাইপড অ্যারে এবং সম্ভবত ভবিষ্যতে আরও অনেক কিছু সমর্থন করে । এটি ক্লোনযুক্ত ডেটাতে রেফারেন্সগুলি সংরক্ষণ করে, এটি চক্রীয় এবং পুনরাবৃত্ত কাঠামোগুলি সমর্থন করে যাতে জেএসএনের জন্য ত্রুটি ঘটায়।
নোড.জেজে সমর্থন: পরীক্ষামূলক 🙂
v8নোড.জেএস- এ মডিউল বর্তমানে (নোড 11 হিসাবে) সরাসরি কাঠামোগত সিরিয়ালাইজেশন এপিআই প্রকাশ করেছে তবে এই কার্যকারিতাটি এখনও "পরীক্ষামূলক" হিসাবে চিহ্নিত হয়েছে এবং ভবিষ্যতের সংস্করণগুলিতে পরিবর্তন বা অপসারণের বিষয় হিসাবে চিহ্নিত। আপনি যদি কোনও সামঞ্জস্যপূর্ণ সংস্করণ ব্যবহার করেন তবে কোনও অবজেক্টের ক্লোনিং করা এতটাই সহজ:
const v8 = require('v8');
const structuredClone = obj => {
return v8.deserialize(v8.serialize(obj));
};
ব্রাউজারগুলিতে সরাসরি সমর্থন: সম্ভবত শেষ পর্যন্ত? 😐
ব্রাউজারগুলি বর্তমানে কাঠামোগত ক্লোনিং অ্যালগরিদমের জন্য সরাসরি ইন্টারফেস সরবরাহ করে না, তবে গিটহাবের হোয়াইটএইচজিএইচটিএমএল # 793 এ একটি বিশ্বব্যাপী structuredClone()ফাংশন নিয়ে আলোচনা করা হয়েছে । বর্তমানে প্রস্তাবিত হিসাবে, বেশিরভাগ উদ্দেশ্যে এটি ব্যবহার করা যেমন সহজ হবে:
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কন্সট্রাকটর তার সংশ্লিষ্ট ডেটার গঠিত ক্লোন তৈরি করে। এটি ব্যবহারকারীর কাছে একটি ব্রাউজার বিজ্ঞপ্তি প্রদর্শন করার চেষ্টাও করে, তবে আপনি নোটিফিকেশন অনুমতির অনুরোধ না করা পর্যন্ত এটি নিঃশব্দে ব্যর্থ হবে। যদি অন্য উদ্দেশ্যে আপনার অনুমতি থাকে, আমরা তত্ক্ষণাত আমাদের তৈরি বিজ্ঞপ্তিটি বন্ধ করব।
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();
