- 博客(120)
- 收藏
- 关注
RSS订阅
原创 前端微信群
wx.config({ debug: false, appId: result.appid, // 必填，公众号的唯一标识 timestamp: result.timestamp, // 必填，生成签名的时间戳 nonceStr: result.nonceStr, // 必填，生成签名的随机串 signature: result.signature, // 必填，签名，见附录1 jsA..
2020-10-09 11:03:21
1697
原创 酒浓码浓 - 前端自动化测试
前端自动化测试背景：前端测试是前端工程中很重要的一部分，但是对于大多数开发而言这应该是个名词。因为没用到，据不知名数据统计，不会做自动化测试的开发占据一半之多！因为前端自动化测试要写测试脚本，大多数中小型公司由于开发周期短，项目也不长期维护，工程管理的不规范，所以就只是打印调试，用户测试，左点点右点点，各个机型各浏览器看一看，没啥问题就OK了。对于小项目而言它的时间成本及可靠度还是人力测试靠谱一点。所以这部分知识也愈来愈不那么重要了，但是作为前端分支的一部分。以及自己技术广度的拓展，对一些基
2020-05-26 18:15:58
220
原创 酒浓码浓 - ios/android微信浏览器video自动播放
ios/android微信浏览器video自动播放相信很多开发为此苦恼，经历种种磨难不负有心人，ios、android都可实现自动播放。首先须知JS动态添加的video标签，JS执行play，是可以直接全屏播放的，但是这种上禁止全屏等属性都无用。正解思路：DOM中先写上video标签，上个autoplay。 引入wx文档 https://res.wx.qq.com/open/js/...
2020-03-20 14:59:31
1133
原创 酒浓码浓 - 前端生成图片插件
前端生成图片功能及相关插件调研首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑html2canvashttps://github.com/niklasvh/html2canvas/domtoimagehttps://github.com/tsayen/dom-to-image#readmerasterizehtmlhttps://github.com/cbur...
2019-12-30 11:23:23
389
1
原创 酒浓码浓 - 编译原理（一）
编译原理之入门章序言：hello大家好，孟欣哥哥的小葵花课堂又开课啦！！！相信学完编译原理，且深入懂得代码的编译原理后，你会从高级攻城狮摇身一变成为一个资深码农。如果不能，呵~呵~OK，我们来看一下此章节要掌握的内容：编译器，解释器，预处理器，汇编器，用C语言作为高级程序的底层编译语言的好处。带着上面的疑问我们先来看一下历史由来：如今，我们所看到的大多数软件，...
2019-02-22 13:28:44
214
原创 酒浓码浓 - react干货
react干货起源：Facebook在建设instagram（一个广告系统项目）的时候，为了很好的处理数据流并且还要考虑好性能方面的问题，开始对市场上的各种前端MVC框架考量，然而并没有看上眼的，于是重新思考前端界面的构建方式，自己开发了一套，果然全球市值靠前的大牛创造力是很强大的。后来发现这套框架蛮好用的，就投入大量的人力物力去继续研究。ReactJs在2013年5月宣布开源。直到现在，...
2018-10-09 16:49:33
592
原创 酒浓码浓 - node之stream
node之streamstream 流流是一个抽象名词。你可以将一片代码当成一条河，每个词都是一滴水。除非你用特殊手段打破常规，否则就会随波逐流。就像CSS中有浮动，有定位，那么默认展示的就是流。读取文本内容：源码：var fs = require('fs');var rs = fs.createReadStream('1.txt', 'utf-8');rs...
2018-09-26 16:19:43
319
原创 酒浓码浓 - node之fs
node之fsfs模块后端语言都有操作文件系统的能力，异步和同步两种形式，在nodejs里我们依靠的是fs模块。坑：以下同步形式写法，保证在开始或结束仅运行一次才可用。javascript是单线程的异步I/O，node启动服务时若反复执行同步的事情，那么服务器将停止响应。写入文件异步形式：第一个参数：写入的文件，不存在时创建文件。第二个参数：写入的内容，每...
2018-09-26 10:34:35
364
原创 酒浓码浓 - node.js
node.js2009年，Ryan正式推出了基于JavaScript语言，V8引擎的开源Web服务器项目——Node.js1.JavaScript是单线程执行（只能异步IO）2. 随着现在使用JavaScript的人越来越多，随着Web应用越来越复杂的交互体验，Chrome开发了高性能的JavaScript引擎( V8 )Node优势？1. JavaScr...
2018-09-25 17:14:27
909
原创 酒浓码浓 - PM2怎么处理分支挂掉 / 多进程协作
PM2怎么处理生产分支shutdownnode提供了很多中间件，我们可以自行封装代码逻辑，操作进程，守护进程，但这些是内嵌在node中的。PM2是当今比较火的进程守护工具，他帮我们封装了很多原本需要我们自己封装的代码，提供的功能比较全面，时时操作，简单，便捷。例如标题所阐述，如果用node集群模式去处理，我们先需要引入cluster中间件，及os中间件当为生产分支时，遍历os CPU个数，然后cluster.fork()方法去开辟工作线程。或者用process监听message ..
2020-06-02 15:44:16
489
原创 酒浓码浓 - ios/android微信浏览器获取视频时长
ios/android微信浏览器获取视频时长相信很多开发为此苦恼，百度答案都不尽人意。经历种种磨难不负有心人，ios、android都可获取视频时长，亲测生效。正解思路：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
2020-05-27 18:37:06
900
原创 酒浓码浓 - Docker与VM
Docker与VM推荐好文：https://www.freecodecamp.org/news/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b/
2020-05-22 11:42:49
107
原创 酒浓码浓 - JS关闭微信内置浏览器
JS关闭微信内置浏览器微信浏览器内，是有个内置对象WeixinJSBridge的执行 WeixinJSBridge.call("closeWindow") 会关闭微信内置浏览器但是你会发现偶尔好使，偶尔不好使。这应该是依赖的方法是异步导致的，有时还没加载出来调用就会不生效，所以我业务中给个定时器去执行是可以解决的setInterval(()=>{WeixinJSBridge.call("closeWindow")},300)不想把精力放在翻阅这方面的源代码上...
2020-05-15 16:47:53
556
原创 酒浓码浓 - 前端HTTP性能优化
HTTP性能优化衡量服务器性能的主要指标有三个：吞吐量（requests per second）吞吐量就是我们常说的 RPS，每秒的请求次数，也有叫 TPS、QPS，它是服务器最基本的性能指标，RPS 越高就说明服务器的性能越好。并发数（concurrency）并发数反映的是服务器的负载能力，也就是服务器能够同时支持的客户端数量，当然也是越多越好，能够服务更多的用户。响应时间（time per request）响应时间反映的是服务器的处理能力，也就是快慢程度，响应时间越短，单位时
2020-05-14 14:38:12
261
原创 酒浓码浓 - 前端Weex，Rax，Taro，native等区别
Weex，Rax，Taro区别Weex 阿里开源跨端渲染框架https://weex.apache.org/zh/Vue/Rax开发后，构建 Android、iOS 和 Web 应用它像浏览器，或node一样是个容器。Rax 阿里开源跨容器渲染框架，它如同vue是个业务开发的框架https://rax.js.org/最开始Weex只支持vue，后来觉得翅膀硬了想开放出来给大家用。尝试与react结合失败，遂封装了基于react的框架Rax。react偏向解决前端.
2020-05-11 17:56:22
2254
原创 酒浓码浓 - 前端陀螺仪deviceorientation/王者荣耀首屏动效
前端陀螺仪deviceorientation文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event前端陀螺仪，可以获取到手机当前指向，及手机水平朝X，Y轴翻转的值，默认为0。API显示兼容性蛮好，仅对IE未知。代码简单如下：只需要将event.beta及event.gamma值赋给首屏定位的背景图上即可达到王者荣耀首屏进入游戏页面的效果，晃动手机背景跟着晃动，晃动幅度的大小可调整基.
2020-05-11 14:41:39
362
原创 酒浓码浓 - websocket
前端websocketwebsocket文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/WebSocket以下为笔者封装的js，喜欢的可以直接拿去用/** * @title Socket-client * @author Mason<[email protected]>...
2020-05-07 17:22:29
276
原创 酒浓码浓 - meta标签http-equiv=X-UA-Compatible
meta标签http-equiv="X-UA-Compatible"<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>最近看到很多人使用，X-UA-Compatible 定义浏览器的渲染方式如果安装了 Google Chrome Frame （谷歌浏览器內嵌框架）则使用谷歌浏览器内核模式，否则使用最...
2020-05-07 16:56:48
137
原创 酒浓码浓 - 前端性能之预读取DNS
前端性能之预读取DNS浏览器的 DNS 预读取功能前端是可控的，一般常见两种方式：<meta http-equiv="x-dns-prefetch-control" content="off"><link rel="dns-prefetch" href="//www.spreadfirefox.com">强制对域名进行预读取在一些情况下很有用, 比如, ...
2020-05-07 15:28:06
116
原创 酒浓码浓 - 前端性能之performance
前端性能之performanceperformance是前端性能监控的API它可以检测到白屏时间、首屏时间、用户可操作的时间节点，页面总下载的时间、DNS查询的时间、TCP链接的时间等。浏览器打印一下 window.performance，可以看到如下：memory内存相关jsHeapSizeLimit 该属性代表的含义是：内存大小的限制。 totalJSHeapSiz...
2020-05-07 11:08:11
893
原创 酒浓码浓 - nginx常用配置
nginx常用配置1. 基础配置main # 全局配置events { # nginx工作模式配置}http { # http设置 .... server { ...
2020-04-23 11:51:33
130
原创 酒浓码浓 - 正向代理与反向代理的区别
正向代理与反向代理的区别牛A与牛C要交换东西，但是俩人碰不着。 所以出现了中间传话人牛B。牛A是客户端（你）牛B是代理服务器（中间商）牛C是服务器（目标）正向代理：牛A将诉求告诉牛B，牛B告诉牛C，牛C解决将结果给牛B，牛B给牛A反向代理：牛B将牛C的本事学会，牛A找牛B直接解决正向：牛C不知道谁来找他平事（服务端不知道实际发起请求的客户端）反向：牛A不知道谁给他平...
2020-04-21 19:05:03
117
原创 酒浓码浓 - 开源文档编辑工具
开源文档编辑工具静态网站生成器VuePressgithub Star16K简洁，vue作者开发，对会vue的开发者友好，支持SEOhttps://www.vuepress.cn/GitBookgithub Star22.3K大而全（各插件、UI较丰富、依赖多 ），修改需重新build慢，商业产品不是开源工具（花钱）https://docs....
2020-04-15 17:04:38
101
原创 酒浓码浓 - nginx之proxy_pass代理与try_files冲突怎么办
nginx之proxy_pass代理与try_files冲突怎么办笔者的业务场景，location / 下需要走代理到某台服务器。又要配置try_files，发现当发生错误时proxy_pass根本不生效了。就像下图：解决办法就是当前nginx机执行proxy_pass在代理的服务器上也当一台nginx机执行try_files亲测可用！互不影响了~...
2020-03-24 19:04:42
4213
2
原创 酒浓码浓 - browserHistory404问题及nginx配置
browserHistory404问题及nginx配置前言：browserHistory有自己的API，push replace等都会有记录。路由控制跳转，及微信中二次分享等等的使用都比hash好用。请自行体会。现在很多框架如react、vue等都有使用browserHistory。那么问题来了www.baidu.com这种一级路由进去没问题，一旦www.baidu.com/a，...
2020-03-24 18:58:23
402
原创 酒浓码浓 - Ant Design Pro调研
Ant Design Pro官方称秉承Ant Design的理念做出的升级版，并已应用于阿里内部上百个项目正在尝试，应该还在逐步优化的阶段。样例：https://preview.pro.ant.design/profile/basic?primaryColor=daybreak重大弊端：官方地址首次加载缓慢。浏览器loaded近2min文档：https://pro.ant.desi...
2020-02-18 18:53:01
474
原创 酒浓码浓 - npm与node版本不匹配
npm与node版本不匹配官网可以查询对应版本：https://nodejs.org/zh-cn/download/releases/
2020-02-18 18:06:41
740
原创 酒浓码浓 - 给video控制按钮设置样式
给video控制按钮设置样式打开浏览器控制台做如下设置设置好，就可以选中DOM进行查看了。此时可以看到其DOM都是通过pseudo属性来添加的样式，此时我们就可以根据CSS属性选择器进行更改样式。例：隐藏进度条video::-webkit-media-controls-timeline{ display：none；}...
2020-02-14 17:03:17
341
原创 酒浓码浓 - less/scss引入公共文件，sass-resources-loader
sass-resources-loader在前端项目中，比如用less/scss想要封装一个公共的文件，或统一引用一个公共变量会发现在入口文件，引入或声明是无效的，用的时候还是会报错。那么sass-resources-loader恰好解决了这个问题它在打包的时候将资源放在每个文件中，而无需一一引用，例如：const loader = [ 'vue-style-loader...
2020-02-10 17:02:26
1157
原创 酒浓码浓 - CSSOM
CSSOMThe CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS st...
2020-01-20 11:12:38
114
原创 酒浓码浓 - 前端设置微信分享内容
前端调微信分享官方地址：微信SDK微信已经提供了很全面的SDK，可以调用方法设置各自媒体端的分享内容。首先你应具备个微信公众号。公众号应将你要做这件事的地址加入白名单。允许你授权！然后前端的业务场景调用后端的接口，传参为当前调用地址的URL。后端验证成功后将appId返回给你，此为公众号的唯一标识。以及一些时间戳，随机串，签名码。用于与微信做签名验证。具备了以上条件后...
2020-01-10 10:11:59
185
原创 酒浓码浓 - H5浏览器分享到微信/QQ/微博
H5浏览器分享到微信/QQ/微博随着自媒体社交的发展。移动端的分享功能已是家家所需，身为一个被生活所逼的办公室底层劳动工人，不敢掉以轻心赶紧跟上步伐~~o(╥﹏╥)o可是浏览器端想设置自媒体端的分享内容却不是个简单活~大家都知道浏览器未被垄断，各家争奇斗艳！想兼容所有的浏览器~ ，停 打住 别想了~有些浏览器默认会抓取网页的title 当前地址及第一张图片。做为分享内容，但...
2020-01-10 09:40:35
422
原创 酒浓码浓 - 前端音视频
前端音视频技术实施、性能、及兼容性调研最近公司上个项目，希望里面有视频功能，之前知道H5 支持video 标签，拿过来一用，结果在移动端出现了各种兼容问题。于此展开调研。来吧，让我们看一下开发之最有趣又有意义的历史故事????历史：基础篇：适用一些短视频的默认兼容问题。很多开发在做视频的时候，PC端已相对成熟，在移动端就会碰见各种兼容问题。例如想进入页面自动播放视频之类的。全屏播...
2020-01-08 10:35:44
297
原创 酒浓码浓 - 前端音视频之移动端/微信浏览器
前端音视频之移动端/微信浏览器腾讯微信内嵌的浏览器，打开H5页面下拉时我们可以发现其实质上是QQ浏览器X5内核。X5开头的，表示在微信浏览器中可以打开专有的H5模式，以下介绍的属性中有些前缀带X5的需设置H5模式后才可生效，文档也提供了在全屏及退出时等的回调事件，安卓兼容要求浏览器版本>=7.1，具体参阅文档X5同层播放器。常见问题：微信浏览器中默认非全屏播放（A...
2020-01-07 18:26:41
334
原创 酒浓码浓 - 前端判断图片加载完毕
前端判断图片加载完毕首先普及一个技术点，img的onload事件及complete属性前者为image加载完毕事件，后可以做回调后者为image加载状态的属性，监听或在onload里打印也可以获取其是否加载完毕。那么如下调用前者，用promise判断所有图片都加载好了再做事~const arr = ["/static/img/123.png","/static/img/123...
2019-12-30 12:03:01
393
原创 酒浓码浓 - animate动画只展示第一帧，最后一帧及图片丢失
前端css3 animate动画只展示第一帧，最后一帧及图片丢失问题最近项目里要用animate加动画。 ios问题真多在safari浏览器 animate 在使用 css3 的 transform 属性会与z-index发生冲突z-index不仅失效，偶尔还会出现transform 动画玩过的地方，z-index层级较低的图片DOM会消失。那针对这点网上目前感觉唯一好用的解决办法...
2019-12-30 11:34:05
1011
2
原创 酒浓码浓 - ios进入页面自动弹出键盘
ios移动端进入页面怎么自动弹出键盘最近做的H5页面业务上有个需求，要在移动端，进入到某个页面自动聚焦input的焦点并弹出软键盘！！！查了一圈，发现autofocus，在android上只能聚焦不弹键盘，ios上不聚焦也不弹键盘。也用了N种方式，什么settimeout，什么模仿button触发click触发input的focus，什么自行封装touch事件等等等等！！全尼玛不好...
2019-11-01 09:42:14
1981
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人