بررسی دام (DOM) در محیط های

JS, jQuery, AngularJS, ReactJS

دام (DOM) چیست و در محیط های مختلف چگونه مورد استفاده قرار میگیرد؟

دام (DOM) یک مدل ارائه شیء میباشد (در HTML document)، شیء هایی که دارای هویتی خاص و کارایی های متفاوتی میباشند، که بر اساس نیاز، توسط DOM مورد اشاره قرار میگیرند و کارهایی که مد نظر برنامه نویس است، بر آن اشیاء اعمال میگردد.

نکته مهم در ارتباط با DOM این است که دام یک data structure نیست. میدانیم که data structure ها مانند آرایه ها، فایل ها و رکورد ها...، برای سازماندهی و ذخیره اطلاعات مورد استفاده قرار میگیرند. اما در DOM همانطور که پیشتر اعلام گردید، چیزی ذخیره نمیگردد و DOM تنها مدل ارائه اشیاء میباشد. از DOM میتوان در محیط های مختلفی همچون JavaScript، jQuery، AngularJS، و React و ... بسته به نیازهای خود، استفاده کرد.

برای بررسی دام در محیط های ذکر شده، در زیر به شرح خلاصه ای از این محیط ها میپردازم

ما در سند HTML (ترجمه واژه HTML document) خود میتوانیم تقریبا هر کاری را که مورد نیازمان است، با JavaScript انجام دهیم. دیگر محیط های ذکر شده، زمانی کاربردی میگردند که ما بخواهیم همان کارهایی را که با JavaScript میتوان به صورت به اصطلاح، کلاسیک، انجام داد را به صورت هوشمندانه تر انجام دهیم. اگر خواهان نوشتن دستورات کمتری در سند HTML خود هستیم، میتوانیم وارد دنیای jQuery شویم.

حال اگر بخواهیم پا را فراتر قرار دهیم و از Model View Controller (که یک الگوی طراحی میباشد که برنامه[application] را به 3 قسمت با هم مرتبط [interconnected] تقسیم مینماید; 3 قسمت تقسیم شده عبارتند از مدل [model] و نما [view] و کنترل کننده [controller] ) در سند HTML خود استفاده کنیم تا از مزایای زیادی از جمله استفاده مجدد از کد بهره مند گردیم و یا اینکه قادر باشیم تا افراد مختلف تیم بتوانند روی پروژه به صورت همزمان کار کنند (توسعه دهند[develop])، آنجاست که باید از AngularJS (به غیر از Angular گزینه های فراوان دیگری نیز وجود دارد، الزامی در استفاده از Angular نمیباشد) در پروژه HTML خود استفاده کنیم.

پس چه موقع باید از React استفاده کرد؟ هرگاه در پروژه خود نیاز به یک محیطی داشتیم که بیشتر بر جنبه های بصری [visual components] فعالیت دارد و نیاز دارد در کمترین زمان ممکن، اجزاء (components) بصری HTML document بروزرسانی گردد، آنگاه هنگام استفاده از React میباشد. چرا که React تمرکز خود را بر اجزاء بصری [visual components] گذاشته است.

مطالب ذکر گردیده در بالا، مقدمه ای بود بر کلیپی که در زیر قرار داده شده. در کلیپ زیر بهتر میتوان به نقش DOM در محیط های ذکر گردیده، پی برد.

جهت آشنایی و اطلاعات بیشتر میتوانید کلیپ زیر را مشاهده نمایید.

رفع ابهام

متن پیش رو را میتوان به عنوان پی نوشت تلقی کرد و در ادامه مطلبی که در بالا بیان گشته، برای افرادی که دچار ابهام گشته اند، می باشد.

توضیحی مختصر در ارتباط با قسمت پی نوشت:

بعد از انتشار نوشته بالا در تاریخ 1397/8/1 و فرستادن لینک نوشته برای استاد ابریشمی، دیروز مورخ 1397/8/20 استاد در گروه تلگرامی اعلام نمودند تا بچه های گروه، لینک نوشته را در گروه قرار دهند. من هم همچون دیگر دوستان لینک نوشته را در گروه فرستادم. بعد از مدتی نه چندان زیاد، در گروه مورد mention قرار گرفتم. با واکنش منفی 3 نفر از افراد گروه مواجه گشتم. که 1 نفر نوشته را نقد کرده بود با کلمات "are you sure about this" و یک نفر دیگر با کلمات "چرته و پرته|:" و نفر سوم هم با کلمات "دادچ قرصا رو بخور و پست بگذار ویرگول lol". حتی یکی از این دوستان ارزیابی کرده بودند که 80 درصد مطالبی که در بالا آورده شده است، غلط است؛ که من خیلی مشتاق هستم تا نحوه ارزیابی نوشته و رسیدن به عدد 80 درصد را از این دوست عزیز فرا بگیرم تا در نوشته های بعدی قادر باشم تا درصد غلط بودن نوشته را محاسبه کرده و عدد حاصله را به حداقل برسانم. فارغ از نحوه بازخوردی که من از عزیزان در گروه گرفتم (منظور رعایت ادب و احترام میباشد)، بنده جویای علت ناپسند بودن نوشته گردیدم و متوجه شدم که برای دوستان ابهام به وجود آمده. لذا تصمیم گرفتم تا یکسری توضیحاتی رو در زیر قرار بدم و همچنین بخشی از قسمت های بالا(قبل لینک ویدیو) را با واژگان دیگری جایگزین کنم.

موضوع ارائه اینجانب عبارت بود از "بررسی DOM در محیط های JS, jQuery, AngularJS, React". با توجه به موضوع انتخاب شده که توسط استاد ابریشمی به بنده واگذار گشته بود، اینجانب تمرکز خود را بر روی DOM و نه 4 محیط ذکر شده، گزاشتم و ارائه تهیه شده را در کلاس به نمایش در خدمت دوستان در آوردم.

در مطالبی که در این نوشته قید گردیده، دوستان در قسمت React از نوشته های من استنباط کرده اند که React داره کار CSS رو انجام میده. در جواب باید بگم که دوستان عزیز، React با visual components سر و کار داره و در مدل MVC در بخش v یا همان view فعالیت میکنه. در صورتی که CSS سروکارش با styling هستش و styling که CSS انجام میده کجا و virtual DOM که React انجام میده کجا!!!!

و خواهش میکنم هنگام مطالعه نوشته، به عنوان نوشته دقت بفرمایید که در مورد چه مضوعی داره مطالبی بیان میشه. بحث اینکه React, AngularJS, jQuery, JS چی هستند با بحث اینکه DOM چگونه در این محیط ها مورد استفاده قرار میگیره، کاملا مقوله های جدا از هم هستند. بنده فقط به صورت خلاصه بیان کردم که این 4 محیط چی هستند، تا بیننده کلیپ متوجه باشه که کلیپی که قراره مشاهده کنه، در ارتباط با چه موضوعی هست! وگرنه توضیح هر کدام از این محیط ها به طور مفصل، مسلما به توضیح بیشتر و دانش عمیق تری احتیاج داره. مطالب بیان گشته در این نوشته کاملا در سطح مقدماتی بوده و فقط برای آشنایی افراد با title قید گشته، میباشد.

و در آخر باید قید کنم که ممنونم از 3 هم کلاسی عزیزی که من رو برای رفع ابهام موجود در این نوشته، تحریک نمودند. بنده انتقاد را با روی باز میپذیرم؛ ولی، فکر نمیکنم که بی ادبی و بی احترامی برای هیچ انسانی قابل قبول باشه!