উভয় চশমা সহ কাজ করতে কীভাবে ওয়েব উপাদানগুলি কাস্টম উপাদান তৈরি করতে হয়

Question

আমার এমন একটি উপাদান তৈরি করতে হবে যা উভয় চশমার সাথে কাজ করা উচিত, custom elements spec v0যা অবমূল্যায়িত হয়েছে এবং custom elements spec v1সর্বশেষতম স্থিতিশীল সংস্করণ।

যদি আমি custom elements v0অনুমানের সাথে উপাদানগুলি তৈরি করি তবে কিছু অ্যাপ্লিকেশানগুলি সমস্যার মুখোমুখি হবে যেহেতু তারা ব্যবহার করছে polymer 2এবং উপরে এবং polymer 1অ্যাপ্লিকেশনগুলির ক্ষেত্রে একই সমস্যা যা custom elements v1স্পেকের সাথে কাজ করবে না ।

পলিফিলগুলি পরিবর্তন করতে অ্যাপ্লিকেশনগুলিতে আমার নিয়ন্ত্রণ নেই , কিছু অ্যাপ্লিকেশনগুলিতে পলিফিলগুলি পুরানো অনুমানকে সমর্থন করে এবং কিছু নতুন পলিফিল ব্যবহার করে।

পলিফিল সংস্করণ নির্বিশেষে সমস্ত অ্যাপ্লিকেশনটিতে আমার কাস্টম উপাদানগুলি চালানোর জন্য উভয় চশমা একত্রিত করার জন্য আমি একটি কঠিন সমাধানের সন্ধান করছি। আমি আমার উপাদানগুলিতে পলিফিল বা স্নিপেটের কোনও টুকরো যুক্ত করতে পারি যাতে তারা যে কোনও জায়গায় চালাতে পারে, আমি এমন কোনও লাইব্রেরি বা পলিফিল খুঁজে পাইনি যা আমার গবেষণায় উভয় চশমা সমর্থন করে।

আমি এমন একটি অ্যাডাপ্টার লেখার পরিকল্পনা করছি যা সংযুক্ত কলব্যাকের জন্য নীচে উল্লিখিত ম্যাপিংয়ের মতো দুটি চশমা একত্রিত করতে পারে, এই চিন্তার ইনপুটগুলি অনেক প্রশংসা হবে।

connectedCallback(){
    this.attachedCallback();
}

আমি স্টেনসিলজ ব্যবহার করার চেষ্টা করেছি তবে এটি কেবলমাত্র কাস্টম উপাদানগুলির সর্বশেষতম সংস্করণে কাজ করতে পারে। এটি পূর্বের অনুমানের সাথে কাজ করার জন্য এটি টুইট করার কোনও উপায় আমি পাইনি।

উপরে বর্ণিত পরিস্থিতির জন্য কিছু কার্যকর বিকল্প এবং সম্ভাব্য সমাধানের পরামর্শ দিন।

Answer 1

মূলত আপনার উপাদানটির কিছু নির্ভরতা রয়েছে যা সরাসরি বা অপ্রত্যক্ষভাবে পলিফিলগুলিতে সংজ্ঞায়িত হয়। যদি আমরা এই নির্ভরশীলতাগুলিকে নির্ভরতা গ্রাফের নোড হিসাবে বিবেচনা করি তবে আমাদের গ্রাফগুলি আলাদা হওয়ার সমস্যা রয়েছে। এটি উভয় গ্রাফে নোডের উপস্থিতি সম্ভব, তবে ভিন্ন আচরণ করা ( functionএটির পুরানো এবং নতুন বাস্তবায়ন ) এবং এটিও সম্ভব যে কোনও গ্রাফে উপস্থিত কিছু নোড অন্য একটিতে অনুপস্থিত। আপনি অবশ্যই নিজের কিছু বা এর মতো কিছু পলিফিল রেখে দিতে পারেন, তবে তারপরে আপনার পলিফিলগুলি বজায় রাখা দরকার যা সাহায্যের চেয়ে কম হতে পারে।

আমার মতে একটি ভাল পদ্ধতির একটি বাস্তবায়ন হয় function, মত

