1.Release npm plugin "ajax-hook"

2.Modify domo and readme.md 3.Use webpack as module bundler
ShuangGod · Dec 10, 2016 · 5c4ef10 · 5c4ef10
1 parent b4ad653
commit 5c4ef10
Show file tree

Hide file tree

Showing 13 changed files with 206 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .idea
 .idea
 .DS_Store
+/node_modules
 
diff --git a/README.md b/README.md
@@ -9,10 +9,12 @@ Hook Javascript global XMLHttpRequest  object。 And change the  default AJAX
 
 ## How to use
 
-1. include the script file "wendu.ajaxhook.js"
+### **Using by script tag**
+
+1. include the script file "ajaxhook.js"
 
    ```html
-   <script src="wendu.ajaxhook.js"></script>
+   <script src="ajaxhook.js"></script>
    ```
 
 2. hook the callbacks and functions you want .
@@ -54,6 +56,31 @@ The result :
 
 **See the demo "demo.html" for more details.**
 
+### Using in commonJs module build environment
+
+Suppose you are using webpack as your  module bundler, firstly Install ajax-hook plugin:
+
+```javascript
+npm install ajax-hook --save-dev
+```
+And then require the ajax-hook module:
+```javascript
+const ah=require("ajax-hook")
+ah.hookAjax({
+    onreadystatechange:function(xhr){
+      ...
+    }
+    onload:function(xhr){
+      ... 
+    },
+   ...
+})
+...
+ah.unHookAjax()
+```
+
+
+
 ## API
 
 ### hookAjax(ob)

diff --git a/demo.html → demon/demo.html b/demo.html → demon/demo.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>
     <meta name="keywords" content="Ajax hook Demo">
     <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
-    <script src="wendu.ajaxhook.min.js"></script>
+    <script src="../dist/wendu.ajaxhook.min.js"></script>
 
 </head>
 <style>

diff --git a/demon/demoCommonJs.html b/demon/demoCommonJs.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head lang="zh-cmn-Hans">
+    <meta charset="UTF-8">
+    <title>Ajax hook Demo</title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+    <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>
+    <meta name="keywords" content="Ajax hook Demo">
+    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
+    <script src="../dist/test.min.js"></script>
+
+</head>
+<style>
+    html {
+        font-size: 20px;
+        -webkit-user-select: none;
+    }
+</style>
+<body>
+<div style="background: #000; font-size: 38px; color: #ffef68; text-shadow: 2px 2px 10px #ffef68; width: 400px; height: 400px; text-align: center">
+   <div style="padding-top: 100px"> Ajax Hook !</div>
+</div>
+open console panel to view log.
+<script>
+//    $.get().done(function(d){
+//        console.log(d.substr(0,30)+"...")
+//        //use original XMLHttpRequest
+//        console.log("unhook")
+//        $.get().done(function(d){
+//            console.log(d.substr(0,10))
+//        })
+//    })
+
+</script>
+</body>
+</html>
diff --git a/demon/test.js b/demon/test.js
@@ -0,0 +1,42 @@
+/**
+ * Created by du on 16/12/10.
+ */
+
+const ah=require("ajax-hook")
+
+ah.hookAjax({
+    onreadystatechange:function(xhr){
+        console.log("onreadystatechange called: %O",xhr)
+        //return true
+
+    },
+    onload:function(xhr){
+        console.log("onload called: %O",xhr)
+        xhr.responseText="hook"+xhr.responseText;
+        //return true;
+    },
+    open:function(arg,xhr){
+        console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2],xhr)
+        arg[1]+="?hook_tag=1";
+        //统一添加请求头
+
+    },
+    send:function(arg,xhr){
+        console.log("send called: %O",arg[0])
+        xhr.setRequestHeader("_custom_header_","ajaxhook")
+    },
+    setRequestHeader:function(arg,xhr){
+        console.log("setRequestHeader called!",arg)
+    }
+})
+
+$.get().done(function(d){
+    console.log(d.substr(0,30)+"...")
+    //use original XMLHttpRequest
+    console.log("unhook")
+    ah.unHookAjax()
+    $.get().done(function(d){
+        console.log(d.substr(0,10))
+    })
+
+})
diff --git a/dist/test.min.js b/dist/test.min.js
diff --git a/dist/wendu.ajaxhook.min.js b/dist/wendu.ajaxhook.min.js
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "ajax-hooks",
+  "version": "1.0.0",
+  "author": {
+    "name": "wendux",
+    "email": "[email protected]",
+    "url": "https://github.com/wendux"
+  },
+  "description": "Hook Javascript global XMLHttpRequest  object。 And change the  default AJAX   request and response .",
+  "keywords": [
+    "ajax hook",
+    "hook ajax",
+    "ajax-hook",
+    "wendux"
+  ],
+  "respository": {
+    "type": "git",
+    "url": "https://github.com/wendux/Neat/Ajax-hook"
+  },
+  "bugs": {
+    "url": "https://github.com/wendux/Ajax-hook/issues"
+  },
+  "scripts": {
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "ajax-hook": "^1.0.0",
+    "webpack": "^1.13.2"
+  }
+}
diff --git a/src/.npmignore b/src/.npmignore
@@ -0,0 +1 @@
+/extend
diff --git a/wendu.ajaxhook.js → src/ajaxhook.js b/wendu.ajaxhook.js → src/ajaxhook.js
@@ -1,23 +1,19 @@
 /*
  * author: wendu
- * email: duwen32767@163.com
+ * email: 824783146@qq.com
  * source code: https://github.com/wendux/Ajax-hook
  **/
