জাভাস্ক্রিপ্ট কখন এইচটিএমএল উত্পন্ন করা উচিত?


34

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

তবে, আমি প্রচুর জেএস কোড দেখেছি যা পুরো ফর্ম এবং সামগ্রী-ভারী মডেল সংলাপগুলি সহ টিএমএল টিলা তৈরি করে। সাধারণভাবে, কোন পদ্ধতিটিকে সর্বোত্তম অনুশীলন হিসাবে বিবেচনা করা হয়? কোন পরিস্থিতিতে জাভাস্ক্রিপ্ট HTML তৈরি করতে ব্যবহার করা উচিত এবং কখন তা করা উচিত নয়?


2
আপনি কেন মনে করেন যে অ্যাজাক্সের মাধ্যমে মার্কআপটি পড়া এবং সন্ধান করা সহজ?
PSr

3
আমি সাধারণত দুটি উপায়ে যেকোন একটির মধ্যে অ্যাজাক্স ব্যবহার করি: পৃষ্ঠায় পুরো প্রাক-রেন্ডারযুক্ত এইচটিএমএল স্নিপেটগুলি লোড করা বা একটি JSON অ্যারে যা আমি পার্স করছি এবং তারপরে বিদ্যমান উপাদানগুলিতে ডেটা .োকাতে চাই। খুব কমই আমি অজ্যাক্স ডেটা থেকে গতিশীলভাবে এইচটিএমএল তৈরি করব এবং এটি পৃষ্ঠাতে সন্নিবেশ করবো। যেহেতু আজাক্স সামগ্রীটি সাধারণত HTML হিসাবে প্রাক-রেন্ডার করা হয়, জাভাস্ক্রিপ্টে গতিশীল উপাদান তৈরির চেষ্টা করার চেয়ে পড়া সহজ। আমি এটির দিকে দ্রুত নজর দিতে পারি এবং কাঠামো এবং সামগ্রীটি দেখতে পারি।
ভার্চুওসিমিডিয়া

2
উদ্বেগজনকভাবে কাঁটাযুক্ত প্রশ্ন ...
মার্ক ক্যানলাস

2
@ ভার্চুসিমিডিয়া - তবে জাভাস্ক্রিপ্টের মাধ্যমে রেন্ডার করার আগে সার্ভার-সাইড রেন্ডার করার আগে প্রাক-রেন্ডার করা এইচটিএমএল স্নিপেটগুলির কী একই সমস্যা নেই? আমি বিতর্কিত হওয়ার চেষ্টা করছি না, আপনার সমস্যাটি কী তা আমি সত্যই বুঝতে পারি না।
PSr

1
@ পিএসআর সাধারণত, না। একটি জেএস ফ্রেমওয়ার্ক বা এমনকি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করার সময়, আপনি একাধিক পদ্ধতি কল এবং ফাংশন দিয়ে আপনার এইচটিএমএল জেনারেট করবেন। এটি যদি বিপুল সংখ্যক উপাদানগুলির সাথে করা হয় তবে প্রকৃত নথি কাঠামোটি কী তা দেখতে খুব কঠিন হতে পারে। বিপরীতে, এইচটিএমএল উত্পাদিত সার্ভার-সাইড সাধারণত একটি পরিষ্কার কাঠামো বজায় রাখে এবং কেবলমাত্র সার্ভারের কোডটি একটি HTML টেমপ্লেটে ডেটা প্রতিধ্বনির পরিবর্তে উপাদানগুলি তৈরি করে। সুতরাং আপনি যদি জেএস আচরণে কোনও পরিবর্তন আনতে চান, শ্রেণিবিন্যাস দেখতে আপনাকে উপাদানগুলি উত্পন্ন করার পদ্ধতিগুলির সাহায্যে সনাক্ত করতে হবে।
ভার্চুওসিমিডিয়া

উত্তর:


19

