由于今天更新MWeb找不到mainlib.db这个文件,才发现我记录了一个多月的笔记被删了… 太靠不住了,还是打算用这个来记录一些做h5页面以及学习中的一些问题,但是每次记录过后我都会备份到github.io这个博客来

2019.1.29

高德地图在Vue中使用方法并在H5页面中应用需要注意几点

  1. 高德地图的AMap对象是挂在window下的,所以无法在vue组件中通过this.data去修改vue的私有属性,因为两者的内外this指向不同,可以通过绑定变量指向当前this去解决这个问题.
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
// file.vue
<template></template>
<script>
const AMap = window.AMap  // 将AMap指向window.AMap

export defalut{
    data(){
        isHere:false,
    },
    methods:{
        // 由于我的项目仅仅使用定位方法 所以用这个方法来获取用户当前位置
        getLocation(){
            const THIS = this
            let mapObj = new AMap.Map('iCenter')
            mapObj.plugin('AMap.Geolocation',() => {
              let geolocation = new AMap.Geolocation({
                enableHighAccuracy:true,//是否使用高精度定位，默认:true
                timeout:10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge:0,           //定位结果缓存0毫秒，默认：0
                convert:true           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              })
              mapObj.addControl(geolocation)
              geolocation.getCurrentPosition()
              AMap.event.addListener(geolocation,'complete',onComplete)//返回定位信息
              AMap.event.addListener(geolocation,'error',onError)      //返回定位出错信息
              function onError ( data ) {
                // 定位出错
                console.log(data)
              }
    
              function onComplete ( data ) {
                // 定位成功
                THIS.isHere = true
              }
        }
    }
}
<script>
<style><style>

2019.2.20

今天造轮子时因为vue中事件不熟悉导致一个问题排查了2个小时,后来自己找到问题了,记录一下

代码如下

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
// 组件
  <button class="w-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
        <w-icon v-if="icon && !loading" :name="icon" class="icon"></w-icon>
        <w-icon v-if="loading" name="loading" class="loading icon"></w-icon>
        <div class="content">
            <slot></slot>
        </div>
    </button>


// app.js中测试代码
{
  const Constructor = Vue.extend(Button)
  const vm = new Constructor({
    propsData:{
      icon:'settings'
    }
  })
  vm.$mount()
  let spy = chai.spy(function () {})
  
  // vm.$on('click') 中的click 对应组件中的$emit('click')
  
  vm.$on('click',spy)
  
  let button = vm.$el
  button.click()
  expect(spy).to.have.been.called()
}

导致如此简单的问题是因为使用了click,将addEventListener中的click事件记混淆了,并且不清楚这里的$on与addEventListener有何区别,最主要的原因是父子间通讯不熟导致的这个原因,特此记录.

2019-03-01

  1. Karma（[ˈkɑrmə] 卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例
  2. Mocha（[ˈmoʊkə] 摩卡）是一个单元测试框架/库，它可以用来写测试用例
  3. Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试（使用后才能理解）

2019-04-23

  1. 在使用html2canvas时,字体设置大小会变为最小,在ios上,可以通过设置font-variant: small-caps;解决,具体参考:https://github.com/omwteam/html2canvas/issues/8

2019-05-24

js的浅克隆

浅克隆仅仅只能克隆对象内属性最外层的属性。
例：

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
/**
 * @param {Object} obj
 * @return {Object}
 */
function shallowClone(obj){
    const newObj = {}
    for(let i in obj){
        newObj[i] = obj[i]
    }
    return newObj
}
let old = {name:'jack',age:'20'}

let new = shallowClone(old)

old.age = '21'
console.log(new.age,old.age) // new: 20 ,old: 21

let old2 = {
    name:'jack',
    age:'20',
    family:{
        father:'jhon',
        mother:'rose'}
    }

old2.family.father = 'dwight'    

let new2 = shallowClone(old2)
console.log(new2.family.father,old2.family.father) // new2 : dwight , old2 : dwight

综上所述,浅拷贝,仅能拷贝对象最外层,而对象内层的对象则进行地址的引用

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：some notes
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处