https://virgool.io/feed/@amini.hooman برای یادداشت اینجا می نویسم اگر بدرد کسی هم خورد تو روحم گل باز میشه - مهندس نرم افزار - توسعه دهنده وب در فناپ fa 2026-03-15 09:16:05 https://files.virgool.io/upload/users/3499/avatar/yv5LIF.png?height=120&width=120 https://virgool.io/@amini.hooman https://virgool.io/@amini.hooman/%D8%A2%D9%85%D8%A7%D8%B1-%D8%A8%D8%A7%D8%B2%D8%AF%DB%8C%D8%AF-%D9%BE%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%D9%85%D9%86-%D8%AF%D8%B1-%D8%B3%D8%A7%D9%84-%DB%B9%DB%B9-ycxwleymjf4z در طول تاریخ از اعداد استفاده کردیم تا اغلب داد و ستد کنیم و آن‌چیزی که شمردنی است را بشماریم. برای هر عدد واحد درست کردیم تا عددهای زندگی قاطی نشوند و از اعداد، شفاف‌تر استفاده کنیم؛ مثلا وقتی می‌گوییم ده هزار تومان به پول اشاره داریم و وقتی می‌گوییم ده هزار بلیط به بلیط!روز به روز که در زندگی جلو‌تر رفتیم عددها فرقی نکردند ولی این واحدها بودند که زیاد شدند. واحد کریپتو، واحد اصله درخت، واحد فاصله و …«واحد» یک توافق عمومی است برای شمردن؛ تا همانطور که گفتم شمردن‌ها قاطی نشود. مشاهده افراد دارای ثروت (اجتماعی یا مالی) به من ثابت کرده اینکه چه چیزی را بشماریم از اینکه چطور بشماریم مهم‌تر است. هرکس با واحد خاصی مسائل زندگی را می‌شمارد. اینطور به نظرم آمده که مشخص کردن واحد یعنی مشخص کردن اینکه من در زندگی برای چه چیزهایی ارزش قائلم و می‌خواهم چه چیزهایی را در زندگی بشمارم. https://cdn.virgool.io/annual-report/1399/h8drv23h8scu-pLfmv.mp4 اعدادی که بدون واحد ثبت کردمبه ویدیویی که ویرگول برایم ساخته که نگاه می‌کنم میبینم که در سال ۹۹، من در مجموع ۱۴,۹۹۷ کلمه در ویرگول نوشتم و منتشر کردم و مخاطبین، پست‌های من را ۲۰۹ مرتبه پسندیدند و ۲۶ بار هم نظر خود را روی پست‌های من به اشتراک گذاشتند. در سال ۹۹، ۴۵ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. این اعداد نشان میدهند من کاری کرده‌ام. هرکدام به واحدی وصل هستند. از خودم می‌پرسم من کدام واحد را شمارش کرده‌ام؟ کدامیک از واحدهای بالا از همه برای من مهم‌تر است؟ ادامه ویدیو را می‌بینم.آمار از اثر بیرونی می‌گویندطبق آمار پست‌های من ۲,۳۹۹ بار خوانده شدند و ۴۵۲,۲۴۸ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیتی که در ایران به اینترنت دسترسی دارند، ویرگول به من می‌گوید که توانستم ۰/۰۰۶۲۰۰۲۷۴ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم.از طرف دیگر ویرگول به من می‌گوید که اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۱۱,۴۹۹ کاغذ مصرف می‌کردم.آن عددهای کوچک ابتدای ویدیو حالا تبدیل شده‌اند به عددهای بزرگ به اینکه من جلوی مصرف این تعداد کاغذ را گرفتم یا به اینکه من ۰/۰۰۶۲۰۰۲۷۴ ثانیه، سرانه مطالعه دیجیتال کشور را جابه جا کرده‌ام. واحد این عددها برای من ملموس‌تر است.واحد نوشتن چیست؟همه عددهای بالا و همینطور اثر بیرونی که روی خوانندگان و همینطور در مقیاس بزرگتر طبیعت و جامعه اطرافم گذاشتم اعدادی هستند که من دوستشان دارم و به آنها افتخار می‌کنم. اگر چنین ویدیویی دست شما نیز رسید به شما بابت تک تک اعداد تبریک می‌گویم.اثر هر نوشته تا حدودی معلوم است، اگر بنویسید جلوی قطع درخت را می‌گیرید، به سرانه مطالعه کشور اضافه می‌کنید و خوانندگانی جذب می‌کنید که شما را از طریق نوشته‌هایتان می‌شناسند و …به نظرم می‌رسد که نوشته‌های من و شما واحد ندارند ولی اثر بیرونی دارند. هومن امینی هومن امینی Mon, 22 Mar 2021 12:55:34 +0430 https://virgool.io/@amini.hooman/%D8%AA%D9%88%D8%B3%D8%B9%D9%87-css-%D9%87%D8%A7-%D8%A8%D9%88%D8%B3%DB%8C%D9%84%D9%87-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-postcss-fazeuslf5jvz همانطور که می دانیم جاوااسکریپت، CSS و همچنین محیط اجرای آنها یعنی مرورگرها پایه های اصلی اپلیکیشن های تحت وب است و ما همواره با چند چالش بسیار مهم در رابطه با آنها روبرو هستم که میتواند منجر به عدم کارایی اپلیکیشن های ما گردد، که در این خصوص می توان به موارد زیر اشاره نمود:سازگاری قابلیت‌های جدید css و جاوااسکریپت با مرورگرهای قدیمی.سختی نگهداری و توسعه css ها به علت عدم وجود ساختار منسجم و عدم وجود قابلیت های مانند متغیرها، فانکشن ها و قابلیت های استفاده مجدد برای جلوگیری از تکرار کدها.جهت غلبه بر این چالش های بسیار حیاتی، ابزار کاربردی به شرح ذیل بوجود آماده است.- کامپایلر و یا بهتر بگویم ترنسپایلر babel جهت تبدیل جاواسکرپیت های جدید به جاوااسکریپ قدیمی به منظور ایجاد قابلیت اجرا در مرورگرهای قدیمی.- پیش پردازنده ها یا CSS Preprocessor ها مانند sass و less جهت ساختار دهی و ایجاد قابلیت های برنامه نویسی به css ها اما با وجود دو ابزار خوب فوق جهت جاوااسکریپت ها و CSS ها مشکلات به شرح زیر همچنان در رابطه با css ها وجود دارد.عدم سازگاری قابلیت های جدید css ها با مرورگرهای قدیمی.در پیش پردازنده ها باید تمام قابلیت ها در یک کدبیس وجود داشته باشد.در پیش پردازنده ها تمام کدها باید در درون کدها یا inline نوشته شود.عدم قابلیت خطا یابی در css هاجهت مشکل عدم سازگاری قابلیت های جدید css یک راه استفاده از prefix ها به صورت مثلا زیر است اما در هر صورت استفاده از ابزاری مانند prefix ها دستی است و وقت گیر و یا بهتر بگوییم ابزاری مشابه یکپارچه ای مانند babel جاوااسکریپت برای css ها مورد نیاز است که بسیاری از کارها را به صورت خودکار انجام دهد.خوشبختانه ابزاری در این خصوص که این روزها بسیار فراگیر شده است postcss است که می تواند با صدها پلاگین هایی که برای آن بوجود آمده است، بسیاری از مشکلات ما را رفع نماید و یا حتی می توانیم خودمان بسته به نیاز برای آن پلاگین ایجاد نماییم.پس به طور خلاصه postcss ابزاری است که با استفاده از جاوااسکریپت فایل های css ما را تغییر می دهد و این تغییر بسته به نیاز ما است و ما باید متناسب با نیازمان پلاگین متناسب را پیدا و یا ایجاد، و توسط ابزار postcss برروی فایل های css اعمال نماییم.چرخه کار postcss به صورت زیر است.همانطور که در شکل فوق می بینیم postcss یک فایل css را به یک فایل css دیگر تبدیل می کند و توجه کنید اگر پلاگینی در آن استفاده نشود فایل خروجی css کاملا برابر فایل ورودی css است و پست سی اس اس به تنهای کاری نمی کند و بوسیله پلاگین ها ترنسپایل را انجام میدهد.شاید اینجا بگوید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم نمود.دامه به چند نمونه خواهیم پرداخت.یک نیاز ساده در css، تعریف متغیر ها است که این کار را می توانیم با پلاگین postcss-simple-vars انجام دهیم و به عنوان مثال فایل ورودی زیرا رابه فایل زیر تبدیل کنیمشاید اینجا بگویید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم دید.یک نیاز دیگر می تواند استفاده ساده تر از media query باشد به عنوان مثلا با پلاگینpostcss-media-minmaxمی توانیم فایل ورودی زیر را :به فایل خروجی زیر که قابلیت اجرا در مرورگرها دارد تبدیل نماییمو یا به سادگی prefix ها را به صورت اتوماتیک در css های خودمان با پلاگین معروف Autoprefixing اعمال نماییم و فایل زیر رارا به صورت اتوماتیک به prefix ها به صورت زیر مزین نماییم که قابلیت اجرا در تمام مرورگر ها باشد.و یا قابلیت ها جدید css مانندرا با استفاده از پلاگین postcss-preset-env به فایل یا css زیر تبدیل نماییمو یا حتی از خطا در css ها بوسیله پلاگین stylelint جلوگیری نماییم و به عنوان مثال خطای کنسول app.css2:10 Invalid hex colorدر هنگام کامپایل و یا ترنسپایل زیر گرفته خواهد شدصدها پلاگین آماده دیگر در این آدرس https://www.postcss.parts ر ا نیز می توانید جستجو و استفاده نمایید.راه های مختلفی جهت برپایی یا setup پست سی اس اس (PostCss) مانند استفاده از Gulp، Webpack وجود دارد که جهت آن می توانید به مستندات Postcss مراجعه فرمایید.https://github.com/postcss/postcss هومن امینی هومن امینی Thu, 04 Mar 2021 22:31:05 +0330 https://virgool.io/@amini.hooman/%D8%AC%D9%86%D8%B1%DB%8C%DA%A9-%D9%87%D8%A7-%D8%AF%D8%B1-%D8%AA%D8%A7%DB%8C%D9%BE-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-brfsockwc7fh ساخت کامپوننت‌ها با قابلیت استفاده مجدد یک هدف اصلی مهندسی نرم افزار است و به طبع ساخت کامپوننت هایی که با تایپ های مختلف کار کند مورد نیاز است و ابزار جهت این منظور در زبان ها مختلف برنامه نویسی generic است و این قابلیت در جاوااسکریپت وجود ندارد و تایپ‌اسکریپت استفاده از آن را برای ما مهیا می‌نماید.یک نیاز ساده که بهتر است جهت آن از جنریک استفاده شود این است که ما یک فانکشن داشته باشیم هر چیزی که به آن پاس می کنم همان را برگرداند. مانند فانکشن echoبدون استفاده از جنریک فانکش را می توانیم به صورت زیر بنویسیم.اما همانطور که می بینیم این فانکشن صرفا اعداد را قبول می کند و جهت عمومی کردن این فانکشن یعنی اینکه بتواند هر تایپی را قبول کند می توانیم از any به صورت زیر استفاده نماییم.اما مشکلی که فانکشن فوق دارد این است که هر داده‌ای به آن پاس کنیم به ما تایپ any برمی گرداند و اطلاعات تایپ دقیق مقداری برگردانده شده را از دست می دهیم.جهت حل این موضوع می توانیم از جنریک به صورت زیر استفاده نماییم.در فانکش فوق تایپ متغیر پاس شده را یک مجهول به صورت <X> تعریف کردیم که متواند هر عبارتی که شما می خواهید باشد مانند XXX یا T یا .... و در این فانکشن تعیین می کند که هر تایپی به این فانکشن پاس شود این فانکشن موظف است همان نوع یا تایپ را برگرداند یعنی عدد به آن پاس کردیم به ما عدد بر می گرداند و اگر متن یا string به آن پاس کردیم به ما متن بر می گرداند و قصه الی هذا و به این طریق در تایپ اسکریپت جنریک تعریف می شود و یا به عبارتی به این نوع فانکش جنریک گفته می شودحال که ما فانکشن جنریک identify را نوشتیم به دو صورت زیر می توانیم آن را صدا بزنیمروش اول صدا زدن فانکشن با تمام آرگومان ها و تعیین نوع آرگومان به صورت زیر.همانطور که در روش فوق می بینیم به صورت صریح گفتیم تایپ X از نوع string استو روش دوم به صورت صریح تایپ آرگومان پاس شده را به صورت زیر تعیین نمی نماییم و کامپایلر به صورت ضمنی آن را تعیین می نماید.نکته : هنگامی که از جنریک ها استفاده می کنید کامپایلر استفاده درست از متغییر در داخل فانکشن را اجبار می نماید به عنوان مثال اگر شما بخواهید طول آرگومان را در متن فانکشن به صورت زیر چاپ نمایید کامپایلر به شما خطا می دهد.Property 'length' does not exist on type 'T'. متن خطالذا با یک روش می توانیم نوع آرایه بودن آرگومان را به صورت زیر مشخص نماییم.یا اینکه از اینترفیس به صورت زیر استفاده نماییم که در این حالت کامپایلر می داند آرگومان دارای خصیصه length می‌باشد و لذا خطایی نمی دهد.و به طبع نمی توان فانکش فوق را با یک آرگومان غیر آرایه ای به صورت زیر صدا نمود و خطا داده می شود.همچنین می توانیم یک فانکشن جنریک را به عنوان یک جنریک تایپ و به صورت یک اینترفیس به صورت زیر تعریف نماییم.یا می توانیم فانکشن جدیدی که از نوع فانکشن جنریک اصلی تعریف نموده ایم را محدود به تایپ جدیدی مثلا عددی به صورت زیر نماییم.و به همین ترتیب می توانیم جنریک کلاس را شبیه ایترفیس به صورت زیر تعریف نماییم.و متد کلاس فوق را می توانیم به صورت متنی عوض نماییم و این زیبایی جنریک است و قابلیت استفاده مجدد را برای ما به ارمغان می آورد. https://vrgl.ir/Esoch https://vrgl.ir/zsWeG هومن امینی هومن امینی Fri, 12 Feb 2021 08:56:46 +0330 https://virgool.io/@amini.hooman/%D8%AA%D8%A7%DB%8C%D9%BE-assertion-%D8%AF%D8%B1-%D8%AA%D8%A7%DB%8C%D9%BE-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-u5odm81wpegk گاهی اوقات در موقعیتی قرار می‌گیریم که ما درباره یک مقدار بیشتر از تایپ اسکریپت می دانیم.تایپ assertion راهی است که به کامپایلر بگوییم: "به من اطمینان کن من می دانم چه کار می کنم"مشابه این کار را در زبان های برنامه نویسی دیگر مانند جاوا داریم و به آن تایپ cast می گوییم.در تایپ اسکریپت تایپ assertion را می توانیم به دو صورت زیر انجام دهیم.به صورت ترکیب as :as-syntaxیا به صورت ترکیب براکت :angle-bracketتوجه : دو ترکیب بالا یکی هستند اما در صورت استفاده از تایپ اسکرپیت در JSX فقط به صورت ترکیب as مجاز می باشد.نکته : وقتی شما یک متغیر متنی را به عنوان مثال از نوع any تعریف می کنید از قابلیت IntelliSense در IDE های مانند vscode جهت مشاهده هوشمند متدهای آن متغیر بهرمند نمی گردید اما با قابلیت تایپ assertion میتوانید از این قابلیت بهرمند گردید. https://vrgl.ir/Esoch هومن امینی هومن امینی Thu, 11 Feb 2021 09:35:53 +0330 https://virgool.io/@amini.hooman/%D9%85%D8%B1%D9%88%D8%B1%DB%8C-%D8%A8%D8%B1-%D8%AA%D8%A7%DB%8C%D9%BE-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-f6oyfon4xsil تایپ اسکرپیت (ُTypeScript) زبان برنامه نویسی است که جاوااسکریپت را در بر می گیرد و یا به عبارتی superset جاوااسکرپیت است و قابلیت‌ها و ویژگی‌هایی از جمله تایپ های استاتیک را به جاوااسکرویپت اضافه می‌نماید و این زبان اوپن سورس است که توسط مایکروسافت توسعه و نگهداری می‌گردد .اما تایپ اسکرپیت به طور مستقیم نمی تواند روی محیط های که جاوااسکریپت اجرا می شوند، اجرا شود از جمله مرورگرها و یا نود جی اس و جهت اجرا در این محیط ها باید ابتدا کامپایل گردد و یا به عبارت بهتر می‌بایست transpile گردد و باید به همان جاوااسکریپت تبدیل گردد.اما سئوالی که پیش میاید این است که فایده نوشتن کد به زبان تایپ اسکریپت با وجود اینکه در نهایت به جاوااسکریپت تبدیل می شود چیست؟ نوشتن کد به زبان تایپ اسکرپیت در زمان توسعه نرم افزار به ما کمک می کند که راحت تر انجام شود و از بعضی از باگ های احتمالی زمان اجرا جلوگیری می نماید و همچنین می توان از بعضی از قابلیت های که در جاوااسکریپت وجود ندارد بهره‌‌مند شد.به عنوان مثال ما اگر فانکشن ساده زیر را داشته باشیمfunction add (num1, num2){ return num1 + num2; }و به طور اشتباه اعدادی که می خواهیم توسط این فانکش جمع شود را به صورت string به این فانکشن بفرستیم جاوااسکرپیت خطایی به ما نشان نمی دهند و دو مقدار را concat می نماید و نتیجه اینکهadd('2','3') //23به جای ۵ به ما ۲۳ برگردانده می شود.اما اگر این فانکشن با تایپ اسکرپیت به صورت زیر نوشته شود خطا گرفته می شود و اجرا نمی گردد.برای شروع کار با تایپ اسکریپت یا به عبارتی برای تبدیل کد تایپ اسکریپت به جاوا اسکریپت باید ابتدا آن را نصب کنیم و نصب آن چیزی نیست جز نصب یک پکیج نودجی اس به صورت زیر:npm install -g typescriptو بعد از نصب می توانید با دستوری tsc فایل تایپ اسکریپت را به جاوااسکرپیت تبدیل نماییدtsc helloworld.tsبه طور خلاصه فواید تایپ اسکرپیپ برای ما به شرح ذیل است:۱- استفاده از استاتیک تایپ ها و جلوگیری از خطاهای زمان اجرا۲- استفاده از قابلیت های جدید جاوااسکریپت ( با توجه به اینکه کدها کامپایل و قابل اجرا در مرورگرهای قدیمی تر می گردند)۳- استفاده از ویژگی های که در جاوااسکریپت وجود ندارد مانند interface و generic ها۴ - استفاده از ویژگی های Meta-Programming مانند Decorator ها۵ - قابلیت پیکربندی و قابل config برای نیازمندی ما۶ - استفاده بهتر از قابلیت های IDE های مدرن مانند visual studio code هومن امینی هومن امینی Wed, 10 Feb 2021 19:10:15 +0330 https://virgool.io/@amini.hooman/%D8%A7%D9%84%DA%AF%D9%88-%D9%88-%D8%B1%D9%88%D9%86%D8%AF%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1-%D8%AF%D8%B1-%D8%B3%D8%A7%D9%84-%DB%B2%DB%B0%DB%B2%DB%B1-t6wivdhiprxb ۱- عناصر سه بعدی ۲- طراحی شیشه ای۳- مد تاریک (Dark Mode)۴- رابط کاربری بی رنگ (Colorless Ui)۵ - سبک باهاوس (خانه سازی)۶ - رنگ روی سطح سفید (Colors On White Surface)۷ - تصویر متحرک۸ - مینیمالیسم۹ - تایپوگرافی بزرگ و پررنگ۱۰ - طراحی غوطه وری هومن امینی هومن امینی Sun, 24 Jan 2021 10:07:36 +0330 https://virgool.io/@amini.hooman/%D8%A7%D9%84%DA%AF%D9%88%DB%8C-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-%D9%88-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-%D9%87%D8%A7%DB%8C-%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%D9%87-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-napxfdb1rsxx در زبان های برنامه نویس state به ظرف داده ها و مقادیر آنها در هر لحظه زمانی می گویند لذا ریداکس شامل کتابخانه‌ها و Api هایی بر پایه یک الگو جهت مدیریت و بروز رسانی State های عمومی یا گلوبال اپلیکیشن است که قسمت های مختلف اپلیکیشن به آن نیاز دارند.الگوی ریداکس در در درجه اول شامل یک مخزن برای state های اپلیکیشن های جاوااسکریپت است و state چیزی نیست جز یک Object ساده مانند:اما اپلیکیشن شما نمی توانند مستقیم این State ها را تغییر بدهند و برای تغییر آن باید یک عملگر ارسال کنید و یا به عبارتی جهت تغییر باید یک Action ارسال یا dispatch نمایند و اکشن هم چیزی نیست جز یک آبجکت ساده مانند آبجکت های زیر که هر کدام آنها یک Action هستند:خوب ما تا اینجا state داریم و اکشن های مورد نیاز جهت تغییر state ها، مانند شکل فوق به عنوان مثال اکشن اضافه کردن یک todo یا تغییر حالت todo.اما جهت تغییر state ما به یک فانکش هم نیاز داریم که state و اکشن را بگیرد و تغییر مورد نیاز ما را برروی State انجام دهد که به این فانکش در ریداکس reducer گفته می شود و یا به عبارتی مانند چرخ گوشت state و action را می گیرد و یک state جدید تحویل می دهد.به عنوان مثال فانکشن reducer جهت تغییر todo ها می تواند به شکل زیر باشد.به صورت تصویری به مثال زیر توجه فرماییددر مثال فوق ۱- ابتدا یک اتفاق یا ایونت در UI اتفاق می افتد به عنوان مثال دکمه واریز وجه کلیک می گردد ۲- مدیریت event ها بر پایه کلیک اتفاق افتاده یک اکشن dispatch می کند که همراه این اکشن دیتاهایی به عنوان payload ارسال می گردد (به عنوان مثال مبلغ واریز شده که در اینجا ۱۰ است) و توجه داشته باشید که اکشن نوع deposit است پس هر اکشن حتما باید type یا نوع داشته باشد اما payload اختیاری است.۳ - در این مرحله فانکش reducer اکشن را می می گیرد و با توجه به نوع آن تغییرات روی state را انجام می دهد و state جدید را در مخزن یا store ریداکس ذخیره می کند و یا به عبارتی state ریداکس را بر پایه اکشن اتفاق افتاده بروز رسانی می گردد.۴ - در این مرحله state بروز رسانی شده آماده استفاده تمامی اجزای اپلکیشن است که در اینجا همانطور که می بینیم حساب نامبرده ۱۰ واحد شارژ شده است.کل پایه ایده یا الگو مدیریت state های ریداکس همین است و به طور خلاصه ما یک آبجکت State داریم و چندین اکشن که با ارسال آنها به فانکش reducer می توانیم state ها را تغییر دهیم و در تمام اپلیکیشن از آنها استفاده نماییم.حال جهت پیاده سازی این الگو و تسهیل استفاده از این الگو ریداکس علاوه بر خود کتابخانه ریداکس کتابخانه ها و API های با نام های زیر را نیز در اختیار ما قرار داده است که در قسمت های بعدی با مثال و ویدوئوهای آموزشی آنها را توضیح خواهیم داد.۱ - کتابخانه React-Redux۲- کتابخانه Redux Toolkit۳- کتابخانه Redux DevTools هومن امینی هومن امینی Mon, 18 Jan 2021 21:02:38 +0330 https://virgool.io/Only-js/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-arrow-%D9%81%D8%A7%D9%86%DA%A9%D8%B4%D9%86-%D9%87%D8%A7-%D9%88-%D8%AA%D9%88%D8%A7%D8%A8%D8%B9-%D9%85%D8%B9%D9%85%D9%88%D9%84%DB%8C-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-dgqxn9jaqw3b در گفتار قبل (لینک زیر) درباره نحوه برخورد Arrow فانکشن و فانکشن های معمولی با مقدار this را توضیح دادیم. https://vrgl.ir/oS9IT سایر تفاوت به شرح ذیل تقدیم می گردد.۲- سازنده ها (Constructors)همانطور که در گفتار قبل دیدیم با فانکشن های معمولی می توانند به سادگی یک آبجکت ایجاد کنیماما همین کار را نمی توانیم با arrow فانکشن ها انجام دهیم و خطای TypeError می گیریم۳ - متدهااستفاده از فانکشن معمولی یک راه معمول برای ایجاد یک متد در یک کلاس است.در کلاس Hero زیر متد logName با استفاده از فانکشن معمولی است.بعضی وقت نیاز داریم که متد یک کلاس را به عنوان callback صدا کنیم و با این روش به مشکل می خوریمبرای مثال استفاده از متد logName به عنوان callback در setTimeout :بعد از یک ثانیه در کنسول undefined چاپ می شود زیرا setTimeout یک فراخوانی ساده را انجام می دهد که در آن this در آن global آبجکت است و چون در گلوبال آبجکت متد logName وجود ندارد و بنابراین undefined برمی گرداند.جهت رفع این مشکل باید به صورت دستی مقدار this را به context صحیح به صورت زیر bind کنیم. با این روش مقدار this به شی یا (instance) - بتمن می چسبانیم یا bind می نماییم.اما یک راه ساده برای رفع این مشکل استفاده از arrow فانکشن است که آن متد به صورت lexically به کلاس می چسبد و یا خودکار bind می شود. هومن امینی هومن امینی Sat, 05 Dec 2020 17:07:28 +0330 https://virgool.io/@amini.hooman/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-arrow-%D9%81%D8%A7%D9%86%DA%A9%D8%B4%D9%86-%D9%87%D8%A7-%D9%88-%D8%AA%D9%88%D8%A7%D8%A8%D8%B9-%D9%85%D8%B9%D9%85%D9%88%D9%84%DB%8C-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-prxvgufp0nkw شما در جاوااسکریپت می توانید به روش های مختلف فانکش یا تابع تعریف کنید.اولین و معمولی ترین روش با استفاده از کلمه کلیدی function است که به دو صورت زیر تعریف می شود. همانطور که در شکل فوق می بینیم به روش اول function declaration گفته می شود و به روش دوم function expression که به صورت کلی به این دو نوع regular function و در اینجا ما به آنها فانکشن های معمولی میگوییم.روش دوم که از ES2015 شروع شده است، arrow فانکشن ها هستند:اما تفاوت این دو روش چیست؟ مطبی است که در این گفتار به آن می پردازیم.۱. مقدار this۱.۱ در فانکشن های معمولیدر فانکشن های معمولی، مقدار this ( معروف به execution context) داینامیک است. و کانتکس داینامیک در اینجا به این معنی است که مقدار this به چگونگی فراخوانی فانکشن بستگی دارد.در جاوا اسکریپت ۴ روش زیر جهت فراخوانی فانکشن وجود دارد.فراخوانی سادهفراخوانی از طریق متدفراخوانی غیر مستقیمفراخوانی از طریق constructorدر فراخوانی ساده مقدار this برابر global object (یا undefined وقتی که فانکش در حالت مد strict اجرا می شود) استدر فراخوانی از طریق متد، مقدار this برابر آبجکتی است که متد از آن فراخوانی شده است.در فراخوانی غیر مستقیم با استفاده از myFunc.call(thisVal, arg1, ..., argN)یاmyFunc.apply(thisVal, [arg1, ..., argN])مقدار this برابر آرگومان اول استدر فراخوانی از طریق constructor استفاده از کلمه کلیدی this برابر instance جدید ایجاد شده است.۲.۱ در Arrow فانکشن هارفتار this در arrow فانکشن ها تفاوت قابل توجهی با فانکشن های معمولی دارد.مقدار this در arrow فانکشن به چگونگی و مکان اجرای فانکشن ربطی ندارند و همیشه برابر با مقدار this در فانکشن بیرونی هستند به عبارت دیگر arrow فانکشن از لحاظ lexically آن را حل نموده اند و یا به عبارتی arrow فانکشن ها کانتکس اجرای (execution context) شخصی خود را ندارند.همانطور که در مثال فوق می بینیم مقدار arrow فانکشن callback برابر با فانکشن بیرونی myMethod استتا اینجا تفاوت this در فانکشن های معمولی و arrow فانکشن ها را توضیح دادیم در گفتار های بعدی لینک زیر سایر تفاوت های این دو نوع فانکشن را شرح خواهیم داد. https://vrgl.ir/qWIAX هومن امینی هومن امینی Sat, 05 Dec 2020 13:55:19 +0330 https://virgool.io/coderlife/%DA%A9%DB%8C%D8%AA-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-sdk-%DA%86%DB%8C%D8%B3%D8%AA-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-iroboxdn9jsc به طور کلی برای ارتباط و یا استفاده یا اصلا لذت و یا تصاحب هر چیزی باید با آن ارتباط برقرار کرد و به زبانی که آن چیز می فهمد باید با آن صحبت کرد، و اگر اگر با زبان خودتان با آن صحبت کنید حتما به شما جوابی نمی دهد و تنها راه ارتباط با آن اگر زورمند باشید، حمله به آن و تصاحب آن است که در آن صورت مطمئنا باز جوابی یا نمی دهد و یا غلط جواب می دهد و آن زمان آن چیز را شما خراب و از بین برده اید و یا حداقل بی استفاده نموده‌اید و بهتر است شرافتمندانه سراغ آن نروید.گفتم چیز حال آن چیز می تواند تمام چیز های که شما فکر می کنید باشند !!!! حال اینجا چون بحث ما فناوری اطلاعات است می تواند به طور کلی ماشین ها باشند مانند:سرورکلاینت دستگاه موبایلدستگاه های شبکهتلویزیون هوشمندساعت هوشمندو یا روبات ها و یا سایر ابزارهای حال و آینده باشند.اما زبان های که این دستگاه ها می فهمند صرفا زبان ماشین هست که کار من و شما نیست که به سادگی با این زبان با آن ها صحبت کنیم لذا تولید کنندگان آنها و یا تولید کنندگان نرم افزار متن باز (Open Source) جهت تسهیل، ابزارنرم افزاری به عنوان های کتابخانه، پکیج و یا واسط هایی( API) درست نموده اند که می توانیم از طریق آنها با زبان هایی سطح بالاتر و راحتتر با آنها صحبت کنیم مانند زبان هایجاواپایتونجاوااسکریپتو صدها زبان دیگرکه به مجموعه این ابزار، کتابخانه، پکیج و واسط ها کیت توسعه نرم افزار یا SDK می گویند به عنون مثال:جی دی ک (JDK) جهت ارتباط از طریق زبان جاوا با ماشین هانود جی اس (Node Js) جهت ارتباط از طریق زبان جاوااسکریپ با ماشین ها اندروید کیت (Android Kit) جهت ارتباط از طریق زبان جاوا و kotlin با دستگاه های دارای سیستم عامل اندرویدو انواع کیت های روبات ها که تخصص من نیستو سایر کیت هاو نکته آخر اینکه ممکن اس خود این کیت ها از کتابخانه ها و موتورهای استفاده نمایند به عنوان مثال نودجی اس از موتور V8 کروم استفاده می نماید. هومن امینی هومن امینی Sat, 14 Nov 2020 08:14:00 +0330 https://virgool.io/@amini.hooman/%D9%81%D9%82%D8%B7-%D9%85%D8%AF%DB%8C%D8%B1-%D8%A8%D8%B4%DB%8C-%D8%A8%D8%A7-%DA%A9%D9%84%D8%A7%D8%B3%DB%8C-%D9%81%D8%B1%D9%87%D9%86%DA%AF-%D8%A7%D8%B3%D8%AA%DA%A9%D8%A8%D8%A7%D8%B1%DB%8C-l4uybfbgzsy7 در ایران عزیز ما یک فرهنگ هست (البته فقط وقتی که در ایران زندگی می کنی) و از بچگی به ما یاد می دهند که فقط در صورتی که مدیر بشوی خیلی با کلاس می شوی و شأن و منزلت داری و مثلا اگر در هر سنی خود را وقتی معرفی می کنی اگر نگویی مدیر فلان جا و یا فلان چیز، شما و اطرافیان در دل سرافکنده می شوید و یا بزرگانی می گویند که ما درایران مهندس خوب زیاد داریم و اما مدیر خوب کم و این آغاز ماجرا است و همه می خواهند مدیر بشوند مدیر شرکتمدیر پروژهمدیر ...... و از آنجایی که ما همه چیز را از چشم استکبار جهانی می بینیم من هم این فرهنگ را از چشم استکبار جهانی می بینم. کی به کیه؟ این را سر آغاز خیلی از بد بختی های خیلی ها از جمله خودم و ایران می بینم.یک مثال ساده که خودم بارها آن را دیدم و حتما شما هم دیده اید در حالت بد وقتی یک کار بلد و یا کارشناس زبر دست در یک شرکتی و یا سازمانی کار می کند بعد از یک مدت کوتاه که اعتماد به نفس بابت کارهای خوبش پیدا میکند از آنجاییکه حتما دستمزد به اندازه کار خوبش را دریافت نمی کند و یا دخل و خرجش کفاف زندگیش را نمی دهد و فکر می کند که مدیر او بدون دردسر، دستمزد بیشتری دریافت می کند لذا در دل سودای مدیریت می کند و در حالت خوب شرکت و یا سازمان می بیند که یک نفر خوب کار می کند آن شخص را به سمت مدیریت سوق می دهند و یا منصوب می کنند.اما ایشان آیا همان استعدادی که در کار کارشناسی و یا فنی داشته است را در مدیریت دارد؟ حتما بله چون ما ایرانیان همه فن حریفیم!!اما متاسفانه اینطوری نیست و خیلی ها در سمت مدیریت نه استعداد نه علم آن را دارند و صرفا دست پا شکسته و در حالت خوب با دیدن دوره های مختلف و این روز ها بنام MBA یک کاری می کنند اما چیزی که مهم است آن کارشناس خوب با استعداد از بین رفته است و شق القمری که واقعا می توانست انجام دهد دیگر در آن سازمان انجام نمی شود و به یک مدیر بی عرضه تبدیل می شود و در آخر یا در آن سازمان رسوب می کند و یا اخراج و یا فکر دیار دیگر می نماید.و شاه بیت این قضیه اینجاست که همین شخص اگر به آن ور آب مهاجرت کند از آنجاییکه که قطعا زبان خوب بلد نیست و یا فرهنگ آن دیار به این صورت نیست و حتما با کار فنی دخل و خرج ایشان به خوبی برآورده می گردد، ایشان خوشحال و خندان به کار فنی و یا کارشناسی ادامه می دهند و قطعا باعث پیشرفت آن سازمان و آن دیار لعنتی استکباری می شود و ما در ایران از آن پیشرفت انگشت به دهن می مانیم.باز بگویید کار استکبار جهانی نیست. هومن امینی هومن امینی Thu, 12 Nov 2020 10:04:32 +0330 https://virgool.io/@amini.hooman/%DA%86%D8%B1%D8%A7-%D8%B1%DB%8C%D8%A7%DA%A9%D8%AA-%D9%87%D9%88%DA%A9-cdhcycayo8uo قبل از استفاده از هر ابزار و یا تکنولوژی، باید این سئوال ها را از خودمان بنماییم چرا این وجود دارد چه مشکلی را حل می نماید؟ درباره ری اکت هوک هم این سئوال مصداق دارد.ایده اصلی ری اکت این بوده که پیچیدگی اپلکیشن ها را بوسیله تقسیم آن به کامپوننت های مجزا مدیریت کنیم، اما تقسیم صرفا اپلکیشن به کامپوننت ها نیاز ما را جواب نمی دهید و ما همچنین نیاز داریم منطق و یا logic ها را بین کامپوننت ها به اشتراک بگذاریم که به اصطلاح به آن sharing non visual logic می گویند.از جمله لاجیک های که لازم داریم بین کامپوننت ها به اشتراک بزاریم منطق مدیریت state کامپوننت هامنطق مدیریت چرخه حیات کامپوننت هاو یا منطق های خاص بیزنس ماجهت این موضوع راحت ترین کار copy & paste است که روش خوبی نیست و مدیریت آن سخت است.اما الگوی های برای این موضوع وجود دارد مانند Higher Order Component که در آن یک کامپوننت می سازیم که کامپوننت های دیگر را به عنوان پارامتر قبول می کند و یک سری لاجیک مشترک را به آنها اضافه می کند و یا به عبارتی برای منطق های مشترک HOC های مختلف درست می کنیم و از این طریق اشتراک گذاری لاجیک های مشترک را مدیریت می کنیم.و یا الگوی یا pattern دیگر به نام Render Props که از حوصله بحث ما خارج است و می توانید به مستندات آن مراجعه فرمایید.اما در هر صورت، فهم دو الگو فوق و استفاده از آنها پیچیده و سخت است.اما api که ری اکت برای این موضوع در اختیار ما قرار داده که هم ساده، قابل ترکیب، قابل انعطاف و توسعه پذیر است هوک است.که چند تا آنها در ری اکت آماده شده است به عنوان مثال useState جهت مدیریت state ها و useEffect جهت مدیریت چرخه حیات کامپوننتاما شاه بیت این قضیه این است که شما می توانید لاجیک و منطقی که خاص بیزنس خودتان است را به صورت هوک دربیارید و آن را قابل استفاده مجدد نمایید.به عنوان مثال جهت منطق fetch داده ها می توانیم یک هوک مانند زیر بنویسیم.و به سادگی در کامپوننت های مختلف به شکل زیر آن را صدا نماییم. هومن امینی هومن امینی Tue, 27 Oct 2020 12:00:00 +0330 https://virgool.io/@amini.hooman/%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D9%86%DA%A9%D8%AA%D9%87-%D9%88-%D8%AA%D8%B1%D9%81%D9%86%D8%AF%D9%87%D8%A7%DB%8C-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%82%D8%B3%D9%85%D8%AA-%DB%B8-scope-nc3xobus93nj سه ستون اصلی زبان برنامه نویس جاوا اسکریپت موارد زیر است.محدوده و کلوژرها (Scope and Closure)پروتوتایپ ها (Prototypes)تایپ ها (Types) و Coercionدر این قسمت به نخستین ستون زبان جی اس یعنی سیستم Scope می پردازیمدر فیلم آموزشی ذیل در یوتوب می توانید مطلب مربوطه را مشاهده فرمایید. https://youtu.be/ygGvyoFei60 همچنین می توانید فیلم این آموزش را در آپارات نیز مشاهده فرمایید. https://aparat.com/v/IBwcQ لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است. منبع : You-Dont-Know-JS هومن امینی هومن امینی Wed, 20 May 2020 21:43:37 +0430 https://virgool.io/@amini.hooman/%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D9%86%DA%A9%D8%AA%D9%87-%D9%88-%D8%AA%D8%B1%D9%81%D9%86%D8%AF%D9%87%D8%A7%DB%8C-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%82%D8%B3%D9%85%D8%AA-%DB%B7-closure-%DA%86%DB%8C%D8%B3%D8%AA-rp3bapm4niyn توجه : علاوه بر متن این گفتار فیلم آموزشی این مقاله را می توانید در یوتوب مشاهده فرمایید.لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.شاید بدون درک Closure، تقریبا هر برنامه نویسی یا به عبارتی توسعه دهنده جی اسی از Closure استفاده نموده است. در حقیقت closure یکی از گسترده ترین کارکردها در اکثر زبان های برنامه نویسی است، حتی ممکن است به اندازه متغیرها و حلقه ها مهم باشد.ما باید بتوانیم تشخیص دهیم که از closure در کجای برنامه استفاده شده است و ندانستن آن ممکن است منجر به خطا و یا مشکلاتی گردد.ابتدا تعریف Closure :کلوژر زمانی است که یک تابع به متغیر های خارج از scope خود دسترسی پیدا می کند و آن را به یاد می آورد، حتی اگر تابع در یک دامنه متفاوت اجرا شود.ما در اینجا دو ویژگی را می بینیم. ابتدا closure قسمتی از ماهیت فانکشن است. آبجکت ها closure نمی‌شوند و فانکشن ها می شوند. دوم اینکه برای مشاهده یک closure شما باید یک تابع را در یک scope متفاوت نسبت به جایی که در ابتدا تعریف شده، اجرا نمایید.کد زیر را در نظر بگیرید.ابتدا فانکش بیرونی greeting با پارامتر "Hello" اجرا می شود و یک instance از فانکشن داخلی who ایجاد می کند که برروی متغیر msg بسته می شود ( یا کلوژر ایجاد می نماید) که آن متعلق به خارج از محدود خود است و متعلق به محدوده greeting است. وقتی فانکشن داخلی برگردانده میشود، مرجع یا reference آن به متغیر hello تخصیص می یابد. سپس وقتی greeting دوباره با پارامتر "Howdy" صدا می شود مجدد یک instance از فانکشن داخلی با یک closure جدید برروی msg جدید ایجاد می کند که مرجع و یا reference آن به howdy تخصیص می یابد.وقتی اجرای فانکشن greeting تمام می شود، به صورت نرمال ما انتظار داریم که تمام متغیرها از حافظه پاک شود و یا به عبارتی garbage collected انجام شود و یا زباله ها پاک شوند و انتظار داریم که msg از بین برود، اما اینطور نمی شود. دلیل آن closure است. از آنجاییکه فانکشن های داخلی زنده می مانند ( به ترتیب به hello و howdy تخصیص می یابند) closure آنها متغیر های msg را حفظ می کنند و در اجرای ریفرنس های hello و howdy از آنها استفاده می نماید.کلوژرها یک عکس یا snapshot از مقدار متغیرهای msg نیستند، آنها لینک مستقیم و نگداشت خود متغیر هستند. این بدان معناست که closure می تواند در هر زمان متغیر ها را بروز رسانی و یا ایجاد نماید به مثال ذیل دقت کنید:هر instance از فانکشن داخلی increaseCount برروی متغیر های count و step بسته می شوند که متعلق به خارج از محدوده خود و یا متعلق به محدوده counter هستند. step در طول زمان یکسان است، اما count در هر invocation فانکشن داخلی بروز رسانی می گردد. از انجاییکه closure برروی متغیر ها است و یک عکس از متغیر ها نیست و این بروز رسانی ها ذخیره می گردند.استفاده از closure هنگام کار با کد غیر همزمان یا asynchronous مانند callbacks متداول است کد زیر را در نظر بگیرید.فانکشن داخلی onResponse برروی url بسته می شود و بنابراین آن را تا اینکه آژاکس برگردد آن را ذخیره و به یاد می آورد و در اجرای onResponse از آن استفاده می کند. حتی اگر getSomeData بلافاصله تمام شود، پارامتر url تا زمانی که لازم باشد در closure نگه داشته می شود.لازم نیست که دامنه بیرونی یک تابع باشد، معمولا چنین است اما نه همیشه - فقط این که حداقل در یک محدوده خارجی دارد که از یک فانکشن داخلی قابل دسترس است.برای این حلقه از تعریف let استفاده کرده است، در هر تکرار idx , btn یک محدوده بلاک جدید می گیرند و در هر تکرار همچنین یک فانکشن داخلی جدید ایجاد می شود. که فانکشن داخلی برروی idx بسته می شود و حفظ آن تا زمانی که کنترل کننده کلیک روی btn تنظیم می شود.بنابراین وقتی هر button کلیک می شود آن کنترل می کند که مقدار ایندکس وابسته به آن چاپ گردد، زیرا کنترل کننده متغیر idx مربوطه را به خاطر می آورد.کلوژر یک از رایج ترین و مهمترین patern و یا الگوهای برنامه نویسی به هر زبانی است. اما این به ویژه در مورد جی اس صادق است. تصور کردن انجام کارهای مفید و بدون اعمال closure دشوار است.در قسمت های بعدی بروی scope و محدوده بیشتر صحبت خواهیم نمود. هومن امینی هومن امینی Fri, 08 May 2020 16:44:01 +0430 https://virgool.io/@amini.hooman/%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D9%86%DA%A9%D8%AA%D9%87-%D9%88-%D8%AA%D8%B1%D9%81%D9%86%D8%AF%D9%87%D8%A7%DB%8C-%D8%AC%DB%8C-%D8%A7%D8%B3-%D9%82%D8%B3%D9%85%D8%AA-%DB%B6-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-rsvlkgnqhfyx فیلم این مقاله را می توانید در یوتوب مشاهده فرمایید.لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.توضیح : بنده در ۵ قسمت های قبلی به مرور متغیرها، آبجکت ها، آرایه ها و فانکشن ها پرداختم اما جهت ارائه مفاهم پیشرفته تر به نظرم مفاهیم پایه ای تر نیز نیاز است، لذا تصمیم گرفتم بر مبنای منابع معتبر و شناخته شده YDKJS یا You Don't Know JS برداشت ها شخصی را طی چند گفتار پیش رو عرض نمایم.شما هنوز جی اس نمی دانید، من هم به طور کامل نمی دانم، هیچ کدام از ما نمی توانیم این ادعا را داشته باشیم. اما می توانیم شروع کنیم و جی اس را بهتر بدانیم.یاد گرفتن جی اس و دانستن آن یک هدف نیست بلکه یک جهت است، مهم نیست که شما چقدر قبلا با این زبان برنامه نویس تجربه داشته اید شما همیشه می توانید در این زبان یک چیز جدید یاد بگیرید و کمی بهتر شوید.جی اس زبان گسترده و پیشرفته‌ای با بسیاری از قابلیت ها و ويژگی ها است اما همه جی اس بر پایه سه ستون زیر پایه گذاری شده.محدوده / کلوژر (Scope/Closure)پروتوتایپ / اشیاء (Prototypes/Objects)تایپ /کوارژن (Type/Coercion)هدف این گفتار بیان مسائل مقداماتی جی اس نیست، بلکه هدف آماده سازی جهت یاد گرفتن عمیق جی اس است و فرض بر این است که شما با جی اس آشنا هستید حداقل چندین ماه تجربه آن را دارید.این نام چه نامی است؟نام جاوا اسکریپت احتمالا، اشتباه ترین نام گذاری زبان برنامه نویسی است که با باعث سوء تفاهم می گردد.آیا این زبان وابسته به جاوا است؟ آیا فرم اسکریپت برای جاوا است؟ آیا زبان اسکریپتی است و زبان برنامه نویسی واقعی نیست؟اما حقیقت این است که نام جاوا اسکریپت محصول ساخته شده توسط بازاریابی است. پدیده آورنده این زبان (Brendan Eich) نام آنر Mocha نامید و در نت اسکیپ برند لایو اسکریپت استفاده میشد، اما وقتی به صورت عمومی نام گذاری شد اسم جاوا اسکریپت رای آورد.چرا؟ زیرا از آنجاییکه این زبان در ابتدا برای جلب مخاطبین برنامه نویسان جاوا طراحی شده بود و کلمه اسکریپت در آن زمان به علت اینکه اشاره به یک زبان سبک داشته محبوب بوده است.به عبارت دیگر، نام جاوا اسکریپت یک ابزار بازاریابی بوده است که سعی داشته این زبان را به عنوان یک جایگزین خوشایند برای نوشتن جاوا که سنگین تر و مشهورتر بوده است قرار دهد و شاید نام آن می توانست وب جاوا نام گذاری گردد.شباهت سطحی بین جاو اسکریپت و جاوا وجود دارد و این شباهت به دلیل این است که هردو آنها از syntax های C پیروی کردند به عنوان مثال در جی اس مانند جاوا از { برای شروع بلاک و } برای پایان بلاک استفاده می نماید و یا از ; برای انتهای statement استفاده می‌شود.خوب با توجه به توضیحات فوق ما از این به بعد از جی اس به جای جاوا اسکریپت استفاده می کنیم.نام رسمی که توسط TC39 مشخص شده و توسط نهاد ECMA رسمیت یافته ECMAScript است و در واقع از سال ۲۰۱۶، سال تجدید نظر نیز به نام رسمی اضافه شده است به عنوان مثال ECMAScript 2019 یا به صورت خلاصه EC2019توجه : TC39 کمیته فنی است که جی اس را مدیریت می کند و این کمیته بین ۵۰ تا ۱۰۰ نفر هستند که از شرکت های هستند که به صورت گسترده در وب سرمایه گذاری نموده اند مانند شرکت های که مرورگر ها را ساخته اند به عنوان مثال Mozila، Google، Apple و شرکت های که دستگاه ها را ساخته اند مانند سامسونگ.حال با هر نامی از نام ها فوق که جاوا اسکریپت نامیده شود قطعا"Java is to JavaScript as ham is to hamster." --Jeremy Keith, 2009مشخصات زبانکار اصلی کمیته TC39 مدیریت مشخصات (specification) زبان جی اس است و آنها مرتبا جهت رای دادن به تغییرات جلسه برگزار می کنند و تغییرات تایید شده را به سازمان استاندارد ٍECMA ارائه می دهند.رفتار و syntax جی اس در مشخصات ES تعریف شده است.از سال ۱۹۹۵ که سال آغاز جی است، ES2019 دهمین specification تجدید نظر شده می باشد و به همین دلیل در URL سایت ECMA با شماره ده است:https://www.ecma-international.org/ecma-262/10.0/تمام پیشنهادات کمیته TC39 پنج مرحله که از مرحله صفر(stage 0) تا مرحله چهار (stage 4) است، پیشرفت می کنند. شما می توانید درباره این مراحل اینجا مطالعه فرمایید.مرحله ۰ یا stage 0 به این معنی است که اشخاصی در کمیته TC39 بر این عقیده هستند که این ایده ارزش کار کردن دارد و وقتی پروپوزال به مرحله ۴ یا stage 4 رسید برای قرار دادن آن در نسخه مشخصات زبان سال بعد واجد شرایط است و این فرآیند ممکن است از چند ماه تا چند سال طول بکشد.تمام پروپوزال ها به صورت سرباز در گیت هاب TC39 مدیریت می شوند و هرشخصی می تواند در این پیشنهادات مشارکت داشته باشد اما فقط اعضای کمیته TC39 می توانند به پیشنهادات رای بدهند و لذا نظر کمیته TC39 در مسیر آینده JS وزن زیادی دارد.تمام سازنده های مرورگرها متعهد شده اند که از این مشخصات پیروی کنند اگرچه ممکن است که پیاده سازی هریک از مشخصات در مرورگرها در زمان های مختلفی انجام شود اما این به این معنی نیست که موردی که در موتور V8 (موتور کروم) پیاده سازی شده با همان مورد که در موتور SpiderMonkey (موتور موزیلا) پیاده سازس شده است، متفاوت و ناسازگار باشد.وب حکمران همه چیز جی اس استدر حالی که مجموعه‌ای از محیط ها، جی اس را اجرا می کنند از جمله مرورگر تا سرور بروی نود جی اس و یا ربات ها، اما محیطی که به جی اس حکم می نماید و چگونگی آن را تعیین می‌کند وب است. به عبارت دیگر، چگونگی پیاده سازی جی اس برای مرورگر وب از نظر عملی تنها واقعیتی است که اهمیت دارد و مشخصات جی اس با توجه به اینکه ۲۰ سال قابل اعتماد جهت محتوای وب بوده است لذا از رفتارهایی که باعث شکست محتوای وب باشد خودداری می نماید.برای مثال کمیته T39 می خواهد متدی به نام contains برای آرایه ها اضافه کند، اما می بیند که این نام با فریم ورک های قدیمی جی اس که هنوز در بعضی از سایت ها استفاده می شود ناسازگار است، بنابراین نام آن را به نام سازگار مانند includes تغییر می دهند.اما همه جی اس نیستبعضی از مواردی که در جی می بینیم مانند alert، console.log یا fetch در مشخصات جی اس تعریف نشده است، اما شبیه جی هستند، آنها فانکشن ها و آبجکت متدهای هستند که از سینتکس جی اس پیروی می کنند و رفتارهای پشت آنها بوسیله محیط‌های اجرا جی اس مانند مرورگرها و نودجی اس کنترل می شوند.دارای چهره های مختلفواژه پارادایم در زبان های برنامه نویس به طرز نگرش، رویکرد و ساختار آن زبان اشاره دارد.پارادیام های معروف و معمول شامل رویه ای (Procedural) شئ گرا (Object Orinted) و تابعی (Functional) است.سبک رویه ای کد به صورت بالا به پایین، و مجموعه ای از عملیات که باهم در یک بخش مرتبط بنام رویه یا Procedure جمع شده اند.سبک شئ گرا (OO) با جمع آوری منطق و داده ها در واحدهایی بنام کلاسها، کد را سازماندهی می نمایند.سبک تابعی یا فانکشنال (FP) کد به صورت توابع (توابع pure بر خلاف رویه ها) ساختاردهی می شوند و در آنها تابع ها به عنوان مقدار یا value قابل قبول هستند.بیشتر زبان ها متمایل به یک پارادایم هستند به عنوان مثال C رویه ای است، جاوا بیشتر بر پایه کلاس است و یا Haskell تابعی است.اما بعضی زبان ها مثل جاوااسکریپت چند پارادایم را پشتیبانی می کنند شما می توانید در آنها رویه ای، کلاس گرا و یا تابعی کد بنویسید و این کار را لازم نیست برای کل برنامه انجام بدهید و خط خط می توانید با پارادیم های مختلفی انجام دهید.سازگاری با گذشته و آیندهیکی از اساسی ترین اصولی که جاوااسکریپت آن را رعایت می کند سازگاری با گذاشته است (Backwards Compatibility)سازگاری با گذشته به این معنی اگر تغییر در حال حاضر در جی اس ایجاد گردد، این باعث نمی گردد که موارد پیشین نامعتبر گردند و کد نوشته شده در سال ۱۹۹۵ هر چند که ابتدایی و محدود باشد، امروز نیز کار می کند و همانطور که اعضای تیم TC39 قول داده اند وب را خراب نمی کنند. "we don't break the web!"در مقابل سازگاری با گذشته، سازگاری با آینده یا forwards compatibility مطرح است و به این معنی است که اگر مورد جدیدی در برنامه ای باشد، آن برنامه بتواند در موتورهای جی اس های قدیمی اجرا گردد و منجر به شکست برنامه نشود. اما جی اس forwards-compatible نیست.بر عکس اچ تی ام ال و سی اس اس forwards-compatible هستند اما backwards-compatible نیستند و به این معنی است که HTML و CSS نوشته شده در سال ۱۹۹۵ ممکن است در حال حاضر کار نکند اما اگر شما قابلیت جدید ۲۰۱۹ آنها را در مرورگر ۲۰۱۰ استفاده کنید صفحه شما اجرا می گردد و CSS , HTML که تشخیص داده نشود نادیده گرفته می شود.پریدن از فاصله ایجاد شدهاز آنجاییکه جی اس forwards-compatible نیست به این معنی است که شما همیشه با یک شکاف بین کد می توانید بنویسد و کدی که معتبر برروی موتورهای قدیمی باشد روبرو هستید.اگر شما یک برنامه با قابلیت های ES2019 برروی موتور ۲۰۱۶ اجرا کنید به احتمال زیاد برنامه شما اجرا نمی گردد و به مشکل برمی خورد و جهت پوشاندن این شکاف برنامه نویسان جی اس می بایست تمهیداتی در نظر داشته باشند. راه حل ‌syntax های جدید transpiling است و آن به این معنی است با استفاده ابزار یک کد را از یک فرم به فرم دیگر تبدیل نماییم و بر خلاف کامپایل، همچنان کد به صورت متنی است و یا مثلا به زبان ماشین تبدیل نمی گردد.عبارت Transpiling یا Transpiler این روزها در دنیای مدرن برنامه‌نویسی زیاد استفاده می‌شود. عمل Transpiling در حقیقت تبدیل یک کد از یک زبان به یک زبان هم سطح دیگر است. ابزار شناخته شده جهت تبدیل یا Transpiling جی اس های جدید به نسخه های قدیمی Babel است.برای مثال ممکن است دولوپر کد زیر را نوشته باشد.if (something) { let x = 3; console.log(x); } else { let x = 4; console.log(x); } و وقتی این کد جهت مرورگرهای عمومی دیپلوی می گردد توسط Babel به صورت زیر تبدیل می گرددvar x$0, x$1; if (something) { x$0 = 3; console.log(x$0); } else { x$1 = 4; console.log(x$1); }و همانطور که می بینیم در کد اصلی بوسیله let دوتا محدوده بوسیله if و else ایجاد شده و متغییر x در هر دو محدوده بدون اینکه با هم مداخله تعریف شده اند و در برنامه مشابه که بوسیله babel تولید شده بر آن ها دو متغییر مجزا گرفته شده است و خروجی دو تکه کد یکی است و با این تفاوت که، کد تولید شده توسط Babel قابلیت اجرا در موتورهای قدیمی جی اس را دارد.پرکردن شکاف هاموضوع forwards-compatibility به سینتکس های جدید مرتبط نیست، بلکه بیشتر به متد API های که جدیدا اضافه شده مربوط است، رایج ترین راه حل ارایه شده برای متد Apiهای که محیط های قدیمی به صورت بومی آن را تعریف کرده اند. این الگو polyfill نامیده می شود.این کد را در نظر بگیرید.// getSomeRecords() returns us a promise for some // data it will fetch var pr = getSomeRecords(); // show the UI spinner while we get the data startSpinner(); pr .then(renderRecords) // render if successful .catch(showError) // show an error if not .finally(hideSpinner) // always hide the spinnerاین کد از قابلیت متد finally در پروتوتایپ promise در ES2019 استفاده کرده است و اگر این کد در محیط های قبلی ES2019 اجرا گردد که در آن finally وجود ندارد خطا بوجود خواهد آمد.و polyfill برای finally در محیط های قبل از ES2019 می تواند به صورت زیر باشد.if (!Promise.prototype.finally) { Promise.prototype.finally = function f(fn){ return this.then( function t(v){ return Promise.resolve( fn() ) .then(function t(){ return v; }); }, function c(e){ return Promise.resolve( fn() ) .then(function t(){ throw e; }); } ); }; } ترنسپایلر ها مانند Babel معمولا تشخیص می دهند که چی polyfill های کد شما نیاز دارند و به صورت اتوماتیک برای شما آنها را تولید می کنند. اما گهگاه شما نیاز دارید آن ها به صورت صریح در برنامه تعریف یا include کنید.از آنجاییکه جی اس توسعه خود را متوقف نمی نماید و این شکاف ناگزیر بوجود خوهد آمد لذا جهت مواجه با شکاف بین کدی که شما استفاده می کنید و کدی که پایدار در محیط های قدیمی تر است، Transpilation و Polyfiliing دو تکنیک موثر می باشد.تفسیر (Interpretation) چیست؟یک سئوال بحث بر انگیز برای کد نوشته شده با جی اس این بوده است که آیا جی اس تفسیر می گردد یا کامپایل؟به نظر می رسد نظر اکثریت این است که جی اس زبان اسکریپتی تفسیر گرا است. اما حقیقت از این پیچیده تر است.زبان های که کامپایل می گردند معمولا نسخه باینری را جهت اجرا تولید می کنند و به همین دلیل است که خیلی ها می گویند جاو اسکریپت کامپایل نمی گردد.این ادعاها و انتقادهای نادرست باید کنار گذاشته شود و دلیل واقعی که اهمیت دارد به نحوه برخورد جی اس با خطا ها ربط دارد.زبانهای اسکریپتی و تفسیرگرا معمولا به صورت بالا به پایین و خط به خط اجرا می گردند و معمولا یک فاز بررسی برنامه قبل از اجرا وجود ندارد.اجرای اسکریپتی / تفسیرگرا در زبان های اسکرپتی و تفسیرگرا خطای خط ۵ برنامه در طول اجرای خط های ۱ تا ۴ تشخیص داده نمی گردد.این روش را با زبانهایی مقایسه کنید که یک مرحله معمولا parse قبل از اجرا طی می کنند مانند شکل زیراجرای کامپایل و parsingو در این مدل خطا خط ۵ در طول مرحله parse تشخیص داده می شودو جاوا اسکریپت از نوع این نوع زبان است و کد جاوا اسکریپت قبل از اجرا parse می گردد و همانطور که می دانیم خطا ها قبل از اجرا مشخص می گردند به عنوان duplicate بودن پارامترها و اگر عملیات parse انجام نمی شد این خطاها قابل تشخیص قبل از اجرا نبود.بنابراین جی اس زبان parse شده می باشد، اما آیا کامپایل نیز می گردد؟جواب به بله نزدیکتر از خیر است و جی اس parse شده به فرم بهینه شده (باینری) جهت اجرا تبدیل می گردد.جالب اینجاست که جاوا و جاوا اسکریپت در حالی که زبان های بسیار متفاوتی هستند اما از نظر مسئله تفسیر/ کامپایل شباهت زیادی بهم دارند.جریان کلی جی اس به صورت زیر است۱- بعد از برنامه ادیتور دولوپر را ترک می کند بوسیله babel ترنسپایل می گردد بوسیله وب پک بسته بندی می گردد و به صورت شکل متفاوت به موتور جی اس تحویل داده می شود.۲- موتور جی اس کد را parse می کند و یک درخت AST یا Abstract Syntax Tree تولید می کند.۳- سپس موتور AST را به یک نوع بایت کد یا واسط باینری شده تبدیل می کند که این فایل بوسیله کامپایلر JIT تبدیل و بهینه می گردد.۴- در آخر ماشینی مجازی جی اس برنامه را اجرا می کندپارس، کامپایل و اجری جی اسحال شما بگوید که این فرآیند مانند زبان های تفسیر گرا است یا زبان های کامپایل شده؟وب اسمبلی (Web Assembly WASM)یکی از دغدغه هایی که منجر به تکامل جی اس گردیده، عملکرد است، هم چطور جی اس بتواند سریعتر parse و کامپایل شود هم چطور کد کامپایل شده سریعتر اجرا شود.در سال ۲۰۱۳ مهندسانی از موزیلا فایرفاکس بازی Unreal 3 را از C به جی اس بردند و آن را در مرورگر نشان دادند، قابلیت اجرای این کد در یک موتور مرورگر جی اس با عملکرد ۶۰ فریم در ثانیه بر مجموعه ای از بهینه سازی های که موتور جی اس می توانست به طور خاص انجام دهند پیش بینی شده بود زیرا این بازی از نسخه از جی اس بنام ASM.js استفاده می کرد.چندین سال پس از اینکه ASM.js اعتبار برنامه هایی که می توانند بوسیله موتوری جی اس پردازش های بشتری انجام دهند را نشان داد گروه دیگر ازمهندسان که در ابتدا موزیلا بودند Web Assembly یا WASM به اختصار را منتشر کردند.وب اسمبلی از این جهت شبیه ASM.js است که هدف اصلی آن تهیه مسیری برای برنامه های غیر جی اس (C و غیره ) بود که به شکلی بتوانند در موتور جی اس کار کنند اما و نسب به ASM.js برروی کارایی بیشتر بروی موتور جی اس کار کرده استیکی از منظرهای WASM که در حال ظهور است و به طور مستقیم با وب ارتباط ندارد این است که WASM در حال پیشرفت است که به یک ماشین مجاز (VM) کراس پلتفرم جهت اجرا در انواع پلت فرم ها تبدیل شود.بنابراین WASM فقط برای وب نیست و WASM جی اس نیستاز آنجاییکه بحث ما در باره WASM نیست زمان بیشتر در این مورد صرف نمی کنیم اما اینکه بعضی های می گویند که وب اسمبلی جایگزن جی است یا خواهد شد درست نیست و خیالی است اما WASM به طور قابل توجهی کارهای که با جی اس می توان انجام داد را افزایش خواهد داد و تکمیل کننده قابلیت های جی اس خواهد شد.صحبت در باره Strictlyدر سال ۲۰۰۹ وقتی ES5 منتشر شد، strict mode به عنوان یک مکانیزم اختیاری برای بهتر شدن جاوا اسکریپت اضافه شد.مزایا مد استریکت بیشتر از هزینه های آن است، اما عادات قدیمی سخت می میرند و متاسفانه بعد از ۱۰ سال اختیاری بودن استریکت مد به این معنی است که برای جی اس به صورت پیش فرض وجود ندارد.چرا استریکت مد؟ استریکت مد محدودیت کارهایی که می توانیم انجام بدهیم نیست، بلکه راهنمای برای انجام بهترین کار برای موتور جی است که بتواند کد را به صورت کارآمد و بهینه اجرا نماید و بیشتر کد های جی اس کار تیمی از دولوپرها است بنابراین استفاده از استریکت مد به همکاری برروی کد کمک می کند و از اشتباهات مشکل ساز جلوگیری می‌کند.بیشتر استریکت مد ها به شکل خطاهای اولیه است، به این معنی که خطای syntax نیست و هنگام کامپایل داده می شوند (قبل از اجرا). به عنوان مثال در مد استریکت دو پارامتر فانکشن نمی توانند یک نام داشته باشند و منجر به خطای اولیه می گردد.در هر صورت مد استریکت به صورت یک linter به شما یاد آوری می کند که شانس کارایی و بهترین کیفیت را داشته باشید.بسیاری این سؤال را می پرسند چرا جی اس استریکت مد را به صورت پیش فرض قرار نداده است؟ و جواب این در بالا توضیح داده و این به خاطر سازگاری با گذشته یا backwards compatibility استدر حال حاضر بیشتر کدهای جی اس در حالت تولید transpile می شوند و در هنگام آن به مد استریکت پایبند می شوند.و در حال حاضر بیشتر کدها با فرمت ماژول ES6 نوشته می شود و ماژول ES6 به صورت پیش فرض استریکت مد است، بنابراین کلیه کدهای موجود در چنین فایل‌هایی بطور خودکار در حال استریکت مد قرار می گیرند. تعریف شده هاجی اس استاندارد ECMAScript (نسخه ES2019 در حال حاضر) که توسط کمیته TC39 هدایت می گردد و توسط ECMA میزبانی می گردد را پیاده سازی می کند.جی اس یک زبان کامپایل شده است و به این معنی است که موتر جی است برنامه را قبل از اجرا پردازش و صحت سنجی می کند و خطاها را گزارش می دهد.خوب با زبان ما جی اس تعریف شده است بیایید حال با فهم و حواشی آن آشنا شویم. هومن امینی هومن امینی Sun, 03 May 2020 22:43:15 +0430 https://virgool.io/apieco/%D8%B4%D8%AE%D8%B5%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%D9%88%D8%B1%DA%A9%D8%B1-create-react-app-%D8%A8%D8%AF%D9%88%D9%86-ejecting-%D9%88-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-workbox-hwawbrnyiwo2 در حال حاضر جهت اضافه کردن یک سرویس ورکر سفارشی یا custom به create-react-app بدون اینکه آن را Inject کنیم راهی وجود ندارد، لذا در ادامه یک روش جهت این نیاز ارايه می گردد.مرحله اول: فعال سازی register سرویس وررک در فایل index.jsمرحله دوم: گفتن به CRA جهت لود سرویس ورکر سفارش سازی شدهدر فایل src/serviceWorker.js مسیر سرویس ورکر جدید که در اینجا sw.js نام دارد را به صورت زیر تغییر می دهیم.تغییر خط const swUrl = ${process.env.PUBLIC_URL}/service-worker.js;به const swUrl = ${process.env.PUBLIC_URL}/sw.js; مرحله سوم : ایجاد یک Template و ‌ Build فایل برای سرویس ورکر سفارش سازی شدهدو فایل sw-build.js و sw-template.js را در دایرکتوری src ایجاد نماید.فایل sw-build.js شامل دستورات ساخت سرویس ورکر سفارشی است.فایل sw-template.js یک Template برای سرویس ورکر با استفاده از Workbox شامل قوانین caching استمرحله چهارم: ساخت فایل sw-build.js شامل دستورات ساخت سرویس ورکر سفارشی همانطور که در کد فوق می بینیم در قسمت swSRC مسیر Template سرویس ورکر مشخص شده است که در مرحله بعد کد آن آورده شده است.مرحله پنج : ساخت فایل sw-template.js شامل Template برای سرویس ورکر با استفاده از Workbox شامل قوانین caching مرحله شش : نصب workbox-buildماژول workbox-build را با دستور زیر نصب می کنیم.yarn add workbox-buildمرحله هفتم : اجرای دستور ساخت سرویس ورکر جدید و حذف سرویس ورکر قدیمی با تغییر package.json به صورت زیرکل فرآیند اینجا تمام می شود و الان در هنگام Build وب اپ با دستور npm run build سرویس ورکر سفارش سازی شده بنام sw.js ساخته می شود و مورد استفاده وب اپ قرار می گیرد. https://vrgl.ir/gyEBk https://vrgl.ir/79N39 هومن امینی هومن امینی Wed, 08 Apr 2020 22:57:08 +0430 https://virgool.io/@amini.hooman/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%D9%88%D8%B1%DA%A9%D8%B1-%D8%A8%D8%A7-workbox-%D8%A8%D8%A7-%D8%AF%D8%B1%D8%AF%D8%B3%D8%B1-%DA%A9%D9%85%D8%AA%D8%B1-uwkrimqxtarh همانطور که در توضیح سرویس ورکرها در گفتار وب ورکرها در لینک ذیل توضیح دادیم در سرویس ورکر ایونت و یا رخدادهای مختلفی رخ می دهد و شما بسته به نیازتان باید این رخدادها را بگیرید و عملیات دلخواهتان را از جمله caching و قابلیت آفلاین را به وب اپ خود اضافه نمایید . https://vrgl.ir/gyEBk ایجاد سرویس ورکر به صورت دستی جهت کنترل caching و قابلیت آفلاین و کنترل تمام حالت ها کار ساده ای نیست، اما با کتابخانه workbox به مراتب راحتتر این فرآیند انجام می پذیرد. به عنوان مثال با چند خط زیر precache به وب اپ شما اضافه می شود.یا با تکه کد زیر می توانید استراتژی cache که دراینجا cacheFirst است را تعیین نمایید یعنی هر درخواستی برای فایل های عکس اومد ابتدا از cache آن ها لود می گردد و اگر موجود نبود به شبکه مراجعه می شود.شما می توانید فایل های جاوا اسکریپ حتی api ها را هم به همین صورت cache نمایید.همچنین می توانید با استفاده cli این ابزار به صورت ساده سرویس ورکر خود را ایجاد نمایید.بعد از اینکه سرویس ورکر شما ایجاد شد شما تنها کاری که لازم دارید این است سرویس ورکر را در برنامه مانند همیشه register کنید.جهت توضیحات بیشتر با سایت workbox در این لینک مراجعه فرمایید هومن امینی هومن امینی Wed, 08 Apr 2020 21:24:31 +0430 https://virgool.io/@amini.hooman/%D9%88%D8%A8-%D9%88%D8%B1%DA%A9%D8%B1%D9%87%D8%A7-web-workers-nc3ir9afkuxk لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.همانطور که می دانید جاوا اسکریپت تک نخ یا single thread است و شما نمی توانید دو عملیات را در یک زمان انجام بدهید به عنوان مثال شما نمی توانید همزمان هم dom را عوض کنید و همزمان یک محاسبه پیچیده را انجام بدهید و یا همزمان به رویدادهای شبکه گوش کنید و نسبت به آن عملیات انجام بدهید جهت این نیازها می توان از ورکرها استفاده نمود و ورکر ها کدهای جاوا اسکریپتی است که خارج از thread اصلی در پشت صحنه اجرا می شوند و thread اصلی برنامه را متوقف نمی نمایند.توجه ورکر جدا از مسئله غیر همزمانی در جاوا اسکریت است و در باره بحث Asynchronous می توانید به گفتار زیر مراجعه فرمایید. http://vrgl.ir/8OXMa شما می توانید هر کدی را که می خواهید به جز چند استثناء در thread ورکر اجرا کنید به عنوان مثال شما نمی توانید dom را از داخل ورکر عوض کنید و یا بعضی از متدها و خصیصه های آبجکت windows را استفاده کنید اما شما می توانید خیلی از آیتم های window مانند وب سوکت و ذخیره داده ها مثل indexedDB را استفاده کنید. لیست توابع و کلاس های که در وب ورکر ها در دسترس هستند در این لینک ببینیدداده بین ورکر و thread اصلی سیستم با پیام جابه جا می گردد هر دو طرف با متد postMessage پیام را ارسال می کنند و جواب پیام را از طریق ایونت یا رویداد می گیرند به مثال ساده زیر توجه کنید که در آن توسط وب ورکر دو عدد به ورکر ارسال شده و در ورکر آنها جمع شده و به thread اصلی برگردانده شده است.همچنین از یک ورکر می توانیم به ورکر های دیگر در داخل سایت یا خارج سایت دسترسی داشته باشیم با importscriptعلاوه بر وب ورکر ها به صورت فوق که به آنها ورکر های اختصاصی یا dedicated workers گفته می شود نوع های دیگر ورکر به شرح ذیل داریم:ورکرهای اشتراکی (Shared workers)ورکرهای اشتراکی می توانند توسط چند ویندوز و یا iFrame استفاده شوند و اسکریپت ها باید از طریق پورت فعال ارتباط برقرار کنند. برای توضیحات بیشتر به این لینک مراجعه فرماییدسرویس ورکر (Service Workers)این نوع ورکر ها به عنوان واسط (Proxy) بین وب اپلکیشن و شبکه عمل می نمایند که جهت عملیات Cache و Push Notification و همسان سازی بکار می روند که در ادامه به تفضیل توضیح خواهیم داد.ورکرهای کروم (Chrome Workers)جهت توصیحات بیشتر به این لینک مراجعه فرمایید.ورکرها صداجهت ایجاد توانایی پردازش صوتی در داخل ورکردر ادامه به سرویس ورکر می پردازیم که یکی از پرکاربرد ترین ورکر های این روز ها است از جمله در وب اپلکیشن ها و PWAهمانطور گفتیم سرویس ورکر یک واسط سمت کلایت بین وب اپلکیشن و شبکه است و به عنوان مثال شما می توانید کنترل cache و یا قابلیت آفلاین و یا پیام های Push را از طریق آن انجام دهید همانطور که گفتیم سرویس ورکر یک نوع از وب ورکر است و می تواند در پشت صحنه حتی وقتی مرورگر بسته است فعال باشد وسرویسی ورکر به این صورت است که بیکار یا idle می ماند تا اینکه رویدادی اتفاق رخ دهدسرویس ورکر برپایه Promise است لذا می تواند پردازش ها را غیر همزمان انجام دهد و سرویس ورکر جهت امنیت صرفا برروی https فعال می گردد.به عنوان نمونه سرویس ورکر به شکل زیر می تواند پردازش جهت آفلاین را انجام دهد و همانطور که می بینیدمی تواند نسبت به استراتژی تعریف شده محتوا را از Cache و یا از سرور آنلاین تامین کند.و یا Push Notification را به شکل زیر از سرویس های Push دریافت کنند و به وب اپلکیشن جهت نمایش تحویل دهند.و یا شما می توانید با سرویس ورکر در پشت صحنه همسان سازی (‌‌Background Sync)انجام دهید به عنوان مثال پیامی که به دلیل قطعی اینترنت ارسال نشده است را هنگام اتصال اینترنت ارسال نمایید.چرخه حیات سرویس ورکرسرویس ورکر یک چرخه حیات مجزا از صفحه وب داردبرای استفاده از سرویس ورکر باید آن را در کد اصلی ثبت نام کنید به صورت زیر و فایل سرویس ورکر را به وب اپلکیشن معرفی کنید.همانطور در کد زیر می بینید ابتدا از پشتیبانی سرویس ورکر توسط مرورگر اطمینان حاصل شده و سپس سرویس ورکر به وب اپلکیشن معرفی و یا ثبت نام شده است.پشتیبانی مرورگرها از سرویس ورکر را می توانید در این لینک مشاهده فرمایید.بعداز ثبت نام، سرویس ورکر در background چرخه حیات زیر را طی می نماید.در طول این چرخه حیات سرویس ورکر با رخداد یا ایونت های مختلفی (شامل موارد شکل زیر) روبرو می گردد که ما می توانیم آنها را بگیریم و با توجه به رخداد عملیات cache یا push یا همزمان سازی یا Sync را انجام دهیم.به عنوان مثلا می توان رخداد install را به شکل ذیل گرفت و این زمان موقع خوبی اگر بخواهیم static asset ها را cache کنیم. یا می توانیم هنگام رخداد Active اکتیو Cache های قبلی را به شکل زیر حذف نماییم.یا می توان هنگامی که fetch صورت گرفت بجای گرفتن اطلاعات از سرور محتوا را از cache به صورت زیر آورد.یا می توان رخداد Push را گرفتم و PushNotification به کاربر نشان داد.توجه کنید در هر زمان مایک سرویس ورکر فعال می توانیم داشته باشیم و با فعال سازی سرویس ورکر جدید سرویس ورکر قدیمی غیر فعال می گردد.خوب بحث را اینجا تمام می کنیم انشالله در قسمت بحث های بعدی به workbox و نکات سرویس ورکر در create-react-app می پردازیم.لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است. هومن امینی هومن امینی Wed, 08 Apr 2020 12:57:41 +0430 https://virgool.io/@amini.hooman/%D8%A8%D8%B1%DA%AF%D9%87-%D8%AA%D9%82%D9%84%D8%A8-%DA%AF%DB%8C%D8%AA-git-ld7iai5vbdme لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.مبانی - ‌BASICSgit init -- ایجاد یک ریپازیتوری خالی git clone <repo> --- کلون یک ریپازیتوری موجود git add . --- استیج تمام تغییرات git commit -m &quot<msg>&quot --- کامیت تغییرات با پیام git status --- لیست تغییرات git log --- نمایش تاریخچه کامیت ها git diff --- نمایش تغییرات استیج نشده‌هاشاخه ها - BRANCHESgit branch --- لیست برنچ ها git branch <branch> --- ایجاد یک برنچ جدید git checkout <branch> --- چک اوت به یک برنچ git checkout -b <branch> --- ایجاد یک برنچ جدید و چک اوت به آن برنچ git merge <branch> --- مرج یک برنچ با برنچ جاریتغییرات روی لوکال و ریموتgit stash --- ذخیره تغییرات بعلاوه استیج تغییرات git reset <file> --- حذف یک فایل از استیج git revert <commit> --- ایجاد یک کامیت و تغییر کامیت قبلی git rebase <branch> --- ترکیب کامیت قبلی بعلاوه تغییرات استیج شده git reset --hard <commit> --- پاک کردن فضای استیج و برگشت به کامیت دیگربه اشتراک گذاری و بروز رسانیgit remote add <alias> <url> --- اضافه کردن یک آدرس گیت به عنوان یک نام مستعار git fetch <alias> --- واکشیدن تمام برنچ های ریموت git merge <alias>/<branch> --- مرج برنچ ریموت با برنچ جاری git push <alias> <branch> --- پوش کامیت های لوکال به ریپازیتوری ریموت git pull --- واکشیدن و مرج کامیت های ریموتلینک کانال بنده در یوتوب، عضویت شما در این کانال پذیرا هستم و باعث امتنان است . هومن امینی هومن امینی Mon, 06 Apr 2020 10:59:58 +0430 https://virgool.io/@amini.hooman/%D9%82%D8%B3%D9%85%D8%AA-%D9%BE%D9%86%D8%AC%D9%85-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D9%86%DA%A9%D8%AA%D9%87-%D9%88-%D8%AA%D8%B1%D9%81%D9%86%D8%AF%D9%87%D8%A7%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-uvh1hxfj3s0g لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است.توجه : ویدیو این گفتار را می توانید، در یوتوب مشاهده فرمایید.فانکشن یا تابع در جاوا اسکریپت مانند سایر زبان های برنامه نویسی مجموعه ای از کد یا قطعه کد است که از سایر کدها جدا و یا ایزوله جهت استفاده مجدد شده است و می تواند مقادیری به عنوان ورودی بگیرد و خروجی ایجاد نماید.function myFunction(){ console.log(&quotHello&quot); }تعریف تابع یا فانکشن به دو روش انجام می شود:روش اول ) فانکشن definition یا declaration اعلان تابع function declaration یعنی اعلان اینکه این تابع است و اگر صدا بشود قابل اجرا است.function foo (){ //function definition or function declaration or function statement console.log(&quotHello&quot) }روش دوم ) فانکش expression از آن جاییکه در جاوا اسکریپت تابع یک مقدار است و توابع در جی اس نوع خاصی از نوع مقدار آبجکت هستند، لذا می توان آن را به شکل زیر به یک متغییر تخصیص داد که تعریف به این صورت را فانکش expression می گویند.var f = function foo (){ //function expression console.log(&quotHello&quot) };توجه: فانکش در زبان های برنامه نویسی دیگر می توانند صرفا مقدار برگرداندبه مثال زیر توجه کنید، همانطور که متغییر foo یک مقدار به نام "Hello" دارد متغییر greeting یک مقدار یعنی یک فانکشن بنام فانکشن foo دارد که البته می توانید این فانکشن بدون نام باشد.var foo = &quotHello&quot var greeting = function foo (){ console.log(&quotHello&quot) }جهت اجرای فانکش می بایست نام آن را به صورت زیر صدا نماییم.myFunction(); //Hello توابع می توانند بدون نام یا anonymous function experssion باشند.var f = function (){ console.log(&quotHello&quot) } f(); جهت ارسال پارامتر به فانکشن نوع آنها را مانند سایر زبان‌های برنامه نویسی مشخص نمی نماییم و اگر یک پارامتر را ارسال نکنیم undefined به جای آن قرار داده می شود و منجر به خطا نمی‌گردد و اگر بیشتر از آرگومان ها دیتا ارسال شود، دیتا های اضافی در نظر گرفته نمی شود و به طبع منجر به خطا هم نمی گردد و اصطلاحا در جاوااسکریپت فانکشن ها قابل انعطاف هستند.function myFunction(name,familyName){ console.log(name,familyName); } myFunction(&quotali&quot); //&quotali&quot undefinedهمچینن هر فانکشنی می تواند مقادیری را برگرداند مثال زیر:function sayHi(name){ return &quotHello &quot + name } var value = sayHi(&quotAli&quot); console.log(value); اگر فانکش چیزی برنگرداند مقدار آن پیش فرض undefined است مثال زیرfunction sayHi(name){ } var value = sayHi(&quotAli&quot); console.log(value); //undefinedجاوا اسکریپت function declaration را به بالا منتقل می کند که به این کار hoisting می گویند و توجه کنید Hoisting برروی function declaration انجام می شود و برروی function expertion این کار انجام نمی شود.به مثال های ذیل دقت کنیدfoo(); //Hello Because Hoisting function foo (){ //function declaration console.log(&quotHello&quot) }f(); //Error f is not a function var f = function foo (){ //function expression console.log(&quotHello&quot) };بیشتر ترجیج داده می شود از function expression برای تابع استفاده شود.از آنجاییکه گفتم تابع یک مقدار است پس می توانیم مانند یک string به یک تابع دیگر آن را ارسال نماییم.var f = function (){ console.log(&quotHello&quot) } var exec = function(fn){ fn() console.log(fn); } exec(f);همانطور که گفتیم هر چیز که به متغییر می توانیم تخصیص بدهیم آن را به ویژگی های یک آبجکت می توان تخصیص داد لذا فانکشن را می توان به property آبجکت تخصیص داد، که همان متد در آبجکت استvar myObj={ testProp:true } myObj.myMethod = function(){ console.log(&quotfunction in object&quot) }; console.log(myObj) myObj.myMethod();لطفا برای سایر موارد مانند مفهوم کلمه کلیدی this و پارامتری ها پیش فرض در توابع به فیلم این گفتار در یوتوب مراجعه فرمایید.لینک کانال بنده در یوتوب، عضویت شما در این کانال باعث امتنان است. http://vrgl.ir/6xzRM http://vrgl.ir/Kwf7H http://vrgl.ir/XnhWj http://vrgl.ir/jyK4J هومن امینی هومن امینی Sun, 05 Apr 2020 19:45:43 +0430