Jquery Kullanmadan $ (dolar) İşaretini Kullanarak Javascirpt Çalıştırma

03.02.2019
• Nedir • Nasil-Yapilir • Bilgisayar

Jquery Kullanmadan $ (dolar) İşaretini Kullanarak Javascript Çalıştırma

Malumunuz jquery 90Kb lara varan boyutu ile bazen web sitelerini ağrılaştırabilmektedir. Bunun yerine tam olrak bir jquery nin yerini tutmasada alışık olduğumuz $ işaretini kullanrak, jquery.js yi import etmeden "ki" isimli bir kod bloğu ile bu işlemi yapabiliriz.



Ki ile Neler Yapılabilir

DOM Ready?

$(function () {
  // this will be executed when the dom is ready!
  alert('Hey the DOM is ready ;)');
});


$ instead of jquery

CSS Selectors

$('p:nth-last-of-type(2)');
$('[attribute|=value]');
$('p:not(.note)');
$('p:empty');




Events

Yes, events with the known .on() and .off() methods


$(function () {
  // ok now that the dom is ready i would like to add some events
  var alertMyName = function () {
    alert('My name is ' + this.textContent); // will allert 'ki.js'
  };

  $('button').on('click', alertMyName);
  // to turn it off just use .off()
  //$('button').off('click', alertMyName);
});


.each()


$(function () {

  // get all p tags
  $('p').each(function (elem, i) {
 
    // change color to red
    elem.style.color = 'red';
   
    // append the index to the text
    elem.textContent += i;
  });
});




Plugin Yazmak

// minified is 106 bytes
$.prototype.text = function (a) {
  return a === a + '' ? this.each(function (b) {
    b.textContent = a
  }) : this[0].textContent
};


Plugini kullanalım:

$(function () {
  //

hello

  // get the text from the p tag
  console.log($('p').text()); // hello

  // set another text
  $('p').text('bye'); // bye
});












Ki.js Kod Bloğu

Kaynak:https://github.com/dciccale/ki.js
/*!
* ki.js - jQuery-like API super-tiny JavaScript library
* Copyright (c) 2015 Denis Ciccale (@tdecs)
* Released under MIT license
*/
!function (b, c, d, e) {

  /*
  * init function (internal use)
  * a = selector, dom element or function
  */
  function i(a) {
    c.push.apply(this, a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : e)
  }

  /*
  * $ main function
  * a = css selector, dom object, or function
  * http://www.dustindiaz.com/smallest-domready-ever
  * returns instance or executes function on ready
  */
  $ = function (a) {
    return /^f/.test(typeof a) ? /c/.test(b.readyState) ? a() : $(b).on('DOMContentLoaded', a) : new i(a)
  }

  // set ki prototype
  $[d] = i[d] = $.fn = i.fn = {

    // default length
    length: 0,

    /*
    * on method
    * a = string event type i.e 'click'
    * b = function
    * return this
    */
    on: function (a, b) {
      return this.each(function (c) {
        c.addEventListener(a, b)
      })
    },

    /*
    * off method
    * a = string event type i.e 'click'
    * b = function
    * return this
    */
    off: function (a, b) {
      return this.each(function (c) {
        c.removeEventListener(a, b)
      })
    },

    /*
    * each method
    * use native forEach to iterate collection
    * a = the function to call on each iteration
    * b = the this value for that function
    */
    each: function (a, b) {
      c.forEach.call(this, a, b)
      return this
    },

    // for some reason is needed to get an array-like
    // representation instead of an object
    splice: c.splice
  }
}(document, [], 'prototype');