班会第 46 期

[ufologist]

• 技术

  • 开源移动端元素拖拽惯性弹动以及下拉加载两个JS

    开源两个起点中文网M站两个动效交互JS，MIT协议，保留版权注释信息，即使压缩后

    • 任意元素屏幕拖移外带惯性边缘弹动效果

      

      • 分享一个即插即用的私藏缓动动画JS小算法
      • 如何使用Tween.js各类原生动画运动缓动算法

    • 基于窗体的下拉释放加载刷新效果

      

  • 基于active,checked等状态类名的web前端交互开发

    .active等JS交互类名自身绝对…绝对不能有CSS样式: 再说一遍，自身无样式，就是一个状态标识符，用来和其他类名发生关系，然后让其他类名的样式发生变化。这种关系可以是父子，兄弟或者自身。

    .active本质上扮演的角色不是类名样式，而是一个标识符！实现了真正意义上的样式和行为分离！

    • 省了很多想命名的脑细胞

    • CSS和JS代码可读性更强了

    • JS代码量更少了

    • 类名压缩成为了可能

      类名压缩最大的阻碍，在我看来，就是我们小伙伴在实现JS交互效果的时候不注意，常常把带有CSS样式的类名混在JS文件中，并且命名随意，并且，会把类名字符串进行分隔处理

      如果大家遵循“基于active状态类名的web交互开发”，JS文件中只有不参与CSS样式的类名选择器，以及不参与CSS样式的交互效果占位符，则我们就可以通过简单的设置不过滤的类名，实现我们的类名压缩效果了

      让我们的类名压缩工具不压缩这些类名，则我们完全不要关心JS，也就是无需去截自页面使用的JS资源，只要安安心心压缩CSS文件中的类名，同时对我们页面中使用的类名进行压缩就可以了，一个想实现很多年的东西就通过这么个实现准则约束给实现了

      

      yued-fe/bobo 波波-静态页面发布辅助工具

      • 自动静态资源版本号递增
      • 自动压缩HTML和className类名压缩
      • 自动添加统计代码和微信分享
      • 自动SVN或Git目录文件同步

  • 知乎屏幕截图反馈的实现

    点击知乎页面右下角的反馈按钮，弹出反馈弹窗, 窗口中会显示当前页面的截图，并且可以在上面做标记

    我的第一直觉是html2canvas，但是知乎的截图中的css复原的非常完美，相比之下google keep的截图就会有很多小地方发生了错位。

    于是打开devTool一看源代码，发现知乎使用了rasterizeHTML.js

    • rasterizeHTML中对原理进行了说明，主要利用了<svg>的<foreignObject>，把网页作为外部资源嵌套在svg中，然后在把svg绘制在canvas中。具体原理和步骤说明在MDN的Drawing DOM objects into a canvas也有说明
    • html2canvas的原理在其官网上也有写，就是去看一个个元素的具体样式，然后在canvas上进行重新绘制－－这种实现办法不可避免的出现处理不完整的情况，比如css的特殊属性等。但是用svg的话，利用的直接是浏览器自身的渲染，所以可以达到非常完美的地步
    • 最重要的是html中的外部资源需要同源，或者开启了cors。 图片的话data-url不受限制，所以知乎采用的是将图片src转换为data-url的形式，个人觉得用cors简单方便的多啊，因为data-url有长度显示，最好不能超过2KB

    和rasterizeHTML相似的library还有dom-to-image, domvas等，实际上很早以前就有了，只不过一直不知道有什么用，最近看来意见反馈的时候用这个是一种趋势。

    题外话: 手动绘制区域，注意出现重叠的区域会合并在一起, 用的是canvas

    

    $0.toBlob((result)=>{
        console.log(URL.createObjectURL(result));
    });

  • 掘金翻译计划，翻译掘金上优质的英文文章 @px0078

    掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，读者为热爱新技术的新锐开发者。

    掘金翻译计划目前翻译完成 362 篇文章，共有 240 余名译者贡献翻译。

  • 用 webpack 实现持久化缓存

    缓存（cache）一直是前端性能优化的重头戏，利用好静态资源的缓存机制，可以使我们的 web 应用更加快速和稳定。仅仅简单的资源缓存是不够的，我们还要为不断更新的资源做持久化缓存（Long term cache）

    前后端分离，前端应用化、工程化的需求在迅速增加：模块化开发、模块依赖解析、代码压缩、图片压缩、请求数最小化、雪碧图、字体压缩、CSS 预处理、ES2015/6/7 编译、模板引擎等，都是在构建过程中要实现的功能。

    持久化缓存，它涉及了模块化，模块依赖，静态资源优化，模块打包，文件摘要处理等问题，如今（2016+）能把这些问题解决并做的最好的社区驱动工具有且只有 webpack。

    • [hash] 计算所有 chunks 的 hash: 每次编译生成一个唯一 hash，适合 chunk 拆分不多的小项目，但所有资源全打上同一个 hash，无法完成持久化缓存的需求
    • [chunkhash] 为每个 chunk 计算 hash
      • JS 资源的 [chunkhash] 由 webpack 计算
      • Images/Fonts 的 [hash] 由 webpack/file-loader 计算
      • 提取的 CSS 的 [contenthash] 由 webpack/extract-text-webpack-plugin 计算

    Chunk 的生成还涉及到依赖解析和模块 ID 分配，这是无法稳定实质上没有变化的 chunk 文件的 chunkhash 变动问题的本源

    合理划分公共模块

    类型	公用率	使用频率	更新频率	例
    库和工具	高	高	低	vue/react/redux/whatwg-fetch 等
    定制 UI 库和工具	高	高	中	UI 组件/私有工具/语法 Polyfill/页面初始化脚本等
    低频库/工具/代码	低	低	低	富文本编辑器/图表库/微信 JSSDK/省市 JSON 等
    业务模块	低	高	高	包含业务逻辑的模块/View

    根据公用/使用/更新率来做公共模块的划分是比较科学：

    • 库和工具 - libs
    • 定制 UI 库和工具 - vendor
    • 业务模块 - entries
    • 低频库/工具/代码 - 分割为 chunk

  • No API is the best API - 抛弃 should/expect/chai 吧

    Power Assert in JavaScript, Provides descriptive assertion messages through standard assert interface.

    强大的错误信息反馈

    const assert = require('power-assert');
    
    describe('test/showcase.test.js', () => {
      const arr = [ 1, 2, 3 ];
    
      it('power-assert', () => {
        assert(arr[1] === 10);
      });
    });
    
    // output:
    4) test/showcase.test.js power-assert:
    
          AssertionError:   # test/showcase.test.js:6
    
      assert(arr[1] === 10)
             |  |   |
             |  2   false
             [1,2,3]
    
      [number] 10
      => 10
      [number] arr[1]
      => 2

  • 如何评价阿里开源的企业级 Node.js 框架 egg？

    egg 为企业级框架和应用而生，我们希望由 egg 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本

    • 深度框架定制
    • 高度可扩展的插件机制
    • 内置多进程管理
    • 基于 koa 开发，性能优异

    阿里是业界最早的一批使用 Node.js 来做线上大流量应用的公司，早在 2011 年的就已经开始在生产环境中使用。

    • 众所周知，在阿里的技术栈中， Java 是最最核心的，那 Node.js 扮演怎么样的一个角色呢？
    • 基础设施大部分采用 Java 实现，变化较少，有事务要求的 Business Services 通常使用 Java。
    • 而 Node.js 则替代过去 PHP/Java Web 的场景，用在需要快速迭代，需求变化非常快的用户侧。
    • 很多内部的工程化支撑系统也逐渐基于 Node.js 了。

    据不完全统计，目前阿里 Node.js 的开发者几百号人，线上的应用也非常之多，仅次于 Java 应用，光对外服务的进程数就超过 1w+。

• 产品

  • 从AR扫月亮、AR藏红包到AR集五福，支付宝到底在布什么局？

    支付宝AR集五福的战略意图是什么？

    流量分配就像一个公司的财务报表，能反映出公司在该阶段的战略重点。让我们循着流量这条线索分析一下，看看支付宝意欲何为？支付宝以2亿红包做噱头，以春节集福送福为导火索，吃瓜群众蜂拥而上，贡献了大量的流量。通过种树和浇水，集福的大部分流量被引到了蚂蚁森林（有一部分被引到了线下大型购物商场），而蚂蚁森林的流量又进一步转化成了移动支付（通过支付宝支付和捐步获得森林能量），移动支付中使用频率最高的当属线下支付。

    缕清集福活动的流量走向，再联系支付宝2016年中秋节的AR扫月亮和前段时间的AR扫红包活动，我们有充分的理由推断出这样的结论：支付宝在用一系列的游戏化运营策略教育AR市场，培育用户，与腾讯争夺线下支付入口。

    互联网的本质是把万物信息化并实现人与物的双向链接.

    目前，腾讯实现了人与人的链接，阿里做了人与商品的链接，百度完成了人与信息的链接，但实物与人的链接还有很多空白领域.

    比如你看到商场里有一个很独特的杯子，如何快速地把这个杯子电子化，以可阅读的多媒体信息呈现，为自己提供决策依据，而不用像个移动的“十万个为什么”一样追着卖场小妹问个不停呢？各互联网巨头正努力实现这个目标，让自己成为链接一切的那个人。

    张小龙曾预言二维码才是未来链接一切的入口，并推出小程序帮他实现这一理想，而阿里则把链接一切的入口赌在了AR上，通过AR实现人与周围世界的交互，把实物电子化、信息化、互联网化。

    支付宝到底在布什么局？总结起来就一句话：

    支付宝通过AR扫月亮、找红包、集五福验证技术、培育市场，待技术和市场成熟后切入AR优惠券，由AR优惠券占领线下支付高地。到了互联网下半场，重心将重新回到线下，支付宝作为全民支付工具，自然不会放过线下支付这块大蛋糕，至于是不是从AR优惠券这个角度切入，让我们拭目以待。

  • 最全数据：从微信红包看中国人的鸡年除夕

    • 2017除夕 1月27日 0:00-24:00
      • 共收发微信红包142亿个, 比猴年增长75.7%
      • 24:00祝福达到峰值收发达到76万个/秒
      • 一位深圳小哥全天发出 2125 个红包
      • 一位滨州小哥全天收到 10069 个红包
    • 有微信红包, 才叫过年

  • 未来世界的幸存者 @Monine

    机器人、自动化、人工智能正在变得比人类更强大。在可预见的将来，技术最终将淘汰人类。

    技术变革导致了人类社会的重构。绝大部分的人没机会参与这个进程，只能被动接受其他人安排自己的命运。在这个剧烈变化的年代，怎么才能成为一个可以把握自己命运的幸存者？