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

• 调试模式下，单击选中某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 是属性位置。