声明:
以下为老马的全栈视频教程的笔记,如果需要了解详情,请直接配合视频学习。视频全部免费,视频地址:https://ke.qq.com/course/294595?tuin=1eb4a0a4
nodemon 来进行自动重启 app 应用
$ npm i -g nodemon
# 使用:
nodemon app.js
art-template 模板使用
官网: https://aui.github.io/art-template/zh-cn/index.html
第一步: 引入 art-template 的包
npm install --save art-template
npm install --save express-art-template
第二步:项目中设置 express 的应用 art-template 模板引擎
const art_express = require('express-art-template');
const app = express(); // 创建app对象。 // 设置art的模板引擎 app.engine('art', art_express); app.get('/user/list', (req, res) => { res.render('users/userlist2.art', { title: '你好啊!', users: userService.getUsers() }); });
语法
- 输出标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
- 原始语法
<%= value %>
<%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
模板一级特殊变量可以使用 $data
加下标的方式访问:
{{$data['user list']}}
- 原文输出标准语法
{{@ value }}
原始语法
<%- value %>
原文输出语句不会对 HTML 内容进行转义处理,可能存在安全风险,请谨慎使用。
- 条件标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始语法
<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
- 循环标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %> <% } %>
target
支持 array
与 object
的迭代,其默认值为 $data。$value
与 $index
可以自定义:{{each target val key}}
。变量标准语法
{{set temp = data.sub.content}}
原始语法
<% var temp = data.sub.content; %>
- 模板继承标准语法
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
原始语法
<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例:
<!--layout.art-->
<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> {{block 'head'}} <link rel="stylesheet" href="main.css"> {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html> <!--index.art--> {{extend './layout.art'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}
渲染 index.art 后,将自动应用布局骨架。
- 子模板标准语法
{{include './header.art'}}
{{include './header.art' data}}
原始语法
<% include('./header.art') %>
<% include('./header.art', data) %>
data
数默认值为 $data
;标准语法不支持声明 object
与 array
,只支持引用变量,而原始语法不受限制。art-template
内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。过滤器注册过滤器
template.defaults.imports.dateFormat = function(date, format){/_[code..]_/};
template.defaults.imports.timestamp = function(value){return value \* 1000};
- 过滤器函数第一个参数接受目标值。
标准语法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
{{value | filter}} 过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
原始语法
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>
使用 mock.js 模拟数据
官网地址: http://mockjs.com/
安装:npm install mockjs
// 使用 Mock
var Mock = require('mockjs');
let data = Mock.mock({ "users|33": [{ "id|+1": 20000, "name": "@cname", "email": "@email", "phone": "@natural(132000000,133000000)", "address": "@county(true)", "zip": "@zip", "birthday": "@date('yyyy-MM-dd')" }] }); // 输出结果 console.log(JSON.stringify(data, null, 4));
mocha 帮助我们进行单元测试
安装
$ npm install --global mocha
创建测试文件夹 test 目录,然后添加测试脚本文件
// 引用node的默认的断言库
var assert = require('assert');
// 创建描述场景 describe('Array', function() { // 场景可以进行嵌套 describe('#indexOf()', function() { // 实际的测试用例 it('should return -1 when the value is not present', function() { assert.equal(-1, [1, 2, 3].indexOf(4)); }); }); });
执行测试:
$ mocha
BDD 的 api
行为驱动开发(英语:Behavior-driven development,缩写 BDD)是一种敏捷软件开发的技术,它鼓励软件项目中的开发者、QA 和非技术人员或商业参与者之间的协作。BDD(行为驱动开发 )是第二代的、由外及内的、基于拉(pull)的、多方利益相关者的(stakeholder)、多种可扩展的、高自动化的敏捷方法。它描述了一个交互循环,可以具有带有良好定义的输出(即工作中交付的结果):已测试过的软件。
mocha 默认的测试接口是 bdd 的方式。
- describe():描述场景,在里面可以设定 Context,可包括多个测试用例,也可以嵌套场景
- it():位于场景内,描述测试用例
- before():所有测试用例的统一前置动作
- after():所有测试用例的统一后置动作
- beforeEach():每个测试用例的前置动作
- afterEach():每个测试用例的后置动作
describe('Array', function() {
before(function() { // ... }); describe('#indexOf()', function() { it('should return -1 when not present', function() { [1, 2, 3].indexOf(4).should.equal(-1); }); }); after(function() { // ... }); });
TDD 的 api
TDD,全称 Test-driven Development,中文测试驱动开发,主要方法:先写测试用例(test case),测试用例写好后,再来实现需要实现的方法或功能。
以下是 TDD 的接口列表
-
suite:定义一组测试用例。
-
suiteSetup:此方法会在这个 suite 所有测试用例执行前执行一次,只一次,这是跟 setup 的区别。
-
setup:此方法会在每个测试用例执行前都执行一遍。
-
test:具体执行的测试用例实现代码。
-
teardown:此方法会在每个测试用例执行后都执行一遍,与 setup 相反。
-
suiteTeardown:此方法会在这个 suite 所有测试用例执行后执行一次,与 suiteSetup 相反。
这些接口都是与 TDD 概念中的接口对应与相关实现,方便组织测试用例。BDD 的接口在这里不予赘述,可参考官方文档。
var assert = require('assert');
var mocha = require('mocha'); var suite = mocha.suite; var setup = mocha.setup; var suiteSetup = mocha.suiteSetup; var test = mocha.test; var teardown = mocha.teardown; var suiteTeardown = mocha.suiteTeardown; //test case suite('Array', function() { suiteSetup(function() { //suiteSetup will run only 1 time in suite Array, before all suite //... console.log('suitSetup...'); }); setup(function() { //setup will run 1 time before every suite runs in suite Array //... console.log('setup...'); }); suite('indexOf()', function() { test('should return -1 when not present', function() { assert.equal(-1, [1, 2, 3].indexOf(4)); }); }); suite('indexOf2()', function() { test('should return not -1 when present', function() { assert.equal(0, [1, 2, 3].indexOf(1)); }); }); teardown(function() { //teardown will run 1 time after every suite runs in suite Array //... console.log('teardown...'); }); suiteTeardown(function() { //suiteTeardown will run 1 time in suite Array, after all suits run over. //... console.log('suiteTeardown...'); }); });
should.js 断言库的用法
安装
$ npm install should -P
构建断言对象
should 提供了一个全局方法,构造一个断言对象。
const should = require('should');
var obj = { a: 123 }; should(obj).eqls({ a: 123 }); should(obj).be.a.Object();
另外 should 劫持了 Object 的原型对象,所以所有的对象都拥有了 should 方法。should.js 源码如下:
/**
* Expose api via `Object#should`.
*
* @api public
*/
Object.defineProperty(Object.prototype, 'should', {
set: function() {}, get: function() { return should(this); }, configurable: true });
所以代码中可以直接用 should 方法构建断言对象。
const a = { b: 123 };
a.should.be.a.Object();
a.b.should.above(3);
常用的 api
- eql(别名:eqls) 相等,不严格相等。对象比较属性值,而非地址:
should(3).eql(3)
- notEqual :
should(3).notEqual(45)
- equal (同 Nodejs 的 assert.equal 方法):
should(3).equal(3)
- should.ok(value, [message])
- true([message]):
should(3>1).true()
- containEql(other)
[1, 2, 3].should.containEql(1);
- above() :
(10).should.be.above(0);
- belowOrEqual(n, [description]):
(0).should.be.belowOrEqual(10);
- NaN:
(10).should.not.be.NaN();
- length:
[1, 2].should.have.length(2);
其他
'abca'.should.endWith('a');
'abc'.should.startWith('a');
({ a: 10 }.should.have.value('a', 10)); ({ a: 10 }.should.have.property('a')); 'ab'.should.be.equalOneOf('a', 10, 'ab');
链式调用
should 实现了可以直接链式编程的效果,这些方法内部都是返回断言对象自身,但是语义化却厉害了,其中可以直接应用链式编程的有:['an', 'of', 'a', 'and', 'be', 'has', 'have', 'with', 'is', 'which', 'the', 'it']
应用:
const should = require('should');
describe('#getUsers 测试获取用户所有数据', function() { it('service.getUsers() should be Array', function() { should(service.getUsers()).be.a.Array(); }); it('service.getPageUsers(2, 5) should return Array[]', function() { let data = service.getPageUsers(2, 5); // should(users).be.a.Object(); (data.users.length <= 5).should.be.true(); let returnUser = service.addUser(addUser); returnUser.should.containEql(addUser); returnMsg.should.be.eql({ status: 1, msg: '删除成功' }); service.getUserById(10008).should.be.containEql({ status: 1, msg: 'ok' }); }); });
istanbul 测试覆盖率
代码覆盖率(code coverage
)。它有四个测量维度。
- 行覆盖率(line coverage):是否每一行都执行了?
- 函数覆盖率(function coverage):是否每个函数都调用了?
- 分支覆盖率(branch coverage):是否每个 if 代码块都执行了?
- 语句覆盖率(statement coverage):是否每个语句都执行了?
Istanbul 是 JavaScript 程序的代码覆盖率工具
安装
$ npm install -g istanbul
覆盖率测试 demo
$ istanbul cover simple.js
===== Coverage summary =====
Statements : 75% ( 3/4 )
Branches : 50% ( 1/2 )
Functions : 100% ( 0/0 )
Lines : 75% ( 3/4 )
=============================
这条命令同时还生成了一个 coverage
子目录,其中的 coverage.json
文件包含覆盖率的原始数据,coverage/lcov-report
是可以在浏览器打开的覆盖率报告,其中有详细信息,到底哪些代码没有覆盖到。
配合 mocha 测试覆盖率统计
$ istanbul cover _mocha
上面命令中,istanbul cover 命令后面跟的是 _mocha 命令,前面的下划线是不能省略的。因为,mocha 和 _mocha 是两个不同的命令,前者会新建一个进程执行测试,而后者是在当前进程(即 istanbul 所在的进程)执行测试,只有这样, istanbul 才会捕捉到覆盖率数据。其他测试框架也是如此,必须在同一个进程执行测试。
如果要向 mocha 传入参数,可以写成下面的样子。
$ istanbul cover _mocha -- tests/test.sqrt.js -R spec
上面命令中,两根连词线后面的部分,都会被当作参数传入 Mocha 。如果不加那两根连词线,它们就会被当作 istanbul 的参数