yangjia23/recode-work-trouble

Hi there 👋, I'm Jia Yang, an Front-end developer live in China.

Skills: Vue JS / JS / HTML / CSS

• 🔭 I’m currently working on getui
• 📫 How to reach me: gmail, juejin

recode-work-trouble's Issues

[Vue] vue 中 data 如何取消监听

使用 Object.freeze()
https://segmentfault.com/a/1190000006191558

解决Chrome 浏览器 Failed to load response data

window.onunload = function() { debugger; }
或

参考链接 https://stackoverflow.com/questions/38924798/chrome-dev-tools-fails-to-show-response-even-the-content-returned-has-header-con

Remove SwipeableFlatList from RN 0.6

Remove SwipeableFlatList from RN 0.6

[Vue 源码] Vue 如何进行依赖收集？

class Vue {
  constructor (options) {
    this._data = options._data
    observer(this._data)
    new Watcher()
    // 模拟调用 render, 为了触发 test 属性的 get 方法
    console.log('render', this._data.test)
  }
}

/** 订阅者 */
class Dep {
  constructor () {
    this.subs = []
  }

  addSub (sub) {
    this.subs.push(sub)
  }

  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

class Watcher {
  constructor () {
    Dep.target = this
  }

  // 更新视图的方法
  update () {

  }
}

Dep.target = null

function observer(obj) {
  if (!obj || typeof obj !== 'object') return

  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

function defineReactive(target, key, value) {
  const dep = new Dep()
  Object.defineProperties(target, key, {
    enumerable: true,       /* 属性可枚举 */
    configurable: true,     /* 属性可被修改或删除 */
    get: function reactiveGetter () {
      dep.addSub(Dep.target)
      return value;
    },
    set: function reactiveSetter (newValue) {
      if (newValue === value) return
      dep.notify()
    }
  })
}

一个对象属性对应一个dep，一个dep对应多个watcher(一个对象属性可能再多个标签使用，那么就会有对应多个watcher，这些watcher都会放入到这个对象属性唯一对应的dep中)，这是Vue1.0的实现，但数据过大时，就会有很多个watcher，就会出现性能问题；所以在Vue2.0中引入的VDOM，给每个vue组件绑定一个watcher，这个组件上的数据的dep中都包含有该watcher，当该组件数据发生变化时，就会通知watcher触发update方法，生成VDOM，和旧的VDOM进行比较，更新改变的部分，极大的减少了watcher的数量，优化了性能；（所以，在Vue2.0中是一个组件对应一个watcher）

[微前端] 前端微服务参考资料

微前端的那些事儿
用微前端的方式搭建类单页应用
微前端 - 将微服务理念延伸到前端开发中
微前端- 将微服务理念扩展到前端开发（实践篇）
如何实现前端微服务化？
基于 Vue 技术栈的微前端方案实践

微服务参考项目
https://github.com/umijs/qiankun
https://github.com/CanopyTax/single-spa

mac 装机指南

每次拿到新电脑，都有重新安装软件，配置环境等，避免每次都查找，在此记录下，后期不定时更新, 总共分成以下 4 个模块

• MAC 使用技巧
• 开发必备
• 前端必备
• 使用软件
• 写作工具

Mac 使用技巧
一些使用 mac 过程中一些有用的设置

• 使用VSCODE打开文件夹： Open With VSCode----在Mac上右键菜单通过Visual Studio Code打开文件夹操作的设置
• 在终端使用 code . 打开当前文件夹：vs code 在终端下使用 code ./ 打开当前项目

开发必备

选取了一些MAC OS下开发人员必备的环境配置，可根据自己的习惯选择相应的替代软件，但是希望可以按照以下推荐的安装顺序进行安装

1. HomeBrew

   • 官网地址：中文版
   • 介绍：mac 平台的包管理工具
   • 安装方式：

     bash /bin/bash -c "$(curl -fsSL 
     https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
     

   • 第三方教程
     方便易懂的在MAC上面安装brew教程
     Mac下brew更换国内镜像源最新方法

2. git 环境

3. iterm2

前端必备
完成对以上软件以及环境的配置完成后，进入前端开发所需要的软件安装环节

1. nvm
2. nrm

npm 默认模块托管在 npm.org, 这是官方的registry（源），registry 指定从哪下载模块。其它组件和个人也可以建立自己的registry， 这些第三方的 registry 大概会 10 分钟左右和 npm官方registry（源）进行同步，常见的第三方源有 cnpm, taobao, rednpm 等。

可通过以下命令，设置 npm 的源

npm config set registry <registry url>

比如切换成淘宝源：

npm config set registry https://registry.npm.taobao.org

如果经常需求切换，每次都手动设置，容易崩溃的。nrm 就能解决这个问题

• 介绍：可以帮助你简单、快速的在不同的npm registry（源）之间进行切换，它默认内置了很多常用的源，包括npm、cnpm、taobao、 nj、rednpm、npmMirror，当然你可以自己通过nrm add维护自己的源
• 安装

  npm install --global nrm
  

• 常见命令
  • 查看源 nrm ls
  • 测速 nrm test
  • 切换缘 nrm use xxx

3. vs code
4. 程序员必备字体

写作工具

• 博客美化 博客美化工具
• 公众号写作环境配置 一套可以提升写作效率的写作环境配置

[JS]为什么 0.1 + 0.2 !== 0.3 ?

看似简单的数学问题，在 JS 中却得到出乎意料的结果，深入研究后，需记录一番

进制转化

日常生活中的数字都是十进制标识，但是到了计算机中，都会转换成二进制，先看下十进制的整数和小数如何转换成二进制

45 = 32 +  8 + 4 + 1 = 2^5 + 2^3 + 2^2 + 2^0   

所以十进制 45 转换成二进制为 101101

0.8125 * 2 = 1.625
0.625 * 2 = 1.25
0.25 * 2 = 0.5
0.5 * 2 = 1

所以十进制小数 0.8125 转换成二进制为 1101

数据存储

除了知道十进制会被转换成二进制外，还需要知道二进制是如何存储的。

双精度浮点数

在 JavaScript 中所有数值都以 IEEE-754 标准的 64 bit 双精度浮点数进行存储的（几乎所有现代编程语言所采用），这是一种二进制表示法，可以精确的表示分数，比如 1/2，1/8 和 1/1024，但我们常用的都是十进制分数 1/10，1/100等，二进制浮点数表示法并不能精确表示类似 0.1 这种简单数字

JS 中数字具有足够的精度，并可以及其近似于 0.1，但数字不能精确表示，就会带来下面的问题

0.1 + 0.2 = 0.30000000000000004

在知道原因之后，我们继续看下双精度浮点数的具体结构

双精度浮点数由三个部分组成

• sign(符号)，占 1 bit, 表示正负
• exponent(指数): 占 11 bit，表示范围
• significand / mantissa(有效位数/尾数): 占 52 bit，表示精度，超出的部分自动进一舍零

在详情介绍每个部分之前，先看下我们比较熟悉的数字写法

a = 1.2345e2
   = 1.2345 * 10^2
   = 123.45

这种写法常被称为指数表示法，1.2345e2 也可分成两个部分，1.2345 称为有效位数(significand)，2 被称为指数(exponent)

JS中何时使用指数表示法显示数字，具有以下规则

• 小数点前面有超过 21 位数字，使用指数表示法

>1234567890123456789012
1.2345678901234568e+21

>123456789012345678901
123456789012345680000

• 数字以 0 开头，并且小数点后面有超过 5 个 0 ，使用指示表示法

>0.0000003 
3e-7

>0.000003 
0.000003

下面，具体介绍下 双精度浮点数每个部分

十进制 4.5 转换成二进制就是 100.1，二进制科学计数法表示是 1.001*2^2

sign(符号)
占1 bit, 用来表示正负， 0 正 1 负

s = -1^0  // 正
   = -1^1  // 负

JS 中所有数字都存在符号位，这也就解释了为什么JS 中存在 +0 和 -0

exponent(指数)
占 11 位，可表示范围是 0 ～ 2047，然而我们都知道，指数除了是正数，也可设置成负数，所以，减去中间值 1023，0 ～ 1022 表示负数，1024 ～ 2047 表示正数。所以 4.5 的指数 E = 1025

significand / mantissa(有效位数/尾数)

二进制科学计数法表示格式为1.xxx*2^N，因为整数部分始终为 1，所以在存储时，省略整数部分 1，只保留小数部分
所以 4.5 的尾数 M = 001

至此，实际数字就可以用以下公式来计算

浮点误差

前面说过二进制浮点数表示法并不能精确表示类似 0.1，我们可以看下 0.1 转成成二进制是 0.0001100110011001100(1100无限循环)，使用指数表示法为 1.100110011001100 x 2^-4 , 所以
指数E = -4 + 1023 = 1019，尾数M = 100110011001100...，64 位浮点数存储后结果如下

(在线转换地址： http://www.binaryconvert.com/convert_double.html )

将 64 位浮点数再转换成十进制为 0.100000000000000005551115123126，所以 0.1 在JS 中最精确的表示为 1.00000000000000005551115123126。

为什么0.1 的精确表示比 0.1 大而不是小？
0.1 使用64 位浮点数存储后，尾数 M 是 100110011001100...(1100 无限循环)，所以肯定会超出 52 位的限制，同时规定尾数部分超出的部分自动进一舍零，所以尾数M 在最后从 110011001100 (后3位超出限制)进一变成 110011010，
因此，最终的64 位浮点数转换成十进制比 0.1 大

最大安全整数为啥是 2^53 - 1?

因为 64 位浮点数存储中尾数 M 一共有 52 位，在读取时，会加上隐藏的整数部分 1，所以 52 位尾数实际上可以存储 53 位

安全整数，就是有双精度浮点数和整数一一对应。那最大的安全整数必然是M全部是1的浮点数，
尾数 M 全为 1，即 1.1111(小数部分一共 52 位)，该浮点数转换成二进制则是 11111 (共 53 位)，再将这个二进制转换成十进制就是 2^53 + 2^52 + .....+ 2^0, 等比数列求和，技术结果就是 2^53 - 1

toPrecision()和toFixed()

请注意，这俩个函数的返回值为 字符串，使用它们的目的是为了展示，千万不要在计算过程中使用

参考链接

• Everything you never wanted to know about JavaScript numbers -- JSConf EU 2013
• http://bartaz.github.io/ieee754-visualization/
• JavaScript 浮点数陷阱及解法

css 中使用 flex 的小技巧

1.最后一个子元素靠右排列

margin-left 巧用

当子元素的就 2 个时，可直接设置父级

<div class="box">
   <div class="item-1">111</div>
   <div class="item-2">222</div>
</div>

.box{
	display: flex;
	justify-content: space-between;
	width: 200px;
	border: 1px solid red;
}

当子元素数量超过 2 个时，要求最后一个子元素靠右排列，可设置

<div class="box">
   <div class="item-1">111</div>
   <div class="item-2">222</div>
       <div class="item-3">333</div>
</div>

.box {
   display: flex;
   width: 200px;
   border: 1px solid red;
}

.item-3{
    margin-left: auto;
}

this.$options.data() 的使用技巧

重置vue单文件中的 data 数据

Object.assign(this.$data, this.$options.data()); 

响应式图片

如何在不同的视口宽度下响应式显示图片

• srcset 属性
  <img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

• HTML Picture 属性

<picture>
     <source secset="large.jpg" media="(min-width: 800px)" />
     <source secset="medium.jpg" media="(min-width: 500px)" />
     <img src="small.jpg" />
</picture>

Picture 属性 demo

Echart Bar Stack 显示 NaN

• 业务需求：
  在堆叠柱状图最上面显示出总数量

• 当前问题：当 X 轴仅存在一个日期时， 改堆叠柱状图上面会显示个 NaN

• 原因：
  因为要在最上面显示总数量，实现方法是在 series 数组后面插入

{
    name: 'sum',
    stack: 'sum',  // 和 series 数组中子项保持一致
    type: 'bar',
    label: {
       show: true,
       position: 'top',
       formatter:  () => {} // 计算中总和，
   },
   data: [] ,// 一个子项值为 0 的数组，数组长度由 X 轴柱状图的根数来决定
}

产生 NaN 的原因是因为在一开始 data 之间写死了 [0,0,0,0,0,0,0]

[CSS] CSS设置 div 只有四个角有边框

效果如下

之前网上很多都是通过 4个 div 去实现四个边角，此处使用到的时 background
具体代码，查看demo

Attribute 与 setAttribute

Attr 指的就是那些存在于标签上的属性,例如
<body id="page"></body>
由于 id 是标准属性，所以我们可以通过 document.body.id 来访问它的值。

<body custom="val"></body>
而对于自定义的非标准属性 custom，无法通过 document.body.custom 获取值，这也是为什么 setAttribute 方法存在的原因

但注意，不是所以的属性都可以使用 setAttribute 来设置，因为在 setAttribute 函数为元素设置属性时，无论传递的值是什么类型，它都会将该值转为字符串再设置到元素上，so

checkboxEl.setAttribute('checked', false)
// 等价于
checkboxEl.setAttribute('checked', 'false')

具体有哪些属性不应该通过 setAttribute 来设置，而是通过
el.key = value 这样来设置，
具体属性总结如下
value、checked、 selected、 muted

优秀资源汇总

• 构建部署
  • Docker
    • Docker - from the beginning