前端油猴脚本开发小技巧笔记

• 调试模式下，单击选中某dom代码，控制台里可以用$0访问到该dom对象。

• $0.__vue___ 可以访问到该dom对应的vue对象。

• jquery 对象 a,a[0]是对应的原生dom对象，$(原生对象) 得到对应的 jquery 对象。

• jquery 选择器，加空格是匹配下一级，紧密排列是且，[a=b]匹配属性。jquery对象find可以继续筛选下一级。

• 控制台直接输入函数名，可以打印出该函数的代码，继续点击代码可以跳转到对应的代码位置。

• 查找某个按钮绑定的vue原始函数，可以通过1、2、5来找。

• 监听属性

  1. function spyObjSetter(obj, prop, func, spyId) {const propertyName = Object.getOwnPropertyDescriptor(obj, prop);var setter = propertyName.set;if(spyId && propertyName.set['spyId'] == spyId) {return;}var proObj = {set(value) {var old = obj[prop];setter.call(obj, value);if(old != value) {func(old, value);}}}if(spyId) {proObj.set['spyId'] = spyId;}Object.defineProperty(obj, prop, proObj);
     }function spyObjGetter(obj, prop, func) {const propertyName = Object.getOwnPropertyDescriptor(obj, prop);var getter = propertyName.get;Object.defineProperty(obj, prop, {get() {getter.call(obj);func();}});
     }

• 监听函数

    Function.prototype.after = function(fun){var self = this;return function(){var agent = self.apply(this,arguments);fun.apply(this,arguments);return agent;}}Function.prototype.before = function(fun){var self = this;return function(){fun.apply(this,arguments);var agent = self.apply(this,arguments);return agent;}}getUser = getUser.before(function(){//代码}).after(function(){//代码})

• setTimeout这么写 setTimeout(function(){vueAopOne()}, 500);    

• 无法监听的到值可以无脑setTimeout低配替代。

• 查找某个按钮绑定事件是哪个函数，可以某个执行位置打断点，然后向上查找调用栈，再利用5查找。

• vue对象可以通过parent和child来寻找指定对象。

• vue代码method里的方法位置是vue对象的根目录，data里的变量也是。

• vue.$opition.propsData 是属性位置。