Question

我一直在阅读O'Reilly的JavaScript：The Definitive Guide（第6版），并且一直在研究example program -- a loan calculator。然而，这种结构只会让我感到困惑 - 我知道这是一本书的例子，因此可能不是为简单起见的最佳方式，所以我很好奇使用最佳实践的专业人士如何结构相同。

例如，main函数compute（），它被调用onChange到任何输入字段，其中包含一些与计算任何东西没有任何关系的东西 - 显示代码，例如 - 你会如何解决问题呢？

如果你可以模块化要完成的各项任务并将主要控制权放入这样的函数中，那会让我感觉更好：

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

但我不知道我在说什么。有没有办法用Object Literal模式做到这一点？我想我只想问你会如何做到这一点。

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/

一些注意事项：

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

我在计算器函数之外分配“click”处理程序，因为触发它的方法并不是计算器的责任，可能在另一种情况下你想在计时器上调用run()，或者从另一件事。

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

Answer 2

您可能有兴趣阅读Object-Oriented Javascript

您的参考中的示例完全没问题，毕竟Javascript是一种脚本语言。但由于它通过原型设计支持面向对象编程的良好模型，因此使用这种方法可能更好。

贷款计算器将是这样的：

//create an object LoanCalculator
function LoanCalculator(amt, apr, yrs, zipcode) {
  this.amt = amt;
  this.apr = apr;
  this.yrs = yrs;
  this.zipcode = zipcode;
}

//create the function calculate for LoanCalculator
LoanCalculator.prototype.calculate() {
  //your code here...
}
...

那么电话会是这样的：

  function getDataFromDisplay() {
    var dataFromDisplay = new Object();
    dataFromDisplay.amt = document.getElementBy...
    ...
    return dataFromDisplay;
  }

  function myOnchangeFunc() {
    var data = getDataFromDisplay();
    //use the LoanCalculator object you created
    LoanCalculator lc = new LoanCalculator(data.amt, data.apr, data.yrs, data.zipcode);
    lc.calculate();
  }

这样，代码更加模块化。但是，对于介绍性的Javascript编程，它已经引入了许多可能不适合早期练习的新概念。所以在大多数情况下，Javascript的引入使用“程序”方法而不是“面向对象”，这又是一个有争议的，更容易理解。

在编程生活的后期，你会被浏览器兼容性问题等Javascript问题所困扰，你会问自己，“我可以更专注于我真正的问题，而不是解决这些恼人的问题吗？”然后你会发现Javascript框架，例如ctcherry JQuery提到的框架，非常有用。

Answer 3

嗯，这个样本中没有真正的架构可言。这种方法有点让人联想到电子表格前的时代，每当有人有新的计算任务时，他们会聘请Fortran程序员来实现它......

因此，如果您希望更好地分离关注点，那么可以使用JavaScript电子表格实现。只是输入一下作为对Google的搜索产生了这个，我不知道它是否更符合您的喜好：

http://101.lv/learn/JSweek/ch12.htm

我注意到从文化角度来说，JavaScript似乎是基于假设动态HTML为您量身定做的很多事情。架构中没有“阶段性”概念，在程序中更新数据结构的部分和绘制部分之间设置了明确的架构边界。你没有得到“屏幕污垢”或GUI编程的其他工件的原因只是基于对越来越快的浏览器的信任来处理幕后的一切。所以你可能会发现很多程序逻辑和页面更新的交织。

Answer 4

这只是一个简单的例子，它并不意味着面向对象。

大多数设计模式都可以使用JavaScript实现，本书可能有所帮助： http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X/ref=sr_1_1?ie=UTF8&qid=1312266239&sr=8-1

我读过它，没关系。在我看来，John Resig的书“Pro JavaScript技术”是最好的学习JavaScript的好方法： http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273

祝你好运阅读

如何习惯性地构建JavaScript

4 个答案: