blog

pixi.js 速记其一 最近在研（xue）究（xi）pixi.js 。既然是研（xue）究（xi）既然会有许多一时踩坑的地方，所以想要开一个系列记录一下，当然，希望我不要鸽了 资源加载pixijs 加载游戏资源要通过他们自己的 loader 函数，比如 123PIXI.loader .add("images/anyImage.png") .load(setup) 这样它就会找到 images/anyImage.png 并加载进来，问题在于我们再工程化的项目中，会使用例如 webpack，parcel 等打包工具。我们为了让打包工具一并处理图片文件，所以直接 .add("images/anyImage.png") 是无法正确找到打包后的文件的。 因此，我们需要先把资源文件引入 js 再放到 loader 12345import catUrl from './images/cat.png';// 这样就可以正确找到打包后的文件loader .add('cat', catUrl) 另外一个官方推荐 ...

vue 与 throttle 的坑Lodash 一直是我十分喜欢的一个工具库，其中 throttle 节流函数适用于控制类似 scroll 事件回调这种极其频繁场景上。可惜的是在配合 vue 使用上变得不那么好用，让我觉得非常可惜，当然预先说一句，这实际上不是 throttle ，Lodash 设计的问题，更多的是 vue 的问题。 问题一 绑定不便事实上不只是 throttle ，相当一类工具类函数，特指 Lodash 中那一类接受一个函数返回一个新的函数的函数，会遇到无法直接绑定到 component 的 methods 上，首先是无法使用对象方法的简写语法，即 1234567891011121314export default { methods:{ methods1(){ // this.something } // 想啥呢？ throttle(()=>{ }), methods2:throttle(()=>{ // 没有 t ...

问：广州图书馆何处最为静谧而有图书馆的气息？ 此处不宜喧哗自从几年前广州图书馆新馆建成开放，过于嘈杂一直是其深受诟病的一点。由于其靠近少年宫，广州塔，广州历史博物馆，而且空间开阔，成了许多家长带孩子的好去处。为了接纳儿童，甚至专门开辟了一侧楼馆作为儿童读书阅览的空间，在我看来图书馆的人流量显然是远超旁边博物馆的。而人流过大尤其是亲子十分多，导致广图尤其是暑假时相当嘈杂，即便工作人员已经相当努力地在维护环境了。因此从体验上来说这里更像是热闹购书中心，而非充满书香气息的，安静的，符合人们想象中的“图书馆”。 不过，我今天倒不是要花时间去批判广图如何如何过于嘈杂，毕竟这已经在社交媒体上被讲烂了。 我想讲的是文章开头的提问。 广州图书馆何处最为静谧而有图书馆的气息？ 请保持安静是远离大堂的八楼民俗厅嘛？ 还是专家隔间？ 在我看来都不是。 我觉得最为安静的，最能让人感受到图书馆气质的地方，实际上是从花城汇到达广图 -1 楼，中间那最后的500 米。 当然 500 是为了凑够整，具体多少米我不是太确定，不过不管是多少米，这段路程确实是最能让我感受到图书馆那种静谧气息的地方。 这个地方实际上是 ...

element 的 notification 消息组件解析题图无关 这是承继上一篇——不知道哪一篇提到我在公司内部写一套 ui 控件的下一篇。因为最近也需要实现一个类似 element 的 notification 消息组件。因此便直接研究参考了 element 的实现源码，相对简单，于是写一下记下来。 基本实现原理总体来说这个组件还是比较简单的。我对比了一下 iview 跟 element 的实现，个人感觉 element的更好。 组件结构先来看看这个组件的目录结构。 notification├── index.js├── src| ├── main.js| └── main.vue 除开统一的暴露文件 index.js, 主要的就是 main.js 和 main.vue (明明也就三个文件…… main.vue 消息组件的主体，控制消息组件的具体结构样式与组件逻辑 main.js 基于上面的组件主体，构造命令式的新增/关闭消息组件逻辑，以及通过一个数组，记录所有的消息组件实例，以计算控制消息组件的具体定位 关键点解析根据组件的目录结构，我们已经可以看出整个组件逻辑了 ...

这次十月新番里，有不少值得一看的作品，比如艹钻石，比如少女终末游记，三月狮子，血界战线，just because……不过让我特别惊喜的则是其中一部轻改作品 —— 『如果有妹妹就好了』 与其说他给我惊喜，不如说是我一开始有了错误的期待，毕竟我没有看过原作，同时名字上透露着一股俗套的轻改气息，让我产生了误判。 妹属性虽然不是什么新鲜的作品主题，偶尔看看福利也还是挺有意思的，可是今年的黄漫老师则让我对以妹属性为主题的作品都有些敬而远之。黄漫老师虽然没有俺妹那样的轰动但也说得上是当季的滑梯作，而且从整体的制作水准来说还是可以说得上是中规中矩的良作。可是我则对剧情设定上的编排喜欢不上来，笼统来说就是这部作品中无处不在强调着的妹元素，让我有种审美疲劳，而别可以调剂这种疲劳的部分却设定得十分简陋，仿佛只要表现好妹妹这个主题，别的什么都不重要，这一点更加让我喜欢不上来。 因此我看到一半就看不下去了，当然里面的角色还是挺萌的，表情包也很好用。 说回到『如有妹』，是的，为什么要先提到黄漫老师，提到满溢而出的妹元素? 就是因为『如有妹』给我的第一个惊喜，也是我误判的地方就是，虽然男主嘴上不断嚷嚷着 “想 ...

Use Any Javascript Library With Vue.js – Vue.js Developers – Medium Lodash, Moment, Axios, Async…these are useful Javascript libraries that you’ll want to utilise in many of your Vue.js apps. Lodash, Moment, Axios, Async…这些都是非常有用的 Javascript 库，而且你会希望在你的各种 Vue.js 应用之中使用。 But as your project grows you’ll be separating code into single file components and module files. You also may want to run your app in different environments to allow server rendering. 但是随着你的项目的增长，你会想要将代码分离为单一的组件文件跟模块文件。同时，你可能 ...

令人蛋疼的问题前些天看到一个比较有趣的包，实现了一个命令行工具。其中涉及到数据网络请求部分是用 request 实现的。其中的实现方式还是用了传统 cb ，倒不是说不好，只是我一时起兴想要用 promise 风格的实现来重写一遍。结果用 promise 实现逻辑倒不是难事，反而是其中一个我没有注意的细节害我卡带许久。于是写一篇博客记录一下 问题说问题以前先说说出现问题的逻辑吧。那段代码简单来说就是接受一个用户信息，发起一个登录请求，请求成功后，会返回一个 302 跳转逻辑，并在 header 中带上 token 信息。逻辑非常简单。 为了方便使用 promise ，我选择用自带 promise 的 http 请求库 axios 替代 request，当然 request 也是有 promise 实现的。不过我以为我更熟悉 axios 而已。结果问题就出在这里了。 将请求逻辑用 axios 实现以后，却发现无论如果都得不到对应的 302 返回结果。自然也拿不到 token 。有经验的人应该从描述中也能看到问题所在了，可惜我就没有，所以请允许我细细道来。 过程请求结构不一致?一开始 ...

如何用原生实现一个滑动消除卡片的组件今天看到chrome github 实现的一个通过左右滑动清除子卡片的的组件。感觉有点意思，学习一下 源地址在这里https://github.com/GoogleChrome/ui-element-samples/tree/gh-pages/swipeable-cards 需求分析这个组件的功能很单一 接受一组元素，使之可以通过鼠标或是触控左右滑动元素 当左右滑动到达一定程度以后则删除该列表元素 这个组件的一个难点在于如何让元素跟随鼠标或是触控左右滑动。关于这一点，我们可以将整个过程分为 开始滑动->滑动中->滑动结束 同时为了滑动过程的流畅，我们不在滑动中触发响应的位移动画，我们可以单独抽出一个 update 函数负责函数动画的绘制，而只要 requestAnimationFrame 函数循环调用在每一帧中检查是否有需要位移，有则更新利用 update 响应的位移位置到 css 动画中 开始滑动这一阶段我们需要捕获 mousedown 跟 touchstart 事件，通过事件的target确定被拖动的元素并记录 target 元 ...

reduce 定义reduce 在 MDN 里面的定义如下 reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值。 看起来有点绕，不过从代码上来看就好理解多了 1234let ary=[1,2,3,4,5]// 数组求和的 reduce 写法let sum= ary.reduce((acc,val)=>acc+val,0); // sum= 15 reduce 接受两个参数，一个回调函数，一个初始值上文中的 (acc,val)=>acc+val 就是回调函数，0 则是遍历的初始值 其中在回调函数中，会传入四个参数 accumulator 上一次调用回调返回的值，或者是提供的初始值（initialValue） currentValue 数组中正在处理的元素 currentIndex 数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始 array 调用 reduce 的数组 最终返回累计处理的结果 为何 reduce与 forEach 相比起来，reduce 不同之处在于，回调的首参 ...

为什么说使用 _.chain 是个错误将你的代码从_.chain的枷锁中解放出来。 图片来源于Jeremy Booth; 特别要感谢Eric Baer, Brooklyn Zelenka & Jason Trill 他们的无私的帮助和知识;也特别要感谢 John-David Dalton 不仅是因为 lodash 本身，还有他谦虚的指出了这篇文章的一些不准确之处以及介绍了许多有关 lodash 内部工作原理的花边知识。 为什么说使用 _.chain 是个错误在任何一个使用 _.chain 的应用或者是类库当中，都有这样两个微不足道的小问题：它们通常通过将整个lodash 引入到文件中来使用，和他们难以添加扩展出新的方法。首先，让我们去了解一下为什么人们会使用 _.chain， 这是一件很有意义的事。然后寻找出我们要如何使用一些编程技巧来去其糟粕，取其精华。我们将会关注如何得到一个2倍的构建时间优化以及1.5倍的文件大小的减少,通过把下面这个: 1234567import _ from 'lodash'_.chain([1, 2, 3]) .map(x = ...