Question

我正在研究（并且实际上已经完成）一个项目，该项目根据用户输入的数据获取报价。我已经编写了代码并且工作正常。它是用javascript / jQuery编写的，使用事件和函数，更像是这样的（我刚刚为这个问题编写的例子，而不是实际的代码）：

// event - when the quantity field changes
$('input[name=quantity]').change(function(){
    // get the product
    var product = $('input[name=product]').val();
    // run function to set the base price
    setBasePrice(this.value,product);
});

// function - set the base price
function setBasePrice(quantity,product){
    var basePrice = quantity * getTierPrice(quantity,product);
    // show the base price to user
    $('.basePrice').empty().val(basePrice);
};

// function - set price based on quantity and product
function getTierPrice(quantity,product){
    // switches through 6 tiers (based on quantity)
    // e.g. - If product is x and quantity is y, price = z
    // returns a value
};

还有更多的工作部分，但我写了这篇文章来说明它是如何组合在一起的。它看起来真的很冗长，而且动作很多。当需要更新时，这很痛苦。

但是我想知道我是否应该使用OOP这样的东西？我真的只想找到javascript最佳实践的根源，并找出这样的东西应该真正放在一起。我觉得我编写的代码很多，虽然有效，并不总是最好的方式，也许是因为我是自学成才并且没有真正深入挖掘。

如果它有助于理解正在发生的事情，我将功能分解成碎片。了解每个位的工作原理并不重要：

Things I'm expecting 

    = zip code (number)
    = product (string)
    = quantity (number)
        - Need to verify number is between x and y (e.g. - 100 to 10000)
    = artwork colors (number)
        - Need to verify number is between x and y (e.g. - 0 to 6)

Things I'm calculating

    = base price (number) 
        - Depends on the product selected
        - Depends on the quantity entered (6 tiers of pricing based on quantity)
            e.g. - "Product 1" quantity of 101 to 200 = $9, quantity of 201 to 300 = $7, etc

    = screen charge (number)
        - Depends on the number of artwork colors entered
        - Depends on the quantity entered (uses same tier as when calculating base price)
            e.g. - "Product 1" quantity of 101 to 200 add 1.00 per artwork color
        - Gets rolled into the base price
            e.g. - base price = base price + (artwork colors*quantity);

    = shipping cost (hits url via ajax to fetch rate, returns number)
        - Depends on zip code entered
        - Depends on product selected (each product has different weight)

Things I need to output

    = final price
    = shipping cost
    = base price

我应该使用OOP，我应该查看YUI Module Pattern吗？如果是这样，在高层次上，我将如何开始？我不需要完整的代码示例，只需要了解从哪里开始。我真的希望我的代码看起来很好并且结构合理。非常感谢任何建议，资源链接等。

Answer 1

您可以做的是研究MVC范例 - 逻辑的架构分离，旨在将代码的组件抽象为模型，视图和控制器。它主要用于后端语言的框架（用于PHP的CakePHP，用于Ruby的Rails，用于Python的Django等），但绝对也适用于JS。

请参阅this post以获取一些方便的参考资料。就个人而言，Backbone似乎是一个轻松轻松的开始（它支持jQuery（我也看到你提到））。

Answer 2

我的一般测试“我应该将这一大块自由浮动函数放入类的一组方法中”（适用于任何语言，而不仅仅是JS），这很简单：我是否在所有方法中传递相同的变量在那个地方？

如果是这样，我认为将这些变量放入类的字段，然后将这些函数放入方法中是有帮助的，因为所有这些方法都可以引用所有这些变量，而不必传递所有内容围绕“手工”。此外，你可以通过这种方式更好地控制事物。

例如，假设您有几个函数接受“foo”参数并在其上调用“setBar”，然后在其上设置“脏”标志。使用该设置，很容易意外忘记设置“脏”标志。但是，通过使foo成为字段，并创建setFooBar方法（调用“setBar”并设置“脏”标志），可以确保始终设置“脏”标志。

无论如何，我无法从您提供的有限代码示例中看出您的代码是否通过了测试，但希望这会让您有所思考。

Answer 3

只有功能脚本才能完成的所有javascript工作都可以通过oop脚本完成，反之亦然在大多数情况下，使用javascript作为OOP语言更优雅，更强大，但不一定更有效当我开始使用javascript OOP基础时，我对原型继承非常着迷，我每次都使用对象......直到我意识到我使一切变得复杂（例如：代替普通的2行图像预加载器脚本，我开始编写ImgObjects，它比我原来的任务要复杂得多。）从您提供的小代码中，我无法确定OOP是否会对您的项目带来重大改进，但我建议您在原型继承和maby一些设计模式（this book是惊人的）上达到顶峰，但不要不要忘记javascript是一种功能齐全的语言！

Answer 4

我总是推广oop！我认为javascript作为oop语言工作得很好。有一本名为“javascript模式”的书来自o'reilly。它是由一位名叫stoyan stefanov的雅虎大师编写的，它非常善于解释何时在js中使用oop，以及如何以一种好的方式进行操作。

根据这本书，我认为你会创建一个对象，它有一个构造函数来获取你的输入数据，验证它，然后保存给成员。然后它会有一些方法来执行你所写的计算。并且这些计算将在对象创建期间存储的成员的帮助下进行。

这是一个示例类：

//class named SomeClass
//constructor taking two arguments named init1 and init2
function SomeClass(init1, init2) {
    //members, use of keyword "var" makes them private
    //logic makes the members have validated values, if input is not satisfying
    var m_init1 = init1 > 5 ? init1 : 5;
    var m_init2 = init2;
    //so that was the constructor


    //well, this is still the constructor, but
    //conceptually, it's not anymore.

    //here are some public things
    //they are method calls, and they represent functions
    //that are private in here, but are made public through
    //the use of this.bla = Bla;
    this.publicMethod = PublicMethod;
    this.otherPublicMethod = OtherPublicMethod;

    //private function, made into a public method above
    function PublicMethod() {
        //this function/method has access to private members
        //of parent function object. yay!
        return m_init1;
    };

    //private function, made into a public method above
    function OtherPublicMethod(arg) {
        if(arg > 5) {
            m_init2 = arg;
        }
    };
}

var a = new SomeClass(2, 3);
alert(a.publicMethod()); //outputs 5

您构建上述信息的方式是构建oop项目的文档的非常好的基础。它看起来像我认为的一个类。我所说的是，好像你的文档模型适合我的小代码示例。

Answer 5

我不会担心OOP与非OOP相比而不是重构 - 例如如果你有非常相似的“setBasePrice”和“setXXX”和“setYYY”，你应该将它们转换为通用的“setAnything（）”调用。 OOP可能有助于完成这项任务，但并不重要

当前项目告诉我，我需要查看Javascript OOP，我应该吗？

5 个答案: