jquery-data-api

Bildiğiniz gibi jQuery bir javascript kütüphanesi. Yani diğer frameworkler ile karşılaştırmak saçma olur.

Ancak mevcut javascript frameworkleri gibi biraz daha reactive olsa dediğim çok zaman olmuştu zamanında. Artık çok fazla jquery kullanmasamda projelerinde hala kullananlar olabileceğini düşündüğüm için basit bir data-api sistemi geliştirdim.

Detaylar için github adresine bakmayı unutmayın:
https://github.com/tayfunerbilen/jquery-data-api

Kullanabileceğiniz Nitelikler

[data-state]
[data-value]
[data-block]
[data-disabled]
[data-class]
[data-show]
[data-expression]
[data-for]
[data-css]

Örnek Kullanımlar

Örneklere bakarak bu scriptin ne yaptığını daha iyi anlayabilirsiniz.

Not: Bu script'in hataları olabilir. Javascript frameworkleri gibi çalışmaz, belli kurallar dahilinde kodlarınıza biraz reactivite katmak için kullanabilirsiniz. SPA oluşturmak için yeterli değildir, örneklerde basit bir SPA oluşturduk ancak bu scriptin amacına çokta uygun bir örnek değil bunu aklınızdan çıkarmayın :)

Tüm Metodlar

setState() metodu

State tanımlamak için bu metodu ya da [data-state] niteliğini kullanabilirsiniz.

setState('name', 'Tayfun');
setState('todos', [
    {
        text: 'todo 1',
        done: false
    },
    {
        text: 'todo 2',
        done: true
    }
])

getState() metodu

State değerini almak için bu metodu kullanabilirsiniz. Örneğin;

<input type="text" data-state="name" placeholder="Bir şeyler yazın..">
<button onclick="getName()">Adı getir</button>

<script>
function getName() {
    alert(getState('name')); // inputa girilen değer
    // ya da $state değişkenini kullanabilirsiniz
    alert($state.name); // inputa girilen değer
}
</script>

Editörde Görüntüle

updateState() metodu

Mevcut state'i güncellemek için kullanabilirsiniz. Örneğin;

<input type="text" data-state="name" />
<button onclick="updateState('name', 'Tayfun')">Güncelle</button>

Editörde Görüntüle

stateEffect() metodu

Tanımladığınız statelerde bir değişiklik olduğunda yakalamak için kullanabilirsiniz. Örneğin;

<input type="text" data-state="name" placeholdre="Konsolda görmek için yazmaya başlayın" /> <br>
<input type="text" data-state="surname" placeholdre="Erbilen" />

<script>
    stateEffect((newValue, oldValue, state) => {
        // newValue = yeni değer
        // oldValue = eski değer
        // state    = hangi state olduğu
        console.log('State değişti', newValue, state);
    }, ['name', 'surname'])
</script>

Editörde Görüntüle

Tüm Nitelikler

[data-state] niteliği

Değişebilir değerlerinizi tanımlamak için bu niteliği kullanabilirsiniz. Örneğin;

<input type="text" data-state="name" value="Tayfun" />

Editörde Görüntüle

Bütün stateler $state global değişkenin altında tutuluyor. Yani oluşturduğunuz state'e $state.key şeklinde ya da getState('key') şeklinde erişebilirsiniz.

console.log($state.name); // Tayfun
console.log(getState('name')); // Tayfun

[data-value] niteliği

[data-state] ile oluşturduğunuz state'e değer atamak için kullanabilirsiniz. Ancak javascript ifadesi gibi çalışacağı için eğer string bir değer atayacaksanız tırnaklar içinde kullanmanız gerekiyor. Ayrıca dizi vs.de tanımlayabilirsiniz. Örneğin;

<select multiple data-state="skills" data-value="['php', 'js']">
    <option value="php">PHP</option>
    <option value="js">Javascript</option>
    <option value="python">Python</option>
    <option value="css">CSS</option>
</select>

<input type="text" data-state="name" data-value="'Tayfun'">

<!-- Alternatif olarak form elemanlarına value ile değer verebilir ya da checked, selected gibi nitelikleri ekleyerekte state'in değerini oluşturmasını sağlayabilirsiniz -->
<input type="text" data-state="name2" value="Tayfun2">

