将 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

youmightnotneedjquery 是你的朋友。 您将看到您可以定义自己的替换 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
    }
}

注意：当您的选择器只是一个 id 或一个类时，您可能需要使用 document.getElementById() 和 document.getElementsByClassName。

希望这个简短的指导足以让您开始。

Answer 2

对于您的 jquery 代码，等效的 Javascript 几乎看起来像这样，

(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，未使用任何值进行测试。