Siz rivojlanayotganingizcha oddiy ilovalar Javascript -da siz veb -sahifada ma'lumotlarni ko'rsatishda ko'p muammolarga duch kelmaysiz.

Ammo massivlar va ob'ektlarda saqlanadigan va muayyan qoidalarga muvofiq sahifada ko'rsatilishi kerak bo'lgan katta hajmdagi ma'lumotlarni qayta ishlashga kelsak, bu erda qiyinchiliklar paydo bo'lishi mumkin.

Masalan, siz sahifada foydalanuvchilarning barcha parametrlari ko'rsatilgan ro'yxatini ko'rsatishingiz kerak (masalan, id, ism. Bu yosh, jins va boshqalar bo'lishi mumkin). Aytaylik, bu ma'lumotlar userData obyekti ichida

FoydalanuvchilarData = [(ism: "Dima", id: 1), (ism: "Katy", id: 2), (ism: "Lena", id: 3)];

Ushbu muammoni hal qilish uchun siz pastadirdan foydalanishingiz mumkin, keyin yechim shunday bo'lishi mumkin:

Uchun (var i = 0; i " + userData.name [i] +""; }

Bu yozish usuli bilan faqat Javascriptda yoza oladigan dasturchi ishlashi mumkinligiga rozi bo'ling. Dizaynerga bunday kodni bering va u u erda hech narsani tushunmaydi.

Ammo, bu shakldagi ma'lumotlar chiqishi ancha ingliroq bo'ladi:

: ((: ism))

Faqat HTML formatlash tilini biladigan odam yozishning bu shaklini allaqachon tushunib yetishi mumkin. Intuitiv ravishda, o'zgaruvchilarning mos keladigan qiymatlari jingalak qavslar bilan almashtirilishini tushunishingiz mumkin.

Yozuvning bunday shakli shablonlardan foydalanilganda mumkin bo'ladi.

Namuna Bu HTML-koddagi ma'lum shablon bo'lib, u ma'lum qoidalarga muvofiq yoziladi. Javascript bunday shovqin bilan ishlashni boshlaganda, shablon kodi sahifadagi HTML yoki DOM daraxti tugunlariga aylantiriladi.

Javascriptdagi andozalar sintaksisi turlicha bo'lishi mumkin. Yagona standart yo'q va hamma narsa qaysi kutubxona yoki plaginni ishlatishingizga bog'liq bo'ladi.

Bu erda menyu yaratadigan shablon:

<% $(items).each(function() { %>
• "><%=this.html%>
<% }); %>

Bu erda jingalak qavslar o'rniga quyidagi yozuv ishlatiladi<% %>

Bu erda mos qiymatlarni almashtiradigan yana bir shablon namunasi CSS uslublari, foydalanuvchi bajargan harakatlarga bog'liq.

Mening tugmacham (<% if (boxShadow) { %>quti-soya:<%= boxShadowInset ? "inset" : "" %> <%= boxShadowOffsetX %> <%= boxShadowOffsetY %> <%= boxShadowBlurRadius %> <%= boxShadowSpreadRadius %> <%= boxShadowColor %>; <% } if (!solid && !transparent) { %>fon: -webkit-gradient (chiziqli, chap yuqori, chap pastki, rang to'xtash (0,05,<%= bgTopColor %>), ranglarni to'xtatish (1,<%= bgBottomColor %>)); fon: chiziqli gradyan (pastga,<%= bgTopColor %> 5%, <%= bgBottomColor %>100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "<%= bgTopColor %>", endColorstr ="<%= bgBottomColor %>", GradientType = 0);<% } %>

Xulosa qilib aytganda, shablonlardan foydalanish bizga qanday foyda keltirishini ko'rib chiqaylik:

Intuitiv kod, hatto dasturchi uchun ham emas;

Qisqartirilgan yozuv;

Ma'lumotlar, javascript kodi va ma'lumotlarni sahifalarga chiqarish bir -biridan ajratilgan, shuning uchun ularni boshqarish ancha oson.

Umuman olganda, veb -sahifalarda Javascript shablonlarini ishlatish yoki qilmaslik sizga bog'liq. Men allaqachon o'zim uchun qaror qabul qilganman va ularni ba'zi ishlanmalarimda qo'llay boshlaganman.

Ba'zida to'g'ridan -to'g'ri sinfni yaratish istalmagan. Keyin biz optimal ishlab chiqarish mexanizmini tanlashi mumkin bo'lgan generativ naqshlarga murojaat qilamiz.

Oddiy zavod

Uyni qurishda o'z eshiklaringizni qilish juda qiyin bo'lar edi, shuning uchun siz ularni do'kondan tayyor holda olasiz.

Oddiy zavod namunasi mijozni bu jarayonning murakkabligi bilan bezovta qilmasdan kerakli namunani ishlab chiqaradi.

Amalga oshirish misoli

Keling, barcha eshiklar uchun yopiq interfeys yarataylik:

/ * Door getWidth () getHeight () * / class WoodenDoor (konstruktor (kenglik, balandlik) (this.width = kenglik this.height = balandlik) getWidth () (bu kenglikni qaytarish) getHeight () (buni qaytarish )

Biz ularni ishlab chiqaradigan zavodni tashkil qilamiz:

Const DoorFactory = (makeDoor: (kenglik, balandlik) => yangi yog'och eshik (kenglik, balandlik))

Hamma narsa, siz ishlashingiz mumkin:

Doimiy eshik = DoorFactory.makeDoor (100, 200) console.log ("Kenglik:", door.getWidth ()) console.log ("Balandlik:", door.getHeight ())

Naqsh ob'ektni yaratish uchun mantiq kerak bo'lganda foydalidir. Ikki nusxadagi kodni alohida Oddiy zavodga ko'chirish mantiqan.

Zavod usuli

Ishga qabul qilish menejeri turli bo'sh ish o'rinlari uchun nomzodlar bilan ishlaydi. U har bir lavozimning nozikliklarini o'rganishdan ko'ra, boshqa mutaxassislarga texnik intervyu beradi.

Ushbu shablon konstruktorni keraksiz kod bilan ifloslantirmasdan, ob'ektning turli xil variantlarini yaratishga imkon beradi.

Amalga oshirish misoli

Gamburgerning o'zi bilan boshlaylik:

Burger klassi (konstruktor (quruvchi) .tomidor || yolg'on))

Va bu erda quruvchi:

BurgerBuilder klassi (konstruktor (o'lcham) (this.size = o'lchami) addPepperoni () (this.pepperoni = haqiqiy qaytarish) addLettuce () (this.lettuce = true return this) addCheeze () (this.cheeze = true return this) addTomato () (this.tomato = true return this) build () (return new Burger (this)))

Voila! Mana bizning burgerimiz:

Const burger = (yangi BurgerBuilder (14)) .addPepperoni () .addLettuce () .addTomato () .build ()

Agar ob'ekt turli xil variantlarda bo'lishi mumkin bo'lsa yoki uni yaratish jarayoni bir necha bosqichlardan iborat bo'lsa, Builder modeli kerak bo'ladi.

Singleton

Mamlakatda yagona prezident bo'lishi kerak, aks holda tartibsizlik bo'ladi.

Bu naqsh ob'ektni o'rab oladi va uning xatti -harakatini dinamik ravishda o'zgartiradi.

Amalga oshirish misoli

Masalan, qahva oling. Tegishli interfeysni amalga oshiradigan eng oddiy qahva:

/ * Qahva interfeysi: getCost () getDescription () * / class SimpleCoffee (getCost () (qaytish 10) getDescription () ("Oddiy qahva" ni qaytarish)))

Biz qahvaga turli xil qo'shimchalar qo'shishni xohlaymiz, buning uchun biz bir nechta dekorativlarni yaratamiz:

MilkCoffee klassi (konstruktor (qahva) (this.coffee = qahva) getCost () (qaytish this.coffee.getCost () + 2) getDescription () (return this.coffee.getDescription () + ", sut")) sinf WhipCoffee (konstruktor (qahva) (bu.qahva = qahva) getCost () (qaytarish this.coffee.getCost () + 5) getDescription () (qaytish this.coffee.getDescription () + ", qamchi")) sinf VanillaCoffee (konstruktor (qahva) (this.coffee = qahva) getCost () (this.coffee.getCost () + 3) getDescription () (this.coffee.getDescription () + ", vanilla")))

Endi siz o'zingiz qahva tayyorlashingiz mumkin:

SomeCoffee someCoffee = new SimpleCoffee () console.log (someCoffee.getCost ()) // 10 console.log (someCoffee.getDescription ()) // Oddiy qahva someCoffee = yangi MilkCoffee (someCoffee) konsol.log (someCoffee.getCost ( )) // 12 console.log (someCoffee.getDescription ()) // Oddiy qahva, sut someCoffee = yangi WhipCoffee (someCoffee) console.log (someCoffee.getCost ()) // 17 console.log (someCoffee.getDescription () ) // Oddiy qahva, sut, krem ​​someCoffee = yangi VanillaCoffee (someCoffee) konsol.log (someCoffee.getCost ()) // 20 console.log (someCoffee.getDescription ()) // Oddiy qahva, sut, qaymoq, vanilya

Fasad

Kompyuterni yoqish uchun tugmani bosish kifoya. Bu juda oddiy, lekin juda ko'p murakkab harakatlar boshlang'ich kompyuterda sodir bo'ladi. Murakkab tizimning oddiy interfeysi - bu Fasad.

Amalga oshirish misoli

Keling, kompyuter sinfini yarataylik:

Sinfli kompyuter (getElectricShock () (console.log ("Ouch!")) MakeSound () (console.log ("Beep beep!")) ShowLoadingScreen () (console.log ("Loading ..")) bam () (console.log ("Foydalanishga tayyor!")) closeEverything () (console.log ("Bup bup buzzzz!"))) sooth () (console.log ("Zzzzz")) pullCurrent () (konsol). jurnali ("Haaah!"))))

va o'zining murakkab funktsiyalari uchun oddiy Fasad:

ComputerFacade klassi (konstruktor (kompyuter) (bu.kompyuter = kompyuter) turnOn () (this.computer.closeEverything () this.computer.pullCurrent () this.computer.sooth ()))

Kompyuter bilan ishlash quyidagicha osonroq:

Doimiy kompyuter = yangi ComputerFacade (yangi Computer ()) computer.turnOn () // Voy! Ovozli signal! Yuklanmoqda .. Foydalanishga tayyor! computer.turnOff () // Bup bup buzzz! Haah! Zzzzz

Montajchi

Shaharlararo poezdlarda issiq ichimliklar katta idishlarda qaynatiladi - hamma birdaniga. Bu elektr energiyasini (yoki gazni) tejaydi.

Ish qidirish saytlarida siz o'zingizni qiziqtirgan ish variantlariga obuna bo'lishingiz mumkin. Tegishli taklif paydo bo'lganda, sayt sizga xabar yuboradi.

Kuzatuvchi namunasi barcha manfaatdor ob'ektlarni sodir bo'lgan o'zgarishlar to'g'risida xabardor qilish imkonini beradi.

Amalga oshirish misoli

Ish qidiruvchilar xabarnomalarni olishni xohlaydilar:

Const JobPost = title = ((title: title)) class JobSeeker (constructor (name) (this._name = name) notify (jobPost)) (console.log (this._name, "yangi xabar haqida xabar berildi:", jobPost.title)))

Va xabarnomalar kengashi quyidagi xabarlarni yuborishi mumkin:

JobBoard klassi (constructor () (this._subscribers =) obuna bo'lish (jobSeeker)

// obunachilar yaratish const jonDoe = new JobSeeker ("John Doe") const janeDoe = new JobSeeker ("Jane Doe") const kaneDoe = new JobSeeker ("Kane Doe") // ishchi taxtasini yaratish // ariza beruvchilarni imzolash const jobBoard = yangi JobBoard () jobBoard.subscribe (jonDoe) jobBoard.subscribe (janeDoe) // obunachilarga yangi ish haqida xabar berishBoard.addJob (JobPost ("Dasturiy injener")) // Jon Doega yangi post haqida xabar berilgan: Dastur muhandisi // Jeyn Doe yangi xabar haqida xabar oldi: dasturiy injener

Mehmon

Chet elga sayohat qilish uchun siz ruxsatnoma (viza) olishingiz kerak. Ammo mamlakatda bo'lganingizda, qo'shimcha ruxsat so'ramasdan, xavfsiz tarzda turli joylarga tashrif buyurishingiz mumkin. Ular haqida bilish kifoya.

Visitor modeli sizga ob'ektlarga manba kodini o'zgartirmasdan qo'shimcha operatsiyalarni qo'shish imkonini beradi.

Amalga oshirish misoli

Keling, hayvonot bog'ini modellashtiraylik har xil turlari hayvonlar:

Maymun sinfi (qichqiriq () (console.log ("Ooh oo aa aa!")) Qabul qiling (operatsiya) (operation.visitMonkey (bu)))) sinf Lion (roar () (console.log ("Roaaar!")) qabul (operatsiya) (operation.visitLion (bu))) sinf Dolphin (gapirish () (console.log ("Tuut tuttu tuutt!")) qabul qilish (operatsiya) (operation.visitDolphin (bu)))

Endi biz ular qanday tovush chiqarayotganini tinglashni xohlaymiz. Buni amalga oshirish uchun tashrif buyuruvchi yarataylik:

Const gapirish = (visitMonkey (maymun) (monkey.shout ()), visitLion (sher) (sher.roar ()), visitDolphin (delfin) (dolphin.speak ()))

Bu faqat har bir sinfga o'tadi va kerakli usulni chaqiradi:

Const maymun = yangi Maymun () const sher = yangi Sher () const delfin = yangi Dolphin () maymun.qabul qiling (gapiring) // Ooh oo aa aa! sher.qabul qiling (gapiring) // Roaaar! delfin.qabul qiling (gapiring) // Tuut tutt tuutt!

Mehmon sizga mavjud ob'ektlarni o'zgartirmaslikka imkon beradi. Uning yordami bilan siz, masalan, bu hayvonlarning barchasiga qo'shimcha usullar yaratmasdan sakrash qobiliyatini qo'shishingiz mumkin.

Turg'un sakrash = (visitMonkey (maymun)) (console.log ("20 fut balandlikka sakradi! Daraxtga!")), VisitLion (sher) (console.log ("7 fut sakrab! Erga qayt!")) , tashrif buyuring Dolfin (delfin) (console.log ("Suv ustida biroz yurib, g'oyib bo'ldi")))

Maymun.qabul qiling (gapiring) // Ooh oo aa aa! maymun.qabul (sakrash) // 20 metr balandlikka sakradi! daraxtga! sher.qabul qiling (gapiring) // Roaaar! sher.qabul (sakrash) // 7 futga sakradi! Qayta erga! delfin.qabul qiling (gapiring) // Tuut tutt tuutt! delfin.qabul qilish (sakrash) // Suv ustida biroz yurib g'oyib bo'ldi

Strategiya

Ma'lumotlar bazasini buyurtma qilish uchun siz qabariq tartiblash algoritmidan foydalanasiz. U kichik hajmlar bilan yaxshi ishlaydi, lekin katta hajm bilan sekinlashadi. Quicksort qarama -qarshi muammoga ega. Keyin siz to'plamning hajmiga qarab algoritmni o'zgartirishga qaror qilasiz. Bu sizning strategiyangiz.

Strategiya shabloni vaziyatga qarab ishlatilgan algoritmni almashtirishga imkon beradi.

Amalga oshirish misoli

Birinchi darajali funktsiyalar JavaScript-da Strategiyani amalga oshirishga yordam beradi.

Const bubbleSort = ma'lumotlar bazasi => (console.log ("Pufakchali tartib bilan saralash") // ... // ... ma'lumotlar bazasini qaytarish) const quickSort = ma'lumotlar bazasi => (console.log ("Tez saralash bilan saralash") / / ... // ... ma'lumotlar bazasini qaytarish)

Va bu har qanday strategiyadan foydalanadigan mijoz:

Const tartiblashtiruvchi = ma'lumotlar bazasi => (agar (ma'lumotlar.length> 5)

Endi biz massivlarni saralashimiz mumkin:

Const longDataSet = const shortDataSet = const saralash1 = saralash (longDataSet) const saralash2 = saralash (shortDataSet) saralash1 (longDataSet) // Tez saralash bilan saralash2 (shortDataSet) // Ko'pikli tartib bilan tartiblash

Shtat

Siz Paint -da rasm chizasiz. Sizning tanlovingizga qarab, cho'tka o'z holatini o'zgartiradi: u qizil, ko'k yoki boshqa rangga bo'yaladi.

Shtat namunasi holat o'zgarganda sinfning xatti -harakatlarini o'zgartirishga imkon beradi.

Amalga oshirish misoli

Yarataylik matn muharriri, siz matn holatini o'zgartirishingiz mumkin - qalin, kursiv va boshqalar.

Bu aylantirish funktsiyalari:

Const yuqoriCase = inputString => inputString.toUpperCase () const lowCase = inputString => inputString.toLowerCase () const defaultTransform = inputString => inputString

Va bu erda muharrirning o'zi:

