想念熊学编程

Promise异步函数顺序执行的四种方法

2018-08-24T17:01:11.000Z

Promise异步函数顺序执行的四种方法

前段时间遇到一个编程题，要求控制promise顺序执行，今天总结了一下这个至少有好四种方法都可以实现，包括promise嵌套，通过一个promise串起来，generator，async实现，以下逐一介绍。
题目：

//实现mergePromise函数，把传进去的数组顺序先后执行，
//并且把返回的数据先后放到数组data中
const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

function mergePromise(ajaxArray) {
//todo 补全函数
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

一. promise嵌套

function mergePromise1(ajaxArray) {
  let arr = [];
    return ajaxArray[0]().then(data=>{
        arr.push(data);
        return ajaxArray[1]();
    }).then(data=>{
        arr.push(data);
        return ajaxArray[2]();
    }).then(data=>{
      arr.push(data);
      return arr;
    });
}

二. Promise.resolve将promise串连成一个任务队列

function mergePromise2(ajaxArray) {
  let p = Promise.resolve();
  let arr = [];
  ajaxArray.forEach(promise => {
    p = p.then(promise).then((data) => {
        arr.push(data);
        return arr;
    });
  });
  return p;
}

此方法相对于上面的方法简单并且书写直观易懂，还有一种类似的任务队列，将数组按顺序从左边头部取出一个执行，执行完成后触发自定义next方法，next方法负责从数组中取出下一个任务执行。

三. generator函数

1. 原生generator函数

var mergePromise3 = function* (ajaxArray) {
  let p1 = yield ajaxArray[0]();
  let p2 = yield ajaxArray[1]();
  let p3 = yield ajaxArray[2]();
  return Promise.resolve([p1,p2,p3]);
}

//自动运行的run
function run(fn) {
  return new Promise((resolve, reject) => {
    var g = fn;
    let arr = [];
    function next(preData) {
      if(preData) { //如果有数则push进数组
        arr.push(preData); 
      }
      let result = g.next(preData); //获取每一步执行结果，其中value为promise对象，done表示是否执行完成
      if (result.done) { //函数执行完毕则resolve数组
        resolve(arr);
      }
      else { //函数没有执行完毕则递归执行
          result.value.then(function(nowData) {
            next(nowData);
          });
      }
    }
    next();
  });
}

使用这种方法需要修改mergePromise方法为：

run(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

2. 利用co模块自动执行

const co = require('co')
  co(mergePromise3([ajax1, ajax2, ajax3])).then(data => {
  console.log('done');
  console.log(data); // data 为 [1, 2, 3]
});

此方法原理和上面一样，只是使用已有的封装好的co模块来自动执行

四. async函数

function mergePromise4(ajaxArray) {
  let arr = [];
  async function run() {
      for(let p of ajaxArray) {
          let val = await p();
          arr.push(val);
      }
      return arr;
  }
  return run();
}

以上列出了四种方法，具体使用那种方法也根据喜好而定，如果有其他的好的方法欢迎留言补充。

Javacript二叉树算法实现及快排求第K大值

2018-08-24T17:00:16.000Z

之前实习笔试的时候刷题一直用的java，也参考某篇文章写过java版的二叉树常见算法，因为马上要转正面试了，这几天都在准备面试，就把之前的翻出来用javascript重新写了一遍，二叉树基本都是递归处理的，也比较简单，就当做热身。用快排求前K大值，另外如果之前java版的作者看到的话可以留言，我会标明文章引用。

Javacript二叉树常见算法实现

节点构造函数和二叉树构造函数

function Node(key) {
    this.key = key;
    this.left = null;
    this.right = null;
}
function binaryTree() {
    this.root = null;
}

插入节点生成二叉树

binaryTree.prototype.insert = function(root, key) {
    var node = new Node(key);
    if (root === null) { //树根节点为空则将此节点作为根节点
        this.root = node;
    } else if (node.key < root.key) { //小于左孩子节点则要么作为左子节点要么递归插入左部门
        if (root.left === null) {
            root.left = node;
        } else {
            this.insert(root.left, key);
        }
    } else { //大于右孩子节点则要么作为右子节点要么递归插入到右部分
        if (root.right === null) {
            root.right = node;
        } else {
            this.insert(root.right, key);
        }
    }
}

先序遍历

//先序遍历递归方法
binaryTree.prototype.preOrder = function(node) {
    if (node !== null) {
        console.log(node.key); //先打印当前结点
        this.inOrder(node.left); //打印左结点
        this.inOrder(node.right); //打印右结点
    }
}

//先序遍历非递归方法
//首先将根节点入栈，如果栈不为空，取出节点打印key值，然后依次取右节点和左节点入栈，依次重复
binaryTree.prototype.preOrder2 = function(node) {
    let stack = [];
    stack.push(node);
    while (stack.length > 0) {
        let n = stack.pop();
        console.log(n.key);
        if (n.right != null) {
            stack.push(n.right);
        }
        if (n.left != null) {
            stack.push(n.left);
        }
    }
}

中序遍历

//中序遍历递归方法
binaryTree.prototype.inOrder = function(node) {
    if (node !== null) {
        this.inOrder(node.left);
        console.log(node.key);
        this.inOrder(node.right);
    }
}

//中序遍历非递归方法
//依次取左节点入栈直到左下角节点入栈完毕，弹出节点打印key,如果该节点有右子节点，将其入栈
binaryTree.prototype.inOrder2 = function(node) {
    let stack = [];
    while (node != null || stack.length) {
        if (node != null) {
            stack.push(node);
            node = node.left;
        } else {
            let n = stack.pop();
            console.log(n.key);
            node = n.right;
        }
    }
}

后序遍历

binaryTree.prototype.postOrder = function(node) {
    if (node !== null) {
        this.inOrder(node.left);
        this.inOrder(node.right);
        console.log(node.key);
    }
}

求树的深度

binaryTree.prototype.treeDepth = function(node) {
    if (node === null) {
        return 0;
    }
    let left = this.treeDepth(node.left);
    let right = this.treeDepth(node.right);
    return (left > right) ? (left + 1) : (right + 1);
}

判断两棵树结构是否相同

binaryTree.prototype.structCmp = function(root1, root2) {
    if (root1 == null && root2 == null) { //根节点都为空返回true
        return true;
    }
    if (root1 == null || root2 == null) { //根节点一个为空一个不为空返回false
        return false;
    }
    let a = this.structCmp(root1.left, root2.left); //都有孩子节点则递归判断左边是不是相同并且右边也相同
    let b = this.structCmp(root1.right, root2.right);
    return a && b; //左子树相同并且右子树相同
}

得到第k层节点个数

binaryTree.prototype.getLevelNum = function(root, k) {
    if (root == null || k < 1) {
        return 0;
    }
    if (k == 1) {
        return 1;
    }
    return this.getLevelNum(root.left, k - 1) + this.getLevelNum(root.right, k - 1); //从左子树角度看，根节点第k层就是相对于左子树k-1层，把左子树右子树k-1层相加即可
}

求二叉树的镜像

binaryTree.prototype.mirror = function(node) {
    if (node == null) return;
    [node.left, node.right] = [node.right, node.left]; //交换左右子树并依次递归
    this.mirror(node.left);
    this.mirror(node.right);
}

测试用

var tree = new binaryTree();
let arr = [45, 5, 13, 3, 23, 7, 111];
arr.forEach((node) => {
    tree.insert(tree.root, node);
});

var tree2 = new binaryTree();
let arr2 = [46, 6, 14, 4, 24, 8, 112];
arr2.forEach((node) => {
    tree2.insert(tree2.root, node);
});

tree.preOrder(tree.root);
tree.preOrder2(tree.root);
tree2.inOrder(tree2.root);
tree.inOrder2(tree.root);
let depth = tree.treeDepth(tree.root);
console.log(depth);
let isstructCmp = tree2.structCmp(tree.root, tree2.root);
console.log(isstructCmp);
let num = tree.getLevelNum(tree.root, 4);
console.log(num);
tree.mirror(tree.root);
tree.inOrder(tree.root);
let n = tree.findLCA(tree.root, 111, 3);
console.log(n);

快速排序求第K大值

快速排序

function quickSort(array) {
  if(array.length <= 1){
      return array;
  }
  let middle = Math.floor(array.length / 2)
  let pivot = array.splice(middle, 1);
  let left =[], right = [];
  for(let i = 0; i < array.length; i++) {
      if(array[i] < pivot) {
          left.push(array[i]);
      } else {
          right.push(array[i]);
      }
      
  }
  return quickSort(left).concat(pivot, quickSort(right));
}

快速排序改进求第K大值

思想是通过快排把数组切割成左中右三部分，将K与右边数组（当然选左边数组也可以）长度作比较，如果右边数组长度为K-1,则中间元素即为第K大值，如果右边数组长度大于等于K，则第K大元素肯定在右边，则只需要对右边数组递归求K大值，如果右边数组长度小于K-1，则第K大值在左边，在左数组求第k-1-right.length大值即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getK(array, k) {
  if(array.length <= 1){
      return array;
  }
  let middle = Math.floor(array.length / 2)
  let pivot = array.splice(middle, 1);
  let left =[], right = [];
  for(let i = 0; i < array.length; i++) {
      if(array[i] < pivot) {
          left.push(array[i]);
      } else {
          right.push(array[i]);
      }
      
  }
  if(right.length == k - 1){
      return pivot;
  } else if (right.length >= k) {
      return getK(right, k);
  } else {
      return getK(left, k-right.length-1);
  }
}

另外此方法也不是最佳解法，还有一种比较好的解法是利用建立K个元素的最小堆，新元素替换堆顶元素并调整堆，最后得到的K个元素即为最大的K个元素，时间复杂度NlogK,大家有其他方法或改进意见欢迎留言。

vue+express图片上传并用js-xlxs插件将链接导出excel

2018-08-01T01:08:12.000Z

vue+axios+express图片上传并利用js-xlxs插件将图片链接导出到excel里

一、介绍

vue + express实现图片上传，使用createObjectURL方法在前端页面显示图片缩略图，使用ClipboardJS实现复制剪切功能，最后利用js-xlxs插件将上传后的服务器端图片资源url地址导出到excel里面。本项目只是演示用，如果你是组件式开发，直接安装导入相关插件即可，其他方法都一样，最后实现效果图如下

二、关键功能实现

1. 图片缩略图生成

最开始我是将图片上传到node端后，后台返回上传后的图片地址，然后前端显示，但是查找资料后发现createObjectURL就可以轻松实现图片缩略图，这在MDN官网上就有这些应用举例，这个网站介绍了使用createObjectURL方法可以展示图片，视频，PDF的缩略图，及其方便。因此这里采用该方法。另外input的mutiple属性可以实现多文件上传。
相关代码如下

html部分
文件上传

    
    


js部分
uploadFile() {
    //拿到上传的图片
    var imgs = this.$refs.pic.files;
    for (let i = 0; i < imgs.length; i++) {
        //逐个获取图片
        let file = imgs[i];
        //使用createObjectURL方法生成图片缩略图预览
        let src = window.URL.createObjectURL(file);
        //上传该图片到服务器端并拿到返回的服务器端图片地址
        let url = await uploadImg(file, this.$data.urlList);
        //构造数组
        this.$data.urlList.push({
            src: src,
            name: file.name,
            url: "localhost/" + url
        });
    }
}

2. 图片上传并存储

先贴上这部分代码

//上传一个图片文件
async function uploadImg(file, urlList) {
    var formData = new FormData();
    formData.append("pic", file);
    let url = await new Promise((resolve, reject) => {
            axios.post('/upload', formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                })
                .then((res) => {
                    resolve(res.data);
                })
                .catch((err) => {
                    console.log(err);
                });
        })
        //返回服务器上对应地址
    return url;
}

上面里面的uploadImg函数就是实现图片上传，图片文件上传使用FormData格式,利用axios发送post请求，在这里使用ES6的async，结合上面的

1	let url = await uploadImg(file, this.$data.urlList);

这一句中的await，使得请求成功并完成后获取到线上url地址。node端代码如下：

app.post("/upload", function(req, res) {

    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
        let imgPath = files.pic.path
        let imgName = files.pic.name
        // 同步读取文件
        let data = fs.readFileSync(imgPath)
        // 存储上传的图片，同时获取静态图片地址并返回客户端
        fs.writeFile("static/" + imgName, data, function(err) {
            if (err) {
                console.log(err)
                return;
            }
            let itemUrl = {
                "path": "static/" + imgName
            };
            let url = "static/" + imgName;
            res.send(url);
        })
    })

});

