聲明：
以下為老馬的全棧視頻教程的筆記，如果需要了解詳情，請直接配合視頻學習。視頻全部免費，視頻地址：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 的迭代，其默認值為 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 測試覆蓋率(新版已經改名為nyc)
代碼覆蓋率（code coverage）。它有四個測量維度。
- 行覆蓋率（line coverage）：是否每一行都執行了？
- 函數覆蓋率（function coverage）：是否每個函數都調用了？
- 分支覆蓋率（branch coverage）：是否每個 if 代碼塊都執行了？
- 語句覆蓋率（statement coverage）：是否每個語句都執行了？
nyc 是 JavaScript 程序的代碼覆蓋率工具
安裝
# 全局安裝命令行工具
$ npm i -g nyc
# 本地安裝一下
$ npm i -D nyc
配合 mocha 測試覆蓋率統計
$ nyc mocha
Array
#indexOf()
√ should return -1 when the value is not present
1 passing (8ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|
