Node.Js&ES6
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("可乐");