发表于 |

希尔排序的间隔选择

希尔排序在排序数量较少的情况下，默认采用【5,3,1】这三个间隔，就可以达到很好的效果。

如果排序数值量在1000以上，建议使用动态生成的 间隔序列效果比较好，实际测试1万+随机数据，使用【5，3，1】的间隔耗时1100毫秒，
使用动态生成的间隔序列，时间在15毫秒以内。效果明显

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
function Sort(num) {
  this.totalNum = num
  this.gaps = [5,3,1]
  this.dataStore = []
  this.genData = function setData() {
    for (let i = 0; i < this.totalNum; ++i) {
      this.dataStore[i] = Math.floor(Math.random() * (this.totalNum + 1))
    }
  }

  this.genGaps = function genGaps() {
    let h = 1
    let gaps = []
    while (h < this.totalNum / 3) {
      gaps.unshift(h)
      h = 3 * h + 1
    }
    this.totalNum > 100 && (this.gaps = gaps)
  }

  this.bubbleSort = function bubbleSort() {
    let temp
    let data = [...this.dataStore]
    for (let outer = this.totalNum; outer >= 2; --outer) {
      for (let inner = 0; inner <= outer - 1; ++inner) {
        if (data[inner] > data[inner + 1]) {
          temp = data[inner]
          data[inner] = data[inner + 1]
          data[inner + 1] = temp
        }
      }
    }
  }

  this.shellSort = function shellsort() {
    let data = [...this.dataStore]
    for (let g = 0; g < this.gaps.length; ++g) {
      for (let i = this.gaps[g], len = data.length; i < len; ++i) {
        let temp = data[i]
        let j = i
        for (; j >= this.gaps[g] && data[j-this.gaps[g]] > temp; j -= this.gaps[g]) {
           data[j] = data[j - this.gaps[g]]
        }
        data[j] = temp
      }
    } 
  }
  this.genData()
  this.genGaps()

  // let start = Date.now()
  // this.bubbleSort()
  // let end = Date.now()
  // console.log('bubbleSort耗时： ' + (end - start) + '毫秒')

  start = Date.now()
  this.shellSort()
  end = Date.now()
  console.log('shellSort耗时： ' + (end - start) + '毫秒')
}

发表于 |

vue路由返回之后不触发生命周期的解决办法

1
2
3
4
5
6
7
8
<router-view v-if="allowRender" :key="key"></router-view>

computed: {
  key () {
    const name = this.$route.name
    return name ? name + new Date() : this.$route + new Date()
  }
}

git项目npm install之后运行总是报稀奇古怪的错

一般都是某个npm包版本引起的，比如vue-loader，所以尽量不用再package.json中用 ‘latest’ 来限制版本号，最好精确到某一个大版本下面。

gogs代码控制，设置了分支白名单导致的push失败

gogs的代码推送控制，防止越权提交，仅开放某几个账号管理权限。

webpack.DefinePlugin的理解

插件里定义的参数，在build好之后的文件中，是以全局变量的形式存在。

例如 process.env.NODE_ENV

1
2
3
4
5
6
7
8
9
10
11
package.json

"build:uat": "cross-env BUILD_ENV=uat webpack --config build/webpack.prod.js"


webpack.prod.js

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production'),
  'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV)
})

webpack配置文件里的process.env.NODE_ENV是从控制台读取的NODE_ENV变量
但是js里面的process.env.NODE_ENV读取的是webpack.DefinePlugin定义的变量值

发表于 |

vue移动端单页应用，一个滚动加载的列表，样式错乱的bug

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
<template>
  <div class="global-search-page">
    <search showSearch
      defaultFocus
      placeholder="搜索"></search>

    ...
    ...
    ...

    <my-load-more :allLoaded="allLoaded"
      :hideTip="showFastInfo"
      :resultInfo="resultInfo"
      :isLoading="isLoading"
      <CardList v-for="(item,index) in resultInfo"
        :type="item.type"
        :key="setKey(item)"
        :source="item"></CardList>
    </my-load-more>
  </div>
</template>

<style>
  .global-search-page {
    background: #fff;
    display: flex;
    flex-direction: coloum;
  }
  ...
</style>

布局是search组件占一行顶部，my-load-more组件根据内容CardList高度撑开。

阅读全文 »

发表于 |

手动设置Content-Type: multipart/form-data报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
changeUserAvatar(authParam, file) {
    let formData = new FormData();
    //file is actually new FileReader.readAsDataURL(myId.files[0]);
    formData.append('profile_image', file);
    
    fetch(BASE_URL + 'profile-image', {
      method: 'POST',
      headers: {
  'Content-Type': 'multipart/form-data',
  'Authorization': authParam
      },
      body: formData
    }).then((response) => {
      return response.json();
    }).then((response) => {
      debugger;
    }).catch((error) => {
      console.error(error);
    });
  }

错误信息

Error: profile_image can not be blank
阅读全文 »

发表于 |

最近在使用react + antd做前端开发的时候，偶然间发现控制台的一个warning报错:

Can’t call setState(or forceUpdate) on an unmount component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

一开始以为是组件注册了监听事件，组件卸载以后没有移除监听导致的，后来看了代码排查了这个因素（虽然之前确实没有移除监听事件，导致了内存泄露的问题），显然这里不是。

阅读全文 »