Node.js学习笔记

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

Node.js学习笔记

浏览器的内核包括两部分核心DOM渲染引擎、JavaScript解析引擎。脱离浏览器环境也可以运行JavaScript只要有JavaScript引擎就可以。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js内置了Chrome的V8 引擎可以在Node.js环境中直接运行JavaScript程序。Node.js没有浏览器API如documentwindow的等但加了许多Node.js 专属API例如文件系统、进程、http功能。

开发类似JavaWeb的简单的后端程序或部署一些高性能的服务Node.js是一个非常好的选择。

1.用户体验适配器BFF

BFF层的作用是让前端有能力自由组装后台数据减少大量的业务沟通成本加快业务的迭代速度。

无论是数据聚合还是数据剪裁这类程序的特点是不需要太强大的服务器运算能力但是对程序的灵活性有较高的要求这两个特点都正好和Node.js的优势相吻合。

在这里插入图片描述

一个前端页面向 Service A、Service B 以及 Service C发送请求不同的微服务返回的值用于渲染页面中不同的组件。此时每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据这个服务层叫做BFF。

在这里插入图片描述

手机、平板端、PC机等用户终端都需要向每个Service例如Service A发送请求。对于同一个功能不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口不能同时满足三个客户端的不同需求。我们可以在Service A中开发三个接口也可以增加一个数据裁剪服务将数据按照不同终端的不同要求进行裁剪这个服务层叫做BFF。

2.服务器端应用开发

第一步创建server-app.js。

//引入http模块
const http = require('http');
//创建服务器
http.createServer(function (request, response) {
// 发送 HTTP 头部 
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/html'});
// 发送响应数据 "Hello World"
response.end('<h1>Hello Node.js Server</h1>'); //当所有要返回的内容发送完毕时该函数必须被调用一次。
}).listen(8888); //监听8888端口
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

第二步运行服务端程序。

node server-app.js

服务器启动成功后在浏览器中输入http://localhost:8888/ 可以查看到webserver成功运行并输出html页面。停止服务在终端 ctrl + c 。

3.NPM包管理器

NPM全称Node Package Manager是Node.js包管理工具也是Node.js的包管理工具相当于前端的Maven 。

#在命令提示符输入 node -v 可查看当前node.js版本
node-v
#在命令提示符输入 npm -v 可查看当前npm版本
npm-v

第一步创建npm_pro文件夹并进行项目初始化。

#建立一个空文件夹npm_pro在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词便于用户搜索到我们的项目
#最后会生成package.json文件这个是包的配置文件相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成默认的 package.json 文件那么可以使用命令
npm init -y

生成的package.json如下。

{
  "name": "npm_pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第二步修改npm镜像。

NPM官方的管理的包都是从 http://npmjs.com下载的但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ 淘宝 NPM 镜像是一个完整 npmjs.com 镜像同步频率目前为 10分钟一次以保证尽量与官方服务同步。

执行设置镜像地址指令

#经过下面的配置以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

4.npm install命令的使用

基本命令

#使用 npm install 安装依赖包的最新版
#模块安装的位置项目目录\node_modules
#同时package.json 文件中依赖包会被添加到dependencies节点下类似maven中的 <dependencies>
#默认参数--save  简写  -S  将当前依赖保存在dependencies节点下即非全局项目打包时不包含仅在开发中使用
npm install jquery

若要下载特定版本的依赖

#如果安装时想指定特定的版本
npm install jquery@2.1.x

下载开发依赖项目打包时不包含仅在开发中使用

#devDependencies节点开发时的依赖包项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖所有项目都会自动安装使用

#全局安装
#Node.js全局安装的npm包和工具的位置用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件这个文件帮助锁定安装包的版本
npm install 
#可以实现项目传输或移植后自动根据package.json中的配置下载依赖来初始化项目

其他命令

#更新包更新到最新版本
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

5.ES6模块化规范

嵌入网页的Javascript代码越来越庞大越来越复杂。Javascript模块化编程开发者只需要实现核心的业务逻辑其他都可以加载别人已经写好的模块。模块化规范有CommonJS模块化规范基于ES6语法之前、ES6模块化规范使用ES6语法。

ES6使用 export 和 import 来导出、导入模块。第一步创建 modularization_pro项目文件夹、创建 src并执行npm init -y初始化项目。第二步在src中创建两个js文件一个定义两个方法

//01.js
export default{  //export代表导出可被其他js文件导入
  list() {
    console.log("list...")
  },
  save(){
    console.log("save...")
  }
}

一个调用其里面的两个方法

//02.js
import user from './01.js'  //导入
//调用
user.list()
user.save()

此时会出现SyntaxError: Cannot use import statement outside a module错误。这是因为在node.js环境中无法直接执行ES6模块化的代码需要ES6代码转换ES5才可以执行。

6.Babel转码器

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。Babel是一个广泛使用的转码器可以将ES6代码转为ES5代码从而在现有环境执行执行。有了Babel转码器意味着我们可以直接用 ES6 编写程序而不用担心现有环境是否支持。

第一步安装Babel。Babel提供babel-cli工具用于命令行转码它的安装命令如下

npm install -g babel-cli
#查看是否安装成功
babel --version

第二步新建并配置.babelrc。Babel的配置文件是.babelrc存放在项目的根目录下该文件用来设置转码规则和插件presets字段设定转码规则。

{
"presets": ["es2015"],
"plugins": []
}

第三步安装转码器。在目录中输入指令

npm install -D babel-preset-es2015

第四步转码。

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist

01.js和02.js转码后生成的js文件如下。

//01.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  list: function list() {
    console.log("list...");
  },
  save: function save() {
    console.log("save...");
  }
};

//02.js
'use strict';

var _ = require('./01.js');

var _2 = _interopRequireDefault(_);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//导入
//调用
_2.default.list();
_2.default.save();

第五步运行程序。此时运行dist中转码后的js文件即可成功运行以上的程序。

node dist/02.js

拓展方式ES6模块化规范还有一些其他的语法格式常见的另一种写法如下。

//01.js
export function getList() {
	console.log('获取数据列表')
}
export function save() {
	console.log('保存数据')
}

//02.js
import {getList, save} from"./01.js"
getList()
save()

7.Webpack打包js

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件减少了页面的请求。

第一步全局安装。

#全局安装任意一行即可
npm install -g webpack webpack-cli
npm install -g webpack
npm install -g webpack-cli

#安装后查看版本号
webpack -v

第二步创建webpack_pro文件夹并执行npm init -y初始化项目。新建src并载src下创建01.js和02.js编写两个普通的函数。

//01.js
exports.info=function(str){
  document.write(str)
}

//02.js
exports.add=function(a,b){
  return a+b
}

第三步在src创建main.js。main.js类似java中的主类main。

const a = require('./01.js') //ES5语法require用于导入其他js文件
const b = require('./02.js')

a.info('hello'+b.add(3,2))

第四步创建webpack配置文件。根目录下创建配置文件webpack.config.js并粘入以下代码。

代码段功能为读取当前项目目录下src文件夹中的main.js入口文件内容分析资源依赖把相关的js文件打包。打包后的文件放入当前目录的dist文件夹下。打包后的js文件名为bundle.js。

const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径__dirname当前文件所在路径
filename: 'bundle.js'//输出文件
    }
}

第五步执行编译命令。执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

webpack --mode=development
# 打包成功
#PS D:\workplace\codeplace\webpack_pro> webpack --mode=development
#asset bundle.js 2.88 KiB [emitted] (name: main)
#./src/main.js 136 bytes [built] [code generated]
#./src/01.js 53 bytes [built] [code generated]
#./src/02.js 43 bytes [built] [code generated]
#webpack 5.75.0 compiled successfully in 123 ms

第六步webpack_pro目录下创建index.html引用bundle.js进行测试。

<script src="dist/bundle.js"></script>

拓展可以配置项目的npm运行命令修改package.json文件。

"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

运行时输入的npm命令就变为

#开发打包
npm run dev 
#生产打包
npm run prod

8.Webpack打包css

Webpack 本身只能处理 JavaScript 模块如果要处理其他类型的文件就需要使用 loader 进行转换。Loader 是模块和资源的转换器。

第一步我们需要安装相关Loader插件css-loader 是将 css 装载到 javascriptstyle-loader 是让 javascript 认识css。

npm install -D style-loader css-loader

第二步修改webpack.config.js。添加以下代码到module.exports结点中。

module: {
rules: [  
            {  
test: /\.css$/,    //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
            }  
        ]  
    }

修改后webpack.config.js如下

const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径__dirname当前文件所在路径
filename: 'bundle.js'//输出文件
    },
module: {
  rules: [  
              {  
  test: /\.css$/,    //打包规则应用到以css结尾的文件上
  use: ['style-loader', 'css-loader']
              }  
          ]  
      }
}

第三步 在src中创建style.css。

body{
  background-color: pink;
}

第四步修改main.js

require('./style.css')

第五步运行编译命令执行打包。

#webpack --mode=development
npm run dev

第六步浏览器中查看index.html若背景颜色为pink则说明css成功打包。

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：Python学习笔记（45）~reverse()与reversed()的区别

下一篇：编译原理学习笔记（三十）~习题:写出LR分析器对于输入adbdb$的格局变化和相应动作

“Node.js学习笔记” 的相关文章

Vue项目实战——实现GitHub搜索案例（学以致用，两小时带你巩固和强化Vue知识点）_vue github1年前 (2023-02-02)
[Android开发学iOS系列] 和一个真正iOS开发的区别?1年前 (2023-02-02)
国家图书馆，学习流式计算是种怎样的体验1年前 (2023-02-02)
非对称加解密算法SM21年前 (2023-02-02)
【FPGA】Verilog 编码实现：与非门 | 或非门 | 异或门 | NAND/NOR/XOR 行为验证1年前 (2023-02-02)
四个步骤，教你落地稳定性保障工作1年前 (2023-02-02)
用状态机实现通用多字节SPI接口模块1年前 (2023-02-02)
[概率论与数理统计]笔记：4.3 常用的统计分布1年前 (2023-02-02)
五大方法 永久彻底关闭WIN10系统自动更新【已验证有效】1年前 (2023-02-02)
selenium + python自动化测试环境搭建1年前 (2023-02-02)

阿里云国际版