ryancui
ryancui
在很多时候需要实现一个弹出框，效果类似这样：  要留意的是这个对话框有一个指示弹出位置的三角，并且需要实现下拉动画和上滑动画。 ## 一个 box 加 `:before` 针对需求，有初步的方案 - 指示三角：在 box 前加伪类 `:before`、三角形通过边框法实现 `border-bottom` - 动画：`transition height` 由于 box 高度可以固定，直接使用 `height` 做动画 关于边框法实现三角形可以自行 Google，原理很简单，就是把 box model 的内容去掉 `width: 0;...
## HTML FORM 的调整 1867 首先对 HTML 的 `form` 元素进行了两处改变： 1. 对 `input` 元素的 `type` 属性增加一个 `file` 属性 2. 对 `input` 元素增加一个 `accept` 属性，表示允许的文件类型 当使用 `form` 进行文件上传时，`enctype` 应设为 `multipart/form-data`。此后当对 form...
`padding` 属性 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) 和 [规范](https://www.w3.org/TR/CSS2/box.html#propdef-padding)： > Percentages - refer to the width of the containing block 当使用百分比值时，通过包含块的宽度计算。由此可以通过设置 `padding-top: 50%;` 来实现高度恒为宽度的 50% 效果。 注意的是，这种实现方式其实是把 `padding` 撑开，实际上 box 并没有高度。因此当需要在 box 内部再进行布局时，需要放到外面。 [CodePen](https://codepen.io/ryancui/pen/eEyWxr?editors=1100)
昨天面试的时候问了一个关于箭头函数的问题，回来发现好像自己说错了（装逼失败），于是便重新认识一下这个 ES6 用得最多的东西。 这段时间面试了很多人，当问到箭头函数带来的好处时，大部分人都只说到了写得少（？？？） ，不需要用 `that`、`self` 之类的变量，可以直接使用 `this`。但当细问下去，其实很多人不了解箭头函数的 `this` 就是是啥回事（或者包括我自己 先说说在此之前我对箭头函数的理解吧：箭头函数里的 `this` 是「继承」的，本身不存在自己的 `this`，当调用到 `this` 时用的其实是上一层作用域的 `this`。现在看来这个理解还是有一定偏差。 ## 闭包与词法作用域 摘录一段犀牛书的代码，就能很好说明闭包和词法作用域的问题了： ```javascript var scope = 'global scope'; function checkscope() { var...
## 需要一个 EventBus 在 #11 中提到，通过 EventBus 可以使登录逻辑与业务接口同步起来，当然这也是小程序页面间通信的一种方式，因此需要一个 EventBus. 无非就是自己造轮子或者直接用别人的，由于一直在写 Angular，因此第一想法就是能不能把 RxJS 扔进去，那 `Observable`/`ReplaySubject` 不就随便用了吗。但其实需要用到的功能没这么多，其实就是一个简单的 `publish/subscribe` 就完了，于是就决定自己写一个（Google 抄一个）吧。 ## 需要怎样的 EventBus 于是找到了[微信小程序跨页面通信解决思路](https://aotu.io/notes/2017/01/19/wxapp-event/index.html)，里面有一个简单的实现，抄过来后我发现有几个问题可以改进： - 不需要处理 `args`，需要传什么数据麻烦你自行包成一个 `Object`，只给你传 `payload` 谢谢 - 销毁订阅还要把这个回调函数也传进去也太不科学了，RxJS...
## 登录逻辑与登录态 根据小程序文档与官方 Demo 的例子，微信登录逻辑在 `app.js` 的 `App.onLaunch` 中实现。另外还需要自行与第三方服务器独立进行一套授权机制，这里我使用了 JWT，在换取 `openid` 的接口中返回。 整个 `app.js` 的登录逻辑大致如下，进入小程序后检查微信登录态是否过期，过期了重新调起微信登录并换取新的 JWT 作为与第三方服务器通信的凭证；未过期则从 `localStorage` 中拉取 token 与用户信息。 ```javascript App({ onLaunch: function () { const that =...
## Ionic 构建失败 使用 `ionic-app-scripts build` 构建一个应用的生产版本时，发现出现了以下的错误： ``` [18:21:18] ionic-app-script task: "build" [18:21:18] Error: ./node_modules/sockjs-client/lib/main.js Module build failed: RangeError: Maximum call stack size exceeded at narrowTypeByInstanceof (/Users/ryancui/kit/zhangting-wx/node_modules/typescript/lib/typescript.js:36003:44) at narrowTypeByBinaryExpression (/Users/ryancui/kit/zhangting-wx/node_modules/typescript/lib/typescript.js:35911:32)...
ElementUI 提供的 `Tree` 组件中有一个 `filter-node-method` 的 props, 可以配合 `filter` 方法来做树的查找筛选功能，具体的用法是： ```vue export default { data() { return [/* 一堆树结构数据 */] }, methods: { filterTree(value, data, node) { return data.label.includes(value) }...
## 服务端截图 最近需要实现服务端截图的需求，就是在 Server 开一个 Headless 的浏览器然后访问一个 URL，利用浏览器的截图功能来把整个网页保存成一张图片。由于整个渲染过程与用户在 Client 直接打开网页是一模一样的（只是不会真的渲染 UI），因此保存的图片也与用户实际在浏览器看到的完全一致。 本来想直接用 Puppeteer 就马上做完了，实在没想到 Puppeteer 并不支持在 CentOS 6 上使用。官网上写的 gtk3 的依赖只有 CentOS 7 才有，因此只能使用 PhantomJS 来做了。没想到这里面也有不少的问题。 ## PhantomJS 一开始我以为 PhantomJS...
俗话说得好，代码重构火葬场。最近接手了一个微信商城的项目，代码量不是很大，但其中还是有不少的坑可以深陷其中，包括一个关于 JavaScript 的 Date Format 问题。另外网上的很多文章在 Date Format 上的理解略有偏颇，因此结合着 ECMAScript 规范把这部分的知识整理一下。 ## 时间与时区 时区嘛，简单点讲就是地球上不同地方的时间是不一样的，其中存在一个标准时区的时间，我们叫 UTC 时间。中国位于东八区嘛，所以 CST（中国标准时间）就会比 UTC **快八小时**。举个栗子： 如果标准时间是 2018-01-01 00:00:00，那么在中国的时间就应该是 2018-01-01 08:00:00，因为我们比较快嘛。相反，如果在中国的时间是 2018-01-01 00:00:00，那么标准时间就应该是 2017-12-31 16:00:00， 还没倒数新年呢。这个呢应该比较好理解。 ##...