Node.js -(最全)基础+全栈项目

一、Node.js基础

1. 认识Node.js

Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

Nodejs是基于V8引擎,V8是Google发布的开源JavaScript引擎,本身就是用于Chrome浏览器的js解释部分,但是Ryan Dahl 这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件。

01 nodejs的特性
  • Nodejs语法完全是js语法,只要你懂js基础就可以学会Nodejs后端开发
  • NodeJs超强的高并发能力,实现高性能服务器
  • 开发周期短、开发成本低、学习成本低
02 使用 Node.js 需要了解多少 JavaScript

http://nodejs.cn/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs

03 浏览器环境vs node环境

image-20220209152247426

Node.js 可以解析JS代码(没有浏览器安全级别的限制)提供很多系统级别的API,如:

  • 文件的读写 (File System)

    const fs = require('fs')
    
    fs.readFile('./ajax.png', 'utf-8', (err, content) => {
      console.log(content)
    })
    
  • 进程的管理 (Process)

    function main(argv) {
      console.log(argv)
    }
    
    main(process.argv.slice(2))
    
  • 网络通信 (HTTP/HTTPS)

    const http = require("http")
    
    http.createServer((req,res) => {
      res.writeHead(200, {
        "content-type": "text/plain"
      })
      res.write("hello nodejs")
      res.end()
    }).listen(3000)
    
2. 开发环境搭建

http://nodejs.cn/download/

image-20220210095903409

3. 模块、包、commonJS

image-20220210100015768

02 CommonJS规范
image-20220210101652166 image-20220210101720533
03 modules模块化规范写法

我们可以把公共的功能 抽离成为一个单独的 js 文件 作为一个模块,默认情况下面这个模块里面的方法或者属性,外面是没法访问的。如果要让外部可以访问模块里面的方法或者属性,就必须在模块里面通过 exports 或者 module.exports 暴露属性或者方法。

m1.js:

const name = 'gp19'

const sayName = () => {
  console.log(name)
}

console.log('module 1')

// 接口暴露方法一:
module.exports = {
  say: sayName
}

// 接口暴露方法二:
exports.say = sayName

// 错误!
exports = {
  say: sayName
}

main.js:

const m1 = require('./m1')
m1.say()
4. Npm&Yarn
01 npm的使用
npm init
npm install 包名 –g  (uninstall,update)
npm install 包名 --save-dev (uninstall,update)
npm list -g (不加-g,列举当前目录下的安装包)
npm info 包名(详细信息) npm info 包名 version(获取最新版本)
npm install md5@1(安装指定版本)
npm outdated(  检查包是否已经过时)


    "dependencies": {    "md5": "^2.1.0"  }  ^ 表示 如果 直接npm install 将会 安md5
    2.*.*      最新版本

    "dependencies": {    "md5": "~2.1.0"  }  ~ 表示 如果 直接npm install 将会 安装md5 2.1.*  最新版本

    "dependencies": {    "md5": "*"  }  * 表示 如果 直接npm install 将会 安装 md5  最新版本
02 全局安装 nrm

NRM (npm registry manager)是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换。

手动切换方法: npm config set registry https://registry.npm.taobao.org

安装 nrm

在命令行执行命令,npm install -g nrm,全局安装nrm。

使用 nrm

执行命令 nrm ls 查看可选的源。 其中,带*的是当前使用的源,上面的输出表明当前源是官方源。

切换 nrm

如果要切换到taobao源,执行命令nrm use taobao。

测试速度

你还可以通过 nrm test 测试相应源的响应时间。

nrm test

扩展:

image-20220210114017616

npm install -g cnpm --registry=https://registry.npmmirror.com
03 yarn使用
npm install -g yarn
对比npm:
    速度超快: Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
    超级安全: 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。

开始新项目
    yarn init 
添加依赖包
    yarn add [package] 
    yarn add [package]@[version] 
    yarn add [package] --dev 
升级依赖包
     yarn upgrade [package]@[version] 
移除依赖包
     yarn remove [package]
     
安装项目的全部依赖
     yarn install 
npm i -g nodemon或者 node-dev自动监听js文件,开启 nodemon  js文件名,文件修改自动更新
5. 内置模块
01 http模块

要使用 HTTP 服务器和客户端,则必须 require('http')

const http = require('http');

// 创建本地服务器来从其接收数据
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({
    data: 'Hello World!'
  }));
});

server.listen(8000);
const http = require('http');

// 创建本地服务器来从其接收数据
const server = http.createServer();

// 监听请求事件
server.on('request', (request, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({
    data: 'Hello World!'
  }));
});

server.listen(8000);
02 url模块

02.1 parse

const url = require('url')
const urlString = 'https://www.baidu.com:443/ad/index.html?id=8&name=mouse#tag=110'
const parsedStr = url.parse(urlString)
console.log(parsedStr)

02.2 format

const url = require('url')
const urlObject = {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.baidu.com:443',
  port: '443',
  hostname: 'www.baidu.com',
  hash: '#tag=110',
  search: '?id=8&name=mouse',
  query: { id: '8', name: 'mouse' },
  pathname: '/ad/index.html',
  path: '/ad/index.html?id=8&name=mouse'
}
const parsedObj = url.format(urlObject)
console.log(parsedObj)

02.3 resolve

const url = require('url')
var a = url.resolve('/one/two/three', 'four')  ( 注意最后加/ ,不加/的区别 )
var b = url.resolve('http://example.com/', '/one')
var c = url.resolve('http://example.com/one', '/two')
console.log(a + "," + b + "," + c)
03 querystring模块

03.1 parse

const querystring = require('querystring')
var qs = 'x=3&y=4'
var parsed = querystring.parse(qs)
console.log(parsed)

03.2 stringify

const querystring = require('querystring')
var qo = {
  x: 3,
  y: 4
}
var parsed = querystring.stringify(qo)
console.log(parsed)

03.3 escape/unescape

image-20220213211406894 image-20220213211423142
const querystring = require('querystring')
var str = 'id=3&city=北京&url=https://www.baidu.com'
var escaped = querystring.escape(str)
console.log(escaped)
const querystring = require('querystring')
var str = 'id%3D3%26city%3D%E5%8C%97%E4%BA%AC%26url%3Dhttps%3A%2F%2Fwww.baidu.com'
var unescaped = querystring.unescape(str)
console.log(unescaped)
04 http模块补充

04.1 接口:jsonp

const http = require('http')
const url = require('url')

const app = http.createServer((req, res) => {
  let urlObj = url.parse(req.url, true)

  switch (urlObj.pathname) {
    case '/api/user':
      res.end(`${urlObj.query.cb}({"name": "gp145"})`)
      break
    default:
      res.end('404.')
      break
  }
})

app.listen(8080, () => {
  console.log('localhost:8080')
})

04.2 跨域:CORS

const http = require('http')
const url = require('url')
const querystring = require('querystring')

const app = http.createServer((req, res) => {
  let data = ''
  let urlObj = url.parse(req.url, true)

  res.writeHead(200, {
    'content-type': 'application/json;charset=utf-8',
    'Access-Control-Allow-Origin': '*'
  })

  req.on('data', (chunk) => {
    data += chunk
  })

  req.on('end', () => {
    responseResult(querystring.parse(data))
  })

  function responseResult(data) {
    switch (urlObj.pathname) {
      case '/api/login':
        res.end(JSON.stringify({
          message: data
        }))
        break
      default:
        res.end('404.')
        break
    }
  }
})

app.listen(8080, () => {
  console.log('localhost:8080')
})

04.3 模拟get

var http = require('http')
var https = require('https')

// 1、接口 2、跨域
const server = http.createServer((request, response) => {
  var url = request.url.substr(1)

  var data = ''

  response.writeHeader(200, {
    'content-type': 'application/json;charset=utf-8',
    'Access-Control-Allow-Origin': '*'
  })

  https.get(`https://m.lagou.com/listmore.json${url}`, (res) => {

    res.on('data', (chunk) => {
      data += chunk
    })

    res.on('end', () => {
      response.end(JSON.stringify({
        ret: true,
        data
      }))
    })
  })

})

server.listen(8080, () => {
  console.log('localhost:8080')
})

04.4 模拟post:服务器提交(攻击)

const https = require('https')
const querystring = require('querystring')

const postData = querystring.stringify({
  province: '上海',
  city: '上海',
  district: '宝山区',
  address: '同济支路199号智慧七立方3号楼2-4层',
  latitude: 43.0,
  longitude: 160.0,
  message: '求购一条小鱼',
  contact: '13666666',
  type: 'sell',
  time: 1571217561
})

const options = {
  protocol: 'https:',
  hostname: 'ik9hkddr.qcloud.la',
  method: 'POST',
  port: 443,
  path: '/index.php/trade/add_item',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': Buffer.byteLength(postData)
  }
}

function doPost() {
  let data

  let req = https.request(options, (res) => {
    res.on('data', chunk => data += chunk)
    res.on('end', () => {
      console.log(data)
    })
  })

  req.write(postData)
  req.end()
}

// setInterval(() => {
//   doPost()
// }, 1000)

04.5 爬虫

const https = require('https')
const http = require('http')
const cheerio = require('cheerio')

http.createServer((request, response) => {
  response.writeHead(200, {
    'content-type': 'application/json;charset=utf-8'
  })

  const options = {
    // protocol: 'https:',
    hostname: 'i.maoyan.com',
    port: 443,
    path: '/',
    method: 'GET'
  }

  const req = https.request(options, (res) => {
    let data = ''
    res.on('data', (chunk) => {
      data += chunk
    })

    res.on('end', () => {
      filterData(data)
    })
  })

  function filterData(data) {
    //   console.log(data)
    let $ = cheerio.load(data)
    let $movieList = $('.column.content')
    console.log($movieList)
    let movies = []
    $movieList.each((index, value) => {
      movies.push({
        title: $(value).find('.movie-title .title').text(),
        detail: $(value).find('.detail .actor').text(),
      })
    })

    response.end(JSON.stringify(movies))
  }

  req.end()
}).listen(3000)
05 event模块
const EventEmitter = require('events')

class MyEventEmitter extends EventEmitter {}

const event = new MyEventEmitter()

event.on('play', (movie) => {
  console.log(movie)
})

event.emit('play', '我和我的祖国')
event.emit('play', '中国机长')
06 fs文件操作模块
const fs = require('fs')

// 创建文件夹
fs.mkdir('./logs', (err) => {
  console.log('done.')
})

// 文件夹改名
fs.rename('./logs', './log', () => {
  console.log('done')
})

// 删除文件夹
fs.rmdir('./log', () => {
  console.log('done.')
})

// 写内容到文件里
fs.writeFile(
  './logs/log1.txt',
  'hello',
  // 错误优先的回调函数
  (err) => {
    if (err) {
      console.log(err.message)
    } else {
      console.log('文件创建成功')
    }
  }
)

// 给文件追加内容
fs.appendFile('./logs/log1.txt', '\nworld', () => {
  console.log('done.')
})

// 读取文件内容
fs.readFile('./logs/log1.txt', 'utf-8', (err, data) => {
  console.log(data)
})

// 删除文件
fs.unlink('./logs/log1.txt', (err) => {
  console.log('done.')
})

// 批量写文件
for (var i = 0; i < 10; i++) {
  fs.writeFile(`./logs/log-${i}.txt`, `log-${i}`, (err) => {
    console.log('done.')
  })
}

// 读取文件/目录信息
fs.readdir('./', (err, data) => {
  data.forEach((value, index) => {
    fs.stat(`./${value}`, (err, stats) => {
      // console.log(value + ':' + stats.size)
      console.log(value + ' is ' + (stats.isDirectory() ? 'directory' : 'file'))
    })
  })
})

// 同步读取文件
try {
  const content = fs.readFileSync('./logs/log-1.txt', 'utf-8')
  console.log(content)
  console.log(0)
} catch (e) {
  console.log(e.message)
}

// 异步读取文件:方法一
fs.readFile('./logs/log-0.txt', 'utf-8', (err, content) => {
  console.log(content)
  console.log(0)
})
console.log(1)

// 异步读取文件:方法二
const fs = require("fs").promises
fs.readFile('./logs/log-0.txt', 'utf-8').then(result => {
  console.log(result)
})

fs模块中,提供同步方法是为了方便使用。那我们到底是应该用异步方法还是同步方法呢?

由于Node环境执行的JavaScript代码是服务器端代码,所以,绝大部分需要在服务器运行期反复执行业务逻辑的代码,必须使用异步代码,否则,同步代码在执行时期,服务器将停止响应,因为JavaScript只有一个执行线程。

服务器启动时如果需要读取配置文件,或者结束时需要写入到状态文件时,可以使用同步代码,因为这些代码只在启动和结束时执行一次,不影响服务器正常运行时的异步执行。

07 stream流模块

stream是Node.js提供的又一个仅在服务区端可用的模块,目的是支持“流”这种数据结构。

什么是流?流是一种抽象的数据结构。想象水流,当在水管中流动时,就可以从某个地方(例如自来水厂)源源不断地到达另一个地方(比如你家的洗手池)。我们也可以把数据看成是数据流,比如你敲键盘的时候,就可以把每个字符依次连起来,看成字符流。这个流是从键盘输入到应用程序,实际上它还对应着一个名字:标准输入流(stdin)。

image-20220407085931744

如果应用程序把字符一个一个输出到显示器上,这也可以看成是一个流,这个流也有名字:标准输出流(stdout)。流的特点是数据是有序的,而且必须依次读取,或者依次写入,不能像Array那样随机定位。

有些流用来读取数据,比如从文件读取数据时,可以打开一个文件流,然后从文件流中不断地读取数据。有些流用来写入数据,比如向文件写入数据时,只需要把数据不断地往文件流中写进去就可以了。

在Node.js中,流也是一个对象,我们只需要响应流的事件就可以了:data事件表示流的数据已经可以读取了,end事件表示这个流已经到末尾了,没有数据可以读取了,error事件表示出错了。

var fs = require('fs');

// 打开一个流:
var rs = fs.createReadStream('sample.txt', 'utf-8');

rs.on('data', function (chunk) {
    console.log('DATA:')
    console.log(chunk);
});

rs.on('end', function () {
    console.log('END');
});

rs.on('error', function (err) {
    console.log('ERROR: ' + err);
});

要注意,data事件可能会有多次,每次传递的chunk是流的一部分数据。

要以流的形式写入文件,只需要不断调用write()方法,最后以end()结束:

var fs = require('fs');

var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream写入文本数据...\n');
ws1.write('END.');
ws1.end();

pipe 就像可以把两个水管串成一个更长的水管一样,两个流也可以串起来。一个Readable流和一个Writable流串起来后,所有的数据自动从Readable流进入Writable流,这种操作叫pipe

在Node.js中,Readable流有一个pipe()方法,就是用来干这件事的。

让我们用pipe()把一个文件流和另一个文件流串起来,这样源文件的所有数据就自动写入到目标文件里了,所以,这实际上是一个复制文件的程序:

const fs = require('fs')

const readstream = fs.createReadStream('./1.txt')
const writestream = fs.createWriteStream('./2.txt')

readstream.pipe(writestream)
08 zlib
image-20220407105916114
const fs = require('fs')
const zlib = require('zlib')

const gzip = zlib.createGzip()

const readstream = fs.createReadStream('./note.txt')
const writestream = fs.createWriteStream('./note2.txt')

readstream
  .pipe(gzip)
  .pipe(writestream)
09 crypto

crypto模块的目的是为了提供通用的加密和哈希算法。用纯JavaScript代码实现这些功能不是不可能,但速度会非常慢。Nodejs用C/C++实现这些算法后,通过cypto这个模块暴露为JavaScript接口,这样用起来方便,运行速度也快。

MD5是一种常用的哈希算法,用于给任意数据一个“签名”。这个签名通常用一个十六进制的字符串表示:

const crypto = require('crypto');

const hash = crypto.createHash('md5');

// 可任意多次调用update():
hash.update('Hello, world!');
hash.update('Hello, nodejs!');

console.log(hash.digest('hex')); 

update()方法默认字符串编码为UTF-8,也可以传入Buffer。

如果要计算SHA1,只需要把'md5'改成'sha1',就可以得到SHA1的结果1f32b9c9932c02227819a4151feed43e131aca40

Hmac算法也是一种哈希算法,它可以利用MD5或SHA1等哈希算法。不同的是,Hmac还需要一个密钥:

const crypto = require('crypto');

const hmac = crypto.createHmac('sha256', 'secret-key');

hmac.update('Hello, world!');
hmac.update('Hello, nodejs!');

console.log(hmac.digest('hex')); // 80f7e22570...

只要密钥发生了变化,那么同样的输入数据也会得到不同的签名,因此,可以把Hmac理解为用随机数“增强”的哈希算法。

AES是一种常用的对称加密算法,加解密都用同一个密钥。crypto模块提供了AES支持,但是需要自己封装好函数,便于使用:

const crypto = require("crypto");

function encrypt (key, iv, data) {
    let decipher = crypto.createCipheriv('aes-128-cbc', key, iv);
    // decipher.setAutoPadding(true);
    return decipher.update(data, 'binary', 'hex') + decipher.final('hex');
}

function decrypt (key, iv, crypted) {
     crypted = Buffer.from(crypted, 'hex').toString('binary');
     let decipher = crypto.createDecipheriv('aes-128-cbc', key, iv);
     return decipher.update(crypted, 'binary', 'utf8') + decipher.final('utf8');
}
key,iv必须是16个字节

可以看出,加密后的字符串通过解密又得到了原始内容。

6. 路由
01 基础
/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
var fs = require("fs")
var path = require("path")

function render(res, path) {
    res.writeHead(200, { "Content-Type": "text/html;charset=utf8" })
    res.write(fs.readFileSync(path, "utf8"))
    res.end()
}


const route = {
    "/login": (req, res) => {
        render(res, "./static/login.html")
    },

    "/home": (req, res) => {
        render(res, "./static/home.html")
    },
    "/404": (req, res) => {
        res.writeHead(404, { "Content-Type": "text/html;charset=utf8" })
        res.write(fs.readFileSync("./static/404.html", "utf8"))
    }
}

02 获取参数

get请求

    "/api/login":(req,res)=>{
        const myURL = new URL(req.url, 'http://127.0.0.1:3000');
        console.log(myURL.searchParams.get("username"))   
        render(res,`{ok:1}`)
    }

post请求

"/api/login": (req, res) => {
        var post = '';
        // 通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量中
        req.on('data', function (chunk) {
            post += chunk;
        });

        // 在end事件触发后,通过querystring.parse将post解析为真正的POST请求格式,然后向客户端返回。
        req.on('end', function () {
            post = JSON.parse(post);
            render(res, `{ok:1}`)
        });
    }
03 静态资源处理
function readStaticFile(req, res) {
    const myURL = new URL(req.url, 'http://127.0.0.1:3000')
    var filePathname = path.join(__dirname, "/static", myURL.pathname);

    if (fs.existsSync(filePathname)) {
        // console.log(1111)
        res.writeHead(200, { "Content-Type": `${mime.getType(myURL.pathname.split(".")[1])};charset=utf8` })
        res.write(fs.readFileSync(filePathname, "utf8"))
        res.end()
        return true
    } else {
        return false
    }
}

二、Express

https://www.expressjs.com.cn/

基于 Node.js 平台,快速、开放、极简的 web 开发框架。

1.特色
image-20220411103139587
2.安装
$ npm install express --save
3.路由

路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求。

路由是由一个 URI、HTTP 请求(GET、POST等)和若干个句柄组成,它的结构如下: app.METHOD(path, [callback…], callback), app 是 express 对象的一个实例, METHOD 是一个 HTTP 请求方法, path 是服务器上的路径, callback 是当路由匹配时要执行的函数。

下面是一个基本的路由示例:

var express = require('express');
var app = express();

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
  res.send('hello world');
});

路由路径和请求方法一起定义了请求的端点,它可以是字符串、字符串模式或者正则表达式。

// 匹配根路径的请求
app.get('/', function (req, res) {
  res.send('root');
});

// 匹配 /about 路径的请求
app.get('/about', function (req, res) {
  res.send('about');
});

// 匹配 /random.text 路径的请求
app.get('/random.text', function (req, res) {
  res.send('random.text');
});

使用字符串模式的路由路径示例:

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});

// 匹配 /ab/******
app.get('/ab/:id', function(req, res) {
  res.send('aaaaaaa');
});

// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

使用正则表达式的路由路径示例:

// 匹配任何路径中含有 a 的路径:
app.get(/a/, function(req, res) {
  res.send('/a/');
});

// 匹配 butterfly、dragonfly,不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
  res.send('/.*fly$/');
});

可以为请求处理提供多个回调函数,其行为类似 中间件。唯一的区别是这些回调函数有可能调用 next(‘route’) 方法而略过其他路由回调函数。可以利用该机制为路由定义前提条件,如果在现有路径上继续执行没有意义,则可将控制权交给剩下的路径。

app.get('/example/a', function (req, res) {
  res.send('Hello from A!');
});

使用多个回调函数处理路由(记得指定 next 对象):

app.get('/example/b', function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});

使用回调函数数组处理路由:

var cb0 = function (req, res, next) {
  console.log('CB0')
  next()
}

var cb1 = function (req, res, next) {
  console.log('CB1')
  next()
}

var cb2 = function (req, res) {
  res.send('Hello from C!')
}

app.get('/example/c', [cb0, cb1, cb2])

混合使用函数和函数数组处理路由:

var cb0 = function (req, res, next) {
  console.log('CB0')
  next()
}

var cb1 = function (req, res, next) {
  console.log('CB1')
  next()
}

app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('response will be sent by the next function ...')
  next()
}, function (req, res) {
  res.send('Hello from D!')
})
4.中间件

Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。

中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。

中间件的功能包括:

  • 执行任何代码。
  • 修改请求和响应对象。
  • 终结请求-响应循环。
  • 调用堆栈中的下一个中间件。

如果当前中间件没有终结请求-响应循环,则必须调用 next() 方法将控制权交给下一个中间件,否则请求就会挂起。

Express 应用可使用如下几种中间件:

  • 应用级中间件
  • 路由级中间件
  • 错误处理中间件
  • 内置中间件
  • 第三方中间件

使用可选则挂载路径,可在应用级别或路由级别装载中间件。另外,你还可以同时装在一系列中间件函数,从而在一个挂载点上创建一个子中间件栈。

(1)应用级中间件

应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要处理的 HTTP 请求的方法,例如 GET, PUT, POST 等等,全部小写。例如:

var app = express()

// 没有挂载路径的中间件,应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})
(2)路由级中间件

路由级中间件和应用级中间件一样,只是它绑定的对象为 express.Router()。

var router = express.Router()
var app = express()
var router = express.Router()

// 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

// 一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl)
  next()
}, function (req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

// 一个中间件栈,处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next('route')
  // 负责将控制权交给栈中下一个中间件
  else next() //
}, function (req, res, next) {
  // 渲染常规页面
  res.render('regular')
})

// 处理 /user/:id, 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id)
  res.render('special')
})

// 将路由挂载至应用
app.use('/', router)
(3)错误处理中间件

错误处理中间件和其他中间件定义类似,只是要使用 4 个参数,而不是 3 个,其签名如下: (err, req, res, next)。

app.use(function(err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})
(4)内置的中间件

express.static 是 Express 唯一内置的中间件。它基于 serve-static,负责在 Express 应用中提托管静态资源。每个应用可有多个静态目录。

app.use(express.static('public'))
app.use(express.static('uploads'))
app.use(express.static('files'))
(5)第三方中间件

安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。

下面的例子安装并加载了一个解析 cookie 的中间件: cookie-parser

$ npm install cookie-parser
var express = require('express')
var app = express()
var cookieParser = require('cookie-parser')

// 加载用于解析 cookie 的中间件
app.use(cookieParser())
5. 获取请求参数

get

req.query

post

app.use(express.urlencoded({extended:false}))
app.use(express.json())
req.body
6.利用 Express 托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 public 目录放置了图片、CSS 和 JavaScript 文件,你就可以:

app.use(express.static('public'))

现在,public 目录下面的文件就可以访问了。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

所有文件的路径都是相对于存放目录的,因此,存放静态文件的目录名不会出现在 URL 中。

如果你的静态资源存放在多个目录下面,你可以多次调用 express.static 中间件:

app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时,express.static 中间件会根据目录添加的顺序查找所需的文件。

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:

app.use('/static', express.static('public'))

现在,你就可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
7.服务端渲染(模板引擎)
image-20220411104609389
npm i ejs

需要在应用中进行如下设置才能让 Express 渲染模板文件:

  • views, 放模板文件的目录,比如: app.set(‘views’, ‘./views’)
  • view engine, 模板引擎,比如: app.set(‘view engine’, ‘ejs’)
image-20220411104652068

三、MongoDB

1.关系型与非关系型数据库
image-20220413085332378 image-20220413090707891

image-20220413090406721

image-20220413090614205

2.安装数据库

https://docs.mongodb.com/manual/administration/install-community/

3.启动数据库
(1)windows
mongod --dbpath d:/data/db
mongo
(2)mac
mongod --config /usr/local/etc/mongod.conf
mongo
4.在命令行中操作数据库
image-20220413090814836 image-20220413090825381 image-20220413090837613 image-20220413090858199 image-20220413090907539 image-20220413090916971
5.可视化工具进行增删改查

Robomongo Robo3T adminMongo

image-20220413091031852

6.nodejs连接操作数据库

连接数据库

const mongoose = require("mongoose")

mongoose.connect("mongodb://127.0.0.1:27017/company-system")

创建模型

const mongoose = require("mongoose")

const Schema = mongoose.Schema

const UserType = {
    username:String,
    password:String,
    gender:Number,
    introduction:String,
    avatar:String,
    role:Number
}
const UserModel = mongoose.model("user",new Schema(UserType))
module.exports  = UserModel 

增加数据

UserModel.create({
    introduction,username,gender,avatar,password,role
})

查询数据

UserModel.find({username:"kerwin"},["username","role","introduction","password"]).sort({createTime:-1}).skip(10).limit(10)

更新数据

UserModel.updateOne({
    _id
},{
    introduction,username,gender,avatar
})

删除数据

UserModel.deleteOne({_id})

四、接口规范与业务分层

1.接口规范
image-20220414094020921 image-20220414094043782
2.业务分层

image-20220414094653807

五、登录鉴权

「HTTP 无状态」我们知道,HTTP 是无状态的。也就是说,HTTP 请求方和响应方间无法维护状态,都是一次性的,它不知道前后的请求都发生了什么。但有的场景下,我们需要维护状态。最典型的,一个用户登陆微博,发布、关注、评论,都应是在登录后的用户状态下的。「标记」那解决办法是什么呢?image-20220414095345868

const express = require("express");
const session = require("express-session");
const MongoStore = require("connect-mongo");
const app = express();


app.use(
  session({
    secret: "this is session", // 服务器生成 session 的签名
    resave: true, 
    saveUninitialized: true, //强制将为初始化的 session 存储
    cookie: {
      maxAge: 1000 * 60 * 10,// 过期时间
      secure: false, // 为 true 时候表示只有 https 协议才能访问cookie
    },
    rolling: true, //为 true 表示 超时前刷新,cookie 会重新计时; 为 false 表示在超时前刷新多少次,都是按照第一次刷新开始计时。
    store: MongoStore.create({
      mongoUrl: 'mongodb://127.0.0.1:27017/kerwin_session',
      ttl: 1000 * 60 * 10 // 过期时间
  }),

  })
);

app.use((req,res,next)=>{
  if(req.url==="/login"){
    next()
    return;
  }
  if(req.session.user){
      req.session.garbage = Date();
      next();
  }else{
         res.redirect("/login")   
  }
})
2. JSON Web Token (JWT)
(1)介绍

image-20220415082822828

我为什么要保存这可恶的session呢, 只让每个客户端去保存该多好?

image-20220415083015066

当然, 如果一个人的token 被别人偷走了, 那我也没办法, 我也会认为小偷就是合法用户, 这其实和一个人的session id 被别人偷走是一样的。

这样一来, 我就不保存session id 了, 我只是生成token , 然后验证token , 我用我的CPU计算时间获取了我的session 存储空间 !

解除了session id这个负担, 可以说是无事一身轻, 我的机器集群现在可以轻松地做水平扩展, 用户访问量增大, 直接加机器就行。 这种无状态的感觉实在是太好了!

缺点:

  1. 占带宽,正常情况下要比 session_id 更大,需要消耗更多流量,挤占更多带宽,假如你的网站每月有 10 万次的浏览器,就意味着要多开销几十兆的流量。听起来并不多,但日积月累也是不小一笔开销。实际上,许多人会在 JWT 中存储的信息会更多;
  2. 无法在服务端注销,那么久很难解决劫持问题;
  3. 性能问题,JWT 的卖点之一就是加密签名,由于这个特性,接收方得以验证 JWT 是否有效且被信任。对于有着严格性能要求的 Web 应用,这并不理想,尤其对于单线程环境。

注意:

CSRF攻击的原因是浏览器会自动带上cookie,而不会带上token;

以CSRF攻击为例:

cookie:用户点击了链接,cookie未失效,导致发起请求后后端以为是用户正常操作,于是进行扣款操作;
token:用户点击链接,由于浏览器不会自动带上token,所以即使发了请求,后端的token验证不会通过,所以不会进行扣款操作;

(2)实现
//jsonwebtoken 封装
const jsonwebtoken = require("jsonwebtoken")
const secret = "kerwin"
const JWT = {
    generate(value,exprires){
        return jsonwebtoken.sign(value,secret,{expiresIn:exprires})
    },
    verify(token){
        try{
            return jsonwebtoken.verify(token,secret)
        }catch(e){
            return false
        }
    }
}

module.exports = JWT
//node中间件校验
app.use((req,res,next)=>{
  // 如果token有效 ,next() 
  // 如果token过期了, 返回401错误
  if(req.url==="/login"){
    next()
    return;
  }

  const token = req.headers["authorization"].split(" ")[1]
  if(token){
    var payload = JWT.verify(token)
    // console.log(payload)
    if(payload){
      const newToken = JWT.generate({
        _id:payload._id,
        username:payload.username
      },"1d")
      res.header("Authorization",newToken)
      next()
    }else{
      res.status(401).send({errCode:"-1",errorInfo:"token过期"})
    }
  }
})
 //生成token
const token = JWT.generate({
    _id: result[0]._id,
    username: result[0].username
}, "1d")

res.header("Authorization", token)
//前端拦截
/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import axios from 'axios'
// Add a request interceptor
axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem("token")
    config.headers.Authorization = `Bearer ${token}`

    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {

    const {authorization } = response.headers
    authorization && localStorage.setItem("token",authorization)
    return response;
  }, function (error) {

    const {status} = error.response
    if(status===401){
        localStorage.removeItem("token")
        window.location.href="/login"
    }
    return Promise.reject(error);
  });

六、文件上传管理

Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。

注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。

npm install --save multer
//前后端分离-前端

const params = new FormData()
params.append('kerwinfile', file.file)
params.append('username', this.username)
const config = {
    headers: {
        "Content-Type":"multipart/form-data"
    }
}
http.post('/api/upload', params, config).then(res => {
    this.imgpath = 'http://localhost:3000' + res.data
})    

Multer 会添加一个 body 对象 以及 filefiles 对象 到 express 的 request 对象中。 body 对象包含表单的文本域信息,filefiles 对象包含对象表单上传的文件信息。


//前后端分离-后端
router.post('/upload', upload.single('kerwinfile'),function(req, res, next) {
    console.log(req.file)
})

七、APIDOC - API 文档生成工具

apidoc 是一个简单的 RESTful API 文档生成工具,它从代码注释中提取特定格式的内容生成文档。支持诸如 Go、Java、C++、Rust 等大部分开发语言,具体可使用 apidoc lang 命令行查看所有的支持列表。

apidoc 拥有以下特点:

  1. 跨平台,linux、windows、macOS 等都支持;
  2. 支持语言广泛,即使是不支持,也很方便扩展;
  3. 支持多个不同语言的多个项目生成一份文档;
  4. 输出模板可自定义;
  5. 根据文档生成 mock 数据;
npm install -g apidoc

image-20220415085343339

注意:

(1) 在当前文件夹下 apidoc.json

{
    "name": "****接口文档",
    "version": "1.0.0",
    "description": "关于****的接口文档描述",
    "title": "****"
}

(2)可以利用vscode apidoc snippets 插件创建api

八、Koa2

image-20220417075653414
1.简介

koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。

2. 快速开始
2.1 安装koa2
# 初始化package.json
npm init

# 安装koa2 
npm install koa
2.2 hello world 代码
const Koa = require('koa')
const app = new Koa()

app.use( async ( ctx ) => {
  ctx.body = 'hello koa2' //json数据
})

app.listen(3000)

image-20220417092053231

2.3 启动demo
node index.js
3. koa vs express

通常都会说 Koa 是洋葱模型,这重点在于中间件的设计。但是按照上面的分析,会发现 Express 也是类似的,不同的是Express 中间件机制使用了 Callback 实现,这样如果出现异步则可能会使你在执行顺序上感到困惑,因此如果我们想做接口耗时统计、错误处理 Koa 的这种中间件模式处理起来更方便些。最后一点响应机制也很重要,Koa 不是立即响应,是整个中间件处理完成在最外层进行了响应,而 Express 则是立即响应。

3.1更轻量
  • koa 不提供内置的中间件;
  • koa 不提供路由,而是把路由这个库分离出来了(koa/router)
3.2 Context对象

koa增加了一个Context的对象,作为这次请求的上下文对象(在koa2中作为中间件的第一个参数传入)。同时Context上也挂载了Request和Response两个对象。和Express类似,这两个对象都提供了大量的便捷方法辅助开发, 这样的话对于在保存一些公有的参数的话变得更加合情合理

3.3 异步流程控制

​ express采用callback来处理异步, koa v1采用generator,koa v2 采用async/await。

​ generator和async/await使用同步的写法来处理异步,明显好于callback和promise,

3.4 中间件模型

​ express基于connect中间件,线性模型;

​ koa中间件采用洋葱模型(对于每个中间件,在完成了一些事情后,可以非常优雅的将控制权传递给下一个中间件,并能够等待它完成,当后续的中间件完成处理后,控制权又回到了自己)

image-20220417083817823

image-20220417085913567

//同步
var express = require("express")
var app = express()

app.use((req,res,next)=>{
    console.log(1)
    next()
    console.log(4)
    res.send("hello")
})
app.use(()=>{
    console.log(3)
})

app.listen(3000)
//异步
var express = require("express")
var app = express()

app.use(async (req,res,next)=>{
    console.log(1)
    await next()
    console.log(4)
    res.send("hello")
})
app.use(async ()=>{
    console.log(2)
    await delay(1)
    console.log(3)
})

function delay(time){
 return new Promise((resolve,reject)=>{
    setTimeout(resolve,1000)
 })
}
//同步
var koa = require("koa")
var app = new koa()

app.use((ctx,next)=>{
    console.log(1)
    next()
    console.log(4)
    ctx.body="hello"
})
app.use(()=>{
    console.log(3)
})

app.listen(3000)

//异步
var koa = require("koa")
var app = new koa()

app.use(async (ctx,next)=>{
    console.log(1)
    await next()
    console.log(4)
    ctx.body="hello"
}) 
app.use(async ()=>{
    console.log(2)
    await delay(1)
    console.log(3)
})

function delay(time){
 return new Promise((resolve,reject)=>{
    setTimeout(resolve,1000)
 })
}

app.listen(3000)
4. 路由
4.1基本用发
var Koa = require("koa")
var Router = require("koa-router")

var app = new Koa()
var router = new Router()

router.post("/list",(ctx)=>{
    ctx.body=["111","222","333"]
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
4.2 router.allowedMethods作用

image-20220417102845079

4.3 请求方式

Koa-router 请求方式: getputpostpatchdeletedel ,而使用方法就是 router.方式() ,比如 router.get()router.post() 。而 router.all() 会匹配所有的请求方法。

var Koa = require("koa")
var Router = require("koa-router")

var app = new Koa()
var router = new Router()

router.get("/user",(ctx)=>{
    ctx.body=["aaa","bbb","ccc"]
})
.put("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"user update"}
})
.post("/user",(ctx)=>{
    ctx.body={ok:1,info:"user post"}
})
.del("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"user del"}
})


app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
4.4 拆分路由

list.js

var Router = require("koa-router")
var router = new Router()
router.get("/",(ctx)=>{
    ctx.body=["111","222","333"]
})
.put("/:id",(ctx)=>{
    ctx.body={ok:1,info:"list update"}
})
.post("/",(ctx)=>{
    ctx.body={ok:1,info:"list post"}
})
.del("/:id",(ctx)=>{
    ctx.body={ok:1,info:"list del"}
})
module.exports = router

index.js

var Router = require("koa-router")
var router = new Router()
var user = require("./user")
var list = require("./list")
router.use('/user', user.routes(), user.allowedMethods())
router.use('/list', list.routes(), list.allowedMethods())

module.exports = router

entry入口

var Koa = require("koa")
var router = require("./router/index")

var app = new Koa()
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
4.5 路由前缀
router.prefix('/api')
4.6 路由重定向
router.get("/home",(ctx)=>{
    ctx.body="home页面"
})
//写法1 
router.redirect('/', '/home');
//写法2
router.get("/",(ctx)=>{
    ctx.redirect("/home")
})
5. 静态资源
const Koa = require('koa')
const path = require('path')
const static = require('koa-static')

const app = new Koa()

app.use(static(
  path.join( __dirname,  "public")
))


app.use( async ( ctx ) => {
  ctx.body = 'hello world'
})

app.listen(3000, () => {
  console.log('[demo] static-use-middleware is starting at port 3000')
})
6. 获取请求参数
6.1get参数

在koa中,获取GET请求数据源头是koa中request对象中的query方法或querystring方法,query返回是格式化好的参数对象,querystring返回的是请求字符串,由于ctx对request的API有直接引用的方式,所以获取GET请求数据有两个途径。

  • 是从上下文中直接获取 请求对象ctx.query,返回如 { a:1, b:2 } 请求字符串 ctx.querystring,返回如 a=1&b=2
  • 是从上下文的request对象中获取 请求对象ctx.request.query,返回如 { a:1, b:2 } 请求字符串 ctx.request.querystring,返回如 a=1&b=2
6.2post参数

对于POST请求的处理,koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中

const bodyParser = require('koa-bodyparser')

// 使用ctx.body解析中间件
app.use(bodyParser())
7. ejs模板
7.1 安装模块
# 安装koa模板使用中间件
npm install --save koa-views

# 安装ejs模板引擎
npm install --save ejs
7.2 使用模板引擎

文件目录

├── package.json
├── index.js
└── view
    └── index.ejs

./index.js文件

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()

// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'ejs'
}))

app.use( async ( ctx ) => {
  let title = 'hello koa2'
  await ctx.render('index', {
    title,
  })
})

app.listen(3000)

./view/index.ejs 模板

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
</body>
</html>

koa提供了从上下文直接读取、写入cookie的方法

  • ctx.cookies.get(name, [options]) 读取上下文请求中的cookie
  • ctx.cookies.set(name, value, [options]) 在上下文中写入cookie
8.2 session
  • koa-session-minimal 适用于koa2 的session中间件,提供存储介质的读写接口 。

    const session = require('koa-session-minimal')
    app.use(session({
        key: 'SESSION_ID',
        cookie: {
            maxAge:1000*60
        }
    }))
    
    app.use(async (ctx, next) => {
        //排除login相关的路由和接口
        if (ctx.url.includes("login")) {
            await next()
            return
        }
    
        if (ctx.session.user) {
            //重新设置以下sesssion
            ctx.session.mydate = Date.now()
            await next()
        } else {
    
            ctx.redirect("/login")
        }
    })
    
    9. JWT
    app.use(async(ctx, next) => {
     //排除login相关的路由和接口
     if (ctx.url.includes("login")) {
         await next()
         return
     }
     const token = ctx.headers["authorization"]?.split(" ")[1]
     // console.log(req.headers["authorization"])
     if(token){
         const payload=  JWT.verify(token)
         if(payload){
             //重新计算token过期时间
             const newToken = JWT.generate({
                 _id:payload._id,
                 username:payload.username
             },"10s")
    
             ctx.set("Authorization",newToken)
             await next()
         }else{
             ctx.status = 401
             ctx.body = {errCode:-1,errInfo:"token过期"}
         }
     }else{
         await next()
     }
    })
    
10.上传文件

https://www.npmjs.com/package/@koa/multer

npm install --save @koa/multer multer
const multer = require('@koa/multer');
const upload = multer({ dest: 'public/uploads/' })

router.post("/",upload.single('avatar'),
(ctx,next)=>{
    console.log(ctx.request.body,ctx.file)
    ctx.body={
        ok:1,
        info:"add user success"
    }
})
11.操作MongoDB
const mongoose = require("mongoose")

mongoose.connect("mongodb://127.0.0.1:27017/kerwin_project")
//插入集合和数据,数据库kerwin_project会自动创建
const mongoose = require("mongoose")
const Schema = mongoose.Schema
const UserType = {
    username:String,
    password:String,
    age:Number,
    avatar:String
}

const UserModel = mongoose.model("user",new Schema(UserType))
// 模型user 将会对应 users 集合, 
module.exports = UserModel

九、MySQL

1.介绍

付费的商用数据库:

  • Oracle,典型的高富帅;
  • SQL Server,微软自家产品,Windows定制专款;
  • DB2,IBM的产品,听起来挺高端;
  • Sybase,曾经跟微软是好基友,后来关系破裂,现在家境惨淡。

这些数据库都是不开源而且付费的,最大的好处是花了钱出了问题可以找厂家解决,不过在Web的世界里,常常需要部署成千上万的数据库服务器,当然不能把大把大把的银子扔给厂家,所以,无论是Google、Facebook,还是国内的BAT,无一例外都选择了免费的开源数据库:

  • MySQL,大家都在用,一般错不了;
  • PostgreSQL,学术气息有点重,其实挺不错,但知名度没有MySQL高;
  • sqlite,嵌入式数据库,适合桌面和移动应用。

作为一个JavaScript全栈工程师,选择哪个免费数据库呢?当然是MySQL。因为MySQL普及率最高,出了错,可以很容易找到解决方法。而且,围绕MySQL有一大堆监控和运维的工具,安装和使用很方便。

image-20220420083146539

2.与非关系数据库区别

关系型和非关系型数据库的主要差异是数据存储的方式。关系型数据天然就是表格式的,因此存储在数据表的行和列中。数据表可以彼此关联协作存储,也很容易提取数据。

与其相反,非关系型数据不适合存储在数据表的行和列中,而是大块组合在一起。非关系型数据通常存储在数据集中,就像文档、键值对或者图结构。你的数据及其特性是选择数据存储和提取方式的首要影响因素。

关系型数据库最典型的数据结构是表,由二维表及其之间的联系所组成的一个数据组织
优点:
1、易于维护:都是使用表结构,格式一致;
2、使用方便:SQL语言通用,可用于复杂查询;
3、复杂操作:支持SQL,可用于一个表以及多个表之间非常复杂的查询。
缺点:
1、读写性能比较差,尤其是海量数据的高效率读写;
2、固定的表结构,灵活度稍欠;
3、高并发读写需求,传统关系型数据库来说,硬盘I/O是一个很大的瓶颈。

非关系型数据库严格上不是一种数据库,应该是一种数据结构化存储方法的集合,可以是文档或者键值对等。

优点:

1、格式灵活:存储数据的格式可以是key,value形式、文档形式、图片形式等等,文档形式、图片形式等等,使用灵活,应用场景广泛,而关系型数据库则只支持基础类型。
2、速度快:nosql可以使用硬盘或者随机存储器作为载体,而关系型数据库只能使用硬盘;
3、高扩展性;
4、成本低:nosql数据库部署简单,基本都是开源软件。

缺点:

1、不提供sql支持;
2、无事务处理;
3、数据结构相对复杂,复杂查询方面稍欠。

3.sql语句

image-20220420092527846

插入:

INSERT INTO `students`(`id`, `name`, `score`, `gender`) VALUES (null,'kerwin',100,1)
//可以不设置id,create_time

更新:

UPDATE `students` SET `name`='tiechui',`score`=20,`gender`=0 WHERE id=2;

删除:

DELETE FROM `students` WHERE id=2;

查询:

查所有的数据所有的字段
SELECT * FROM `students` WHERE 1;

查所有的数据某个字段
SELECT `id`, `name`, `score`, `gender` FROM `students` WHERE 1;

条件查询
SELECT * FROM `students` WHERE score>=80;
SELECT * FROM `students` where score>=80 AND gender=1

模糊查询
SELECT * FROM `students` where name like '%k%'

排序
SELECT id, name, gender, score FROM students ORDER BY score;
SELECT id, name, gender, score FROM students ORDER BY score DESC;

分页查询
SELECT id, name, gender, score FROM students LIMIT 50 OFFSET 0

记录条数
SELECT COUNT(*) FROM students;
SELECT COUNT(*) kerwinnum FROM students;

多表查询

SELECT * FROM students, classes;(这种多表查询又称笛卡尔查询,使用笛卡尔查询时要非常小心,由于结果集是目标表的行数乘积,对两个各自有100行记录的表进行笛卡尔查询将返回1万条记录,对两个各自有1万行记录的表进行笛卡尔查询将返回1亿条记录)
SELECT
    students.id sid,
    students.name,
    students.gender,
    students.score,
    classes.id cid,
    classes.name cname
FROM students, classes; (要使用表名.列名这样的方式来引用列和设置别名,这样就避免了结果集的列名重复问题。)

SELECT
    s.id sid,
    s.name,
    s.gender,
    s.score,
    c.id cid,
    c.name cname
FROM students s, classes c; (SQL还允许给表设置一个别名)


联表查询
SELECT s.id, s.name, s.class_id, c.name class_name, s.gender, s.score
FROM students s
INNER JOIN classes c
ON s.class_id = c.id; (连接查询对多个表进行JOIN运算,简单地说,就是先确定一个主表作为结果集,然后,把其他表的行有选择性地“连接”在主表结果集上。)

image-20220420090841742

注意:

  1. InnoDB 支持事务,MyISAM 不支持事务。这是 MySQL 将默认存储引擎从 MyISAM 变成 InnoDB 的重要原因之一;
  2. InnoDB 支持外键,而 MyISAM 不支持。对一个包含外键的 InnoDB 表转为 MYISAM 会失败;

外键约束

CASCADE
在父表上update/delete记录时,同步update/delete掉子表的匹配记录

SET NULL
在父表上update/delete记录时,将子表上匹配记录的列设为null (要注意子表的外键列不能为not null)

NO ACTION
如果子表中有匹配的记录,则不允许对父表对应候选键进行update/delete操作

RESTRICT
同no action, 都是立即检查外键约束

4.nodejs 操作数据库
const express = require('express')
const app = express()
const mysql2 = require('mysql2')
const port = 9000

app.get('/',async (req, res) => {
  const config = getDBConfig()
  const promisePool = mysql2.createPool(config).promise();
  // console.log(promisePool)
      let user = await promisePool.query('select * from students');

      console.log(user)
      if (user[0].length) {
          //存在用户
          res.send(user[0])
      } else {
          //不存在
          res.send( {
              code: -2,
              msg: 'user not exsit',
          })
      }      
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})


function getDBConfig() {
  return {
    host: '127.0.0.1',
    user: 'root',
    port: 3306,
    password: '',
    database: 'kerwin_test',
    connectionLimit: 1 //创建一个连接池
  }
}
查询:
promisePool.query('select * from users');

插入:
promisePool.query('INSERT INTO `users`(`id`,`name`,`age`, `password`) VALUES (?,?,?,?)',[null,"kerwin",100,"123456"]);

更新:
promisePool.query(`UPDATE users SET name = ? ,age=? WHERE id = ?`,["xiaoming2",20,1])

删除:
promisePool.query(`delete from users where id=?`,[1])

十、Socket编程

1.websocket介绍
image-20220421084242097

应用场景:

  • 弹幕

  • 媒体聊天

  • 协同编辑

  • 基于位置的应用

  • 体育实况更新

  • 股票基金报价实时更新

WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。我们来看看WebSocket连接是如何创建的。

首先,WebSocket连接必须由浏览器发起,因为请求协议是一个标准的HTTP请求,格式如下:

GET ws://localhost:3000/ws/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:3000
Sec-WebSocket-Key: client-random-string
Sec-WebSocket-Version: 13

该请求和普通的HTTP请求有几点不同:

  1. GET请求的地址不是类似/path/,而是以ws://开头的地址;
  2. 请求头Upgrade: websocketConnection: Upgrade表示这个连接将要被转换为WebSocket连接;
  3. Sec-WebSocket-Key是用于标识这个连接,并非用于加密数据;
  4. Sec-WebSocket-Version指定了WebSocket的协议版本。

随后,服务器如果接受该请求,就会返回如下响应:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: server-random-string

该响应代码101表示本次连接的HTTP协议即将被更改,更改后的协议就是Upgrade: websocket指定的WebSocket协议。

版本号和子协议规定了双方能理解的数据格式,以及是否支持压缩等等。如果仅使用WebSocket的API,就不需要关心这些。

现在,一个WebSocket连接就建立成功,浏览器和服务器就可以随时主动发送消息给对方。消息有两种,一种是文本,一种是二进制数据。通常,我们可以发送JSON格式的文本,这样,在浏览器处理起来就十分容易。

为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢?实际上HTTP协议是建立在TCP协议之上的,TCP协议本身就实现了全双工通信,但是HTTP协议的请求-应答机制限制了全双工通信。WebSocket连接建立以后,其实只是简单规定了一下:接下来,咱们通信就不使用HTTP协议了,直接互相发数据吧。

安全的WebSocket连接机制和HTTPS类似。首先,浏览器用wss://xxx创建WebSocket连接时,会先通过HTTPS创建安全的连接,然后,该HTTPS连接升级为WebSocket连接,底层通信走的仍然是安全的SSL/TLS协议。

浏览器支持

很显然,要支持WebSocket通信,浏览器得支持这个协议,这样才能发出ws://xxx的请求。目前,支持WebSocket的主流浏览器如下:

  • Chrome
  • Firefox
  • IE >= 10
  • Sarafi >= 6
  • Android >= 4.4
  • iOS >= 8

服务器支持

由于WebSocket是一个协议,服务器具体怎么实现,取决于所用编程语言和框架本身。Node.js本身支持的协议包括TCP协议和HTTP协议,要支持WebSocket协议,需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现,我们直接用npm安装使用即可。

2.ws模块

服务器:

const  WebSocket = require("ws")
WebSocketServer = WebSocket.WebSocketServer
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function connection(ws) {
    ws.on('message', function message(data, isBinary) {
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(data, { binary: isBinary });
            }
        });

    });

    ws.send('欢迎加入聊天室');
});

客户端:

var ws = new WebSocket("ws://localhost:8080")
ws.onopen = ()=>{
    console.log("open")
}
ws.onmessage = (evt)=>{
    console.log(evt.data)
}

授权验证:

//前端
var ws = new WebSocket(`ws://localhost:8080?token=${localStorage.getItem("token")}`)
ws.onopen = () => {
      console.log("open")
      ws.send(JSON.stringify({
        type: WebSocketType.GroupList
      }))
    }
ws.onmessage = (evt) => {
    console.log(evt.data)
}
//后端
const WebSocket = require("ws");
const JWT = require('../util/JWT');
WebSocketServer = WebSocket.WebSocketServer
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function connection(ws, req) {
  const myURL = new URL(req.url, 'http://127.0.0.1:3000');
  const payload = JWT.verify(myURL.searchParams.get("token"))
  if (payload) {
    ws.user = payload
    ws.send(createMessage(WebSocketType.GroupChat, ws.user, "欢迎来到聊天室"))

    sendBroadList() //发送好友列表
  } else {
    ws.send(createMessage(WebSocketType.Error, null, "token过期"))
  }
  // console.log(3333,url)
  ws.on('message', function message(data, isBinary) {
    const messageObj = JSON.parse(data)
    switch (messageObj.type) {
      case WebSocketType.GroupList:
        ws.send(createMessage(WebSocketType.GroupList, ws.user, JSON.stringify(Array.from(wss.clients).map(item => item.user))))
        break;
      case WebSocketType.GroupChat:
        wss.clients.forEach(function each(client) {
          if (client !== ws && client.readyState === WebSocket.OPEN) {
            client.send(createMessage(WebSocketType.GroupChat, ws.user, messageObj.data));
          }
        });
        break;
      case WebSocketType.SingleChat:
        wss.clients.forEach(function each(client) {
          if (client.user.username === messageObj.to && client.readyState === WebSocket.OPEN) {
            client.send(createMessage(WebSocketType.SingleChat, ws.user, messageObj.data));
          }
        });
        break;
    }

    ws.on("close",function(){
      //删除当前用户
      wss.clients.delete(ws.user)
      sendBroadList() //发送好用列表
    })
  });

});
const WebSocketType = {
  Error: 0, //错误
  GroupList: 1,//群列表
  GroupChat: 2,//群聊
  SingleChat: 3//私聊
}
function createMessage(type, user, data) {
  return JSON.stringify({
    type: type,
    user: user,
    data: data
  });
}

function sendBroadList(){
  wss.clients.forEach(function each(client) {
    if (client.readyState === WebSocket.OPEN) {
      client.send(createMessage(WebSocketType.GroupList, client.user, JSON.stringify(Array.from(wss.clients).map(item => item.user))))
    }
  });
}
3.socket.io模块

服务端:

const io = require('socket.io')(server);
io.on('connection', (socket) => {

  const payload = JWT.verify(socket.handshake.query.token)
  if (payload) {
    socket.user = payload
    socket.emit(WebSocketType.GroupChat, createMessage(socket.user, "欢迎来到聊天室"))
    sendBroadList() //发送好友列表
  } else {
    socket.emit(WebSocketType.Error, createMessage(null, "token过期"))
  }


  socket.on(WebSocketType.GroupList, () => {
    socket.emit(WebSocketType.GroupList, createMessage(null, Array.from(io.sockets.sockets).map(item => item[1].user).filter(item=>item)));
  })

  socket.on(WebSocketType.GroupChat, (messageObj) => {
    socket.broadcast.emit(WebSocketType.GroupChat, createMessage(socket.user, messageObj.data));
  })

  socket.on(WebSocketType.SingleChat, (messageObj) => {
    Array.from(io.sockets.sockets).forEach(function (socket) {
      if (socket[1].user.username === messageObj.to) {
        socket[1].emit(WebSocketType.SingleChat, createMessage(socket[1].user, messageObj.data));
      }
    })
  })

  socket.on('disconnect', reason => {
     
     sendBroadList() //发送好用列表
  });

});

function sendBroadList() {
  io.sockets.emit(WebSocketType.GroupList, createMessage(null, Array.from(io.sockets.sockets).map(item => item[1].user).filter(item=>item)))
}
//最后filter,是因为 有可能存在null的值

客户端:

const WebSocketType = {
    Error: 0, //错误
    GroupList: 1, //群列表
    GroupChat: 2, //群聊
    SingleChat: 3 //私聊
}


const socket = io(`ws://localhost:3000?token=${localStorage.getItem("token")}`);
socket.on("connect",()=>{
    socket.emit(WebSocketType.GroupList)
})
socket.on(WebSocketType.GroupList, (messageObj) => {
    select.innerHTML = ""
    select.innerHTML = `<option value="all">all</option>` + messageObj.data.map(item => `
    <option value="${item.username}">${item.username}</option>`).join("")
})

socket.on(WebSocketType.GroupChat, (msg) => {
    console.log(msg)
})

socket.on(WebSocketType.SingleChat, (msg) => {
    console.log(msg)
})

socket.on(WebSocketType.Error, (msg) => {
    localStorage.removeItem("token")
    location.href = "/login"
})

send.onclick = () => {
    if (select.value === "all") {
        socket.emit(WebSocketType.GroupChat,{
            data: text.value
        })
    } else {
        socket.emit(WebSocketType.SingleChat,{
            data: text.value,
            to:select.value
        })
    }
}

十一、mocha

单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

比如对函数abs(),我们可以编写出以下几个测试用例:

输入正数,比如1、1.2、0.99,期待返回值与输入相同;

输入负数,比如-1、-1.2、-0.99,期待返回值与输入相反;

输入0,期待返回0;

输入非数值类型,比如null、[]、{},期待抛出Error。

把上面的测试用例放到一个测试模块里,就是一个完整的单元测试。

如果单元测试通过,说明我们测试的这个函数能够正常工作。如果单元测试不通过,要么函数有bug,要么测试条件输入不正确,总之,需要修复使单元测试能够通过。

单元测试通过后有什么意义呢?如果我们对abs()函数代码做了修改,只需要再跑一遍单元测试,如果通过,说明我们的修改不会对abs()函数原有的行为造成影响,如果测试不通过,说明我们的修改与原有行为不一致,要么修改代码,要么修改测试。

这种以测试为驱动的开发模式最大的好处就是确保一个程序模块的行为符合我们设计的测试用例。在将来修改的时候,可以极大程度地保证该模块行为仍然是正确的。

mocha是JavaScript的一种单元测试框架,既可以在浏览器环境下运行,也可以在Node.js环境下运行。

使用mocha,我们就只需要专注于编写单元测试本身,然后,让mocha去自动运行所有的测试,并给出测试结果。

mocha的特点主要有:

  1. 既可以测试简单的JavaScript函数,又可以测试异步代码,因为异步是JavaScript的特性之一;
  2. 可以自动运行所有测试,也可以只运行特定的测试;
  3. 可以支持before、after、beforeEach和afterEach来编写初始化代码。
1.编写测试
const assert = require('assert');
const sum = require('../test');
describe('#hello.js', () => {

    describe('#sum()', () => {
        it('sum() should return 0', () => {
            assert.strictEqual(sum(), 0);
        });

        it('sum(1) should return 1', () => {
            assert.strictEqual(sum(1), 1);
        });

        it('sum(1, 2) should return 3', () => {
            assert.strictEqual(sum(1, 2), 3);
        });

        it('sum(1, 2, 3) should return 6', () => {
            assert.strictEqual(sum(1, 2, 3), 6);
        });
    });
});
2.chai断言库

image-20220505113605440

var chai = require('chai')
var assert = chai.assert;

describe('assert Demo', function () {
    it('use assert lib', function () {
        var value = "hello";
        assert.typeOf(value, 'string')
        assert.equal(value, 'hello')
        assert.lengthOf(value, 5)
    })
})
var chai = require('chai');
chai.should();

describe('should Demo', function(){
    it('use should lib', function () {
        var value = 'hello'
        value.should.exist.and.equal('hello').and.have.length(5).and.be.a('string')
        // value.should.be.a('string')
        // value.should.equal('hello')
        // value.should.not.equal('hello2')
        // value.should.have.length(5);
    })
});
var chai = require('chai');
var expect = chai.expect;

describe('expect Demo', function() {
    it('use expect lib', function () {
        var value = 'hello'
        var number = 3

        expect(number).to.be.at.most(5)
        expect(number).to.be.at.least(3)
        expect(number).to.be.within(1, 4)

        expect(value).to.exist
        expect(value).to.be.a('string')
        expect(value).to.equal('hello')
        expect(value).to.not.equal('您好')
        expect(value).to.have.length(5)
    })
});
3.异步测试
var fs =require("fs").promises
var chai = require('chai');
var expect = chai.expect;
it('test async function',async function () {
    const data =await fs.readFile('./1.txt',"utf8");
    expect(data).to.equal('hello')
});
4.http测试
const request = require('supertest')
const app = require('../app');

describe('#test koa app', () => {
    let server = app.listen(3000);
    describe('#test server', () => {
        it('#test GET /', async () => {
            await request(server)
                .get('/')
                .expect('Content-Type', /text\/html/)
                .expect(200, '<h1>hello world</h1>');
        });

        after(function () {
            server.close()
        });
    });
});
5.钩子函数
describe('#hello.js', () => {
    describe('#sum()', () => {
        before(function () {
            console.log('before:');
        });

        after(function () {
            console.log('after.');
        });

        beforeEach(function () {
            console.log('  beforeEach:');
        });

        afterEach(function () {
            console.log('  afterEach.');
        });
    });
});

Vue3-解构赋值失去响应式

前言

vue3发布以来经历两年风头正盛,现在大有和react 平分天下的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了运行时的性能

凡事有利有弊, proxy虽然无敌,但是他也有本身的局限,从而产生一些我认为的弊端(其实就是不符合js语言的自然书写方式,有的人觉得就是个特殊写法,他不属于弊端)

  • 1、 原始值的响应式系统的实现 导致必须将他包装为一个对象, 通过 .value 的方式访问
  • 2、 ES6 解构,不能随意使用。会破坏他的响应式特性

好奇心驱使,研究琢磨了一下,为什么他会造成这两个弊端

原始值的响应式系统的实现

在理解原始值的响应式系统的实现,我们先来温习一下proxy 的能力!

const obj = {
  name: 'win'
}

const handler = {
  get: function(target, key){
    console.log('get--', key)
    return Reflect.get(...arguments)  
  },
  set: function(target, key, value){
    console.log('set--', key, '=', value)
    return Reflect.set(...arguments)
  }
}

const data = new Proxy(obj, handler)
data.name = 'ten'
console.log(data.name,'data.name22')

复制代码

上述代码中,我们发现,proxy 的使用本身就是对于 对象的拦截, 通过new Proxy 的返回值,拦截了obj 对象

如此一来,当你 访问对象中的值的时候,他会触发 get 方法, 当你修改对象中的值的时候 他会触发 set方法

但是到了原始值的时候,他没有对象啊,咋办呢,new proxy 排不上用场了。

无奈之下,我们只能包装一下了,所以就有了使用.value访问了

我们来看看具体实现

import { reactive } from "./reactive";
import { trackEffects, triggerEffects } from './effect'

export const isObject = (value) => {
    return typeof value === 'object' && value !== null
}

// 将对象转化为响应式的
function toReactive(value) {
    return isObject(value) ? reactive(value) : value
}

class RefImpl {
    public _value;
    public dep = new Set; // 依赖收集
    public __v_isRef = true; // 是ref的标识
    // rawValue 传递进来的值
    constructor(public rawValue, public _shallow) {
        // 1、判断如果是对象 使用reactive将对象转为响应式的
        // 浅ref不需要再次代理
        this._value = _shallow ? rawValue : toReactive(rawValue);
    }
    get value() {
        // 取值的时候依赖收集
        trackEffects(this.dep)
        return this._value;
    }
    set value(newVal) {
        if (newVal !== this.rawValue) {
            // 2、set的值不等于初始值 判断新值是否是对象 进行赋值
            this._value = this._shallow ? newVal : toReactive(newVal);
            // 赋值完 将初始值变为本次的
            this.rawValue = newVal
            triggerEffects(this.dep)
        }
    }
}

复制代码

上述代码,就是对于原始值,的包装,他被包装为一个对象,通过get valueset value 方法来进行原始值的访问,从而导致必须有.value 的操作 ,这其实也是个无奈的选择

相当于两瓶毒药,你得选一瓶 鱼与熊掌不可兼得

为什么ES6 解构,不能随意使用会破坏他的响应式特性

第一个问题终于整明白了,那么我们来看看最重要的第二个问题,为什么结构赋值,会破坏响应式特性

proxy背景

在开始之前,我们先来讨论一下为什么要更改响应式方案

vue2 基于Object.defineProperty ,但是他有很多缺陷,比如 无法监听数组基于下标的修改,不支持 Map、Set、WeakMap 和 WeakSet等缺陷

其实这些也也不耽误我们开发, vue2到现在还是主流,

我的理解就是与时俱进新一代的版本,一定要紧跟语言的特性,一定要符合新时代的书写风格,虽然proxy相对于Object.defineProperty 有很多进步, 但是也不是一点缺点都没有,你比如说 不兼容IE

天底下的事情,哪有完美的呢?

尤大的魄力就在于,舍弃一点现在,博一个未来!

实现原理

在理解了背景之后,我们再来假模假式的温习一下proxy 原理,虽然这个都被讲烂了。

但是,写水文,讲究什么:俩字-连贯

        const obj = {
            count: 1
        };
        const proxy = new Proxy(obj, {
            get(target, key, receiver) {
                console.log("这里是get");
                return Reflect.get(target, key, receiver);
            },
            set(target, key, value, receiver) {
                console.log("这里是set");
                return Reflect.set(target, key, value, receiver);
            }
        });
        
        console.log(proxy)
        console.log(proxy.count)
复制代码

以上代码就是Proxy的具体使用方式,通过和Reflect 的配合, 就能实现对于对象的拦截

image.png

如此依赖,就能实现响应式了,大家可以发现,这个obj的整个对象就被拦截了,但是你发现对象在嵌套深一层

比如:

    const obj = {
            count: 1,
            b: {
                c: 2
            }
        };
        
        
     console.log(proxy.b)
     console.log(proxy.b.c)
复制代码

他就无法拦截了,我们必须要来个包装

    const obj = {
            a: {
                count: 1
            }
        };
        
        function reactive(obj) {
            return new Proxy(obj, {
                get(target, key, receiver) {
                    console.log("这里是get");
                    // 判断如果是个对象在包装一次,实现深层嵌套的响应式
                    if (typeof target[key] === "object") {
                        return reactive(target[key]);
                    };
                    return Reflect.get(target, key, receiver);
                },
                set(target, key, value, receiver) {
                    console.log("这里是set");
                    return Reflect.set(target, key, value, receiver);
                }
            });
        };
        const proxy = reactive(obj);
复制代码

好了,原理搞完了,我们来正式研究一下

现在列举一下我知道的响应式失去的几个情况:

  • 1、解构 props 对象,因为它会失去响应式
  • 2、 直接赋值reactive响应式对象
  • 3、 vuex中组合API赋值

解构 props 对象,因为它会失去响应式

       const obj = {
            a: {
                count: 1
            },
            b: 1
        };
            
            //reactive 是上文中的reactive
           const proxy = reactive(obj);
        const {
            a,
            b
        } = proxy;
        console.log(a)
        console.log(b)
        console.log(a.count)
        
复制代码

image.png

上述代码中,我们发现, 解构赋值,b 不会触发响应式a如果你访问的时候,会触发响应式

这是为什么呢?

别急我们一个个解释?

先来讨论为什么解构赋值,会丢失响应式呢?

我们知道解构赋值,区分原始类型的赋值,和引用类型的赋值,

原始类型的赋值相当于按值传递`, `引用类型的值就相当于按引用传递

就相当于

   // 假设a是个响应式对象
  const a={ b:1}
  // c 此时就是一个值跟当前的a 已经不沾边了
  const c=a.b

// 你直接访问c就相当于直接访问这个值 也就绕过了 a 对象的get ,也就像原文中说的失去响应式
复制代码

那为啥a 具备响应式呢?

因为a 是引用类型,我们还记得上述代码中的一个判断吗。如果他是个object 那么就重新包装为响应式

正式由于当前特性,导致,如果是引用类型, 你再去访问其中的内容的时候并不会失去响应式

  // 假设a是个响应式对象
 const a={ b:{c:3}}
 // 当你访问a.b的时候就已经重新初始化响应式了,此时的c就已经是个代理的对象
 const c=a.b

// 你直接访问c就相当于访问一个响应式对象,所以并不会失去响应式
复制代码

以上就大致解释了为什么解构赋值,可能会失去响应式,我猜的文档中懒得解释其中缘由,索性就定了个规矩,您啊!

就别用了,省的以为是vue的bug,提前改变用户的使用习惯!不惯着

直接赋值reactive响应式对象

我们最初使用vue3的时候,指定会写出以下代码

 const vue = reactive({ a: 1 })
 vue = { b: 2 }

复制代码

然后就发出疑问reactive不是响应式的吗? 为啥我赋值了以后,他的响应式就没了 ,接着破口大骂,垃圾vue

其实啊,这就是您对于js 原生的概念不清除,其实尤大 已经做了最大的努力,来防止你进行错误操作了

比如,由于解构赋值的问题, 他直接禁止了reactive的解构赋值

image.png

当你用解构赋值操作的时候,他直接禁用了

那有人又问了, 为啥props 不给禁用了呢?

因为你的props 的数据可能不是响应式的啊,不是响应式的,我得能啊,尤大他也不能干涉用户使用新语法啊

所以还是那句话:框架现在的呈现,其实充满了取舍,有时候真是两瓶毒药,挑一瓶!

回归正题,我们再来说说 原生js 语法

首先需要确认的是,原生js 的引用类型的赋值,其实是 按照引用地址赋值!

 // 当reactive 之后返回一个代理对象的地址被vue 存起来,
 // 用一个不恰当的比喻来说,就是这个地址具备响应式的能力
 const vue = reactive({ a: 1 })
 
 //  而当你对于vue重新赋值的时候不是将新的对象赋值给那个地址,而是将vue 换了个新地址
 // 而此时新地址不具备响应式,可不就失去响应式了吗
 vue = { b: 2 }

复制代码

以上就是reactive失去响应式的解释,所以这个也是很多用户骂骂咧咧的原因。不符合他的使用习惯了,这都是被vue2 培养起来的一代

在这里我要替,尤大说句公道话,人家又没收你钱,还因为他,你有口饭吃

您自己不能与时俱进,拥抱新事物,那是您没能耐

这是典型的端起碗吃肉,放下筷子骂娘

vuex中组合API赋值

在vuex 用赋值也可能会失去响应式

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)
    }
  }
}

复制代码

以上代码中我们发现store.getters.double 必须用computed 包裹起来,其实道理是一样的,也是变量赋值的原因,在这里我们就不再赘述!

VX-微信支付

微信支付地址官方

地址:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

<——点击进入微信公众号官方文档

微信支付【 WeChatPay 】

WeixinJSBridge.invoke、wx.chooseWXPay

业务需求:
现在涉及到微信相关的项目有很多,主要涉及到的功能有【微信自定义分享、微信支付等】。开发微信公众号H5页面时,需要使用微信支付进行金融支付。当微信支付完成【支付成功 点击“完成”】时,需要出发相应的业务逻辑;比如:支付成功时跳转到订单页面;支付失败时跳转到下订单页面;支付取消时保持当前订单页面不变等。
前期开发微信H5页面时,大多考虑的就是【支付成功】之后如何处理,因为是刚接触微信支付,大多都是采用刷新页面获取新数据的方式来更新支付状态。这种方式可以解决当时面临的问题,但是从业务逻辑来看,处理的方式不是很合理。
支付场景越来越多,对微信支付流程有了进一步的了解和认识,现在回过头来对过去项目中使用【微信支付】的业务场景进行梳理和完善,进一步优化支付流程以及对支付后的不同状态做相应的处理和优化,并结合实际情况做相应的业务逻辑分析。

支付方式:

方式一:微信支付【微信公众号】

此支付方式需要在HTML页面中引入JS文件,即【 jweixin-1.6.0.js 】;
此JS文件链接支持http和https两种形式,引用时需要匹配当前项目的请求-响应协议(即http、https);
该JS文件支持使用AMD/CMD标准模块加载方式加载。

let WeChatPay = function() {
    // 2、引入js后、获取公众号校验信息
    let timestamp = '',
        nonceStr = '',
        signature = '';
    let v = {
        // 用于换取微信校验信息的参数:要求不可以包含 “#” 号
        url: location.split('#')[0]
    };

    // 3、通过config接口注入权限验证配置(需要同步进行,在获取到校验信息后方可注入config,否则校验失败!)
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '', // 必填,签名
        jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填,需要使用的JS接口列表
    });
    
    axios.post('/wx/pay/orderPay_XXXX', data).then(res => {
        // 支付成功状态
        if (res.code == 200) {
            // 获取支付必备的参数
            let {
                nonceStr,
                package,
                signType,
                paySign
            } = res.data;
            // 4、通过ready接口处理成功验证
            wx.ready(function() {
                /* 微信支付 */
                wx.chooseWXPay({
                    timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: nonceStr, // 支付签名随机串,不长于 32 位
                    package: package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
                    signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
                    paySign: paySign, // 支付签名
                    success: function(res) {
                        // 前端判断返回方式,微信团队郑重提示:不保证绝对可靠,切记!
                        if (res.errMsg == 'chooseWXPay:ok') {
                            // 【支付成功】 
                        } else if (res.errMsg == 'chooseWXPay:cancel') {
                            // 【支付取消】:用户取消支付不会进入这个判断,而是进入complate和cancel函数
                        } else {
    
                        }
                    },
                    complete: function(res) {
                        // 接口调用完成时执行的回调函数,无论成功或失败都会执行
                        if (res.errMsg == 'chooseWXPay:ok') {
                            // 【支付成功】:支付成功提示页面,点击完成按钮之后
                            wx.closeWindow(); /* 关闭微信窗口,调用时需要在config中进行校验 */
                        } else if (res.errMsg == 'chooseWXPay:cancel') {
                            // 【支付取消】
                        } else {
    
                        }
                        /**
                         * iOS和Android支付成功点击“完成”后都会进入success和complete函数,都返回'chooseWXPay:ok'
                         * (也有人说Android支付成功不进入success函数,)
                         * 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"},iOS返回{"err_Info":"success","errMsg":"chooseWXPay:ok"},故Android找不到success方法,导致失败】
                         * */
                    },
                    fail: function(err) {
                        // 接口调用失败
                    },
                    cancel: function(err) {
                        // 用户点击取消时的回调函数:用户取消支付后实际上进入cancel 和 complate函数
                    }
                });
            });
        }
    }).catch(err => {
        console.log('支付失败:', err);
    });

}

接口说明:【不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。】

success:接口调用成功时执行的回调函数。
fail:接口调用失败时执行的回调函数。
complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

方式二:微信支付【 JSAPI 支付】(常用支付方式)

地址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

function onBridgeReady() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId": "appId", //公众号名称,由商户传入     
            "timeStamp": "timeStamp", //时间戳,自1970年以来的秒数     
            "nonceStr": "nonceStr", //随机串     
            "package": "package",
            "signType": "MD5", //微信签名方式:     
            "paySign": "paySign" //微信签名 
        },
        function(res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示:
                //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            }
            // 支付过程中用户取消
            if (res.err_msg == "get_brand_wcpay_request:cancel") {

​        }
​        // 支付失败
​        if (res.err_msg == "get_brand_wcpay_request:fail") {

​        }
​        /**
     * 其它
     * 1、请检查预支付会话标识prepay_id是否已失效
     * 2、请求的appid与下单接口的appid是否一致
     * */
    if (res.err_msg == "调用支付JSAPI缺少参数:total_fee") {

    }
     });

}
// 检测支付环境中的 WeixinJSBridge

if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}
JSAPI调起支付注意事项:

在微信浏览器里打开H5网页中执行JS调起支付;
WeixinJSBridge是微信浏览器内置对象,在其他浏览器中无效;
调用支付传递的参数注意区分大小写。

WeixinJSBridge.invoke 、 wx.chooseWXPay 的区别

WeixinJSBridge.invoke()出现的版本更早 无需引用jssdk 无需wx.config方法注入 需要参数appId 使用回调 有详细的说明
而wx.choosewxpay()出现的版本比较晚 需要jssdk注入 不需要参数appId 使用回调 只有SUCCESS 和 FAIL没有具体的说明
WeixinJSBridge.invoke()是微信浏览器的内置方法 其实wx.choosewxpay()在引用的微信jssdk文件中 也调用了WeixinJSBridge.invoke() 是对WeixinJSBridge.invoke()的再次封装
综上所诉 这是微信前后设计的不同方法的支付 还是weixinjsbridge更方便一些 有具体的失败回调

代码演示:

// 支付按钮。

在vue里面

npm install weixin-js-sdk --save

import wx from "weixin-js-sdk";
payBtn() {

​      new Promise((resolve, reject) => {

​        Api_insured.isWaitPay(this.orderNo)

​          .then(res => {

​            // this.payDisabled = true

​            if (this.selectedIndex == 1) {

​              console.log("微信内");

​              if (

​                navigator.userAgent.toLowerCase().indexOf("micromessenger") !==

​                -1

​              ) {

​                var that = this;

​                new Promise((resolve, reject) => {

​                  Api_insured.payEnable()

​                    .then(res => {

​                      if(res.result) {

​                        console.log("微信端");

​                        that.$vux.loading.show();

​                        

​                        new Promise((resolve, reject) => {

​                          Api_insured.wxPay(that.orderNo, that.isSign)

​                            .then(res => {

​                              // that.payDisabled = false

​                              that.appId = res.result.appId;

​                              that.timeStamp = res.result.timeStamp;

​                              that.nonceStr = res.result.nonceStr;

​                              that.package = res.result.package;

​                              that.signType = res.result.signType;

​                              that.paySign = res.result.paySign;

​                              wx.config({

​                                debug: false,

​                                appId: res.result.appId,

​                                timeStamp: res.result.timeStamp,

​                                nonceStr: res.result.nonceStr,

​                                signType: res.result.signType,

​                                paySign: res.result.paySign,

​                                jsApiList: ["chooseWXPay"]

​                              });

​                              that.$vux.loading.hide();

​                              that.onBridgeReady();

​                            })

​                            .catch(error => {

​                              that.$vux.toast.text(error.message);

​                              that.$vux.loading.hide();

​                              // that.payDisabled = false

​                              reject(error);

​                            });

​                        });

​                      } else {

​                        that.h5DialogShow = true

​                        // location.href =

​                        //   location.href.split("#")[0] +

​                        //   "pi-hz/api/wxpay/wapPay?orderNo=" +

​                        //   that.orderNo;

​                        }

​                      })

​                    .catch(error => {

​                      that.$vux.toast.text(error.message);

​                      reject(error);

​                    });

​                });

​                

​              } else {

​                // that.payDisabled = false

​                console.log("H5");

​                var that = this;

​                location.href =

​                  location.href.split("#")[0] +

​                  "pi-hz/api/wxpay/wapPay?orderNo=" +

​                  that.orderNo;

​              }

​            } else {

​              console.log("支付宝");

​              if (

​                navigator.userAgent.toLowerCase().indexOf("micromessenger") !==

​                -1

​              ) {

​                // 弹窗

​                // this.payDisabled = false

​                this.$refs.aliPayDialog.style.display = "";

​              } else {

​                // this.payDisabled = false

​                location.href =

​                  location.href.split("#")[0] +

​                  "pi-hz/api/alipay/wapPay?orderNo=" +

​                  this.orderNo;

​              }

​            }

​          })

​          .catch(error => {

​            this.$vux.toast.text(error.message);

​            reject(error);

​          });

​      });

​    },
 // 公众号支付

​    onBridgeReady() {

​      let that = this;

​      WeixinJSBridge.invoke(

​        "getBrandWCPayRequest",

​        {

​          appId: that.appId, //公众号名称,由商户传入

​          timeStamp: that.timeStamp, //时间戳,自1970年以来的秒数

​          nonceStr: that.nonceStr, //随机串

​          package: that.package,

​          signType: that.signType, //微信签名方式

​          paySign: that.paySign //微信签名

​        },

​        function(res) {

​          if (res.err_msg == "get_brand_wcpay_request:ok") {

​            // 支付成功

​            that.$router.push({

​              path: "/paySuccess",

​              query: {

​                orderNo: that.orderNo

​              }

​            });

​            // that.payDisabled = false

​          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {

​            that.$vux.toast.text("支付取消");

​            // that.payDisabled = false

​          } else {

​            that.$vux.toast.text("支付失败");

​            // that.payDisabled = false

​          }

​        }

​      );

​    },

mac安装nvm-自动切换node版本

nvm介绍
node的版本管理器,可以方便地安装&切换不同版本的node。
随着大前端的快速发展,node版本更新很快,我们在工作中,可能会有老版本的node的项目需要维护,也有新版本的node的项目需要开发,如果我们只有一个node版本的话将会很麻烦,nvm可以解决我们的难点。

1、打开终端输入 cd ~/
紧接着输入 git clone https://github.com/nvm-sh/nvm.git (这里从github下载nvm)

2、进入 nvm目录中执行install.sh 等待执行完成
cd nvm (进入nvm目录)

./install.sh 

(等待执行成功)

3、配置nvm环境变量将下述代码复制到 ~/.bash_profile

vi ~/.bash_profile

shift+:键盘,i键,qw保存文件并且退出

在~/.bash_profile添加

> export NVM_DIR="$HOME/.nvm"
>
> [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
>
> [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

> source ~/.bash_profile

在终端运行
zsh报错
但是再zsh中使用nvm依旧提示
解决方法
编辑~/.zshrc
添加

source ~/.bash_profile

source ~/.zshrc

4、重新打开终端,执行

nvm --version

检测是否安装成功

5、nvm的使用
1.nvm ls # 列出当前安装的所有node版本
2.nvm ls-remote # 列出所有node版本

3.nvm install 版本号 # 安装指定版本的node 版本号取nvm ls-remote列出的 例如:nvm install 16.1.0

4.nvm uninstall 版本号  # 卸载指定版本号 例如:nvm uninstall 16.1.0

5.nvm use 版本号 # 切换到指定node版本 例如:nvm use 16.1.0

js-闭包

闭包

利用作用域的嵌套,实现了将局部变量进化成私有(自由)变量,然后可以被原本不能获取到的作用域获取到的环境,叫闭包

概念

JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递。

词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量。引擎通过数据结构和算法表示一个函数,使得在代码解释执行时按照词法作用域的规则,可以访问外围的变量,这些变量就登记在相应的数据结构中。

函数当作值传递,即所谓的first class对象。就是可以把函数当作一个值来赋值,当作参数传给别的函数,也可以把函数当作一个值 return。一个函数被当作值返回时,也就相当于返回了一个通道,这个通道可以访问这个函数词法作用域中的变量,即函数所需要的数据结构保存了下来,数据结构中的值在外层函数执行时创建,外层函数执行完毕时理因销毁,但由于内部函数作为值返回出去,这些值得以保存下来。而且无法直接访问,必须通过返回的函数。这也就是私有性。

垃圾回收机制

内存的:删除就删除,没了

硬盘的:暂存到回收站,还在,可以找到继续使用

闭包特点

  1. 可以在全局修改局部
  2. 连接函数内外部的桥梁
  3. IE9~浏览器会造成内存泄漏
  4. 占内存
  5. 避免全局变量命名空间的污染

应用场景

事件委托的封装

obox.onclick = eveEnt(achild, function () {});

function eveEnt(arr, cb) {
    return function () {
        arr
        cb
    }
}

循环中的事件需要获取循环中的变量

for(var i in arr){
    arr[i].onclick = function(i){
        return funtion(){
            console.log(i);
        }
    }
}

baidu
for(var i = 0;i < oLis.length;i ++){
    ;(function(i){
        oLis[i].onclick = function(){
            alert(i); //0123
        }
    })(i);

计时器的回调函数,想传参

setTimeout(fn("world"), 1000);

function fn(data){

    return function(){

        console.log(data);

    }

}


js-箭头函数

箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的thisargumentssupernew.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。

基础语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于:(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

高级语法

//加括号的函数体返回对象字面量表达式:
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

没有单独的this

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值:

  • 如果是该函数是一个构造函数,this指针指向一个新的对象
  • 在严格模式下的函数调用下,this指向undefined
  • 如果是该函数是一个对象的方法,则它的this指针指向这个对象
  • 等等

This被证明是令人厌烦的面向对象风格的编程。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

通过call或apply调用

由于 箭头函数没有自己的this指针,通过 call() apply() 方法调用一个函数时,只能传递参数(不能绑定this—译者注),他们的第一个参数会被忽略。(这种现象对于bind方法同样成立—译者注)

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

js-关键字

关键字

let

let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。

语法

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

规则

块级作用域

let声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
  var x = 1;
  {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
不给全局增加属性

​ 位于函数或代码顶部的**var声明会给全局对象新增属性, 而let**不会。

var x = 'global';
let name = 'global';
console.log(this.x); // "global"
console.log(this.name); // undefined
不存在提升
console.log(a);//报错:Uncaught ReferenceError: Cannot access 'a' before initialization
    at <anonymous>:1:13
let a = 10;
console.log(a);
暂时性死区

ES6 明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

let a = 10;
function fn(){
    console.log(a);
    let a = 20;
}
fn();
不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此,不能在函数内部重新声明参数。

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

在程序和方法的最顶端,**let不像 var 一样,let**不会在全局对象里新建一个属性。比如:

const

const声明一个只读的常量。一旦声明,常量的值就不能改变。

语法

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

规则

只声明不赋值,就会报错
const foo;
// SyntaxError: Missing initializer in const declaration
块级作用域
if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined
不存在提升
if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}
暂时性死区
if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}
不可重复声明
var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

本质

只能保证变量的地址不变

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,**const只能保证这个指针是固定的**(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

如果真的想将对象冻结,应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;

上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

js-面向对象编程

面向对象编程

介绍

面向对象分析OOA

分析问题,需求:

  1. 将任务不断的拆分,拆分成更具体的小任务,使用分工协作的形式,解决所有的小任务
  2. 更具体的小任务:能直接解决的小任务

面向对象设计OOD

高内聚(忠诚度),低耦合(依赖)

面向对象编程OOP

优点

继承

封装

多态

设计模式

工厂模式

工厂模式抽象了具体对象的过程。也就是说,发明了一种函数,把对象放到函数里,用函数封装创建对象的细节。

function createPerson (name,age) {
    var o = {
        name : name,
        age : age,    
        sayName : function () {
            alert(this.name)
        }
    }
    return o;
}
var person1 = createPerson("Tom",14);
var person2 = createPerson("Jerry",18)

console.log(person1 instanceof Object)  //true
console.log(person1 instanceof createPerson)  //false

instanceof 用于检测数据类型
var aa = []
console.log(aa instanceof Array)  //true

工厂模式解决了代码复用的问题,但是却没有解决对象识别的问题。即创建的所有实例都是Object类型。
为了解决这一问题,就有了构造函数模式

构造函数模式

可以被构造的函数和正常函数的区别:首字母大写(大驼峰)

function Person (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name)
    }
}
    var person1 = new Person('Tom',14);
    var Person2 = new Person('Jerry',18);
  1. 构造函数 Person 有一个prototype(原型)属性,这个属性是一个指针,指向一个对象即:Person.prototype(原型对象);
  2. 实例person1 person2也有一个[[prototype]]属性或者叫_proto_,这个属性 也指向Person.prototype;
  3. 构造函数和实例都共享Person.prototype里的属性和方法;
  4. Person.prototype里有一个 constructor属性,这个属性也是一个指针,指向构造函数Person。这样以来,实例也指向了Person,那么实例也共享了构造函数的属性和方法。
  5. 构造函数、实例、原型对象里所有的属性和方法都是共享的。

构造函数解决了对象识别问题,我们在这个例子中创建的对所有对象既是Object的实例,同时,也是Person的实例。这一点通过instanceof操作符可以得到验证。

new的原理

  1. 自动创建一个新对象
  2. 将这个构造函数的作用域赋给新对象(因此this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 检测函数是否主动返回对象,没有,就返回第一步创建的新对象

构造函数与普通函数的区别

构造函数和普通函数的唯一区别,在于调用它们的方式不同。

当作构造函数使用
function Person (name,age) {
    console.log(this);
    this.name = name;
    this.age = age;
}
var person = new Person("andy",21);

需要注意的是,this指向构造函数Person

当作普通函数使用
 function Person (name,age) {
    console.log(this)
 }
 Person()

this指向widow.

构造函数的问题

构造函数虽然好用,但也有缺点。既每个new出来的实例里的方法都要重新创建一遍。在前面的例子中person1 person2 都有一个sayName方法,但这两个方法不是同一个Function实例!每个实例的方法 都是不同的,不相等的。这是不合理的!

function Person (name) {
    this.name = name;
    this.sayName = new Function ("alert(this.name)")
}
function Person (name) {
    this.name = name;
    this.sayName = function () {
        alert(this.name)
    }
}
alert( person1.sayName == person2.sayName ) //false

由此可见,完成同样任务的函数确实没必要每个实例,就实例一次。
于是,有需求,就有解决方案:原型模式。

原型模式

TBD

组合构造函数原型模式

构造函数与原型混合的模式是目前使用最广泛、认同度最高的一种创建定义类型的方法。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。

每个实例都会有自己的一份实例属性的副本,同时共享着对方法的引用,最大限度节省内存。同时,这种混杂模式还支持向构造函数传递参数,可谓是集两种模式之长。

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.friends=["Machiel","Dophe"];
};
Person.prototype={
  constructor:"Person",
  sayName:function(){
    alert(this.name)
  }
};
var person=new Person("Niche",12,"Software")
console.log(person.friends);
person.sayName();

//构造函数实现实例属性的副本,原型实现方法的共享
function Peason(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Peason.prototype.show = function () {
    console.log(this.name, this.age, this.sex);
}
let andy = new Peason("andy",25,1);
let yuehui = new Peason("yuehui",23,1);
andy.show();//"andy",25,1
andy.name = "xiaoandy";
andy.show();//"xiaoandy",25,1
yuehui.show = function () { 
    console.log(this.name,this.age)
}
yuehui.show();//"yuehui",23 只会在yuehui对象中新增一个方法,不会修改到原型里的方法,如果使用yuehui.prototype.show去修改,就会修改共享方法
andy.show()//"xiaoandy",25,1

动态原型模式

TBD

寄生构造函数模式

TBD

稳妥构造函数模式

TBD

总结

什么是工厂模式 ?

工厂模式就是抽象了具体对象细节过程的方法。这个方法以函数的形式封装实现的细节。实现了重复调用的功能。

什么是构造函数模式 ?

构造函数模式就是创建一个对象,new 这个对象就是对象的实例。实现重复调用的同时,它的实例 也有了QQVIP的尊贵特权 ,即实例可以标识为特定的类型。有了这个标识 可以更好的识别出,谁是数组类型,谁是函数类型,然后你 typeof arr 或 typeof fun
一看,真的是Array类型,functiong类型。你也可以自定义自己想要的类型,这样大大的增加了JS的拓展性。

什么是原型模式 ?

首先我们要知道,我们创建的每一个函数都有一个隐藏属性,也就是原型属性。这个原型属性指向一个原型对象。且所有实例和构造函数 都指向这个原型对象,共享原型对象的所有方法和属性。
我们通过操作原型对象达到 实例共享属性方法的目的,就是原型模式。
同时,因为实例都是引用原型对象的属性和方法,也避免了构造函数模式下所有实例都有各自的方法的弊端。

js-数组常用方法

1.join() (数组转字符串)
数组转字符串,方法只接收一个参数:即默认为逗号分隔符()。

join()实现重复字符串

2.push()和pop()(数组尾操作)
push():方法可向数组的末尾添加一个或多个元素,并返回新的长度。

pop():方法用于删除并返回数组的最后一个元素。

3.shift() 和 unshift()(数组首操作)
shift():方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

unshift():方法可向数组的开头添加一个或更多元素,并返回新的长度。

4.sort()(排序)
方法用于对数组的元素进行排序。

请注意,上面的代码没有按照数值的大小对数字进行排序,是按照字符编码的顺序进行排序,要实现这一点,就必须使用一个排序函数:

升序:

降序:

5.reverse() (反转数组)
方法用于颠倒数组中元素的顺序。

6.concat() (连接两个或多个数组)
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

如果传入的参数是一个二维数组呢?

从上面代码中可以看出concat方法只能将传入数组中的每一项添加到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy中。

7.slice()(数组截取)
arr.slice(start , end);

start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arr 中的元素。

8.splice() (数组更新)
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(该方法会改变原始数组)

arr.splice(index , howmany , item1,…..,itemX)

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, …, itemX:可选。向数组添加的新项目。

返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。

ES5数组新增方法:
2个索引方法:indexOf()和 lastIndexOf()
两个方法都返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1

indexOf()——–array.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从array[0]开始检索。

lastIndexOf()——–array.lastIndexOf(item,start) (从数组的末尾开始向前查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array[array.length-1]开始检索。

5个迭代方法:forEach()、map()、filter()、some()、every()
这几个方法语法都一样,都不会改变原数组。

forEach():对数组进行遍历循环,这个方法没有返回值。jquery()也提供了相应的方法each()方法。

语法:array.forEach(function(currentValue , index , arr){//do something}, thisValue)

currentValue : 必需。当前元素

index: 可选。当前元素的索引值。

arr : 可选。当前元素所属的数组对象。

thisValue: 可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

map():指“映射”,方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

语法:array.map(function(currentValue , index , arr){//do something}, thisValue)

map方法实现数组中每个数求平方:

filter(): “过滤”功能,方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。和filter() 方法类似,jquery中有个 grep()方法也用于数组元素过滤筛选。

语法: array.filter(function(currentValue , index , arr){//do something}, thisValue)

filter方法实现筛选排除掉所有小于5的元素:

当我们分别设置item > 5和item > “5”时, 返回的结果是一样的,由此我们可以看出函数支持弱等于(==),不是必须全(===)。

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

语法: array.every(function(currentValue , index , arr){//do something}, thisValue)

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

语法: array.some(function(currentValue , index , arr){//do something}, thisValue)

2个归并方法:reduce()、reduceRight()
这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受四个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

reduce()语法:arr.reduce(function(total , cur , index , arr){//do something}, initialValue)

reduceRight()语法:arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

total :必需。初始值, 或者计算结束后的返回值。

cur :必需。当前元素。

index :可选。当前元素的索引。

arr:可选。当前元素所属的数组对象。

initialValue:可选。传递给函数的初始值。

下面代码实现数组求和:

从上面代码我们可以看出,当我们不给函数传递迭代初始值时初始值 total 为数组第一项,函数从数组第二项开始迭代;若我们给函数传递迭代初始值,则函数从数组第一项开始迭代。

ES6数组新增方法(注意浏览器兼容)
1.Array.from()
方法是用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

2.Array.of()
方法是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。

3.find()
方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

回调函数可以接收3个参数,依次为当前的值(currentValue)、当前的位置(index)、原数组(arr)

注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。

find()实现根据id取出数组中的对象

4.findIndex ()
findIndex和find差不多,不过默认返回的是索引,如果没有符合条件的元素返回 -1

5.fill()
fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法:array.fill(value, start, end)

value:必需。填充的值。

start:可选。开始填充位置。如果这个参数是负数,那么它规定的是从数组尾部开始算起。

end:可选。停止填充位置 (默认为 array.length)。如果这个参数是负数,那么它规定的是从数组尾部开始算起。

6.遍历数组方法 keys()、values()、entries()
这三个方法都是返回一个遍历器对象,可用for…of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

keys()

values()

entries()

7.includes()
方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

语法:arr.includes(searchElement , fromIndex)

searchElement : 必须。需要查找的元素值。

fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

8.copyWithin()
方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员

语法:array.copyWithin(target , start , end)

target :必需。从该位置开始替换数据。

start :可选。从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。

end: 可选。到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。