mock.js 的介绍与使用

JavaScript012

mock.js 的介绍与使用,第1张

Mock.js (官网地址:http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端工程师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求,生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

1.安装mock

2.在src下新建一个mock文件 引入mock.js

3.在页面中发送请求

4.在mock文件夹下的index.js中设置mock数据,并拦截请求,将假数据传入页面

1.属性值是字符串

'name|min-max': string

通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。

'name|count': string

通过重复 string 生成一个字符串,重复次数等于 count。

2.属性值是数字

name|+1': number

属性值自动加 1,初始值为 number。

’name|min-max': number

生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number

生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位。

3.属性值是布尔类型

'name|1': boolean

随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。

4.属性值是数组

'name|1': array

从属性值 array 中随机选取 1 个元素,作为最终值。

'name|+1': array

从属性值 array 中顺序选取 1 个元素,作为最终值。

'name|min-max': array

通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

'name|count': array

通过重复属性值 array 生成一个新数组,重复次数为 count。

iterator(迭代)一般很少直接使用, 但是却是很常用很重要的功能.

例如 :

对象的扩展运算符(...)内部其实是调用了 Iterator 接口。

在es6 中统一了遍历的接口 Iterator,Iterator 接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环。

字符串也可以使用扩展运算符

rest运算符, 与扩展运算符是逆运算

扩展运算符:数组=>分割序列

rest运算符:分割序列=>数组

rest可以代替arguments变量

回到主题, 迭代

Symbol.iterator 为每一个对象定义了默认的迭代器。

当需要对一个对象进行迭代时(比如开始用于一个 for..of 循环中),它的 @@iterator 方法都会在不传参情况下被调用,返回的 迭代器 用于获取要迭代的值。

一些内置类型拥有默认的迭代器行为,其他类型(如 Object )则没有。下表中的内置类型拥有默认的 @@iterator 方法:

更多信息请参见 迭代协议 。

js中对象分为可迭代和不可迭代 如果是可迭代哪它就会有一个[Symbol.iterator] 函数

这个函数就是对象的迭代器函数,如用for of 如果遍历的对象没有这个迭代方法那么就会报错.

for of 传入的是可迭代对象,但是如何吧一个不可迭代的对象变为可迭代的对象呢!很简单就是自己写一个[Symbol.iterator]函数。

你以为迭代就这么简单的结束了吗?现在再讲一个新东西 yield

. yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。

. yield关键字实际返回一个IteratorResult(迭代器)对象,它有两个属性,value和done,分别代表返回值和是否完成。

. yield无法单独工作,需要配合generator(生成器)的其他函数,如next,懒汉式操作,展现强大的主动控制特性。

yield 自定义一个迭代器

function* () {} 这种函数名字叫 generator函数, 生成器函数, 下一篇再重点讲这个哈.

一、说一下

首先保证node环境已经安装完毕,npm能正常使用,安装可自行百度,比较简单,在此不做赘述。

node是否安装成功

express是否安装成功

二、直接开码

安装

注释:

express:安装express框架

express-generator:安装express生成器,可快速生成一个应用的骨架

-g:全局安装

注释:

-e:简写,全称为 --view=ejs ,安装ejs模板引擎

myapp:项目名称,自定义即可

生成如下目录结构

注释:

bin:存放启动脚本文件

bin/www:启动脚本文件,可修改端口号,等功能。

public:存放图片,css,js等静态文件

routes:存放路由模块文件

views:存放视图文件,使用的ejs模板引擎

app.js:入口文件,重要的配置文件

package.json:工程信息和安装依赖文件

跟着提示执行下列语句

注释:

cd myapp:进入myapp文件夹,文件名需修改成自己的项目文件名

npm install:安装所有依赖模块,常用的非指定性npm安装命令

npm start:运行项目

(bin/www)