Question

我是javascript原型和闭包的新手，以下是我的代码，

function setFontSize(size) {        
    return function() {
        console.log("font size: "+size+ " setFontSize()");      
        document.body.style.fontSize = size + 'px';
    };
}
function setFontSizeInput(ipval) {
    console.log("font size ipval : "+ipval);
    var fontsizeIP= setFontSize(ipval);
}
window.onload = function() {
    var fontsize18 = setFontSize(18);
var fontsize14 = setFontSize(14);
var fontsize16 = setFontSize(16);
document.getElementById('size-18').onclick = fontsize18;
document.getElementById('size-14').onclick = fontsize14;
document.getElementById('size-16').onclick = fontsize16;
}

on onkeyup事件我调用setFontSizeInput，因为用户在输入字段中输入值我想更改fontsize所以我创建了setFontSize（ipval）的新对象并传递了输入字段值。但它没有反映出来。任何想法在我的代码中是错的。 For JSFiddle Click

Answer 1

修改您的代码，如下所示：

function setFontSizeInput(ipval) {
    console.log("font size ipval : " + ipval);
    setFontSize(ipval)();
}

在()之后注意setFontSize(ipval)。由于setFontSize返回功能，因此需要它们。

演示：http://jsfiddle.net/WxKJs/2/

我还建议您在更改字体大小之前使用一些延迟，以避免在键入12时从1到12闪烁字体：

function setFontSizeInput(ipval) {
    delay(setFontSize(ipval));
}

var delay = (function() {
    var delay = 100, timer;
    return function(callback) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(callback, delay);
    };
})();

演示：http://jsfiddle.net/WxKJs/3/

Answer 2

由于http://jsfiddle.net/代码中的一些错误，JavaScript未加载到文档中，在获取该函数之后，您应将其称为“fontsizeIP（ipval）;” ，尝试这种方式并将其放在HTML编辑器中并从JavaScript编辑器中删除所有内容：

   <script>
      function setFontSize(size) {      
          return function() {
              console.log("font size: "+size+ " setFontSize()");        
              document.body.style.fontSize = size + 'px';
          };
      }
      function setFontSizeInput(ipval) {
         console.log("font size ipval : "+ipval);
         var fontsizeIP= setFontSize(ipval);
         fontsizeIP(ipval);
      }

      var fontsize18 = setFontSize(18);
      var fontsize14 = setFontSize(14);
      var fontsize16 = setFontSize(16);
      document.getElementById('size-18').onclick = fontsize18;
      document.getElementById('size-14').onclick = fontsize14;
      document.getElementById('size-16').onclick = fontsize16;

   </script>
   Closures Demo
   <br>
   Practival Closures
   <a href="#" id="size-18">18</a>
   <a href="#" id="size-16">16</a>
   <a href="#" id="size-14">14</a>
   <input type="text" id="inputFontSize" placeholder="Enter Font Size" onKeyUp="setFontSizeInput(this.value);">

Answer 3

我稍微修改了你的代码以更好地利用闭包。这是更新的jsfiddle的链接：http://jsfiddle.net/WxKJs/7/

我使FontSize成为一个类，它存储发送给构造函数的字体大小的本地值。我给它一个set方法，如果将值作为参数传递，它将允许您覆盖并设置新的字体大小。作为安全检查，您可能希望在实际尝试保存/设置之前检查字体大小是否为int。

function FontSize(size) {
    var self = this;
    function isInteger(value) {
        return (Object.prototype.toString.call(value) === '[object Integer]');
    }
    function isNumber(value) {
        return (Object.prototype.toString.call(value) === '[object Number]');
    }
    function isMouseEvent(value) {
        return (Object.prototype.toString.call(value) === '[object MouseEvent]');
    }
    function getInt(value) {
        var val = parseInt(value, 10);
        if (isNaN(val)) return 12;  // return a default number
        if (isInteger(val)) return val;  // return int
        if (isNumber(val)) return Math.round(val);  // convert to int
        return null;
    }
    self.fontSize = getInt(size);  // our default font size, defined at construction
    self.set = function (override) {
        var fontSize = self.fontSize;
        if (override && !isMouseEvent(override)) {
            fontSize = getInt(override);  // if it's not a mouse event get override
        }
        console.log("font size:", self.fontSize, ", override font size:", fontSize);    
      document.body.style.fontSize = fontSize + 'px';
    };
}
function setFontSizeInput(ipval) {
  console.log("font size ipval : "+ipval);
    var inputFontSize = new FontSize(ipval);
    inputFontSize.set();
}

var fontsize18 = new FontSize(18);
var fontsize14 = new FontSize(14);
var fontsize16 = new FontSize(16);
document.getElementById('size-18').onclick = fontsize18.set;
document.getElementById('size-14').onclick = fontsize14.set;
document.getElementById('size-16').onclick = fontsize16.set;

如何将值从输入字段传递给javascript闭包

3 个答案:

演示：http://jsfiddle.net/WxKJs/2/

演示：http://jsfiddle.net/WxKJs/3/