https://virgool.ir/feed/@amikhan1343532fa2026-11-11 04:59:11https://files.virgool.ir/upload/users/203753/avatar/iaQjM6.pnghttps://virgool.ir/@amikhan1343532https://virgool.ir/@amikhan1343532/what-is-npm-yuclpjbyiuiaدر این درس از نقشه راه طراحی سایت، به معرفی یک کتابخانه‌ی قدرتمند می‌پردازیم. npm بحث امروز ماست. همراه ما باشید.npm چیست؟npm یک کتابخانه‌ی بزرگ است که یک نصاب و Package Manager به حساب می‌آید. این کتابخانه Open source و رایگان می‌باشد.NPM برگرفته از نام Node Package Manager و به معنای یک نرم‌افزار مدیریت بسته node.js است.اگر از node.js‌ اطلاعی ندارید نگران نباشید. به طور خلاصه، node.js یک محیطی برای اجرای کدهای جاوا اسکریپت در سمت سرور است.به طور معمول کدهای جاوا اسکریپت در سمت کاربر و در مرورگر اجرا می‌شوند. اما محیط node.js شرایطی را فراهم می‌کند که می‌توان از کدهای جاوا اسکریپت در سمت سرور هم استفاده کرد.Package Manager چیست؟در حین برنامه‌نویسی گاهی لازم است در پروژه، از یک یا چند کتابخانه استفاده کنیم.در گذشته لازم بود حتماً این کتابخانه‌ها را دانلود و به پروژه اضافه می‌کردیم.گاهی وابستگی یک کتابخانه به چند فایل یا کتابخانه‌ی دیگر کارکردن را بسیار پیچیده می‌کرد. زیرا باید تمام آن فایل و کتابخانه‌های وابسته را نیز به پروژه اضافه کنیم!از این رو ابزاری به نام Package Manager ایجاد شد تا اعمالی مثل نصب، بروزرسانی و حذف کتابخانه‌ها را به صورت خودکار انجام دهد.از مزایای استفاده از Package Managerها این است که نیازی نیست به فکر اضافه کردن فایل‌های جانبی و وابسته به کتابخانه‌ی اصلی باشیم. این ابزار قادر است این کتابخانه‌ها را دانلود و نصب نماید.موارد کاربرد npmافزودن پکیج های مختلف به پروژهاجرا کردن پکیج ها بدون دانلود با استفاده از اجرای دستور در (CLI (command lineبروزرسانی آسان پکیج های استفاده شدهاشتراک گذاری کدها با سایر کاربران npmکنترل آسان ورژن پروژهان پی ام دارای یک command line‌ است که برای دانلود و نصب نرم‌افزار استفاده می‌شود.NPM را به چه منظور میتوان استفاده کرد؟افزودن پکیج های مختلف به پروژه شما و ویرایش آنها.افزودن ابزار های مورد نیاز شما و استفاده از آنها به صورت مستقل (بدون نیاز به منبع خارجی).اجرا کردن پکیج ها بدون دانلود با استفاده از دستور npx.اشتراک گذاری کد هایتان با دیگر کاربران NPM.اشتراک گذاری کد هایتان با دیگر برنامه نویسان (میتوانید دسته خاصی از برنامه نویسنان را انتخاب کنید).مدیریت ورژن پروژه آسان و بدون دردسر.بروزرسانی آسان پکیج های استفاده شده در صورتی که نسخه جدیدی از آنها ارائه شود.پیدا کردن برنامه نویسانی که همچون شما در حال کار بر روی پروژه ای مشابه هستند.و چندین امکان دیگر که با ورود به دنیا NPM میتوانید آنهارا بهتر درک کنید …چه پکیج هایی را میتوان در NPM یافت؟NPM به شما دنیایی از پکیج هایی که با زبان برنامه نویسی جاوا اسکریپت نوشته شده را در اختیارتان قرار میدهد.برای مثال پکیج هایی همچون Angular, Vue, JQuery, Bootstrap ,React و … را در اختیار شما قرار میدهد.نصب npmبرای نصب این ابزار محبوب به نصب Node.js نیاز دارید. یعنی  شما باید از طریق آدرس https://nodejs.org/en ابتدا node.js را نصب کنید تا npm همراه آن نصب شود.بعد از نصب node.js‌ برای اطمینان از نصب npm کافیست cmd ویندوز را باز کنید و دستور npm –v را تایپ کنید تا ورژن آن نمایش داده شود.منابع:https://www.w3schools.com/nodejs/nodejs_npm.aspسایت رسمی npmNpm چیست؟امیر خان بزرگامیر خان بزرگMon, 28 Sep 2020 23:01:41 +0330https://virgool.ir/@amikhan1343532/معرفی-روش-bem-برای-نامگذاری-کلاسها-wdxoqata8up3مقدمهمتد BEM که مخفف سرواژگان Element ،Block و Modifier می‌باشد، روشی کامپوننت محور است در زمینه‌ی توسعه‌ی وب.ایده‌ی اصلی این متد، تقسیم رابط کاربری (User Interface) به بلاک‌های مستقل است. این شیوه، عملیات توسعه را آسان و سریع کرده و همچنین امکان استفاده‌ی مجدد کدها را فراهم می‌کند.بلاک (Block)بلاک: جزء (component) مستقلی از صفحه که قابلیت استفاده مجدد را داراست.در سند HTML، بلاک‌ها در ویژگی class نمایش داده می‌شوند.نام بلاک (Block) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا menu. نه این که وضعیت ظاهری و شکل آن را بیان کند، مثلا نباید چیزی شبیه red یا big باشد.در مثال بالا حالت اول صحیح است چرا که از لحاظ معنایی، error وضعیت و حالت را بیان می‌کند در حالی که red-text بیان‌کننده ظاهر و استایل است.یک Block نباید محیط اطرافش را تحت تأثیر قرار دهد. یعنی نباید margin یا position به خصوصی داشته باشد.همچنین وقتی که از روش BEM استفاده می‌کنید، نباید از تگ‌ها و ID عناصر در CSS استفاده کنید، بلکه فقط استفاده از کلاس مجاز است.این موارد، استقلال مورد نیاز Block را برای استفاده‌ی مجدد یا جابجایی آن به هر قسمتی از پروژه، تضمین می‌کند.ویژگی‌ها:۱) تورفتگی (Nesting)بلاک‌ها را می‌توان داخل یکدیگر استفاده کرد. همچنین عمق این تورفتگی‌ها به هر تعدادی می‌تواند باشد.برای مثال بلاک head می‌تواند شامل فهرست (menu)، لوگو (logo)، فرم جستجو (search) و بخش ورود (auth) باشد.در مثال بالا دو بلاک search-form و logo، داخل بلاک header قرار گرفته‌اند.۲) جاگیری دلخواه (Arbitrary placement)بلاک‌ها به علت ماهیت مستقلشان می‌توانند بدون نیاز به تغییر در کدهای CSS یا جاوااسکریپتی که دارند، به هر نقطه‌ای از صفحه جابجا شوند.برای مثال بلاک logo به راحتی می‌تواند با بلاک auth جابجا شود، بدون نیاز به تغییر در کدهای CSS یا جاوااسکرپیت.۳) استفاده‌ی مجدد (Re-use)بلاک‌ها می‌توانند به هر تعداد مورد استفاده‌ی مجدد قرار بگیرند. در واقع ممکن است در یک طرح چند نمونه از یک بلاک استفاده شود.عنصر (Element)عنصر: قسمتی از یک بلاک (block) که به صورت مجزا قابل استفاده نیست.برای مثال آیتم‌های یک منو خارج از فضای اصلی آن استفاده نمی‌شوند بنابراین هر آیتم یک عنصر است.نام عنصر (Element) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا item یا text. نه این که بیانگر شکل ظاهری آن باشد، مثلا نباید چیزی شبیه red یا big باشد.ساختار نام کامل یک عنصر به صورت block-name__element-name است.نام عنصر توسط دو تا underscore ( __ ) از نام بلاک جدا می‌شود.پیراینده (Modifier)پیراینده: ماهیتی است که ظاهر، حالت و رفتار یک بلاک یا عنصر را مشخص می‌کند.برای مثال ظاهر یک بلاک فهرست (menu) می‌تواند توسط یک پیراینده تغییر کند.کدام روش نام‌گذاری بهتر است ؟در متدولوژی BEM، قواعد کلی نام‌گذاری مطرح می‌شود و انتخاب روش نام‌گذاری کاملا به نیازمندی‌های شما و پروژه بستگی دارد. در واقع روشی بهتر است که بهتر پاسخگوی نیازهای شما باشد.مزایای BEMکارایی (Performance)وقتی از BEM استفاده کنید تمام انتخابگرهای CSS به اصطلاح flat خواهند بود. به این معنی که انتخابگرهای نسلی مثل انتخابگر زیر که بار محاساباتی سنگین‌تری دارند، وجود نخواهند داشت. در نتیجه سرعت بارگذاری صفحه به مراتب بالاتر خواهد رفت.خوانایی (Readability)تمام اطلاعات مورد نیاز با بررسی کد HTML به دست خواهد آمد. به سرعت پیراینده‌ها و عناصر متعلق به یک بلاک معلوم می‌شوند. می‌توان فورا به کدهای CSS مربوطه دست پیدا کرد، بدون نیاز به چک کردن وابستگی‌های پشت سر هم.انعطاف‌پذیری (Flexibility)از آنجایی که هر بلاک کاملا مستقل است، می‌توان بدون هیچ گونه نگرانی آن را به هر نقطه‌ای از صفحه انتقال داد یا کپی کرد. همچنین چون در BEM فقط از کلاس استفاده می‌شود هر زمان که نیاز شد می‌توان تگ‌ها را تغییر داد.علاوه‌ی بر این‌ها، BEM به راحتی قابل فهم و یادگیری آن بسیار آسان است.ایراد ‌BEMمهم‌ترین ایرادی که در BEM به وجود می‌آید طولانی و زشت شدن نام کلاس‌هاست که خب برای آنها که زیبایی کد را به قابلیت نگه‌داری آن ترجیح می‌دهند مهم است !روش‌های جایگزینعلاوه بر BEM، متد‌های دیگری نیز در زمینه CSS وجود دارند مثل OOCSS، SMACSS، SUITCSS و Atomic که اگر علاقه‌مند هستید می‌توانید درباره‌ی آنها بیشتر بخوانید.نتیجه گیریشاید در پروژه‌های کوچک، سازماندهی استایل‌ها خیلی مسئله‌ی حائز اهمیتی نباشد اما وقتی که پروژه کمی بزرگ و پیچیده می‌شود، سازماندهی کدها و نحوه‌ی آن به طور کلی در سه چیز خیلی موثر خواهد بود؛ یک در مدت زمانی که صرف نوشتن کد و Refactoring می‌شود، دو میزان حجم کدی که باید نوشته شود و سه زمانی که باید مرورگر صرف بارگذاری کدها کند. اینجاست که وجود روش نام گذاری BEM به شدت احساس می‌شود. البته انتخاب با شماست که در بین متدهای موجود کدامیک را به کار بگیرید یا اینکه حتی متد خودتان را بنویسید.امیر خان بزرگامیر خان بزرگThu, 09 Jul 2020 01:09:36 +0430