توسعه ویلای JavaScript در سال 2018 – یادداشت های مهندس

TL؛ DR: عناصر HTML مانند متغیرهای شیء را در صورت استفاده از document.getElementById () ، document.getElementsByName () یا هر یک از دیگر document.getElement .. () روش ها یا انتخابگرها، کد شما به شدت کنترل فاقد کنترل است و شما آن را اشتباه انجام می دهید.

مقدمه

هنگام استفاده از وانیلا جاوا اسکریپت در سال 2018، باید کنترل کامل داشته باشید هر عنصر DOM در هر زمان، با توانایی به صورت پویا و برنامه نویسی وضعیت هر عنصر را با توجه به منطق کسب و کار شما و الگوریتم های داخلی تغییر می دهد.

جاوا اسکریپت تا حد زیادی تکامل یافته است تا جایی که پرس و جو عناصر HTML به طور مستقیم برای تغییر آنها وضعیت و خواص پیچیدگی غیر ضروری را اضافه می کند و باید اجتناب شود.

به عنوان مثال، id ویژگی به سادگی یک ویژگی میراث است، میراث بی فایده است که باید تمیز شود و قطعا در مدرن نرم افزار

یک ظاهر طراحی تنها باید با استفاده از کلاسها انجام شود، یک روش را انتخاب کنید (به عنوان مثال BEM) و به صورت داینامیک با element.classList object property به عنوان متغیر برنامه شما

مثال

برای یک پروژه یا انتصاب کوچک فکر نمی کنم کسی فکر کند که همه کتابخانه ها (React، Vue et cetera) و حتی اشاره به چارچوب ها (Angular، Ember، …) از نظر در نظر گرفته نشده است، وانیلا جاوا اسکریپت را به عنوان انتخاب واضح ارائه می دهد.

با وجود اینکه برنامه نویسی توسط وانیلی جاوا اسکریپت انجام می شود، هنوز باید از آن استفاده کنید ابزار ساخت مدرن. یکی برای برنامه های کوچک و کتابخانه های سفارشی توصیه می شود Rollupjs، سازنده مدرن، ماژول هوشمند است که به شما اجازه می دهد یک کدک کوچک کوچک را به بخش های گرانول تر و راحت تر تعمیر (ماژول ها و یا حتی قطعات) تقسیم کنید.

19659011] برای اهداف تظاهرات اجازه می دهد یک برنامه بسیار ساده با یک شمارنده ایجاد کنید و مقدار آن را 1 بار در هر ثانیه افزایش دهید. این چیزی است که باید آن را تقریبا شبیه:

 کلاس App {

     سازنده () {
 این.app = document.createElement ('div')؛ 
 this.startCounter ()؛ 
 این [
) 

     شروع کن () {
 const counterContainer = document.createElement ('p')؛ 
 const counter = document.createTextNode ('')؛ 
 let initialCounterValue = 0؛ 

         counterContainer.appendChild (ضد)؛ 
 
 

     render () {{19459023}} {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ 
 document.body.appendChild (this.app)؛ 
} 

} 

 برنامه جدید ()؛ 

counter به عنوان یک عنصر HTML با آنچه که در واقع دارد رفتار میکند یک متغیر شی: ما از لحاظ برنامه نویسی آن را ایجاد می کنیم، در مورد آن می دانیم و با خواندن خواص آن با موفقیت تغییر می کنیم:

همه چیز با این برنامه کوچک جاوا اسکریپت عالی است، به جز مقیاس پذیری. اجازه می دهد شمارنده انتزاعی خود را به عنوان یک ماژول مستقل و گسترش قابلیت های آن با قرار دادن چند روش API سفارشی:

 کلاس Counter {

     سازنده () {
 این.counterValue = 0؛ 
 این. شمارنده = document.createTextNode ('')؛ 
} 

     getElement () {
 if (this.counterContainer) 
 return this.counterContainer؛ 

         this.counterContainer = document.createElement ('p '(19459023) {19659028} شروع (initialValue) {
 if (initialValue) 
 this.counterValue (19459023) این [
 این.counterContainer.appendChild (this.counter)؛ 

         return this.counterContainer؛ 
 (19459023)} 

     stop () {[
) این [تعریف شده است] 
 اگر (this.interval) 
 clearInterval (this.interval)؛ 
} 

} 

 export default Counter؛ 

این کلاس ماژول Counter را با 3 روش API در معرض نمایش می دهد: getElement ( ) – عنصر HTML را بازمیگرداند، در این مورد پاراگراف که حاوی یک گره متنی است، ویژگی ارزش که ما از نظر برنامه نویسی کنترل می کنیم.

start (initialValue) – یک روش عمل که شروع می شود و دوباره شروع می شود

stop () – شمارنده ما متوقف می شود، حفظ نقطه توقف، مقدار شمارنده

این بازنویسی برنامه اصلی ما، با استفاده از ما کلاس جدید Counter:

 import counter از './counter'؛ 

 برنامه کلاس {

     constructor () {
 this.app = document.createElement (' div ')؛ 
 این. counter ()؛ 

    } 

     startCounter () {
 این). 
 this.startCounter ()؛ 
 this.stopAndStartCounterAfter3seconds ()؛ 

     counter.start (1)؛ 
} 

     stopAndStartCounterAfter3seconds () {
 setTimeout (() => {
 this.counter.stop ()؛ 
 this.counter.start (200) ؛ 
}، 3000) 
} 

     render () {
 this.app.appendChild (this.counter.getElement ())؛ 
 document.body.appendChild (this.app)؛ 
} 

} 

 برنامه جدید ()؛ 

به عنوان مثال این برنامه ساده نشان می دهد که لازم نیست که شما ابتدا ساختار سند HTML برای شروع کار بر روی برنامه جاوا اسکریپت خود. تمام عناصر بوجود می آیند و به صورت پویا با توجه به قوانین خود و منطق برنامه کاربردی مورد استفاده قرار می گیرند.

همانطور که می بینید، امکانات این روش بی پایان است و هیچ محدودیتی برای انتزاع ها وجود ندارد. شما حتی می توانید اجزای React مانند خود را گسترش دهید، قابلیت های عنصر HTML را گسترش دهید و به راحتی بتوانید جریان داده های برنامه را هماهنگ کنید.

و در نهایت، این امکان وجود دارد که مفهوم "DOM مجازی" خود را مطرح کنید که در آن حالت و منطق شما نرم افزار به صورت انتخابی و تعیین می کند که مرجع، به گره های DOM شما در حافظه، برای به روز رسانی.