定时器 说起 JavaScript 的定时器，相信大家一定很熟悉 setTimeout 和 setInterval 。 具体功能不再重述，定时器的作用主要是做延时任务。 并且，像我们熟悉知道的编程语言， Java 、 PHP ， 都包含与生俱来的多线程能力，可以同时处理多个任务。 而 JavaScript 则设计成 单线程 结合 event-loop 的异步任务调度模式。 在这种特别的设计模式下， JavaScript 不得不依赖定时器，来应对不同场景的逻辑。 阻塞 也因为 JavaScript 是 单线程 的运行环境， 同时也带来了 代码运行阻塞 的副作用。 为了解决各种各样的时序场景， 就诞生了 setTimeout(fn, 0) 这一句代码。 在阅读代码时，我们会产生非常符合人类直觉的想法： 这里的 0 ，代表浏览器在 0 毫秒后执行任务 fn 。 或者：浏览器会立即后执行任务 fn 。 当然，以上的想法是 错误 的。注意，是 错误 的。 正确的解读当然是： 任务 fn 会添加到 event-loop 的事件队列。

前言 在小程序 textarea 组件上展示一个模态弹窗组件，会发现 textarea 中输入的文字内容，会直接穿透模态弹窗显示在最上面，而且还能点击输入文字。 限制 小程序 textarea 是由客户端创建的原生组件，由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： * 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 * 后插入的原生组件可以覆盖之前的原生组件。 * 原生组件还无法在 picker-view [https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html] 中使用。 * 基础库 2.4.4 以下版本，原生组件不支持在 scroll-view [https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html] 、 swiper

