发表于 |

我讨厌老鼠，因为在我的印象中，鼠年总会有不好的事情发生。
1996年，农历鼠年。一场大水冲掉了我的家园。我们一家老小流离失所。
2008年，农历鼠年。南方冰灾，阻断了亿万国人回家的路。汶川地震，震碎了无数人的家庭。
2020年，农历鼠年。一种极其微小的病毒。让十四亿中国人过了一个最难忘的春节。让本来是欢乐祥和的节日变得死气沉沉。让中国快速发展的经济停了下来。

也许，许多年后我们还会记得2020年，记得那个春节。
那年春节，我们足不出户，没有走亲访友。
那年春节，我们忧心忡忡，一面为国，一面为家。
那年春节，武汉封城。

其实对于近几百年来由病毒引发的疫情来说，这次疫情并不严重。天花病毒，鼠疫，流感病毒，每个都夺取了上千万的生命，每个都让地球生灵涂炭。人类的进化史，其实就是我们的免疫系统与病毒的抗争史。这些病毒使我们的免疫系统更加全面，使我们的科技更加发达。

我想这次疫情其实还有好的一面。
它让快速发展的中国，停下来开始思考自己走过的路。我们在大力发展经济的同时，是否丢掉了什么东西。曾经的青山绿水变成了秃山污水，曾经的民风淳朴变成了金钱势利。那些无数人童年的记忆，我们又要花多少钱才能换回来。
它让中国人开始思考，那些值得全民追捧的到底是网红戏子，还是医生教师科学家。那些以牺牲健康为代价换来的短期利益，到底值不值得。
它给了我们一个超长的假期，让我们有足够的时间陪陪自己父母和亲人。以前太忙碌，总是没时间。这次有很多时间来陪他们一起吃个团圆饭，一起喝一杯小酒，一起回忆年少时的岁月，一起说说工作和学习。

经济暂时停了，可以继续发展。
工作没了，可以去找。
钱没了，可以去挣。
但是有些东西一旦失去了，就再也回不来。

昨天是我老妈的生日，我在晚上打电话给她时。脑子突然一惊，我妈已经58岁，只差两年就迈入花甲！去年的一次手术让她的身体变得没以前那么健康。以前她对我既严厉又慈爱，现在只有慈爱了。这次疫情期间，我上班后她每天都打电话叮嘱我一定要注意身体。我以前总是说过等我有时间了一定带着她和老爸一起去旅行，一起去看看祖国的大好河山。她总是说没必要浪费这钱，你们身体健康才是最好的。这次疫情过后，我一定会兑现承诺的。

好吧，瞎写就写到这儿。

待春暖花开，山河无恙，我们取下口罩一起狂欢可好。武汉加油，中国加油。

发表于 |

简介

图片懒加载是指在web应用中，让图片这种耗流量的资源只在网页可视区域显示出来，只有在用户滑动到相应的其他区域时，再加载其他图片。比如淘宝首页，页面内容非常的多，图片可能有成百上千张，但是大部分用户只会浏览到第一屏显示的图片，而页面其他图片就没有必要显示出来了。因为这种亿万级别的网站，省流量就是省钱。

阅读全文 »

发表于 |

最近项目有个需求，需要将后台返回的base64格式的图片文件导出到本地（即点击下载）

开始以为很简单，用a标签的download属性就行了，后来还是出现了很多兼容性问题，不得不重新考虑

但是有一次在看到echarts的demo的时候，它的右上角有个导出按钮（这个功能的兼容性很好），于是决定把其代码扣出来

