💎 مختصری در مورد دام مجازی (Virtual DOM)

تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد.
فریم ورک ریکت، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما ریکت، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس).

فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت :
- با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند.
- فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود.
- ریکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند.
- پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد.
- حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند.
- در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود.

@pieceJS

💎 تفاوت متد ()setTimeout و setInterval()

متد setTimeout
با استفاده از این متد، میتوانید یک تابع را بعد از مدت زمان مشخص، یک بار و فقط یک بار صدا بزنید.
setTimeout(myFunction,time)

متد setInterval
با استفاده این متد، برخلاف متد setTimeout قادر خواهید بود یک تابع را به صورت مکرر در مدت زمانی مشخص صدا بزنید. به عنوان مثال، یک تابع بعد از هر 3 ثانیه یک بار مجدداً صدا زده شود.
setInterval(myFunction,time)

نکته1: این متد توسط، متد clearInterval متوقف خواهد شد.

نکته2: زمان تعیین شده (time)، باید به میلی ثانیه وارد شود و هر 1000 میلی ثانیه برابر 1 ثانیه خواهد بود.

نکته3: بر اساس استاندارد های HTML5، حداقل زمان برای صدا زدن یک تابع 4 میلی ثانیه می باشد، در نتیجه اگر زمان مورد نیاز برای صدا زدن تابع مورد نظرتان را کمتر از 4 میلی ثانیه وارد کردید یا اصلا زمان را مشخص نکردید به طور خودکار، زمان 4 میلی ثانیه در نظر گرفته می شود.

نکته4: Time تعیین شده، فقط زمانی محاسبه میشود که شما در صفحه یا تب فعلی از مرورگر خود قرار دارید، و اگر تب مرورگر را تغییر دهید این زمان متوقف خواهد شد تا مجدداً به تب فعلی برگردید. به عنوان مثال از 1000 میلی ثانیه ای که تعیین کردید 425 میلی ثانیه محاسبه شده باشد و شما وارد تب دیگری از مرورگر خود شوید زمان محاسبه روی 425 میلی ثانیه متوقف خواهد شد تا موقعی که مجددا به این تب برگردید و این زمان مجدداً ادامه پیدا کند تا به 1000 میلی ثانیه برسد.

نکته5: زمان تعیین شده، ممکن است اندکی با زمان واقعی تفاوت داشته باشد دلیل آن هم این است که پردازش زمان در سیستم شما صورت میگیرد و در صورتی که درصد بالایی از سی پی یو درگیر باشد، تب مرورگر را تغییر داده باشید، مصرف شارژ لپ تاپ مستقیماً روی باتری قرار گرفته باشد میتواند در سرعت شمارش زمان تاثیر داشته باشید و اندکی با زمان واقعی اختلاف پیدا کند.

@pieceJS

💎 تفاوت Query Parameter با URL Parameter

از نظر فنی این دو با هم هیچ تفاوتی ندارند و هر دو برای ارسال اطلاعات از طریق متد GET استفاده می شود.
ساختار این دو به صورت زیر است
Query Parameter:
domain.com/products?search=tomato
URL Parameter:
domain.com/products/tomato
نتیجتاً میتوان گفت بستگی به ساختار API دارد که قصد استفاده از آن را دارید میتوانید از یکی از این ساختار ها استفاده کنید.
از نظر کاربرد می توان گفت، زمانی از URL پارامتر استفاده میشود که قصد دسترسی به یک سری دیتای استاتیک را داریم اما زمانی از کوئری پارامتر استفاده میشود که قصد دستیابی به دیتا های داینامیک را داریم مانند موتور جستجو. (در سرچ سایت هم از کوئری استرینگ(پارامتر) استفاده میشود)

🌐 @pieceJS

💎 نحوه تعریف Query Parameter و URL Parameter با استفاده از اکسپرس

نوع URL Parameter
نوع متد GET می باشد. پارامتر هایی که قصد دستیابی به آن ها داریم را باید به وسله :/ از هم جدا کنیم به عنوان مثال در آدرس زیر قصد دستیابی به پارامتر username را داریم لذا باید بعد از / بنویسیم :username به همین صورت میتوان پارامتر های دیگر را نیز دریافت کرد.
سپس مقدار این پارامتر ها از طریق دستور req.params به صورت آبجکت قابل دسترسی میباشد

