程序me-CSDN博客

原创还没查阅过 ECMAScript 规范？那就让我们一起来开始吧！

作为前端搬砖中精通 Copy & Paste 的一员，如果你还没有查阅过 ECMA262 的规范文档，那么建议后续遇到有些问题的时候，可以试着往这方面靠，如果刚好可以查阅一下，那...

2020-09-23 09:05:00 311

原创一起来做小程序直播吧！

直播这两年太火了，做直播的公司也越来越多，尤其是今年小程序针对直播组件的优化（性能优化 + 同屏渲染），催生了很多的小程序直播应用。京喜直播的小程序端上线也有几个月了，基于内部分享，当前...

2020-09-17 11:57:49 1488 1

原创手把手用 UDP 实现 Node 服务日志归集（附完整源码）

日志归集：顾名思义，就是把日志归集起来。在开发 Node 服务的时候，我们经常会打印各种日志，比如 info, error 日志。如果我们已经将服务已经部署了很多机器上，这个时候如果需要...

2020-05-12 18:05:00 385

原创简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！

对于没太了解 Vue3.0 的同学，在看到 Composition API 时，除了看起来会有一个“高大上”的感觉，可能更多的是有点懵逼，心中不免泛起一堆疑惑，这到底是何方神圣？干了何等...

2020-05-06 08:05:00 1641 2

原创面试官：用一句话描述 JS 异常是否能被 try catch 捕获到？

平常撸代码的时候，try catch 用的太多了，特别是一些 ”安全感" 低的人，基本是到处 try catch，生怕 JS 报错，然后页面整个挂掉了。其实为啥会安全感低呢，是因...

2020-04-29 12:46:51 420

原创这个正则表达式有点意思！既简单又难

