在 JavaScript 中的另一个函数中初始化一个函数答案

【问题标题】：Initializing a function inside another function in JavaScript在 JavaScript 中的另一个函数中初始化一个函数
【发布时间】：2014-09-19 06:50:56
【问题描述】：

所以我基本上有一个 textarea 并希望能够通过两个按钮使字体大小变大或变小。我已经完成了它并且它有效，但是为了使它有效，我必须将函数 getTextSize 的内容放在 increaseFontSize 和 reductionFontSize 中，我确信有更好的方法。

以下代码发生的情况是，当我单击任一按钮时，de 变量 textSize 未定义。

我知道这可能是一个超级新手的问题，原因是：我是编程的超级新手，但我确实关心性能和良好实践。我可以保持它的工作方式，但我知道必须有其他方式。

谢谢。

<body>

<textarea id="editor"></textarea>
<div class="fontSizeButtons">
    <button id="biggerFontBtn">Bigger Font</button>
    <button id="smallerFontBtn">Smaller Font</button>
</div>

<script type="text/javascript">

var editor = document.getElementById('editor');
var biggerFont = document.getElementById('biggerFontBtn');
var smallerFont = document.getElementById('smallerFontBtn');

biggerFont.addEventListener('click', increaseFontSize, false);
smallerFont.addEventListener('click', decreaseFontSize, false);

function getTextSize() {
    var style = window.getComputedStyle(editor, null).getPropertyValue('font-size');
    var textSize = parseFloat(style);
}

function increaseFontSize() {
    getTextSize();
    editor.style.fontSize = (textSize + 3) + 'px';
}

function decreaseFontSize() {
    getTextSize();
    editor.style.fontSize = (textSize - 3) + 'px';
}

</script>

【问题讨论】：

您可能想查看答案并选择最适合您的答案，然后对您喜欢/不喜欢的答案进行投票/否决... ;)

标签： javascript function scope

【解决方案1】：

只要在函数外部初始化变量style和textSize就行了。

var editor = document.getElementById('editor');
var biggerFont = document.getElementById('biggerFontBtn');
var smallerFont = document.getElementById('smallerFontBtn');
var style;
var textSize;

biggerFont.addEventListener('click', increaseFontSize, false);
smallerFont.addEventListener('click', decreaseFontSize, false);

function getTextSize() {
    style = window.getComputedStyle(editor, null).getPropertyValue('font-size');
    textSize = parseFloat(style);
}

function increaseFontSize() {
    getTextSize();
    editor.style.fontSize = (textSize + 3) + 'px';
}

function decreaseFontSize() {
    getTextSize();
    editor.style.fontSize = (textSize - 3) + 'px';
}

<textarea id="editor"></textarea>
<div class="fontSizeButtons">
    <button id="biggerFontBtn">Bigger Font</button>
    <button id="smallerFontBtn">Smaller Font</button>
</div>

这也是一个小提琴：http://jsfiddle.net/gh03a7ue/

【讨论】：

【解决方案2】：

两次包含相同的函数并不是最佳做法。但是你可以这样做；

var editor = document.getElementById('editor'),
    biggerFont = document.getElementById('biggerFontBtn')
    smallerFont = document.getElementById('smallerFontBtn');
biggerFont.addEventListener('click', increaseFontSize, false);
smallerFont.addEventListener('click', decreaseFontSize, false);
function getTextSize() {
  var style = window.getComputedStyle(editor, null).getPropertyValue('font-size');
  return parseFloat(style);
}
function increaseFontSize() {
  editor.style.fontSize = (getTextSize() + 3) + 'px';
}
function decreaseFontSize() {
  editor.style.fontSize = (getTextSize() - 3) + 'px';
}

【讨论】：

你也包含了两次函数:)
我使用了两次，我没有创建两次函数，每个FontSize函数一次