Skip to content

Commit b3b727e

Browse files
committed
feat(jQuery): add Calculator
1 parent d36019c commit b3b727e

File tree

6 files changed

+104
-1
lines changed

6 files changed

+104
-1
lines changed

ja/jQuery/README.md

+35-1
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,38 @@ jQueryでは`$.fn`を拡張する事で、`$()`の返り値であるjQueryオブ
1313
<script src="greenify.js"></script>
1414
```
1515

16-
## どういう仕組み?
16+
## どういう仕組み?
17+
18+
## 実装してみよう
19+
20+
`calculator`という拡張可能な計算機をjQuery Pluginと同じ方法で作ってみたいと思います。
21+
22+
`calculator` は以下のような形となります。
23+
24+
[import, calculator.js](../../src/jQuery/calculator.js)
25+
26+
`$.fn`と同様に`prototype`へのaliasを貼っているだけのただのコンストラクタ関数です。
27+
28+
```
29+
calculator.fn = calculator.prototype;
30+
```
31+
32+
`calculator(初期値)`と書けるようにしているため、少し特殊なコンストラクタとなっていますが、この拡張の仕組みとは関係ないのでとりあえず置いておきましょう。
33+
34+
[calculator.js](#calculator.js)には何も実装が入ってないので、プラグインで四則演算の実装を追加してみます。
35+
36+
[import, calculator-plugin.js](../../src/jQuery/calculator-plugin.js)
37+
38+
[calculator-plugin.js](#calculator-plugin.js)では、`calculator.fn.add`というように`add`というメソッドを追加しています。
39+
40+
また、モジュールで依存関係を示していますがやっていることはjQueryと同じで、[calculator.js](#calculator.js)を読み込んでから[calculator-plugin.js](#calculator-plugin.js)を読み込んでいるだけですね。
41+
42+
```html
43+
<script src="jquery.js"></script>
44+
<script src="greenify.js"></script>
45+
```
46+
47+
これを使うと`calculator#add`といったメソッドが利用できるようになるので、以下のように書くことが出来ます。
48+
49+
[import, calculator-example.js](../../src/jQuery/calculator-example.js)
50+

src/jQuery/Calculator-class.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
function Calculator(value) {
3+
this.value = value;
4+
}
5+
// alias
6+
Calculator.fn = Calculator.prototype;
7+
export default Calculator;

src/jQuery/calculator-example.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
import assert from "assert";
3+
import calculator from "./calculator";
4+
import "./calculator-plugin"; // Extend
5+
6+
var resultValue = calculator(0).add(10).multi(10).value;
7+
assert.equal(resultValue, 10 * 10);

src/jQuery/calculator-plugin.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use strict";
2+
import calculator from "./calculator";
3+
calculator.fn.add = function (x) {
4+
this.value += x;
5+
return this;
6+
};
7+
calculator.fn.sub = function (x) {
8+
this.value -= x;
9+
return this;
10+
};
11+
calculator.fn.multi = function (x) {
12+
this.value *= x;
13+
return this;
14+
};
15+
calculator.fn.div = function (x) {
16+
this.value /= x;
17+
return this;
18+
};

src/jQuery/calculator.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
function calculator(value) {
3+
if (!(this instanceof calculator)) {
4+
return new calculator(value);
5+
}
6+
this.value = value;
7+
}
8+
// alias
9+
calculator.fn = calculator.prototype;
10+
export default calculator;

test/jQuery/calculator-plugin-test.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
import assert from "power-assert";
4+
import calculator from "../../src/jQuery/calculator";
5+
import "../../src/jQuery/calculator-plugin";
6+
describe("calculator-plugin", function () {
7+
describe("#add", function () {
8+
it("should add value", function () {
9+
assert.equal(calculator(0).add(10).value, 10);
10+
});
11+
});
12+
describe("#sub", function () {
13+
it("should subtraction value", function () {
14+
assert.equal(calculator(0).sub(10).value, -10);
15+
});
16+
});
17+
describe("#multi", function () {
18+
it("should multiply value", function () {
19+
assert.equal(calculator(0).add(10).multi(10).value, 10 * 10);
20+
});
21+
});
22+
describe("#div", function () {
23+
it("should subtraction value", function () {
24+
assert.equal(calculator(0).add(10).div(2).value, 10 / 2);
25+
});
26+
});
27+
});

0 commit comments

Comments
 (0)