JS 冷门知识

监听网络状态

navigator.onLine 方法

代码如下：

/* 监听网络状态 */
mounted(){
    let that = this;
    window.addEventListener('online',  that.update, true);
    window.addEventListener('offline', that.update, true);
},
/* 监听方法 */
update (){
    let that = this;
    that.onLineInfo = navigator.onLine ? "online" : "offline";
},

页面可编辑：contentEditable

可以让浏览器变成编辑器

代码如下：

/* 在浏览器地址栏输入 */
data:text/html,

还可以让你编辑当前页面的文字（增 / 删）

/* 在 console 控制台输入 */
document.body.contentEditable=true

页面中某个元素相对浏览器视窗上下左右的距离

使用 getBoundingClientRect() 方法 ：用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。不包含文档卷起来的部分。该函数返回一个 object 对象，有8个属性：top，right，buttom，left，width，height，x，y

代码如下：

/* 监听头部固定 */
	
    
	
        //header
    
	
	
export default {	
    data(){	
      return{	
        titleFixed: false	
      }	
    },	
    activated(){	
      this.titleFixed = false;	
      window.addEventListener('scroll', this.handleScroll);	
    },	
    methods: {	
      handleScroll: function () {	
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;	
        this.titleFixed = offsetTop < 0;	
      }	
    }	
  }

监听元素是否进入了设备的可视区域之内

使用 IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。

所以我们可以用这个特性来处理曝光埋点，而不是用 getBoundingClientRect().top 这种更加损耗性能的方式来处理。

IntersectionObserverFun: function() {	
    let self = this;	
    let ele = self.$refs.pride_tab_fixed;	
    if( !!IntersectionObserver ){	
        let observer = new IntersectionObserver(function(){	
            let offsetTop = ele.getBoundingClientRect().top;	
            self.titleFixed = offsetTop < 0;	
        }, {	
            threshold: [1]	
        });	
        observer.observe(document.getElementsByClassName('title_box')[0]);	
    } else {	
        window.addEventListener('scroll', _.throttle(function(){	
            let offsetTop = ele.getBoundingClientRect().top;	
            self.titleFixed = offsetTop < 0;	
        }, 50));	
    }	
}, 

喜欢博主的可以点赞关注一下

---------------------------------------------------------------   END   ------------------------------------------------------------------