发表于

做性能分析的时候使用了 window.performance Api 来获取加载数据，后面去修改的时候又不确定各个字段表示的时间点，整理记录下各个字段和时间点关系

performance.timing

接口包含了当前页面的加载时间，时间值都为触发时机的时间戳或者没有就为0

和 PerformanceResourceTiming 重复的时间数据在下面统一整理，这里先介绍独有的一些参数

阅读全文 »

发表于

TODO LIST

富文本粘贴，主要是想说说如何粘贴文件实现上传，另外就是通过 word 复制进去的一坨无用代码的过滤 。

因为原本看了 wangeditor 中的一些实现，想着自己去做一个简单的富文本玩一玩，不过现在还没开始….

从零实现一个可视化编辑器-组件设计
从零实现一个可视化编辑器-富文本
从零实现一个可视化编辑器-富文本粘贴

发表于

可视化编辑器比较多的使用在 电商营销活动编辑、H5可视化编辑、电商店铺装修 等场景中。

最近做店铺装修，也实现了一个简单的可视化编辑，这里记录下整个编辑器页面的组件设计。

活动编辑器预览地址：https://form.lljj.me/vue-editor.html#/editor
其中数据配置表单根据 JsonSchema 生成，可参见：https://github.com/lljj-x/vue-json-schema-form

页面结构

组件结构

可用组件配置

可拖动编辑器

form配置

视图组件

组件数据流

发表于

在前面这个文章的时候说 按位运算，是基于32位二进制补码进行运算。这里在继续补充下js浮点运算丢失精度的问题。

丢失精度

丢失精度场景

还是先从下面这个经典的例子开始说起，如下这个例子比较常见，通常为了规避这类问题在一些电商类网站处理价格的场景都需要做特殊处理。

1
2
3
// 0.30000000000000004
0.1 + 0.2 !== 0.3
console.log(0.1 + 0.2);

如上浮点常见解决方案都是通过转为整数，然后基于整数计算出结果，再转回小数，简单例子如下：

1
2
3
4
5
// 0.1 + 0.2
// 但这里也需要保证转换后的数小于 2^53，大数依然会出问题。
const base = 10;
const res = (0.1 * base + 0.2 * base ) / base;
console.log(`0.1 + 0.2 = ${res}` );

为什么丢失精度？ 在分析这个问题之前，要先了解下 IEEE 754 （IEEE二进制浮点数算术标准）标准，JavaScript 遵循 IEEE 754 规范，Number 采用双精度存储（double precision）。

浮点数转二进制

这里要先看下计算机是如何对浮点数进行二进制和十进制转换的。

  • 整数部分直接十进制转为二进制即可
  • 小数部分乘以 2，取得到的整数部分记下来，然后小数部分继续乘以 2，直到小数部分为0，或者达到储存位上限。

举个例子，比如转换十进制数 12.3

阅读全文 »

发表于

前面看到MDN对数组 find polyfill 方法中使用了 o.length >>> 0 三个 >>> 的运算，看都看了那就顺便梳理下 javaScript 中的位运算符和实际的一些运用场景。

概述

  • 所有的按位操作符的操作数都会被转成 补码（two’s complement）形式的有符号32位整数。
  • 超过32位的数字会被丢弃，不足的通过 0 补齐。

这里先简单介绍下：原码、反码、补码 的概念。

原码

原码就是符号位加上真值的绝对值, 即用第一位表示符号（0为正，1为负）, 其余位表示值。

例如：

  • 314 为：00000000000000000000000100111010
  • -314 为 10000000000000000000000100111010
阅读全文 »

发表于

背景来源于很久前组内的一次讨论，如何可以更高效的获取N个质数。
使用场景是很久前在对选择商品多属性SKU的情况下，选中某些属性的情况下，判断其它属性的选中状态，通过质数的方式来做可选操作判断。
关于质数方案原文应该是出在淘宝某团队，这里只讨论关于获取质数的一些方法

纯粹循环

这种方法是最容易理解和想到的方法，依次从2到当前数字，如果任意一个能被整除那就不是质数
首先来提供一个测试方法，通过传入一个方法验证10万内的所有质数，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* GLOBAL js */
window.getPrimeNumArr = (fn, n = 10 * 10000) => {
    console.time(fn.fnName);
    const primeNumList = [2];
    for (let i = 3; i < n; i++) {
        if (fn(i, primeNumList)) {
            primeNumList.push(i)
        }
    }
    console.timeEnd(fn.fnName);
    console.log(primeNumList);
    console.log(`${n}共有：${primeNumList.length}个`);
    console.log('--------------------');
    return primeNumList;
}

阅读全文 »

发表于

内容大部分来自 《javascript 设计模式与开发实践》一书，适当的结合自己工作实践，做出整理和笔记
系列： javascript 设计模式

迭代器模式

迭代器模式：提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部方法，大部分的编程语言都原生支持，Js的Array forEach

内部迭代器

使用方便，不用关注内部实现，例如js forEach

1
2
3
4
5
6
7
const each = function each(ary, callback) {
    for (let i = 0, l = ary.length; i < l; i++) {
        if (callback.call(ary[i], i, ary[i]) === false) {
            break;
        }
    }
};
阅读全文 »

发表于

内容大部分来自 《javascript 设计模式与开发实践》一书，适当的结合自己工作实践，做出整理和笔记
系列： javascript 设计模式

代理模式

  • 代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。
  • 代理和本体的一致性要求，代理和本体需要对外提供一致的方法，代理请求接手的过程对用户来说是透明的，用户可以安心的访问代理，在任何地方都可以使用本体来代替代理。
  • 代理模式体现在对本体对象的额外附带或者加强的能力上，让本体对象只处理原本的任务，符合单一职责原则。

常见代理模式

  1. 虚拟代理：把开销大的操作，放到真真需要的时候才会去执行
  2. 保护代理：控制不同权限的对象对目标对象的访问，Javascript并不容易实现保护代理，本章内容也主要讨论的是虚拟代理。例如：
    判断需要给服务器发送消息，可以判断通过保护代理知道对方在线的时候再发消息给对方，这样在请求代理的时候可以直接返回对方不在线而拒绝掉。

虚拟代理 - 图片懒加载

在日常开发中需要对一个图片设置src，由于图片加载需要等待时间所以会出现图片空白的场景，下面来用代理模式来实现：

阅读全文 »

发表于

背景

默认的浏览器请求都会附带referer信息为上一页面的url，可以通过 document.referrer 来查看，而 _blank 打开一个新页面时 window.opener 能获取到来源页面的window对象。

比如在密码找回页面，点击链接可能会跳转到对应的三方邮件服务网站，这种场景就不希望携带当前的refer信息，以避免暴露敏感数据。

并且 window 对象暴露这个危险性也不用说了。

下面来聊聊我们如何在一些特定的场景避免页面内的请求附带refer信息。

另外：

  • Safari ITP协议 已经不会发送referer的详细Path了 。
  • Http 请求头里的 referer 是referrer的错误拼写
阅读全文 »