感谢正在读高中的@Alan-Liang 分享的题目。不看答案，试着想下如下题的结果是什么？console.log("more".replace(/.*/g,"p...

2020-04-26 08:05:00 206

原创对阮一峰《ES6 入门》箭头函数 this 描述的探究

前言前天，发了一篇公众号文章：原文链接：别低估自己，但，这道题，真的有点难昨日在部分群里引起了一些讨论，其中有一点是关于箭头函数的 this 指针的问题。使用了阮一峰《ES6 入门》文章...

2020-04-22 13:06:40 1592 3

原创别低估自己，但，这道题，真的有点难

今天一个朋友转给我一道题，让我帮忙解释解释。当我看到题目的时候，第一眼觉得贼简单，但是看提问越到后面越懵逼了，然后在琢磨着能不能猜对了…………题目如下：varage=10;var...

2020-04-20 08:17:20 195

原创不得不全部掌握：XSS 最全攻防之战！

背景为了提高页面性能，减少白屏时间，我的详情页面接收上游列表传过来的一个参数 cover，这是一张在上一个列表页面已经加载过了的图片链接，当跳转到我的页面时，首先将这张图片显示出来（浏览...

2020-04-16 08:30:00 309

原创 H5 直播的疯狂点赞动画是如何实现的？

直播有一个很重要的互动：点赞。为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求：点赞动作无限次，引导用户疯狂点赞直播间的所有疯狂点赞，都需要在所有用户界面都动...

2020-04-14 08:00:00 248

原创 H5 直播的疯狂点赞动画是如何实现的？（附完整源码）

直播有一个很重要的互动：点赞。为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求：点赞动作无限次，引导用户疯狂点赞直播间的所有疯狂点赞，都需要在所有用户界面都动画展现出来我们先来看效果图：从效果图上我们还看到有几点重要信息：点赞动画图片大小不一，运动轨迹也是随机的点赞动画图片都是先放大再匀速运动。快到顶部的时候，是渐渐消失。收到大量的点赞请求的时...

2020-04-13 23:14:45 2483

原创别高估自己，这道题，有点难！

今天在一个技术群里面，有朋友丢了一道题目，问这个输出是啥？粗略一看，输出都是 21 啊，你以为加个 if(true)，大伙就不知道了？然后，就没有然后了…………“光荣”的答错了！正确答案：内部是 21，外部是 1;这个玄妙之处确实就在这个块级作用域 if 里面。假如我们去掉 if 看题。var a = 0;// if(true){ a = 1;function a(){}a...

2020-04-13 23:09:28 437 1

本文一步一步深入解读 Promise 的注册和执行过程，读懂这几段代码，Promise 的注册和执行过程都将所向披靡，不再话下~~~~。你就是 Promise 大神！~~。当然了，就没人能误导你了~前言本文已代码解读的方式来学习整个过程。这里提供了四段代码，如果你都能理解清楚，正确的说出output过程，那么厉害大牛如你，Promise 的执行过程了如指掌。好多大牛已经熟悉了，当然了，并不是...

2019-10-21 13:49:12 3726 4

原创 vue3.0编译器compiler-core源码解析

Vue3的源代码正在国庆假期就这么突然放出来了，假期还没结束，陆陆续续看到努力的码农就在各种分析了。目前还是 pre Alpha，乐观估计还有 Alpha，Beta版本，最后才是正式版。话不多说，看 Pre-Alpha。瞧 compiler-core热门的 reactivity 被大佬翻来覆去再研究了，我就和大伙一起来解读一下 ”冷门“ 的 compiler 吧！????????????????如果你对 AS...

2019-10-09 19:15:13 2029

原创手把手教你写一个AST解析器

AST 解析器工作中经常用到，vue中的VNode就是如此！其实如果有需要将非结构化数据转换成结构化对象用来分析、处理、渲染的场景，我们都可以用此思想做转换。如何解析成 AST ？我们知道 html 源码只是一个文本数据，尽管它里面包含复杂的含义和嵌套节点逻辑，但是对于浏览器，babel 或者 vue 来说，输入的就是一个长字符串，显然，纯粹的一个字符串是表示不出来啥含义，那么就需...

2019-10-08 12:45:02 1648

原创新手引导蒙层的多种实现方式

当前发现很多页面做蒙层引导，还是使用图片形式来做。图片引导蒙层有几大缺点：图片大，影响加载图片的内容都是假的，和真实的底部内容没对上全屏蒙层图片，图片的宽高和屏幕宽高不一致，显示两边留黑，或者有压缩的效果。图片的引导位置不能点击。low ？ not cool ？本文讲述三种思路来实现引导蒙层border实现box-shadow实现z-index + opacity实现...

2019-09-09 13:05:45 5001

原创 H5&小程序中实现emoji表情

emoji表情都非常熟悉了，比如微信的会话窗口可以发表情。但是仔细看有一个重要的发现，比如朋友给你发一个emoji表情，在聊天会话列表页查看最近消息，会发现有点不同，体现在如下：列表页看到的就是一个表情，比如大笑????的表情。列表页看到的是一个文字，比如[发呆]，[懵逼]前者就是默认emoji表情了，后者则是自定义表情。显然你拿着微信的[懵逼]在微博上是显示不出微信的[懵逼]表情的...

2019-09-09 12:57:37 7742

原创非结构化的富文本数据在小程序中的实践

结构化的数据比较容易处理，按内容渲染即可。这篇着重讲非结构化的数据在小程序的显示。主要有三部：将html字符串转换为AST 语法树将AST 语法树的结构化数据渲染wxml处理图片和预览大图第一步：转换为 AST 语法树后端返回的是一个字符串，首先我们需要转换成结构化的数据对象。字符串转换成对象，有且只有一种了，使用正则表达式来查找字符串当中 Html 标签等信息了。首先我们来看三个...

2019-07-27 17:04:22 331

原创 vuejs模板和vnode的diff基本过程

模板方法注册core/instance/index.js （renderMixin） —》 core/instance/render.js(renderMixin) 里面执行方法installRenderHelpers(Vue.prototype)core/instance/render-helper/index.jsexport function installRenderHelpers ...

2019-07-18 19:19:48 448

原创 js对象字面量定义与JSON.parse的性能比较

今日看到一篇文章（https://v8.dev/blog/cost-of-javascript-2019 ,其中有一段是如下描述：

2019-07-08 19:45:42 1759 2

原创小白一步一步阅读vuejs源码

本篇不直接解读vuejs的双向绑定的原理，而是已读源码的视角来看vue是怎么做的。1、下载vuejs源码mkdir project && cd project && git clone https://github.com/vuejs/vue.gitnpm i2、开始一步一步读代码打开package.json。看看scripts，我们先只看dev，这...

2019-07-04 16:27:24 3255

转载 react-native 样式总结

布局React-Native的布局是完全是用flex来实现。flex的用法就不多说了，具体可参考阮一峰老师的这篇文章《flex布局：语法篇》，里面对flex的讲解非常详细；需要注意的是：React-Native中的flex的相关属性不是完全依照w3c规范提供的各种值，对其中的某些属性值进行了阉割。React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一...

2019-06-06 10:33:54 1390

原创初识html5小游戏

本次Html5小游戏使用createjs来开发。一、初始化首先要初始化页面场景，和一些默认页面元素。获取屏幕宽度，设置canvas this.windowWidth = document.documentElement.clientWidth; this.windowHeight = document.documentElement.clientHeight; const canv...

2019-06-05 18:57:33 827

原创 js排序算法，冒泡，选择，插入，快速排序

排序算法：冒泡，选择，插入，快速排序// 冒泡排序function bubbleSort(arr){ var start = Date.now(); for(var i=0,len=arr.length;i<len;i++){ var temp; for(var j=i+1;j<len-1;j++){ if...

2019-06-03 13:44:57 213

原创微信IOS访问页面，返回的时候页面空白

微信IOS访问页面，点击跳转，返回页面空白，手势动一下内容就出来了。是微信IOS的缓存的原因，且页面使用了rem导致。解决办法，在页面中针对IOS做一次hack,重置页面的font-size，让页面渲染出新的内容if(navigator.userAgent.indexOf("iPhone")>=0) { // 针对IOS的hack var FONTSIZE = par...

2019-05-31 14:36:58 3554

原创 js判断当前页面是否活动页面

在开发中，希望当前页面如果不是活动页面，即用户切换了tab页，或者用户把浏览器缩小隐藏了这个时候，我们希望页面暂停，比如游戏暂停，视频停止播放等。那怎么做呢?1、使用document.hidden来判定是否隐藏var hidden, state, visibilityChange;if (typeof document.hidden !== "undefined") { h...

2019-05-23 22:03:37 4774

原创 react native报错：Unable to resolve module `DrawerLayoutAndroid`

error: bundling failed: Error: Unable to resolve module AccessibilityInfo fromerror: bundling failed: Error: Unable to resolve module `DrawerLayoutAndroid` from `/Users/****/node_modules/react-nativ...

2019-05-16 20:19:06 779

原创小程序和H5瀑布流的实现

瀑布流：左右两列高度不一样的数据。像瀑布一样往下排列。瀑布流和普通列表还是有点不一样，会碰到三点问题：1、怎么处理页面图片闪烁的问题。加载页面的时候，刚看到文字在这个文字，然后有被挤下去了，图片刚没有，加载完有显示出来了。2、怎么平衡左右两列的高度差的问题。左右两列是渲染数据，但是可能左边刚好很多都是图片比较高的数据，右边都是矮的图片，那么滚动翻页的...

2019-05-08 19:10:16 3850

原创 css蒙层和新手引导的实现方式

开发当中经常用到新用户引导，弹出蒙层的场景。入下图，想提醒用户底部有一个发表按钮，正文是一个feeds晒单。那如何处理呢？左边的情况，可能你会用一张图片悬浮在底部的icon之上，倒是可以实现。但是右边的就有点困难了，因为第一条feeds是在变化的，你总不能固定用一张图片（其实也可以吧，只要产品不找你事，哈哈）。那右边这个我们怎么做呢？(这里是用下面的第二种方案实现的,box-shado...

2019-04-29 18:12:48 10088

原创 CSS 实现多行文字截断

用js实现多行文字截断https://blog.csdn.net/lqyygyss/article/details/81868679以下用css实现。有个三个盒子 div，粉色盒子左浮动，浅蓝色盒子和黄色盒子右浮动：当浅蓝色盒子的高度低于粉色盒子，黄色盒子仍会处于浅蓝色盒子右下方。如果浅蓝色盒子文本过多，高度超过了粉色盒子，则黄色盒子不会停留在右下方，而是掉到了粉色盒子下。...

2019-04-26 20:31:46 1334

原创 js逗号运算符

1、先看一例var a=1,b=2,c=3;function test(){ return a++,++b,c++;}执行test(),返回c 即返回c的值最终a==2,b==3,c==4表达式1，表达式2，表达式3……表达式n 依次执行表达式1，2，3，最终返回执行n之后的结果2、再看一例var age=10;var obj={ age:20...

2019-04-24 18:39:43 508

原创 vue中的nextTick的实现原理

使用vue中，我们经常使用nextTick,来监听当前dom节点更新完成了，（微任务），然后执行回调，那vue是怎么做到的呢？1、定义执行了nextTick的callbacks,一旦最近的dom节点更新了，则会统一清除所有的callbacks，执行flushCallbacksconst callbacks = []let pending = falsefunction flu...

2019-04-22 16:18:12 2453

原创 try catch捕捉异常分析

try catch捕捉异常ry cath里面定义function,执行function在try catch面，可以捕捉到try{ function d(){a.b;} d();}catch(e){console.log("error",e);}error ReferenceError: a is not defined at d (<anonymous...

2019-04-22 13:07:52 2196

原创正则表达式全析

基础语法：^ 匹配开始$匹配结束() 结果匹配项[] 任意匹配项 [abc]匹配a,b,c[^] 非任意匹配项 [^abc]不含a,b,c{2,} 2个以上，{2,2} 2个字符校验汉字：^[\u4e00-\u9fa5]{0,}$ // 0到N个中文字符^[^\u4e00-\u9fa5]{0,}$ //不包含中文字符的其他字符^[\u00FF-...

2019-04-09 19:11:26 126

原创 eslint配置

//使用eslint默认推荐的https://cn.eslint.org/docs/rules/，里面打勾的标识配置都为生效"extends": "eslint:recommended",//如下使用的是eslint-config-standard，可以省略前缀eslint-config-，引用共享的配置https://cn.eslint.org/docs/developer-guid...

2019-04-08 20:54:29 969

原创微信小程序Uncaught error:expect END descriptor with depth 0 but get another和expect FLOW_MINIPULATE_CHILD

Framework innererror（expect FLOW_MINIPULATE_CHILD but get another)Uncaught error:expect END descriptor with depth 0 but get another2019.3.19号晚上，很久没动的代码，线上忽然报这个错误。经过排查，问题如下：页面定义的data对象的变量 confi...

2019-03-20 11:16:04 6995 1

原创 png转svg生成svg+xml

将png图片转测svg+xmldata:image/svg+xml,<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M5.99017859,36 L34.0098214,36 C35.1085737,36 36,35.1062037 36,34.0000567 L36,29 C36,26...

2019-03-12 12:02:11 8128

转载正则表达式–零宽断言详解

在使用正则表达式时，有时我们需要捕获的内容前后必须是特定内容，但又不捕获这些特定内容的时候，零宽断言就起到作用了。一.基本概念:零宽断言正如它的名字一样，是一种零宽度的匹配，它匹配到的内容不会保存到匹配结果中去，最终匹配结果只是一个位置而已。作用是给指定位置添加一个限定条件，用来规定此位置之前或者之后的字符必须满足限定条件才能使正则中的字表达式匹配成功。注意:这里所说的子表达式并非...

2019-03-05 17:30:38 224

原创微信小程序实现多视频video采坑，上下滑动视频

小程序做滑屏视频，按照h5的思路开发。一路采坑……尝试:第一次：relative布局，使用translateY来实现实时上滑。直接借鉴H5的思路。页面布局relative，一个视频宽度空间充满屏幕。每次向下只多加载一个视频，每次只保持页面存储三个屏幕的内容，也就是三个视频，向上滑动一次，再渲染一个视频。监听手势滑动，改变当前可视区域的translateY。嗯，可以的。然后第一步...

2019-02-27 18:20:13 20915 59

原创微信小程序接口请求有两个cookie

前提：微信小程序是没有cookie的，我们需要手动设置header的cookie，自然cookie是存储在storage里面，然后请求接口的时候，读取storage，拼接成key=value;key=value，然后设置到header的cookie。问题：抓包接口，发现header有两个cookie，导致后台nginx解析异常，cookie内容拿到的都是空。一个cookie,一个Coo...

2019-02-27 16:53:56 5483