Node.Js&ES6

作者: AIGame孑小白 | 来源:发表于2021-06-12 13:58 被阅读0次

001.Node.Js的安装

首先打开官方网址：Node.js官网

点击STL的稳定版本下载，然后双击安装，直接下一步默认即可。

然后打开dos输入node -v回车，校验一下版本号：

说明已经安装完成。

002.模块化编程

首先我们在桌面上创建一个Node文件夹：

里面再创建一个edu01.js的文件使用VSCode打开编辑，我们就编写一个简单的模块吧。

exports.add = function(number1,number2){
    console.log("执行了加法模块");
    return number1+number2;
}

然后创建调用模块.js文件：

var Math = require("./edu01.js");
console.log("实现加法:5+6="+Math.add(5,6));

然后使用dos命令行运行：

003.创建Node.js的Web服务器

//引入内置的http模块
var http = require("http");
//创建并监听Web服务器
http.createServer(function(request,response){
    //http头部
    //参数1：响应状态码
    //参数2：Content-Type
    response.writeHead(200,{"Content-Type":"text/plain"});
    //发送简单的响应数据
    response.end("hellow world!\n");
}).listen(8888);
console.log("Node.js的Web服务器就运行在：Http://localhost:8888/");

然后我们打开浏览器访问：http://localhost:8888/

004.获取请求参数并且输出

var http = require("http");//创建服务器
var url = require("url");//解析路径
http.createServer(function(request,response){
    //http头部：参数1：响应状态码、参数2：Content-Type
    response.writeHead(200,{"Content-Type":"text/plain;charset=utf-8"});
    //解析请求地址：参数1：请求地址、参数2：使用query解析参数:true解析到对象中，默认是false
    var params = url.parse(request.url,true).query;
    for(var key in params){
        response.write("KEY:"+key+";VALUE:"+params[key]+"\n");
    };
    //发送简单的响应数据
    response.end("");
}).listen(8888);
console.log("Node.js的Web服务器就运行在：Http://localhost:8888/");

然后在dos中启动服务器，然后去浏览器访问：

005. NPM

Node.js默认是集成了npm的，所以我们打开dos直接输入npm -v的指令即可查看版本号信息。

然后我们切换到自己的项目目录下，使用npm init初始化一下自己创建的工程。

输入相关信息后回车即可：

然后我们打开自己的项目路径就会生成一个package.json的文件：

然后以管理员身份打开命令窗口：

然后输入npm install express

回车后即可将版本库下载到本地的工程。我们打开自己的工程目录：

会发现多出来两个文件，我们可以在上面的文件夹中找到我们安装的express模块。

在json文件中可以查询版本号。那么我们可以把版本号写入我们自己项目的依赖中：

这个依赖文件的好处就是：当我们的module不慎删除了，那么我们可以使用npm通过这个文件恢复项目包，使用npm install命令即可。

006.安装到ROOT

我们可以使用npm root -g查看全局目录：

说明我们如果把版本库安装到全局目录下，所在的全局目录就在这里。比如我们安装一个JQuery：

007.切换镜像

其实切换镜像可以增加下载速度。

使用npm install nrm -g安装nrm
安装cnpm(使用淘宝镜像)
首先说一下安装nrm：

安装完成后，我们可以使用nrm ls查看镜像列表：

如果你的安装有问题，可以参考我的这个连接：
Node.Js使用npm安装nrm报错？

安装成功以后，使用nrm use taobao切换镜像：

淘宝镜像的安装速度比较快一点。

然后我说一下第二种方式
使用npm install -g cnpm --registry=http://registry.npm.taobao.org安装cnpm：

安装完成后可以使用cnpm -v查看版本信息：

那么对于这种方式：以后我们只需要把npm换成cnpm的命令就行了，例如cnpm install nrm -g。但是一般只有在下载模块的时候才使用cmpn的方式，其他的我们还是使用mpn的方式即可。

008.WebPack

npm install webpack -g安装WebPack
npm install webpack-cli -g安装WebPack脚手架

安装完成后可以使用webpack -v验证安装信息：

接下来介绍一下WebPack：相当于把多个静态资源打包为一个js文件。

009.使用webpack打包js

webpack用起来就像是把你写过的模块在一个入口文件中调用，然后webpack会把这些你调用的模块都打包生成一个压缩版的js文件，接着就可以在html中调用这个js文件。
比如我先写两个模块：
Print.js文件：

module.exports = function(str){
    console.log(str);//测试调用
    document.write(str);
}

Math.js文件：

exports.add = function(a,b){
    return a+b;
}

然后编写一个入口文件main.js调用前两个模块：

var print = require("./Print");
var Math = require("./Math");
print("打印结果:"+Math.add(13,15));

然后我们就可以使用webpack通过这个入口文件打包js文件啦，但是我们需要给定webpack.config.xml的配置文件：

var path = require("path");
module.exports = {
    //入口文件
    entry:"./main.js",
    output:{
        //__dirname是nodejs的全局变量，获得当前文件所在的目录的完整目录
        //dist是生成的js文件放在哪
        path: path.resolve(__dirname,"./dist"),
        //取一个名字(随便取)
        filename: "bundle.js"
    }
}

具体的细节都在源码注释里面啦，接着打开当前目录，以管理员身份运行webpack命令：

如果使用webpack打包出现错误的话，可以看看我的这个博文：
使用webpack打包出错?

打包完成后就会生成一个dist文件夹，这个文件夹是你自己在webpack配置文件中指定的，然后在这个文件夹中会生成目标js文件，我们可以编写一个index.html引用一下js文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./dist/bundle.js"></script>
    </head>
    <body>
    </body>
</html>

然后在浏览器里面运行：

010.使用WebPack打包CSS文件

首先打开项目目录，以管理员身份打开命令窗口，使用cnpm install style-loader css-loader --save-dev安装所需模块：

然后需要使用cnpm install less less-loader --save-dev命令安装它依赖的插件：

这个时候你打开package.json就能看到对应的依赖：

然后我们需要在webpack.config.js中编写配置文件：

var path = require("path");
module.exports = {
    //入口文件
    entry:"./main.js",
    output:{
        //__dirname是nodejs的全局变量，获得当前文件所在的目录的完整目录
        //dist是生成的js文件放在哪
        path: path.resolve(__dirname,"./dist"),
        //取一个名字(随便取)
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,//检查样式文件
                use: ["style-loader","css-loader"]//使用转换器
            }
        ]
    }
}

详细的内容放在注释里啦，然后我们可以创建几个css文件测试一下：

然后在入口文件中引入：

然后使用webpack命令打包：

接下来在浏览器中运行看看效果：

哇！好蓝~

011.ES6

首先看一段var的变量在全局中的作用：

接下来在浏览器运行后，打开控制台查看：

可以看到使用var的时候，i是属于全局的，但是let不一样：

运行效果：

说明let声明的变量是局部的。

模板字符串

第一种形式：

第二种用法：输出字符串

返回对象的方式

总结一下

let声明的变量只能在局部中使用
反单引号可以实现任意字符串的拼接输出
ES6中返回对象只需要值即可

012.解构表达式

数组解构：

对象解构：

013.函数优化

014.map函数的使用

map方法可以通过遍历全部元素把所有的元素通过指定的函数操作后，返回一个新的数组。

015.reduce方法使用

第一种：没有初始值(没有第二个参数)，reduce会把数组的前两个相加，得到的结果做为a的值，然后接着和下一个元素相加，简而言之，这个函数会计算所有元素之和
第二种：有第二个参数，会设定a为初始值。

016.promise

let promise = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let num = Math.random();
        if(num<0.5){
            resolve("成功啦:"+num);
        }else{
            reject("失败啦:"+num);
            }
    },1000);
});
promise.then((msg)=>{
    console.log("成功信息:"+msg);
}).catch((err)=>{
    console.log("失败信息:"+err);
});

promise就是一个对象，保存预期事件的结果，可以应用在异步操作时，指定异步操作的成功失败结果。

017.对象的扩展方法

var p1 = {name:"孑小白",age:19};
var p2 = {name:"张三"}
var t = Object.assign(p1,p2,{address:"中国"});
console.log(t);

梳理一下Object的方法

keys
values
entries
assign

018.数组的扩展方法

var arr = [1,2,3];
var t1 = arr.find((ele)=>{
    if(ele%2==0){
        console.log("find():"+ele);
        return ele;
    }
});
var t2 = arr.findIndex((ele)=>{
    if(ele%2==0){
        console.log("findIndex():"+ele);
        return ele;
    }
});
console.log(t1);//2
console.log(t2);//1
console.log(arr.includes(3));//true

总结一下

find()
findIndex()
includes()

019.babel

ES6的exports和import不能在浏览器中直接使用，但是可以使用babel转化为ES5后再使用。
首先需要创建一个babel的配置文件.babellrc：

{
    "presets":["es2015"]
}

然后需要打开项目工程，以管理员身份打开命令窗口，执行cnpm install babel-preset-es2015 --save-dev命令安装babel：

然后使用cnpm install babel-cli -g安装他的脚手架：

使用babel

首先打开自己的项目文件夹，在里面创建export01.js文件，专门编写需要导出的内容：

//第一种写法
export let name = "孑小白";
export let age = 19;
export let hobby = "喜欢唱歌，打BBOX，敲代码";
export let show = function(){
    console.log("我是show函数");
}

//第二种方式：
let name = "孑小白";
let age = 19;
let hobby = "喜欢唱歌，打BBOX，敲代码";
let show = function(){
    console.log("我是show函数");
}
export{name,age,hobby,show};

然后创建import02.js引入导入的文件：

import {name,age,hobby,show} from "./export01.js";
console.log(name,age,hobby);
show();

//在导出的时候使用别名：
import {name as name1} from "./export01.js";
console.log(name1);

然后以管理员身份打开命令窗口，执行babel-node命令运行文件：

不过我第一次运行的时候报错了，如果你也报错了，可以看看这个：
babel报错？

导出默认的模块

export default function(str){
    console.log(str);
}

//导入default的模块不需要{}包裹
import show from "./export01.js";
show("哈哈哈");

也可以导入多个

export default {
    eat(str){
        console.log("吃东西:"+str);
    },
    drink(str){
        console.log("喝饮料:"+str);
    }
}

//导入default的模块不需要{}包裹
import p from "./export01.js";
p.eat("鸡排");
p.drink("可乐");