nodejs学习笔记-01

Node.js 基础

1. Node开发概述

1.1 为什么要学习服务器端开发基础

  • 能够和后端程序员更加紧密的配合
  • 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)
  • 扩宽知识视野,能够站在更高的角度审视整个项目

1.2 服务器端开发要做的事情

  • 实现网站的业务逻辑
  • 数据的增删改查

1.3 为什么选择Node

  • 使用JavaScript语法开发后端应用
  • 一些公司要求前端工程师掌握Node开发
  • 生态系统活跃,有大量开源库可以使用
  • 前端开发工具大多基于Node开发

1.4 Node是什么

  • Node是一个基于Chrome V8引擎的JavaScript代码运行环境

2. Node运行环境搭建

官网:https://nodejs.org/en/

  • LTS = Long Term Support 长期支持版 稳定版
  • Current 拥有最新特性 实验版

默认安装即可,安装地址可更改,例如D:nodejs/

在命令行中执行node -v,显示版本,就说明安装成功

3. Node.js快速入门

3.1 Node.js 的组成

  • JavaScript 由三部分组成,ECMAScriptDOMBOM。
  • Node.js是由ECMAScriptNode 环境提供的一些附加API组成的,包括文件、网络、路径等等一些更加强大的 API。

3.2 Node.js 基础语法

  • 所有ECMAScript语法在Node环境中都可以使用。
  • 在Node环境下执行代码,使用Node命令执行后缀为.js的文件即可

例如,在命令行中执行text.js文件 node text.js

  • 在命令行,首先进入到被执行文件所在目录
  • 使用 “node 文件名.js” 来执行文件
  • js文件名可输入部分,按tab键即可自动补全
  • 若想重复执行文件,可按键盘上的上键,即可执行上次执行的文件
  • clear命令可以清空命令行窗口
  • 文件所在文件夹,shift加鼠标右键,可打开命令行

3.3 Node.js全局对象global

  • 浏览器中全局对象是window,在Node中全局对象是global
  • Node中全局对象下有以下方法,可以在任何地方使用,global可以省略。
    • console.log() 在控制台中输出
    • setTimeout() 设置超时定时器
    • clearTimeout() 清除超时时定时器
    • setInterval() 设置间歇定时器
    • clearInterval() 清除间歇定时器

4. Node.js模块化开发

4.1 Node.js中模块化开发规范

  • Node.js规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到
  • 模块内部可以使用exports对象进行成员导出,使用require方法导入其他模块。

4.2 模块成员的导入与导出

  • 第一步(导出):exports.自定义属性名(exports对象的属性名) = 上面定义好的(要导出的)
  • 第二步(导入):require(要接收的),返回值,是a模块中的exports对象
  • 导入模块时后缀可以省略,例如 require(./a)
// a.js
// 在模块内部定义变量
let version = 1.0;
// 在模块内部定义方法
const sayHi = name => `您好, ${
       name}`;
// 向模块外部导出数据 
exports.version = version;
exports.sayHi = sayHi;
// b.js
// 在b.js模块中导入模块a
let a = require('./b.js');
// 输出b模块中的version变量
console.log(a.version);
// 调用b模块中的sayHi方法 并输出其返回值
console.log(a.sayHi('黑马讲师')); 

第二种导出方法,module.exports对象

module.exports.version = version;
module.exports.sayHi = sayHi;

区别:

exports是module.exports的别名**(地址引用关系)**,导出对象最终以module.exports为准

const greeting = name => `hello ${
       name}`;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;//此时两种方式指向同一个对象

// 当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准 此时exports指向无效
module.exports = {
     
	name: 'zhangsan'
}
exports = {
     
	age: 20
}
const a = require('./04.module.exports.js');
// console.log(a.greeting('zhangsan'));//结果包含x和greeting
console.log(a);//结果是name:'zhangsan'

5. 系统模块

5.1 什么是系统模块

Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块

例如,文件模块fs(file system)

5.2 系统模块fs文件操作

读取文件内容语法

  • fs.readFile(‘文件路径/文件名称’, [文件编码], callback);
  • 上述语法中 [] 指可选
  • 回调函数的第一个参数都是err
// 1.通过模块的名字fs对模块进行引用
const fs = require('fs');

// 2.通过模块内部的readFile读取文件内容
fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
     
	// 如果文件读取出错err 是一个对象 包含错误信息
	// 如果文件读取正确 err是 null
	// doc 是文件读取的结果
	console.log(err);
	console.log(doc);
});

写入文件内容

  • fs.writeFile(‘文件路径/文件名称’,‘数据’,callback);
  • 写入文件不存在,则自动创建
const fs = require('fs');

fs.writeFile('./demo.txt', '即将要写入的内容', err => {
     
	if (err != null) {
     
		console.log(err);
		return;
	}

	console.log('文件内容写入成功');
})

5.3 系统模块 path 路径操作

为什么要进行路径拼接

  • 不同操作系统的路径分隔符不统一
  • Windows 上是 \ /
  • Linux 上是 /

路径拼接语法

  • path.join(‘路径’,‘路径’, …)
  // 导入path模块
 const path = require('path');
  // 路径拼接
 let finialPath = path.join('itcast', 'a', 'b', 'c.css');
  // 输出结果 itcast\a\b\c.css
 console.log(finialPath);

5.4 相对路径 和 绝对路径

  • 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录
  • 在读取文件或者设置文件路径时都会选择绝对路径
  • 使用__dirname获取当前文件所在的绝对路径
  • 然后使用 path.join(__dirname, ‘01.helloworld.js’);进行拼接就得到了绝对路径
  • 注:require()相对的是当前文件
const fs = require('fs');
const path = require('path');

console.log(__dirname);
console.log(path.join(__dirname, '01.helloworld.js'))

fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
     
	console.log(err)
	console.log(doc)
});

6. 第三方模块

6.1 什么是第三方模块

  • 别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名

第三方模块有两种存在形式

  • 以js文件的形式存在,提供实现项目具体功能的API接口。

  • 以命令行工具形式存在,辅助项目开发

6.2 获取第三方模块

  • npmjs.com:第三方模块的存储和分发仓库

  • npm (node package manager) : node的第三方模块管理工具

    • 下载:npm install 模块名称
    • 卸载:npm uninstall package 模块名称

注:默认下载到命令行当前目录下,会有一个名为node_modules文件夹,存放下载的模块;还有一个 package-lock.json文件

全局安装与本地安装

  • 命令行工具:全局安装
  • 库文件:本地安装

6.3 第三方模块 nodemon

  • nodemon是一个命令行工具,用以辅助项目开发。

  • 在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。

  • 作用:监控文件的保存操作,当文件被保存时,自动执行该文件

  • 注: CTRL + C 键,中止操作

使用步骤

1.使用npm install nodemon –g 下载它

2.在命令行工具中用nodemon命令替代node命令执行文件

6.4 第三方模块 nrm

  • nrm ( npm registry manager ):npm下载地址切换工具

  • npm默认的下载地址在国外,国内下载速度慢

使用步骤

1.使用npm install nrm –g 下载它

2.查询可用下载地址列表 nrm ls

3.切换npm下载地址 nrm use 下载地址名称

6.5 第三方模块 Gulp

  • 基于node平台开发的前端构建工具

  • 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了

  • 用机器代替手工,提高开发效率

6.6 Gulp能做什么

  • 项目上线,HTML、CSS、JS文件压缩合并
  • 语法转换(es6、less …)
  • 公共文件抽离
  • 修改文件浏览器自动刷新

6.7 Gulp使用

1.使用npm install gulp下载gulp库文件

2.在项目根目录下建立gulpfile.js文件

3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件

4.在gulpfile.js文件中编写任务.

5.在命令行工具中执行gulp任务

6.8 Gulp中提供的方法

  • gulp.src():获取任务要处理的文件

  • gulp.dest():输出文件,自动创建

  • gulp.task():建立gulp任务,第一个参数任务名(自定义),第二个参数回调函数

  • gulp.watch():监控文件的变化

 const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => {
     
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

注:

  • .pipe()中放置处理的代码
  • npm install gulp-cli -g ,作用:可以执行gulp中的任务
  • 下载好之后,在命令行中用 gulp 任务名 即可

6.9 Gulp插件

使用步骤:下载–引入–使用(查api)

  • gulp-htmlmin :html文件压缩
  • gulp-csso :压缩css
  • gulp-babel :JavaScript语法转化
  • gulp-less: less语法转化
  • gulp-uglify :压缩混淆JavaScript
  • gulp-file-include 公共文件包含
    • 注:该模块使用步骤
    • 引入–公共文件提取(例如将html中header部分剪切出来,放在新建common文件夹下header.html,然后在原来的位置写上@@include('./common/header.html'),此时执行任务即可)
  • browsersync 浏览器实时同步
// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
     
	console.log('我们人生中的第一个gulp任务执行了');
	// 1.使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
});

// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
     
	// 获取所有html文件
    gulp.src('./src/*.html')
		// 抽取html文件中的公共代码
        .pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({
      collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});

// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
     
	// 选择css目录下的所有less文件以及css文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		// 将less语法转换为css语法
		.pipe(less())
		// 将css代码进行压缩
		.pipe(csso())
		// 将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))
});

// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
     
	gulp.src('./src/js/*.js')
		.pipe(babel({
     
			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

// 复制文件夹
gulp.task('copy', () => {
     

	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));

	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});

// 构建任务,此时执行default,就可以依次执行多个任务
// 也可直接gulp,默认会去找default
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

7. package.json文件

7.1 node_modules文件夹的问题

1.文件夹以及文件过多过碎,当我们将项目整体拷贝给别人的时候,,传输速度会很慢很慢.

2.复杂的模块依赖关系需要被记录,确保模块的版本和当前保持一致,否则会导致当前项目运行报错

7.2 package.json文件的作用

项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。

使用npm init -y命令生成。里面的选项都采用默认值

注:放在根目录

  • name:项目名称
  • version:项目版本
  • description:项目描述
  • main:项目的主入口文件,主模块
  • scripts:存储命令的别名,可使用命令的别名执行
    • 例如,“build”:“nodemon app.js”,此时去命令行执行 npm run build
  • keywords:关键字描述项目
  • author:作者
  • license:项目遵循的协议,ISC,开放源代码协议
  • dependencies:模块,注:直接npm install,会根据这个下载所需模块

7.3 项目依赖

  • 在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖
  • 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中
{
    "dependencies": {
        "jquery": "^3.3.1“
    }
 } 

7.4 开发依赖

  • 在项目的开发阶段需要依赖,线上运营阶段不需要依赖的第三方包,称为开发依赖
  • 使用npm install 包名 –save-dev命令将包添加到package.json文件的devDependencies字段中
{
     
    "devDependencies": {
     
        "gulp": "^3.9.1}
 } 

注:npm install 会下载所有包,npm install --production 只下载项目依赖的包

7.5 package-lock.json文件的作用

  • 锁定包的版本,确保再次下载时不会因为包版本不同而产生问题
  • 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作

8. Node.js中模块的加载机制

8.1 模块查找规则-当模块拥有路径但没有后缀时

require('./find.js');
require('./find');

1.require方法根据模块路径查找模块,如果是完整路径,直接引入模块。

2.如果模块后缀省略,先找同名JS文件再找同名JS文件夹

3.如果找到了同名文件夹,找文件夹中的index.js

4.如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件

5.如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有被找到

8.2 模块查找规则-当模块没有路径且没有后缀时

require('find');

1.Node.js会假设它是系统模块

2.Node.js会去node_modules文件夹中

3.首先看是否有该名字的JS文件

4.再看是否有该名字的文件夹

5.如果是文件夹看里面是否有index.js

6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件

7.否则找不到报错

你可能感兴趣的:(nodejs学习笔记-01)