Javascript ile Javascript Kodlarını Sıkıştırma

Bu uygulamada Javascript ile Javascript kodlarını sıkıştırma işlemini inceleyeceğiz.

Javascript ile Javascript Kodlarını Sıkıştırma

Javascript ile Javascript kodlarını sıkıştırma işleminin nasıl yapılacağını inceleyeceğiz. Kulağa çok garip geliyor ama, Javascript’te hazırlayacağımız bir fonksiyon ile bu işlemi gerçekleştireceğiz. Bu işlemi HTML, CSS ve JS kodları sıralamasıyla sağlayacağız.

HTML Kodlaması

Uygulamanın iskeletini pek tabikide HTML ile sağlayacağız. Çok aşırı bir uygulama olmayacağı için basit bir yapı oluşturalım.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Kodlarını Sıkıştır</title>
</head>
<body>

  <div class="container">
    <textarea id="al" cols="30" rows="10"></textarea>
    <button id="islem">Sıkıştır</button>
    <textarea id="ver" cols="30" rows="10"></textarea>
  </div>

</body>
</html>

Bu şekilde iskeleti oluşturduktan sonra, şimdi sırada CSS kodlaması bulunuyor. Bu kodlarla birlikte kullanıcılara daha iyi bir kullanım oluşturuyoruz.

CSS Kodlaması

Yapacağımız bu kodlalar, TEXTAREA ve BUTTON etiketlerinin daha güzel görünmesini sağlayacağız. Bunun için gerekli kodlar aşağıdaki gibi olacaktır.

div,textarea,button{padding: 0px; margin:0px}
.container{width: 500px; margin: 50px auto}
textarea{width: 100%; border: 1px solid #ddd; margin: 20px 0px}
button{width: 100%; padding: 10px;border:1px solid burlywood;background-color: blanchedalmond;}

Görünüm için gerekli olan düzenlemeleri sağladıktan sonra, sırada bu uygulamanın en önemli bölümü olan JS kodlarına geçelim.

JavaScript Kodlaması

Uygulamanın sağlanması için, HTML alanından alınan bilgileri bir fonksiyona ileteceğiz. Bu fonksiyonda gerekli temizlemeleri yaparak, diğer TEXTAREA’ya yazdırarak sonucu kullanıcılar ile paylaşacağız.

var al              = document.getElementById('al');
var compressButton  = document.getElementById('islem');
var ver             = document.getElementById('ver');

compressButton.addEventListener('click', function() {
  var js            = al.value;
  var sonuc         = compressJS(js);
  ver.value         = sonuc;
});

function compressJS(kod) {
  kod = kod.replace(/\s+/g, ' '); // boşlukları temizle
  kod = kod.replace(/\/\/.*?\n|\/\*.*?\*\//g, ''); // yorumları temizle
  kod = kod.replace(/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/g, ''); // string ifadeleri için kaçış karakterlerini kaldır
  kod = kod.replace(/(\W|^)var(\W)/g, '$1'); // "var" ifadelerini kısalt
  kod = kod.replace(/(\W|^)function(\W)/g, '$1'); // "function" ifadelerini kısalt
  return kod.trim();
}

Yukarıdaki fonksiyonla birlikte, kullanıcıdan gelen JS kodlarını sıkıştırarak yine kullanıcıya sunabiliyoruz. Kullanıcıdan gelen JS kodlarını alıp gerekli temizlemeleri yapıyoruz. Bu temizlemeler de aşağıdaki gibidir.

Temizlemeler sonrasında kullanıcıya sonucu veriyoruz. Bu fonksiyon üzerinde dilediğiniz gibi değişiklikler yaparak farklı sonuçlar verilmesini sağlayabilirsiniz.

Uygulamanın Tam Hali

Gelelim uygulamanın tam haline. Yukarıda yapmış olduğumuz bölümleri birleştirdiğimizde kodların görünümü de aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Kodlarını Sıkıştır</title>
  <style>
    div,textarea,button{padding: 0px; margin:0px}
    .container{width: 500px; margin: 50px auto}
    textarea{width: 100%; border: 1px solid #ddd; margin: 20px 0px}
    button{width: 100%; padding: 10px;border:1px solid burlywood;background-color: blanchedalmond;}
  </style>
</head>
<body>

  <div class="container">
    <textarea id="al" cols="30" rows="10"></textarea>
    <button id="islem">Sıkıştır</button>
    <textarea id="ver" cols="30" rows="10"></textarea>
  </div>

  <script>
    var al              = document.getElementById('al');
    var compressButton  = document.getElementById('islem');
    var ver             = document.getElementById('ver');
    
    compressButton.addEventListener('click', function() {
      var js            = al.value;
      var sonuc         = compressJS(js);
      ver.value         = sonuc;
    });
    
    function compressJS(kod) {
      kod = kod.replace(/\s+/g, ' '); // boşlukları temizle
      kod = kod.replace(/\/\/.*?\n|\/\*.*?\*\//g, ''); // yorumları temizle
      kod = kod.replace(/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/g, ''); // string ifadeleri için kaçış karakterlerini kaldır
      kod = kod.replace(/(\W|^)var(\W)/g, '$1'); // "var" ifadelerini kısalt
      kod = kod.replace(/(\W|^)function(\W)/g, '$1'); // "function" ifadelerini kısalt
      return kod.trim();
    }
    </script>

</body>
</html>

Böylece, kullanıcıdan gelen JS kodlarını sıkıştırıp kullanıcıya geri sunuyoruz. Fonksiyona yapacağınız eklemelerle birlikte, kullanıcıya farklı sonuçlar verebilirsiniz. Hazırlamış olduğumuz fonksiyon, Javascript ile Javascript kodlarını sıkıştırma işlemini sağlamış olacaktır.

Exit mobile version