❇️ Object Destructuring in ES6
🔸 ویژگی Object Destructuring یکی از ویژگی های جدید ES6 میباشد و در این پست قصد داریم به معرفی آن بپردازیم هم چنین در این پست برای اختصار از OD بجای Object Destructuring استفاده میکنیم.
🔻توجه داشته باشید که این اختصار اصلا رایج نبوده و فقط برای نگارش آسان تر در این پست استفاده شده است
🔹 اضافه شدن ویژگی OD به ES6 باعث به وجود آمدن هزاران syntax جدید در ES6 شد.
ویژگی OD کاربرهای بسیاری دارد و هنگام کار کردن با object ها array ها function ها بسیار پر استفاده خواهد بود.
🔹می توانیم از OD به همراه object ها برای ترکیب کردن دو یا سه یا .. object با یکدیگر استفاده کنیم یا حتی انتخاب برخی از فیلد های یک object و تبدیل آن به یک object کوچکتر استفاده کنیم.
🔹هم چنین از OD به همراه array ها برای ترکیب کردن ارایه ها یا حتی شکستن یک ارایه به بخش کوچکتر استفاده کنیم .
🔹در function ها از OD برای فیلتر کردن ارایه ها و object هایی که به عنوان آرگومان تعریف کرده ایم استفاده میکنیم.
( توجه کنید که کاربرد OD ها محدود به این موارد نیست و کاربرد های بسیار فراوانی دارد، موارد فوق صرفا جهت معرفی بخش کوچکی از کاربرد های این ویژگی ذکر شده اند. )
✳️ در این پست از OD به همراه object ها استفاده میکنیم.
🔸ابتدا باید به کمک یک مثال مشکلی قدیمی را بررسی کنیم و به ببینیم که چگونه OD به کمک ما می آید.
فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
و برای دریافت مقادیر فیلد های این object بدین شکل عمل میکردیم :
const first = person.first;
const last = person.last;
🔹اگر object ما ده ها فیلد داشت برای دریافت مقدار هر یک از فیلد های ان باید متغیر تعریف کنیم و هر بار مقدار فیلد مورد نظر را به متغیر خود اختصاص دهیم. کاری تکراری و طاقت فرسا.
اینجاست که OD وارد میشود و به کمک ما می آید.
const { first, last } = person;
🔹در این کد فیلد های last و first از person خوانده میشود و در متغیر های همنام متناظر خود قرار میگیرد و از این به بعد میتوانیم مقادیر را از متغیر های last و first بخوانیم و در جای جای scope استفاده کنیم.
🔹سینتکس مثال قبل یکی از سینتکس ها و کاربرد های فراوان OD میباشد.
هم چنین اگر مقدار فیلد city را person نیاز داشته باشیم میتوانیم به این شکل عمل کنیم.
const { first, last,city } = person;
console.log(first); //Brendan
console.log(last); //Eich
console.log(city); //Pittsburgh
حال بیایید object خود را کمی پیچیده تر کنیم فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan',
last: 'Eich',
links: {
social: {
site: 'https://brendaneich.com',
twitter: 'https://twitter.com/BrendanEich',
}
}
};
از این object فقط مقادیر site و twitter را نیاز داریم .
در گذشته برا خواندن این مقادیر بدین شکل عمل میکردیم :
const twitter = person.links.social.twitter;
const site = person.links.social.site;
اما می توانیم با کمک OD بدین شکل عمل کنیم :
const { twitter, site } = person.links.social;
console.log(twitter, site);
🔻 نکته مهم این است که متغیر ها بایستی همنام با فیلد های object باشند تا مقادیر مورد نظر در آنها ریخته شود.
اما اگر لازم بود تا متغیری با نامی متفاوت از آنچه که فیلد object هست داشته باشیم بدین شکل عمل میکنیم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
const { first : personFirstName } = person;
بدین صورت میتوانید به متغیر های خود در OD نامی متفاوت دهید.
✳️ Set default value with OD
🔸چگونه در هنگام destruct کردن یک آبجکت مقادیر پیشفرض برای متغیر ها اختصاص دهیم.
فرض کنیم object زیرا داریم
const settings = {
speed: 150
}
const { speed, width } = settings;
🔹 همانطور که مشخص است ابجکت settings دارای فیلدی به نام width نیست با log کردن این فیلد مقدار undefined لاگ خواهد شد.
برای set کردن مقدار پیفرض برای متغیر width در هنگام destruct کردن آبجکت settings :
const { speed, width = 500 } = settings;
بدین شکل عمل میکنیم .
🔻 نکته بسیار مهم این است که فقط در صورتی که مقدار متغیر width براربر با undefined باشد این مقدار پیشفرض برای آن set خواهد شد.
در صورتی که آبجکت settings دارای فیلد متناظری باشد حتی اگر مقدار آن null false 0 هم باشد این مقادیر در متغیر width قرار میگیرد.
☑️قسمت های بعدی OD در صورت دریافت فیدبک های انرژی بخش ادامه خواهد داشت.
❇️ Happy JS Coding 😉
@FullStackDevs
🔸 ویژگی Object Destructuring یکی از ویژگی های جدید ES6 میباشد و در این پست قصد داریم به معرفی آن بپردازیم هم چنین در این پست برای اختصار از OD بجای Object Destructuring استفاده میکنیم.
🔻توجه داشته باشید که این اختصار اصلا رایج نبوده و فقط برای نگارش آسان تر در این پست استفاده شده است
🔹 اضافه شدن ویژگی OD به ES6 باعث به وجود آمدن هزاران syntax جدید در ES6 شد.
ویژگی OD کاربرهای بسیاری دارد و هنگام کار کردن با object ها array ها function ها بسیار پر استفاده خواهد بود.
🔹می توانیم از OD به همراه object ها برای ترکیب کردن دو یا سه یا .. object با یکدیگر استفاده کنیم یا حتی انتخاب برخی از فیلد های یک object و تبدیل آن به یک object کوچکتر استفاده کنیم.
🔹هم چنین از OD به همراه array ها برای ترکیب کردن ارایه ها یا حتی شکستن یک ارایه به بخش کوچکتر استفاده کنیم .
🔹در function ها از OD برای فیلتر کردن ارایه ها و object هایی که به عنوان آرگومان تعریف کرده ایم استفاده میکنیم.
( توجه کنید که کاربرد OD ها محدود به این موارد نیست و کاربرد های بسیار فراوانی دارد، موارد فوق صرفا جهت معرفی بخش کوچکی از کاربرد های این ویژگی ذکر شده اند. )
✳️ در این پست از OD به همراه object ها استفاده میکنیم.
🔸ابتدا باید به کمک یک مثال مشکلی قدیمی را بررسی کنیم و به ببینیم که چگونه OD به کمک ما می آید.
فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
و برای دریافت مقادیر فیلد های این object بدین شکل عمل میکردیم :
const first = person.first;
const last = person.last;
🔹اگر object ما ده ها فیلد داشت برای دریافت مقدار هر یک از فیلد های ان باید متغیر تعریف کنیم و هر بار مقدار فیلد مورد نظر را به متغیر خود اختصاص دهیم. کاری تکراری و طاقت فرسا.
اینجاست که OD وارد میشود و به کمک ما می آید.
const { first, last } = person;
🔹در این کد فیلد های last و first از person خوانده میشود و در متغیر های همنام متناظر خود قرار میگیرد و از این به بعد میتوانیم مقادیر را از متغیر های last و first بخوانیم و در جای جای scope استفاده کنیم.
🔹سینتکس مثال قبل یکی از سینتکس ها و کاربرد های فراوان OD میباشد.
هم چنین اگر مقدار فیلد city را person نیاز داشته باشیم میتوانیم به این شکل عمل کنیم.
const { first, last,city } = person;
console.log(first); //Brendan
console.log(last); //Eich
console.log(city); //Pittsburgh
حال بیایید object خود را کمی پیچیده تر کنیم فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan',
last: 'Eich',
links: {
social: {
site: 'https://brendaneich.com',
twitter: 'https://twitter.com/BrendanEich',
}
}
};
از این object فقط مقادیر site و twitter را نیاز داریم .
در گذشته برا خواندن این مقادیر بدین شکل عمل میکردیم :
const twitter = person.links.social.twitter;
const site = person.links.social.site;
اما می توانیم با کمک OD بدین شکل عمل کنیم :
const { twitter, site } = person.links.social;
console.log(twitter, site);
🔻 نکته مهم این است که متغیر ها بایستی همنام با فیلد های object باشند تا مقادیر مورد نظر در آنها ریخته شود.
اما اگر لازم بود تا متغیری با نامی متفاوت از آنچه که فیلد object هست داشته باشیم بدین شکل عمل میکنیم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
const { first : personFirstName } = person;
بدین صورت میتوانید به متغیر های خود در OD نامی متفاوت دهید.
✳️ Set default value with OD
🔸چگونه در هنگام destruct کردن یک آبجکت مقادیر پیشفرض برای متغیر ها اختصاص دهیم.
فرض کنیم object زیرا داریم
const settings = {
speed: 150
}
const { speed, width } = settings;
🔹 همانطور که مشخص است ابجکت settings دارای فیلدی به نام width نیست با log کردن این فیلد مقدار undefined لاگ خواهد شد.
برای set کردن مقدار پیفرض برای متغیر width در هنگام destruct کردن آبجکت settings :
const { speed, width = 500 } = settings;
بدین شکل عمل میکنیم .
🔻 نکته بسیار مهم این است که فقط در صورتی که مقدار متغیر width براربر با undefined باشد این مقدار پیشفرض برای آن set خواهد شد.
در صورتی که آبجکت settings دارای فیلد متناظری باشد حتی اگر مقدار آن null false 0 هم باشد این مقادیر در متغیر width قرار میگیرد.
☑️قسمت های بعدی OD در صورت دریافت فیدبک های انرژی بخش ادامه خواهد داشت.
❇️ Happy JS Coding 😉
@FullStackDevs
Forwarded from Web Devs
This media is not supported in your browser
VIEW IN TELEGRAM
🔰Microsoft Build (For developers by developers )
❇️ Free digital event
Starts: May 19, 2020 at 8 AM Pacific Time
Ends: May 21, 2020 at 8 AM Pacific Time
📢 @FullStackDevs
❇️ Free digital event
Starts: May 19, 2020 at 8 AM Pacific Time
Ends: May 21, 2020 at 8 AM Pacific Time
📢 @FullStackDevs
Forwarded from Web Devs
#OAuth
در این پست می آموزیم که OAuth چیست.
درابتدا باید بدانیم که OAuth مخفف Open Authorization میباشد.
🔳 OAuth
یک پروتکل برای اهدای مجوز برای دسترسی به اطلاعات کاربر توسط اپلیکیشنی دیگر است.
🔸 این پروتکل ابتدا در سال 2007 معرفی شد و توسط توییتر استفاده شد و با توجه به استقبال و گستردگی ان در سال 2010 نسخه OAuth 2.0 توسط IEFT (جامعه بین المللی آزاد از طراحان شبکه ، اپراتورها ، فروشندگان و محققانی است که بر روی تدوین استانداردهای فنی برای اینترنت کار می کنند.) معرفی شد.
▪️ برای مثال ممکن است موقع ثبت نام در سایتی گزینه هایی همچون “login with Google” یا “login with Facebook” را دیده باشید که عملیات login را بسیار ساده میکند و با اعطای مجوز دسترسی به اطلاعاتتان به سایتی که میخواهید در آن حساب بسازید عملیات ورود و ساخت حساب را انجام میدهید.
سه اجزایی که در یک مکانیزم OAuth وجود دارند عبارتند از :
1️⃣ OAuth Provider,Resource Provider
سرویسی که با دریافت تاییدیه امکان استفاده از اطلاعات کاربر را به یک اپلیکیشن دیگر میدهد. مانند گوگل ، فیس بوک و... که بایستی پروتکل OAuth را پیاده سازی کرده باشد.
2️⃣ OAuth Client
وب سایت یا اپلیکیشنی که اجازه دسترسی به اطلاعاتمان را به آن میدهیم.
3️⃣ Resource Owner
شخصی که اطلاعات آن در اختیار Resource Provider است.
طی این فرایند شما با اعطای مجوز به OAuth Client و دریافت یک access token این امکان را به OAuth Client میدهید که به اطلاعات شما از طریق آن access token دسترسی داشته باشد .
@fullStackDevs
در این پست می آموزیم که OAuth چیست.
درابتدا باید بدانیم که OAuth مخفف Open Authorization میباشد.
🔳 OAuth
یک پروتکل برای اهدای مجوز برای دسترسی به اطلاعات کاربر توسط اپلیکیشنی دیگر است.
🔸 این پروتکل ابتدا در سال 2007 معرفی شد و توسط توییتر استفاده شد و با توجه به استقبال و گستردگی ان در سال 2010 نسخه OAuth 2.0 توسط IEFT (جامعه بین المللی آزاد از طراحان شبکه ، اپراتورها ، فروشندگان و محققانی است که بر روی تدوین استانداردهای فنی برای اینترنت کار می کنند.) معرفی شد.
▪️ برای مثال ممکن است موقع ثبت نام در سایتی گزینه هایی همچون “login with Google” یا “login with Facebook” را دیده باشید که عملیات login را بسیار ساده میکند و با اعطای مجوز دسترسی به اطلاعاتتان به سایتی که میخواهید در آن حساب بسازید عملیات ورود و ساخت حساب را انجام میدهید.
سه اجزایی که در یک مکانیزم OAuth وجود دارند عبارتند از :
1️⃣ OAuth Provider,Resource Provider
سرویسی که با دریافت تاییدیه امکان استفاده از اطلاعات کاربر را به یک اپلیکیشن دیگر میدهد. مانند گوگل ، فیس بوک و... که بایستی پروتکل OAuth را پیاده سازی کرده باشد.
2️⃣ OAuth Client
وب سایت یا اپلیکیشنی که اجازه دسترسی به اطلاعاتمان را به آن میدهیم.
3️⃣ Resource Owner
شخصی که اطلاعات آن در اختیار Resource Provider است.
طی این فرایند شما با اعطای مجوز به OAuth Client و دریافت یک access token این امکان را به OAuth Client میدهید که به اطلاعات شما از طریق آن access token دسترسی داشته باشد .
@fullStackDevs
Forwarded from Web Devs
#OpenID
💡 What is Open ID?
در پست های قبل به OAuth پرداختیم و گفتیم که این پروتکل مختص به Authorization است و با ارائه یک توکن دسترسی اجازه استفاده از اطلاعات را میدهد و اپلیکیشن جانبی مان اطلاعاتی در مورد کاربر جاری که از این توکن استفاده میکند ،ندارد.
اما اپن آیدی پروتکلی برای authentication و تصدیق هویت میباشد این پروتکل لایه ای بر روی OAuth 2.0 میباشد .
با استفاده از این پروتکل، Token ID ای دریافت میکنید که JWT بوده و اپلیکیشن جانبی تان علاوه بر دسترسی از طریق این توکن اطلاعاتی هم درباره کاربر جاری دارد.
اپن آیدی اجازه استفاده از یک حساب(اکانت) برای چندین سایت بدون اینکه نیاز به تغییر رمز عبور داشته باشید میدهد.
💢 مراحل انجام کار
1. ارسال اطلاعات کلاینت به Identity Provider
2. دریافت این اطلاعات در سمت Identity Provider و شناسایی و لاگین کاربر
3. ارسال یک Access Token و یک ID Token (اگر کلاینت درخواست کند) از سمت identity Provider به کلاینت.
4. دریافت این توکن ها در سمت کلاینت و کلاینت میتواند با استفاده از Access Token درسمت Identity Provider برای دسترسی به اطلاعات api هایی رو صدا بزند و همچنین از ID Token برای بازیابی اطلاعات کاربر استفاده کند.
این پروتکل برای اولین بار در سال 2005 معرفی و پیاده سازی شد و نسخه بعدی آن که OpenID Connect نامیده میشود در فوریه 2014 ارئه گردید.
@fullStackDevs
💡 What is Open ID?
در پست های قبل به OAuth پرداختیم و گفتیم که این پروتکل مختص به Authorization است و با ارائه یک توکن دسترسی اجازه استفاده از اطلاعات را میدهد و اپلیکیشن جانبی مان اطلاعاتی در مورد کاربر جاری که از این توکن استفاده میکند ،ندارد.
اما اپن آیدی پروتکلی برای authentication و تصدیق هویت میباشد این پروتکل لایه ای بر روی OAuth 2.0 میباشد .
با استفاده از این پروتکل، Token ID ای دریافت میکنید که JWT بوده و اپلیکیشن جانبی تان علاوه بر دسترسی از طریق این توکن اطلاعاتی هم درباره کاربر جاری دارد.
اپن آیدی اجازه استفاده از یک حساب(اکانت) برای چندین سایت بدون اینکه نیاز به تغییر رمز عبور داشته باشید میدهد.
💢 مراحل انجام کار
1. ارسال اطلاعات کلاینت به Identity Provider
2. دریافت این اطلاعات در سمت Identity Provider و شناسایی و لاگین کاربر
3. ارسال یک Access Token و یک ID Token (اگر کلاینت درخواست کند) از سمت identity Provider به کلاینت.
4. دریافت این توکن ها در سمت کلاینت و کلاینت میتواند با استفاده از Access Token درسمت Identity Provider برای دسترسی به اطلاعات api هایی رو صدا بزند و همچنین از ID Token برای بازیابی اطلاعات کاربر استفاده کند.
این پروتکل برای اولین بار در سال 2005 معرفی و پیاده سازی شد و نسخه بعدی آن که OpenID Connect نامیده میشود در فوریه 2014 ارئه گردید.
@fullStackDevs
#CSharp9
#InitOnlyProperty
#NewFeature
🔰 اگر دنبال کننده خبرها باشید حتما میدانید که Microsift Build 2020 به تازگی به اتمام رسید است، که معرفی ویژگی های C# 9 از جمله چیزهای جدیدی بود که در این بیلد معرفی شد.
▫️ در اول لیست ویژگی های C# 9
❇️ Init-only properties
به چشم میخوره و اما بیایید به ببینیم این ویژگی چی هست و اصلا چرا به سی شارپ اضافه شد❕
🔸قبلا از شروع بایستی با تعریف های زیر آشنایی داشته باشید
▪️ Immutable type :
یک Immutable type نوعی هست که پراپرتی های آن نوع، فقط در زمان ساخته شدن آن میتوانند مقدار دهی شوند و بعد از آن قابل تغییر نیستند.
▪️immutable property :
به طور ساده یک immutable property یک read-only property میباشد.
✳️ سی شارپ این اجازه را میدهد تا به صورت positional و nominal کد بنویسید.
برای استفاده از سینتکس positional از متد سازنده میتوان استفاده کرد و Object initializer هم از سینتکس های nominal میباشد.
🔹تاقبل از سی شارپ 9 استفاده از سینتکس nominal برای Initialize کردن ابجکت ها دارای محدودیتی بود که پراپرتی ها الزاما بایستی writable میبودند تا بتوان آنها را در هنگام ساختن آبجکت با استفاده از سینتکس nominal مقدار دهی کرد.
❇️ Positional Creation
🔸این سبک کد نویسی یک سبک مرسوم و قدیمی میباشد که از ابتدای عمر C# مورد استفاده قرار میگرفته است که از متد سازنده برای initialize کردن پراپرتی های یک آبجکت استفاده میکنیم.
و در هنگام نمونه سازی از کلاس بایستی پارامتر های لازم را از طریق متد سازنده برای initialize کردن ابجکت پاس دهیم.
```
public class Person
{
public string FirstName { get; }
public string LastName { get; }
public Person(string firstName, string lastName)
{
FirstName = firstName;
LastName = lastName;
}
}
public class Racer : Person
{
public string RacingTeam { get; }
public Racer(string firstName, string lastName, string racingTeam)
: base(firstName, lastName)
{
RacingTeam = racingTeam;
}
}
Person p = new Racer("Charles", "Leclerc", "Ferrari");
```
❇️ Nominal Creation
🔸با استفاده از این سبک کدنویسی، کد کمتری مینویسید و به جای تعریف کردن متد سازنده از ویژگیه object initializer استفاده میکنید.
🔰 تمام آنچه که تاکنون گفته شد مقدمه ای بود برای بررسی علت معرفی Init-only property در سی شارپ 9 و اینکه چرا این نیاز در سی شارپ حس شد.
بدین ترتیب Init-only property ها معرفی شدند تا امکان مقدار دهی و تعریف immutable proprty ها immutable type ها را هنگام استفاده از object initilizer داشته باشیم .
🔸بدین منظور accessor جدیدی تحت عنوان init اضافه گردیده است که شکلی دیگر از accessor پیشین set میباشد.
در هنگام initilize کردن یک ابجکت با استفاده از object initializer، پراپرتی هایی که با این accessor تعریف شوند، هنگام اجرا شدن متد سازنده کلاس مقدار دهی میشوند و بعد از ساخته شدن آبجکت به صورت readonly خواهند بود و نمیتوان به آنها مقداری اختصاص داد.
❇️ Validation assigned value to init-only properties
🔸گاهی اوقات نیز الزامی است تا مقداری که به init-only property اختاصاص داده میشود، اعتبار سنجی شود.
نکته ای که وجود دارد این است که به صورت تک فیلد برای هر init-only property نمیتوانید اعتبار سنجی انجام دهید و بایستی به صورت یک بلاگ کد برای init-only property های خود اعتبارسنجی انجام دهید.
🔎 منبع
@FullStackDevs
#InitOnlyProperty
#NewFeature
🔰 اگر دنبال کننده خبرها باشید حتما میدانید که Microsift Build 2020 به تازگی به اتمام رسید است، که معرفی ویژگی های C# 9 از جمله چیزهای جدیدی بود که در این بیلد معرفی شد.
▫️ در اول لیست ویژگی های C# 9
❇️ Init-only properties
به چشم میخوره و اما بیایید به ببینیم این ویژگی چی هست و اصلا چرا به سی شارپ اضافه شد❕
🔸قبلا از شروع بایستی با تعریف های زیر آشنایی داشته باشید
▪️ Immutable type :
یک Immutable type نوعی هست که پراپرتی های آن نوع، فقط در زمان ساخته شدن آن میتوانند مقدار دهی شوند و بعد از آن قابل تغییر نیستند.
▪️immutable property :
به طور ساده یک immutable property یک read-only property میباشد.
✳️ سی شارپ این اجازه را میدهد تا به صورت positional و nominal کد بنویسید.
برای استفاده از سینتکس positional از متد سازنده میتوان استفاده کرد و Object initializer هم از سینتکس های nominal میباشد.
🔹تاقبل از سی شارپ 9 استفاده از سینتکس nominal برای Initialize کردن ابجکت ها دارای محدودیتی بود که پراپرتی ها الزاما بایستی writable میبودند تا بتوان آنها را در هنگام ساختن آبجکت با استفاده از سینتکس nominal مقدار دهی کرد.
❇️ Positional Creation
🔸این سبک کد نویسی یک سبک مرسوم و قدیمی میباشد که از ابتدای عمر C# مورد استفاده قرار میگرفته است که از متد سازنده برای initialize کردن پراپرتی های یک آبجکت استفاده میکنیم.
و در هنگام نمونه سازی از کلاس بایستی پارامتر های لازم را از طریق متد سازنده برای initialize کردن ابجکت پاس دهیم.
```
public class Person
{
public string FirstName { get; }
public string LastName { get; }
public Person(string firstName, string lastName)
{
FirstName = firstName;
LastName = lastName;
}
}
public class Racer : Person
{
public string RacingTeam { get; }
public Racer(string firstName, string lastName, string racingTeam)
: base(firstName, lastName)
{
RacingTeam = racingTeam;
}
}
Person p = new Racer("Charles", "Leclerc", "Ferrari");
```
❇️ Nominal Creation
🔸با استفاده از این سبک کدنویسی، کد کمتری مینویسید و به جای تعریف کردن متد سازنده از ویژگیه object initializer استفاده میکنید.
public class Person🔹اما استفاده از object initializer محدودتی هایی به همراه دارد، علی رغم دم دست بودن و راحتی که در مقایسه با Positional دارد اما در پشت صحنه مقادیر پراپرتی ها بعد از اتمام صدا زده شدن و اجرای متد سازنده کلاس، set میشوند و بدین ترتیب با استفاده از این سبک کد نویسی نمیتوانید یک immutable type تعریف کنید و بدین منظور باید از سبک قبلی (Positional Creation) استفاده کنید.
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
public class Racer : Person
{
public string RacingTeam { get; set; }
}
Person p = new Racer { FirstName = "Charles", LastName = "Leclerc", RacingTeam = "Ferrari" };
🔰 تمام آنچه که تاکنون گفته شد مقدمه ای بود برای بررسی علت معرفی Init-only property در سی شارپ 9 و اینکه چرا این نیاز در سی شارپ حس شد.
بدین ترتیب Init-only property ها معرفی شدند تا امکان مقدار دهی و تعریف immutable proprty ها immutable type ها را هنگام استفاده از object initilizer داشته باشیم .
🔸بدین منظور accessor جدیدی تحت عنوان init اضافه گردیده است که شکلی دیگر از accessor پیشین set میباشد.
در هنگام initilize کردن یک ابجکت با استفاده از object initializer، پراپرتی هایی که با این accessor تعریف شوند، هنگام اجرا شدن متد سازنده کلاس مقدار دهی میشوند و بعد از ساخته شدن آبجکت به صورت readonly خواهند بود و نمیتوان به آنها مقداری اختصاص داد.
❇️ Validation assigned value to init-only properties
🔸گاهی اوقات نیز الزامی است تا مقداری که به init-only property اختاصاص داده میشود، اعتبار سنجی شود.
نکته ای که وجود دارد این است که به صورت تک فیلد برای هر init-only property نمیتوانید اعتبار سنجی انجام دهید و بایستی به صورت یک بلاگ کد برای init-only property های خود اعتبارسنجی انجام دهید.
public class Person}
{
public string FirstName { get; init; }
public string LastName { get; init; }
init
{
if (FirstName.Length + LastName.Length > 52)
{
throw new Exception("...");
}
}
🔎 منبع
@FullStackDevs
#ES11
#NewFeatures
#java_script
❇️ New features in ES2020(ES 11)
🔸 در این پست به معرفی ویژگی های جدیدی که تحت عنوان ES2020 به جاوا اسکریپت اضافه شده است، می پردازیم.
باید بدانید که ES مخفف ECMAScript میباشد و استانداردی است که جاوا اسکریپت بر اساس ان ساخته شده است و شروع آن از سال 2015 بوده و گروهی از توسعه دهندگان جاوا اسکریپت و سایر افراد دیگر که در توسعه و افزودن ویژگی های جدید به جاوا اسکریپت همکاری میکنند.
در ECMAScript برای انتشار یک ویژگی جدید چهار مرحله وجود دارد :
▪️Proposal
▪️Draft
▪️Candidate
▪️Finished
🔸 زمانی که ویژگی جدید به مرحله چهارم برسد به عنوان یک بخشی از ECMAScript release تلقی میشود و از این به بعد این وظیفه ی مرورگر است که آن ویژگی را پیاده سازی کند.
🔹 پس قبل از اینکه از ویژگی جدیدی استفاده کنید مطمئن شوید که مرورگرتان آنرا پیاده سازی کرده باشد. برای این منظور میتوانید از
وب سایت caniuse کمک بگیرید.
🔶در ادامه به مهمترین ویژگی های ES11 میپردازیم
✳️ Nullish Coalescing Operator (??)
🔸زمانی که می خواهیم به یک پراپرتی یک آبجکت دسترسی داشته باشیم گاهی اوقات لازم است تا فقط درصورت null یا undefined بودن مقدار یک متغییر یا پراپرتی، مقادیر پیشفرض جایگزین شوند.
در گذشته برای این منظور از عملگر || استفاده میکردیم، اتفاقی که در حقیقت در زمان استفاده از این عملگر می افتاد این بود که مقادیر متغیر یا پراپرتی مربوطه توسط جاوااسکریپت به اجبار به Boolean تبدیل میشدند و در صورت که مقدار متغیر یا پراپرتی تعیین شده falsy بود مقدار پیشرفرض مشخص شده در نظر گرفته میشد.
مقادیر falsyType در جاوااسکریپت عبارتند از :
(رشته خالی) '' , 0,undefined,null,false,NaN , ...
const falsyTypes = {
emptyString: '',
zeroNum: 0,
falseBoolean: false,
nullValue: null,
}
const undefinedValue = falsyTypes.undefinedValue || 'my default'
🔸حال بیاییم شرایطی را در نظر بگیریم که فقط در صورت null یا undefined بودن مقدار یک پراپرتی, مقدار پیشفرض مشخص شده, در نظر گرفته شود.چنین شرایطی زمانی که از نوع داده ای متغیر خود آگاه نباشیم, اگر از عملگر || استفاده کنیم باعث بروز رفتار های ناخوسته ای میشود, به عنوان مثال ممکن است مقدار پراپرتی false باشد و بدلیل اینکه hcعملگر || استفاده کردیم, جاوااسکریپت از falsy check برای این منظور استفاده میکند, و باز هم مقدار پیشفرض درنظر گرفته خواهد شد.
در حالی که فقط میخواستیم اگر مقدار پراپرتی null یا undefined باشد, مقدار پیشفرض در نظر گرفته شود.
🔹حل این مشکل در ES11 با عملگر (??) انجام میشود.
در صورتی که مقدار متغیر فقط null یا undefined باشد, مقادیر پیشفرض در نظر گرفته خواهد شد.
✳️ Optional Chaining Operator(Elvis operator)
🔸این عملگر این امکان را فراهم میسازد که زمانی که در حال خواندن پراپرتی های یک آبجکت تو در تو هستید نگرانی ای در مورد وجود داشتن یا نداشتن پراپرتی های آن آبجکت نداشته باشید, اگر آبجکت مربوطه دارای پراپرتی مشخص شده نباشد undefined بازگشت داده خواهد شد.
🔹از این عملگر هم برای مطمئن شدن از وجود داشتن پراپرتی ها و متد ها در آبجت میتوانید استفاده کنید.
در گذشته برای این منظور بدین شکل عمل میکردیم :
const nestedObject = {
firstProp: {
secondProp: {
thirdProp: {
nestedProp: 3
}
}
}
};
if (nestedObject &&
nestedObject.firstProp &&
nestedObject.firstProp.secondProp && nestedObject.firstProp.secondProp.thirdProp && nestedObject.firstProp.secondProp.thirdProp.nestedProp) {
const validPropriety = nestedObject.firstProp.secondProp.thirdProp.nestedProp
console.log(validPropriety) // 3
}
🔹و اما راه حل ES11 آن بدین شکل است :
const checkedProp = nestedObject?.firstProp?.secondProp?.thirdProp?.nestedProp
console.log(checkedProp)
✳️ Promise.allSettled
🔸 این متد که در ES11 اضافه شده، آرایه ای از promise ها دریافت میکند، زمانی که از این متد استفاده میکنید، این متد به عنوان خروجی یک promise باز میگرداند، که شامل ارایه ای از promise های داده شده به آن است و وضعیت reject یا resolve شدن هر یک از promise های داده شده در آن مشخص میباشد، در واقع زمانی که از این متد استفاده میکنید،حتما resolve شدن همه ی promise ها اهمیتی ندارد.
@FullStackDevs
#NewFeatures
#java_script
❇️ New features in ES2020(ES 11)
🔸 در این پست به معرفی ویژگی های جدیدی که تحت عنوان ES2020 به جاوا اسکریپت اضافه شده است، می پردازیم.
باید بدانید که ES مخفف ECMAScript میباشد و استانداردی است که جاوا اسکریپت بر اساس ان ساخته شده است و شروع آن از سال 2015 بوده و گروهی از توسعه دهندگان جاوا اسکریپت و سایر افراد دیگر که در توسعه و افزودن ویژگی های جدید به جاوا اسکریپت همکاری میکنند.
در ECMAScript برای انتشار یک ویژگی جدید چهار مرحله وجود دارد :
▪️Proposal
▪️Draft
▪️Candidate
▪️Finished
🔸 زمانی که ویژگی جدید به مرحله چهارم برسد به عنوان یک بخشی از ECMAScript release تلقی میشود و از این به بعد این وظیفه ی مرورگر است که آن ویژگی را پیاده سازی کند.
🔹 پس قبل از اینکه از ویژگی جدیدی استفاده کنید مطمئن شوید که مرورگرتان آنرا پیاده سازی کرده باشد. برای این منظور میتوانید از
وب سایت caniuse کمک بگیرید.
🔶در ادامه به مهمترین ویژگی های ES11 میپردازیم
✳️ Nullish Coalescing Operator (??)
🔸زمانی که می خواهیم به یک پراپرتی یک آبجکت دسترسی داشته باشیم گاهی اوقات لازم است تا فقط درصورت null یا undefined بودن مقدار یک متغییر یا پراپرتی، مقادیر پیشفرض جایگزین شوند.
در گذشته برای این منظور از عملگر || استفاده میکردیم، اتفاقی که در حقیقت در زمان استفاده از این عملگر می افتاد این بود که مقادیر متغیر یا پراپرتی مربوطه توسط جاوااسکریپت به اجبار به Boolean تبدیل میشدند و در صورت که مقدار متغیر یا پراپرتی تعیین شده falsy بود مقدار پیشرفرض مشخص شده در نظر گرفته میشد.
مقادیر falsyType در جاوااسکریپت عبارتند از :
(رشته خالی) '' , 0,undefined,null,false,NaN , ...
const falsyTypes = {
emptyString: '',
zeroNum: 0,
falseBoolean: false,
nullValue: null,
}
const undefinedValue = falsyTypes.undefinedValue || 'my default'
🔸حال بیاییم شرایطی را در نظر بگیریم که فقط در صورت null یا undefined بودن مقدار یک پراپرتی, مقدار پیشفرض مشخص شده, در نظر گرفته شود.چنین شرایطی زمانی که از نوع داده ای متغیر خود آگاه نباشیم, اگر از عملگر || استفاده کنیم باعث بروز رفتار های ناخوسته ای میشود, به عنوان مثال ممکن است مقدار پراپرتی false باشد و بدلیل اینکه hcعملگر || استفاده کردیم, جاوااسکریپت از falsy check برای این منظور استفاده میکند, و باز هم مقدار پیشفرض درنظر گرفته خواهد شد.
در حالی که فقط میخواستیم اگر مقدار پراپرتی null یا undefined باشد, مقدار پیشفرض در نظر گرفته شود.
🔹حل این مشکل در ES11 با عملگر (??) انجام میشود.
در صورتی که مقدار متغیر فقط null یا undefined باشد, مقادیر پیشفرض در نظر گرفته خواهد شد.
✳️ Optional Chaining Operator(Elvis operator)
🔸این عملگر این امکان را فراهم میسازد که زمانی که در حال خواندن پراپرتی های یک آبجکت تو در تو هستید نگرانی ای در مورد وجود داشتن یا نداشتن پراپرتی های آن آبجکت نداشته باشید, اگر آبجکت مربوطه دارای پراپرتی مشخص شده نباشد undefined بازگشت داده خواهد شد.
🔹از این عملگر هم برای مطمئن شدن از وجود داشتن پراپرتی ها و متد ها در آبجت میتوانید استفاده کنید.
در گذشته برای این منظور بدین شکل عمل میکردیم :
const nestedObject = {
firstProp: {
secondProp: {
thirdProp: {
nestedProp: 3
}
}
}
};
if (nestedObject &&
nestedObject.firstProp &&
nestedObject.firstProp.secondProp && nestedObject.firstProp.secondProp.thirdProp && nestedObject.firstProp.secondProp.thirdProp.nestedProp) {
const validPropriety = nestedObject.firstProp.secondProp.thirdProp.nestedProp
console.log(validPropriety) // 3
}
🔹و اما راه حل ES11 آن بدین شکل است :
const checkedProp = nestedObject?.firstProp?.secondProp?.thirdProp?.nestedProp
console.log(checkedProp)
✳️ Promise.allSettled
🔸 این متد که در ES11 اضافه شده، آرایه ای از promise ها دریافت میکند، زمانی که از این متد استفاده میکنید، این متد به عنوان خروجی یک promise باز میگرداند، که شامل ارایه ای از promise های داده شده به آن است و وضعیت reject یا resolve شدن هر یک از promise های داده شده در آن مشخص میباشد، در واقع زمانی که از این متد استفاده میکنید،حتما resolve شدن همه ی promise ها اهمیتی ندارد.
@FullStackDevs
#ES11
#NewFeatures
#java_script
#ادامه
✳️ globalThis
🔸با گذشت زمان جاوااسکریپت رفته رفته تکامل یافت و باعث ورود جاوااسکریپت به محیط های دیگر خارج از مرورگر شد.
بنابرین زمانی که یک کد cross-platform با جاوااسکریپت می نویسید که بروی node و مرورگر و web-workers اجرا شود، در تمام این محیط ها برای دسترسی به گلوبال آبجکت با شئ متفاوتی سروکار دارید.
در مرورگر گلوبال آبجکت به window و در node به global و در web workers گلوبال ابجکت به self اشاره میکند.
و راه حل استانداردی برای دسترسی به صورت یک پارچه در تمام این محیط ها به شی گلوبال آبجکت وجود نداشت.
🔹در ES11 اما با معرفی globalThis میتوانید بسته به محیطی که کد در آن اجرا میشود به گلوبال آبجکت آن محیط دسرسی داشته باشید.
✳️ Private class variables
از ES11 به بعد برای تعریف پراپرتی های private در کلاس ها از # در ابتدای نام پراپرتی ها استفاده میکنیم.
class Something {
#property;
constructor(){
this.#property = "test";
}
#privateMethod() {
return 'hello world';
}
getPrivateMessage() {
return this.#privateMethod();
}
}
✳️ Dynamic import
🔸داینامیک import() یک promise برای ماژول درخواست شده باز میگرداند که میتوانید با استفاده از async/await و await کردن داینامیک import(), ماژول خود را در یک متغیر نگه دارید.
به عنوان مثال میتوانید در زمان برقرار بودن یک شرط ماژول خود را import() کنید:
async function load() {
if(true){
let say = await import('./say.js');
say.hi(); // Hello!
say.bye(); // Bye!
say.default(); // Module loaded (export default)!
}
}
(ویژگی private property در برخی منابع به عنوان ویژگی جدید ES11 معرفی شده بود و در برخی منابع خیر. در این پست اما جهت معرفی وجود چنین ویژگی در جاوااسکریپت آورده شده است)
@FullStackDevs
#NewFeatures
#java_script
#ادامه
✳️ globalThis
🔸با گذشت زمان جاوااسکریپت رفته رفته تکامل یافت و باعث ورود جاوااسکریپت به محیط های دیگر خارج از مرورگر شد.
بنابرین زمانی که یک کد cross-platform با جاوااسکریپت می نویسید که بروی node و مرورگر و web-workers اجرا شود، در تمام این محیط ها برای دسترسی به گلوبال آبجکت با شئ متفاوتی سروکار دارید.
در مرورگر گلوبال آبجکت به window و در node به global و در web workers گلوبال ابجکت به self اشاره میکند.
و راه حل استانداردی برای دسترسی به صورت یک پارچه در تمام این محیط ها به شی گلوبال آبجکت وجود نداشت.
🔹در ES11 اما با معرفی globalThis میتوانید بسته به محیطی که کد در آن اجرا میشود به گلوبال آبجکت آن محیط دسرسی داشته باشید.
✳️ Private class variables
از ES11 به بعد برای تعریف پراپرتی های private در کلاس ها از # در ابتدای نام پراپرتی ها استفاده میکنیم.
class Something {
#property;
constructor(){
this.#property = "test";
}
#privateMethod() {
return 'hello world';
}
getPrivateMessage() {
return this.#privateMethod();
}
}
✳️ Dynamic import
🔸داینامیک import() یک promise برای ماژول درخواست شده باز میگرداند که میتوانید با استفاده از async/await و await کردن داینامیک import(), ماژول خود را در یک متغیر نگه دارید.
به عنوان مثال میتوانید در زمان برقرار بودن یک شرط ماژول خود را import() کنید:
async function load() {
if(true){
let say = await import('./say.js');
say.hi(); // Hello!
say.bye(); // Bye!
say.default(); // Module loaded (export default)!
}
}
(ویژگی private property در برخی منابع به عنوان ویژگی جدید ES11 معرفی شده بود و در برخی منابع خیر. در این پست اما جهت معرفی وجود چنین ویژگی در جاوااسکریپت آورده شده است)
@FullStackDevs
Forwarded from Web Devs
❇️ Object Destructuring in ES6
🔸 ویژگی Object Destructuring یکی از ویژگی های جدید ES6 میباشد و در این پست قصد داریم به معرفی آن بپردازیم هم چنین در این پست برای اختصار از OD بجای Object Destructuring استفاده میکنیم.
🔻توجه داشته باشید که این اختصار اصلا رایج نبوده و فقط برای نگارش آسان تر در این پست استفاده شده است
🔹 اضافه شدن ویژگی OD به ES6 باعث به وجود آمدن هزاران syntax جدید در ES6 شد.
ویژگی OD کاربرهای بسیاری دارد و هنگام کار کردن با object ها array ها function ها بسیار پر استفاده خواهد بود.
🔹می توانیم از OD به همراه object ها برای ترکیب کردن دو یا سه یا .. object با یکدیگر استفاده کنیم یا حتی انتخاب برخی از فیلد های یک object و تبدیل آن به یک object کوچکتر استفاده کنیم.
🔹هم چنین از OD به همراه array ها برای ترکیب کردن ارایه ها یا حتی شکستن یک ارایه به بخش کوچکتر استفاده کنیم .
🔹در function ها از OD برای فیلتر کردن ارایه ها و object هایی که به عنوان آرگومان تعریف کرده ایم استفاده میکنیم.
( توجه کنید که کاربرد OD ها محدود به این موارد نیست و کاربرد های بسیار فراوانی دارد، موارد فوق صرفا جهت معرفی بخش کوچکی از کاربرد های این ویژگی ذکر شده اند. )
✳️ در این پست از OD به همراه object ها استفاده میکنیم.
🔸ابتدا باید به کمک یک مثال مشکلی قدیمی را بررسی کنیم و به ببینیم که چگونه OD به کمک ما می آید.
فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
و برای دریافت مقادیر فیلد های این object بدین شکل عمل میکردیم :
const first = person.first;
const last = person.last;
🔹اگر object ما ده ها فیلد داشت برای دریافت مقدار هر یک از فیلد های ان باید متغیر تعریف کنیم و هر بار مقدار فیلد مورد نظر را به متغیر خود اختصاص دهیم. کاری تکراری و طاقت فرسا.
اینجاست که OD وارد میشود و به کمک ما می آید.
const { first, last } = person;
🔹در این کد فیلد های last و first از person خوانده میشود و در متغیر های همنام متناظر خود قرار میگیرد و از این به بعد میتوانیم مقادیر را از متغیر های last و first بخوانیم و در جای جای scope استفاده کنیم.
🔹سینتکس مثال قبل یکی از سینتکس ها و کاربرد های فراوان OD میباشد.
هم چنین اگر مقدار فیلد city را person نیاز داشته باشیم میتوانیم به این شکل عمل کنیم.
const { first, last,city } = person;
console.log(first); //Brendan
console.log(last); //Eich
console.log(city); //Pittsburgh
حال بیایید object خود را کمی پیچیده تر کنیم فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan',
last: 'Eich',
links: {
social: {
site: 'https://brendaneich.com',
twitter: 'https://twitter.com/BrendanEich',
}
}
};
از این object فقط مقادیر site و twitter را نیاز داریم .
در گذشته برا خواندن این مقادیر بدین شکل عمل میکردیم :
const twitter = person.links.social.twitter;
const site = person.links.social.site;
اما می توانیم با کمک OD بدین شکل عمل کنیم :
const { twitter, site } = person.links.social;
console.log(twitter, site);
🔻 نکته مهم این است که متغیر ها بایستی همنام با فیلد های object باشند تا مقادیر مورد نظر در آنها ریخته شود.
اما اگر لازم بود تا متغیری با نامی متفاوت از آنچه که فیلد object هست داشته باشیم بدین شکل عمل میکنیم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
const { first : personFirstName } = person;
بدین صورت میتوانید به متغیر های خود در OD نامی متفاوت دهید.
✳️ Set default value with OD
🔸چگونه در هنگام destruct کردن یک آبجکت مقادیر پیشفرض برای متغیر ها اختصاص دهیم.
فرض کنیم object زیرا داریم
const settings = {
speed: 150
}
const { speed, width } = settings;
🔹 همانطور که مشخص است ابجکت settings دارای فیلدی به نام width نیست با log کردن این فیلد مقدار undefined لاگ خواهد شد.
برای set کردن مقدار پیفرض برای متغیر width در هنگام destruct کردن آبجکت settings :
const { speed, width = 500 } = settings;
بدین شکل عمل میکنیم .
🔻 نکته بسیار مهم این است که فقط در صورتی که مقدار متغیر width براربر با undefined باشد این مقدار پیشفرض برای آن set خواهد شد.
در صورتی که آبجکت settings دارای فیلد متناظری باشد حتی اگر مقدار آن null false 0 هم باشد این مقادیر در متغیر width قرار میگیرد.
☑️قسمت های بعدی OD در صورت دریافت فیدبک های انرژی بخش ادامه خواهد داشت.
❇️ Happy JS Coding 😉
@FullStackDevs
🔸 ویژگی Object Destructuring یکی از ویژگی های جدید ES6 میباشد و در این پست قصد داریم به معرفی آن بپردازیم هم چنین در این پست برای اختصار از OD بجای Object Destructuring استفاده میکنیم.
🔻توجه داشته باشید که این اختصار اصلا رایج نبوده و فقط برای نگارش آسان تر در این پست استفاده شده است
🔹 اضافه شدن ویژگی OD به ES6 باعث به وجود آمدن هزاران syntax جدید در ES6 شد.
ویژگی OD کاربرهای بسیاری دارد و هنگام کار کردن با object ها array ها function ها بسیار پر استفاده خواهد بود.
🔹می توانیم از OD به همراه object ها برای ترکیب کردن دو یا سه یا .. object با یکدیگر استفاده کنیم یا حتی انتخاب برخی از فیلد های یک object و تبدیل آن به یک object کوچکتر استفاده کنیم.
🔹هم چنین از OD به همراه array ها برای ترکیب کردن ارایه ها یا حتی شکستن یک ارایه به بخش کوچکتر استفاده کنیم .
🔹در function ها از OD برای فیلتر کردن ارایه ها و object هایی که به عنوان آرگومان تعریف کرده ایم استفاده میکنیم.
( توجه کنید که کاربرد OD ها محدود به این موارد نیست و کاربرد های بسیار فراوانی دارد، موارد فوق صرفا جهت معرفی بخش کوچکی از کاربرد های این ویژگی ذکر شده اند. )
✳️ در این پست از OD به همراه object ها استفاده میکنیم.
🔸ابتدا باید به کمک یک مثال مشکلی قدیمی را بررسی کنیم و به ببینیم که چگونه OD به کمک ما می آید.
فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
و برای دریافت مقادیر فیلد های این object بدین شکل عمل میکردیم :
const first = person.first;
const last = person.last;
🔹اگر object ما ده ها فیلد داشت برای دریافت مقدار هر یک از فیلد های ان باید متغیر تعریف کنیم و هر بار مقدار فیلد مورد نظر را به متغیر خود اختصاص دهیم. کاری تکراری و طاقت فرسا.
اینجاست که OD وارد میشود و به کمک ما می آید.
const { first, last } = person;
🔹در این کد فیلد های last و first از person خوانده میشود و در متغیر های همنام متناظر خود قرار میگیرد و از این به بعد میتوانیم مقادیر را از متغیر های last و first بخوانیم و در جای جای scope استفاده کنیم.
🔹سینتکس مثال قبل یکی از سینتکس ها و کاربرد های فراوان OD میباشد.
هم چنین اگر مقدار فیلد city را person نیاز داشته باشیم میتوانیم به این شکل عمل کنیم.
const { first, last,city } = person;
console.log(first); //Brendan
console.log(last); //Eich
console.log(city); //Pittsburgh
حال بیایید object خود را کمی پیچیده تر کنیم فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan',
last: 'Eich',
links: {
social: {
site: 'https://brendaneich.com',
twitter: 'https://twitter.com/BrendanEich',
}
}
};
از این object فقط مقادیر site و twitter را نیاز داریم .
در گذشته برا خواندن این مقادیر بدین شکل عمل میکردیم :
const twitter = person.links.social.twitter;
const site = person.links.social.site;
اما می توانیم با کمک OD بدین شکل عمل کنیم :
const { twitter, site } = person.links.social;
console.log(twitter, site);
🔻 نکته مهم این است که متغیر ها بایستی همنام با فیلد های object باشند تا مقادیر مورد نظر در آنها ریخته شود.
اما اگر لازم بود تا متغیری با نامی متفاوت از آنچه که فیلد object هست داشته باشیم بدین شکل عمل میکنیم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
const { first : personFirstName } = person;
بدین صورت میتوانید به متغیر های خود در OD نامی متفاوت دهید.
✳️ Set default value with OD
🔸چگونه در هنگام destruct کردن یک آبجکت مقادیر پیشفرض برای متغیر ها اختصاص دهیم.
فرض کنیم object زیرا داریم
const settings = {
speed: 150
}
const { speed, width } = settings;
🔹 همانطور که مشخص است ابجکت settings دارای فیلدی به نام width نیست با log کردن این فیلد مقدار undefined لاگ خواهد شد.
برای set کردن مقدار پیفرض برای متغیر width در هنگام destruct کردن آبجکت settings :
const { speed, width = 500 } = settings;
بدین شکل عمل میکنیم .
🔻 نکته بسیار مهم این است که فقط در صورتی که مقدار متغیر width براربر با undefined باشد این مقدار پیشفرض برای آن set خواهد شد.
در صورتی که آبجکت settings دارای فیلد متناظری باشد حتی اگر مقدار آن null false 0 هم باشد این مقادیر در متغیر width قرار میگیرد.
☑️قسمت های بعدی OD در صورت دریافت فیدبک های انرژی بخش ادامه خواهد داشت.
❇️ Happy JS Coding 😉
@FullStackDevs
✳️Network Requests via Fetch() API
🔸 متد fetch در جاوااسکریپت رابطی است که می توانید از طریق آن بر بستر شبکه درخواست ارسال کنید.
🔸 برای ارسال درخواست به سرور و دریافت اطلاعات چند راه وجود دارد که متد fetch یک راه مدرن و جدید و جامع میباشد.
🔹 مرورگرهای قدیمی و بخصوص مرورگر محبوب دولوپران (IE) 😉 از این متد پشتیبانی نمیکنند.
🔹در نتیجه در زمان استفاده از این متد باید مطمئن باشید که client از یک مرورگر جدید استفاده میکند.
🔹این متد با استفاده از promise ها در جاوااسکریپت پیچدگی ارسال درخواست را کاهش میدهد و بدین ترتیب کدی خوانا تر خواهید نوشت.
❇️ نحوه درخواست با متد fetch بدین شکل است :
let promise = fetch(URL, [options])
🔹 تنها پارامتر اجباری برای ارسال درخواست url میباشد و [options] پارامتر هایی نظیر method,header و.. میباشد که میخواهید به همراه در خواست قرار دهید.
مرورگر بلافاصله با مواجه شده با این متد شروع به ارسال درخواست میکند و در نهایت یک promise باز میگرداند و response را بعد از resolve شدن promise بازگردانده شده در دسترس خواهد بود.
در صورتی که به دلایلی متد fetch نتواند به سرور در خواست ارسال کند promise بازگردانده شده reject خواهد شد.❗️
🔸با resolve شدن promise و دریافت response برای خواندن داده های دریافتی دو مرحله وجود دارد :
▫️ابتدا باید http Status code را چک کنید و مطمئن شوید که درخواست با موفقیت ارسال شده است یا خیر.
▫️مرحله بعدی خواندن body از response میباشد که بدین منظور response متدهای promise base ای را در اختیار شما قرار میدهد.
متد های به شرح زیر است :
🔻response.text()
برای خواندن response به صورت text
🔻response.json()
برای خواندن response به صورت json
🔻response.formData()
برای خواندی response به صورت formData
🔻response.blob()
برای خواندن response به صورت Blob
(داده های باینری به همراه تایپ)
🔻response.arrayBuffer()
خواندن response به صورت ArrayBuffer
(نمایش سطح پایینی از داده های باینری)
🔻 علاوه بر اینها response.body یک شی ای ReadableStream خواهد بود که به شما اجازه خواندن body را میدهد.
⚠️ برای خواندن بادی response فقط از یکی از این متد ها میتوانید استفاده کنید.
اگر بادی response را با استفاده از یکی از این متد ها خوانده باشید دیگر قادر نخواهید بود تا دوباره بادی response را بخوانید.
let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)
✳️ Differences from jQuery Ajax
🔹 گفتیم که خروجی متد fetch یک promise میباشد، promise بازگشتی حتی در صورتی که Http status code عدد 404 یا 500 باشد reject نخواهد شد
و فقط Okstatus برای response بازگشتی false خواهد بود.
🔹 متد fetch در درخواست ها cookie را ارسال نمیکند مگر اینکه به همراه درخواست ارسالی credentials را برابر با 'same-origin' قرار دهید.
fetch(
'http://domain/service',
{
method: 'GET',
credentials: 'same-origin'
}
)
🔹 در هنگام استفاده از متد fetch کوکی های ارسالی از دامین های متفاوت (cross-site cookie) دریافت نخواهد شد.
❇️ Fetch vs Ajax
🔸 اگر کلاینتی دارید که ممکن است از IE استفاده کند fetch انتحاب خوبی نخواهد بود و همچین متد fetch تمامی امکانات Ajax را دارا نیست اما بدون شک آینده از آن Fetch خواهد بود پس فعلا در استفاده از آن احتیاط کنید.
@FullStackDevs
🔸 متد fetch در جاوااسکریپت رابطی است که می توانید از طریق آن بر بستر شبکه درخواست ارسال کنید.
🔸 برای ارسال درخواست به سرور و دریافت اطلاعات چند راه وجود دارد که متد fetch یک راه مدرن و جدید و جامع میباشد.
🔹 مرورگرهای قدیمی و بخصوص مرورگر محبوب دولوپران (IE) 😉 از این متد پشتیبانی نمیکنند.
🔹در نتیجه در زمان استفاده از این متد باید مطمئن باشید که client از یک مرورگر جدید استفاده میکند.
🔹این متد با استفاده از promise ها در جاوااسکریپت پیچدگی ارسال درخواست را کاهش میدهد و بدین ترتیب کدی خوانا تر خواهید نوشت.
❇️ نحوه درخواست با متد fetch بدین شکل است :
let promise = fetch(URL, [options])
🔹 تنها پارامتر اجباری برای ارسال درخواست url میباشد و [options] پارامتر هایی نظیر method,header و.. میباشد که میخواهید به همراه در خواست قرار دهید.
مرورگر بلافاصله با مواجه شده با این متد شروع به ارسال درخواست میکند و در نهایت یک promise باز میگرداند و response را بعد از resolve شدن promise بازگردانده شده در دسترس خواهد بود.
در صورتی که به دلایلی متد fetch نتواند به سرور در خواست ارسال کند promise بازگردانده شده reject خواهد شد.❗️
🔸با resolve شدن promise و دریافت response برای خواندن داده های دریافتی دو مرحله وجود دارد :
▫️ابتدا باید http Status code را چک کنید و مطمئن شوید که درخواست با موفقیت ارسال شده است یا خیر.
▫️مرحله بعدی خواندن body از response میباشد که بدین منظور response متدهای promise base ای را در اختیار شما قرار میدهد.
متد های به شرح زیر است :
🔻response.text()
برای خواندن response به صورت text
🔻response.json()
برای خواندن response به صورت json
🔻response.formData()
برای خواندی response به صورت formData
🔻response.blob()
برای خواندن response به صورت Blob
(داده های باینری به همراه تایپ)
🔻response.arrayBuffer()
خواندن response به صورت ArrayBuffer
(نمایش سطح پایینی از داده های باینری)
🔻 علاوه بر اینها response.body یک شی ای ReadableStream خواهد بود که به شما اجازه خواندن body را میدهد.
⚠️ برای خواندن بادی response فقط از یکی از این متد ها میتوانید استفاده کنید.
اگر بادی response را با استفاده از یکی از این متد ها خوانده باشید دیگر قادر نخواهید بود تا دوباره بادی response را بخوانید.
let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)
✳️ Differences from jQuery Ajax
🔹 گفتیم که خروجی متد fetch یک promise میباشد، promise بازگشتی حتی در صورتی که Http status code عدد 404 یا 500 باشد reject نخواهد شد
و فقط Okstatus برای response بازگشتی false خواهد بود.
🔹 متد fetch در درخواست ها cookie را ارسال نمیکند مگر اینکه به همراه درخواست ارسالی credentials را برابر با 'same-origin' قرار دهید.
fetch(
'http://domain/service',
{
method: 'GET',
credentials: 'same-origin'
}
)
🔹 در هنگام استفاده از متد fetch کوکی های ارسالی از دامین های متفاوت (cross-site cookie) دریافت نخواهد شد.
❇️ Fetch vs Ajax
🔸 اگر کلاینتی دارید که ممکن است از IE استفاده کند fetch انتحاب خوبی نخواهد بود و همچین متد fetch تمامی امکانات Ajax را دارا نیست اما بدون شک آینده از آن Fetch خواهد بود پس فعلا در استفاده از آن احتیاط کنید.
@FullStackDevs
🔰 مثل یک برنامه نویس فک کن🧠
یه برنامه نویس خوب باید حواسش همیشه جمع باشه. 💎
🔹 تو این پست قراره چندتا ویژگی از یه برنامه نویس ایده آل رو بگیم و بدونیم چیکار باید بکنیم تا آیده آل به نظر برسیم.⁉️
❇️ سعی کنید راه گشای مشکلات باشین و زود بیخیالشون نشین .
🔸برنامه نویسی یعنی حل کردن مشکلات و منطقی فک کردن ، مشکلات رو به قسمت های کوچیکتر تقسیم کنین و مرحله به مرحله آونهارو حل کنین.
❇️ یاد بگیرین که زود تسلیم نشین
🔸مهمترین جنبه رویارویی با باگ ها و شکست ها در درجه اول زود جا نزدنه، هنگامی که تازه برنامه نویسی رو شروع میکنین ممکنه زمان بیشتری برای پیدا کردن و حل کردن باگها و حتی مشکلات ساده بگذرونین و این فکر بسرتون بزنه که "این کار، کار من نیست ، مغز من نمیکشه، کاش مثل فلانی بودم و ..." اما اگه تسلیم نشین و به خودتون اعتماد داشته باشین . موفقیت از اونچه که فکر میکنین به شما نزدیکتره.!!
❇️ راه حل ها رو خودتون پیدا کنین :💡
🔸 قبل از اینکه مشکلتون رو از کسی بپرسین، تا جای ممکن خودتون رو مجبور کنین که با مهارتهای خودتون راه حل رو خودتون پیدا کنین.
گوگل دوست شماست و برای پیدا کردن و حل کردن مسئله وب سایتهای زیادی هستن که به کمکتون میان
❇️ از بقیه بپرسین
🔸دونستن اینکه چه زمانی باید گشتن رو متوقف کرد و بلاخره به دیگران برای پیدا کردن جواب روی آورد خیلی مهمه، حتی به مهمیه دونستن جواب.❕
✅ اگه بلاخره دیدین که نمیتونین مشکل رو حل کنین وقتشه که از یه نفر کمک بخواین.
❇️ مصمم باشین 🦾
🔸 وضعیت تون هر طوری که باشه اما باید باید به اهدافتون مصمم باشین، همیشه انتظار چالش های جدید رو داشته باشین. خودتون رو پشت محدودیت هاتون غایم نکنین، اگه خودتون رو محدود به چیز هایی که بلدین کنین تو یه محدوده قرار میگیرین و پیشرفت نمیکنین.
🔰 و در آخر یه سوال
برنامه نویسی چقدر روی افکارتون تاثیر گذاشته ❔❔
@FullStackDevs
یه برنامه نویس خوب باید حواسش همیشه جمع باشه. 💎
🔹 تو این پست قراره چندتا ویژگی از یه برنامه نویس ایده آل رو بگیم و بدونیم چیکار باید بکنیم تا آیده آل به نظر برسیم.⁉️
❇️ سعی کنید راه گشای مشکلات باشین و زود بیخیالشون نشین .
🔸برنامه نویسی یعنی حل کردن مشکلات و منطقی فک کردن ، مشکلات رو به قسمت های کوچیکتر تقسیم کنین و مرحله به مرحله آونهارو حل کنین.
❇️ یاد بگیرین که زود تسلیم نشین
🔸مهمترین جنبه رویارویی با باگ ها و شکست ها در درجه اول زود جا نزدنه، هنگامی که تازه برنامه نویسی رو شروع میکنین ممکنه زمان بیشتری برای پیدا کردن و حل کردن باگها و حتی مشکلات ساده بگذرونین و این فکر بسرتون بزنه که "این کار، کار من نیست ، مغز من نمیکشه، کاش مثل فلانی بودم و ..." اما اگه تسلیم نشین و به خودتون اعتماد داشته باشین . موفقیت از اونچه که فکر میکنین به شما نزدیکتره.!!
❇️ راه حل ها رو خودتون پیدا کنین :💡
🔸 قبل از اینکه مشکلتون رو از کسی بپرسین، تا جای ممکن خودتون رو مجبور کنین که با مهارتهای خودتون راه حل رو خودتون پیدا کنین.
گوگل دوست شماست و برای پیدا کردن و حل کردن مسئله وب سایتهای زیادی هستن که به کمکتون میان
❇️ از بقیه بپرسین
🔸دونستن اینکه چه زمانی باید گشتن رو متوقف کرد و بلاخره به دیگران برای پیدا کردن جواب روی آورد خیلی مهمه، حتی به مهمیه دونستن جواب.❕
✅ اگه بلاخره دیدین که نمیتونین مشکل رو حل کنین وقتشه که از یه نفر کمک بخواین.
❇️ مصمم باشین 🦾
🔸 وضعیت تون هر طوری که باشه اما باید باید به اهدافتون مصمم باشین، همیشه انتظار چالش های جدید رو داشته باشین. خودتون رو پشت محدودیت هاتون غایم نکنین، اگه خودتون رو محدود به چیز هایی که بلدین کنین تو یه محدوده قرار میگیرین و پیشرفت نمیکنین.
🔰 و در آخر یه سوال
برنامه نویسی چقدر روی افکارتون تاثیر گذاشته ❔❔
@FullStackDevs
دستمزد ساعتی برنامه نویس
ابتدا برای محاسبه دستمزد ساعتی برنامه نویس باید ابتدا تعرفه سازمان نظام صنفی رایانه ای کشور رو مورد بررسی قرار دهیم. در بخش زیر تعرفه ای که این سازمان ارائه داده است رو آورده ایم. این تعرفه مال سال ۹۷ است.
بر اساس تعرفه ای که سازمان نظام صنفی رایانه ای کشور مشخص کرده است برنامه نویس، تحلیلگر، طراح، مدیر پایگاه داده، طراح پایگاه داده، آموزش تخصصی بر اساس تخصص عالی که شماره یک است تا تخصص پایین که شماره ۷ است بین ۲,۱۲۴,۰۰۰ ریال تا ۱,۵۹۳,۰۰۰ باید حقوق دریافت کند. یعنی اگر شماره برنامه نویس عالی باشد ساعتی باید ۲,۱۲۴,۰۰۰ ریال حقوق دریافت کنید اما اگر برنامه نویس درجه ۷ باشید باید ساعتی ۱,۵۹۳,۰۰۰ ریال حقوق دریافت کنید.
۱- ۲,۱۲۴,۰۰۰
۲- ۱,۸۸۸,۰۰۰
۳- ۱,۷۷۰,۰۰۰
۴- ۱,۶۹۹,۰۰۰
۵- ۱,۶۵۲,۰۰۰
۶- ۱,۶۱۸,۰۰۰
۷- ۱,۵۹۳,۰۰۰
بر اساس این تعرفه ای که اعلام شده است یک برنامه نویس عالی یا درجه یک باید برای کار روزانه مثلا ۸ ساعت، باید روزانه حقوق نزدیک به ۱٫۷ میلیون حقوق دریافت کند. یعنی اگر برنامه نویس هفته ای ۵ روز کار کند و بگیم ماهی فقط ۴ هفته است باید ماهانه حدود ۳۴ میلیون حقوق دریافت کند.
سوال اصلی اینجاست که چرا همه مشاغل تعرفه درآمد خودشون رو بر اساس نظام صنفی میگیرند از پزشکان گرفته تا عمران و ... اما برای برنامه نویس بر اساس جیب کارفرما باید محاسبه بشه!
◾لطفا این پست را انتشار بدید تا اطلاع رسانی به همکارانمون کرده باشیم!
@FullStackDevs
ابتدا برای محاسبه دستمزد ساعتی برنامه نویس باید ابتدا تعرفه سازمان نظام صنفی رایانه ای کشور رو مورد بررسی قرار دهیم. در بخش زیر تعرفه ای که این سازمان ارائه داده است رو آورده ایم. این تعرفه مال سال ۹۷ است.
بر اساس تعرفه ای که سازمان نظام صنفی رایانه ای کشور مشخص کرده است برنامه نویس، تحلیلگر، طراح، مدیر پایگاه داده، طراح پایگاه داده، آموزش تخصصی بر اساس تخصص عالی که شماره یک است تا تخصص پایین که شماره ۷ است بین ۲,۱۲۴,۰۰۰ ریال تا ۱,۵۹۳,۰۰۰ باید حقوق دریافت کند. یعنی اگر شماره برنامه نویس عالی باشد ساعتی باید ۲,۱۲۴,۰۰۰ ریال حقوق دریافت کنید اما اگر برنامه نویس درجه ۷ باشید باید ساعتی ۱,۵۹۳,۰۰۰ ریال حقوق دریافت کنید.
۱- ۲,۱۲۴,۰۰۰
۲- ۱,۸۸۸,۰۰۰
۳- ۱,۷۷۰,۰۰۰
۴- ۱,۶۹۹,۰۰۰
۵- ۱,۶۵۲,۰۰۰
۶- ۱,۶۱۸,۰۰۰
۷- ۱,۵۹۳,۰۰۰
بر اساس این تعرفه ای که اعلام شده است یک برنامه نویس عالی یا درجه یک باید برای کار روزانه مثلا ۸ ساعت، باید روزانه حقوق نزدیک به ۱٫۷ میلیون حقوق دریافت کند. یعنی اگر برنامه نویس هفته ای ۵ روز کار کند و بگیم ماهی فقط ۴ هفته است باید ماهانه حدود ۳۴ میلیون حقوق دریافت کند.
سوال اصلی اینجاست که چرا همه مشاغل تعرفه درآمد خودشون رو بر اساس نظام صنفی میگیرند از پزشکان گرفته تا عمران و ... اما برای برنامه نویس بر اساس جیب کارفرما باید محاسبه بشه!
◾لطفا این پست را انتشار بدید تا اطلاع رسانی به همکارانمون کرده باشیم!
@FullStackDevs
#StackOverFlow
محبوب‌ترین زبان‌های برنامه‌نویسی سال ۲۰۲۰
▫️ زبان Rust دوست‌داشتنی ترین زبان برای پنجمین سال متوالی
◾️ پایتون که ۵ سال متوالی دومین زبان محبوب دنیا شناخته شده بود، امسال جای خودش رو به تایپ‌اسکریپت داد.
▫️ زبان Go که پارسال توی رتبه دهم بود، امسال ۵ پله رشد کرد و به رتبه پنجم محبوب‌ترین زبان‌های دنیا رسید.
🔻 زبان محبوب شما چندمه؟ 😉
https://lnkd.in/dg_zTF7
@FullStackDevs
محبوب‌ترین زبان‌های برنامه‌نویسی سال ۲۰۲۰
▫️ زبان Rust دوست‌داشتنی ترین زبان برای پنجمین سال متوالی
◾️ پایتون که ۵ سال متوالی دومین زبان محبوب دنیا شناخته شده بود، امسال جای خودش رو به تایپ‌اسکریپت داد.
▫️ زبان Go که پارسال توی رتبه دهم بود، امسال ۵ پله رشد کرد و به رتبه پنجم محبوب‌ترین زبان‌های دنیا رسید.
🔻 زبان محبوب شما چندمه؟ 😉
https://lnkd.in/dg_zTF7
@FullStackDevs
Web Devs
#NewVersion #ABluePersianDateTimePicker توضیحات تکمیلی نحوه استفاده از این picker به صورت زیر به صورت میلادی و شمسی می باشد . میتونید اچ تی ام ال این صفحه را مشاهده کنید و المنت های خودتونو به سادگی بسازید و به دلخواه css هارو تغییر دهید. 🔹 با اتریبوت زیر…
#NewVersion
#ABluePersianDateTimePicker
#NETCore
✅ ورژن جدید 2.0.1 برای NETCore
@fullStackDevs
#ABluePersianDateTimePicker
#NETCore
✅ ورژن جدید 2.0.1 برای NETCore
Install-Package ABluePersianDateTimePicker -Version 2.0.1توضیحات تکمیلی 👇
@fullStackDevs
#NewVersion
#ABluePersianDateTimePicker
#NETCore
☑️ موارد اضافه شده در این ورژن :
🔸استفاده شده از bootstrap 4
🔹ورژن مختص NETCore
🔸 اضافه شدن از تاریخ تا تاریخ به صورتی که تاریخ "تا" حتما باید بزرگتر از تاریخ "از" میباشد و تاریخ های قبل همه غیرفعال میشوند.
🔰 اصلاحیات
✅ در ورژن های قبل page سمپلی که تو ناگت قرار داشت درست کار نمیکرد ولی تو این ورژن تقریبا تمام مدل های استفاده از این پیکر را بصورت سمپل گنجانده شده و میتونید از نمونه ها استفاده کنید !
✅ ورژن های قبل تو دات نت کور وقتی پکیج را نصب میکردیم فایل های js و css اضافه نمیشد و باید به آدرس C:\Users\MyUser\.nuget\packages میرفتیم تا فایل ها را به پروژه اضافه میکردیم که با نصب این ورژن یه فولدر در wwwroot شما اضافه خواهد شد که شامل css,js و sample page میباشد.
‼️توجه داشته باشید این ورژن برای دات نت کور NET CORE میباشد و برای استفاده از ورژن های غیر Core از ورژن 1.0.5 به پایین استفاده کنید .
⚙️ اگر نقطه نظر یا انتقاد یا پیشنهادی برای بهبود این کامپوننت دارین میتونید با بنده در میان بگذارید.
✔️ ورژن جدید ریلیز شده :
#ABluePersianDateTimePicker
#NETCore
☑️ موارد اضافه شده در این ورژن :
🔸استفاده شده از bootstrap 4
🔹ورژن مختص NETCore
🔸 اضافه شدن از تاریخ تا تاریخ به صورتی که تاریخ "تا" حتما باید بزرگتر از تاریخ "از" میباشد و تاریخ های قبل همه غیرفعال میشوند.
🔰 اصلاحیات
✅ در ورژن های قبل page سمپلی که تو ناگت قرار داشت درست کار نمیکرد ولی تو این ورژن تقریبا تمام مدل های استفاده از این پیکر را بصورت سمپل گنجانده شده و میتونید از نمونه ها استفاده کنید !
✅ ورژن های قبل تو دات نت کور وقتی پکیج را نصب میکردیم فایل های js و css اضافه نمیشد و باید به آدرس C:\Users\MyUser\.nuget\packages میرفتیم تا فایل ها را به پروژه اضافه میکردیم که با نصب این ورژن یه فولدر در wwwroot شما اضافه خواهد شد که شامل css,js و sample page میباشد.
‼️توجه داشته باشید این ورژن برای دات نت کور NET CORE میباشد و برای استفاده از ورژن های غیر Core از ورژن 1.0.5 به پایین استفاده کنید .
⚙️ اگر نقطه نظر یا انتقاد یا پیشنهادی برای بهبود این کامپوننت دارین میتونید با بنده در میان بگذارید.
✔️ ورژن جدید ریلیز شده :
Install-Package ABluePersianDateTimePicker -Version 2.0.1@fullStackDevs
dotnet add package ABluePersianDateTimePicker --version 2.0.1
<PackageReference Include="ABluePersianDateTimePicker" Version="2.0.1" />
paket add ABluePersianDateTimePicker --version 2.0.1
Telegram
Arman AB
@fullStackDevs @FullStackDevsGroup
#Html5
#UrlDataFormat
✅ Use Your browser as notpad
🔰 خیلی وقتها موقع وب گردی لازمه که نکاتی رو یاداشت کنیم یا snippet کدی رو کپی کنیم و....
تو این جور مواقع نوت پد دم دست ترین ابزار برای اینکاره
اما از اونجایی که همیشه راه های آسون تری هم هست با این تکنیک میتونین مرورگر خودتون رو به یک نوت پد ساده تبدیل کنین.
💠 همین الان مروگرتون رو باز کنین و در آدرس بار url زیر رو تایپ کنید :
data:text/html,<html contenteditable>
و بعد روی صفحه کلیک کنین و شروع کنین به تایپ کردن .
@FullStackDevs
#UrlDataFormat
✅ Use Your browser as notpad
🔰 خیلی وقتها موقع وب گردی لازمه که نکاتی رو یاداشت کنیم یا snippet کدی رو کپی کنیم و....
تو این جور مواقع نوت پد دم دست ترین ابزار برای اینکاره
اما از اونجایی که همیشه راه های آسون تری هم هست با این تکنیک میتونین مرورگر خودتون رو به یک نوت پد ساده تبدیل کنین.
💠 همین الان مروگرتون رو باز کنین و در آدرس بار url زیر رو تایپ کنید :
data:text/html,<html contenteditable>
و بعد روی صفحه کلیک کنین و شروع کنین به تایپ کردن .
@FullStackDevs
Forwarded from Web Devs
#StaticType
#DynamicType
✳️ What are Exactly Static and Dynamic Types⁉️
🔹لزوما برای فهمیدن پایه ایه این مفهوم نیاز به دانستن زبان برنامه نویسی خاصی ندارید زیرا اینها مفاهیم طراحی زبان های برنامه نویسی هستند.پس بنابراین عدم آشنابودن با یک زبان برنامه نویسی خاص به درک این مفهوم لطمه ای وارد نمیکند.
🔻در ابتدای امر باید بدانید منظور از کلمه type در static type و dynamic type نوع داده ای متغیر ها میباشد.
▪️برای تشریح static type یا dynamic type بودن تعاریف مختلفی وجود دارد که در این پست به معقول ترین آنها میپردازیم.
▪️ type checking
🔸 فرایند تایید و اعمال محدودیت ها بروی انواع داده ها را type checking می گویند. در برخی زبانها type checking در زمان compile time و در برخی در زمان runtime انجام میشود. در واقع انجام عملیات type checking در مورد type safe بودن برنامه است تا type error های احتمالی را کاهش دهد.
▫️ type error
🔸یک type error میتواند وضعیتی باشد که در هنگام انجام یک عملیات بروی نوع های داده ای اتفاق بیافتد. برای مثال جمع کردن یک رشته با یک عدد صحیح باهم.
خطاهای type error در زبان های برنامه نویسی زیادی اتفاق می افتد بسته به نوع زبان برنامه نویسی این ارور ها در زمان compile time یا در زمان runtime صادر میشود.
▪️type safe
🔸به عملیاتی الحاق میشود که در آن برنامه از درست بودن نوع داده هایی که عملیات بروی آنها انجام میشود اطمینان حاصل میکند.
✳️ static type language
🔸 یک زبان برنامه نویسی static type زبانی است که نوع داده ای متغیر ها در زمان compile time مشخص میشود.در زبان های برنامه نویسی static type زمانی که یک متغیر با یک نوع داده ای مشخص تعریف شده است دیگر قادر به پذیرفتن داده هایی با نوع دیگر نخواهد بود . در صورت اختصاص دادن داده ای با نوع داده ای مختلف با یک type error در زمان compile time مواجه میشوید.
✳️ Dynamic type language
🔸یک زبان برنامه نویسی dynamic type زبانی است که نوع متغیر ها در زمان runtime چک و همچنین مشخص میشود. در زبان های dynamic type اگر به یک متغیر مقدار integer اختصاص دهید نوع آن متغیر از نوع integer تعیین میشود. اما اگر به همان متغیر در چند خط پایین تر در کد یک مقدار رشته ای تخصیص دهید نوع داده ای تعیین شده برای متغیر به string تغییر پیدا خواهد کرد.
✳️ معایب و مزایا
▪️static type
🔹حجم کثیری از خطاها و ارورها در فرایند توسعه مشخص و برطرف میشود.
🔹پرفورمنس بهتر(به دلیل اعمال محدودیت بر انواع داده ای و مشخص شدن نوع داده ها در زمان کامپایل)، کد ماشین بهینه تری تولید میشود.
🔹مستند سازی بهتر زیرا با مشخص بودن نوع داده ها و برطرف کردن خطاهای احتمالی رفتار تابع ها قابل پیش بینی تر خواهد بود.
🔹پیدا کردن راحت تر اشیا و متغیر ها در کد.
🔹کار کردن راحت تر با دیتابیس های رابطه ای و دیگر سیستم هایی که متکی به static type بودن هستند.
▪️Dynamic type language
🔹کد فشرده تر و کمتر
🔹عدم وجود مرحله کامپایل به این معنی که برای تست کردن تغییرات در کد دیگر منتظر کامپایلر برای کامپایل کردن کدها نیستید.این نوع زبان ها غالبا مفسری هستند و اگر در زمان runtime اروری اتفاق بیافتد، باعث کاهش پرفورمنس برنامه میشود.همچنین انجام type checking ها در زمان runtime در این نوع زبان ها بر پرفورمنس برنامه تاثیر منفی دارد.
🔹صرف زمان کمتر برای برطرف کردن syntax و همچنین semantic ارورها و به جای آن کل زمان خود را میتوانید به برطرف کردن logic ارورها بپردازید.
🔹ریفکتور کردن کدها فقط باعث تغییرات محلی میشود. برای مثال در زبان های static type با تغییر نام یک کلاس باید در سراسر کد خود این تغییر را اعمال کنید.(البته این کار در IDE های امروزی به راحتی قابل انجام است).
🔻منابع
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
@FullStackDevs
#DynamicType
✳️ What are Exactly Static and Dynamic Types⁉️
🔹لزوما برای فهمیدن پایه ایه این مفهوم نیاز به دانستن زبان برنامه نویسی خاصی ندارید زیرا اینها مفاهیم طراحی زبان های برنامه نویسی هستند.پس بنابراین عدم آشنابودن با یک زبان برنامه نویسی خاص به درک این مفهوم لطمه ای وارد نمیکند.
🔻در ابتدای امر باید بدانید منظور از کلمه type در static type و dynamic type نوع داده ای متغیر ها میباشد.
▪️برای تشریح static type یا dynamic type بودن تعاریف مختلفی وجود دارد که در این پست به معقول ترین آنها میپردازیم.
▪️ type checking
🔸 فرایند تایید و اعمال محدودیت ها بروی انواع داده ها را type checking می گویند. در برخی زبانها type checking در زمان compile time و در برخی در زمان runtime انجام میشود. در واقع انجام عملیات type checking در مورد type safe بودن برنامه است تا type error های احتمالی را کاهش دهد.
▫️ type error
🔸یک type error میتواند وضعیتی باشد که در هنگام انجام یک عملیات بروی نوع های داده ای اتفاق بیافتد. برای مثال جمع کردن یک رشته با یک عدد صحیح باهم.
خطاهای type error در زبان های برنامه نویسی زیادی اتفاق می افتد بسته به نوع زبان برنامه نویسی این ارور ها در زمان compile time یا در زمان runtime صادر میشود.
▪️type safe
🔸به عملیاتی الحاق میشود که در آن برنامه از درست بودن نوع داده هایی که عملیات بروی آنها انجام میشود اطمینان حاصل میکند.
✳️ static type language
🔸 یک زبان برنامه نویسی static type زبانی است که نوع داده ای متغیر ها در زمان compile time مشخص میشود.در زبان های برنامه نویسی static type زمانی که یک متغیر با یک نوع داده ای مشخص تعریف شده است دیگر قادر به پذیرفتن داده هایی با نوع دیگر نخواهد بود . در صورت اختصاص دادن داده ای با نوع داده ای مختلف با یک type error در زمان compile time مواجه میشوید.
✳️ Dynamic type language
🔸یک زبان برنامه نویسی dynamic type زبانی است که نوع متغیر ها در زمان runtime چک و همچنین مشخص میشود. در زبان های dynamic type اگر به یک متغیر مقدار integer اختصاص دهید نوع آن متغیر از نوع integer تعیین میشود. اما اگر به همان متغیر در چند خط پایین تر در کد یک مقدار رشته ای تخصیص دهید نوع داده ای تعیین شده برای متغیر به string تغییر پیدا خواهد کرد.
✳️ معایب و مزایا
▪️static type
🔹حجم کثیری از خطاها و ارورها در فرایند توسعه مشخص و برطرف میشود.
🔹پرفورمنس بهتر(به دلیل اعمال محدودیت بر انواع داده ای و مشخص شدن نوع داده ها در زمان کامپایل)، کد ماشین بهینه تری تولید میشود.
🔹مستند سازی بهتر زیرا با مشخص بودن نوع داده ها و برطرف کردن خطاهای احتمالی رفتار تابع ها قابل پیش بینی تر خواهد بود.
🔹پیدا کردن راحت تر اشیا و متغیر ها در کد.
🔹کار کردن راحت تر با دیتابیس های رابطه ای و دیگر سیستم هایی که متکی به static type بودن هستند.
▪️Dynamic type language
🔹کد فشرده تر و کمتر
🔹عدم وجود مرحله کامپایل به این معنی که برای تست کردن تغییرات در کد دیگر منتظر کامپایلر برای کامپایل کردن کدها نیستید.این نوع زبان ها غالبا مفسری هستند و اگر در زمان runtime اروری اتفاق بیافتد، باعث کاهش پرفورمنس برنامه میشود.همچنین انجام type checking ها در زمان runtime در این نوع زبان ها بر پرفورمنس برنامه تاثیر منفی دارد.
🔹صرف زمان کمتر برای برطرف کردن syntax و همچنین semantic ارورها و به جای آن کل زمان خود را میتوانید به برطرف کردن logic ارورها بپردازید.
🔹ریفکتور کردن کدها فقط باعث تغییرات محلی میشود. برای مثال در زبان های static type با تغییر نام یک کلاس باید در سراسر کد خود این تغییر را اعمال کنید.(البته این کار در IDE های امروزی به راحتی قابل انجام است).
🔻منابع
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
@FullStackDevs
👍1
Forwarded from Web Devs
#javascript
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
(
🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
console.log(msg);
}
✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
#Immediately_Invoked_Function_Expression
#IIFE
❇️ Immediately-Invoked Function Expression (IIFE)
▫️در ابتدا باید بدانید که تفاوت بین expression و statement چیست⁉️
🔹اصلی ترین تفاوت میان statement و expression این است که یک expression را میتوانید به یک متغیر assign کنید.
✳️ در این پست به معرفی و تعریف نوعی از فانکشن های جاوا اسکریپ میپردازیم که به آنها "فانکشن های فوری صدا شونده" می گویند .به اختصار IIFE.
🔸 دو دلیل عمده برای استفاده از این نوع توابع وجود دارد.
🔻 محدود کردن scope متغیر ها
🔻 اجرای فوری و بلافاصله فانکشن بعد تعریف شدن آن.
▫️در ادامه به شرح هریک از دو علت خواهیم پرداخت.
🔹معمول ترین syntax تعریف این نوع فانکشن ها بدین صورت است :
(
function IIFE(){
console.log( "Hello!" );})();//output "Hello!"
🔸 در مثال بالا پرانتز های بیرونی () که (function IIFE(){ .. }) را احاطه کرده است باعث میشوند که فانکشن داخلی آنها برای جاوا اسکریپت به عنوان یک expression در نظر گرفته شود و به مانند یک statement و یک تابع معمولی رفتار نکند.
🔸 پرانتز نهایی () در انتهای expression بالا برای آن است که فانکشن تعریف شده را بلافاصه بعد تعریف شدن صدا زده و اجرا کند.
❇️ تعریف کردن فانکشن ها باعث به وجود آمدن scope های جدید میشود و از آنجایی که IIFE یک فانکشن است تعریف کردن یک IIFE جدید باعث به وجود امدن یک scope جدید میشود اما scope به وجود امده قوانین محصور کننده ای دارد یعنی متغیر های تعریف شده در این scope بروی سایر کد های خارج از آن تاثیری ندارد و خارج از آن قابل دسترس نیستند.
▫️ حال که از ماهیت یک IIFE اگاه شدیم بیایید به syntax های مختلف تعریف یک IIFE بپردازیم.
🔸 پیشتر با معمول ترین روش تعریف آن آشنا شدیم . روش دیگری که برای تعریف یک IIFE وجود دارد به صورت زیر است
!
function() {
alert("Hello from IIFE!");}();🔻نکته قابل توجه در مثال بالا پیشوند '!' در ابتدای تعریف فانکشن است .به طور کلی '!' در ابتدای فانکشن مثال قبل جاوا اسکریپت را مجبور میکند که هر چیزی که بعد آن بیاید را به عنوان یک expression در نظر بگیرد.
🔹 در نتیجه در مثال بالا یک IIFE جدید تعریف کردیم که بلافاصله بعد تعریف شدن صدا زده شده و اجرا میشود.
🔻 همچنین میتوانید به جای '!' از '+' , '-' , '~' و یا هر unary operator دیگری استفاده کنید.
🔻یک unary operator عملگری است که تنها یک عملوند دریافت میکند و روی آن عملیاتی انجام میدهد.
▫️ همچنین روشی دیگر برای تعریف IIFE وجود دارد.
void
function() {
alert("Hello from IIFE!");}();🔸 در این مثال ' void ' برای مجبور کردن جاوا اسکریت برای در نظر گرفتن فانکشن بعد از آن به عنوان یک expression است.
🔻 نکته خیلی مهم در مورد این نوع syntax های تعریف IIFE این است که فانکشن نمیتواند مقدار خروجی داشته باشد❕❕
❇️ برای اینکه یک IIFE بتواند یک مقدار خروجی را بازگرداند باید به صورت اولین مثال که پیشتر تعریف شد یا به صورت زیر تعریف شود.
(
function() {
return "From IIFE";} () ); (
function() {
return "From IIFE";}) () ;🔹 همچنین میتوانید به یک IIFE پارامتر پاس دهید
(
function IIFE(msg, times) {
for (var i = 1; i <= times; i++) {console.log(msg);
}
}("Hello!", 5));✳️ در این پست به معرفی IIFE پرداختیم که کاربر های فروانی دارد.
✳️ لطفا این پست را با دوستان خود به اشتراک بگذارید
▫️Happy Js Coding😉
@FullStackDevs
#Bootstrap
#Version_5_alpha1
#CSS
🌀 بوت استرپ اکنون در نسخه 5 الفا موجود است.
بوت استرپ محبوب ترین و پرکاربردترین فریم ورک متن باز در جهان برای توسعه با HTML ، CSS و JS است. با راه اندازی ورژن 5 ، بسیاری از تغییرات اساسی در جدیدترین نسخه معرفی می شوند.
✅ تغییرات عمده در بوت استرپ 5
✔️ جی کوئری حذف شد
تیم بوت استرپ بزرگترین وابستگی های جانبی به سمت کلاینت را حذف کرده است.تیم بوت استرپ جی کوئری را به دلیل وابستگی به جاوا اسکریپت که در وب سایت رسمی خود اعلام کرده است ، منقضی کرده است. جی کوئری با vanilla Javascript جایگزین شده است.
✔️ پشتیبانی IE10 برداشته شد
بوت استرپ 5 دیگر با Internet Explorer 10 همراه نخواهد شد و پشتیبانی از مرورگر IE10 را در این نسخه حذف شده است.
✔️ واحد اندازه گیری عرض ها (width) تغییر کرده
از px به rem تبدیل شده.
سی اس اس روشهایی برای مشخص کردن اندازه یا طول عناصر با استفاده از واحدهای مختلف اندازه گیری مانند px ، em ، rem ،٪ vw و vh ارائه می دهد.
در حالی که px به طور گسترده ای شناخته شده اند و برای absolute units استفاده می شود و نسبت به DPI و وضوح viewing device تغییر نمی کند.
بوت استرپ مدت زمان طولانی از px برای عرض (width) خود استفاده می کرد که دیگر این مورد در Bootstrap 5 وجود ندارد و از rem استفاده می کند.
واحد Rem مخفف "root em" است که به معنای برابر با مقدار محاسبه شده اندازه فونت در عنصر ریشه (html) است. به عنوان مثال ، 1 rem برابر با اندازه قلم عنصر HTML است (بیشتر مرورگرها مقدار پیش فرض 16 پیکسل دارند).
✔️ بهبود bootstrap branch برای توسعه
طبق اعلام رسمی وب سایت،master به شاخه جدید v3 dev بوت استرپ v5 تبدیل می شود و برای توسعه v5 شاخه جدید master را از v4-dev برش می دهد
✔️ مهاجرت از jekyll به Hugo
معرفی Hugo : هوگو سریعترین تولید کننده سایت استاتیک در جهان است که بدون شک سایت های استاتیک را در میلی ثانیه تولید می کند و از زبان Golang استفاده می کند.
معرفی jekyll : جکیل قدیمی ترین تولید کننده سایت استاتیک است و در بوت استرپ 5 کنار گذاشته شده.
✔️ کتابخانه آیکو نهای SVG :
برای اولین بار ، Bootstrap کتابخانه آیکون منبع باز SVG خاص خود را دارد به گونه ای طراحی میکند که بتواند به بهترین شکل با components ها و اسناد ما کار کند.
✔️ ستون و ردیف در بوت استرپ 5
مفاهیم بوت استرپ که سیستم 12 ستونی ارائه می دهد در بوت استرپ 5 نیز موجود خواهد بود. طراح وبسایت می تواند از ستونهای Grid و layout در بوت استرپ 5 استفاده کند.
سطرها و ستون های بوت استرپ ، کارآمدترین راه حل برای موضوعات در اندازه های مختلف صفحه نمایش را ارائه می دهند. تمرکز اصلی تغییر در v5 هنوز واکنش گرا یا responsive است ، اگرچه در نسخه های اخیر بوت استرپ ، توسعه بیشتر روی بهبود عملکرد و کاهش زمان بارگذاری متمرکز شده است.
🔗 Download Bootstrap 5.0.0-alpha1
@FullStackDevs
#Version_5_alpha1
#CSS
🌀 بوت استرپ اکنون در نسخه 5 الفا موجود است.
بوت استرپ محبوب ترین و پرکاربردترین فریم ورک متن باز در جهان برای توسعه با HTML ، CSS و JS است. با راه اندازی ورژن 5 ، بسیاری از تغییرات اساسی در جدیدترین نسخه معرفی می شوند.
✅ تغییرات عمده در بوت استرپ 5
✔️ جی کوئری حذف شد
تیم بوت استرپ بزرگترین وابستگی های جانبی به سمت کلاینت را حذف کرده است.تیم بوت استرپ جی کوئری را به دلیل وابستگی به جاوا اسکریپت که در وب سایت رسمی خود اعلام کرده است ، منقضی کرده است. جی کوئری با vanilla Javascript جایگزین شده است.
✔️ پشتیبانی IE10 برداشته شد
بوت استرپ 5 دیگر با Internet Explorer 10 همراه نخواهد شد و پشتیبانی از مرورگر IE10 را در این نسخه حذف شده است.
✔️ واحد اندازه گیری عرض ها (width) تغییر کرده
از px به rem تبدیل شده.
سی اس اس روشهایی برای مشخص کردن اندازه یا طول عناصر با استفاده از واحدهای مختلف اندازه گیری مانند px ، em ، rem ،٪ vw و vh ارائه می دهد.
در حالی که px به طور گسترده ای شناخته شده اند و برای absolute units استفاده می شود و نسبت به DPI و وضوح viewing device تغییر نمی کند.
بوت استرپ مدت زمان طولانی از px برای عرض (width) خود استفاده می کرد که دیگر این مورد در Bootstrap 5 وجود ندارد و از rem استفاده می کند.
واحد Rem مخفف "root em" است که به معنای برابر با مقدار محاسبه شده اندازه فونت در عنصر ریشه (html) است. به عنوان مثال ، 1 rem برابر با اندازه قلم عنصر HTML است (بیشتر مرورگرها مقدار پیش فرض 16 پیکسل دارند).
✔️ بهبود bootstrap branch برای توسعه
طبق اعلام رسمی وب سایت،master به شاخه جدید v3 dev بوت استرپ v5 تبدیل می شود و برای توسعه v5 شاخه جدید master را از v4-dev برش می دهد
✔️ مهاجرت از jekyll به Hugo
معرفی Hugo : هوگو سریعترین تولید کننده سایت استاتیک در جهان است که بدون شک سایت های استاتیک را در میلی ثانیه تولید می کند و از زبان Golang استفاده می کند.
معرفی jekyll : جکیل قدیمی ترین تولید کننده سایت استاتیک است و در بوت استرپ 5 کنار گذاشته شده.
✔️ کتابخانه آیکو نهای SVG :
برای اولین بار ، Bootstrap کتابخانه آیکون منبع باز SVG خاص خود را دارد به گونه ای طراحی میکند که بتواند به بهترین شکل با components ها و اسناد ما کار کند.
✔️ ستون و ردیف در بوت استرپ 5
مفاهیم بوت استرپ که سیستم 12 ستونی ارائه می دهد در بوت استرپ 5 نیز موجود خواهد بود. طراح وبسایت می تواند از ستونهای Grid و layout در بوت استرپ 5 استفاده کند.
سطرها و ستون های بوت استرپ ، کارآمدترین راه حل برای موضوعات در اندازه های مختلف صفحه نمایش را ارائه می دهند. تمرکز اصلی تغییر در v5 هنوز واکنش گرا یا responsive است ، اگرچه در نسخه های اخیر بوت استرپ ، توسعه بیشتر روی بهبود عملکرد و کاهش زمان بارگذاری متمرکز شده است.
🔗 Download Bootstrap 5.0.0-alpha1
@FullStackDevs
Getbootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
❇️ چرا سی شارپ و جاوا multiple inheritance را پشتیبانی نمیکنند❕
🔰 سی شارپ و جاوا multiple inheritance را پشتیبانی نمیکنند و استدلال سازندگان آنها برای این موضوع این بوده است که اضافه کردن ویژگی multiple inheritance به این زبانها باعث پیچیدگی بیش از حد میشود در حالی که که مزایای آن به نسبت کمتر میباشد.
در سی شارپ یک کلاس تنها این اجازه را دارد که فقط از یک کلاس ارث بری کند (اصطلاحا single inheritance گفته میشود).
🔹در multiple inheritance، یک کلاس میتواند اجزای خود را از یک یا چند کلاس ارث بری کند.
✳️ چرا multiple inheritance باعث پیچیدگی میشود⁉️
🔹فرض کنید که کلاس A کلاس پایه است. و کلاس های B و C از این کلاس(کلاس A) ارث بری میکنند. و کلاس D از کلاس های BوC ارث بری میکند.
شرایطی را در نظر بگیرید که هریک از کلاس های B و C به صورت جداگانه متدی را که در کلاس پدرشان (کلاس A) وجود دارد override کنند در نتیجه این عمل برای کلاس D که از این دو کلاس (B و C) ارث بری میکند ابهامی را به وجود می آورد ' که باید از کدام پیاده سازی استفاده کنم؟ '
▫️اگرچه برای این مشکل راه هایی در c++ معرفی شده است (سی پلاس پلاس multiple inheritance را پشتیبانی میکند) اما این روش ها برای برنامه نویسان، باعث ایجاد ابهام میشود.
✅ در زبان های سی شارپ و جاوا تنها راه استفاده از multiple inheritance، استفاده و پیاده سازی چندین interface میباشد
@FullStackDevs
🔰 سی شارپ و جاوا multiple inheritance را پشتیبانی نمیکنند و استدلال سازندگان آنها برای این موضوع این بوده است که اضافه کردن ویژگی multiple inheritance به این زبانها باعث پیچیدگی بیش از حد میشود در حالی که که مزایای آن به نسبت کمتر میباشد.
در سی شارپ یک کلاس تنها این اجازه را دارد که فقط از یک کلاس ارث بری کند (اصطلاحا single inheritance گفته میشود).
🔹در multiple inheritance، یک کلاس میتواند اجزای خود را از یک یا چند کلاس ارث بری کند.
✳️ چرا multiple inheritance باعث پیچیدگی میشود⁉️
🔹فرض کنید که کلاس A کلاس پایه است. و کلاس های B و C از این کلاس(کلاس A) ارث بری میکنند. و کلاس D از کلاس های BوC ارث بری میکند.
شرایطی را در نظر بگیرید که هریک از کلاس های B و C به صورت جداگانه متدی را که در کلاس پدرشان (کلاس A) وجود دارد override کنند در نتیجه این عمل برای کلاس D که از این دو کلاس (B و C) ارث بری میکند ابهامی را به وجود می آورد ' که باید از کدام پیاده سازی استفاده کنم؟ '
▫️اگرچه برای این مشکل راه هایی در c++ معرفی شده است (سی پلاس پلاس multiple inheritance را پشتیبانی میکند) اما این روش ها برای برنامه نویسان، باعث ایجاد ابهام میشود.
✅ در زبان های سی شارپ و جاوا تنها راه استفاده از multiple inheritance، استفاده و پیاده سازی چندین interface میباشد
@FullStackDevs
#JavaScript
❇️ Given a number of elements that need to stay in order, would you use an Object or an Array⁉️
❇️ Given a number of elements that need to stay in order, would you use an Object or an Array⁉️
Anonymous Quiz
37%
Object
63%
Array