2019-11-26

4 minutes read (About 666 words)

van-list 一直触发加载问题的排查

移动端分页一般都是向下滑动加载更多，Vant 组件库提供了 van-list 来实现这一功能。

List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

实际应用中发现，即使内部元素已经填满一整屏，仍然会触发加载，直到我模拟的20多页全部加载完才停下来。

我没有给这个问题写专门的 CodePen demo，比较麻烦，碰到的人也不一定多。

结论

van-list 会在内容之后增加一个 placeholder，通过 placeholder 的位置判断内容是否已填充满屏。
van-list 本身为 flex 布局时，flex-direction 必须是 column（或 column-reverse）。

过程

首先我的用法是这样的：

template

<van-list> <!-- flex -->
  <van-grid>
    <van-grid-item />
    <van-grid-item />
    <van-grid-item />
  </van-grid>
</van-list>

首先看文档，英文文档没有提到，但中文文档有以下一段话：

使用 float 布局后一直触发加载？
若 List 的内容使用了 float 布局，可以在容器上添加van-clearfix类名来清除浮动，使得 List 能正确判断元素位置

检查了一下，我没有在使用 float 布局呀。

2019-10-25

Tech / FrontEnd

a minute read (About 168 words)

JS 原生对象与数组拷贝

浅拷贝单层对象

1 2	let obj = { id: 1, title: "1" } let copyOfObj = Object.assign({}, obj)

深拷贝多层对象

let obj = {
  id: 1,
  title: "1",
  tag: ['js', 'javascript'],
  category: { id: 1001, title: 'frontend' }
}
let copyOfObj = JSON.parse(JSON.stringify(obj))

浅拷贝简单类型数组

1 2	let arr = [1, 2, 3] let copyOfArr = [...arr]

深拷贝单层对象组成的数组

let arr = [
  { id: 1, title: "1" },
  { id: 2, title: "2" },
  { id: 3, title: "3" }
]
let copyOfArr1 = arr.map((item) => Object.assign({}, item))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

深拷贝多层对象组成的数组

let arr = [
  { id: 1, title: "1", subObj: { name: 'subObj1' } },
  { id: 2, title: "2", subObj: { name: 'subObj2' } },
  { id: 3, title: "3", subObj: { name: 'subObj3' } }
]
let copyOfArr1 = arr.map((item) => JSON.parse(JSON.stringify(item)))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

总结

不考虑性能的情况下，JSON.parse(JSON.stringify(value))是最简最万能的拷贝。

2019-10-24

Tech / FrontEnd

4 minutes read (About 589 words)

直接操作 Vue data 中不存在的属性导致的 v-model 绑定异常问题

初学Vue遇到的问题，尝试了几个小时才搞明白，大佬应该一眼就能看出什么问题吧……

需要注意，不要直接在JS中操作一个Vue data对象中不存在的属性，如果同时有通过v-model绑定到该对象的不存在的属性时，会出现诡异的行为表现，console中不会报出任何 warn 或 error。

需求是，实现三个复选框，第一个复选框初始为选中状态，一开始写出来是这样的——

HTML

<div id="app" style="margin: 10px;">
  <van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
    复选框 {{ box.title }}
  </van-checkbox>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      checkboxes: [
        { id: 1, title: 'a' },
        { id: 2, title: 'b' },
        { id: 3, title: 'c' }
      ]
    }
  },
  created () {
    this.checkboxes[0].selected = true
  }
})

试下效果：

See the Pen vue-v-model-not-work by iMaeGoo (@iMaeGoo) on CodePen.

复选框a的表现显然是异常的，点击不能成功地切换选中状态，而在点击之后再点击其他复选框，才会“有延迟地”切换状态。

2019-07-25

Tech / BackEnd

3 minutes read (About 523 words)

Node.js 实现 HTTP 访问日志

越来越咸，两个月没发文章了，刚刚换项目了，开始学一些新的知识。
近来调试 webhook 和 http callback 比较多，想要使用 Node.js 写一个接收所有 HTTP 请求，并把请求头和请求体写进log，返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子，优化了可读性，时间、method、path、URL参数（Query）、请求头（Header）、请求体（Body）都详细记录了：

info: 2019-07-25 18:04:36
    POST /v1.0/standard
    Query:
        search: keyword
    Header:
        cache-control: no-cache
        postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
        content-type: application/json
        user-agent: PostmanRuntime/3.0.11-hotfix.2
        accept: */*
        host: localhost:4000
        accept-encoding: gzip, deflate
        content-length: 209
        connection: keep-alive
    Body:
        appId: XXX
        data:
            userId: 123
            requestId: 456
        timestamp: 0

2019-05-08

Tech / FrontEnd

a minute read (About 177 words)

AngularJS 给 directive scope 绑定的 function 传参

如果我们想要给directive的scope中绑定的方法传递参数，需要传递对象，而不是直接传值。

举个栗子，这里的clickOutside是从用的地方传入的一个方法，debug时我们会发现绑进来的clickOutside并不是我们传的clickOutSideAction。

app.directive('clickOutSide', ['$document', function($document) {
    return {
        restrict: 'A',
        scope: {
            clickOutside: '&'
        },
        link: function (scope, el) {
            $document.on('click', function (e) {
                scope.clickOutside();
            });
        }
    }
}]);

1	<div data-click-out-side click-Outside="$ctrl.clickOutSideAction()"></div>

如果需要在这里给clickOutSideAction传参数，应该这样改：

app.directive('clickOutSide', ['$document', function($document) {
    return {
        ...
        link: function (scope, el) {
            ...
                scope.clickOutside({event: e});
            ...
        }
    }
}]);