Javscript

Sıfırdan Oluşturulan 8 JavaScript Kitaplığı – JSManifest

JavaScript geliştiricileri olarak, yaptığımız işte daha iyi olma yolculuğumuza başladığımızda, bol miktarda kaynak toplama alışkanlığı edinebiliriz çünkü bu yapılacak en verimli şeymiş gibi gelir. Sonuçta, o dır-dir hiçbir şey olmamasındansa tüm bilgilerin elinizde olması daha iyidir.

Bu kaynaklardan bazıları e-kitaplar, makaleler, “daha sonra okuyabilmemiz” için tarayıcımızda çok sayıda web sitesine yer işareti koyma, videolar ve hatta ücretli video kurslarını içerir.

Bunların hepsi, olmak istediğiniz kadar iyi olmayı hızlı bir şekilde öğrenmenin iyi yolları olsa da, bunaltıcı olabilir.

Bu yazıda, sıfırdan oluşturulmuş 8 JavaScript kitaplığını listeleyeceğiz.

“Bu kütüphaneler doğru yapıyor” veya “İşte böyle öğrenmelisin” veya “Bağımlılığı olmayan kütüphaneler daha iyi” demiyoruz. Bu listeyi paylaşıyoruz sadece bağımlılıkları olmadığı için. Daha performanslı ve daha küçük olan birden çok bağımlılığı içe aktaran bir JavaScript kitaplığı yerine, kötü uygulamalarla yazılmış Vanilla JS’de uygulanan bir kitaplığı kullanmayı tercih etmem. Bununla birlikte, bir avantaj, eğer hiçbiri kodlarının herhangi bir yerinde bir üçüncü taraf paketi içe aktarmıyorsa, baktığınız dosyalardan daha fazlasını tıklamanıza gerek kalmamasıdır.

snabbdom

Bu listedeki ilk kütüphane snabbdom, basitlik ve performansa odaklanan modüler bir sanal DOM kitaplığı. Bu kitaplığın sıfır bağımlılığı var ve ayrıca oldukça küçük 12.7 kb ağırlığında.

Sanal DOM’un dünyada ne olduğunu merak ediyorsanız, facebook’un popüler hale getirdiği bir programlama konseptiydi. tepkiler bellekte tutulan bir “sanal” (veya yer tutucu) DOM üzerinde çalıştığınız kitaplık. DOM’nin bu sanal temsili, gerçek DOM ile eşitlenir. Bu, web uygulamaları oluşturmaya yönelik daha performanslı ve modern bir yaklaşımdır çünkü her seferinde DOM düğümlerini doğrudan manipüle ederken hızla maliyetli hale gelebilir.

Bu depodan geçmek (açıklamasında belirtildiği gibi) okumak ve anlamak basittir. Snabbdom, öğrenmek için harika bir kütüphanedir. Koddaki basitliğin güçlü olduğunu kanıtlıyor. Modülerlik ve genişletilebilirlik gösterir. Yaşam döngüleri kavramında ve öncesi/sonrası kancaları aracılığıyla bellek temizleme ve tahsisinin nasıl yönetileceğini düşünmemizi sağlar.

Genel olarak kod modüllerinin, programlamada yeniyken, sihirli şeyler yapan devasa kod parçaları olduğunu varsaymak yaygındır. Bir geliştirici olarak güvenimizi etkiliyorsa, bu bir sorun haline gelebilir. Bu kitaplık, modüllerin yalnızca “takılabilir”, yeniden kullanılabilir parçalar olduğu ve hiç Bu prensibe uydukları sürece boyut.

Örneğin, bu kitaplığı genişletmek için kendi modülünüzü yazabilir ve arayüzlerine bağlı kaldığı sürece yalnızca bu kod satırları kullanabilirsiniz:

const myModule = {
  create(oldVNode, newVNode) {
    console.log(`[create] hook called`, { oldVNode, newVNode })
  },
  update(oldVNode, newVNode) {
    console.log(`[update] hook called`, { oldVNode, newVNode })
  },
}

module.exports = myModule

Modüller sadece yeniden kullanılabilir parçalar bazı işlevleri genişleten.

Aşağıdaki durumda, onların süresini uzatır patch günlüğe kaydetme işlevi (varsayılan modülleriyle birlikte) attributesModule ve classModule):

const { init, attributesModule, classModule, toVNode } = require('snabbdom')
const myModule = require('./myModule')

const patch = init([attributesModule, classModule, myModule])

const rootEl = document.createElement('div')
rootEl.id = 'root'

document.body.appendChild(rootEl)

const vnode = patch(
  document.getElementById('root'),
  toVNode(document.getElementById('root')),
)

orta editör

