Node.js包教不包会|实验代码+运行结果

课程来源:https://www.shiyanlou.com/courses/493【@实验楼】

第1节 一个最简单的 express 应用

1.1 新建lesson1,进去里面安装express

1.2 新建app.js

app.js 代码

1.3 运行app.js,打开浏览器,输入http://localhost:3000/

浏览器结果

第2节 学习使用外部模块

2.1 新建lesson1,并生成一份它的 package.json。

package.json

2.2 安装依赖, express 和 utility 两个模块

package.json添加了依赖信息

2.3 新建app.js

app.js 代码

2.4 运行app.js,在浏览器输入http://localhost:3000/?q=alsotang

浏览器结果

第3节 使用 superagent 与 cheerio 完成简单爬虫

3.1 新建文件夹,进去之后 npm init

新建lesson3文件夹并进入
新建package.json

3.2 安装依赖:express,superagent,cheerio

3.3 写应用逻辑

新建app.js
app.js 代码

3.4 运行及结果

运行app.js
浏览器运行结果

第4节 使用 eventproxy 控制并发

4.1 获取主页

4.1.1 新建文件夹,进去之后 npm init

4.1.2 安装依赖:express,superagent,cheerio

4.1.3 写应用逻辑

新建 app.js
app.js 代码

4.1.4 运行及结果

获取的链接(部分截图)

4.2 eventproxy介绍

4.2.1 不使用 eventproxy 也不使用计数器

// 参考 jquery 的 $.get 的方法
$.get("http://data1_source", function (data1) {
  // something
  $.get("http://data2_source", function (data2) {
    // something
    $.get("http://data3_source", function (data3) {
      // something
      var html = fuck(data1, data2, data3);
      render(html);
    });
  });
});

4.2.2 使用计数器

(function () {
  var count = 0;
  var result = {};

  $.get('http://data1_source', function (data) {
    result.data1 = data;
    count++;
    handle();
    });
  $.get('http://data2_source', function (data) {
    result.data2 = data;
    count++;
    handle();
    });
  $.get('http://data3_source', function (data) {
    result.data3 = data;
    count++;
    handle();
    });

  function handle() {
    if (count === 3) {
      var html = fuck(result.data1, result.data2, result.data3);
      render(html);
    }
  }
})();

4.2.3 使用eventproxy

var ep = new eventproxy();
ep.all('data1_event', 'data2_event', 'data3_event', function (data1, data2, data3) {
  var html = fuck(data1, data2, data3);
  render(html);
});

$.get('http://data1_source', function (data) {
  ep.emit('data1_event', data);
  });

$.get('http://data2_source', function (data) {
  ep.emit('data2_event', data);
  });

$.get('http://data3_source', function (data) {
  ep.emit('data3_event', data);
  });

eventproxy 提供了不少其他场景所需的 API,但最最常用的用法就是以上的这种,即:

  • 先 var ep = new eventproxy(); 得到一个 eventproxy 实例。
  • 告诉它你要监听哪些事件,并给它一个回调函数。
    ep.all('event1', 'event2', function (result1, result2) {})。
  • 在适当的时候 ep.emit('event_name', eventData)。

4.3 抓取每条url的内容

完整代码如下:

var eventproxy = require('eventproxy');
var superagent = require('superagent');
var cheerio = require('cheerio');
var url = require('url');

var cnodeUrl = 'https://cnodejs.org/';

superagent.get(cnodeUrl)
  .end(function (err, res) {
    if (err) {
      return console.error(err);
    }
    var topicUrls = [];
    var $ = cheerio.load(res.text);
    $('#topic_list .topic_title').each(function (idx, element) {
      var $element = $(element);
      var href = url.resolve(cnodeUrl, $element.attr('href'));
      topicUrls.push(href);
    });

    var ep = new eventproxy();

    ep.after('topic_html', topicUrls.length, function (topics) {
      topics = topics.map(function (topicPair) {
        var topicUrl = topicPair[0];
        var topicHtml = topicPair[1];
        var $ = cheerio.load(topicHtml);
        return ({
          title: $('.topic_full_title').text().trim(),
          href: topicUrl,
          comment1: $('.reply_content').eq(0).text().trim(),
        });
      });

      console.log('final:');
      console.log(topics);
    });

    topicUrls.forEach(function (topicUrl) {
      superagent.get(topicUrl)
        .end(function (err, res) {
          console.log('fetch ' + topicUrl + ' successful');
          ep.emit('topic_html', [topicUrl, res.text]);
        });
    });
  });
运行结果(部分截图)

第5节 使用 async 控制并发

5.1 准备工作

  • mkdir lesson5 && cd lesson5
  • npm init
  • npm install --save async
  • touch app.js

5.2 app.js 代码如下

5.3 运行及结果

结果 部分截图1
结果 部分截图2

第6节 测试用例:mocha,should,istanbul

6.1 编写测试用例

6.1.1 准备工作

6.1.2 编写测试用例

新建 main.js
main.js 代码

