GaHingZ 发布的文章

Vue 第一个组件,浏览器后退无法触发beforeRouteLeave的问题与解决


已提issue: https://github.com/vuejs/vue-router/issues/1951

现象

加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为待监听组件)时,正常跳转其他页面可以触发beforeRouteLeave。 但是按浏览器的后退按钮监听不到该事件。

解决方案

目前采用比较土且不实用的解决方案。加一层组件,再router.push到待监听组件,使得待监听组件非第一个组件,可以正常监听beforeRouteLeave事件。

注意点:

由于打乱了原来的路由。需要在main.js中添加全局的路由监听

router.beforeEach((to, from, next) => {
  if (to is '用于跳转的组件' && from is '待监听组件') {
    router.go(-1) 
    next(false)
  } else {
    next()
  }
  // 这样当从一个普通页面A进入待监听组件时,在待监听组件中按返回键时能正常进入A
})

存在的问题:

  1. 若访问不是访问中转组件而是直接访问待监听组件,则没有效果
  2. 增加路由后,多了白屏时间。

可能官方有什么解决方案,或者我用错了。欢迎评论~


Android模拟触控解决方案


数据采集

Android端

重写onTouchEvent,收集event数据,以一定的编码传输

public boolean onTouchEvent(MotionEvent event){
    String rec="";
    int pointerCount = event.getPointerCount();
    if (pointerCount > MAX_TOUCHPOINTS) {
        pointerCount = MAX_TOUCHPOINTS;
    }
    int opt=event.getAction();
    boolean isFirst=true;
    if(opt==2){
        for (int i = 0; i < pointerCount; i++) {
            int id = event.getPointerId(i);
            int x = (int) event.getX(i);
            int y = (int) event.getY(i);
            if(isFirst){isFirst=false;}
            else rec+=";";
            rec+=id+",2,"+x+","+y;
        }
    }else if(opt==0||(opt-5)%256==0){
        //为了简化,我们假设这过程不会进行MOVE
        int ind=(event.getAction()-5)/256;
        for (int i = 0; i < pointerCount; i++) {
            if(i==ind){
                int id = event.getPointerId(i);
                int x = (int) event.getX(i);
                int y = (int) event.getY(i);
                if(isFirst){isFirst=false;}
                else rec+=";";
                rec+=id+",0,"+x+","+y;
                break;
            }
        }
    }else if(opt==1||(opt-6)%256==0){
        int ind=(event.getAction()-6)/256;
        for (int i = 0; i < pointerCount; i++) {
            if(i==ind){
                int id = event.getPointerId(i);
                if(isFirst){isFirst=false;}
                else rec+=";";
                rec+=id+",1";
                break;
            }
        }
    }
    return true;
}


Diigo技术调研


简介:

Diigo:像在本子上一样为网页做笔记,后面再进入(本地)该页面会显示原来做的笔记

功能调研

功能一:选择一段文字 可以设置背景颜色

diigo不支持选择文字的再选择,我们调研时 做成可再选择的。 比如一段

<div class="test">
    <p>对于选中的一段文本 应该记录其在dom节点的所有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商店帖</li>
        <li>言论是对的,在100年</li>
    </ol>
</div>

然后选中了

                                             有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商

如果是直接输出window.getSelection()的话是有段 给其加标签什么鬼啊回复数阿飞666找商 与标签无关,没有任何意义 这时候应该按如下步骤去操作:

获取Range

var range=window.getSelection().getRangeAt(0);

什么是Range及用法请参考这里

利用Range得到选中文字两端所在的dom节点

var startNode = range.startContainer; //得到‘选择文字’左部所在的容器节点(文本节点,nodeType=3)
//如这边startNode.nodeName是#text 而不是p
var endNode = range.endContainer; 
//文本节点获取其父节点:Element节点 用parentElement 也可以
//不能只记录父节点,需要记录父节点的第几个#TEXT 因为文本节点的父节点不一样只有一个child文本节点 如本例中的<ol>
//不能记录文本节点,因为getElementsByTagName不支持search #TEXT
var startParentNode = startNode.parentNode;
var endParentNode = endNode.parentNode;


一些面试笔试题_2017校招


1.音视频不同步的原因:

一般是客户端的问题。

由于音视频包都会带上时间戳,出现不同步的根本原因是客户端取出当前数据包解码放入缓冲队列,进行渲染时(在这做同步)不能从缓冲队列中同时找到当前时间戳的视频解码数据和音频解码数据,所以只能先取其中一个拿个渲染。

(注:拿去渲染后,如果时间戳同步,渲染一般不会出现不同步的情况,硬件处理相对成熟);

渲染不同步,可以说是缓冲队列设置太小,没有考虑网络不好数据包传输慢或者需要丢包重传的情况。 当然还有可能是解码的问题,音视频其中之一的解码效率太慢,而缓冲队列设置合适,稍微不好一点的网络情况导致解码数据包(音频or视频)来不及放入缓冲队列。

如果是服务端的问题,比较不好处理。

音视频线程数据采集速度不同步(和采集卡有关),封装协议时就已经出现同一时间戳的音视频包实际是不同步的情况。