نوشته های Amir

رگولار اکسپرشن (Regular expression) به زبان ساده

Amir — Thu, 19 Sep 2019 20:15:01 +0430

رگولار اکسپرشن چیست؟مجموعه ای از کاراکترها و علائمی است که می توان با آن قسمتی از یک عبارت، یا نوشته را به اصطلاح Match کرد (قسمتی از عبارت که با پترن مذکور مرتبت می باشد را با آن پیدا کرد).چه استفاده هایی دارد؟از رگولار اکسپرشن می توان در validate کردن فیلد های فرم، برای اطمینان از اینکه پسوردی که کاربر وارد می کند شامل یکسری حروف و یا پترنی که ما می خواهیم باشد، برای استخراج تکه ای از یک عبارت، برای پیدا کردن قسمتی از لاگ یک وب‌سرور که به دنبالش هستیم و ...استفاده کرد.به چه روشی می توان از آن استفاده کرد؟تمامی زبان های برنامه نویسی کلاس ، آبجکت و یا توابعی برای کار کردن با رگولار اکسپرشن دارند که می توان با مراجعه به راهنمای آن‌ها از نحوه استفاده از آنها مطلع شد.نکاتی راجب ادامه این پستدر ادامه از ترجمه اسامی کاراکترهای رگولار اکسپرشن به دلیل اینکه دانستن نام انگلیسی آنها الزامی است خودداری می کنم.در طول توضیحات از کلمه match زیاد استفاده می شود که معنایش آن است که یک عبارت با یک عبارت دیگر برابر و یکسان باشد.همچنین منظور از کارکتر یعنی هر حرف انگلیسی یا هر عدد و یا هر علامتی که معمولا روی تمامی کیبورد های استاندارد وجود دارد.در مثال های زیر پترن regular expression که به اختصار regex هم نوشته می شود را در داخل "..." نوشته ام ولی مثلا در جاوا اسکریپت این پترن در داخل /.../ نوشته می شود.در ضمن به خاطر محدودیت ادیتور ویرگول در مثال هایی که در ادامه خواهید دید عبارات match شده درون مثال ها در داخل دو * نمایش داده میشوند.آموزش Regular expression1. Basic Matchersبه طور کلی کاراکترهای انگلیسی و عددها به خودی خود یک پترن به حساب می آیند."regex" => I am learning *regex* in this tutorial.2. Full stop .کاراکتر . یا همان نقطه هر تک کاراکتری را به جز new line یا همان n\ را match می کند.".ar" => The *car* is *par*ked outside.3. Character set (character class)کروشه یا کمانک یا همان براکت باز و بسته [ ] که می توان مجموعه‌ای از کارکترها را درون آن قرار داد می تواند یکی از کارکترهای درون آن را در یک متن match کند."[pd]ark" => This would match both *park* and *dark*.و یا می توان با استفاده از dash یا hyphen یا همان - یک range از کاراکتر ها را در داخل [ ] مشخص کرد."[a-c]r" => This would match *ar* *br* *cr*نکته: Full stop یا نقطه درون [.] به معنای نقطه می باشد و نه موردی که در شماره ۲ توضیح داده شد.4. Repetitions (The start *)کاراکتر * بعد از هر کاراکتر دیگری که بیاید به معنای هیچ و یا بیشتر تکرار کارکتری که بعد از آن آمده می باشد. به معنای ساده تر مثلا *a یعنی که یا a وجود ندارد و یا می تواند یکبار و یا بیشتر در کلمه یا عبارت وجود داشته باشد."ca*r" => *cr* *car* *caaar* *caaaar*5. Repetitions (The Plus +)کاراکتر + بعد از هر کاراکتر دیگری که بیاید به معنای یک یا بیشتر تکرار کاراکتری است که بعد از آن آمده می باشد."ca+r" => cr *car* *caar*6. Braces ( quantifiers {} )این کاراکتر به معنای تعداد تکرار کاراکتر و یا گروه پیش از خودش می باشد مثلا {3,2}[9-0] یعنی حداقل دو عدد و حداکثر سه عدد را match کن، می توان عدد دوم را حذف کرد {,3}[9-0] که به معنای حداقل سه عدد و حداکثر بی‌نهایت و در صورتی که علامت , هم حذف شود {3}[9-0] به معنای دقیقا تکرار سه عدد می‌باشد."[0-9]{2,3}" => Part of this number *992*5 and all of *23* would be mached.7. Capturing Group (...)پترنی یا در اصطلاح (sub patternی) که داخلی پرانتز نوشته می‌شود capturing group نامیده می‌شود و برای گروه بندی کردن کاراکترها می باشد و اگر بعد از یک capture group موارد ۴، ۵، ۶ را قرار دهیم کل پترن داخل آن طبق توضیحات ۳ قسمت بالا تکرار می شود. مثلا +(ab) یعنی کلی ab حداقل یک و یا بیش از یک بار تکرار می شود.نکته: در برخی از زبان‌های برنامه نویسی مثلا جاوااسکریپت و پایتون توابعی وجود دارد که مقدار داخلی capture group را از متن جدا می کنند و بر می گردانند و علت این نامگذاری (capture) یه همین دلیل می‌باشد.8. Non-capturing group (?: )همانند مورد بالا می باشد ولی با این تفاوت که هیچ مقداری را از داخلی متن match شده باز نمی گرداند."c(?:ar)" => *car* *car*bon9. Alternation |کاراکتر | یا همان vertical bar به معنای همان or در برنامه نویسی می‌باشد و از آن می توان در حالت ۱ (basic matchers) و یا در capturing groups یا non-capturing groups استفاده کرد. "(T|t)he|car" => *The car* is parked in *the* garage.10. Escaping special character \برای استفاده کردن از برخی از کاراکترها که به عنوان کاراکتر های پیش فرض رگولار اکسپرشن هستند باید آنها را در اصطلاح escape کرد و بدین معنا که قبل از آنها از escape character یا همان \ استفاده کرد.کاراکتر های پیش فرض رگولار اکسپرشن که باید آنها را escape کرد: { } [ ] / \ + * . $ ^ | ?"mat\." => The fat cat sat on the *mat.*11. Caret ^قرار دادن کاراکتر ^ در ابتدای یک پترن به معنای این است که عبارت با کاراکتر مذکور باید در ابتدای متن یا عبارتی که می خواهیم match کنیم باشد."(T|t)he" => *The* car is parked in *the* garage."^(T|t)he" => *The* car is parked in the garage.نکته: قرار دادن این کاراکتر در ابتدای [ ^] به معنای عکس مقادیری است که درون [ ] قرار دارد.12. Dollar $قرار دادن کاراکتر $ در انتهای یک پترن به معنای این است که عبارت با کاراکتر آخری که $ بعد از آن آمده باید در انتهای عبارتی که می خواهیم match کنیم باشد."(at\.)" => The fat c*at.* s*at.* on the m*at.*"(at\.)$" => The fat cat. sat. on the m*at.*13. The Question Markکاراکتر یا همان علامت ? به معنای هیچ و یا فقط یک می باشد."[T]he" => *The* car is parked in *the* garage."[T]?he" => *The* car is parked in t*he* garage.14. Shorthand Character Setsرگولار اکسپرشن یک سری کاراکترهای مختصر برای match کردن یک سری از پترن های پرکاربر دارد.کاراکتر . یا همان full stop که هر کاراکتری به جز n\ را match می‌کندکاراکتر w\ که کاراکتر های به اصطلاح alphanumeric را match می‌کند [a-zA-Z0-9_]کاراکتر W\ که کاراکتر های به اصطلاح non-alphanumeric را که عکس مورد قبل می باشد را match می کند.کاراکتر d\ که اعداد ۰ تا ۹ را match می کند [9-0]کاراکتر D\ که کاراکتر های غیر از عدد را match می کندکاراکتر s\ که همان whitespace را match می کندکاراکتر S\ که non-whitespace یا عکس مورد بالا را match می کند15. Lookaroundsدارای ۴ حالت زیر می باشدPositive Lookahead (?= )Negative Lookahead (?! )Positive Lookbehind (?<= )Negative Lookbehind (? *The* fat cat sat on the mat.حالت Negative Lookahead دقیقا برعکس حالت قبل می باشد و در مثال (the(?=\sfat فقط the را match می کند که بعد از آن کلمه fat نباشد."(T|t)he(?!\sfat)" => The fat cat sat on *the* mat.حالت Positive Lookbehind چک می کند که قبل از پترنی که می خواهیم match کنیم حتما باید یک پترنی که با ( =>?) مشخص می شود پیش از آن وجود داشته باشد."(?<=(T|t)he\s)(fat|mat)" => The *fat* cat sat on the *mat*.و حالت آخر یعنی Negative Lookbehind هم دقیقا برعکس حالت قبل می باشد و بدین معنی که قبل از پترنی که می خواهیم match کنیم پترن مشخص شده در داخل ( !>?) نباید وجود داشته باشد تا پترن ما match شود."(? The cat *sat* on the mat.16. Flagsچندین کاراکتر یا در اصطلاح modifiers یا flag وجود دارند که برای کنترل کلی بر روی پترن های رگولار اکسپرشن می باشند.کاراکتر i : که به معنای Case insensitive می باشدکاراکتر g : که در اطلاح Global Search می باشد و به فارسی یعنی اینکه با پیدا کردن اولین match متوقف نشود و به دنبال موارد دیگر برای match کردن بگردد (به صورت پیش فرض regular expression اولین match ی که پیدا کند متوقف می شود)کاراکتر m : که به معنای Multiline می باشد"/The/gi" => *The* fat cat sat on *the* mat.سخن آخرتلاش کردم که در این پست تقریبا اکثر کاراکترهای رگولار اکسپرشن را توضیح دهم و این موارد توضیح داده شده تقریبا کاراکتر های استانداردی هستند که در همه زبان ها یکسان هستند، ولی خب ممکنه در زبان های مختلف مواردی بیشتر از این ها را ببینید که کاربردهای بیشتری را به رگولار اکسپرشن اضافه کنند.منابعhttps://github.com/ziishaned/learn-regex/https://developer.mozilla.org

سرویس وررکر چیست؟ و چرا باید از اون استفاده کنیم؟

Amir — Thu, 29 Aug 2019 21:27:38 +0430

سرویس ورکر (service worker) اسکریپتی است که مرورگر آن‌ را در بک گراند و مجزا از کدهای وب سایت یا وب اپلیکیشن اجرا می کند و قابلیت های جدیدی نظیر ارسال وب پوش ، کش کردن اسکریپت‌ها و استایل‌ها و غیره را ارائه می کند.سرویس ورکر در واقع یک JavaScript Worker می‌باشد که مرورگر آن‌را در یک Process مجزا از وب‌سایت اجرا می کند و به صورت مستقیم به DOM یا همون کدهای html , javascript وب سایت دسترسی ندارد و برای تعامل با وب سایت از قابلیتی به نام postMessage که توسط مرورگر ارائه می‌شود استفاده می‌کند.جاوااسکریپ زبانی است که فقط در یک Thread اجرا می‌شود ، به زبان ساده یعنی اینکه کل اسکریپت‌هایی که در یک وب سایت اجرا می شوند به صورت پشت سرهم می باشند و باید یه خط کد یا یک تابع تمام شود تا خط بعدی و تابع بعدی اجرا شود ، به همین دلیل وقتی یک دیالوگ alert باز می شود تا زمانی که آن‌را نبندیم امکان انجام هیچ کار دیگری نمی باشد.پس استفاده از JavaScript Worker که در واقع اسکریپتی است که در Thread ی دیگر و مجزا از اسکریپت وب‌سایت اجرا می شود و قابلیتی است که توسط مرورگر ها ارائه می شود به ما امکان انجام کارهایی نظیر اسکریپت‌های طولانی و انجام کارهایی که زمان بیشتری طول می کشد را می دهد.مواردی که از سرویس ورکر می توانیم استفاده کنیمبرای نمایش اعلان های وب (push notifications)برای پیاده سازی کردن کش برای استایل ها ، اسکریپتها و ریکوئست های وب سایتپیاده سازی کردن تجربه کاربری آفلاین انجام عملیات های سنگین و زمان بر و نمایش نتیجه آن در وب سایتدانلود کردن فایل هایی که توسط کلاینت ساخته شده استفاده از سرویس ورکر در PWA هاچرخه کارکرد سرویس ورکر (Service worker life cycle)سرویس ورکر چرخه کارکردی دارد که کاملا جدای از وب سایت می باشد.برای نصب یک سرویس ورکر در وب‌سایت‌تان باید ابتدا آن‌ را از درون وب سایت‌تان رجیستر کنید. رجیستر کردن سرویس ورکر باعث می شود که مرورگر در بک‌گراند سرویس ورکر را نصب (install) کند. در صورتی که نصب سرویس ورکر با موفقیت انجام شود سرویس ورکر به اصطلاح (activate) فعال می شود. در این زمان است که سرویس ورکر آماده کار می باشد. در این حالت سرویس ورکر دو وضعیت دارد یا به حالت ساکن (idle) در می ‌آید تا رم و منابع سیستم را الکی استفاده نکند و یا در وضعیت عمل کردن (fetch/message) به وظیفه ای که برای آن فعال شده.Service worker life cycleمواردی که قبلا از استفاده از سرویس ورکر باید بدانیمبرای استفاده از سرویس ورکر ابتدا باید مرورگر از آن پشتیبانی کند که در این زمان بیشتر ورژن های گوگل کروم ، فایرفاکس ، اپرا و برخی مرورگرهای دیگر از آن پشتیبانی می کنند.نکته ی دیگر در استفاده از سرویس ورکر این است که سرویس ورکر فقط در وب سایت‌هایی که از https استفاده می کنند کار می کند و به این خاطر می باشد که چون سرویس ورکر می تواند تمامی ریکوئست ها و پاسخ های یک وب سایت را کاملا به عنوان یک واسط کنترل و حتی تغییر دهد ، پس برای اطمینان از امنیت وب سایت ، محیط سرویس ورکر باید https باشد.البته قابل ذکر است که برای توسعه و تست در محیط لوکال (localhost) نیازی به https نمی باشد و سرویس ورکر در این محیط کار می کند.فایل سرویس ورکر را باید در فولد اصلی (روت) وب سایت قرار دهید تا بتواند تمامی آدرس های وب سایت را تحت کنترل قرار دهد ، البته این کار اجباری نمی باشد و مثلا می توانید سرویس ورکر را در آدرس /blog قرار دهید و در این صورت سرویس ورکر فقط آدرس هایی که با /blog شروع می شوند را کنترل می کند.نحوه رجیستر کردن سرویس ورکربرای نصب سرویس ورکر باید آنرا درون کد وب سایت تان رجیستر کنید. کد زیر به مرورگر می گوید که در صورتی که از سرویس ورکر پشتیبانی میکند بعد از لود شدن کامل صفحه سرویس ورکر با فایل sw.js که در فولدر روت قرار گرفته است را رجیستر کند.if ('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(() => console.log("ServiceWorker registerd successfully")) .catch((e) => console.log("ServiceWorker failed to register", e)); }) }در صورتی که کد بالا را در وب‌سایت تان قرار دهید هر بار که صفحه ریلود می شود کد بالا مجدد اجرا می شود و در صورتی که از قبل سرویس ورکر فعال باشد ، کد بالا باعث رجیستر شدن سرویس ورکر جدید نمی شود.در مرورگر کروم می توانید تمامی سرویس ورکرها و وضعیت آن ها را با باز کردن صفحه inspect مرورگر توسط کلید های Ctrl+Shift+I و رفتن به تب Application و سپس انتخاب منو Service Workers مشاهده کنید.در پست بعدی نحوه نوشتن اسکریپت سرویس ورکر و انجام تسک های مختلف در وضعیت های install activate , message , ... به طور کامل و با ذکر مثال توضیح خواهم داد.منابعhttps://developers.google.com/web/fundamentals/primers/service-workers/https://www.html5rocks.com/en/tutorials/workers/basics/https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers