Kaynak kodunu incelemek, şüphesiz ki geliştirici kariyerinizin gidişatını değiştirebilir. Sadece bir seviyenin altına bakmak bile sizi çoğu ortalama geliştiriciden ayırabilir.  Ustalığa giden ilk adım!  İşte kişisel bir hikaye: Bir AI/ML girişimindeki mevcut işimde, ekip Neo4j verilerini sunucudan görselleştirme için ön uca nasıl aktaracağını çözemedi ve 12 saat içinde bir sunumları vardı. Serbest çalışan olarak işe alındım ve paniği açıkça görebiliyordunuz. Sorun, Neo4j tarafından döndürülen verilerin görselleştirme aracı   tarafından beklenen doğru biçimde olmamasıydı. neo4jd3  Şunu hayal edin: Neo4jd3 bir üçgen bekliyor ve Neo4j bir kare döndürüyor. İşte tam burada uyumsuz bir uyumsuzluk var!   Yakında   JavaScript ve Neo4j ile grafik veri bilimi yapabiliriz! Bu görüntü nostaljik. Mastered'da  Sadece iki seçenek vardı: Neo4j'in tüm arka ucunu yeniden yapmak veya Neo4jd3'ün kaynak kodunu incelemek, beklenen formatı bulmak ve ardından kareyi üçgene dönüştüren bir adaptör oluşturmak.     neo4jd3 <- adapter <- Neo4j  Beynim kaynak kodunu okumaya başladı ve bir adaptör oluşturdum:   . neo4jd3-ts   import createNeoChart, { NeoDatatoChartData } from "neo4jd3-ts";  Bağdaştırıcı   ve diğer her şey tarih oldu. Bu dersi ciddiye aldım ve her fırsatta kullandığım her araçta bir seviye daha aşağı iniyorum. O kadar yaygınlaştı ki bazen belgeleri bile okumuyorum. NeoDatatoChartData  Bu yaklaşım kariyerimi muazzam bir şekilde değiştirdi. Yaptığım her şey sihir gibi görünüyor. Birkaç ay içinde, kaynağa doğru bir adım attığım için kritik sunucu geçişleri ve projeleri yönetiyordum.  Bu dizi tam da bununla ilgili: API'ye razı olmamak, bunun ötesine geçmek, bu araçları yeniden yaratmayı öğrenmek. Yapay zeka çılgınlığının olduğu bu dünyada ortalama olmaktan çıkmak, bir geliştiriciyi ortalamanın ötesinde değerli kılan şeydir!  Bu seriyle ilgili planım, popüler JavaScript kütüphanelerini ve araçlarını inceleyerek bunların nasıl çalıştığını ve bunlardan ne gibi kalıplar öğrenebileceğimizi tek tek anlamak.  Ben çoğunlukla arka uç mühendisi olduğumdan (evet, tam yığın, ama zamanımın %90'ını arka uçla ilgilenerek geçiriyorum), başlamak için Express.js'den daha iyi bir araç yok.  Benim varsayımım, programlama deneyiminiz ve programlamanın temellerine dair iyi bir kavrayışınız olduğudur! İleri seviye başlangıç seviyesinde sınıflandırılabilirsiniz.  Temelleri öğretirken kaynak kodunu öğrenmeye/öğretmeye çalışmak gerçekten zor ve sıkıcı olacak. Seriye katılabilirsiniz, ancak zor olacağını bekleyin. Her şeyi kapsayamam, ancak elimden geldiğince deneyeceğim.  Bu makalenin Express öncesi olmasının bir nedeni var: Express'in bağımlı olduğu çok küçük bir kütüphane olan   ele almaya karar verdim. Bunu yazdığım sırada bu kütüphane 27.181.495 kez indirilmişti ve yalnızca 26 satır kod içeriyordu. merge-descriptors'ı  Bu bize bir yapı kurma ve JavaScript modülleri oluşturmada kritik öneme sahip olan nesne temellerini tanıtma fırsatı verecek.  Kurmak  Devam etmeden önce, Express   ve   sisteminizde olduğundan emin olun. Bu şekilde, onu bir IDE'de açabilir ve nerede aradığımıza dair satır numaralarıyla size rehberlik edebilirim. kaynak kodunun birleştirme tanımlayıcılarının  Express güçlü bir kütüphanedir. Başka bir araca geçmeden önce birkaç makalede elimizden geldiğince çok şey ele alacağız.  IDE'nizde Express kaynak kodunuzu tercihen satır numaralarıyla açın,   klasörüne gidin ve giriş dosyası olan   dosyasını açın. lib express.js  17. satırda ilk kütüphanemiz var:   var mixin = require('merge-descriptors');  Kullanım 42. ve 43. satırlardadır:   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Burada neler olduğunu keşfetmeden önce, bir adım geri çekilip veri yapısının ötesinde JavaScript'teki nesneler hakkında konuşmamız gerekiyor. Kompozisyon, kalıtım, prototipler ve karışımları tartışacağız—bu makalenin başlığı.  JavaScript Nesnesi  Express kaynak kodunu kapatın ve bu önemli nesne temellerini öğrenirken takip edebileceğimiz yeni bir klasör oluşturun.  Bir nesne   özünde yer alan veri ve davranışın bir kapsüllenmesidir. İlginç bilgi: JavaScript'teki hemen hemen her şey bir nesnedir. , Nesne Yönelimli Programlamanın (OOP)   const person = { // data name: "Jane", age: 0, // behavior grow(){ this.age += 1; } };    nesnesindeki açılış ve kapanış parantezleri arasındaki her şeye   denir. Bu önemlidir. person nesnenin kendi özellikleri  Kişinin kendi özellikleri, doğrudan doğruya nesne üzerinde bulunan özelliklerdir.   ,   ,     kendi özellikleridir. name age grow person  Bu önemlidir çünkü her JavaScript nesnesinin bir   özelliği vardır. Yukarıdaki nesneyi,   nesnelerini dinamik olarak oluşturmamıza izin verecek bir fonksiyon planına kodlayalım. prototype person   function createNewPerson(name, age){ this.name = name; this.age = age; } createNewPerson.prototype.print = function(){ console.log(`${this.name} is ${this.age}`); }; const john = new createNewPerson("John", 32);  Prototip, JavaScript nesnelerinin diğer nesnelerden özellikleri ve yöntemleri nasıl devraldığıdır.   ve   arasındaki fark, bir nesnedeki bir özelliğe erişirken ortaya çıkar: Own Properties Prototype   john.name; // access  JavaScript, yüksek önceliğe sahip oldukları için önce   bakacaktır. Özelliği bulamazsa, null bulana ve bir hata fırlatana kadar nesnenin kendi   nesnesine yinelemeli olarak bakar. Own Properties prototype  Bir prototip nesnesi, kendi prototipi aracılığıyla başka bir nesneden miras alabilir. Buna prototip zinciri denir.   console.log(john.hasOwnProperty('name')); // true console.log(john.hasOwnProperty('print')); // false, it's in the prototype  Ancak,   üzerinde   çalışmaları var: john print   john.print(); // "John is 32"  JavaScript'in prototip tabanlı bir dil olarak tanımlanmasının nedeni budur. Prototiplerle miras gibi özellikler ve yöntemler eklemekten daha fazlasını yapabiliriz.  Mirasın "merhaba dünya"sı memeli nesnesidir. Bunu JavaScript ile yeniden yaratalım.   // our Mammal blueprint function Mammal(name) { this.name = name; } Mammal.prototype.breathe = function() { console.log(`${this.name} is breathing.`); };  JavaScript'te   nesnesinin içinde statik bir fonksiyon vardır: Object   Object.create();    ve   benzer bir nesne oluşturur, ancak fark   miras alacağı bir prototipi parametre olarak alabilmesidir. {} new functionBlueprint create   // we use a cat blueprint function here (implemented below) Cat.prototype = Object.create(Mammal.prototype); // correction after we inherited all the properties Cat.prototype.constructor = Cat;  Şimdi     bulunan   yöntemine sahip olacak, ancak bilinmesi gereken önemli şey   prototipi olarak   işaret etmesidir. Cat Mammal breathe Cat Mammal  Açıklama:    : Öncelikle   fonksiyonunu tanımlıyoruz ve prototipine bir   metodu ekliyoruz. Memeli Planı Mammal breathe    :   fonksiyonunu oluşturuyoruz ve     olarak ayarlıyoruz. Bu,   prototipinin   kalıtım almasını sağlar, ancak   işaretçisini   olarak değiştirir. Cat Kalıtımı Cat Cat.prototype Object.create(Mammal.prototype) Cat Mammal constructor Mammal    :     geri işaret edecek şekilde düzeltiyoruz, böylece   nesnesinin   yöntemleri miras alırken kimliğini koruduğundan emin oluyoruz. Son olarak,   bir   yöntemi ekliyoruz. Yapıcıyı Düzeltme Cat.prototype.constructor Cat Cat Mammal Cat meow  Bu yaklaşım,   nesnesinin hem   (örneğin   ) hem de kendi prototipinden (örneğin   ) gelen yöntemlere erişmesine olanak tanır. Cat Mammal breathe meow  Bunu düzeltmemiz gerekiyor. Tam örneği oluşturalım:   function Cat(name, breed) { this.name = name; this.breed = breed; } Cat.prototype = Object.create(Mammal.prototype); // cat prototype pointing to mammal // correction after we inherited all the properties Cat.prototype.constructor = Cat; // we are re-pointing a pointer, the inherited properties are still there Cat.prototype.meow = function() { console.log(`${this.name} is meowing.`); };    anlamak için işaretçiler hakkında bilgi sahibi olmanız gerekir.   ile   miras aldığımızda,   prototipimizin işaretçisini   olarak değiştirir, bu da yanlıştır. Ebeveyni   olmasına rağmen   kendi bireyi olmasını istiyoruz. Cat.prototype.constructor = Cat Object.create Mammal Cat Mammal Mammal Cat  İşte bu yüzden bunu düzeltmemiz gerekiyor.  Bu örnekte   , prototip zincirini kullanarak   miras alır.   nesnesi hem   hem de   yöntemlerine erişebilir. Cat Mammal Cat breathe meow   const myCat = new Cat("Misty", "Ragdoll"); myCat.breathe(); // Misty is breathing. myCat.meow(); // Misty is meowing.  Memeliden miras alan bir köpek de yaratabiliriz:   function Dog(name, breed) { this.name = name; this.breed = breed; } Dog.prototype = Object.create(Mammal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(`${this.name} is barking.`); }; const myDog = new Dog('Buddy', 'Golden Retriever'); myDog.breathe(); // Buddy is breathing. myDog.bark(); // Buddy is barking.  Temel klasik kalıtım oluşturduk, ama bu neden önemli? Kaynak kodunu ele aldığımızı sanıyordum!  Evet, doğru, ancak prototipler, kalıtımın ötesinde, verimli ve esnek modüller oluşturmanın çekirdeğidir. Basit, iyi yazılmış modüller bile prototip nesneleriyle doludur. Biz sadece temelleri atıyoruz.  Kalıtımın alternatifi, iki veya daha fazla nesneyi alıp birleştirerek "üst" bir nesne oluşturan nesne kompozisyonudur.  Mixin'ler nesnelerin miras kullanmadan diğer nesnelerden metot ödünç almasına izin verir. İlgisiz nesneler arasında davranışı paylaşmak için kullanışlıdırlar.  İlk araştırmamızın yaptığı şey de bu: İlk önce ele almayı vaat ettiğimiz   kütüphanesi. merge-descriptors  Birleştirme Tanımlayıcıları Modülü  Express'te nerede ve nasıl kullanıldığını zaten gördük. Şimdi bunu nesne kompozisyonu için biliyoruz.  17. satırda ilk kütüphanemiz şu şekilde:   var mixin = require('merge-descriptors');  Kullanım 42. ve 43. satırlardadır:   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Öğrendiklerimize göre     ve   birleştirerek   adında bir nesne oluşturduğunu söyleyebiliriz. mixin EventEmitter.prototype proto app  Express'ten bahsederken   geçeceğiz. app    tüm kaynak kodu şudur: merge-descriptors   'use strict'; function mergeDescriptors(destination, source, overwrite = true) { if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); } for (const name of Object.getOwnPropertyNames(source)) { if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; } // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor); } return destination; } module.exports = mergeDescriptors;  Başlangıçta her zaman fonksiyonun nasıl kullanıldığına ve aldığı parametrelere bakın:   // definition mergeDescriptors(destination, source, overwrite = true) // usage var mixin = require('merge-descriptors'); mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);    hedefimizdir.   nesne kompozisyonu anlamına geldiğini biliyoruz. Kabaca, bu paketin yaptığı şey kaynak nesneyi hedef nesneye birleştirmek ve üzerine yazma seçeneği sunmaktır. App mixin  Üzerine yazma, varsayıma göre,   (hedefin) kaynağın sahip olduğu tam bir özelliğe sahip olması durumunda gerçekleşir;   üzerine yazmada, aksi takdirde o özellik olduğu gibi bırakılır ve atlanır. app true  Nesnelerin aynı özelliğe iki kez sahip olamayacağını biliyoruz. Anahtar-değer çiftlerinde (nesnelerde), anahtarlar benzersiz olmalıdır.  Express ile üzerine yazma işlemi   olur. false  Aşağıda temel ev idaresi yer almaktadır, beklenen hataları her zaman ele alın:   if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); }  İşte burada ilginçleşiyor: 12. satır.   for (const name of Object.getOwnPropertyNames(source)) {  Yukarıda   ne anlama geldiğini biliyoruz, dolayısıyla   açıkça kendi özelliklerinin anahtarlarını almak anlamına geliyor. OwnProperty getOwnPropertyNames   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyNames(person); // [ 'name', 'age', 'grow' ]  Anahtarları bir dizi olarak döndürüyor ve aşağıdaki örnekte bu anahtarlar üzerinde döngü oluşturuyoruz:   for (const name of Object.getOwnPropertyNames(source)) {  Aşağıdaki, hedef ve kaynağın şu anda üzerinde döngü kurduğumuz aynı anahtara sahip olup olmadığını kontrol ediyor:   if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; }  Eğer overwrite false ise, bu özelliği atlayın; üzerine yazmayın.   yaptığı şey budur—döngüyü bir sonraki yinelemeye iter ve alttaki kodu çalıştırmaz, bu da şu koddur: continue   // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor);    ne anlama geldiğini zaten biliyoruz. Yeni kelime   . Bu fonksiyonu kendi   nesnemizde test edelim: getOwnProperty descriptor person   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyDescriptor(person, "grow"); // { // value: [Function: grow], // writable: true, // enumerable: true, // configurable: true // }  Bu,   fonksiyonumuzu değer olarak döndürür ve bir sonraki satır kendini açıklar: grow   Object.defineProperty(destination, name, descriptor);  Tanımlayıcımızı kaynaktan alıp hedefe yazıyor. Kaynağın kendi özelliklerini hedef nesnemize kendi özellikleri olarak kopyalıyor.    nesnemizde bir örnek yapalım: person   const val = { value: function isAlien() { return false; }, enumerable: true, writable: true, configurable: true, }; Object.defineProperty(person, "isAlien", val);  Artık     özelliği tanımlanmış olmalı. person isAlien  Özetle, çok indirilen bu modül, kaynak nesnenin kendi özelliklerini, üzerine yazma seçeneğiyle birlikte hedefe kopyalar.  Bu   ilk modülümüzü başarıyla tamamladık, daha heyecan verici şeyler de yolda. kaynak kod katmanındaki  Bu bir giriş niteliğindeydi. Modülü anlamak için gereken temelleri ele alarak başladık ve bir yan ürün olarak, çoğu modüldeki kalıpları, yani nesne kompozisyonunu ve kalıtımı anladık. Son olarak,   modülünde gezindik. merge-descriptors  Bu kalıp çoğu makalede yaygın olacaktır. Ele alınması gereken temellerin olduğunu düşünürsem, bunları ilk bölümde ele alacağız ve ardından kaynak kodunu ele alacağız.  Neyse ki,   Express'te kullanılıyor ve bu bizim başlangıç kaynak kodu çalışmamızdaki odak noktamız. Bu yüzden Express'in yeterince iyi bir çalışmasını elde ettiğimizi hissedene kadar daha fazla Express.js kaynak kodu makalesi bekleyin, ardından Node.js gibi başka bir modüle veya araca geçin. merge-descriptors  Bu arada bir meydan okuma olarak yapabileceğiniz şey, birleştirme tanımlayıcılarındaki test dosyasına gitmek, tüm dosyayı okumaktır. Kaynağı kendi başınıza okumak önemlidir, ne yaptığını ve ne test ettiğini anlamaya çalışın, sonra bozun, evet ve tekrar düzeltin veya daha fazla test ekleyin!  Programlama becerilerinizi geliştirmek için daha özel, pratik ve uzun içeriklerle ilgileniyorsanız,   daha fazlasını bulabilirsiniz. Ko-fi'de

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hire Me

Bu ses hikayenin orijinal dilinde üretilmiştir!

Kaynak Kod Nasıl Çalışılır: Express.js'de Nesne Prototipleri ve Mixinler

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps