Node js

Node js

Node简介：

• Node.js 是一个基于Chrome V8 引擎的JavaScript运行环境。

• Node.js使用了一个事件驱动、非阻塞式I/O的模型,使其轻量又高效。

  • 事件驱动： 任务执行，发布者，订阅者，事件驱动 （ on emit ）。
  • 非阻塞： 执行某一个任务的同时也可以执行其他任务。
  • 阻塞： 执行某一个任务，这个任务如果没有执行完成，其他任务必须等待。
  • I/O: 输入/输出（ 数据库操作，文件系统操作等 ）。
    • 非阻塞I/O模型： 当我们使用Node.js来实现数据库操作、文件系统等操作时，要进行的异步操作，异步操作的核心传统实现方式就是回调函数。

• Node.js的包管理工具npm,是全球最大的开源库生态系统。

  • 第三方： 国外的。

  • 建议： 切换国内的， 淘宝国内镜像源。

  • nrm： nrm是专门用来管理和快速切换私人配置的registry。

    • 全局安装nrm

      $ npm install nrm -g --save
      

    • 安装cnpm

       $ npm install -g cnpm --registry=https://registry.npm.taobao.org
      

      • 查看是cnpm否安装成功

      cnpm -v
      

• 官网 http://nodejs.cn/

• npm 插件官网：https://www.npmjs.com/

Node的安装：

• 安装包安装：
  • 官网下载：https://nodejs.org/zh-cn/ 【默认安装路径】
• nvm：
  • Node Version Manager（Node版本管理工具）。
  • 由于开发时可能会在多个Node版本中测试，而且Node的版本也比较多，所以需要这么款工具来管理。

相关版本：

• node版本常识：
  • 偶数版本为稳定版 （0.6.x ，0.8.x ，0.10.x）。
  • 奇数版本为非稳定版（0.7.x ，0.9.x ，0.11.x）。

Windows下常用的命令行操作：

• 切换当前目录（change directory）：cd
• 创建目录（make directory）：mkdir
• 查看当前目录列表（directory）：dir
  • 简写：ls（list）
• 清空当前控制台：cls
  • 别名：clear
• 删除文件：del
  • 别名：rm

注意：所有别名必须在新版本的 PowerShell （linux系统）中使用

前端模块化

• 问题： 为什么前端要使用模块化？

  • 模块化： 是具有特定功能的一个对象（ 广义理解 ）
  • 好处：
    1. 可以存储多个独立的功能块
    2. 复用性高

• 模块定义的流程（自定义）：

  • 定义模块（对象）

     const 变量名 = {
     	xxx:xxx,
     	function(){}
     }
    const fn = function(){}
    

  • 导出模块

     module.exports = {
        变量名
     }
    

  • 引用模块

    const 变量名 = require （'模块名称'）
    

模块的分类

• AMD（ require.js）

  • AMD定义一个模块

    • define

      // AMD
      /*
      	目录
      		admDir
      			a.js
      			index.js
      */
      // AMD定义  a.js
          define ({
              a: 1,
              b: 2,
              add: function(){}
          })
      // AMD引用 index.js
      	require([./a.js],function( moduleA ){
              //moduleA指的就是定义来的对象
      	})
      

• CMD ( sea.js )

  • CMD定义模块

    • define

      //CMD
      /*
      	目录结构
      		b.js
      		index.js
      */
      
      // 模块定义  b.js
      	define(function(require, exports, module) {
      
          	// 模块代码
      
          });
      //模块引用 index.js
      	require('./b.js',function( moduleB ){
              //moduleB就是b模块中导出的内容
      	})
      

• Common.js

  • Node.js使用了Common.js的规范

    • Common.js定义模块

      //common.js
      /*
      	目录结构：
      		name.js
      		index.js
      */
      //模块的定义 name.js
      	const nameObj = {
              name: 'Gabriel Yan '
      	}
      //模块的导出  name.js
      	module.exports = nameObj
      //模块的引用
      	const nameObj = require('./name.js')
      

• Node.js中Common.js规范的使用有三种类型：

  • 内置模块（ 内置模块指的是挂载在Node.js全局对象身上的api ）

  • 自定义模块

    • 模块的定义

      //举例
      const student = {
          id: 1,
          name: 'Gabriel Yan'
      }
      const fn = function(){}
      

    • 模块的导出

      //安全性不高
      module.exports = student;
      
      //批量导出,按需引用
      module.exports = {
           student,fn
       }
      

    • 模块引用

      // 这种引用对应第一种导出
        const student = require('./xxx.js')
        // 这种引用对应第二种导出
      const { student , fn } = require( './xxx.js ' )
      

  • 注意:
    ​ 在自定义模块引用时，require一定要写好路径

  • 第三方模块

    • 别人已经封装好的模块
    • 这个模块具备一些特定的功能
    • 这些模块存放在 www.npmjs.com 这个网站中,这些模块的文档也记录在内
    • 格式： var/let/const 变量名 = require( 模块名称 )
    • 总结：
      1. 第一步，使用npm/cnpm 安装
      2. 第二部，在文件中引入
      3. 第三部，在www.npmjs.com这个网站中找到这个模块的文档，根据文档来使用

• 自定义模块的上传（ http://www.npmjs.com ）

  • 创建package.json文件2

    $ npm init -y
    

  • 在http://www.npmjs.com 这个网站注册一个账号

  • 注意：第一次登陆会发送一个邮件给你的邮箱（ 这个发送是手动的 ），然后登陆邮箱激活

  • 检查你的电脑的源是不是npm源

    $ nrm ls
  

  • 如果不是，那么切换到npm源

      nrm use npm
  

  • 命令行登录npmjs仓库

    $ npm adduser
    

  • 创建模块并导出模块

     module.exports = {
        变量名
     }
  
  

  • 看你的包名称是否已经被使用

  • 发布包

    $ npm publish
    
    

• npm 使用入门

  官网:https://www.npmjs.com/

  安装：无需安装

  查看当前版本：

   $ npm -v
  
  

  更新：

   $ npm install npm@latest -g
  
  

  初始化工程

   $ npm init
   $ npm init --yes 默认配置
  
  

  安装包

  使用npm install会读取package.json文件来安装模块。安装的模块分为两类
  dependencies和devDependencies，分别对应生产环境需要的安装包和开发环境需要的安装包。

   $ npm install
   $ npm install name
   $ npm install name --save  === $ npm install name -S  // 开发环境下使用
   $ npm install name --save-dev === $ npm install name -D  // 生产环境下使用
  
  

  更新模块

   $ npm update
  
  

  卸载模块

   $ npm uninstall <package_name>
   $ npm uninstall --save lodash
  
  

  配置npm源

  • 临时使用, 安装包的时候通过–registry参数即可

    $ npm install express --registry https://registry.npm.taobao.org
    
    

  • 全局使用

    $ npm config set registry https://registry.npm.taobao.org
    // 配置后可通过下面方式来验证是否成功
    npm config get registry
    // 或
    npm info express
    
    

  • cnpm 使用

    // 安装cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    // 使用cnpm安装包
    cnpm install express
    
    

• Node.js跨域

  • 跨域；

    • 前端跨域
      • jsonp
      • 反向代理（ 创建 一个虚拟后端服务器，让这个后端服务器帮助我们请求数据）
    • 后端跨域
      • node php java
        1. 设置请求头
        2. 使用第三方的中间件（ cors ）

    【中间件： 就是具有一定功能的一个函数】

常用的内置模块：

• Node 常用内置api :

  • URL 网址解析

    • parse(urlStr,queryString,AnalysisHost)

      • 作用：解析url，返回一个url属性对象

      • 参数解析

        urlStr: 要解析的url地址
        queryString: 解析出来的查询字符串还是查询对象，true是对象 false是字符串，例如：http://foo/bar?a=123, true的话 query: {a: 123}, false的话 query: 'a=123' 默认是false
        AnalysisHost: 是否要解析出来host （即将//之后至下一个/之前的字符串），例如：//foo/bar 会被解析为{host: 'foo', pathname: '/bar},否则{pathname: '//foo/bar'}.默认是false
        
        作者：Macchiato_go
        链接：https://www.jianshu.com/p/d6d71ec109ef
        来源：简书
        简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
        
        

    • resolve(from, to)

      • 作用：以一种 Web 浏览器解析超链接的方式把一个目标 URL 解析成相对于一个基础 URL。

      • 参数：

        from: 解析时对应的基本的url
        to:要解析的超链接url
        
        

      • 例子：

        const url = require('url');
        url.resolve('/one/two/three', 'four');         // '/one/two/four'
        url.resolve('http://example.com/', '/one');    // 'http://example.com/one'
        url.resolve('http://example.com/one', '/two'); // 'http://example.com/two'
        
        

    • format(url,options)

      • 虽然URL对象的toString()方法和href属性都可以返回URL的序列化的字符串。然而，两者都不可以被自定义。而url.format(URL[, options])方法允许输出的基本自定义。

      • 参数：

        url: 一个WHATWG URL对象
        options:
        
        1. auth: 如果序列化的URL字符串应该包含用户名和密码为true，否则为false。默认为true。
        2. fragment: 如果序列化的URL字符串应该包含分段为true，否则为false。默认为true。即是不是需要包含哈希值
        3. search: 如果序列化的URL字符串应该包含搜索查询为true，否则为false。默认为true。
        4. unicode: true 如果出现在URL字符串主机元素里的Unicode字符应该被直接编码而不是使用Punycode编码为true，默认为false。
           返回一个WHATWG URL对象的可自定义序列化的URL字符串表达。
        
        作者：Macchiato_go
        链接：https://www.jianshu.com/p/d6d71ec109ef
        来源：简书
        简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
        
        

      • 例子：

         const { URL } = require('url');
          const myURL = new URL('https://a:b@你好你好?abc#foo');
        
        console.log(myURL.href);
          // 输出 https://a:b@xn--6qqa088eba/?abc#foo
        
        console.log(myURL.toString());
          // 输出 https://a:b@xn--6qqa088eba/?abc#foo
        
        console.log(url.format(myURL, { fragment: false, unicode: true, auth: false }));
          // 输出 'https://你好你好/?abc'
        
        

    • new URL(input[, base])

      • 注意: 根据浏览器的约定，URL 对象的所有属性都是在类的原型上实现为getter和setter，而不是作为对象本身的数据属性。因此，与[遗留的urlObjects][]不同，在 URL 对象的任何属性(例如 delete myURL.protocol，delete myURL.pathname等)上使用 delete 关键字没有任何效果，但仍返回 true。

      • 作用

        通过将input解析到base上创建一个新的URL对象。如果base是一个字符串，则解析方法与new URL(base)相同。
        
        

      • 参数

        input: 解析的输入url
        base: 如果“input”是相对url，则为要解析的基本url
        
        

      • 例子

        const { URL } = require('url');
        const myURL = new URL('/foo', 'https://example.org/');
        	// https://example.org/foo
        
        //如果input或base是无效URLs，将会抛出TypeError。请注意给定值将被强制转换为字符串。
        const { URL } = require('url');
        const myURL = new URL({ toString: () => 'https://example.org/' });
        	// https://example.org/
          
        //存在于input主机名中的Unicode字符将被使用Punycode算法自动转换为ASCII。
        const { URL } = require('url');
        const myURL = new URL('https://你好你好');
        	// https://xn--6qqa088eba/
        
        

  • HTTP 模块概要

    • http.createServer([options][, requestListener])
    • http.get(options[, callback])
    • 简易的爬虫

  • 代理跨域处理

  • QueryString 参数处理

    • querystring.escape(str)
    • querystring.unescape(str)
    • querystring.parse(str[, sep[, eq[, options]]])
    • querystring.stringify(obj[, sep[, eq[, options]]])

  • request 方法

  • 事件 events 模块

  • Stream 流模块

前端的异步流程

• 传统的原生异步

  • 回调函数

  • 事件

    • 使用异步流程工具（ 别人封装好的东西 ）

      1. es6 Promise【重点掌握】

          Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
         
            所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 
            Promise 对象的状态不受外界影响
         
            三种状态:
         
            pending：进行中
            fulfilled :已经成功
            rejected 已经失败
            状态改变： 
            Promise对象的状态改变，只有两种可能：
         
            从pending变为fulfilled
            从pending变为rejected。
            这两种情况只要发生，状态就凝固了，不会再变了，这时就称为resolved（已定型）
         
         

      2. es6 generator函数

          generator函数
             在function关键字后面加一个* 这样定义的函数就叫做generator函数
         
             通过yield关键字来定义任务
             例：function* fn () {
           			yield '任务一'
           			yield '任务二'
           			return '任务'
                 }
                 
             通过fn().next() 来执行任务
         
             value表示yield关键字后任务执行的结果
             done表示当前定义的所有的任务是否执行完成的一个状态
         
             理解： 
               多任务的定义，多任务执行 
               让自己定义的多个任务依次执行，上一个任务如果没有完成，下一个任务就不会开始
         
         

      3. es6( 7 ) async 函数【重点掌握】

         async函数
             es6提供
             配合关键字  await使用
         
             await 表示，等待，任务一执行结束之后，才会执行任务二
             
            例：async function fn () {
                   const result = await '任务一'
                   console.log( result )
                   console.log( '任务二' )
         		}
         
         		fn()
         		//任务一  任务二
         
         

      4. node.js中的 nextTick setImmudiate

         nextTick()的回调函数执行的优先级要高于setImmediate();
         
            process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
         
            在具体实现上,process.nextTick()的回调函数保存在一个数组中,
            setImmediate()的结果则是保存在链表中.
            在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
            而setImmediate()在每轮循环中执行链表中的一个回调函数.
         
         

         • 总结

           nextTick setImmediate (轮询： 一个事件往复执行，那么每一次执行完成，我们就认为是一个轮询) 事件轮询前，使用nextTick;事件轮询后，使用setImmediate.

           nextTick > 回调函数 > setImmediate

           异步流程的任务是放在异步队列中的，异步队列只有在主线程执行完之后采取执行

• 第三方的 async.js 库

  参考资料

  1. Promise
     https://blog.csdn.net/MrJavaweb/article/details/79475949
  2. Generator
     https://www.cnblogs.com/imwtr/p/5913294.html
  3. Async-await
  4. Node.js 中的nextTick()和setimmediate()
     https://www.cnblogs.com/5ishare/p/5268273.html
  5. async库
     https://caolan.github.io/async/

  参考文档
  Event-loop
  http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
  史上最易读懂的 Promise/A+ 完全实现
  https://zhuanlan.zhihu.com/p/21834559

npm scripts npm脚本

• 明白为什么要使用npm脚本 集中存储当前项目的所有脚本命令
• npm脚本使用 ：
  • npm run xxx
• npm多脚本执行：
  • npm run xxx & npm run xxx
  • npm run xxx && npm run xxx
• npm脚本可以简写，但是仅限一下几个
  1. npm start
  2. npm stop
  3. npm test
  4. npm restart

express

1. 为什么要学习express?
   • express是Node.js的核心框架
   • express可以帮助我们快速构建web服务器 / api服务器
   • express提供了一个快速生成工具 express-generator
     • 快速生成工具： 帮助我们快速创建一个项目的工具
2. 安装express-generator

• 全局安装
  $ npm i express-generator -g
$ cnpm i express-generator -g
$ yarn add express-generator global

• 如果你的npm版本 在 5.2+以上，那么你可以不使用全局安装，使用npx就可以了

  格式：

  $ npx express 模板配置 项目名称

  举例：

  $ npx express -e express_demo

  解释：
  -e ： 指的是使用一个叫做ejs的模板 index.ejs 可以兼容html标签，可以书写js语法

3. 项目目录结构

• bin
  • www ： 启动了一个静态服务器（ web服务器 ）
• node_modules ： 整个项目的依赖包
• public ： 静态资源文件
• routes ： 路由文件夹
• view
  • xxx.ejs ：项目的模板
• app.js ： 整个项目的入口文件
• package.json ： 整个项目的依赖配置文件

4. app.js文件代码解读
   • app对象的功能
     • 是为了使用一些具有特定功能的函数（中间件 ）
     • 通过 app.use ( ) 方法来使用这些中间件
   • 中间件分类
     • 应用级中间件 cors
     • 路由中间件 app.get( ‘/’, function ( req,res,next ) {})
     • 错误处理中间件 function ( err , req,res,next ) {}
5. 在express中创建一个页面出来

总结： 以上express项目为后端渲染的项目

ejs模板语法

  <% '脚本' 标签，用于流程控制，无输出。
  <%= 输出数据到模板（输出是转义 HTML 标签） （ 不会编译html标签）
  <%- 输出非转义的数据到模板( 会编译html标签 )

什么是流程控制？

条件判断：if；
循环控制：for 、forEach 、while、do…while；

后端渲染

后端通过一个模板（ 兼容html ） + 后端模板语法 ----> html ----> 发送到前台

这种类型项目我们叫它 ‘ 前后端不分离的项目’

如果将来你遇到这种类型项目：
java： 先找java在你的电脑搭建java运行环境

express创建api服务器（ 接口 ）

1. api服务器需要使用测试用具来测试，不能用浏览器展示 ；
   总结： api服务器就是给前端打造接口；

注意： 后端工程师给前端工程师发送的接口数据类型时一个json类型的字符串
前端工程师需要用 JSON.parse() 转换；

2. restful api 规则 （ 暴露接口的规则 ）；

举例：
http://localhost:3000/product 商品接口 ；

要求： 删除商品中的一条 

http://localhost:3000/product/delete   删除一条商品的接口

要求： 添加一条商品

http://localhost:3000/product/add  添加一条商品接口

要求： 修改一条商品的信息

http://localhost:3000/product/change 修改一条商品接口

• 上面这种做法对后端压力比较大,对一个的数据的操作，接口太多了；

  为了解决上面的冗余,我们使用了restful api的规则；

• 什么是restful api ?

  • 一个接口用不同数据请求方式来暴露；
  • 将来接口只有一个，但是数据请求方式有多个；

• 总结：

  • 使用restful api 来暴露接口（ 多个数据请求的接口 ）；
  • cors中间件的跨域；
  • 前端发来的数据， 后端如何接受；

• get方法： req.query；

• post方法： req.body；

  例：
  //get
  conset {username,assword} = req.query;
  //post
  conset {username,assword} =  req.body;