一款直接连接网卡抓取封包的软件，能够与网络近距离接触。 选取需要抓包的网卡 点击 Caputre->Interfaces..选择正确的网卡。然后点击”Start”按钮, 开始抓包 Display Filter(显示过滤器) 显示捕获到的封包， 有源地址和目标地址，端口号。 协议过滤 比如 TCP，只显示 TCP 协议。 IP 过滤 比如 ip.src==192.168....
ES6转ES5
用 ES5 实现 ES6 的特性。 Babel 在线转换 去 Babel 中文网 尝试一下吧。 箭头函数 与函数表达式相比，箭头函数（也称为胖箭头函数）具有更短的语法，并且词法绑定 this。箭头功能始终是匿名的。 ES6 [1, 2, 3].map((n) => n * 2); // -> [ 2, 4, 6 ] ES5 [1, 2, 3].map(funct...
从0开始编写一个VSCode翻译插件
从 0 开始编写一个非常好用的 VSCode 翻译插件。 项目简介 线上地址 https://github.com/ringcrl/vscode-translator 功能演示 长句子翻译 高度不可定制化生词本功能 show time… 环境搭建 全局依赖 npm install -g yo generator-code vsce 生成代码 yo code...
组件实现思路
总是用轮子，造轮子的思路是什么呢？ 原则 （内部）分层原则：正交原则 （对外）封装原则：面向接口编程 分层原则：正交原则 HTML、CSS、JS 三者分离。 例如：不要用 JS 直接去改 CSS，而是增加一个 class，具体的样式还是由 CSS 提供。 封装原则：面向接口编程 首要考虑的不是代码如何写，而是代码如何被调用。 五个轮子 Tabs 对外接口 <bod...
双向绑定与单向绑定
说到前端框架，就总会谈论到什么「双向绑定」和「单向绑定」这些概念了。 MVC 页面上的代码总是可以分成三类： 专门操作远程数据的代码（fetchDb 和 saveDb 等等） 专门呈现页面元素的代码（innerHTML 等等） 其他控制逻辑的代码（点击某按钮之后做啥的代码） 思想 M 专门负责数据 V 专门负责表现 C 负责其他逻辑 使用 MVC ...
Web陀螺仪与重力感应
陀螺仪与重力感应配置与注意点： API 使用 临界点处理 翻转处理 iOS 12.2 政策 devicemotion function init_devicemotion_listener() { if ((window as any).DeviceMotionEvent) { window.addEventListener('devicemotion'...
JS内存分析
使用 Chrome 和 DevTools 查找影响页面性能的内存问题 内存泄漏 内存膨胀 频繁的垃圾回收 内存问题 页面的性能随着时间的延长越来越差。 这可能是内存泄漏的症状。 内存泄漏是指，页面中的错误导致页面随着时间的延长使用的内存越来越多。 页面的性能一直很糟糕。 这可能是内存膨胀的症状。 内存膨胀是指，页面为达到最佳速度而使用的内存比本应使用的内存多。...
实现一个Lazy-Load
我们可以在页面打开的时候把首屏的图片资源加载出来，等用户滚动的时候再把页面其他部分呈现。 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device...
学习Pixi并制作一个小游戏
学习用 PixiJS 制作游戏和互动媒体。 初始化 pixi <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello World</title> </head> <script src="pi...
前端本地文件操作与上传
前端与用户的文件交互需要由用户触发，用户可以通过三种方式触发文件上传。 原文地址：https://juejin.im/post/5a193b4bf265da43052e528a 用户可通过以下三种方式操作触发： 通过 input type=”file” 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴 通过 input type=”file” 选择本地文...