Editörde Görüntüle

[data-block] niteliği

Bu nitelik içinde {$state.key} şeklinde artık stateleriniz dinamik olarak gösterebilir ya da javascript ifadeleri yazabilirsiniz. Örneğin;

<div data-block>
    <input type="text" data-state="name" value="Tayfun" /> <br>
    Değer = {$state.name}
</div>

Editörde Görüntüle

ya da bir javascript ifadesine örnek vermek gerekirse

<div data-block>
    <input type="checkbox" data-state="accept" value="1" /> <br>
    ${$state.accept ? 'Kuralları kabul ettin' : 'Lütfen kuralları kabul et'}
</div>

Editörde Görüntüle

bir başka örnek

<input type="number" data-state="num1" value="2" /> <br>
<input type="number" data-state="num2" value="3" />

<div data-block>
    {$state.num1 * $state.num2}
</div>

Editörde Görüntüle

[data-disabled] niteliği

Duruma göre disabled niteliği eklemek için kullanabilirsiniz. Örneğin;

<input type="text" data-state="name" placeholder="Adınızı yazın"> <br>
<button data-disabled="!$state.name">Gönder</button>

Editörde Görüntüle

[data-class] niteliği

Duruma göre class ekletmek için kullanabilirsiniz. Örneğin;

<style>
.accepted {
    background: lime;
}
</style>

<label data-block data-class="[$state.accept, 'accepted']">
    <input type="checkbox" value="1" data-state="accept" />
    {$state.accept ? 'Kabul ettiğiniz için teşekkürler' : 'Kuralları kabul et'}
</label>

Editörde Görüntüle

[data-show] niteliği

Duruma göre gizleyip/göstermek istediğiniz alanlar için kullanabilirsiniz. Örneğin;

<label>
    <input type="checkbox" data-state="accept_rules" value="1">
    Kuralları kabul edin
</label>

<div data-show="$state.accept_rules" style="padding: 10px; background: lime">
    burayı kuralları kabul ettiğinizde göreceksiniz!
</div>

Editörde Görüntüle

[data-expression] niteliği

Javascript ifadeleri çalıştırmak için kullanabilirsiniz. Genellikle [data-for] içinde kullanırsanız işinize çok yarayacaktır. State güncellendiğinde otomatik olarak bu ifadede güncellenecektir. Örneğin;

<input type="text" data-state="name" value="Tayfun">
<button onclick="updateState('name', 'Murat')">İsmi Değiştir</button>

<div data-expression="$state.name === 'Murat' ? 'Yanlış isim' : 'Doğru yoldasın!'"></div>

Editörde Görüntüle

[data-for] niteliği

For döngüsünden bir farkı yok. Kullanırken [data-for] içinde state'i belirtiyoruz ve ilgili elemanı içeride hangi isimle kullanacağımızıda [data-as] ile belirliyoruz. Örneğin;

<style>
li.done {
    background-color: lime;
}
</style>

<ul data-for="todos" data-as="todo">
    <template>
        <li class="{todo.done ? 'done' : ''}">
            {todo.name}
        </li>
    </template>
</ul>

<script>
const todos = [
    {
        name: 'todo 1',
        done: false
    },
    {
        name: 'todo 2',
        done: true
    }
];
setState('todos', todos);
</script>

Editörde Görüntüle

[data-css] niteliği

Değişen değerlerinizi css olarak tanımlamak isterseniz bu niteliği kullanabilirsiniz. Daha sonra değişmesini istediğiniz değeri data-css ten hemen sonra belirtin. Mesela background-color değeri için [data-css-background-color=""] şeklinde tanımlama yapmalısınız. Örneğin;

<style>
.box {
    width: 100px;
    height: 100px;
}
</style>

<div class="box" data-css data-css-color="$state.color === 'yellow' ? 'black' : 'white'" data-css-background-color="$state.color || 'blue'">box</div>

<select data-state="color">
    <option selected disabled>Renk seçin</option>
    <option value="yellow">Sarı</option>
    <option value="red">Kırmızı</option>
    <option value="black">Siyah</option>
</select>

Editörde Görüntüle