Knockout.js – 制作数学计算器

今天就为大家分享一个用Knockout.js制作用数学计算器的教程，Knockout这是一个近来流行的javascript库，在web应用程序中Knockout采用Model-View-View-Model (MVVM)的设计模型。Knockout是一个可扩展的crossbrowser框架，在javascript应用程序开发中是一个新的面貌。其主要的思想是分离逻辑演示，我们创建一个模型后，将其绑定与演示，链接视图和视图模型用于HTML5的数据属性。下面是一个示例 – Knockout.js制作数学计算器

查看预览下载附件

你准备好了吗﹖那我们开始吧！

第一步∶HTML

HTML的演示代码如下:

<script src="js/knockout-2.2.0.js"></script>
<div class="calculator">
    <p>Math Calculator</p>
    <h3 data-bind="text: commandline"></h3>
    <div data-bind="foreach: numbers" class="numbers">
        <button data-bind="value: val, text: val, click: $parent.addNumber"></button>
    </div>
    <div data-bind="foreach: commands" class="commands">
        <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
    </div>
    <button data-bind="click: doCalculate" style="width: 330px">=</button>
</div>
<script src="js/main.js"></script>

我们的计算器有十个数字按钮和九个运算命令按钮，我将使用两套按钮和命令（为了生成按钮），而不是我们自己手动输入。现在，我们已经审查并且理解了计算器的模型该怎么运作。

第二步∶JS

js/main.js

var CalculatorModel = function() {
    var self = this;

    // array of possible commands
    self.commands = [
        {command: ' + '},
        {command: ' - '},
        {command: ' * '},
        {command: ' / '},
        {command: 'sin', action: 'Math.sin(__param__)'},
        {command: 'cos', action: 'Math.cos(__param__)'},
        {command: 'tan', action: 'Math.tan(__param__)'},
        {command: 'ln', action: 'Math.log(__param__)'},
        {command: 'log', action: 'Math.log(__param__) / Math.log(10)'},
    ];

    // array of possible numbers
    self.numbers = [
        {val: 1},
        {val: 2},
        {val: 3},
        {val: 4},
        {val: 5},
        {val: 6},
        {val: 7},
        {val: 8},
        {val: 9},
        {val: 0},
    ];

    // result command line
    self.commandline = ko.observable('');

    // last used command
    self.lastCommand = ko.observable('');

    // do we need cleanup?
    self.needCleanup = ko.observable(false);

    // add a number function
    self.addNumber = function(e) {
        if (self.needCleanup()) {
            self.commandline('');
            self.needCleanup(false);
        }

        // we don't need to add leading zeros
        if (this.val == 0 && self.commandline() == '') {
            return;
        }
        self.commandline(self.commandline() + this.val);
    };

    // add a command function
    self.addCommand = function(e) {
        if (e.action && self.commandline()) { // in case of commands which don't require a second value - we have to calculate a value
            var newCommand = e.action.replace('__param__', self.commandline());
            self.commandline(eval(newCommand));
            self.needCleanup(true);
        }

        if (self.lastCommand() == '') { // put a command into command line
            if (! e.action) {
                self.commandline(self.commandline() + e.command);
            }
            self.lastCommand(e.command);
        }
    };

    // calculation
    self.doCalculate = function(e) {
        self.commandline(eval(self.commandline()));

        if (self.lastCommand() != '') {
            self.lastCommand('');
        }
        self.needCleanup(true);
    };

    // disable buttons if we haven't added any numbers yet
    self.hasNumbers = ko.computed(function() {
        return self.commandline() == '';
    }, self);
};

ko.applyBindings(new CalculatorModel());

这是我们的计算器模型，在开始的地方，我定义了两个区块，一个是数字板块，一个是指令板块。里面包含了所有我们所需要用到的数字以及计算命令。众所周知，通常一般的运算（如:加﹑减﹑乘﹑除）都是必须使用两个数字的参与下进行运算操作的，但sin、cos、tan、etc这些特殊的运算操作却只有一个数字参与，所以我们需要把一个真正的JavaScript命令，赋值到一个action的区域。这个计算器的主要思想是做成一个字符串（数字的动作）去判定。当我们需要计算两个数字的总和的时候（例如∶2+3），我们需要将保存 “2+3” 的运算结果，然后在我们点击 “=” 的时候，我们需要刚刚的运算结果显示出来。现在，我们可以使用foreach（在演示区域）来显示所有的按钮（包括数字和命令）。

<div data-bind="foreach: numbers" class="numbers">
    <button data-bind="value: val, text: val, click: $parent.addNumber"></button>
</div>
<div data-bind="foreach: commands" class="commands">
    <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
</div>

正如你看到的 – 我们可以利用我们的模型（DOM模型）来演示变量（偶函数）。例如当我们点击数字按钮 – 用脚本添加数字，又例如当我们点击的命令按钮 – 在脚本中使用这些命令来计算结果。我希望你将能理解其他逻辑中的应用。

第三步∶CSS

最后，下面是计算器的样式∶
css/main.css

.calculator {
    /*css3 gradient*/
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

    display: block;
    margin: 20px auto 0;
    padding: 20px;
    position: relative;
    width: 340px;

    /*css3 border radius*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    /*css3 shadow*/
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}
.calculator button {
    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(top, #eeeeee, #cccccc);
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    color: #333;
    font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    margin: 5px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    width: 100px;
}
.calculator button:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.calculator button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.calculator p {
    margin-bottom: 15px;
    text-align: center;
}
.calculator h3 {
    background-color: rgba(255, 255, 255, 0.4);
    height: 23px;
    margin-bottom: 10px;
    padding: 8px;
    text-align: right;
}
.calculator div {
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;

    /*css3 border radius*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

查看预览下载附件

结论
这就是我们刚刚完成的数学计算器。如果你有需要，可以进行扩展，可以自定义添加一些命令按钮，相信你很容易的就可以掌握。希望大家喜欢，good luck！
译文：Script Tutorials