Merge pull request #23 from azu/jQuery-plguin

azu · azu · commit 4905c55360b7 · 2015-08-29T23:48:14.000+09:00
jQueryプラグインのサンプル実装
diff --git a/.eslintrc b/.eslintrc
@@ -21,6 +21,7 @@
     "es6": true,
     "node": true,
     "browser": true,
+    "jquery": true,
     "mocha": true
   },
   "ecmaFeatures": {
diff --git a/ja/jQuery/README.md b/ja/jQuery/README.md
@@ -1,8 +1,16 @@
-# jQueryのPlugin Pattern
+# jQueryのPlugin
 
-!CODEFILE "../../src/jQuery/jquery.js"
+jQueryでは`$.fn`を拡張する事で、`$()`の返り値であるjQueryオブジェクトにメソッドを追加することが出来ます。
 
-```js
-var jQuery = require("jquery");
-jQuery(document.body);
-```
+次の`greenify`プラグインでは、`$(document.body).greenify();`というメソッド呼び出しが可能になります。
+
+!CODEFILE "../../src/jQuery/greenify.js"
+
+実際に利用するためには、`jquery.js`を読み込んだ後に`greenify.js`を読み込ませる必要があります。
+
+```html
+<script src="jquery.js"></script>
+<script src="greenify.js"></script>
+```
+
+## どういう仕組み?
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "eslint": "eslint src/**/*.js",
     "eslint:md": "eslint --ext .md ja/**/*.md",
     "textlint": "summary-to-path | xargs textlint --rule spellcheck-tech-word",
-    "test": "npm run textlint && npm run eslint:md && npm run eslint && npm run build"
+    "test": "mocha --recursive && npm run textlint && npm run eslint:md && npm run eslint && npm run build"
   },
   "keywords": [
     "plugin",
@@ -33,9 +33,16 @@
   "devDependencies": {
     "eslint": "^1.3.0",
     "eslint-plugin-markdown": "git://github.com/eslint/eslint-plugin-markdown.git",
+    "espower-babel": "^3.3.0",
     "gitbook-cli": "^0.3.4",
     "gitbook-summary-to-path": "^1.0.1",
+    "jsdom": "^3.0.0",
+    "mocha": "^2.2.5",
+    "power-assert": "^1.0.0",
     "textlint": "^3.2.0",
     "textlint-rule-spellcheck-tech-word": "^4.0.1"
+  },
+  "dependencies": {
+    "jquery": "^2.1.4"
   }
 }
diff --git a/src/jQuery/greenify.js b/src/jQuery/greenify.js
@@ -0,0 +1,7 @@
+"use strict";
+(function ($) {
+    $.fn.greenify = function () {
+        this.css("color", "green");
+        return this;
+    };
+})(jQuery);
diff --git a/src/jQuery/jquery.js b/src/jQuery/jquery.js
diff --git a/src/jQuery/package.json b/src/jQuery/package.json
diff --git a/test/jQuery/fixtures/testbed.html b/test/jQuery/fixtures/testbed.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/test/jQuery/greenify-test.js b/test/jQuery/greenify-test.js
@@ -0,0 +1,28 @@
+// LICENSE : MIT
+"use strict";
+import jsdom from "jsdom";
+import assert from "power-assert";
+import fs from "fs";
+const testbed = fs.readFileSync(__dirname + "/fixtures/testbed.html", "utf-8");
+const jquery = fs.readFileSync(__dirname + "/../../node_modules/jquery/dist/jquery.js", "utf-8");
+const greenify = fs.readFileSync(__dirname + "/../../src/jQuery/greenify.js", "utf-8");
+describe("greenify", function () {
+    var $, document;
+    before(done => {
+        jsdom.env({
+            html: testbed,
+            src: [jquery, greenify],
+            done: function (err, window) {
+                document = window.document;
+                $ = window.$;
+                done();
+            }
+        });
+    });
+    it("should extend $.prototype with greenify", function () {
+        assert(typeof $ !== "undefined");
+        assert($.fn.greenify != null);
+        assert($(document.body).greenify != null);
+        assert($(document.body).greenify() instanceof $);
+    });
+});
diff --git a/test/mocha.opts b/test/mocha.opts
@@ -0,0 +1 @@
+--compilers js:espower-babel/guess