使用formidable解析图片，并同步写入图片到static文件夹，最后获取线上图片地址返回

3. 前端显示

图片列表

    
        
            
        
        
            
                {{ item.name }}
            
            复制

其中src属性是生成的缩略图URL，name是图片名称，url属性是线上图片地址。

4. 导出excel

导出excel目前有很多插件，最开始我是使用excel-export插件，官网地址在这里,这个插件api很简单也很方便，但是有点BUG，他说能设置单元格宽度，但是按照他的来我不能设置单元格宽度，之后又找到一个更强大的js-xlxs插件，这个插件很强大，基本上需要的excel相关的需求都能满足要求吧。具体导出excel代码如下，注意生成表格的数据需要是二维数组。

downloadURL() {
    var imgURLS = [];
    //设置excel标题
    imgURLS.push(["序号", "图片名称", "URL链接"]);
    //获取所有图片url链接信息
    this.$data.urlList.forEach((item, index) => {
        //构建一个数组
        var itemArray = [index + 1].concat(item.name, item.url);
        //构建二维数组
        imgURLS.push(itemArray);
    });
    //生成工作表结构
    const ws = XLSX.utils.aoa_to_sheet(imgURLS);
    //设置三列单元格宽度
    var wscols = [{
        wch: 6
    }, {
        wch: 50
    }, {
        wch: 50
    }];
    ws['!cols'] = wscols;
    //生成excel基本数据结构
    const wb = XLSX.utils.book_new();
    //生成表名字为SheetJS的excel工作区
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    //导出excel
    XLSX.writeFile(wb, "export.xlsx");
}

