发表于 | 更新于:

为什么需要埋点

现在评定产品的好坏、产品使用范围的广度等信息，基本上都是通过数据说明的，而埋点，正是作为这些数据统计的支撑。埋点的意义也就不言而喻了。用户浏览次数统计、交互行为跟踪、商品交易信息收集等，都是埋点的作用。

埋点有哪些方案

我了解到的目前市面上的埋点方案，有代码埋点、可视化埋点、无埋点、后端埋点方案。

阅读全文 »

发表于 | 更新于:

现在网站中，涉及到表单填写之类的数据编辑，当用户想主观想要离开这个页面，或者刷新、关闭页面、不小心触发了路由跳转的操作时，都会给用户一个友好的提示，避免这种关闭导致的数据编辑丢失。

浏览器刷新、关闭页面时，默认有一个弹框提示；但是如果离开这个页面，需要展示我们自定义的提示呢？例如这种：

接下来我们就来说说如何实现离开页面时，给用户友好提示数据清除的情况。

实现这个功能，需要做两个事：

  1. 路由组件之间切换跳转，导致卸载组件、路由变化
  2. 浏览器刷新、关闭，导致触发页面卸载
阅读全文 »

发表于 | 更新于:

最近遇到一个跨域的问题，比较难定位，总结一下定位过程。

移动端开发中，有定位的需求，一般用的是 H5 原生定位方法: window.navigator.geolocation.getCurrentPosition(successFunction, failFunction, options)，获取到经纬度后，通过这个高德地图 API：https://restapi.amap.com/v3/assistant/coordinate/convert 转换成了高德地图的经纬度

问题回放

同一套代码在三个环境中运行，定位的代码是公共代码，其中，A、B 环境测试过定位都没问题，但是在集成环境中发现微信的定位出现问题。但经过测试，别的页面通过定位的公共代码是能成功定位的。

阅读全文 »

发表于 | 更新于:

有两种方式实现单页应用，Hash 和 H5 的 history

通过 Hash 实现前端路由

虽然 hash 的兼容性较好，但搜索引擎对带有 hash 的页面不友好,带有 hash 的页面内难以追踪用户行为

改变 url 的 hash 值是不会刷新页面的。可以通过<a href="#edit">edit</a>实现，也可以通过 JavaScript 实现：

1
2
3
4
5
window.location.hash='edit'
<!-- 赋值前 -->
http://localhost:3000
<!-- 赋值后  -->
http://localhost:3000/#edit

通过 hashchange 的事件，可以监听 hash 的变化：

1
2
3
4
5
6
7
window.onhashchange = function(event) {
  // to do showUI
};

window.addEventListener("hashchange", function(event) {
  // to do showUI
});
阅读全文 »

发表于 | 更新于:

高级使用

联合类型

表示一个值可以是几种类型之一,适合于那些值可以为不同类型的情况。我们用竖线（ | ）分隔每个类型，所以 number | string | boolean表示一个值可以是 number， string，或 boolean。当函数的入参或者某个变量，可以是多个不同类型时使用。但是需要注意的是，联合类型的值只能调用所有类型里共有的方法或属性。

1
2
3
4
function padLeft(value: string, padding: string | number) {
    // ...
}
let a = string | number
阅读全文 »

发表于 | 更新于:

现在很多第三方库都改用ts来写了，如果遇到问题去看相关源码，看不懂人家那一堆都语法是啥意思，就尴尬了，所以还是先把TypeScript的语法过一遍，起码要能看懂人家的代码表达的一个大概意思。

基础类型

定义一个变量，都需要写成这种格式：let [变量: 类型] = 值;
和JS基本一样的是：

1
2
3
4
5
let isDone: boolean = false;
let decLiteral: number = 6;
let name: string = `bob`;
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

和JS相比比较不一样的：

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

1
2
3
4
5
let x: [string, number]; 
x = ['hello', 10] // OK
x = [10, 'hello']; // Error, Initialize it incorrectly
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

阅读全文 »

发表于 | 更新于:

时间复杂度

推导出时间复杂度呢？有如下几个原则：

如果运行时间是常数量级，用常数1表示。
只保留时间函数中的最高阶项
如果最高阶项存在，则省去最高阶项前面的系数。

阅读全文 »

发表于 | 更新于:

基于有了openid才能进行后续操作的功能，可以采用发布订阅模式进行通知；如果用户拒绝授权，可以在需要授权的操作之前多次让用户进行授权，否则无法进行下一步操作，直到用户愿意授权拿到授权信息为止。

1、解决微信公众号网页授权只能设置一个回调域名的问题（获取code时，跨域了）

https://github.com/HADB/GetWeixinCode

2、ngrok内网穿透 本地调试

下载ngrok，打开终端，进入ngork目录，执行./ngrok http <端口号>
进入微信公众号测试号后台，配置授权域名，

此时需要开启一个服务器，用来接收微信服务器发送的信息，启动服务node server.js

此处用koa2框架调试，server.js：

阅读全文 »

发表于 | 更新于:

函数防抖：当调用动作n秒后才会执行该动作，如果在这n秒内又调用该动作，则重新计算时间，等待n秒后执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function debounce(fn, wait) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
//清除计时器，不再执行
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, wait)
    }
}

闭包：上述函数中，返回一个函数，并且这个函数调用了父函数的变量timer；父函数被调用，timer不会注销，还是存在内存中，闭包还是可以拿到timer的值

1
2
3
4
let fun = debounce(fn, 300)
fun() // timer还能访问
let fun2 = debounce(fn, 300)
fun, fun2这两个方法开辟了两块内存空间，里面的timer最初都是null

发表于 | 更新于:

文件夹命令：

ls 列出当前目录下的文件和文件夹
ls -l 查看文件的详细信息
ls -la 查看隐藏文件
pwd 查看当前在哪个目录下
cd .. 进入上一级目录
rm 删除文件
rm -r 删除文件夹，以及文件夹下的内容
mv folder1 folder2 文件夹改名
mkdir -p /data/db 层级创建文件

阅读全文 »