Перевод jQuery в JavaScript

Question

Я новичок в SO и JS. Я хочу перевести этот код на чистый JS, но я действительно изо всех сил. Может кто-нибудь помочь мне, пожалуйста?

$(document).ready(function(){
    var displayFix = function(num) {
        if (num.length > 9) {
            total.text(num.substr(0,9));
        }
    };
    var number = "";
    var newNumber = "";
    var operator = "";
    var total = $(".display");
    total.text("0");

    $(".numbers span").not(".clear, .dot").click(function(){
        number += $(this).text();
        total.text(number);
        displayFix(number);
    });
    $(".dot").click(function() {
        if ( number.length == 0)     
    { number = "0.";
    } else {
        number += $(this).text();
        total.text(number);
        displayFix(number);
    };
    });
    $(".operators span").not(".igual").click(function(){
        operator = $(this).text();
        newNumber = number;
        number = "";
        total.text("0");
    });
    $(".clear").click(function(){
        number = "";
        total.text("0");
        newNumber = "";
    });
    $(".igual").click(function(){
        if (operator === "+"){
            number = (parseFloat(newNumber,10) + parseFloat(number,10)).toString(10);
        } else if (operator === "-"){
            number = (parseFloat(newNumber,10) - parseFloat(number,10)).toString(10);
        } else if (operator === "/"){
            number = (parseFloat(newNumber,10) / parseFloat(number,10)).toString(10);
        } else if (operator === "*"){
            number = (parseFloat(newNumber,10) * parseFloat(number,10)).toString(10);
        }
        total.text(number);
        displayFix(number);
        number = "";
        newNumber = "";
    });
        $(document).keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode === 49) {
            $("#num1").click();
       } else if (keycode === 50) {
            $("#num2").click();
        } else if (keycode === 51) {
            $("#num3").click();
        }
    });
});

Я полагаю, я могу заменить следующие строки:

• var total = $(".display") с var total = document.querySelector(".display")
• total.text("0") с total.innerHTML="0"
• $(".dot").click(function() { с document.querySelector(".dot").onclick = function() {

Кроме того, браузер, которым я пользуюсь - это обновленный Chrome, и он мне не нужен для поддержки других браузеров.

Answer 1

http://youmightnotneedjquery.com/ ваш друг. Вы увидите, что вы можете определить свою собственную замену jQuery.ready():

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Затем вам нужно привыкнуть обходиться без оболочки jQuery, что означает работу с индексами массива и, возможно, с пустыми результатами. Так, например, document.querySelector(".dot").onclick = function() { не будет достаточно, вы хотите сделать

var dots = document.querySelector(".dot");
for(var i=0; i<dots.length; i++ ){
   dots[i].onclick = function() { ... }
}

Наконец, вам нужно отбросить элементы вручную, так как у вас нет jQuery .not():

var operators = document.querySelector(".operators span");
for(var i=0; i<operators.length; i++ ){
    var operator = operators[i];
    if(operator.className.indexOf("igual") < 0){
        //do stuff
    }else{
        //don't
    }
}

Примечание: вы можете использовать document.getElementById() а также document.getElementsByClassName когда ваш селектор просто идентификатор или класс.

Надеюсь, этого короткого руководства достаточно для начала.

Answer 2

Эквивалент Javascript будет выглядеть примерно так для вашего кода jquery,

(function() {
  var displayFix = function(num) {
    if (num.length > 9) {
      total.innerHTML = num.substr(0, 9);
    }
  };
  var number = "";
  var newNumber = "";
  var operator = "";
  var total = document.getElementsByClassName("display");
  total.innerHTML = "0";

  var sel1 = document.querySelector(".numbers span");  
  for (var i = sel1.length; i--;) {
    if (sel1[i].className != 'clear' && sel1[i].className != 'dot') {
      var arg = sel1[i].innerHTML;
      sel1[i].onclick = function(arg) {
        return function() { 
          number += arg;
          total.innerHTML = number;
          displayFix(number);
        };
      };
    }
  }

  var sel2 = document.querySelector(".dot");
  sel2.onclick = function() {
    if (number.length == 0) {
      number = "0.";
    } else {
      number += sel2.innerHTML;
      total.innerHTML = number;
      displayFix(number);
    };
  };

  var sel3 = document.querySelector(".operators span");

  for (var i = sel3.length; i--;) {
    if (sel3[i].className != 'igual') {
      var arg = sel3[i].innerHTML;
      sel3[i].onclick = function(arg) {
        return function() { 
          operator = arg;
          newNumber = number;
          number = "";
          total.innerHTML = "0";
        };
      };
    }
  }


  document.querySelector(".clear").onclick = function() {
    number = "";
    total.innerHTML = "0";
    newNumber = "";
  };


  document.querySelector(".igual").onclick = function() {
    if (operator === "+") {
      number = (parseFloat(newNumber, 10) + parseFloat(number, 10)).toString(10);
    } else if (operator === "-") {
      number = (parseFloat(newNumber, 10) - parseFloat(number, 10)).toString(10);
    } else if (operator === "/") {
      number = (parseFloat(newNumber, 10) / parseFloat(number, 10)).toString(10);
    } else if (operator === "*") {
      number = (parseFloat(newNumber, 10) * parseFloat(number, 10)).toString(10);
    }
    total.innerHTML = number;
    displayFix(number);
    number = "";
    newNumber = "";
  };

  document.querySelector(".igual").onkeypress = function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    var elm = "";
    if (keycode === 49) {
      elm = document.getElementById("num1");
      elm.onclick.apply(elm);
    } else if (keycode === 50) {
      elm = document.getElementById("num2");
      elm.onclick.apply(elm);
    } else if (keycode === 51) {
      elm = document.getElementById("num3");
      elm.onclick.apply(elm);
    }
  };
})();

Отказ от ответственности: код просто конвертируется в эквивалент JavaScript, не тестируется с какими-либо значениями.