Show toolbar
顯示具有 Fluent Interface 標籤的文章。 顯示所有文章
顯示具有 Fluent Interface 標籤的文章。 顯示所有文章

2014年3月6日 星期四

Fluent Interface in exports of Node.js

標題:Node.js的exports使用流暢介面寫法
Node.js (main.js):
var my = require('./count.js');
var foo = new my.foo(10, 2);
foo.plus().say();
foo.times().say();
exports js (count.js):
var foo = function(m, n) {
    this.m = m;
    this.n = n;
    this.answer = 0;
    this.method = "";
};

foo.prototype.plus = function() {
    this.answer = this.m + this.n;
    this.method = "+";
    return this;
};

foo.prototype.times = function() {
    this.answer = this.m * this.n;
    this.method = "*";
    return this;
};

foo.prototype.say = function() {
    console.log("%d %s %d = %d", this.m, this.method, this.n, this.answer);
    return this;
};

exports.foo = foo;
範例結果:


說明:
在Node.js中採用流暢介面寫法,並使用exports建立一個外部js,在主程式中require後使用。

2013年10月18日 星期五

Fluent Interface with Prototype

標題:流暢介面搭配Prototype屬性的用法
JavaScript (index.html):
<span id="fatty"></span> V.S. <span id="thin"></span>
<script type="text/javascript">
var Runner = function(e) {
    this.speed = e.speed; //Meters per second
    this.time = null; //Second
    this.distance = null; //Meter
};

Runner.prototype.ready = function(e) {
    this.time = 0; //Cost time
    this.distance = e.starting; //Starting point
    return this;
};

Runner.prototype.run = function(e) {
    this.time += e.second;
    this.distance += this.speed * e.second; // Distance = Speed * Time
    return this;
};

Runner.prototype.halt = function(e) {
    this.time += e.second;
    return this;
};

Runner.prototype.result = function(e) {
    document.getElementById(e.id).innerHTML = "Distance:" + this.distance + " m, Cost time:" + this.time + " sec";
    return this;
};

var fatty = new Runner({speed:2}); //Speed: 2m/s
fatty.ready({starting:10}).run({second:30}).halt({second:5}).run({second:15}).result({id:"fatty"});

var thin = new Runner({speed:2.5}); //Speed: 2.5m/s
thin.ready({starting:0}).run({second:40}).result({id:"thin"});
</script>

範例結果:
V.S.

說明:
此程式使用流暢介面搭配Prototype屬性的方式撰寫,
計算胖與瘦的人100公尺跑步的時間(不計加減速),
條件項目:
1. 胖者速度為每秒2公尺 - Runner({speed:2})
2. 瘦者速度為每秒2.5公尺 - Runner({speed:2.5})
3. 瘦者禮讓胖者由10公尺處起跑 - ready({starting:10})
4. 胖者跑了30秒以後,休息了5秒,再繼續跑了15秒 - run({second:30}).halt({second:5}).run({second:15})
5. 瘦者跑了40秒全程無休息 - run({second:40})

2013年5月1日 星期三

Fluent interface in JavaScript

標題:JavaScript的流暢介面寫法
JavaScript (main.js):
var brain = function() {
    this.echo = "I am ";
    this.word = function(name) {
        this.echo += name;
        return this;
    };
    this.say = function() {
        alert(this.echo);
        return this;
    };
};
var brain = new brain();
brain.word("QQBoxy").say();

說明:
在jQuery中常看見流暢介面(Fluent interface)的寫法,
這對程式的理解上有著極大的幫助,
如同範例程式中大腦(brain)要處理文字(word)然後講出(say)我要講的話,
如此一來便能非常直覺了解程式所要執行的動作。

2011年10月31日 星期一

PHP Fluent Interface

標題:Fluent Interface 連串執行 function
PHP (index.php):
<?php
class codeboxy {
    protected $str;
    protected $num = 0;
    public function a() {
        $this->str .= 'a';
        $this->num += 1;
        return $this;
    }
    public function b() {
        $this->str .= 'b';
        $this->num += 2;
        return $this;
    }
    public function display() {
        return $this->str . $this->num;
    }
}
$test = new codeboxy();
$test->a()->b()->a()->b(); // "a  b  a  b" . (1 + 2 + 1 + 2)
echo $test->display(); // abab6
?>
結果:
說明:
使用PHP連貫的執行Function並Return回物件。