发表于 | 分类于 ，

vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue

Object.defineProperty()

实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {name:'wclimb'}
var age = 24
Object.defineProperty(obj,'age',{
	enumerable: true, // 可枚举
    configurable: false, // 不能再define
    get () {
        return age
    },
    set (newVal) {
        console.log('我改变了',age +' -> '+newVal);
        age = newVal
    }
})

> obj.age
> 24

> obj.age = 25;
> 我改变了 24 -> 25
> 25

从上面可以看到通过get获取数据，通过set监听到数据变化执行相应操作，还是不明白的话可以去看看Object.defineProperty文档。

阅读全文 »

发表于 | 分类于

介绍

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。

Web Worker使用要点

  • 同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

  • DOM 限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

  • 通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

  • 脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

  • 文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。后面我们允许会做处理。

阅读全文 »

发表于 | 分类于 ，

我们在开发过程中大多会用到promise，想必大家对promise的使用都很熟练了，今天我们就来实现一个简单的promise，实现的效果如有出入还往指正。

整体结构

我们先来梳理一下整体的结果，以便后续好操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MyPromise {
    constructor(fn){
        
    }
    resolve(){

    }
    then(){

    }
    reject(){

    }
    catch(){

    }
}
阅读全文 »

发表于 | 分类于

在开发的过程中，我们往往需要复制一个数据，在复制基本数据类型的时候不会出现问题，如string、number、null等。
但是我们复制一个引用类型的数据时，往往会出现问题，如array、object。

浅拷贝

看下面这段代码

1
2
3
var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4)

我们打印一下看看arr1 arr2的结果

1
2
arr1: [1, 2, 3, 4]
arr2: [1, 2, 3, 4]

我们发现，改变arr2的同时也改变了arr1，WTF？

接下来我们看看对象

1
2
3
4
5
var obj1 = {
        name:'wclimb'
    };
var obj2 = obj1
obj2.age = 24

阅读全文 »

发表于 | 分类于 ， ，

写在前面

之前在github写了几个项目，然后一直有很多人问我node项目怎么部署到服务器上，于是乎应大家要求就写了这篇文章，此篇教程只提供给新手借鉴，如果你是大佬的话可以不用往下看了，教程多少有些缺陷，都是按照自己的印象写出来的，所以有问题还望指正。

linux服务器安装node

首先
下载node包

1
wget https://npm.taobao.org/mirrors/node/latest-v8.x/node-v8.1.0-linux-x64.tar.gz

解压

1
tar xvf node-v8.1.0-linux-x64.tar.gz

阅读全文 »

发表于 | 分类于

最近在读语言精粹，读到函数记忆这块，觉得有必要记录一下

我们在开发过程中经常使用递归的方式调用函数，但是开发过程中很少有关心性能问题

我们看一下下面这段代码

1
2
3
4
5
6
7
8
9
var count = 0
var f = function(n){
    count++
    return n < 2 ? n : f(n - 1) + f(n - 2);
}
for(var i = 0; i <= 10; i++){
    console.log(i,f(i))
}
console.log('执行次数', count)

结果

1
2
3
4
5
6
7
8
9
10
11
12
0 0
1 1
2 1
3 2
4 3
5 5
6 8
7 13
8 21
9 34
10 55
'执行次数', 453

执行一遍发现，f这个函数被调用了453次，我们调用了11次，而它自身调用了442次去计算可能已经被刚计算过的值。如果我们让函数具备记忆功能，就可以显著减少运算量。

接下来，我们定义一个memo的数组来保存我们得储存结果，并把它隐藏在闭包中，让该函数能一直访问到这个数组，不被垃圾回收机制回收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var count = 0
var f = function(){
    var memo = [0,1];
    var fib = function(n){
        count++
        var result = memo[n];
        if(typeof result !== 'number'){
            result = fib(n - 1) + fib(n - 2)
            memo[n] = result
        }
        return result
    }
    return fib
}()
for(var i = 0; i <= 10; i++){
    console.log(i,f(i))
}
console.log('执行次数', count)

执行结果

1
2
3
4
5
6
7
8
9
10
11
12
0 0
1 1
2 1
3 2
4 3
5 5
6 8
7 13
8 21
9 34
10 55
执行次数 29