Metin editörlerinin nasıl oluşturulduğunu hiç düşündünüz mü? Sıfırdan metin editörleri geliştirme konusundaki ilk uygulamalı deneyimim facebook’ta oldu. DraftJS yıllar önce kütüphane Metin editörlerinin hızla Gerçekten karmaşık.

Sıfırdan bir metin düzenleyici geliştirmeye nasıl yaklaşacağımızı düşündüğümüzde çok fazla gizem var.

orta editör yansıtan bir JavaScript kitaplığıdır. orta satır içi düzenleyici araç çubuğu.

Metin editörlerinin ana konseptini hayata geçiren düğmeleri ve işlevleri uygular.

Bunun gibi bir api sağlar:

const MediumEditor = require('medium-editor')

const editor = new MediumEditor('.root', {
  buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
})

Yalnızca bu kitaplığı kullanarak oluşturabileceklerinize bir örnek, temel Seviye:

kod bloğu yazarı

kod bloğu yazarı geliştiricilerin yardımcı işlevleri kullanarak kod yazmasına yardımcı olan küçük bir JavaScript kitaplığıdır.

Basit ve yalındır:

const CodeBlockWriter = require('code-block-writer').default

function createGotoFnCode(paramName, newTab = false) {
  writer.write(`function goto(${paramName})`).block(() => {
    if (newTab) {
      writer.writeLine(`window.open(${paramName})`)
    } else {
      writer.writeLine(`window.location.href = ${paramName}`)
    }
  })
}

const writer = new CodeBlockWriter({
  newLine: 'rn',
  indentNumberOfSpaces: 2,
  useTabs: false,
  useSingleQuote: true,
})

createGotoFnCode('destination', true)

console.log(writer.toString())

kod-blok-yazar-sonuç-javascript.png

Bu, akıcı bir arayüz sağlayarak nesnelerin inşasındaki karmaşıklığı azaltmayı amaçlayan Builder Design Pattern gibi bir tasarım modeline aşina olmak isteyenler için iyi bir yol olabilir. Bence bu, başarısının harika bir örneği.

önsöz

Snabbdom gibi, önsöz bağımlılık olmadan gerçek DOM’nin üzerinde sanal bir DOM’nin ince bir soyutlamasını sağlayan başka bir JavaScript kitaplığıdır.

Preact ile çalışmak, JSX’in kullanıldığı şekilde tepki kodunda çalışmaya benzer.

İşte onlardan alınan pratikte bir örnek bileşenler sayfası:

function MyComponent(props) {
  return <div>My name is {props.name}.</div>
}


const App = <MyComponent name="John Doe" />


render(App, document.body)

tepki-renkli

tepki-renkli özel bir renk seçici tepki bileşeninin barebone uygulamasıdır.

Bu, hiçbir şeyden bir şeyler inşa etmeyi gösteren birçok iyi kitaplıktan biridir (interport tepki hariç).

Bu, kendi özel yeniden kullanılabilir tepki bileşenlerini oluşturmaya başlamak için ilham arayan geliştiricilere önerebileceğim birkaç kitaplıktan biridir.

dönüştürücüler-js

dönüştürücüler-jstarafından geliştirilmiş bilişsel uygulayan düz bir vanilya JavaScript kitaplığıdır. dönüştürücü protokolü çekirdeği olarak.

Dönüştürücüler, ara koleksiyonlar oluşturmayan, şekillendirilebilir, verimli veri dönüştürme işlevleridir. Bu, kavramı çeşitli şekillerde uygulamak için bir kavramı çeşitli uygulanabilir araçlara dönüştüren iyi bir çıplak kemik örneğidir.

Bunu, “for of” döngüsüne sahip olduğunuz bir dizi üzerinde yineleme gibi düşünün. Aynı kavramı farklı bir şekilde uygulamak için farklı bir yaklaşım kullanabiliriz (örneğin “herkes için” diyelim).

rambda / lodash / alt çizgi / değişmez-js

rambda, lodash, vurgulamakve değişmez-js hem ön uç hem de arka uç uygulamaları geliştirmek için birçok yararlı yardımcı program sağlayan hiçbir bağımlılık olmadan oluşturulmuştur.

Fark edeceğiniz bir şey, her birinin çok benzer şekilde yapılandırıldığıdır.

Bu, yardımcı programlar olarak hizmet veren modüler bir JavaScript kitaplığını iyi kavramak için kaynakların iyi bir birleşimidir.

js-finansal-araçlar

js-finansal-araçlar finansmanda daha fazla kullanıma hitap eden işlevler üretmek için bazı matematiksel araçları kapsar. Bağımlılık yoktur ve modüler olarak inşa edilmiştir.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu