Skip to content

Commit 49e3ac0

Browse files
CC11001100CC11001100
committed
Update jQuery-hook.js
1 parent f0ebf15 commit 49e3ac0

File tree

1 file changed

+125
-102
lines changed

1 file changed

+125
-102
lines changed

‎jQuery-hook.js

+125-102
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,127 @@
88
// @match *://*/*
99
// @run-at document-start
1010
// @grant none
11-
// @require file://D:\workspace\jQuery-hook\jQuery-hook.js
1211
// ==/UserScript==
1312
(() => {
1413

15-
// 尽量唯一有区分度即可，您可自定义为自己的ID
14+
// 可自定义的一个变量前缀，尽量唯一有区分度即可，可以替换为为自己的ID
1615
const globalUniqPrefix = "cc11001100";
1716

1817
// 用于控制打印在控制台的消息的大小
1918
const consoleLogFontSize = 12;
2019

21-
// 在第一次设置jquery的时候添加Hook，jQuery初始化的时候会添加一个名为$的全局变量，在添加这个变量的时候对其动一些手脚
22-
Object.defineProperty(window, "$", {
23-
set: $ => {
20+
// ----------------------------------------------- -----------------------------------------------------------------
2421

25-
// 为jquery的各种方法添加Hook
26-
try {
27-
addHook($);
28-
} catch (e) {
29-
const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
30-
const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
22+
/**
23+
* 用于统一构建待颜色的日志输出，采用构建者模式
24+
*
25+
* from: https://github.com/JSREI/js-color-log
26+
*/
27+
class ColorLogBuilder {
28+
29+
/**
30+
* 创建一条日志，调用show()方法将其打印到控制台
31+
*
32+
* 因为认为字体颜色是没有区分度的，所以这里就不支持指定字体的颜色，字体恒定为黑色
33+
*
34+
* @param normalTextBackgroundColor {string} 此条日志中普通文本的背景色
35+
* @param highlightTextBackgroundColor {string} 此条日志中要高亮的文本的背景色
36+
* @param _consoleLogFontSize {string} 日志的大小
37+
*/
38+
constructor(normalTextBackgroundColor = "#FFFFFF", highlightTextBackgroundColor = "#FFFFFF", _consoleLogFontSize = consoleLogFontSize) {
39+
this.normalTextBackgroundColor = normalTextBackgroundColor;
40+
this.highlightTextBackgroundColor = highlightTextBackgroundColor;
41+
this.consoleLogFontSize = _consoleLogFontSize;
42+
this.messageArray = [];
43+
44+
// 每天日志都使用统一的前缀，在创建的时候就设置好
45+
// 先是一个日期，然后是插件的名字，以便与其它工具的输出相区分
46+
// 此处的统一前缀自行修改，因为使用的时候都是拷贝过去的
47+
this.append(`[${this.nowTimeString()}] `).append("jQuery Hook: ");
48+
}
3149

32-
const message = [
50+
/**
51+
* 往日志中追加普通类型的信息
52+
*
53+
* @param msg {string}
54+
* @return {ColorLogBuilder}
55+
*/
56+
append(msg) {
57+
this.appendNormal(msg);
58+
return this;
59+
}
3360

34-
normalStyle, now(),
61+
/**
62+
* 往日志中追加普通类型的信息
63+
*
64+
* @param msg {string}
65+
* @return {ColorLogBuilder}
66+
*/
67+
appendNormal(msg) {
68+
this.messageArray.push(`color: black; background: ${this.normalTextBackgroundColor}; font-size: ${this.consoleLogFontSize}px;`);
69+
this.messageArray.push(msg);
70+
return this;
71+
}
3572

36-
normalStyle, "jQuery Monitor: ",
73+
/**
74+
* 往日志中追加高亮的内容
75+
*
76+
* @param msg {string}
77+
*/
78+
appendHighlight(msg) {
79+
this.messageArray.push(`color: black; background: ${this.highlightTextBackgroundColor}; font-size: ${this.consoleLogFontSize}px; font-weight: bold;`);
80+
this.messageArray.push(msg);
81+
return this;
82+
}
3783

38-
normalStyle, "add hook error, msg = ",
84+
/**
85+
* 把当前这条日志打印出来
86+
*/
87+
show() {
88+
console.log(this.genFormatArray(this.messageArray), ...this.messageArray);
89+
}
3990

40-
valueStyle, `${e}`,];
41-
console.log(genFormatArray(message), ...message);
91+
nowTimeString(fmt = "yyyy-MM-dd HH:mm:ss") {
92+
const now = new Date();
93+
let o = {
94+
"M+": now.getMonth() + 1, "d+": now.getDate(), //日
95+
"H+": now.getHours(), //小时
96+
"m+": now.getMinutes(), //分
97+
"s+": now.getSeconds(), //秒
98+
"q+": Math.floor((now.getMonth() + 3) / 3), //季度
99+
"S": now.getMilliseconds() //毫秒
100+
};
101+
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (now.getFullYear() + "").substr(4 - RegExp.$1.length));
102+
for (let k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
103+
return fmt;
104+
}
105+
106+
genFormatArray(messageAndStyleArray) {
107+
const formatArray = [];
108+
for (let i = 0, end = messageAndStyleArray.length / 2; i < end; i++) {
109+
formatArray.push("%c%s");
42110
}
111+
return formatArray.join("");
112+
}
113+
114+
}
43115

44-
// 删除set描述符拦截，恢复正常赋值，假装啥都没发生过...
116+
// ----------------------------------------------- -----------------------------------------------------------------
117+
118+
// 在第一次初始化jQuery的时候添加Hook，jQuery初始化的时候会添加一个名为$的全局变量，在添加这个变量的时候对其动一些手脚
119+
Object.defineProperty(window, "$", {
120+
set: $ => {
121+
122+
// 为jquery的各种方法添加Hook
123+
try {
124+
addHook($);
125+
} catch (e) {
126+
new ColorLogBuilder("#FF6766", "#E50000")
127+
.append("add hook error, msg = ")
128+
.appendHighlight(e)
129+
.show();
130+
}
131+
// 删除set描述符拦截，恢复正常赋值，假装啥都没发生过，但实际上已经狸猫换太子了...
45132
delete window["$"];
46133
window["$"] = $;
47134
}, configurable: true
@@ -57,17 +144,9 @@
57144

58145
addAjaxHook($);
59146

60-
const valueStyle = `color: black; background: #669934; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
61-
const normalStyle = `color: black; background: #65CC66; font-size: ${consoleLogFontSize}px;`;
62-
63-
const message = [
64-
65-
normalStyle, now(),
66-
67-
normalStyle, "jQuery Monitor: ",
68-
69-
normalStyle, "设置jQuery Hook成功！",];
70-
console.log(genFormatArray(message), ...message);
147+
new ColorLogBuilder("#65CC66", "#669934")
148+
.append("在当前页面上检测到jQuery的加载，添加jQuery Hook完成")
149+
.show();
71150
}
72151

73152
/**
@@ -77,37 +156,20 @@
77156
*/
78157
function addAjaxHook($) {
79158
if (!$["ajaxSetup"]) {
80-
const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
81-
const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
82-
83-
const message = [
84-
85-
normalStyle, now(),
86-
87-
normalStyle, "jQuery Monitor: ",
88-
89-
normalStyle, "$不是jQuery对象，没有 ajaxSetup 属性，因此不添加Ajax Hook",];
90-
console.log(genFormatArray(message), ...message);
159+
new ColorLogBuilder("#FF6766", "#E50000")
160+
.appendHighlight("$不是jQuery对象，没有 ajaxSetup 属性，因此不添加Ajax Hook")
161+
.show();
91162
return;
92163
}
93164
const oldAjaxSetUp = $.ajaxSetup;
94165
$.ajaxSetup = function () {
95166
try {
96167
if (arguments.length === 1) {
97-
const valueStyle = `color: black; background: #669934; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
98-
const normalStyle = `color: black; background: #65CC66; font-size: ${consoleLogFontSize}px;`;
99-
100-
const message = [
101-
102-
normalStyle, now(),
103-
104-
normalStyle, "jQuery Monitor: ",
105-
106-
normalStyle, "检测到ajaxSetup全局拦截器设置请求参数",
107-
108-
normalStyle, `, code location = ${getCodeLocation("$.ajaxSetup")}`];
109-
console.log(genFormatArray(message), ...message);
110-
console.log(arguments);
168+
const {formatEventName, eventFuncGlobalName} = storeToWindow("ajaxSetup", arguments[0]);
169+
new ColorLogBuilder("#65CC66", "#669934")
170+
.append("检测到ajaxSetup全局拦截器设置请求参数，已经挂载到全局变量：")
171+
.appendHighlight(eventFuncGlobalName)
172+
.show();
111173
}
112174
} catch (e) {
113175
console.error(e);
@@ -123,17 +185,9 @@
123185
*/
124186
function addEventHook($) {
125187
if (!$["fn"]) {
126-
const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
127-
const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
128-
129-
const message = [
130-
131-
normalStyle, now(),
132-
133-
normalStyle, "jQuery Monitor: ",
134-
135-
normalStyle, "$不是jQuery对象，没有 fn 属性，因此不添加 Event Hook",];
136-
console.log(genFormatArray(message), ...message);
188+
new ColorLogBuilder("#FF6766", "#E50000")
189+
.appendHighlight("$不是jQuery对象，没有 fn 属性，因此不添加 Event Hook")
190+
.show();
137191
return;
138192
}
139193

@@ -145,17 +199,9 @@
145199
try {
146200
setEventFunctionNameToDomObjectAttribute(this, eventName, arguments[0]);
147201
} catch (e) {
148-
const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
149-
const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
150-
151-
const message = [
152-
153-
normalStyle, now(),
154-
155-
normalStyle, "jQuery Monitor: ",
156-
157-
normalStyle, `为jQuery添加${eventName}类型的事件的Hook时发生错误： ${e}`,];
158-
console.log(genFormatArray(message), ...message);
202+
new ColorLogBuilder("#FF6766", "#E50000")
203+
.appendHighlight(`为jQuery添加${eventName}类型的事件的Hook时发生错误： ${e}`)
204+
.show();
159205
}
160206
return old.apply(this, arguments);
161207
}
@@ -178,17 +224,9 @@
178224
setEventFunctionNameToDomObjectAttribute(this, eventName, eventFunction);
179225
}
180226
} catch (e) {
181-
const valueStyle = `color: black; background: #E50000; font-size: ${consoleLogFontSize}px; font-weight: bold;`;
182-
const normalStyle = `color: black; background: #FF6766; font-size: ${consoleLogFontSize}px;`;
183-
184-
const message = [
185-
186-
normalStyle, now(),
187-
188-
normalStyle, "jQuery Monitor: ",
189-
190-
normalStyle, `为jQuery添加on方法的Hook时发生错误： ${e}`,];
191-
console.log(genFormatArray(message), ...message);
227+
new ColorLogBuilder("#FF6766", "#E50000")
228+
.appendHighlight(`为jQuery添加on方法的Hook时发生错误： ${e}`)
229+
.show();
192230
}
193231
return fnOnHolder.apply(this, arguments);
194232
}
@@ -301,21 +339,6 @@
301339

302340
// ----------------------------------------------- -----------------------------------------------------------------
303341

304-
function now() {
305-
// 东八区专属...
306-
return "[" + new Date(new Date().getTime() + 1000 * 60 * 60 * 8).toJSON().replace("T", " ").replace("Z", "") + "] ";
307-
}
308-
309-
function genFormatArray(messageAndStyleArray) {
310-
const formatArray = [];
311-
for (let i = 0, end = messageAndStyleArray.length / 2; i < end; i++) {
312-
formatArray.push("%c%s");
313-
}
314-
return formatArray.join("");
315-
}
316-
317-
// ----------------------------------------------- -----------------------------------------------------------------
318-
319342
/**
320343
* 解析当前代码的位置，以便能够直接定位到事件触发的代码位置
321344
*

0 commit comments

Comments
 (0)