function getWebComponentsVersion() {
    //Return v1 if it's v1 and v0 if it's v0
}

এটি কীভাবে বাস্তবায়ন করা যায় তা সম্পর্কে আমি নিশ্চিত নই function, তবে যদি হয় functionএমন একটির উপস্থিত রয়েছে যা সঠিক সংস্করণ দেয় বা কার্যকারিতার মধ্যে কিছু স্পষ্ট পার্থক্য থাকে তবে আপনি সেই অনুযায়ী উপরের ফাংশনটি বাস্তবায়ন করতে পারেন। এবং তারপরে, এই কোডটি চালান:

if (getWebComponentsVersion() === "v1") {
    //code for v1
} else {
    //code for v0
}

Comments

আপনার উত্তরের জন্য ধন্যবাদ, এক্ষেত্রে আমার কাছে উপাদান কোডের দুটি সংস্করণ বজায় রাখতে হবে যা বৈশিষ্ট্যগুলি যুক্ত করার সময় এবং দীর্ঘমেয়াদে ফিক্সিংয়ের সমস্যাগুলি ব্যস্ত প্রক্রিয়াতে পরিণত হবে a

— কোঙ্গা রাজু

@ কোঙ্গারাজু সত্যই এটি একটি অসুবিধা, তবে আপনি যদি সংস্করণ-নির্দিষ্ট সমস্যার স্থানটি সঙ্কুচিত করে এবং কোডের ক্ষেত্রটি উভয় সংস্করণে প্রয়োগ করতে পারেন, তবে আপনি প্রথম নজরে যতটা ভাবতে পারেন তার চেয়ে এই সমস্যাটি আপনার কাছে কম ঝামেলাজনক হতে পারে।

— লাজোস

Answer 2

আমি সন্দেহ করি যে আপনি সচেতন Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020.।

আপনি যা করতে পারেন তা হ'ল Can I useওয়েবসাইটে গিয়ে ব্রাউজার সমর্থন সংস্করণগুলি যাচাই করে দেখার জন্য কোন ব্রাউজারটি কাস্টম উপাদানগুলির সংস্করণ লোড করা উচিত ...

এর পরে ব্রাউজার এবং সংস্করণটি যাচাই করতে নীচের প্রয়োগ করুন এবং পছন্দসই ব্রাউজারের জন্য সঠিক কাস্টম উপাদান লোড করুন সেই অনুযায়ী ( আরও এখানে ) আপনি যদি বাহ্যিক লাইব্রেরি ব্যবহার করতে না চান।

যদি আপনি বাহ্যিক গ্রন্থাগারগুলি ব্যবহার করে ঠিক থাকেন তবে বোসারকে সংস্করণ, প্ল্যাটফর্ম ইত্যাদি সনাক্ত করার চেষ্টা করুন

navigator.browserSpecs = (function(){
    var ua = navigator.userAgent, tem, 
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return {name:'IE',version:(tem[1] || '')};
    }
    if(M[1]=== 'Chrome'){
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return {name:M[0], version:M[1]};
})();

console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

if (navigator.browserSpecs.name == 'Chrome') {
    // Do something for Chrome.
    if (navigator.browserSpecs.version > 76) {
        // Do something for Chrome versions greater than 76 like load v1.
    }
}
else {
    // Do something for all other browsers.
}

Comments

সবার আগে, আপনার উত্তরের জন্য আপনাকে ধন্যবাদ। আপনি ব্রাউজার সংস্করণটি শনাক্ত করার পরে আসল সমস্যাটি কোনও উপাদান তৈরির মধ্যে রয়েছে? ব্রাউজার সংস্করণ সনাক্ত করতে একটি চেক যুক্ত করা একটি অতিরিক্ত পদক্ষেপ হবে।

— কোঙ্গা রাজু

দেখে মনে হচ্ছে আমি অনেক বেশি অনুমান করেছি - উপরের আমার ধারণাটি ছিল 2 পৃথক উপাদান তৈরি করা এবং উপযুক্ত ব্রাউজারগুলিতে লোড করা।

— ম্যাক_ডব্লিউ