// localhost/max => output: max

app.get(“/:username”, (req, res) => {
res.send(req.params.username)
})

نوع Query Parameter
نوع متد GET می باشد. برای تعریف این پارامتر ها نیازی به استفاده از ساختار خاصی نیست.

اما جهت دسترسی به مقدار کوئری پارامتر ها میتوان به صورت آبجکت از req.query دریافت کرد. تعریف این پارامتر ها از جایی شروع میشود که در URL از (Questrion Mark) یا همان علامت سوال استفاده میشود. و پس از علامت سوال هر متغیر به وسیله امپرسن یا یا همان علامت & از هم جدا میشود.

// localhost/user?name=max&age=23 output: max 23

app.get(“/user”, (req, res) => {
res.send(req.query.name + “ “ + req.query.age)
})

🌐 @pieceJS

💎 انواع دیتا در جاوااسکریپت از نگاه دیگر

به طور کلی دیتا در جاوااسکریپت به دو دسته Refrence type یا Object Type و Primitive type تقسیم میشود.

⭕️ دسته Primitive type به متغیر هایی گفته می شود که مقدارشان در خودشان ذخیره می شود و در حافظه جایی ندارند. در نتیجه وقتی آن ها را به متغیر دیگه نسبت میدیم (Assign میکنیم) باعث میشه آن متغییر هم مقدار مستقل پیدا کند. از انواع متغیر های این دسته میتوان به String, Null, Number, Undefined, Boolean و Symbol اشاره کرد.
مثال زیر می تونه مفهوم بالا رو به خوبی منتقل کند :

let numOne = 50;
let numTwo = numOne; //numTwo=numOne=50
numOne = 100;
console.log(numOne); //outputs 100
console.log(numTwo); //outputs 50

و نکته مهم اینکه این دسته از متغیر ها با مقدارشان با هم مقایسه می شوند.

⭕️ دسته Refrence type یا Object Type متغیر هایی گفته میشود که مقدار آن ها در حافظه ذخیره می شود در واقع هر کدام از این متغیر ها خانه ای مستقل در حافظه دارند و آن ها را نمیتوان مانند متغیر های دسته ی Primitive type با نسبت دادنشون به متغیر دیگه، متغیر جدید را ایجاد کرد بلکه در مورد این دسته از متغیر ها، از نظر جاوا اسکریپت، هر دو متغیر به یک خانه از حافظه اشاره دارند و مقدار آن ها از یکدیگر مستقل نیست در نتیجه با تغییر مقدار هرکدام از این متغیر ها، متغیر دیگر نیز تغییر پیدا میکند. از انواع متغیر های این دسته میتوان به Object، Function، Array، Date و Collection اشاره کرد
مثال :

let object1 = {
name:'Bingeh',
age:18
};
let object2 = object1;

//updating object1,
object1.age = 20;

console.log(object2); //we see that object2 also updates the age attribute

اگر کد بالا را تست کنید متوجه خواهید شد که با وجود تغییر پراپرتی age در آبجکت object1؛ مقدار پراپرتی age در object2 نیز تغییر پیدا کرده است دلیل آن، یکسان بودن خانه این دو متغیر در حافظه است.
این دسته از متغیر ها، از نظر رفرنس آن ها با هم مقایسه می شوند نه مقدار آن ها.
#سوال_مصاحبه #متغیر_ها

🌐 @pieceJS

💎 تفاوت های var، const و let و یک نکته مهم

👈 متغیر های تعریف شده توسط var، سطح تابعی یا Function Level هستند یعنی در تمام اسکوپ های تعریف شده درون تابعی که از آن استفاده شده، قابل دسترس می باشد.
اما
👈 متغیر هایی که توسط let یا const تعریف شده اند، Block Level هستند یعنی فقط در اسکوپی که تعریف شده اند قابل دسترسی هستند و بیرون اون اسکوپ غیر قابل دسترس است.

✳️ نکته: منظور از اسکوپ، محدوده ای هست که توسط آکولاد باز و بسته یعنی { } مشخص میشود و متغیر ما در آن قابل دسترس می باشد.
✳️ نکته مهم: در صورتی که از هیچ کدام از واژه های const و let و var جهت تعریف کردن متغیر ها استفاده نکنید متغیر تعریف شده دارای اسکوپ گلوبال بوده و در تمام اسکوپ ها و فانکشن ها قابل دسترسی است.
✳️ از نگاه Hoisting : در زمان اجرای برنامه، تنها متغیر های تعریف شده از نوع var و فانکشن ها به طور کامل Hoist میشوند و متغیر های تعریف شده از نوع let و const و همچنین class ها در مرحله Hoisting فقط کامپایل میشوند و به هنگام استفاده مقدار دهی نمیشود ( به هنگام استفاده قبل از Declare و Initialization خطای ReferenceError برگشت داده میشود ).

🌐 @pieceJS

#آبجکت
💎 نکات کاربردی درمورد آبجکت ها

👈 برای حذف پراپرتی های درون یک آبجکت می توانید از دستور Delete obj.property استفاده کنید که در این دستور obj نام آبجکت و property نام پراپرتی مورد نظر می باشد.

👈نام پراپرتی چند کلمه ای را باید درون دابل کوتیشن قرار داد مانند مثال زیر :

const myObj = {
"first Name" : "milad",
age:30,
country: "IRAN"
}

👈 نام ویژگی/پراپرتی های چند کلمه ای را نمی توان به نقطه نوشت.

myObj.first Name = "milad"  // SyntaxError
myObj["first Name"] ="milad"  // --> milad

👈 برای دریافت نام یک ویژگی از کاربر به وسیله تابع prompt می توانید به شکل زیر عمل کنید

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5
};

alert( bag.apple ); 

در مثال بالا اگر نام ویژگی توسط کاربر apple وارد شود دستور آلرت مقدار 5 را نمایش می دهد در غیر این undefined را برگشت می دهد.
نکته: نام متغیر fruit را می بایست درون کروشه [ ] قرار دهید.

👈 در صورتی که نام پراپرتی و متغیر حامل مقدار آن پراپرتی، با هم یکسان باشد می توانید به صورت زیر خلاصه بنویسید.

let age = 30;
let name = "milad"

const person = {
age,
name
}

دستور بالا با دستور زیر عملکرد یکسانی خواهد داشت

let age = 30;
let name = "milad"

const person = {
age:age,
name:name
}

👈 برخلاف متغیر ها که نمی توان از اسامی رزرو شده نظیر for , return و نظیر آن استفاده کرد، در انتخاب اسم پراپرتی ها بدون این محدودیت میتوانید از اسامی رزرو شده استفاده کنید.

👈 در انتخاب نام پراپرتی، میتوانید از اعداد نیز استفاده کنید. جاوااسکریپت اعداد استفاده شده در نام پراپرتی را به طور خودکار به رشته تبدیل می کند.

const obj = {
0: "milad"
}
console.log(obj[0]===obj["0"]) // true

👈 در انتخاب نام پراپرتی نمیتوانید از عبارت __proto__ استفاده کنید.

👈 برای بررسی وجود یا عدم وجود یک پراپرتی در یک آبجکت میتوانید از دستور in استفاده کنید

"key" in myObj

دستور بالا، پراپرتی ای به نام key را در آبجکت myObj جستجو می کند و خروجی آن به صورت بولین خواهد بود.

👈 برای حلقه زدن در یک آبجکت میتوانید از حلقه ی for ... in استفاده کنید به سینتکس زیر :

for (key in object) {
 ....

}

کد بالا، در هر بار حله زدن، نام پراپرتی ها به ترتیب در متغیر key قابل دسترس خواهد بود.


🌐 @pieceJS

💎 مروری بر انواع واحد های اندازه گیری

به طور کلی، واحد های اندازه گیری به دو دسته مطلق و نسبی تقسیم می شوند. واحد های مطلق، واحد هایی هستند که خود به تنهایی تعیین کننده سایز آن المان هستند اما واحد های نسبی، با توجه به شرایط سایر المان ها یا صفحه، و نسبت تعیین شده، تعیین سایز می کنند.
👈 از دسته واحد های مطلق می توان به واحد های زیر اشاره کرد:
cm : سانتی متر
mm : میلی متر
in : اینچ
px: پیکسل
pt: نقطه
pc: پیکا
نکته 1: هر اینچ برابر96 پیکسل و 2.54 سانتی متر است
نکته 2: هر pt برابر 1/72 اینچ و 1/12 pc است

👈 از سری واحد های نسبی نیز می توان به واحد های زیر اشاره کرد:
em: این واحد جهت تنظیم سایز فونت ها به کار میرود و به واحد المنت والد وابسته است و هر em برابر است با سایز فونت المنت والد. به عنوان مثال اگر فونت المنت واحد 10 پیکسل باشد و المنت فرزند دارای فونت با سایز 2em باشد میتوان گفت سایز فونت این المنت 20 پیکسل محاسبه می شود.

rem: سایز فونت را نسبت به سایز تعیین شده برای روت تعیین می کند. این روت می تواند استایل تگ html باشد. اگر برای این تگ سایزی مشخص نشده باشد، نسبت به سایز پیشفرض فونت بروزر تعیین می شود (که عموماً 16 پیکسل می باشد)

vw: تعیین سایز المنت نسبت به 1 درصد سایز عرض صفحه انجام میگیرد. به عنوان مثال اگر عرض صفحه (width) برابر 900 پیکسل باشد، 1vw برابر 9 پیکسل خواهد بود.

vh: تعیین سایز المنت نسبت به 1 درصد سایز طول صفحه انجام میگیرد. به عنوان مثال اگر طول صفحه (hight) برابر 900 پیکسل باشد، 1vh برابر 9 پیکسل خواهد بود.

%: تعیین سایز المنت به نسبت سایز المنت والد. به عنوان مثال اگر طول المنت والد 100 پیکسل باشد و طول المنت فرزند 35% در نظر بگیریم، بروزر به طور خودکار آن را 35 پیکسل در نظر می گیرد.

نکته: از واحد های نسبی، عموماً برای رسپانسیو کردن سایت بکار می رود.

🌐 @pieceJS

💎 عملگر Nullish Coalescing چیست؟

در آپدیت اکما اسکریپت 2020 از عملگری رونمایی شد به نام Nullish Coalescing، که این عملگرد به شکل ?? تعریف می شود و مقدار نالیش یک متغیر را بررسی می کند. به عبارت دیگر چک می کند که آیا متغیر مقدار null یا undefined را دارد یا خیر؟ به عنوان مثال در تیکه کد زیر، خروجی ما رشته "milad" می باشد.

var firstName;
alert(firstName ?? 'milad')

دلیل آن هم این است که firstName مقدار دهی اولیه نشده است لذا مقدار undefined را خواهد داشت و چون از عملگر ?? استفاده کرده ایم مقدار 'milad' به جای undefined برگشت داده می شود.

🟡 نکته مهم: ممکنه بگید این عملگر دقیقاً داره کار عملگر || یا همان OR را انجام میدهد. اما نکته مهم اینه که عملگر or تمام مقدار های falsy را بررسی می کند اما عملگر ?? فقط مقدار نال و آندیفایند را بررسی خواهد کرد.

💬 تعریف: به مقدار های زیر، مقدار های کاذب یا اصطلاح برنامه نویسیش falsy value گفته میشود (آخرین مورد در مقادیر زیر، رشته توخالی است)
null , Undefined , false , 0, NaN, ''

🌐 @pieceJS

💎 عملگر Optional Chaining چیست؟

گاهی وقتا آبجکتی رو به وسیله api دریافت میکنید و مطمئن نیستید که پراپرتی هایی که شما میخواهید آیا در آن آبجکت وجود دارد یا خیر. در وژن 3.7 به بعد تایپ اسکریپت، از عملگری معرفی شد به نام Optional Chaining که با علامت سوال و نقطه (.؟) نشان داده می شود. این عملگر، ابتدا بررسی می کند که آیا آن پراپرتی وجود دارد یا خیر، در صورتی که وجود داشته باشد از آن استفاده میکند در غیر این صورت undefined برمیگرداند.

console.log(persons?.reza?.job)