现在f函数只被调用了29次，我们调用了它11次，它调用了18次去取得之前储存的结果。

先就分享到这吧，关键拓宽思路

GitHub：wclimb

发表于 | 分类于

万物皆对象

在JavaScript中除值类型之外，其他的都是对象，为了说明这点，我们举几个例子
我们可以使用typeof来做类型判断

1
2
3
4
5
6
7
8
9
typeof a;             // undefined
typeof 1;             // number
typeof 'wclimb';      // string
typeof true;          // boolean

typeof function(){};  // function
typeof [];            // object
typeof null;          // object
typeof {};            // object

除了undefined、number、string、boolean属于值类型之外，其他都是对象。你可能要问了，不是还有一个是function吗？要校验他是不是应该对象可以这样做:

1
2
var fn = function(){}
fn instanceof Object // true

由上面的例子所示，函数确实是对象，为什么呢？我们看一下下面的例子

1
2
3
4
5
function Person(name){
    this.name = name; 
}
var person = new Person('wclimb');
console.log(person) // Person {name: "wclimb"}

由此我们可以得知，对象都是通过函数创建的，这么说你可能又会说不对，你看下面的就不是函数创建的

阅读全文 »

发表于 | 分类于

背景

我们在开发的过程中会经常使用如scroll、resize、touchmove等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。
因此针对这类事件要进行节流或者防抖处理

节流

节流的意思是，在规定的时间内只会触发一次函数，如我们设置函数500ms触发一次，之后你无论你触发了多少次函数，在这个时间内也只会有一次执行效果

先来看一个例子

See the Pen gKWLpO by wclimb (@wclimb) on CodePen.

我们看到使用了节流的在1000ms内只触发了一次，而没有使用节流的则频繁触发了调用的函数

接下来看看代码实现
v1 第一次不触发，不传参实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function throttle(fn,interval){
    var timer;
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn()
        }, interval || 1000);
    }   
}

效果是实现了，但是我在尝试在执行函数里console.log(this)，结果发现this指向的是window，而且还发现我们不能传递参数，下面就来改进一下

阅读全文 »

发表于 | 分类于 ，

HTTP与缓存相关的字段

1. 通用字段

字段名称 释义
Cache-Control 控制缓存具体的行为
Pragma HTTP1.0时的遗留字段，当值为”no-cache”时强制验证缓存
Date 创建报文的日期时间(启发式缓存阶段所用)

2. response字段

字段名称 释义
ETag 服务器生成资源的唯一标识
Vary 代理服务器缓存的管理信息
Age 资源在缓存代理中存贮的时长(取决于max-age和s-maxage的大小)

3. request字段

字段名称 释义
If-Match 条件请求，携带上一次请求中资源的ETag，服务器根据这个字段判断文件是否有新的修改
If-None-Match 和If-Match作用相反，服务器根据这个字段判断文件是否有新的修改
If-Modified-Since 比较资源前后两次访问最后的修改时间是否一致
If-Unmodified-Since 比较资源前后两次访问最后的修改时间是否一致

4. 实体字段

字段名称 释义
Expires 告知客户端资源缓存失效的绝对时间
Last-Modified 资源最后一次修改的时间

协商缓存（304）

If-modified-Since/Last-Modified

  • 浏览器在发送请求的时候服务器会检查请求头request header里面的If-modified-Since，如果最后修改时间相同则返回304，否则给返回头(response header)添加last-Modified并且返回数据(response body)。
    1
    2
    if-modified-since:Wed, 31 May 2017 03:21:09 GMT
    if-none-match:"42DD5684635105372FE7720E3B39B96A"
阅读全文 »

发表于 | 分类于 ， ， ，

前言

本篇文章主要是记录本人在微信扫码支付过程中所遇到的问题，给大家一个借鉴作用，希望对你们有帮助

开发环境

  • nodejs v8.1.0
  • egg v1.1.0

准备工作

  • 微信公众号-appid
  • 微信商户号-mch_id
  • key值(签名算法所需,其实就是一个32位的密码，可以用md5生成一个)(key设置路径：微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置)

扫码支付-统一下单

以下才用的是微信模式二，因为比较简单

阅读全文 »