আমি যখনই জাভাস্ক্রিপ্টে ভারী এইচটিএমএল প্রজন্মের মুখোমুখি হয়েছি তখন এটি প্রায় সম্পূর্ণ একা একা ইউআই প্লাগইনে ছিল। এটি উপলব্ধি করে, কারণ এটি পুরো প্লাগইনটিকে একটি একক .js ফাইলে (+ শ।

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


29

আমি মনে করি যে সমস্যাটি হ'ল আপনি পরিষ্কারভাবে লিখিত সার্ভার সাইড টেম্প্লেটিংয়ের সাথে খারাপভাবে লিখিত অ্যাড-হক ক্লায়েন্ট সাইড এইচটিএমএল প্রজন্মের সাথে তুলনা করছেন। অবশ্যই পরিষ্কারভাবে লিখিত কোডটি পড়া, রক্ষণাবেক্ষণ এবং ট্রেস করা সহজ।

আপনি ক্লায়েন্টের সাইড কোডটিকে "এইচটিএমএল এর "িবি" বলছেন, তবে অবশ্যই এটি একই HTML যেখানেই এটি তৈরি হয়েছে। "Oundিপি" হ'ল কোডের এক বিশাল ump

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

তবে আপনি আপনার সার্ভারের পরিবেশে জেএসকে পছন্দ করেন কিনা, কোন টেম্প্লেটিং সমাধানটি আপনি পছন্দ করেন ইত্যাদি ঠিক তা নির্ভর করে depends


15

ক্লায়েন্ট-সাইড টেম্পলেটগুলি ব্যবহার করার প্রবণতা রয়েছে, চূড়ান্ত ক্ষেত্রে আপনি সার্ভারের জন্য কেবলমাত্র রিসালফুল এপিআই সরবরাহ করে যেমন JSON ফর্ম্যাটে, সমস্ত রেন্ডারিং ক্লায়েন্টের পক্ষে করছেন। এই পদ্ধতির সুবিধাটি হ'ল জেএস কোড এবং টেমপ্লেটগুলি স্থিতিশীল সংস্থান যা ক্যাড, প্রক্সাইড এবং সিডিএন এর মাধ্যমে বিতরণ করা যেতে পারে। আপনার যদি সার্ভার-পার্শ্বযুক্ত গতিশীল এইচটিএমএল থাকে তবে এটি করা যায় না। এছাড়াও, লাইটওয়েট ফর্ম্যাটে আরএসএসএফুল এপিআই থেকে কেবল ডেটা ফেরত দেওয়া খুব কম সার্ভার-সাইড রিসোর্সগুলি ব্যবহার করে, প্রতিক্রিয়া দ্রুত তৈরি করে। হালকা হওয়ার কারণে এটি কম নেটওয়ার্ক ট্রান্সফার, যা এটি আবার দ্রুত করে তোলে। এইভাবে 3 জি এর মতো ধীর সংযোগে আপনার খুব প্রতিক্রিয়াশীল কম-বিলম্বিত অ্যাপ্লিকেশন থাকতে পারে। এই পদ্ধতিটি মোবাইল পৃষ্ঠা এবং অ্যাপ্লিকেশনগুলির জন্য জনপ্রিয়।

জেএস টেমপ্লেটগুলি বাস্তবায়ন করে এমন অসংখ্য লাইব্রেরি রয়েছে, জনপ্রিয়গুলির মধ্যে একটি হ'ল খাঁটি , গোঁফ এবং ডাস্ট.জেগুলি । পরে লিঙ্কডইন দ্বারা ব্যবহৃত হয়, তারা তাদের নিবন্ধে "" ধুলায় জেএসপি রেখে যাওয়া: ক্লায়েন্ট-সাইড টেম্পলেটগুলিতে লিঙ্কডইনকে সরিয়ে নিয়ে যাওয়া " নিবন্ধে সুবিধাগুলি বর্ণনা করেছেন ।


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

2

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

আমরা একটি ওয়েব অ্যাপ্লিকেশন করি যা জাভাস্ক্রিপ্ট সহ একচেটিয়া এইচটিএমএল উত্পন্ন করে। সার্ভার হিটগুলির 87% হ'ল জেএসএন ডেটা, স্থির সামগ্রীটি সাধারণত একবার লোড করা হয়, তারপরে ব্রাউজার ক্যাশে থেকে।

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


0

ডায়নামিক পৃষ্ঠা লোডিং সম্পর্কিত, যে কোনও একটি উপলব্ধি করা উচিত যে "জ্যাকুয়েরি এজেএক্স ক্লাউড!" যাদু, কেবল দুটি সম্ভাব্য জিনিস ঘটছে:

  1. একটি উপাদানের কোডটি ডিভ (খারাপ), বা ইনজেকশন করা হচ্ছে
  2. বিষয়বস্তু একটি আইফ্রেমে লোড করা হচ্ছে (আরও ভাল, তবে এটি কেবল একই নয় ...)

মূল প্রশ্নটি সম্পর্কে, আমি কেবল জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল বিষয়বস্তু তৈরি করি যখন আমি কোনও ধরণের একটি ওয়েব অ্যাপ তৈরি করি যা সার্ভারে সঞ্চিত এক্সএমএল বা জেএসএন ডেটা পড়ে এবং এটি অনেক পরিবর্তন হয়ে যায়।

জাভাস্ক্রিপ্টের সাথে কোনও পৃষ্ঠায় স্থিতিশীল সামগ্রী লোড করা খুব বেশি অর্থবোধ করতে পারে না, কারণ এটি সবসময়ই সঠিকভাবে লোড হবে না এমন সম্ভাবনা রয়েছে বা ক্লায়েন্ট এটি অক্ষম করে দেবে ("এই সমস্যাগুলি নিন!")। কুৎসিত document.write()বা শৃঙ্খলিত শৃঙ্খলের অভ্যন্তরে যখন এইচটিএমএল সামগ্রী যুক্ত হয় তখন এটি পরিবর্তন করা সত্যই শক্ত করে তোলে document.createElement()

সুতরাং, আপনি ঠিক বলেছেন; হয় কাঁচা এইচটিএমএল টাইপ করুন, বা যদি গতিশীল-ইশ সামগ্রী প্রয়োজন হয় তবে যা প্রয়োজন তা আউটপুট করতে একটি সার্ভার-সাইড স্ক্রিপ্ট ব্যবহার করুন। জাভাস্ক্রিপ্টটি কেবলমাত্র এইচটিএমএল ইনজেক্ট করার জন্য যদি সাইটটি কোনও ইন্টারনেট সংযোগ, বা অনুরূপ কেস ছাড়াই কাজ করা বোঝায়।

একটি সর্বশেষ নোট, আপনি যদি কোনও ওয়েবসাইটের মধ্যে এক্সএমএলএইচটিটিফেরিয়োস্টগুলি, এর, এজেএক্স বাস্তবায়ন করতে চান তবে এটি করার সবচেয়ে ভাল / নিরাপদতম উপায় হ'ল ডেটা ফর্ম্যাটে (এক্সএমএলের মতো) তথ্য সঞ্চয় করা, এটিকে লোড করা এবং তদনুসারে আউটপুট তৈরি করা is ক্লায়েন্ট উপর। document.writeএবং element.innerHTMLসামগ্রীটি হস্তান্তরিত করার জন্য সর্বোত্তম উপায় নয় এবং ভবিষ্যতে সম্ভাব্য মাথাব্যথার কারণ হতে বাধ্য (এই স্ক্রিপ্টটি কেন চলছে না? আমার ভাঙা <i>ট্যাগটি সবকিছুকে তির্যককরণ করছে! ইত্যাদি)।


1
এগুলি অবশ্যই ঘটতে পারে এমন একমাত্র বিষয় নয়। জাভাস্ক্রিপ্টের ডিওএম-এ সম্পূর্ণ অ্যাক্সেস রয়েছে এবং আপনি এজেএক্স প্রতিক্রিয়াটি পরিচালনা করার সময় যেমন উপযুক্ত দেখেন তেমনই আপনি ডিওএম গাছটি পরিচালনা করতে পারেন।
টিডামার্স

কেন একটি ডিভ ইন কন্টেন্ট ইনজেকশন খারাপ?
পিটার টেলর

@ পিটারটেলর ইনজেকশন সামগ্রী খারাপ নয়, ব্যবহার করা innerHTMLহচ্ছে।
রায়নস

@ পিটারটেলর যদি একটি বা দুটি উপাদান বা অন্য document.appendChildকিছু যুক্ত করা হয় তবে সম্ভবত কোনও সমস্যা হবে না। সমস্যাটি কোডটির সাথে দেখা যাচ্ছে যা দেখে মনে হচ্ছে এটি div.innerHTML="<table cellpadding='0'><tr><td><label>Val:</label></td><td><input type='text' /></td></tr></table>ডিবাগ করার জন্য দুঃস্বপ্ন।
জেফরি সুইনি 15

তবে এর সাথে '' জিকুয়েরি এজেএক্স ক্লাউড! জাদু '? আপনার উদাহরণটি আরও এর বিরোধী মত দেখাচ্ছে।
পিটার টেলর

0

এতে আমার মন্ত্রটি হ'ল: যখন এটি সহজ এবং কেউ মার্কআপ সম্পর্কে চিন্তা করে না।

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

থাম্বের আরেকটি নিয়ম পুনরায় ব্যবহারযোগ্যতা হতে পারে। যদি আপনার সমাধানটি ক্লায়েন্টের পক্ষের অন্যান্য সমস্যার জন্য প্রয়োগ করা যায় তবে এটি জেএসে আবদ্ধ করুন।


0

আমরা একক পৃষ্ঠার অ্যাপস তৈরি করি (আলা গুগল মেল) এবং আমাদের অ্যাপ্লিকেশনগুলিতে আক্ষরিকভাবে কোনও HTML এর সার্ভার-সাইড প্রজন্ম নেই। পরিবর্তে আমরা আমাদের ক্লায়েন্টের পাশে কাঠামো তৈরি করতে ব্যাকবোন.জেএস ব্যবহার করছি এবং হ্যান্ডলবারগুলি আমাদের জেএসওএন টেমপ্লেটগুলিতে রেন্ডার করতে যা পৃষ্ঠায় যায়। এটি প্রকৃতপক্ষে খুব ভালভাবে কাজ করে এবং আমরা আমাদের প্রথম অ্যাপ্লিকেশনটি ব্যবহার করি যা আমরা এটি ব্যবহার করি এবং আমরা ভবিষ্যতে আরও বৃহত্তর প্রকল্পটি মোকাবিলা করব the

যে কোনও ধরণের ফ্যাট ক্লায়েন্ট যেখানে সার্ভারটি কেবলমাত্র ডাটা বজায় রাখতে এবং ক্যোয়ারির ফলাফলগুলি ফেরত দেওয়ার জন্য ব্যবহৃত হয় আপনি এমন সময়ের জন্য পোস্টার চাইল্ড যেখানে আপনি জাভাস্ক্রিপ্ট এইচটিএমএল তৈরি করতে চান। এটি পরিষ্কার এবং সহজ করার জন্য একটি ভাল টেম্পলেট ইঞ্জিন ব্যবহার নিশ্চিত করুন।


0

আমি জকিউরিতে এইচটিএমএল কোড তৈরি করছি কারণ আমি একটি পোর্টলেট ব্যবহার করছি এবং জেএসপি কোড কার্যকর করার পরে, আমাকে এইচটিএমএল কোডের সাথে একটি লুপ তৈরি করতে হবে, যাতে আমি কিছু জাভাস্ক্রিপ্ট কোডের সাথে লুপের জন্য জাভাতে উঠতে পারি না। সুতরাং আমি জাভাস্ক্রিপ্ট অ্যারেতে জাভা অ্যারেলিস্ট রেন্ডার করছি এবং এইচটিএমএল তৈরির জন্য স্ট্রিংগুলি ব্যবহার করছি।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.