WebSalon

ChatGPT火了，客户的心也被ChatGPT俘获了。
客户：你们的问答功能的机器人回复，能像ChatGPT那样一字一字地展示出来，看起来像是有经过思考的样子吗？
产品：好的，我这边跟研发说一下。
我：？？？

上一节，我们已经学会了如何创建应用、在页面上显示舞台、创建精灵并将精灵添加到舞台及通过键盘控制sprite进行移动。这一节，我们将使用一个额外的工具，更好的去创建我们的sprite。

年前一周无心工作，办公室好多人都请假5+2，然而我请假不知道干啥，于是乎——摸鱼！摸鱼做点啥好呢？
水群的时候，都在聊到游戏公司又是年后又是抽奖的，眼馋坏了(今年年终都没有，还裁了好几个hxd， o(╥﹏╥)o)
说到游戏，我曾经也是做了一个web的贪吃蛇，纯js操作dom(毕竟那会儿刚学校前端开发)，当时做碰撞的逻辑做了好久呢。现在看来就是写的一坨大便。。。源码在此，在线体验(ps: 方向键进行控制, 肉眼可见的丢帧)。
步入正题，这次想做的是一个可以操控人物打怪的小游戏。网上查询了一番，考虑库的更新情况，现有文档及中文文档，以及大佬们开贴记录的问题及实现的demo情况，最终选择了PixiJS，来进行开发。
游戏基本操作及逻辑已经完成，可以在线体验， 诸多不足，还请指正。

nginx负载均衡

什么是负载均衡

负载均衡（Load Balance），它在网络现有结构之上可以提供一种廉价、有效、透明的方法来扩展网络设备和服务器的带宽，并可以在一定程度上增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性等。用官网的话说，它充当着网络流中“交通指挥官”的角色，“站在”服务器前处理所有服务器端和客户端之间的请求，从而最大程度地提高响应速率和容量利用率，同时确保任何服务器都没有超负荷工作。如果单个服务器出现故障，负载均衡的方法会将流量重定向到其余的集群服务器，以保证服务的稳定性。当新的服务器添加到服务器组后，也可通过负载均衡的方法使其开始自动处理客户端发来的请求。（详情可参考：What Is Load Balancing?）
简言之，负载均衡实际上就是将大量请求进行分布式处理的策略。

JS代码压缩

内置了uglifyjs-webpack-plugin

什么是文件指纹？

打包输出的文件名的后缀。可以用来做版本管理。

文件监听

文件监听是在发现源码发生变化时，自动构建出新的输出文件
webpack开启监听模式，有两种方式：

• 启动webpack命令时， 带上 –watch 参数
• 在配置webpack.config.js中设置 watch: true

缺陷： 每次需要手动刷新浏览器

资源解析： 解析ES6与react jsx语法

使用babel-loader。babel的配置文件是：.babelrc

entry

entry用来指定webpack打包入口
单入口：entry是一个字符串。适合SPA，项目中只有一个入口文件的情况；
多入口：entry是一个对象。

1
2
3
4
5
6
7
8
9
10
11

// 单入口
module.exports = {
  entry: './path/to/xxx/file.js'
}
// 多入口
module.exports = {
  entry: {
    app: './src/app.js',
    adminiApp: './src/adminApp.js',
  }
}

Node 中的 readFile API 工作机制

先通过两段代码来分析下同步和异步读文件 API 的区别。

1
2

var fs = require('fs')
var data = fs.readFileSync('test.js')

1
2
3
4
5

function fileHanlder(err, data){
  data.toString()  
}

fs.readFile('test.txt', fileHanlder)