前言 树形组件的需求，很多人遇到都觉得头疼、逻辑复杂，除了展示之外，还要有增删该查的逻辑。一般树形组件具有多个层级，如果当前层级有下一个层级，会有像 children、list 等属性，数据结构一般就是 const tree = [ { name: 'a', id: 1, }, { name: 'b', id: 2, children: [ { name: 'c', id: 3 } ] }, ] 界面大概就是这种： [https://user-gold-cdn.xitu.io/2019/7/21/16c13247c92936fa?w=908&h=502&f=png&s=108344]

一、什么是 PARTIAL Partial Application 即部分应用函数。在一些场景下，我们需要调用接收个参数的函数，但其中一些参数是固定的，我们便可以封装该函数，如： const publishedInYear = (year, book) => book.year === year; // 传入固定的 “year” 来封装 publishedInYearconst publishedIn2019 = (book) => publishedInYear(2019, book); const iBooks = books.filter(publishedIn2019); 在上面的示例中，我们传入了部分参数给 publishedInYear，得到 publishedIn2019，这便是手动的 Partial Application。 二、基于高阶函数的实现 在上面的例子中，如果我们需要筛选出更多年份的 books，需要为每一个年份都封装一遍 publishedInXXXX 方法，未免太麻烦了，我们可以改写 publishedInYear 方法为高阶函数，如下：

前言：大家好，我是练习时长1年多的前端实习生ajax，由于练习时长不足两年半，在前端动画技能上属于菜鸡水平。最近终于逮到做品牌页这个机会， 不用写管理后台了！ 趁机学了一波动画技能，感觉得到了自我救赎。 1. 需求简介 企鹅辅导品牌页 [https://fudao.qq.com/pc/brand.html] 是一个品牌介绍页，目的在于让用户全方位了解企鹅辅导。 一般来说，品牌介绍页都是少不了各种动画的。这里我列出了辅导品牌页的三个主要的动画，后面我会讲我的实现 1. 隧道动画： 隧道动画 [https://imwebconf2018-1251594266.cos.ap-guangzhou.myqcloud.com/tunnel.gif] 页面滑动到隧道位置的时候，会触发隧道动画的自动播放。 隧道动画与右边滑动动画要保持一致，当隧道最后一节起来之后，在隧道口展开出一条路。 2. 教研团队代表动画： 教师 [https://imwebconf2018-1251594266.cos.ap-guangzhou.myqcloud.com/teacher.gif]

什么是原型语言 * 只有对象,没有类;对象继承对象,而不是类继承类。 * “原型对象”是核心概念。原型对象是新对象的模板，它将自身的属性共享给新对象。一个对象不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。 * 每一个对象都有自己的原型对象，所有对象构成一个树状的层级系统。root节点的顶层对象是一个语言原生的对象，只有它没有原型对象，其他所有对象都直接或间接继承它的属性。 原型语言创建有两个步骤 * 使用”原型对象”作为”模板”生成新对象 ：这个步骤是必要的，这是每个对象出生的唯一方式。以原型为模板创建对象，这也是”原型”(prototype)的原意。 * 初始化内部属性 ：这一步骤不是必要的。通俗点说，就是，对”复制品”不满意，我们可以”再加工”，使之获得不同于”模板”的”个性”。 所以在JavaScript的世界里，万物皆对象这个概念从一而终。 JS本地对象、内置对象、宿主对象 * 全局对象

在知乎上上看到如下问题： 浮点数精度问题的前世今生 [HTTPS://WWW.ZHIHU.COM/QUESTION/26806477] ？ 1.该问题出现的原因 ？ 2.为何其他编程语言，比如java中可能没有js那么明显 3.大家在项目中踩过浮点数精度的坑？ 4.最后采用哪些方案规避这个问题的？ 5.为何采用改方案？ 例如在 chrome js console 中： alert(0.7+0.1); //输出0.7999999999999999 之前自己答的不是满意（对 陈嘉栋的回 [https://www.zhihu.com/question/26806477/answer/125001707] 答 还是满意的），想对这个问题做个深入浅出的总结

1、SHADOW DOM的概念 Shadow DOM用官方的翻译来说就是影子 DOM，他能够为Web组件中的 DOM和 CSS提供了封装，实际上是在浏览器渲染文档的时候会给指定的DOM结构插入编写好的DOM元素，但是插入的Shadow DOM 会与主文档的DOM保持分离，也就是说Shadow DOM不存在于主DOM树上。 Shadow DOM 需要append某一个DOM元素上，但是Shadow DOM封装出来的DOM元素是独立的，外部的配置不会影响到内部，内部的配置也不会影响外部。但是我们还是能够通过js或者css来控制Shadow DOM里面封装好的元素。

元编程的概念有很多文章，通过操作更加底层的api做更多个性化的功能。一句话概括，就是 用代码来写代码 一些时候，写各种下划线、前后缀，为了实现一个唯一值或者秘密的特殊辅助值，用来辅助业务逻辑或者说作为一个私有的东西： const onlyone = 'im-only@@我就不信会重复'; const obj = {}; obj[onlyone] = 'xxx'; angular1暴露出来的对象里面，经常看见 $ 开头或者 $$ 开头的变量。 $ 开头是比较底层的变量了， $$ 开头的是更加底层的，而且我们是基本不会用上的。还有redux源码，首次初始化的action.type是 var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.'); 种种例子，都可以看见，搞个花哨的名字，作为内部运行的辅助变量或者唯一变量使用。花时间想key名字，而且名字越写越长，是不是总感觉是一种麻烦？

上一篇（环境搭建，简单接入）： C++编写WebAssembly初探 [https://www.imweb.io/topic/5c32d38a611a25cc7bf1d874] 这一次，我们尝试使用WebAssembly来做简单的图片处理。 我们选取一种最基本的图像处理——高斯模糊来尝试实现。原理可参考 高斯模糊和卷积滤波简介 [https://www.jianshu.com/p/8d2d93c4229b] JS向WASM传递数组 与传递number不同，传递数组时，需要js将数组拷贝到 wasm内存 [https://developer.mozilla.org/zh-CN/docs/WebAssembly/Using_the_JavaScript_API#内存] 中，并通过传递指针（数据在内存中的位置），让wasm通过访问内存的具体位置，来获取或修改数组。 另外，不同于js，wasm的内存管理由开发者进行控制，我们需要手动分配和释放内存。

上个月参与了助力小程序的开发，其中也遇到了一些小程序开发过程之中的问题。 GETMENUBUTTONBOUNDINGCLIENTRECT 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 如果我们使用的是自定义导航模式（ navigationStyle: 'custom' ），一般则需要通过此函数来获取菜单按钮的信息： 此函数从官方文档上看是同步的，但是经过实际中发现，它可能是异步的。经常有的时候会获取不到相应的 bottom、top 等信息。 VIDEO 组件的全屏问题 经过测试发现，小程序的 video 组件会在进入全屏播放，然后退出全屏的过程中黑屏。

关于WebAssembly ( en [https://webassembly.org/] zh ，将C/C++编译为wasm依赖于emscripten，这里我们需要自行去编译一个Emscripten。