javascript - 如何地道地构建 JavaScript

Question

我一直在阅读 O'Reilly 的 JavaScript:权威指南(第 6 版)，并且一直在研究第一本 example program -- a loan calculator .然而，这个结构让我很烦恼——我知道这是一个书本示例，因此可能不是为了简单起见的最佳处理方式，所以我很好奇专业人士如何使用最佳实践构造相同的东西。

例如，主函数 calculate() 对任何输入字段调用 onChange，其中包含大量与计算无关的内容——例如显示代码-- 您如何将其提取出来以分离关注点？

如果您可以模块化要完成的各个任务并将主要控件放入函数中，这会让我感觉更好:

run() {
    getdata();
    calculate();
    if (isFinite(monthly)) {
        display();
        save(arg1, arg2, arg3, arg4); }
    else {
        cleardisplay(); }

但是我不知道我在说什么。有什么方法可以用对象文字模式来做到这一点吗？我想我只是在问您如何按照惯用方式进行操作。

Answer 1

这是一个非常人为的例子，但您可以在这里看到一些关于如何将“业务逻辑”与输入数据和显示输出分开的概念。我在这里仅将 jQuery 用于 $、.val() 和 .click() 辅助函数，您可以使用任何其他库，或者根本没有。

HTML:

<p>First Number</p>
<p><input type="text" id="num1"></p>
<p>Second Number</p>
<p><input type="text" id="num2"></p>
<p>Third Number</p>
<p><input type="text" id="num3"></p>
<p><input type="button" value="Calculate" id="btntrigger"></p>
<p>Result</p>
<p><input type="text" id="result"></p>

Javascript:

function Calculator(options) {
    this.options = options;
}

Calculator.prototype.run = function() {
    return (parseInt(this.options.getN1()) + parseInt(this.options.getN2())) *this.options.getN3();
};

var calc = new Calculator({
    getN1: function() { return $('#num1').val(); },
    getN2: function() { return $('#num2').val(); },
    getN3: function() { return $('#num3').val(); },
});


$('#btntrigger').click(function(){
    $('#result').val(calc.run());
});    

现场演示:http://jsfiddle.net/Wd49U/

一些注意事项:

输入是通过传入回调函数来处理的，回调函数返回要使用的值，这种回调风格在您希望将数据输入计算器的位置和方式方面提供了极大的灵 active 。

我在计算器函数之外分配了“点击”处理程序，因为触发它的方法实际上并不是计算器的责任，也许在另一种情况下你想调用 run()计时器，或来自另一个事件。

最重要的是，最佳方式实际上取决于您的具体用例。我希望这可以帮助您获得一些想法。