前端仿真实现之Mock

项目地址
前端demo

前言

我们大前端怎么能够被后端掣肘？不可能。有了数据仿真，我们再也不用等待后端实现了，可以自己开心的测试。这里我推荐下Mock.js

正文

可能有小伙伴问，官网这么清楚，你还写篇博客，凑数么。

这里提供几个我写项目遇到的问题。

Array有缺陷

好吧。这个缺陷就是只有从属性值 array 中随机选取 1 个元素，作为最终值（’name|1’: array）。你想取俩个，那就是重复两次。心好累有没有。
我不是很确定是不是我没发现。反正我是不知道。知道的小伙伴请告知。

/** * 获取随机数 *  * @export * @param {any} min  * @param {any} max  * @returns  */export function getRandomNumber(min, max) {    return parseInt(Math.random() * (max - min + 1) + min, 10);}/** * 根据给定数组生成随机数组（打乱排序取值） *  * @export * @param {any} arr  * @param {any} count  * @returns  */export function getRandomArray(arr, count) {    const shuffled = arr.slice(0);    let i = arr.length;    count = count || getRandomNumber(1, i);    const min = i - count;    let temp, index;    while (i-- > min) {        index = Math.floor((i + 1) * Math.random());        temp = shuffled[index];        shuffled[index] = shuffled[i];        shuffled[i] = temp;    }    return shuffled.slice(min);}

通过以上方法就可以机智的根据给定数组生成随机数组。原理简单：打乱排序取值。一看便知。

怎么仿真

我还能怎么仿真？用手啊啊。。。。

好吧，言归正传。一般而言都是这样子化模块

每个模块写自己的模块内的数据，然后暴露方法（相当于后端服务层方法）

//login.jsimport { param2Obj } from 'utils';const userMap = {    pzpzpz: {        role: ['admin'],        token: 'pz',        avatar: 'http://www.nymlc.com/assets/pz.jpg',        name: 'pz'    },    ln: {        role: ['guest'],        token: 'ln',        avatar: 'http://www.nymlc.com/assets/lc.jpg',        name: 'ln'    }};export default {    loginByUsername(data) {        const { username } = JSON.parse(data.body);        let res = {};        for (const key in userMap) {            if (username.indexOf(key) !== -1) {                res = userMap[key];            }        }        return res;    },    getUserInfo: config => {        const { token } = param2Obj(config.url);        if (userMap[token]) {            return userMap[token];        } else {            return userMap.pzpzpz;        }    }};

不过这样子就有个问题，数据都是分散的。以我博客为例，我想做个按标签过滤文章。这时候发现文章数据里的本该存储标签外键和标签里的id对不上。很明显啊。
所以呢咱们可以这样子。想象下后端开发流程。后端呢每次会写一堆的SQL语句（都是insert）来造假数据。好吧，也是仿真啦。我们也这样子做。
要知道，后端数据都来源于数据库（这里假定只有一个），那我们也新建一个database.js来生成我们项目需要的所有数据。生成顺序当然是先生成外键表咯。数据格式使用json。

// database.jsimport { getRandomArray } from 'utils';import Mock from 'mockjs';const coverMap = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009232&di=6902e746b953a6ab67d8ea49c9915694&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1212%2F2239%2F2239-ntk36472.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009229&di=4fa2d5a9262925d99ea61c6edc010f57&imgtype=0&src=http%3A%2F%2Ff3.topit.me%2F3%2F9c%2Fbc%2F1133861393232bc9c3o.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508521724&di=f1f67331fb10b9f58671b6a6056c6a43&imgtype=jpg&er=1&src=http%3A%2F%2Fres.silver.org.cn%2FUploads%2FPicture%2F2017-07-04%2F595bb8ba38d6b.jpeg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008370&di=05e28eaaee801bcbb43f1212f636020c&imgtype=0&src=http%3A%2F%2Fwww.3dmgame.com%2Fuploads%2Fallimg%2F140110%2F153_140110160156_4.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008369&di=07d42b82018c597c92f20a32f54ffd66&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F2033%2Fntk-2033-4469.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008358&di=af02ad5053f0c3bdff832d2f0d78f7a0&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1212%2F2214%2F2214-ntk36035.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008356&di=838d3fab00002e89f731947f4bde01d7&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1207%2F1015%2Fntk123675.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008356&di=e009e6ee4acb68c79d6e5ab28f40e2ba&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1910%2Fntk-1910-28555.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008353&di=48ae779513b739164b4cd8b3797ba51c&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1459%2Fntk-1459-4782.jpg',    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009222&di=55fbd0af6bf7735d378d5c6fe74456a1&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F130126%2F52%2F52-niutuku.com-1499.jpg'];const articles = [];const categorys = [];const tags = [];for (let i = 0; i < 10; i++) {    categorys.push(Mock.mock({        _id: '@increment',        name: '@name'    }));}for (let i = 0; i < 10; i++) {    tags.push(Mock.mock({        _id: '@increment',        name: '@name'    }));}for (let i = 0; i < 10; i++) {    articles.push(Mock.mock({        _id: '@increment',        title: '@ctitle',        title_color: '@color',        author: '@cname',        created_at: '@date("yyyy/MM/dd")',        updated_at: '@date("yyyy/MM/dd")',        'views|30-80': 40,        'praises|30-40': 36,        'comments|3-18': 6,        'cover|1': coverMap,        content: '@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph',        categorys: getRandomArray(categorys),        tags: getRandomArray(tags)    }));}export {    articles, categorys, tags};

具体模块逻辑就可以随自己业务逻辑自由发挥。eg：article.js

import { articles } from './database';// 根据标签获取文章const getArticlesByTags = tags => {    const res = new Set();    articles.forEach(article => {        let i = 0;        tags.forEach(tag => {            if (article.tags.some(e => e._id === +tag)) {                i++;            }        });        if (i === tags.length) {            res.add(article);        }    });    return Array.from(res).sort((a, b) => a.updated_at > b.updated_at ? -1 : 1);};

后记

发现我写文章后记没有一次是正经过。