Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb3b727e

Browse files
committed
feat(jQuery): add Calculator
1 parentd36019c commitb3b727e

File tree

6 files changed

+104
-1
lines changed

6 files changed

+104
-1
lines changed

‎ja/jQuery/README.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,38 @@ jQueryでは`$.fn`を拡張する事で、`$()`の返り値であるjQueryオブ
1313
<scriptsrc="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+
<scriptsrc="jquery.js"></script>
44+
<scriptsrc="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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
functionCalculator(value){
3+
this.value=value;
4+
}
5+
// alias
6+
Calculator.fn=Calculator.prototype;
7+
exportdefaultCalculator;

‎src/jQuery/calculator-example.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
importassertfrom"assert";
3+
importcalculatorfrom"./calculator";
4+
import"./calculator-plugin";// Extend
5+
6+
varresultValue=calculator(0).add(10).multi(10).value;
7+
assert.equal(resultValue,10*10);

‎src/jQuery/calculator-plugin.js

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

‎src/jQuery/calculator.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
functioncalculator(value){
3+
if(!(thisinstanceofcalculator)){
4+
returnnewcalculator(value);
5+
}
6+
this.value=value;
7+
}
8+
// alias
9+
calculator.fn=calculator.prototype;
10+
exportdefaultcalculator;

‎test/jQuery/calculator-plugin-test.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
importassertfrom"power-assert";
4+
importcalculatorfrom"../../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)
[8]ページ先頭
©2009-2025 Movatter.jp