Text Text Editor (konstruktor (aylantirish) (this._transform = transform) setTransform (transform) (this._transform = transform) turi (so'zlar)

Siz ishlashingiz mumkin:

Const muharriri = yangi TextEditor (defaultTransform) editor.type ("Birinchi qator") editor.setTransform (yuqori korpus) editor.type ("Ikkinchi qator") editor.type ("Uchinchi qator") editor.setTransform (pastkiCase) editor.type ("To'rtinchi qator") editor.type ("Beshinchi qator") // Birinchi qator // IKKINCHI LINE // Uchinchi qator // to'rtinchi qator // beshinchi qator

Shablon usuli

Siz uyni ma'lum bir rejaga binoan qurasiz: avval poydevor, keyin devorlar, shundan keyingina tom. Ushbu qadamlarning tartibini o'zgartirish mumkin emas, lekin ularning bajarilishi boshqacha bo'lishi mumkin.

Andoza usuli algoritmning "skeleti" ni belgilaydi, lekin bosqichlarni bajarilishini bolalar sinflariga topshiradi.

Amalga oshirish misoli

Keling, dasturni sinovdan o'tkazish, yaratish va joylashtirish vositasini yarataylik.

Asosiy sinf yig'ish algoritmining skeletini belgilaydi:

Class Builder (// andoza usuli build () (this.test () this.lint () this.assemble () this.deploy ()))

Va bolalar sinflari har bir qadamning aniq bajarilishi:

AndroidBuilder klassi Builder (test () ("console.log (" Android sinovlari "))) lint () (console.log (" Android kodini linting ")) assemble () (console.log (" Android tuzilishini yig'ish ") ni kengaytiradi. )) tarqatish () (console.log ("Android tuzilishini serverga tarqatish")))) IosBuilder klassi Builder (test () (console.log ("IOS testlarini ishga tushirish"))) lint () (console.log ("Linting") kengaytiradi. ios kodi ")) assemble () (console.log (" iOS tuzilishini yig'ish "))) tarqatish () (console.log (" Ios tuzilishini serverga joylashtirish ")))

Keling, loyihani yig'amiz:

Const androidBuilder = new AndroidBuilder () androidBuilder.build () // Android testlarini ishga tushirish // Android kodini chop etish // Android tuzilishini yig'ish // Android tuzilishini serverga o'rnatish iosBuilder = new IosBuilder () iosBuilder.build () // Ios testlarini ishga tushirish // iOS kodini yozish // iOS tuzilmasini yig'ish // IOS tuzilishini serverga joylashtirish

• Tarjima

Tarjimon eslatmasi: JavaScript -da merosxo'rlik mavzusi yangi boshlanuvchilar uchun eng qiyin mavzulardan biridir. Class kalit so'ziga yangi sintaksis qo'shilishi bilan, merosni tushunish osonlashmadi, garchi tubdan yangi narsa ko'rinmasa ham. Ushbu maqola JavaScript -da prototipli merosni amalga oshirishning nuanslariga taalluqli emas, shuning uchun agar o'quvchining savollari bo'lsa, men quyidagi maqolalarni o'qishni maslahat beraman: JavaScript asoslari va noto'g'ri tushunchalari va JavaScript -da OOPni tushunish [1 -qism].

Tarjima bilan bog'liq barcha sharhlar uchun shaxsiy murojaat qiling.

JavaScript juda kuchli til. Shu qadar kuchliki, ob'ektlarni loyihalash va yaratishning turli xil usullari birgalikda mavjud. Har bir usul o'zining ijobiy va salbiy tomonlariga ega va men yangi boshlanuvchilarga buni tushunishga yordam berishni xohlayman. Bu mening oldingi xabarimning davomi, JavaScript tasnifini to'xtatish. Menga misollar uchun ko'plab savollar va sharhlar keldi va shu maqsadda men ushbu maqolani yozishga qaror qildim.

JavaScript prototipli merosdan foydalanadi

Bu shuni anglatadiki, JavaScript -da ob'ektlar boshqa ob'ektlardan meros bo'lib o'tadi. () Jingalak qavs yordamida yaratilgan JavaScript -dagi oddiy ob'ektlar faqat bitta prototipga ega: Ob'ekt.prototip. Ob'ekt.prototip, o'z navbatida, shuningdek, ob'ekt va barcha xususiyatlar va usullar Ob'ekt.prototip barcha qulayliklar uchun mavjud.

Kvadrat qavs bilan yaratilgan massivlar bir nechta prototiplarga ega, shu jumladan Ob'ekt.prototip va Array.prototip... Bu shuni anglatadiki, barcha xususiyatlar va usullar Ob'ekt.prototip va Array.prototip barcha qatorlar uchun mavjud. Xuddi shu nomdagi xususiyatlar va usullar .valueOf va .ToString, eng yaqin prototipdan chaqiriladi, bu holda Array.prototip.

Prototip ta'riflari va ob'ekt yaratish

1 -usul: Andoza konstruktori

JavaScript -da konstruktorlar deb nomlangan maxsus turdagi funktsiyalar mavjud bo'lib, ular boshqa tillardagi konstruktorlar kabi ishlaydi. Konstruktor vazifalari faqat kalit so'z yordamida chaqiriladi yangi va yaratilgan ob'ektni kalit so'z orqali konstruktor funktsiyasi kontekstiga bog'lang bu... Oddiy konstruktor shunday ko'rinishi mumkin:
funktsiya Animal (type) (this.type = type;) Animal.isAnimal = function (obj, type) (if (! Animal.prototype.isPrototypeOf (obj)) (false;) return type? obj.type === turi: haqiqiy;); Dog funktsiyasi (ism, nasl) (Animal.call (this, "dog"); this.name = name; this.breed = zot;) Object.setPrototypeOf (Dog.prototype, Animal.prototype); Dog.prototype.bark = function () (console.log ("ruff, ruff");); Dog.prototype.print = function () (console.log ("It" + this.name + " - bu" + this.breed);); Dog.isDog = funktsiyasi (obj) (qaytish Animal.isAnimal (obj, "it"););
Ushbu konstruktordan foydalanish boshqa tillarda ob'ekt yaratish bilan bir xil ko'rinadi:
var sparkie = yangi it ("Sparkie", "Border Collie"); sparkie.name; // "uchqun" sparkie.breed; // "Border Collie" sparkie.bark (); // konsol: "ruff, ruff" sparkie.print (); // konsol: "Sparkie iti - chegarachi kolli" Dog.isDog (sparkie); // rost
qobiq va chop etish konstruktor yordamida yaratilgan barcha ob'ektlarga qo'llaniladigan prototip usullari It... Xususiyatlari ism va zot konstruktorda ishga tushiriladi. Oddiy amaliyot - barcha usullar prototipda aniqlanadi va xususiyatlar konstruktor tomonidan ishga tushiriladi.

2 -usul: ES2015 (ES6) da sinfni aniqlash

Kalit so'z sinf boshidanoq JavaScript -da saqlangan va endi uni ishlatish vaqti keldi. JavaScript -da sinf ta'riflari boshqa tillarga o'xshash.
class Animal (constructor (type) (this.type = type;) static isAnimal (obj, type) (if (! Animal.prototype.isPrototypeOf (obj)) (return false;) return type? obj.type === type : rost;)) it iti hayvonlarni kengaytiradi (konstruktor (ism, nasl) (super ("it"); this.name = ism; this.breed = zot;) qobig'i () (console.log ("ruff, ruff") );) print () (console.log ("It" + this.name + "a" + this.breed);) statik isDog (obj) (Qaytish Animal.isAnimal (obj, "it");) )
Ko'pchilik bu sintaksisni qulay deb biladi, chunki u bitta blokda statik va prototip usullarining konstruktori va deklaratsiyasini birlashtiradi. Foydalanish avvalgi usulda bo'lgani kabi bir xil.
var sparkie = yangi it ("Sparkie", "Border Collie");

3 -usul: Prototipning aniq deklaratsiyasi, Object.create, zavod usuli

Bu usul shuni ko'rsatadiki, aslida kalit so'z bilan yangi sintaksis sinf prototipik merosdan foydalanadi. Shuningdek, bu usul operatordan foydalanmasdan yangi ob'ekt yaratish imkonini beradi yangi.
var Animal = (create (type) (var animal = Object.create (Animal.prototype); animal.type = type; return hayvon;), isAnimal (obj, type) (if (! Animal.prototype.isPrototypeOf (obj) ) (false qaytish;) qaytish turi? obj.type === turi: rost;), prototipi: ()); var Dog = (yaratish (ism, nasl) (var proto = Object.assign (Animal.create ("dog"), Dog.prototype); var dog = Object.create (proto); dog.name = name; it) nasl = nasl; itni qaytarish;), isDog (obj) (qaytish Animal.isAnimal (obj, "it");), prototipi: (qobig'i () (console.log ("ruff, ruff");), chop etish ( ) (console.log ("It" + this.name + " - bu" + this.bred);)));
Bu sintaksis qulay, chunki prototip aniq e'lon qilingan. Prototipda nima aniqlangani va ob'ektning o'zida nima aniqligi aniq. Usul Ob'ekt yaratish qulay, chunki u sizga ko'rsatilgan prototipdan ob'ekt yaratish imkonini beradi. Bilan tekshirish .isPrototypeOf hali ham ikkala holatda ham ishlaydi. Foydalanish har xil, lekin eng yuqori darajada emas:
var sparkie = Dog.create ("Sparkie", "Border Collie"); sparkie.name; // "uchqun" sparkie.breed; // "Border Collie" sparkie.bark (); // konsol: "ruff, ruff" sparkie.print (); // konsol: "Sparkie iti - chegarachi kolli" Dog.isDog (sparkie); // rost

4-usul: Object.create, yuqori darajadagi zavod, qoldirilgan prototip

Bu usul 3 -usulda kichik o'zgarish bo'lib, bu erda sinf zavod usuli bo'lsa, sinfning o'zi zavoddir. Konstruktor misoliga o'xshaydi (1 -usul), lekin zavod usulidan foydalanadi va Ob'ekt yaratish.
Animal.isAnimal = function (obj, type) (agar (! Animal.prototype.isPrototypeOf (obj)) ) (false qaytish;) qaytish turi? obj.type === turi: rost;); Animal.prototype = (); it (ism, nasl) funktsiyasi (var proto = Object.assign (Hayvon ("it"), Dog.prototype); var dog = Object.create (proto); dog.name = ism; dog.breed = zot; qaytish it;) Dog.isDog = funktsiyasi (obj) (qaytish Animal.isAnimal (obj, "it");); Dog.prototype = (bark () (console.log ("ruff, ruff");), print () (console.log ("It" + this.name + " - bu" + this.breed);) );
Bu usul birinchi usulga o'xshashligi bilan qiziq, lekin kalit so'zni talab qilmaydi yangi va operator bilan ishlaydi misolOf... Foydalanish birinchi usulda bo'lgani kabi, lekin kalit so'zni ishlatmasdan yangi:
var sparkie = It ("Sparkie", "Border Collie"); sparkie.name; // "uchqun" sparkie.breed; // "Border Collie" sparkie.bark (); // konsol: "ruff, ruff" sparkie.print (); // konsol: "Sparkie iti - chegarachi kolli" Dog.isDog (sparkie); // rost

Taqqoslash

1 -usul va 4 -usul

4 -usul o'rniga 1 -usuldan foydalanish uchun juda kam sabablar bor. 1 -usul ham kalit so'zni ishlatishni talab qiladi yangi yoki konstruktorga quyidagi chekni qo'shish:
if (! (bu Foo misoli)) (yangi Foo (a, b, c) ni qaytaring;)
Bunday holda, undan foydalanish osonroq bo'ladi Ob'ekt yaratish zavod usuli bilan. Bundan tashqari, siz funktsiyalardan foydalana olmaysiz # Qo'ng'iroq funktsiyasi yoki Funktsiya # amal qiladi konstruktor funktsiyalari bilan, chunki ular kalit so'z kontekstini bekor qiladi bu... Yuqoridagi tekshiruv bu muammoni ham hal qilishi mumkin, lekin agar siz noma'lum argumentlar bilan ishlashingiz kerak bo'lsa, siz zavod usulidan foydalanishingiz kerak.

2 -usul va 3 -usul

Konstruktorlar va operatorlar haqida bir xil fikr yangi yuqorida aytib o'tilganlar bu holatda ham qo'llaniladi. Bilan tekshirish misol agar yangi sintaksis ishlatilsa sinf operatordan foydalanmasdan yangi yoki ishlatiladi # Qo'ng'iroq funktsiyasi yoki Funktsiya # amal qiladi.

Mening fikrim

Dasturchi o'z kodida aniqlikka intilishi kerak. 3 -usulning sintaksisi aslida nima bo'layotgani haqida juda aniq. Bundan tashqari, bir nechta merosdan foydalanish va stekli merosdan foydalanishni osonlashtiradi. Operatordan beri yangi bilan mos kelmasligi tufayli ochiqlik / yaqinlik tamoyilini buzadi qo'llash yoki qo'ng'iroq, undan qochish kerak. Kalit so'z sinf sinf tizim niqobi ortida JavaScript merosining prototipik xususiyatini yashiradi.

"Oddiylikdan ko'ra yaxshiroq" va mashg'ulotlardan foydalanish, chunki u "murakkab" deb hisoblansa, shunchaki texnik bosh yuvish kerak emas.

Foydalanish Ob'ekt yaratish ligamentni ishlatishdan ko'ra ifodali va ravshanroq yangi va bu... Bundan tashqari, prototip zavod kontekstidan tashqarida bo'lishi mumkin bo'lgan ob'ektda saqlanadi, shuning uchun usullarni qo'shish orqali o'zgartirish va kengaytirish osonroq bo'ladi. Xuddi ES6 sinflari kabi.

Kalit so'z sinf shubhasiz, JavaScript -dagi eng zararli xususiyat. Men standartni yozishda ishtirok etgan zukko va mehnatkash odamlarni juda hurmat qilaman, lekin hatto zo'r odamlar ham ba'zida noto'g'ri ish qilishadi. - Erik Elliot

Tilning tabiatiga zid, keraksiz va, ehtimol, zararli narsa qo'shish o'ylamas va xato.
Agar siz foydalanishni tanlasangiz sinf, Men sizning kodingiz bilan hech qachon ishlamasligimni chin dildan umid qilaman. Menimcha, ishlab chiquvchilar konstruktorlardan foydalanishdan qochishlari kerak. sinf va yangi va tilning paradigmasi va arxitekturasiga tabiiyroq bo'lgan usullardan foydalaning.

Lug'at

Object.assign (a, b) ob'ektning barcha sanab o'tiladigan xususiyatlarini nusxa ko'chiradi b ob'ektga a va keyin ob'ektni qaytaradi a
Object.create (proto) ko'rsatilgan prototipdan yangi ob'ekt yaratadi proto
Object.setPrototypeOf (obj, proto) ichki xususiyatlarini o'zgartiradi [] ob'ekt obj yoqilgan proto

Teglar: teglar qo'shish

WordPress shablonlarni hamma joyda ishlatadi va Javascript ham bundan mustasno emas. Ushbu xabarda biz WordPress-ning HTML shablonlarini yaratish qobiliyati haqida gaplashamiz, uni keyinchalik JS-da ishlatish mumkin. WordPress -dagi boshqa narsalar kabi, bunday shablonlarni yaratish va ulardan foydalanish juda oson.

Javascript -da shablonlarni yaratishning ko'p usullari bor, hatto ular uchun "Mo'ylov" deb nomlangan alohida spetsifikatsiya ham ixtiro qilingan. U ko'plab tillarda, shu jumladan Javascriptda ham amalga oshiriladi. Masalan, Handlebars kutubxonasi ushbu spetsifikatsiyadan foydalanadi va hatto uni biroz kengaytiradi. Yoki mashhur "Pastki chiziq" mini-kutubxonasi.

3.5 versiyasidan beri WordPress allaqachon JS uchun qulay shablon dvigateliga ega. Masalan, u media yuklagich uchun bloklar yaratishda boshqaruv panelida ishlatiladi. Yuqorida aytib o'tilgan "Pastki chiziq" kutubxonasiga asoslangan, sintaksis "Mo'ylov" spetsifikatsiyasiga ko'proq mos kelishi uchun biroz qayta ishlangan.

WordPress -da shablonlarni yaratish uchun wp.template usuli mavjud.

wp.template (id)

HTML koddan shablon ob'ektini yaratadi. JS-da foydalanish uchun tayyor HTML kodini olish uchun shablonni to'ldirish uchun yaratilgan ob'ektga ma'lumotlarni uzatish kerak.

Qaytadi

Funktsiya. Andoza interpolatsiyasi uchun ma'lumotlarni uzatish kerak bo'lgan funktsiya.

Foydalanish

var shablon = wp.template (id); var HTML = shablon (ma'lumotlar); id (chiziq)

Andoza HTML kodini o'z ichiga olgan HTML elementining identifikatori. HTML elementi bu erda tmpl- prefiksi bilan ko'rsatilgan id atributiga ega bo'lishi kerak.

Masalan, agar siz bu erda foo ni belgilasangiz, HTML elementida id = "tmpl-foo" bo'lishi kerak.

Ma'lumotlar (ob'ekt) Andoza to'ldirish uchun ishlatiladigan JS ma'lumotlar ob'ekti. Masalan: (matn: "Salom").

Shablonni to'ldirish (interpolatsiya)

• ((((data.unescaped)))) - tozalanmagan ma'lumotlar.
• ((data.caped)) - tozalangan ma'lumotlar.
• <# логика #>- js (eval) jarayoni.

Ma'lumotlar prefiksi.

andozadagi ma'lumotlar xom ma'lumotlar ob'ektidir. Bu shablonda ishlatilishi kerak bo'lgan ma'lumotlar kaliti.

Wp_send_json_success () va wp_send_json_error () funktsiyalari tomonidan qaytarilgan ma'lumotlar tuzilishiga mos kelish uchun wp.template barcha qabul qilingan ma'lumotlarni ma'lumotlar o'zgaruvchisiga joylashtiradi. Shuning uchun, andozadagi har bir parametrdan oldin ma'lumotlarni ko'rsatish kerak. aks holda biz xato qilamiz: (xususiyat) aniqlanmagan.

Shablon namunasi

Shablonni yaratish va yaratish

Shablon yaratish

Shablonni DOM daraxtida paydo bo'lishining oldini olish uchun uni = "text / html" turini ko'rsatuvchi skript tegida yaratish odatiy holdir.

Id atributi tmpl- bilan boshlanishi kerak, bu prefiksdan keyingi hamma narsa wp.template ("my-template") funktsiyasida ishlatiladi.

Skript tegida shablon yaratish - bu yaratish uchun juda yaxshi ishlaydigan hack html elementi a, bu brauzer tomonidan hech qanday tarzda ishlatilmaydi. Brauzerga tushunarsiz tur ko'rsatilsa, u html tegiga e'tibor bermaydi va bu bizga kerak.

Andoza boshqa HTML elementlarida ham yaratilishi mumkin (masalan