发表于 | 分类于 |

突发奇想造了个轮子，用于在移动开发，尤其是在微信上开发时不便于调试的问题。其实大部分时候用微信开发者工具都是可以解决的，但是有时也有在实机上测试的需求。

现在已经放在GitHub上了，地址: https://github.com/alwaysloseall/ajax-watcher

实现逻辑

核心部分是监听ajax请求的API，现在只做了依赖jQuery的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$(document).ajaxSend(function (e, jqXHR, ajaxOptions) {
    if (openStatus) {
        DOM.mask.show();
        DOM.container.show();
    }
    if (container.find('div[url="'+ajaxOptions.url+'"]').length) {
        container.find('div[url="'+ajaxOptions.url+'"]').remove();
    }
    var content = $(
        '<div class="ajax-watcher-content" url='+ ajaxOptions.url +' style="display: inline-block; overflow: auto; color: #fff; max-width: 45%; border: 1px solid #fff; padding: 10px; position: relative; height: 40%; word-wrap: break-word; word-break: normal;">\
            <span style="color: #fff; position: absolute; top: 0; right: 5px;">关闭</span>\
            <p style="color: #fff;">url:</br>'+ajaxOptions.url+'</p>\
            <p style="color: #fff;">type:  '+ajaxOptions.type+'</p>\
            <p style="color: #fff;">params:</br>'+ajaxOptions.data.replace(/\&/g, '</br>')+'</p>\
            <p style="color: #fff;">status:  loadding...</p>\
        </div>'
    );
    DOM.container.append(content);
    content.children('span').on('click', function () {
        content.remove();
    });
}).ajaxComplete(function (e, xhr, settings) {             
    var content = container.find('div[url="'+settings.url+'"]');
    content.find('p:eq(3)').html('status:  '+xhr.status+'');
    var json = $('<div style="color: #fff;"></div>');
    if (xhr.responseJSON) {
        json.JSONView(xhr.responseJSON);
        content.append('<p style="color: #fff;">response:  </p>');
        content.append(json);
    } else {
        content.append(
            '<p style="color: #fff;">responseText:  '+xhr.responseText+'</p>'
        );
    }
    if (xhr.responseJSON) {
        //ToDo
    }
});

$(document).ajaxSend(callback).ajaxComplete(callback) 用于监听通过jQuery发起的ajax请求

Others

以后要做的部分是用原生js去写这部分功能，通过重写XMLHttpRequest构造函数，在XHR实例的原型上重写open, send, onreadystatechange方法来实现

发表于 | 分类于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
module.exports = function() {
    var mysqlobj = require('mysql');
    var async = require('async');
    var pool = mysqlobj.createPool({
        host: 'host',
        user: 'user',
        password: 'password',
        database: "databases",
        //debug: true,
    });
    return {
        pool:pool,
        query:function(sql, param, callback){
            if(typeof param == "function"){
                callback = param;
                param = [];
            }
            pool.getConnection(function(err, connection) {
                if(err){
                    callback(err, [])
                    return;
                    
                }
                try{
                    connection.query( sql, param, function(err, rows) {
                        connection.release();
                        callback(err, rows)
                    });
                }
                catch(e){
                    console.log("数据库查询出错了："+sql);
                    console.log(param);
                    console.log(e);
                    
                    callback("err", null)
                }
            });
        },
        /*
        sqlParamsArr:[
            {
                sql:"update table set .......",
                params:[p1,p2],
            }
        ]
        */
        startTransaction:function(sqlParamsArr, callback){
            pool.getConnection(function(err, connection) {
                if(err){
                    callback(err, [])
                    return;
                }
                
                asyncCallFunctionList = [];
                for(var i=0; i<sqlParamsArr.length; i++){
                    asyncCallFunctionList.push(function(ii){
                        return function(callbackInner){
                            connection.query(sqlParamsArr[ii].sql,sqlParamsArr[ii].params , callbackInner);
                        }
                    }(i));
                }
                
                try{
                    
                    
                    connection.beginTransaction(function(err) {
                        if(err) {
                            callback("err");
                        }
                        async.series(asyncCallFunctionList, function(err, result) {
                            if(err) {
                                connection.rollback(function() {
                                    callback("err");
                                });
                                return ;
                            }
                            // 提交事务
                            connection.commit(function(err) {
                                if (err) { 
                                    connection.rollback(function() {
                                        callback("err");
                                    });
                                }
                                console.log('事务提交成功!');
                                callback(null);
                            });
                        });
                });
                }
                catch(e){
                    console.log("数据库查询出错了（事务处理）："+sqlParamsArr);
                    
                    console.log(e);
                    callback("err", null)
                }
            });
        },
        execSql:function(sql, param, callback){
            
        }
    }
}()

发表于 |

这是一篇用于测试的文章

  • 念两句诗算了吧

    哀吾生之须臾，羡长江之无穷