三、运行项目

到这里就实现了最开始的功能，如果需要全部代码可以在我的github上下载

本文详细代码可以在github上下载，地址https://github.com/wangfengyuan/ExportExcel
运行代码
1
2
3
npm install
node app
浏览器输入： localhost

四、写在最后

我前端刚入门没多久，最近在公司实习，刚写文章不久，所以可能写的不太好，大家对文章和代码有什么建议或者有更好的想法欢迎提出来一起交流，谢谢！

微信网页授权并获取用户信息

2018-07-28T18:44:10.000Z

介绍

在很多微信H5应用里，当用户访问第三方应用时就需要进行微信网页授权，并且很多涉及安全的操作我们必须要先获取用户信息才能继续，本文章简单介绍了微信授权流程，并通过申请微信测试账号来模拟网页授权，用户在授权页点击确定登录后获取用户信息并显示在前端页面，最后效果如下图

工具及开发准备

1. 微信开发者工具及微信测试号

因为是微信授权，所以必须要在微信环境下使用，首先我们要在这里安装微信开发者工具，因为我们没有自己的应用，所以还需要在微信公众平台申请一个接口测试号,这个接口测试号就相当于我们的第三方应用。

2. 参数设置

登陆测试号后可以查看到自己的appId和appsecret信息，将体验接口权限表里的网页服务的网页授权获取用户基本信息修改为127.0.0.1:8800，该地址就是用户确认授权后回调的地址即我们应用的后台处理地址，如下图

