前端 ----Node

1.node是什么？
　　Node是一个基于chrome V8引擎的JavaScript代码运行环境
　　--浏览器（软件）能够运行Javascript代码，浏览器就是JavaScript代码的运行环境
　　--Node（软件）能够运行Javascript代码，Node就是JavaScript代码的运行环境
　　LTS =Long time support 长期支持稳定版，Current 拥有最新特性的实验版

　　Node.js-------> ECMAscrip 和Node模块API组成，所以ECMAscript语法都能使用

2.Node.js的模块化开发
　　-Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
　　-模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块
　　-也可以使用module.exports,默认指向的是同一个地址，如果地址改变，最终结果以module.exports为准

　　·模块成员导出----------------------->module.exports=导出变量 导入方需要用一个变量去得到他----> const 变量 = require('路径')

// 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('黑马讲师'));

3.相对路径和绝对路径
　　相对路径是相对于node的不是所写代码的，可以用__dirname获得当前代码的所在路径，而代码中的require方法中的相对路径是相对于代码文件夹的所以可以直接写相对路径

4.第三方模块安装

修改镜像下载地址：
安装nrm：npm install -g nrm
查看地址：nrm ls
更改地址：nrm use ****

-本地安装 npm install(unstall) 模块名
-全局安装 npm install(unstall) 模块名 -g

　　模块：
　　　　1.nodemon，但文件进行保存操作时会自动执行该文件，这样就不用在修改文件后重新自己执行，直接刷新就能看到效果
　　　　2.nrm,修改通过npm下载的地址

　　　　3.Gulp，基于node平台开发的前端构建工具，讲机械化操作编写成任务，但需要进行操作时执行一个命令就好了

·使用npm install gulp 下载 (不需要全局安装)
·在项目根目录下建立gulpfile.js文件
·重构项目的文件夹结构src目录放置源代码文件，dist目录放置构建后的文件
·在gulpfile,js文件中编写任务
·在命令行工具中执行gulp任务
Gulp中提供的方法，想要进行更多操作就要使用Gulp插件（npm下载插件，引用插件，调用插件）
1.gulp.src(): 获取任务要处理的文件
2.gulp.dest():    输出文件
3.gulp.task():    建立gulp任务
4.gulp.watch():    监控文件变化

·gulp插件

gulp-htmlmin ：html文件压缩
gulp-csso ：压缩css
gulp-babel ：JavaScript语法转化
gulp-less: less语法转化
gulp-uglify ：压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync 浏览器实时同步

 

　　4.node_modules文件夹的问题
　　　　1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.
　　　　2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错

　　　　--所以我们可以直接把package.json给别人
　　5.package.json
　　　　可以使用npm install 就可以把package.json所有模块安装

　　　　package.json项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
　　　　使用npm init -y命令生成。
　　　　分为项目依赖（dependencies）和开发依赖（devDependencies）
　　　　作用：
　　　　　　锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
　　　　　　加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

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

--require('./find.js');
--require('./find');
1.require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
2.如果模块后缀省略，先找同名JS文件再找同名JS文件夹
3.如果找到了同名文件夹，找文件夹中的index.js
4.如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
5.如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到

 

 

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

--require('find');
1.Node.js会假设它是系统模块
2.Node.js会去node_modules文件夹中
3.首先看是否有该名字的JS文件
4.再看是否有该名字的文件夹
5.如果是文件夹看里面是否有index.js
6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7.否则找不到报错

 

 

Gulp不止提供了库文件还提供了命令行工具，这样就可以通过命令行工具执行gulpfile.js下的任务了（ gulp 任务名）

旧：

gulp.task('htmlmin',()=>{
gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist/css/new css'));

});    
ERRO:[09:52:58] The following tasks did not complete: htmlmin
[09:52:58] Did you forget to signal async completion?

 

现在：

gulp.task('htmlmin',()=>{
return gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist/css/new css'));

});

 

OR

gulp.task('htmlmin',(cb)=>{
return gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist/css/new css'));
(cb);

});

 

5.同步API和异步API
　　1.同步API：只有当前API执行完成后，才能继续执行下一个API
　　　　console.log('before');
　　　　console.log('after');
　　2.异步API：当前API的执行不会阻塞后续代码的执行
　　　　console.log('before');
　　　　setTimeout(
　　　　() => { console.log('last');
　　　　}, 2000);
　　　　console.log('after');

区别：
　　1.·同步API可以从返回值拿到API执行的结果，但异步API不可以
　　代码执行时先将同步代码执行再将异步代码执行

 

// 同步
function sum (n1, n2) { 
    return n1 + n2;
} 
const result = sum (10, 20);

// 异步
function getMsg () { 
    setTimeout(function () { 
    return { msg: 'Hello Node.js' }
    }, 2000);
}
const msg = getMsg ();//undefind------------结果为undefind

 

--异步函数只能通过使用回调函数来获取异步API执行结果

function getMsg (callback) {
    setTimeout(function () {
    callback ({ msg: 'Hello Node.js' })
    }, 2000);
}
getMsg (function (msg) { 
    console.log(msg);
});

 

　　2.同步API, 异步API的区别（代码执行顺序）
　　　　-同步API从上到下依次执行，前面代码会阻塞后面代码的执行

for (var i = 0; i < 100000; i++) { 
    console.log(i);
}
console.log('for循环后面的代码');

 

　　　　-异步API不会等待API执行完成后再向下执行代码

console.log('代码开始执行'); 
setTimeout(() => { console.log('2秒后执行的代码')}, 2000);
setTimeout(() => { console.log('"0秒"后执行的代码')}, 0); 
console.log('代码结束执行');

 

执行顺序：
　　同步代码执行区-->异步代码执行区-->回调函数队列-->同步代码执行区

6. 异步函数
　　异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。

const fn = async () => {};
async function fn () {}
1. 普通函数定义前加async关键字 普通函数变成异步函数
2. 异步函数默认返回promise对象
3. 在异步函数内部使用return关键字进行结果返回 结果会被包裹的promise对象中 return关键字代替了resolve方法
4. 在异步函数内部使用throw关键字抛出程序异常
5. 调用异步函数再链式调用then方法获取异步函数执行结果
6. 调用异步函数再链式调用catch方法获取异步函数执行的错误信息

·await关键字
1. await关键字只能出现在异步函数中
2. await promise await后面只能写promise对象 写其他类型的API是不不可以的
3. await关键字可是暂停异步函数向下执行 直到promise返回结果

示例：

const fs =require('fs')
const promisify = require('util').promisify
const readFile = promisify(fs.readFile)

async function run(argument) {
    // body...
    let r1 = await readFile('./1.txt','utf8');
    let r2 = await readFile('./2.txt','utf8');
    let r3 = await readFile('./3.txt','utf8');
    console.log(r1);
    console.log(r2);
    console.log(r3);
}

run();