-
 !function (ob) {
     var realXMLHttpRequest;
     ob.hookAjax = function (funs) {
-        "use strict";
         realXMLHttpRequest = realXMLHttpRequest || XMLHttpRequest
         XMLHttpRequest = function () {
             this.xhr = new realXMLHttpRequest;
             for (var attr in this.xhr) {
                 var type = "";
                 try {
                     type = typeof this.xhr[attr]
-                } catch (e) {
-
-                }
+                } catch (e) {}
                 if (type === "function") {
                     this[attr] = hookfun(attr);
                 } else {
@@ -31,16 +27,16 @@
 
         function getFactory(attr) {
             return function () {
-                return this[attr+"_"]||this.xhr[attr]
+                return this[attr + "_"] || this.xhr[attr]
             }
         }
 
         function setFactory(attr) {
             return function (f) {
                 var xhr = this.xhr;
-                var that=this;
-                if(attr.indexOf("on")!=0){
-                    this[attr+"_"]=f;
+                var that = this;
+                if (attr.indexOf("on") != 0) {
+                    this[attr + "_"] = f;
                     return;
                 }
                 if (funs[attr]) {
@@ -56,18 +52,17 @@
         function hookfun(fun) {
             return function () {
                 var args = [].slice.call(arguments)
-                if (funs[fun] && funs[fun].call(this, args,this.xhr)) {
+                if (funs[fun] && funs[fun].call(this, args, this.xhr)) {
                     return;
                 }
                 this.xhr[fun].apply(this.xhr, args);
             }
         }
         return realXMLHttpRequest;
     }
-
     ob.unHookAjax = function () {
         if (realXMLHttpRequest)  XMLHttpRequest = realXMLHttpRequest;
-        realXMLHttpRequest=undefined;
+        realXMLHttpRequest = undefined;
     }
-
 }(window)
+//}(module.exports)
diff --git a/src/package.json b/src/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "ajax-hook",
+  "version": "1.0.0",
+  "main":"ajaxhook.js",
+  "description": "Hook Javascript global XMLHttpRequest  object。 And change the  default AJAX   request and response.",
+
+  "keywords": [
+    "ajax hook",
+    "hook ajax",
+    "ajax-hook",
+    "wendux"
+   ],
+  "license": "MIT",
+
+  "author": {
+    "name":"wendux",
+    "email":"[email protected]",
+    "url":"https://github.com/wendux"
+  },
+  "respository": {
+    "type": "git",
+    "url": "https://github.com/wendux/Neat/Ajax-hook"
+  },
+  "bugs": {
+    "url": "https://github.com/wendux/Ajax-hook/issues"
+  },
+  "homepage": "https://github.com/wendux"
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,26 @@
+/**
+ * Created by du on 16/9/24.
+ */
+var path = require('path');
+var fs = require("fs");
+var webpack = require('webpack');
+module.exports = {
+    entry: {
+        "wendu.ajaxhook": "./src/ajaxhook.js",
+        "test" :["./demon/test.js"]
+    },
+    output: {
+        path: "./dist",
+        filename: "[name].min.js"
+    },
+
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: true
+            }
+        }),
+    ]
+}
+
+
diff --git a/wendu.ajaxhook.min.js b/wendu.ajaxhook.min.js