6.1.3 运行及结果

符合预期

6.2 执行测试

6.2.1 修改main.js,暴露 fibonacci

在末尾加这句

6.2.2 准备工作

安装依赖:should
新建test文件夹及test.main.js

6.2.3 main.test.js 代码

安装mocha

6.2.4 运行及结果

安装 mocha
在lesson6目录下运行测试文件
运行结果:测试通过

6.2.4 增加测试,修改main.test.js,并运行

main.test.js
运行结果:有3个没通过

6.2.5 根据报错更新main.js,使测试全部通过

更新fibonacci
运行结果:全部通过

以上过程为TDD(测试驱动开发):先把要达到的目的都描述清楚,然后让现有的程序跑不过 case,再修补程序,让 case 通过。

6.3 使用isbantul(代码覆盖率)

  • 行覆盖率(line coverage):是否每一行都执行了?
  • 函数覆盖率(function coverage):是否每个函数都调用了?
  • 分支覆盖率(branch coverage):是否每个if代码块都执行了?
  • 语句覆盖率(statement coverage):是否每个语句都执行了?

6.3.1 准备工作

  • subo npm install --global mocha
  • sudo npm install --save-dev mocha
  • sudo nom i istanbul -g
  • istanbul cover _mocha

6.3.2 运行结果


第7节 浏览器端测试:mocha,chai,phantomjs

7.1 浏览器环境执行

7.1.1 准备工作

  • mkdir lesson7 && cd lesson7
  • mkdir vendor && cd vendor
  • npm i -g mocha # 安装全局的 mocha 命令行工具
  • mocha init . # 生成脚手架
测试原型目录结构

7.1.2 在index.html插入如下代码

7.1.3 在test.js输入如下代码

7.1.4 打开index.html,结果如下

7.2 命令行环境执行

7.2.1 安装 mocha-phantomjs

  • sudo npm i -g mocha-phantomjs

7.2.2 index.html增加如下代码

7.2.3 运行

报错,不知道是什么原因??


第8节 测试用例:supertest

8.1 准备工作

8.2 编写app.js

8.3 编写test/app.test.js

8.4 运行及结果

--

第9节 正则表达式

  • i :不区分大小写
  • g:匹配多个
  • m :^ 和 $ 可以匹配每一行的开头。
  • 加 g 会返回数组,不加 g 则返回比较详细的信息
  • 加 g 之后,如果你的正则不是字面量的正则,而是存储在变量中的话,这个变量就会变得有记忆
  • [\s\S],[^]:能匹配包括 \n 在内的所有字符

第10节 benchmark 怎么写(测试性能)

  • mkdir lesson10 && cd lesson10
  • npm init
  • npm install benchmark --save
  • touch main.js

第11节 作用域与闭包

11.1 var作用域

  • 内部函数可以访问外部函数的变量,外部不能访问内部函数的变量。
ex1.js
运行及结果

内部函数child可以访问变量age,而外部函数parent不可以访问child中的变量childAge,因此会抛出没有定义变量的异常。

  • 如果忘记var,那么变量就被声明为全局变量了。
ex2.js
运行及结果
  • JavaScript 中,变量的局部作用域是函数级别的。不同于 C 语言,在 C 语言中,作用域是块级别的。
ex3.js
运行及结果

11.2 闭包

ex4.js
运行及结果
  • 闭包的一个坑
ex5.js
运行及结果
  • 上面这个代码块打印五个 5:setTimeout 中的 i 是对外层 i 的引用。当 setTimeout 的代码被解释的时候,运行时只是记录了 i 的引用,而不是值。而当 setTimeout 被触发时,五个 setTimeout 中的 i 同时被取值,由于它们都指向了外层的同一个 i,而那个 i 的值在迭代完成时为 5,所以打印了五次 5。
  • 下面这个代码块打印0-4:把 i 赋值成一个局部的变量,从而摆脱外层迭代的影响。

11.3 this

  • 函数有所属对象时:指向所属对象
ex6.js
运行及结果
  • 函数没有所属对象:指向全局对象
ex7.js
运行及结果
运行及结果(接上)
  • 构造器中的 this:指向新对象
ex8.js
运行及结果
  • apply 和 call 调用以及 bind 绑定:指向绑定的对象
ex9.js
运行及结果
运行及结果(接上)

第13节 持续集成平台:travis

13.1 注册travis账号

https://travis-ci.org/

我直接关联了自己的github账号

13.2 选择自己需要测试的仓库

仓库主目录结构
test目录结构

13.3 写.travis.yml

13.4 运行及结果

当 .travis.yml 完成后,travis自动被触发

点击查看结果
详细结果


第15节 Mongodb 与 Mongoose 的使用

15.1 安装mongodb

15.2 使用mongodb和mongoose模块

  • mkdir lesson15 && cd lesson15
  • touch test_db.js
  • npm install mongoose
test_db.js 代码
  • node test_db.js
添加成功
  • mongod
  • 在另一个终端输入 mongo
数据库结果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容