如何习惯性地构造JavaScript

我一直在阅读O'Reilly的JavaScript:The Financial Guide（第六版），并且一直在研究第一本。然而，这个结构让我很烦——我知道这是一本书中的例子，因此可能不是为了简单起见处理事情的最佳方式，所以我很好奇，一个专业人士如何使用最佳实践来构建同样的东西

例如，主函数calculate（）被称为onChange to any input fields，其中包含大量与计算无关的内容——例如，显示代码——如何将其提取出来以分离关注点

如果您能将要完成的单个任务模块化，并将主控件放入如下功能中，我会感觉更好：

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

//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();
  }

---

但我不知道我在说什么。有什么方法可以用对象文字模式来实现吗？我想我只是问你如何习惯性地做这件事。

这是一个非常做作的例子，但是你可以在这里看到一些关于如何从输入数据和显示输出中分离“业务逻辑”的概念。我在这里使用jQuery只是为了

$

、

.val（）

和

。单击（）

辅助函数，您可以使用任何其他库，也可以不使用任何库

HTML:

现场演示：

一些注意事项：

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

我将“click”处理程序分配到计算器函数之外，因为触发它的方法实际上不是计算器的职责，可能在另一种情况下，您希望在计时器上或从另一个事件调用

run（）

---

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

好吧，这个示例中没有真正的体系结构。这种方法有点让人想起电子表格前的时代，每当有人有一个新的计算任务，他们就会雇佣一个Fortran程序员来实现它

因此，如果您想看到更好的关注点分离，可以考虑JavaScript电子表格实现。只要在谷歌搜索时输入这个，我不知道这是否更符合你的喜好：

---

我注意到，从文化角度讲，JavaScript似乎是基于假设动态HTML为您处理了很多事情。体系结构中没有太多的“阶段化”概念，在程序中更新数据结构的部分和绘制图形的部分之间设置清晰的体系结构边界。你没有得到“屏幕污垢”或GUI编程的其他工件的原因仅仅是基于对日益快速的浏览器的信任，他们会处理幕后的一切。因此，您可能会发现许多程序逻辑和页面更新交织在一起。

您可能对阅读感兴趣

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

贷款计算器如下所示：

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

//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();
  }

那么这个电话应该是这样的：

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

//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问题（如浏览器兼容性问题）所困扰，你会问自己，“我能更关注我真正的问题而不是解决这些恼人的问题吗？”然后你会发现像ctcherry提到的Javascript框架，非常有用。

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

大多数设计模式都可以用JavaScript实现，本书可能有助于：

我看过了，没关系。在我看来，John Resig的书《Pro JavaScript技术》是学习JavaScript的最好方法：

---

祝你阅读顺利

你能把代码也粘贴到这里吗？那么，如果计算器对象的用户通过计算X个输入字段来计算它，会怎么样呢？应该不难做（为@Austin Yun做作业）