আপনার প্রতিক্রিয়া প্রকল্পে একটি ধ্রুবক ফাইল কীভাবে যুক্ত করবেন

আমি গত কয়েক সপ্তাহ ধরে প্রতিক্রিয়া প্রকল্পগুলি তৈরি করার সময়, আমি এমন কোড তৈরি করা থেকে ফোকাস শুরু করেছি যা কেবলমাত্র আমার প্রকল্প কাঠামোকে যতটা সম্ভব পরিষ্কার এবং বোধগম্য করে তুলতে পারে তা নিয়ে কাজ করে।

যতটা সম্ভব অনন্যরূপে নামকরণের মতো সাধারণ বিষয়গুলি বাদ দিয়ে, আমি ইদানীং আমার সমস্ত ধ্রুবককে প্রকল্পের পৃথক বিভাগে স্থানান্তর করে প্রতিটি উপাদান পরিষ্কার করছি।

কেন বিরক্ত হও?

আমার পরিবর্তনগুলির আগে আমার আইটেমগুলির মধ্যে কেমন দেখতে দেখতে তা একবার দেখে নেওয়া যাক:

... এখনকার বিরুদ্ধে:

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

এখানে সেটআপটি আসলে খুব সাধারণ। শুরু করার জন্য, আমি এসআরসি / তে "কনস্ট্যান্টস" নামে একটি নতুন ফোল্ডার তৈরি করেছি যা আমার সমস্ত উপাদানগুলিতে আমি ব্যবহার করি এমন সমস্ত ধ্রুবক সংরক্ষণ করে। এই ফোল্ডারে, আমি আমার সমস্ত উপাদান সঞ্চয় করতে কেবল একটি /src/constants/index.js ফাইল তৈরি করি। তারপরে আমি প্রত্যেকটিকে "রফতানি" দিয়ে যুক্ত করব যাতে প্রতিটি ধ্রুবককে অন্য কোথাও এইভাবে আমদানি করা যায়:

এক্সপোর্ট কনস্ট ডিজেআইএসবিএম = "& প্রতীক = ডিজেআই"

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

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

আমার কাছে বর্তমানে:

আপনি একটি মুহুর্তে লক্ষ্য করবেন যে উপরের ক্ষেত্রে আমার কাছে দুটি ধ্রুবক রয়েছে যার একই মান রয়েছে তবে আলাদাভাবে নামকরণ হয়েছে। আমি এটি করেছি কারণ আমি অনুভব করেছি যে আমার নিবন্ধকরণ পৃষ্ঠায় "কনস্ট্যান্ট। NEWACCOUNTURL" কল করার সময় "কনস্ট্যান্ট.এক্সস্টিঙ্গস্যাক্টরএল" এর চেয়ে নতুন অ্যাকাউন্ট তৈরি করার সময় পড়ার বিষয়টি আরও স্পষ্ট হয়েছিল যখন আমরা আসলে একটি নতুন অ্যাকাউন্ট তৈরি করছিলাম।

এর সমাধানের আরেকটি উপায় হ'ল এই জাতীয় কিছু লেখা:

'/

... আমদানি করার সময় আপনার প্রথম ধ্রুবকটির জন্য একটি উপকরণ তৈরি করা। প্রতিটি তার নিজস্ব, তবে আমি আমার সমস্ত ধ্রুবক একবারে আমদানি করতে পছন্দ করি:

'। / কনস্ট্যান্টস' থেকে স্থির হিসাবে আমদানি করুন

... এটি কিছুটা কম দক্ষ হতে পারে কারণ এটি এমন কিছু ধ্রুবক আমদানি করে যা আমি উপাদানটি ব্যবহার করতে পারি না, তবে আমার কোডটি ধ্রুবক হিসাবে পড়লে আমার পছন্দ হয়। [CONSTANTNAME] আমার উপাদানটিতে, সুতরাং কোনও ব্যবহারকারী যদি উপাদান ফাইলের শীর্ষে আমার আমদানি পর্যবেক্ষণ করে তবে আমি আমার কনস্ট্যান্টগুলি কোথায় পাই তা স্পষ্ট।

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

উদাহরণস্বরূপ, আমার "ম্যাচার" উপাদানটির জন্য আমার উপরে চারটি ধ্রুবক ছিল। আমি আসলে এটিকে সূচি.জেএস থেকে টানতে পারি এবং এসসিআর / কনস্ট্যান্টস / ম্যাচার.জেএস এর অধীনে একটি নতুন ফাইল তৈরি করতে পারি এবং সেখান থেকে আমার কনস্ট্যান্টগুলি রফতানি করতে পারি:

//matcher.js
রপ্তানি কনট POSTURL = "HTTP: // লোকালহোস্ট: 4000 / এপিআই / ভি 1 / প্যাটার্নস" রপ্তানি কনট DELETEURL = "HTTP: // লোকালহস্ট: 4000 / এপিআই / ভি 1 / প্যাটার্ন /" এক্সপোর্ট কনস্টেট ডিলিটবটন = প্রয়োজন ('.. / চিত্রসমূহ / মুছে ফেলা - আইকন.পিএনজি ') রফতানি কনট লোডিংহেল = প্রয়োজনীয় (' ../ চিত্রগুলি / লোডিং-হুইল.gif ')

তারপরে আমাকে যা করতে হবে তা হ'ল আমার সূচি.জেএস ফাইলটিতে কোডটি প্রতিস্থাপন করা হয়েছে যা আমি সবেমাত্র ম্যাচার.জেজে স্থানান্তরিত করেছি:

//index.js
এক্সপোর্ট * থেকে '। / ম্যাচচার';

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

'কনস্ট্যান্টস / ম্যাচার' থেকে {POSTURL Import আমদানি করুন;

... আমি যদি কেবল পূর্বনির্ধারিত ধ্রুবককে কল করতে পছন্দ করি।

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

নীচের মন্তব্যে আপনার ধ্রুবকগুলি কীভাবে গঠন করবেন তা আমাকে জানতে দিন। এটি করার বিভিন্ন উপায় রয়েছে যা উপরে বর্ণিত আমার কৌশল থেকে আলাদা এবং আমি আপনার সবার কাছ থেকে শুনতে আগ্রহী!

আরও পড়া:

  • https://medium.com/@z_callan/javascript-project-architecture-constants-deddfde3c8a8