<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Functional Javascript</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
<script type="text/javascript" src="../../lib/d3.js"></script>
</head>
<body>
<script type="text/javascript">
function SimpleWidget(spec) {
var instance = {}; // <-- A
var headline, description; // <-- B
instance.render = function () {
var div = d3.select('body').append("div");
div.append("h3").text(headline); // <-- C
div.attr("class", "box")
.attr("style", "color:" + spec.color) // <-- D
.append("p")
.text(description); // <-- E
return instance; // <-- F
};
instance.headline = function (h) {
if (!arguments.length) return headline; // <-- G
headline = h;
return instance; // <-- H
};
instance.description = function (d) {
if (!arguments.length) return description;
description = d;
return instance;
};
return instance; // <-- I
}
var widget = SimpleWidget({color: "#6495ed"})
.headline("Simple Widget")
.description("This is a simple widget demonstrating functional javascript.");
widget.render();
</script>
</body>
</html>
重點(diǎn)在G標(biāo)記和H標(biāo)記
headline在參數(shù)不同的情況下,可以分別作為setter和getter
不傳參數(shù),從G返回一個(gè)子對(duì)象headline(父對(duì)象的屬性),headline是getter
傳入?yún)?shù),從H返回一個(gè)父對(duì)象instance(設(shè)置了屬性的),headline是setter
在返回的instance上可以立刻執(zhí)行另一個(gè)函數(shù),此即為鏈?zhǔn)秸{(diào)用.