最后拿出自己微信扫码关注该测试号即可,如下图所示

微信授权流程介绍

具体流程及详细介绍大家可以到官网微信公众平台技术文档查看,大致分为四步：

引导用户进入授权页面同意授权，此时会调用微信api获取code
授权通过后会带上code参数请求回调地址
后台获取code,再次调用微信接口换取网页授权access_token和openid
通过网页授权access_token和openid获取用户基本信息（如果有unionid还会获取到unionid参数）

正式开始

详细代码可以在github上下载，地址https://github.com/wangfengyuan/wxAuthorize

1. 原始代码

let express = require("express");
const https = require('https');

let app = express();

//appID
let appID = `wxec6fa9e9bc03d885`;
//appsecret
let appSerect = `4c8a0d14cff08959b4e17334cabf9cf0`;
//点击授权后重定向url地址
let redirectUrl = `/getUserInfo`;
let host = `http://127.0.0.1:3000`;
//微信授权api,接口返回code,点击授权后跳转到重定向地址并带上code参数
let authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=` +
    `${host}${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`

app.get("/login", function(req, res) {
    res.sendFile(path.resolve(__dirname,'login.html'));
});

app.get("/auth", function(req, res) {
    res.writeHead(302, {
        'Location': authorizeUrl
    });
    res.end();
});

app.get("/getUserInfo", function(req, res) {
    let code = req.query.code;
    let getaccess = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` +
        `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;
    //通过拿到的code和appID、app_serect获取access_token和open_id
    https.get(getaccess, (resText) => {
        var ddd = "";
        resText.on('data', (d) => {
            ddd += d;
        });
        resText.on('end', () => {
            // console.log(ddd);
            var obj = JSON.parse(ddd);
            var access_token = obj.access_token;
            var open_id = obj.openid;
            //通过上一步获取的access_token和open_id获取userInfo即用户信息
            let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
            https.get(getUserUrl, (resText) => {
                user = "";
                resText.on('data', (d) => {
                    user += d;
                });
                resText.on('end', () => {
                    console.log(user);
                    var userobj = JSON.parse(user);
                    res.send(userobj);
                    console.log(userobj);
                });

            })
        });
    }).on('error', (e) => {
        console.error(e);
    });
    // res.end();
});

app.listen(3000);

具体使用时要将appID和appSerect换成你对应的参数即可，因为我们的请求是要按一定顺序的，但是node发送请求是异步的，所以我们的请求嵌套了三层，代码很难看，所以这里可以采用ES6的async和await解决异步回调地狱。

2. 使用ES6的async和await的改进代码

async function wxAuth(req, res) {
    //解析querystring获取URL中的code值
    let code = req.query.code;
    //通过拿到的code和appID、app_serect获取返回信息
    let resObj = await getAccessToken(code);
    //解析得到access_token和open_id
    let access_token = resObj.access_token;
    let open_id = resObj.openid;
    //通过上一步获取的access_token和open_id获取userInfo即用户信息
    let userObj = await getUserInfo(access_token, open_id);
    console.log(userObj);
    res.render(path.resolve(__dirname,'userInfo.ejs'), {userObj: userObj});
    // res.send(userObj);
}


//通过拿到的code和appID、app_serect获取access_token和open_id
function getAccessToken(code) {
    return new Promise( (resolve, reject) => {
        let getAccessUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` +
            `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;
        https.get(getAccessUrl, (res) => {
            var resText = "";
            res.on('data', (d) => {
                resText += d;
            });
            res.on('end', () => {
                var resObj = JSON.parse(resText);
                resolve(resObj);
            });
        }).on('error', (e) => {
            console.error(e);
        });
    });
    
}

//通过上一步获取的access_token和open_id获取userInfo即用户信息
function getUserInfo(access_token, open_id) {
    return new Promise( (resolve, reject) => {
        let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
        https.get(getUserUrl, (res) => {
            var resText = "";
            res.on('data', (d) => {
                resText += d;
            });
            res.on('end', () => {
                var userObj = JSON.parse(resText);
                resolve(userObj);
            });
        }).on('error', (e) => {
            console.error(e);
        });
    })
}

app.listen(8800);

修改后代码流程清晰了很多，点击上图确认登陆后最后将获取到的userObj通过ejs模板渲染在前端页面，就能看到文章最开始展现的效果图。

写在最后

我前端刚入门没多久，最近在公司实习，受到身边同事影响，所以也开始写文章来记录自己的学习心得，这是我第一次写文章，所以可能写的不太好，大家对文章和代码有什么建议欢迎提出来一起交流，谢谢！

想念熊学编程

Promise异步函数顺序执行的四种方法

一. promise嵌套

二. Promise.resolve将promise串连成一个任务队列

三. generator函数

1. 原生generator函数

2. 利用co模块自动执行

四. async函数

Javacript二叉树算法实现及快排求第K大值

Javacript二叉树常见算法实现

节点构造函数和二叉树构造函数

插入节点生成二叉树

先序遍历

中序遍历

后序遍历

求树的深度

判断两棵树结构是否相同

得到第k层节点个数

求二叉树的镜像

最近公共祖先节点

测试用

快速排序求第K大值

快速排序

快速排序改进求第K大值

vue+express图片上传并用js-xlxs插件将链接导出excel

vue+axios+express图片上传并利用js-xlxs插件将图片链接导出到excel里

一、介绍

二、关键功能实现

1. 图片缩略图生成

文件上传

2. 图片上传并存储

3. 前端显示

图片列表

4. 导出excel

三、运行项目

四、写在最后

微信网页授权并获取用户信息

介绍

工具及开发准备

1. 微信开发者工具及微信测试号

2. 参数设置

微信授权流程介绍

正式开始

1. 原始代码

2. 使用ES6的async和await的改进代码

写在最后