💬 در کل بالا ابتدا چک می کند آیا پراپرتی reza وجود دارد یا خیر، اگر وجود داشته باشد بررسی می کند آیا پرارتی job در زیر مجموعه reza وجود دارد یا خیر. اگر از این عملگر استفاده نکنید و پراپرتی reza وجود نداشته باشد به هنگام بررسی پراپرتی job با خطای زیر برخورد خواهید کرد

Uncaught TypeError: Cannot read properties of undefined (reading 'job')

قبل از معرفی این عملگر، برای جلوگیری از خطای بالا، کد رو به صورت زیر می نوشتیم:

console.log(persons.reza && persons.reza.job)

🌐 @pieceJS

💎 دلیل رخ دادن خطای ReferenceError window is not defined
احتمالاً برای شما هم اتفاق افتاده که زمان استفاده از پروژه تان یکدفعه با کمال ناباوری خطای رفرنس ارور گرفتید.
به طور کلی خطای ReferenceError window is not defined در سه حالت زیر اتفاق می افته

🟣 حالت اول : قصد دارید از متد window در Nodejs استفاده کنید

🟣 حالت دوم : قصد دارید از آن در سرور نظیر Next.js استفاده کنید

🟣 حالت سوم: محیطی که استفاده می کنید مسئله ای نداره اما شما اشتباه تایپی دارید

💬 نکته: window متغیریست از نوع global و تمام حروف آن کوچک است

🌐 @pieceJS

💎 7 متد پر کاربرد کلاس Date

getDay() :
عدد صحیح در مورد شماره روز هفته را بر اساس تقویم میلادی ریترن می کند بدین ترتیب، یکشنبه برابر عدد 0، دوشنبه عدد 1 و...

getDate() :
با استفاده از این متد میتوان عدد مربوط به روز را در تاریخ میلادی ریترن کنید. (مثلا در تاریخ 16-5-2022 عدد 16 برگشت داده میشود)

getMonth():
شماره ماه میلادی را برگشت میدهد.
نکته: شماره اولین ماه میلادی 0 است در نتیجه هر بار که از این متد استفاده می کنید باید آن را با عدد1 جمع بزنید تا عدد واقعی از نظر کاربر بدست آید.

getYear() :
عدد سال میلادی را منهای 1900 برمیگرداند مثلا برای سال 2022 عدد 122 را برگشت می دهد. (منسوخ شده)

getFullYear() :
عدد سال میلادی را به طور کامل برمیگرداند (مثلا 2022)
نکته: این متد از سال 1970 به بعد (تا سال 33658 😁) را می تواند برگشت دهد.

getSeconds() :
عدد مربوط به ثانیه فعلی را بر میگرداند

getTime() :
زمان را از 1970 میلادی به میلی ثانیه برمیگرداند

🌐 @pieceJS

💎 مقادیر Truthy و Falsy

به مقادیری که به منزله ی FALSE ارزیابی میشه رو مقادیر Falsy میگیم.
🟡 در #جاوااسکریپت 6 مقدار زیر رو به عنوان مقدار Falsy در نظر میگیره

undefined, null, NaN, 0, "" و false

به مقادیری که به منزله ی TURE ارزیابی میشه رو مقادیر Truthy میگیم.
🟡 مقادیر غیر از مقادیر بالا Truthy تفسیر خواهد شد.

💬 نکته: مقدار 0 به عنوان Falsy شناخته میشود اما رشته ی "0" به عنوان Truthy تفیسر میشه.

💬 نکته 2: آرایه خالی یا آبجکت خالی به عنوان Truthy در نظر گرفته میشه.

🌐 @pieceJS

💎 تبدیل تاریخ میلادی به شمسی

برای تبدیل تاریخ میلادی به شمسی از متد toLocaleDateString متعلق به کلاس Date استفاده کنید.
#آبجکت #تاریخ

🌐 @pieceJS

💎 نحوه ایجاد Self-calling Function در جاوا اسکریپت
همه میدونیم که توابع به صورت پیشفرض تا صدا زده نشوند اجرا نخواهند شد، جاوا اسکریپت قابلیتی داره که به وسیله اون میتونید تابعی را تعریف کنید که به صورت خودکار، علاوه بر اینکه تعریف خواهد شد، اجرا هم بشود به این توابع میگیم Self Calling Fucntion.