1543026080(1)

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function saveAsImg(fileName, url) {
  // from echarts
  // https://github.com/apache/incubator-echarts/blob/master/src/component/toolbox/feature/SaveAsImage.js
  const a = document.createElement('a')
  a.download = fileName
  a.href = url
  const ua = navigator.userAgent
  // IE 11 Trident/7.0; rv:11.0
  const isIE = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/.+?rv:(([\d.]+))/)
  const isEdge = ua.match(/Edge\/([\d.]+)/)
  // firefox || chrome
  if (typeof MouseEvent === 'function' && !isIE && !isEdge) {
    var evt = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: false
    })
    a.dispatchEvent(evt)
  } else {
    if (window.navigator.msSaveOrOpenBlob) {
      var bstr = atob(url.split(',')[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      var blob = new Blob([u8arr])
      window.navigator.msSaveOrOpenBlob(blob, fileName)
    } else {
      var html = '' +
          '<body style="margin:0;">' +
          '<img src="' + url + '" style="max-width:100%;" title="' + fileName + '" />' +
          '</body>'
      var tab = window.open()
      tab.document.write(html)
    }
  }
}

以上，如有错误，欢迎指正

参考资料

发表于 |

最近在网上看到一道面试题，如何将一个数组更高效的打乱它的顺序，无聊之时拿来测试了一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 生成原数组
const arr1 = new Array(100000).fill(null).map((value, index) => index + 1)
const arr2 = new Array(100000).fill(null).map((value, index) => index + 1)
// 方法1：
const fn1 = function(arr) {
  return arr.sort(_ => 0.5 - Math.random())
}
// 方法2：
const fn2 = function(arr) {
  for (let i = arr.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1))
    var itemAtIndex = arr[randomIndex]
    arr[randomIndex] = arr[i]
    arr[i] = itemAtIndex
  }
  return arr
}
// 测试：
console.time('fn1')
var result1 = fn1(arr1)
console.timeEnd('fn1')
console.time('fn2')
var result2 = fn2(arr2)
console.timeEnd('fn2')
console.log(result1)
console.log(result2)
阅读全文 »

发表于 |

全局安装 eslint

npm install eslint -g

在项目根目录运行如下指令

eslint --init

依次选择[use a popular style guide]–[standard]–[json]

这时项目根目录会出现一个.eslint.json的文件夹，编辑里面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "extends": "standard",
  "plugins": ["html"],
  "rules": {
    "space-before-function-paren": [1, "never"],
    "no-unneeded-ternary": 0,
    "semi": [2, "never"],
    "eol-last": 0,
    "quotes": [2, "single"],
    "no-underscore-dangle": [0],
    "linebreak-style": 0,
    "consistent-return": 1,
    "global-require": 0,
    "comma-dangle": 0
  }
}

其中里面的内容可以自己配置，详见eslint 中文和eslint 英文
安装几个 package

1
npm install babel-loader eslint-loader eslint-plugin-html --save-dev

其中eslint-plugin-html是支持 eslint 校验.vue文件的

在webpack.config.js文件中将 vue 的 loader 修改为如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  enforce: 'pre',
  test: /\.vue$/,
  loader: 'eslint-loader',
  exclude: /node_modules/
},
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader' // ?indentedSyntax
    }
  }
}

Tips: eslint 校验比较严格，对代码不规范的人来说可能是噩梦，但是我们还是>要忍受一下，将我们那些代码不规范的毛病去掉

发表于 |

1.概序

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

  • 该教程默许你有基本的计算机基础知识
  • 该教程默许你会基本的markdowm语法，如果还不熟悉，不要着急，赶快去看一下吧

该教程一些词汇如下
站点配置文件：你博客目录下面的_config.yml文件
主题配置文件：你博客目录下面的主题文件夹中的_config.yml文件，例如我的就是/blog/themes/next/_config.yml

2.必要的准备条件

  • 你的pc上面必须安装了node.js和git
  • 一个github账号
  • 一个独立的个人域名（如果自己需要解析到自己的域名上面的话）
  • 你需要有一个合适的文本编辑器，推荐使用sublime text，轻量级，界面美观，插件丰富
    阅读全文 »

发表于 |

概序

菲波那契数列，大致可以描叙为a(n) = a(n-1) + a(n-2) (a > 2)。类似于这样[1, 1, 2, 3, 5, 8, 13 ...]，下面我们用js来实现一下：

1.递归

1
2
3
4
5
6
7
8
9
10
var a = function(n) {
   if (n === 1 || n === 2) {
       return 1
   } else {
       return a(n - 1) + a(n - 2)
   }
}
console.time('a（44）')
console.log(a(44))
console.timeEnd('a（44）')

以上我们可以比较清晰的看出代码的思路，但是这种方法有一个致命的缺点：效率太差！

604467-20170114150610697-767833320

执行到第44个的时候，已经不能接受了。需要5s多。那我们再来改进一下:

阅读全文 »

发表于 |

这是我第一篇博客

1
2
3
console.log('Hello world')
console.log('我很帅')
console.log('深圳梁朝伟')