| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -13,4 +13,38 @@ jQueryでは`$.fn`を拡張する事で、`$()`の返り値であるjQueryオブ | |||
| 13 | 13 | <script src="greenify.js"></script> | |
| 14 | 14 | ``` | |
| 15 | 15 | ||
| 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 | + | ||
| Original file line number | Diff line number | Diff 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; | ||
| Original file line number | Diff line number | Diff 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); | ||
| Original file line number | Diff line number | Diff 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 | + }; | ||
| Original file line number | Diff line number | Diff 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; | ||
| Original file line number | Diff line number | Diff 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 | + }); | ||
| Back | FazBrowse Home | New Git URL |
0 commit comments