博客园 - wangmeijian
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=79102
2022-12-01T07:00:03Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
feed.cnblogs.com
https://www.cnblogs.com/wangmeijian/p/16613698.html
pnpm凭什么这么快 - wangmeijian
前端包管理器层出不穷,pnpm算是一个后起之秀。它和npm有什么不同,为什么有了npm还要造一个pnpm? npm的问题 npm是最早的包管理器,安装nodejs自带npm,v3版本之前,npm安全依赖的目录结构是这样的: node_modules └─ foo ├─ index.js ├─ pac
2022-08-22T09:47:00Z
2022-08-22T09:47:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】前端包管理器层出不穷,pnpm算是一个后起之秀。它和npm有什么不同,为什么有了npm还要造一个pnpm? npm的问题 npm是最早的包管理器,安装nodejs自带npm,v3版本之前,npm安全依赖的目录结构是这样的: node_modules └─ foo ├─ index.js ├─ pac <a href="https://www.cnblogs.com/wangmeijian/p/16613698.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/16599711.html
透过inode来理解硬链接和软链接 - wangmeijian
inode是文件系统里的一个重要的概念,它和硬链接和软链接的关系是怎么样的?
2022-08-18T10:20:00Z
2022-08-18T10:20:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】inode是文件系统里的一个重要的概念,它和硬链接和软链接的关系是怎么样的? <a href="https://www.cnblogs.com/wangmeijian/p/16599711.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/16014002.html
纯HTML+CSS 拉窗帘效果 - wangmeijian
拉窗帘效果 第一次看到这种效果的时候,感觉很惊艳,以为是js实现的,实际上纯HTML+CSS就能实现。 表现 上下两个白色区域都是正常的页面滚动行为,中间有颜色区域比较特殊,“拉窗帘效果”的文字滚动到一定位置后停止了,直到蓝色窗帘完全拉起之后才继续滚动,并且,在窗帘底部穿过文字时,文字呈现两种颜色。
2022-03-16T10:51:00Z
2022-03-16T10:51:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】拉窗帘效果 第一次看到这种效果的时候,感觉很惊艳,以为是js实现的,实际上纯HTML+CSS就能实现。 表现 上下两个白色区域都是正常的页面滚动行为,中间有颜色区域比较特殊,“拉窗帘效果”的文字滚动到一定位置后停止了,直到蓝色窗帘完全拉起之后才继续滚动,并且,在窗帘底部穿过文字时,文字呈现两种颜色。 <a href="https://www.cnblogs.com/wangmeijian/p/16014002.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/15994965.html
如何快速绘制任意角度的扇形? - wangmeijian
注意审题,第一要快,不要太麻烦,首先可以抛弃canvas,能不用js尽量不用,第二要支持任意角度。 两种方案和他们的缺点 以下两种方案满足要求 方案A:很久之前写过一篇《简单的css3 Loading动画》,原理是利用两个半圆旋转的方式,可以生成任意角度的扇形; 方案B:近期在GitHub看到一个利
2022-03-11T10:54:00Z
2022-03-11T10:54:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】注意审题,第一要快,不要太麻烦,首先可以抛弃canvas,能不用js尽量不用,第二要支持任意角度。 两种方案和他们的缺点 以下两种方案满足要求 方案A:很久之前写过一篇《简单的css3 Loading动画》,原理是利用两个半圆旋转的方式,可以生成任意角度的扇形; 方案B:近期在GitHub看到一个利 <a href="https://www.cnblogs.com/wangmeijian/p/15994965.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/14591048.html
session、token和cookie - wangmeijian
HTTP是无状态的,什么叫无状态?意思是HTTP不会记住用户,即使你刚刚才使用账号密码登录过系统,下一次请求,还得再次校验你的身份。
常用做身份校验的方式有session和token,他们有各自的优缺点,可能有人质疑说还有cookie,cookie只是用来存储数据的载体。
2021-03-29T01:35:00Z
2021-03-29T01:35:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】HTTP是无状态的,什么叫无状态?意思是HTTP不会记住用户,即使你刚刚才使用账号密码登录过系统,下一次请求,还得再次校验你的身份。
常用做身份校验的方式有session和token,他们有各自的优缺点,可能有人质疑说还有cookie,cookie只是用来存储数据的载体。 <a href="https://www.cnblogs.com/wangmeijian/p/14591048.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/14279781.html
docker搭建前端环境 - wangmeijian
开发环境的搭建,是新人入职后的第一道槛,有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境,势必提高新人对团队的印象分!docker就是这样一个工具。 镜像&容器 docker有个重要的概念叫镜像,官方概念比较拗口,这么解释比较容易理解:docker仓库有很多镜像,包括node
2021-01-14T14:28:00Z
2021-01-14T14:28:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】开发环境的搭建,是新人入职后的第一道槛,有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境,势必提高新人对团队的印象分!docker就是这样一个工具。 镜像&容器 docker有个重要的概念叫镜像,官方概念比较拗口,这么解释比较容易理解:docker仓库有很多镜像,包括node <a href="https://www.cnblogs.com/wangmeijian/p/14279781.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/14219155.html
手写系列:call、apply、bind、函数柯里化 - wangmeijian
少废话,show my code
2020-12-31T15:40:00Z
2020-12-31T15:40:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】少废话,show my code <a href="https://www.cnblogs.com/wangmeijian/p/14219155.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/14209230.html
Promise是如何实现异步编程的? - wangmeijian
Promise接收一个函数为参数,传入了两个内部的方法resolve和reject,然后用then注册回调函数,手动调用resolve或reject就可以依次执行then的回调,并且给回调函数传值。如果then返回的也是Promise,同样的,手动调用resolve或reject后,才会继续往下执行。
2020-12-29T15:09:00Z
2020-12-29T15:09:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】Promise接收一个函数为参数,传入了两个内部的方法resolve和reject,然后用then注册回调函数,手动调用resolve或reject就可以依次执行then的回调,并且给回调函数传值。如果then返回的也是Promise,同样的,手动调用resolve或reject后,才会继续往下执行。 <a href="https://www.cnblogs.com/wangmeijian/p/14209230.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/12541633.html
Event loops秒懂 - wangmeijian
JS为什么是单线程脚本语言?什么是Event loops?
2020-03-21T11:49:00Z
2020-03-21T11:49:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】JS为什么是单线程脚本语言?什么是Event loops? <a href="https://www.cnblogs.com/wangmeijian/p/12541633.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/12129251.html
二维码的秘密 - wangmeijian
* 二维码容量有多大?
* 二维码上面三个大方块是干什么的?
* 二维码能存储视频/音频吗?
* 二维码破损了为什么还能被识别?
* 二维码生成原理是怎样的?
2020-01-01T09:02:00Z
2020-01-01T09:02:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】* 二维码容量有多大?
* 二维码上面三个大方块是干什么的?
* 二维码能存储视频/音频吗?
* 二维码破损了为什么还能被识别?
* 二维码生成原理是怎样的? <a href="https://www.cnblogs.com/wangmeijian/p/12129251.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/11537971.html
KMP算法JS实现 - wangmeijian
参考阮一峰的《字符串匹配的KMP算法》,用JS实现一版,备忘~ // 主串 let mainString = "BBC ABCDAB ABCDABCDABDEDC"; // 模式串 let patternString = "ABCDABD"; /** * 算出《部分匹配表》Partial Match
2019-09-17T15:21:00Z
2019-09-17T15:21:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】参考阮一峰的《字符串匹配的KMP算法》,用JS实现一版,备忘~ // 主串 let mainString = "BBC ABCDAB ABCDABCDABDEDC"; // 模式串 let patternString = "ABCDABD"; /** * 算出《部分匹配表》Partial Match <a href="https://www.cnblogs.com/wangmeijian/p/11537971.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/11220675.html
Android调试移动端webview - wangmeijian
尝试了各种Mac版本的安卓模拟器,包括Android Studio、Genymotion以及国内的网易MuMu、夜神、蓝叠、腾讯手游助手,做的最好的是Android Studio,最难上手的也是Android Studio。 Android Studio有两种架构类型的镜像可选,分别是x86和arm
2019-07-21T03:53:00Z
2019-07-21T03:53:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】尝试了各种Mac版本的安卓模拟器,包括Android Studio、Genymotion以及国内的网易MuMu、夜神、蓝叠、腾讯手游助手,做的最好的是Android Studio,最难上手的也是Android Studio。 Android Studio有两种架构类型的镜像可选,分别是x86和arm <a href="https://www.cnblogs.com/wangmeijian/p/11220675.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/11220716.html
设置电脑为手机代理 - wangmeijian
1、下载安装Charles,此教程仍针对Mac版本 2、设置代理端口:菜单 - Proxy - Proxy Settings - Proxies - HTTP Proxy - 输入端口8888,勾选下方Enable transparent HTTP proxying 3、设置访问控制列表:菜单 -
2019-07-21T03:49:00Z
2019-07-21T03:49:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】1、下载安装Charles,此教程仍针对Mac版本 2、设置代理端口:菜单 - Proxy - Proxy Settings - Proxies - HTTP Proxy - 输入端口8888,勾选下方Enable transparent HTTP proxying 3、设置访问控制列表:菜单 - <a href="https://www.cnblogs.com/wangmeijian/p/11220716.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/11217147.html
iPhone调试移动端webview - wangmeijian
一、模拟器调试 1、启动Xcode 2、选择菜单Xcode - Open Developer Tool - Simulator 3、启动Simulator后,选择Simulator菜单Hardware - Device - iOS12.x - 再选择需要的手机/iPad型号 4、安装App,直接拖放
2019-07-20T03:37:00Z
2019-07-20T03:37:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】一、模拟器调试 1、启动Xcode 2、选择菜单Xcode - Open Developer Tool - Simulator 3、启动Simulator后,选择Simulator菜单Hardware - Device - iOS12.x - 再选择需要的手机/iPad型号 4、安装App,直接拖放 <a href="https://www.cnblogs.com/wangmeijian/p/11217147.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/10009645.html
禁用JavaScript之后,你的网站表现如何? - wangmeijian
一 最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考…… (ps:四个 是项目名,略去了) 二 JS最初是用来给界面添加交互的,近几年,前端火的原因则主要是因为JS,新技术
2019-03-18T12:49:00Z
2019-03-18T12:49:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】一 最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考…… (ps:四个 是项目名,略去了) 二 JS最初是用来给界面添加交互的,近几年,前端火的原因则主要是因为JS,新技术 <a href="https://www.cnblogs.com/wangmeijian/p/10009645.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/10061647.html
Web Component - wangmeijian
Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持web component。
2018-12-23T16:15:00Z
2018-12-23T16:15:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】Web Component不是新东西,几年前的技术,但是受限于浏览器兼容性,一直没有大规模应用在项目里,直到现在(2018年年末),除IE仍不支持之外,其它主流浏览器都支持web component。 <a href="https://www.cnblogs.com/wangmeijian/p/10061647.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/9217352.html
超出JavaScript安全整数限制的数字计算-BigInt - wangmeijian
JavaScript中的基本数据类Number是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一,在浏览器控制台分别输入Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER可查看对应的最大/小值 将这个最大
2018-06-23T15:23:00Z
2018-06-23T15:23:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】JavaScript中的基本数据类Number是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一,在浏览器控制台分别输入Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER可查看对应的最大/小值 将这个最大 <a href="https://www.cnblogs.com/wangmeijian/p/9217352.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/9216033.html
ES2018正则表达式更新 - wangmeijian
如果你是一个初学者,这篇文章可以拓展你对正则表达式用法的理解,不过建议你先阅读一些正则表达式入门文章,比如经典的《正则表达式30分钟入门教程》。如果你对正则表达式有一定的认识,那么这篇文章可以让你了解JavaScript中的新功能。 随着ES2018的更新,JavaScript正则表达式和其他基于P
2018-06-23T03:22:00Z
2018-06-23T03:22:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】如果你是一个初学者,这篇文章可以拓展你对正则表达式用法的理解,不过建议你先阅读一些正则表达式入门文章,比如经典的《正则表达式30分钟入门教程》。如果你对正则表达式有一定的认识,那么这篇文章可以让你了解JavaScript中的新功能。 随着ES2018的更新,JavaScript正则表达式和其他基于P <a href="https://www.cnblogs.com/wangmeijian/p/9216033.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/9080188.html
基于jest和puppeteer的前端自动化测试实战 - wangmeijian
前端测试现状 经常听到后端同学说“单元测试”,前端写过测试用例的有多少?答案是:并不多,为什么呢?两个主要原因 1、前端属于GUI软件,浏览器众多,兼容问题让人头大,用户量有一定规模的浏览器包括: IE8、IE9、IE10、IE11、chrome、FireFox、360浏览器、搜狗浏览器、QQ浏览器
2018-05-29T16:11:00Z
2018-05-29T16:11:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】前端测试现状 经常听到后端同学说“单元测试”,前端写过测试用例的有多少?答案是:并不多,为什么呢?两个主要原因 1、前端属于GUI软件,浏览器众多,兼容问题让人头大,用户量有一定规模的浏览器包括: IE8、IE9、IE10、IE11、chrome、FireFox、360浏览器、搜狗浏览器、QQ浏览器 <a href="https://www.cnblogs.com/wangmeijian/p/9080188.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/wangmeijian/p/9104782.html
记录一个chrome 65渲染的bug - wangmeijian
前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 渲染截图: 正常渲染截图应该是: 完整demo: 复现环境: Mac mini OS 10.11.6 chrome 65+ 给chr
2018-05-29T06:12:00Z
2018-05-29T06:12:00Z
wangmeijian
https://www.cnblogs.com/wangmeijian/
【摘要】前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 渲染截图: 正常渲染截图应该是: 完整demo: 复现环境: Mac mini OS 10.11.6 chrome 65+ 给chr <a href="https://www.cnblogs.com/wangmeijian/p/9104782.html" target="_blank">阅读全文</a>