longwanxiang的博客 | Ryuurock

前端疑难问题整理

javascript篇 prototype和__proto__的关系是什么先看一段代码 1234567function Person( name, age ) { this.name = name; this.age = age;}var p = new Person( 'xiaoming', 19 );console.log( p.__pro......

Posted by Wanxiang Long(Ryuurock) on 2018-02-27

javascript

Chrome Headless下的矛与盾

加密与解密，攻与防，兵来将挡，水来土掩，瞬息万变的互联网无时无刻不在上演着这一幕

上个月刚好写了一篇puppeteer初探，讲了一些开发中使用puppeteer进行自动化操作的东西，比如绕过一些网站的人机识别验证，自动化截图等。我们示例的是阿里云的数据风控管理平台的滑动验证，单一的滑动轨迹算法刚开始能99%的验证成功，但是到后面系统可能识别到一个ip反复的尝试滑动引起了注意，于是把提交过去的数据进行了汇总分析，使用了数学公式进行反向的求我们的公式（官方号称通过生物特征判定......

Posted by Wanxiang Long(Ryuurock) on 2018-02-10

headless chrome puppeteer

webpack下html内容相关的处理

没错这次还是讲webpack，这玩意儿给前端创造了太多的灵活性了，让我们不得不好好的来学习它。最近项目的上线第一次文件发布会漏掉一个文件，原因就是文件正好不在我们常用的目录，在合并的时候就忘记了。继上次文件结构重构后，一直还有几个模板文件在后端的目录结构里，原因就是我们在html的引用方式是采用的后端模板引标签用 1<include file="..."/>......

Posted by Wanxiang Long(Ryuurock) on 2018-01-20

webpack nodejs

Puppeteer 初探

无头浏览器给了我们一个完美的浏览器运行环境，我们可以用代码来模拟一个网站去做任何想做的事

在GitHub上面google官方是这样介绍Puppeteer的 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use ful......

Posted by Wanxiang Long(Ryuurock) on 2018-01-09

headless nodejs

搭建属于自己的web推送服务

上一次说websocket还是在“解决Websocket并发执行的问题”这篇文章，不过提到的内容是在不同标签页的消息同时到来时的处理方式，不过治标不治本，还是有几率出现重复推送的问题，而且这样的代码也不是很严谨，所以这个问题只能从服务端着手了。其实在很早之前就看过goeasy这个第三方推送服务的client源码，当时就吐槽它们代码之烂，二次封装的代码居然直接修改了socket.io（goea......

Posted by Wanxiang Long(Ryuurock) on 2017-12-10

nodejs websocket

记一次chrome扩展开发

讲真，在这之前我甚至不知道chrome的插件是由javascript驱动的，最近因为为了优化产品的体验，开始从chrome插件来下手，因为chrome插件能强势侵入别家的网页，篡改任何你想篡改的东西，甚至可以将http的请求和响应数据进行修改。官方文档需要梯子， 360翻译的文档（不是一般的老，看网页布局就知道了）, 百度翻译的文档.废话不多说，先来看看入口吧 chrome插件最重要的是一个......

Posted by Wanxiang Long(Ryuurock) on 2017-11-27

chrome extension

使用递归算法对树形菜单进行搜索

之前对递归函数的理解还仅仅停留在书面，就是说从来没有在实际中用到过，不知道是运气好还是运气不好，做了这么久开发居然没碰到这种需求。不过倒是在jQuery的源码里目睹了使用递归算法的地方，jQuery.extend方法相信很多高玩都用过，用于拷贝对象，并且提供了深拷贝，这里的递归就是为了能够遍历对象内的对象内的对象内的对象…，这种数据我们总不能一直写下去把 😂，况且逻辑还是重复的。所以这里使......

Posted by Wanxiang Long(Ryuurock) on 2017-11-24

recursion

使用gulp来管理我们“身不由己”的项目代码

gulp似乎退居二线了

想当年，呸。。。也就几年前吧，根本不知道代码还能压缩这回事，原来压缩是为了减少文件体积，提高载入速度，降低服务器压力，原来变量混淆是为了代码不被随便盗走修改（可能有那么点点这个用？）开始接触前端后，认识到了有grunt这种东西，当时觉得好流弊，原来前端也能自动化了，再往后看哪时的新星gulp已经出来，据说是因为gulp更简单，代码易懂也清晰，管道操作非常的简单明了，于是就成了后起之秀。再后......

Posted by Wanxiang Long(Ryuurock) on 2017-11-09

gulp

在web页面实现IOS的毛玻璃背景效果

在写这篇文章之前，的我认知还停留在web页面里是无法做到像ios和MAC下那种毛玻璃效果的，虽然我知道filter属性，但是因为它是通过改变整个容器的失焦而不是透明背景的高斯模糊。今天要讲述的是两个能达到这种背景模糊效果的方法 backdrop-filter属性; 通过filter属性配合双重背景图达到背景图能够模糊，包括滚动的时候也有背景模糊效果 backdrop-filter属性其......

Posted by Wanxiang Long(Ryuurock) on 2017-10-04

css aero

ECMAScript5中新增的数组遍历方法

其实在接触javascript之前我甚至只知道用for循环去遍历数组，直到后来知道了for...in去遍历，但是直到后来知道for in带来的问题（如果扩展了prototype，该属性会被遍历出来，造成无法预估的错误），改用了forEach来循环遍历数组，再到后来了解到ES6的for...of也能遍历数组，但是ES6对于现代浏览器还是稍稍有点过早，今天我们要说的是早已被大多数浏览器实现的ES......

Posted by Wanxiang Long(Ryuurock) on 2017-09-21

ES5

Longwx Blog