2018年8月

在最近的项目中用到了websocket,遇到了一些问题,记下来。

案情重现

首先实例化一个连接(随便找的回声测试)

var ws = new WebSocket('ws://121.40.165.18:8800')

然后想当然的加上事件监听↓

ws.addEventListener('message', fun(event))

function fun(e) {
    console.log(e.data)
}

然后发现不起作用,而改用匿名函数就没啥问题。

ws.addEventListener('message', function (event) {
    console.log(event.data)
})

笔记

其实仔细想想就没发现了,第一次ws.addEventListener('message', fun(event))中传入的fun(event)不是一个函数,而是fun(event)的返回值undefind
正确的方法是

ws.addEventListener('message', fun)

举个例子

function main(f) {
    f('123')
}
function fun(str) {
    console.log(str)
    return 'qwe'
}
main(fun)//'123'
main(fun())// Uncaught TypeError: f is not a function

其中fun是作为一个变量传入的main函数,而如果传入fun(),则传入的实际是fun()的返回值'qwe'

正确的操作如下

var ws = new WebSocket('ws://121.40.165.18:8800')

ws.addEventListener('message', fun)

function fun(e) {
    console.log(e.data)
}

我可真是个小机灵鬼呢~

最近查资料忽然发现了一个很有意思的博客X.D笔记
我从百度搜索页跳转过去,他给我弹了个浮层

nobd.png

然后果断抄了代码,因为原始代码依赖jQuery,所以我自己修改了一下。
下面是修改后的代码↓

function removeElement(_element) {
    var _parentElement = _element.parentNode
    if (_parentElement) {
        _parentElement.removeChild(_element)
    }
}

document.ready = function (callback) {
    ///兼容FF,Google
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
            document.removeEventListener('DOMContentLoaded', arguments.callee, false)
            callback()
        }, false)
    }
    //兼容IE
    else if (document.attachEvent) {
        document.attachEvent('onreadytstatechange', function () {
            if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee)
                callback()
            }
        })
    } else if (document.lastChild == document.body) {
        callback()
    }
}

function closeBD() {
    document.body.style["overflow-y"] = 'auto'
    removeElement(removeElement(document.getElementById('nobdDiv')))
}

function noBD() {
    var html = document.createElement("div")
    html.innerHTML = '<div id="nobdDiv" style="top:0px;display: block;position: fixed;width: 100%;height: 100%;z-index:999;background-color: rgba(0,0,0,0.88);left: 0;"><div style="margin: 70px auto;color:#fff;text-align: center;font-family:" Microsoft YaHei "><h1>拒绝百度,现在开始</h1><p>做为一个技术人员,还在使用百度这种<strong style="color: #D6007F;">垃圾搜索引擎</strong>?</p><p>1. 搜索质量实在<span style="color: #D6007F;">低能</span>,你可能找不到你想要的,找到时可能已经白白浪费几小时!</p><p>2. 百度毫无羞耻,获取出售用户隐私比垃圾软件还猖獗、毫无羞耻心</p><p>3. 唯利是图、没有半社会责任感,社会渣滓给钱就能在首页放广告,欺诈弱势人群。</p><p  style="margin-top: 50px;">请默念一句: “百度是垃圾”, <span style="color: #009BCA;cursor:pointer;" onclick="javascript:closeBD();">在此关闭</span></p></div></div>'
    document.body.appendChild(html)
    window.setTimeout(closeBD, 60000)
}

document.ready(function () {
    var url = document.referrer
    if (url && (url.search("http://") > -1 || url.search("https://") > -1)) {
        var refurl = url.match(/:\/\/(.[^/]+)/)[1]
        if (refurl.indexOf("baidu.com") > -1) {
            window.setTimeout(noBD, 3000)
        }
    }
})

下面是原始代码↓

function closeBD(){
    document.body.style["overflow-y"]='auto';
    $('#nobdDiv').remove();
}
function noBD(){
    var top = document.documentElement.scrollTop;
    document.body.style["overflow-y"]='hidden';
    var html='<div id="nobdDiv" style="top:'+top+'px;display: block;position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.88);left: 0;"><div style="margin: 70px auto;color:#fff;text-align: center;font-family:" Microsoft YaHei ";"><h1>拒绝百度,现在开始</h1><p>做为一个技术人员,还在使用百度这种<strong style="color: #D6007F;">垃圾搜索引擎</strong>?</p><p>1. 搜索质量实在<span style="color: #D6007F;">低能</span>,你可能找不到你想要的,找到时可能已经白白浪费几小时!</p><p>2. 百度毫无羞耻,获取出售用户隐私比垃圾软件还猖獗、毫无羞耻心</p><p>3. 唯利是图、没有半社会责任感,社会渣滓给钱就能在首页放广告,欺诈弱势人群。</p><p  style="margin-top: 50px;">请默念一句: “百度是垃圾”, <span style="color: #009BCA;cursor:pointer;" onclick="javascript:closeBD();">再此关闭</span></p></div></div>';
    // var html='<div id="nobdDiv" style="top:'+top+'px;display: block;position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.88);left: 0;"><div style="margin: 70px auto;color:#fff;text-align: center;font-family:"Microsoft YaHei";"><h1>拒绝百度,现在开始</h1><p>做为一个程序员,不应该使用百度这个垃圾引擎。</p><p>我不想干嘛,就是<span style="color: #D6007F;">黑屏一分钟</span>,<span style="color: #990000;">等不了就关网页</span>。</p><p>当然,如果你心里已经赞成了上一句话</p><p>默念一句:“百度是垃圾”,<span style="color: #009BCA;cursor:pointer;" onclick="javascript:closeBD();">就点我快速关闭吧</span></p><h2 style="margin-top: 50px;">为什么?</h2><p>1. 重点:做为一个程序员,你不觉得上百度搜不到东西浪费青春</p><p>2. 没有社会责任感、各种虚假广告,垃圾给钱就可以在前面骗人</p><p>3. 毫无羞耻的跟踪探取隐私行为,为了利益什么还有没基本廉耻</p><p>太多了,这个公司也配BAT,产品有几个给力的?不是早期垄断,Google退出,早灭了!</p></div></div>';
    $(document.body).append(html);
    window.setTimeout(closeBD,60000);
}
$(document).ready(function(){
   var url=document.referrer;
    if ( url && ( url.search("http://")>-1 || url.search("https://")>-1 ) ) {
        var refurl =  url.match(/:\/\/(.[^/]+)/)[1];
        if(refurl.indexOf("baidu.com")>-1){
            window.setTimeout(noBD,3000);
        }
    }
});