🟣 به این توابع Self-Invoking Functions هم میگن.

#تابع
🌐 @pieceJS

💎 نکته مهم در جمع اعداد اعشاری
دلیل این اتفاق آن است که حاصل جمع این دو عدد 0.3 نیست بلکه 0.30000000000000004 است چرا که اعداد اعشاری در جاوا اسکریپت به صورت باینری 64 بیتی و از استاندار IEEE 754 پیروری می کنند.

#اعداد

🌐 @pieceJS

💎 یافتن Max و Min عدد درون یک آرایه
برای یافتن بزرگترین و کوچکترین عدد درون یک آرایه، بجای اینکه از for loop استفاده کنید میتوانید به سادگی با استفاده از دستور های بالا (خط دوم و سوم) Max و Min عدد را پیدا کنید.

#آرایه

🌐 @pieceJS

💎 بررسی مقدار عددی یک ورودی
برای اینکه بررسی کنید آیا ورودی کاربر عدد است یا خیر، میتونید از تابع بالا استفاده کنید.
#utils

🌐 @pieceJS

💎 دو عامل باعث ایجاد رندر مجدد در ریکت میشود

1️⃣ تغییر State
2️⃣ تغییر Props

هیچ وقت نباید مقدار دو را مستقیماً داد چون در این صورت ریکت نمیتواند تغییر آن ها را پیگیری کند در نتیجه رندر مجدد صورت نمیگیرد و این باعث شروع فصل جدیدی از باگ ها در پروژه شما خواهد شد.
#reactjs

🌐 @pieceJS

💎 تفاوت import با require چیست؟

💬 دیاگرام بالا کمک میکنه که تفاوت کلی این دو را متوجه شوید.

🟣 یکی از تفاوت های آنها این است که import به صورت نامتقارن (بدون اینکه صبر کند تا import های قبلی کامل اجرا شود) پردازش میشود اما require به صورت متقارن (گام به گام) اجرا می شود.

🟣 با require باید کتابخانه را به طور کامل به پروژه اضافه کنید اما با استفاده از import می توانید در صورت نیاز فقط قسمت مورد استفاده از کتابخانه مورد نظر را به پروژه اضافه کنید و باعث افزایش پرفورمنس و کاهش حجم باندل پروژه می شود.

🟣 متد require به طور خودکار فولدر node_modules را اسکن می کند ولی import که از ES6 به بعد به جاوااسکریپت اضافه شده است خودکار این فولدر را اسکن نمی کند.

💬 برای اکثر برنامه نویس ها که با استفاده از babel پروژه خودشون رو کامپایل می کنند تفاوت چندانی میان import و require احساس نمی کنند. چون babel تا حدزیادی این تفاوت ها را کاهش داده است

🌐 @pieceJS

💎 چگونه پروژه ام را فایل بندی کنم؟

سوال یکی از دوستان که به نظرم سوال خیلی از برنامه نویسان جوان هم هست، اینکه مثلا من میخوام صفحه ای به نام سبد خرید رو کدنویسی کنم، چطور باید فایل بندیش رو انجام بدم؟
💬 نکته مهم اینکه، این مورد بسیار سلیقه ای هست اما تلاش کنید تا جایی که مقدوره برای اینکه خوانا تر بنویسید، هر اسکریپت (یا هر کامپوننت در ریکت و یا هر ماژول در نود جی اس) را طوری قرار دهید که فقط یک عمل را انجام بدهد مثلا یک فایل فقط عمل حذف محصول رو انجام بدهد یک فایل فقط اضافه کردن محصول و... .
و ابتدا اصلا فکر این نباشید که فایل بندی عالی ای را انجام دهید، تمام کد ها را در یک فایل بنویسید پس از آنکه به پایان رسید، ری فکتورش کنید.

پ.ن: منظور کل پروژه نیست مثلا قسمت سبد خرید رو کامل در یک فایل بنویسید بعد از اتمام، اجزای مختلف آن را ریفکتور کنید.

💬 ممنون میشوم دوستان هم تجارب خودشون رو در خصوص نحوه صحیح فایل بندی پروژه بنویسند.

🌐 @pieceJS