本文共 13956 字，大约阅读时间需要 46 分钟。
1. Nodejs概述
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好-
下载对应你系统的Node.js版本:
-
选安装目录进行安装
完成以后，在控制台输入# 查看node版本信息node -v
学习目标：Node.js用途；安装Node.js
总结：
Node.js是一个可以在js中接收和处理web请求的应用平台。
2. Nodejs模块化编程
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
创建文本文件demo3_1.js
exports.add=function(a,b){ return a+b;} 每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
创建文本文件demo3_2.js
//引入模块demo3_1var demo= require('./demo3_1');console.log(demo.add(400,600)); 在命令提示符下输入命令
node demo3_2.js
学习目标：编写模块文件使用require引入模块后使用node.js执行
总结：
可以使用exports将js方法导出，并使用require引入对应的js模块，然后再引入之后可以使用对应的方法。
3. 创建Nodejs Web服务器
学习目标：引入http模块监听8888端口实现输出字符
总结：
可以利用node.js创建web服务器：
//引入node.js内置http模块var http = require("http");//创建并监听web服务器http.createServer(function (request, response) { //发送http头部 //参数1：响应状态码，200表示成功 //参数2：响应头部信息，Content-Type内容类型：纯文本 response.writeHead(200, { "Content-Type": "text/plain"}); //发送响应数据 response.end("Hello World \n");}).listen(8888);console.log("服务器运行在 http://127.0.0.1:8888 "); http为node内置的web模块
服务启动后，我们打开浏览器，输入网址http://localhost:8888/
即可看到网页输出结果Hello Worl在命令行中按 Ctrl+C 终止运行
理解服务端渲:是在服务端完成的，而非浏览器（客户端）来完成。这与JSP很是相似 4. 处理Nodejs Web请求参数
学习目标：引入http和url模块创建web容器并使用url解析请求路径中参数且输出
分析：
需求：http://127.0.0.1:8888?id=123&name=heiheihei 获取到请求路径中参数及值并输出
实现步骤：
- 创建web服务器；
- 引入url模块；
- 利用url解析请求地址中的参数和值并输出
- 启动测试；
总结：
在node.js中可以引入url内置模块对请求地址进行处理：
//引入node.js内置http模块var http = require("http");var url = require("url");//创建并监听web服务器http.createServer(function (request, response) { //发送http头部 //参数1：响应状态码，200表示成功 //参数2：响应头部信息，Content-Type内容类型：纯文本 response.writeHead(200, { "Content-Type": "text/plain"}); //解析请求地址 //参数1：请求地址 //参数2：true的话使用query解析参数到一个对象，默认false var params = url.parse(request.url, true).query; for(var key in params){ response.write( key + " = " + params[key]); response.write("\n"); } //发送响应数据 response.end("");}).listen(8888);console.log("服务器运行在 http://127.0.0.1:8888 "); 5. 包资源管理器NPM
npm全称Node Package Manager，是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven 。
通过npm 可以很方便地下载js库，管理前端工程。 现在的node.js已经集成了npm工具，在命令提示符输入npm -v 可查看当前npm版本 初始化工程:
npm init
按照提示输入相关信息，如果是用默认值则直接回车即可。
- name: 项目名称
- version: 项目版本号
- description: 项目描述
- keywords: {Array}关键词，便于用户搜索到我们的项目
最后会生成 package.json 文件，这个是包的配置文件，相当于maven的pom.xml以后也可以根据需要进行修改。
本地安装
install命令用于安装某个模块，可以通过require引入到项目中使用。如我们想安装express模块（node的web框
架），输出命令如下：npm install express
全局安装
使用全局安装会将库安装到你的全局目录下。全局安装之
后可以在 命令行 使用该安装的模块对应的内容或命令。 如果你不知道你的全局目录在哪里，执行命令查看全局目录路径npm root -g
比如全局安装jquery， 输入以下命令
# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件npm install jquery -g
批量下载
从网上下载某些代码，发现只有package.json，没有node_modules文件夹，这时需要通过命令重新下载这些js库.
进入目录（package.json所在的目录）输入命令npm install
学习目标：说出npm的作用；区别本地安装和全局安装
总结：
npm是一个node.js的管理和分发工具，可以根据配置package.json下载js库。
- 本地安装：将下载的模块安装到当前目录（项目）；
- 全局安装：将下载的模块安装到全局的目录（
npm root -g）
6. 切换NPM镜像
有时我们使用npm下载资源会很慢，所以可以切换下载的镜像源（如：淘宝镜像）；或者安装一个cnmp(指定淘宝镜
像)来加快下载速度。 学习目标：安装nrm组件将npm的镜像切换为淘宝镜像总结：
-
使用nrm 切换镜像源
npm install nrm -gnrm use taobao
-
使用cnpm下载
npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install **
7. webpack概述
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpackjs
全局安装
npm install webpack -gnpm install webpack-cli -g
如果安装失败；则将全局目录下的webpack的相关文件夹删除再执行上述命令
安装后查看版本号
webpack -v
学习目标：webpack的作用是什么并安装webpack
总结：
webpack作用：可以将多个静态资源js、css等打包成一个js文件。
8. webpack打包js
学习目标：创建2个js文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。
分析：
实现步骤：
-
创建2个js文件；
exports.info=function(str){ document.write(str);}exports.add=function(a,b){ return a+b;} -
创建入口文件main.js；
var bar= require('./bar');var logic= require('./logic');bar.info( '100 + 200 = '+ logic.add(100,200)); -
创建webpack的配置文件；
创建配置文件webpack.config.js ，该文件与src处于同级目录 -
运行webpack命令；
webpack
-
创建index.html页面进行测试
总结：
webpack打包js的配置文件：
var path = require("path");module.exports = { //入口文件 entry: "./src/main.js", output: { //路径 path: path.resolve(__dirname, "./dist"), filename: "bundle.js" }} webpack可以将多个js文件打包成一个js
9. webpack打包css
学习目标：安装style-loader css-loader组件，创建并使用css文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。
分析：
实现步骤：
-
安装转换css的组件；
npm install style-loader css-loader --save-dev
npm install less less-loader --save-dev
-
修改配置文件；
-
创建css文件；
-
修改入口文件，加载css文件；
require('./css/css1.css'); -
打包并测试
webpack
总结：
webpack打包css文件需要安装转换的组件，并修改配置文件：
var path = require("path");module.exports = { //入口文件 entry: "./src/main.js", output: { //路径 path: path.resolve(__dirname, "./dist"), filename: "bundle.js" }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }} 10. ES6概述&创建测试工程
什么是ECMAScript？
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范
学习目标：了解es6应用场景；创建测试工程
总结：
ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
11. let和const命令及模板字符串
之前，js定义变量只有一个关键字： var
var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。 let 所声明的变量，只在 let 命令所在的代码块内有效。
const 声明的变量是常量，不能被修改
模板字符串
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5let name = 'itcast'console.log('hello ' + name)//es6const name = 'itcast'console.log(`hello ${ name}`) //hello itcast 第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5var msg = "Hi \man!"// es6const template = `hello world`
对象初始化简写
ES5对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如
function person5(name, age) { return { name:name, age:age};}console.log("es5 => " + JSON.stringify(person5("itcast", 13))) 以上代码可以简写为
function person6(name, age) { //属性和值是同名的则可以省略为如下：return { name, age}}console.log("es6 => " + JSON.stringify(person6("itcast", 13))) 学习目标：使用let和const定义变量说出区别；模板字符串的好处以及对象初始化简写
总结：
- let所声明的变量只能在let命令所在的代码块中使用
- const声明的变量是常量，也就是值不可以改变
- 模板字符串：可以不用通过反斜杠拼接多行字符，直接使用`
- 对象初始化简化：可以在返回的对象时，不用指定属性名。
12. 解构表达式
数组解构
比如有一个数组：
let arr = [1,2,3]
想获取其中的值，只能通过角标。ES6可以这样：
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值// 然后打印console.log(x,y,z)
对象解构
例如有个person对象：
const person = { name:"jack",age:21,language: ['java','js','css']} 可以这么做：
// 解构表达式获取值const { name,age,language} = person;// 打印console.log(name);console.log(age);console.log(language); 
如果想要用其它变量接收，需要额外指定别名：
{name:n}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。
拷贝对象属性
比如有一个person对象：
const person = { name:"jack",age:21,language: ['java','js','css']} 想获取它的 name 和 age 属性，封装到新的对象，该怎么办？
在解构表达式中，通过 language 接收到语言，剩下的所有属性用 … obj 方式，可以一起接收，这样 obj 就是一 个新的对象，包含了 person 中，除了 language 外的所有其它属性数组也可以采用类似操作。 学习目标：将数组、对象中的值或属性使用解构表达式设置到对应变量
总结：
解构表达式：可以对数组、对象的元素或者属性按顺序、名称的方式进行赋值到对应变量中。
13. 函数优化
箭头函数
ES6中定义函数的简写方式：
在es-demo.html中测试；一个参数时：var print = function (obj) { console.log(obj);};print("print");var print2 = obj => console.log(obj);print2("print2"); 多个参数：
// 两个参数的情况：var sum = function (a , b) { return a + b;}console.log(sum(1, 2));// 简写为：var sum2 = (a,b) => a+b;console.log(sum2(1, 2)); 代码不止一行，可以用 {} 括起来
var sum3 = (a,b) => { console.log(a+b)return a + b;}console.log(sum3(1, 2)); 箭头函数结合解构表达式
比如有一个函数：
const person = { name:"jack",age:21,language: ['java','js','css']}function hello(person) { console.log("hello," + person.name)}hello(person); 如果用箭头函数和解构表达式
var hello2 = ({ name}) => console.log("hello2," + name);hello2(person); 对象的函数属性简写
比如一个Person对象，里面有eat方法：
let person = { "name":"jack",//以前，也可以给food默认值eat1: function (food="肉") { console.log(this.name + "在吃" + food);},//箭头函数版eat2: (food) => console.log(person.name + "在吃" + food),//不能使用this//简版eat3(food){ console.log(this.name + "在吃" + food)}}person.eat1("111")person.eat2("222")person.eat3("333") 学习目标：箭头函数的好处；对象的函数属性简写，箭头函数与解构表达式的应用
总结：
箭头函数：可以不用编写基础函数的解构（如：function），直接使用 =>
var print = function (obj) { console.log(obj); }; print("print"); //箭头函数 var print2 = obj => console.log(obj); print2("print2"); var sum = function (a, b) { return a+b; }; console.log(sum(1,2)); //箭头函数 var sum2 = (a,b) => a+b; console.log(sum2(1,2)); var sum3 = (a,b) => { console.log(a+b); return a+b; }; console.log(sum3(1,2)); let person = { "name": "heiheihei", learn1: function (course="java") { console.log(this.name + " 在学习 " + course); }, //箭头函数；不能使用this learn2: (course) => console.log(person.name + " 在学习 " + course), //简写 learn3(course){ console.log(this.name + " 在学习 " + course); } }; person.learn1("java"); person.learn2("js"); person.learn3("css"); const person = { name:"heiheihei", age:13, language:["java","js","css"] }; function hello(person) { console.log("hello " + person.name); } hello(person); //箭头函数、解构表达式 var hello2 = ({ name}) => console.log("hello2 " + name); hello2(person); 14. map方法使用
数组中新增了map和reduce方法。
map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
举例：有一个字符串数组，希望转为int数组
let arr = ['1','20','-5','3'];console.log(arr)arr = arr.map(s => parseInt(s));console.log(arr)
学习目标：数组中map方法的应用场景
总结：
map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
15. reduce方法使用
reduce(function(),初始值（可选）) ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是
第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数 举例：let arr = [1,20,-5,3]# 没有初始值arr.reduce((a, b) => a+b)# 设置初始值为1arr.reduce((a, b) => a+b, 1)arr.reduce((a, b) => a*b)arr.reduce((a,b) => a*b, 0)
执行结果：
总结：
reduce方法会从左到右依次把数组中的元素用函数处理（reduce方法的第一个参数），会返回一个执行结果,执行结果会参与下一次计算,当作函数处理的实参1,此时实参2从数组中获取未计算的元素.
如果填了第二个参数,第二个参数会当作函数处理的实参1,而此时实参2是调用reduce方法的数组第一个元素.let arr = [1, 2, 3]
arr.reduce((a,b)=>a+b)
第1次：(1,2) => 1+2
第2次：(3, 3) => 3+3 --------》 6
16. promise应用示例
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样
的方法进行处理。可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果
实例:
const promise = new Promise(function(resolve, reject){ setTimeout(()=>{ let num = Math.random();if (num < 0.5) { resolve("成功！num = " + num)} else { reject("失败！num = " + num)}}, 300)});promise.then(function (msg) { console.log(msg)}).catch(function (msg) { console.log(msg)}) 结果:
学习目标：promise的应用场景及示例 总结：
promise是一个对象，保存着预期事件执行的结果；可以应用在异步操作时候，指定异步操作的成功与失败的结果。
const promise = new Promise(function (resolve, reject) { setTimeout(()=>{ let num = Math.random(); if(num < 0.5){ resolve("操作成功！num=" + num); } else { reject("操作失败！num=" + num); } },300); }); promise.then(function (msg) { console.log(msg); }).catch(function (msg) { console.log(msg); }); 17. 对象的扩展方法使用
ES6给Object拓展了许多新的方法，如：
- keys(obj)：获取对象的所有key形成的数组
- values(obj)：获取对象的所有value形成的数组
- entries(obj)：获取对象的所有key和value形成的二维数组。格式： [[k1,v1],[k2,v2],…]
- assign(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。
let p2 = { "name":"jack","age":21}Object.keys(p2)Object.values(p2)Object.entries(p2)//测试覆盖问题let obj = { "name":"rose"}Object.assign(obj, p2)Object.assign(obj, p2, { "address":"China"}) 
总结：
Object的方法：
- keys：获取对象的属性名
- values：获取对象的属性值
- entries：获取对象的属性和属性值
- assign：可以将对象进行拷贝
18. 数组的扩展方法使用
数组扩展
ES6给数组新增了许多方法：
- find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
- findIndex(callback)：与find类似，不过返回的是匹配到的元素的索引
- includes（element）：判断指定元素是否存在
let arr = [1, 20, -5, 3]//元素能整除2的arr.find(i => i%2===0)//查询元素能整除2的索引号arr.findIndex(i => i%2===0)arr.includes(3)arr.includes(4)
总结：
数组的扩展方法：
- find：根据函数条件查找数组中符合条件的元素
- findIndex：与find类似，返回的不是元素而是元素对应的索引号
- includes：判断指定的元素是否存在
19. 安装babel
- babel转换配置,项目根目录添加 .babelrc 文件；注意不要忘记了这个文件中的 .
{ "presets" : ["es2015"]} 
cnpm install babel-preset-es2015 --save-dev
3.全局安装命令行工具
# 管理员身份 执行cnpm install babel-cli -g
4.使用
babel-node js文件名
学习目标：安装babel及了解babel的作用
总结：
babel是一个javaScript语法编译器，可以将es6的语法进行转换并执行。
需要安装babel：
cnpm install babel-preset-es2015 --save-dev cnpm install babel-cli -g
编写.babelrc文件，指定es的版本
可以通过命令去执行对应的js文件：babel-node
20. export和import联合应用
命名导出（Named exports）
此方式每一个需要输出的数据类型都要有一个name，统一输入一定要带有 {} ，即便只有一个需要输出的数据类型
export导出模块：编写export1.js
//方式一export let name = "itcast";export let age = 13;export let gender = "男";export let say = function(str){ console.log(str);}//方式二；更推荐let name = "itcast";let age = 13;let gender = "男";let say = function(str){ console.log(str);}export { name, age, gender, say} import导入模块：编写import1.js
import { name, age, gender, say} from "./export1"console.log(name, age, gender)//import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。//name = "heiheihei" //会报错 "name" is read-only//上面代码中，脚本加载了变量name，对其重新赋值就会报错，因为name是一个只读的接口。但是，如果name是一个对象，改写name的属性是允许的。也就是name.abc = xxx 这样是可以的say("hello itcast")//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。import { name as abc, say as hello} from "./export1"console.log(abc)hello("hello heiheihei") 默认导出（Default exports）
默认输出不需要name，但是一个js文件中只能有一个export default。
export导出模块：编写export2.js
//方式一export default function(str){ console.log(str)}//方式二；一个文件只能一个export default，不能1个以上同时存在/*export default { eat(sth){ console.log("eat " + sth) }, drink(sth) { console.log("drink " + sth) }}*/ import导入模块：编写import2.js
//导入default的模块文件不需要使用{}import itcast1 from "./export2"itcast1("hello itcast");/*import abc from "./export2"abc.eat("meat")abc.drink("water")*/ 需要注意 export default 在一个模块（文件）中只能使用一次；并且不能放置在函数或条件代码里面
学习目标：export和import的联合应用场景；使用export导出模板文件，import引入模板文件
总结：
可以通过export导出模块，通过import导入模块并使用其内容。
导出有两种方式：命名导出和默认导出。
因为浏览器默认不支持export和import命令，所以需要安装babel对export和import进行解析和执行。
转载地址：http://xnilf.baihongyu.com/