加上 --keylength 2048 参数

acme.sh --issue -d *.xx.com --dns --yes-I-know-dns-manual-mode-enough-go-ahead-please --force --keylength 2048

ES5 vs ES6（ES2015+）核心区别

ES5：2009发布；ES6正式名称ES2015，后续每年迭代ES2016~ES2025，日常统称ES6。下面梳理最常用、工作高频差异。

一、变量声明

ES5

只有 var

1. 函数作用域，存在变量提升
2. 允许重复声明

3. 没有块级作用域（if/for循环无法隔离变量）

   var a = 1;
   var a = 2; // 合法
   for(var i=0;i<3;i++){}
   console.log(i); // 3 泄露到外层

ES6

新增 let / const

1. 块级作用域 { } 隔离
2. 暂时性死区TDZ，声明前不能访问
3. 不允许同作用域重复声明

4. const 声明常量（引用类型可修改内部属性，不能重赋值）

   let a = 1;
   const PI = 3.14;
   {
     let b = 10
   }
   console.log(b) // 报错

二、函数

1. 箭头函数 ()=>{} 【ES6新增】

ES5只有普通function

// ES5
var add = function(a,b){return a+b}
// ES6
const add = (a,b) => a + b;

箭头函数特点

• 不绑定 this：继承外层作用域this（最常用，解决回调this指向问题）
• 没有 arguments，可用剩余参数 ...args 替代
• 不能作为构造函数，不能new
• 没有 prototype

2. 函数参数增强 ES6

• 默认参数

  // ES5
  function fn(x){x = x || 0}
  // ES6
  function fn(x = 0){}

• 剩余参数 ...rest

  function sum(a,...rest){}

• 参数解构

三、解构赋值（ES6新增）

快速提取数组、对象属性

// 对象解构
const user = {name:"张三",age:20}
// ES5
const name = user.name;
// ES6
const {name,age} = user;

//数组解构
const [a,b] = [10,20]

四、展开运算符 ... ES6

const arr2 = [...arr1,4,5]; //数组拷贝/合并
const obj2 = {...obj1,c:10}; //对象浅拷贝

五、字符串

1. 模板字符串 ` （反引号） ES6

   // ES5
   var str = "name:" + name + ",age:"+age;
   // ES6
   const str = `name:${name},age:${age}`

   支持换行、插值 ${表达式}

2. ES6新增字符串方法：includes()、startsWith()、endsWith()

六、对象字面量增强 ES6

const name = "小明"
// ES5
const obj = {name:name, say:function(){}}
// ES6 属性简写、方法简写
const obj = {
  name,
  say(){}
}
// 计算属性名
const obj = {["key"+1]:100}

七、数组新特性

• ES6：Array.from() 类数组转数组
• find()、findIndex()、some/every原有ES5就有
• entries() keys() values() 迭代器

八、迭代器 & for...of（ES6新增）

• ES5：for循环、forEach、for...in（遍历对象key，不适合数组）

• ES6：for...of 遍历可迭代对象（数组、Set、Map、字符串）

  for(const item of arr){}

  for...in：遍历键；for...of：遍历值

九、新增数据结构 ES6

ES5仅有：Object、Array
ES6新增：

• Set：集合，元素唯一
• Map：键可以是任意类型（ES5对象key只能字符串/Symbol）
• WeakSet / WeakMap 弱引用，利于GC垃圾回收
• Symbol：唯一不可重复的值，用作私有属性标识

十、类 Class（ES6语法糖）

ES5 原型模拟面向对象

// ES5
function Person(name){this.name = name}
Person.prototype.say = function(){}

// ES6 class
class Person{
  constructor(name){
    this.name = name
  }
  say(){}
}

⚠️ class只是原型的语法糖，不是真正面向对象，不存在继承隔离；支持 extends 继承、super()

十一、模块化 Module import / export ES6

ES5没有原生模块，依靠：IIFE、RequireJS、CommonJS(Node.js)
ES6 原生ESM标准

//导出
export const a = 1;
export default fn;
//导入
import fn, {a} from './mod.js'

CommonJS：运行时加载；ESM：编译期静态导入，支持Tree-Shaking

十二、Promise 异步方案 ES6

ES5异步：回调函数 → 回调地狱
ES6 原生Promise，解决嵌套回调
后续ES2017新增 async / await（Promise语法糖）

new Promise((resolve,reject)=>{})
async function query(){
  await fetch()
}

十三、其他重要特性

1. 赋值简写：对象解构、数组解构
2. Promise、async/await
3. Object.assign() 对象合并（ES6）
4. 尾调用优化
5. 二进制/八进制数值字面量
6. Proxy、Reflect（ES6，实现数据劫持，Vue3底层原理）

精简对比总结表

开发最需要记住的重点（面试高频）

1. var / let / const 区别、块级作用域、暂时性死区
2. 箭头函数this指向问题
3. class是语法糖，底层依旧原型
4. ESM 和 CommonJS 的差异
5. Promise解决回调地狱，async await简化Promise
6. 解构、模板字符串、展开运算符日常使用最多

JsonOb 响应式：数据劫持 + 变化监听完整技术细节

先纠正PPT笔误： Object.Defefirbairty  →  Object.defineProperty 
这套方案是Vue2 同源响应式方案，也是很多游戏引擎、小程序自研状态库 JsonOb 的底层实现。

一、整体流程对照PPT架构

plaintext

原始JS对象
↓
Object.defineProperty 深度劫持（get/set）【数据拦截】
↓
数据发生修改 → set触发 → 发送变更信号
↓
信号广播系统（订阅发布模式）
↓
通知所有依赖当前字段的UI组件，执行UI更新
 

二、核心1：Object.defineProperty 数据劫持原理

1. API基础作用

 Object.defineProperty(obj, key, descriptor) 
对对象的指定属性重新定义，拦截 读取(get)、赋值(set)。

javascript

let rawData = { name:"test" };
// 劫持name属性
Object.defineProperty(rawData, 'name', {
get(){

// 读取时：收集当前正在执行的UI渲染函数（依赖收集）
track() 
return this._value;

},
set(newVal){

if(newVal === this._value) return; // 值无变化跳过
this._value = newVal;
// 修改时：触发信号派发，通知订阅者更新
trigger()

}
})
 

2. 深度劫持（深层对象递归处理）

普通 defineProperty 只能劫持一层属性，嵌套对象  {a:{b:1}}  内层b不会监听。
实现方案：

1. 递归遍历对象所有属性；
2. 如果属性值依然是  Object/Array ，继续对它执行  defineProperty  包装；

这就是PPT写的【深度属性劫持】。

3. 致命短板（defineProperty 天生缺陷）

1. 无法监听新增属性、删除属性
 obj.xxx = 1  新增字段不会触发set； delete obj.xxx  无钩子。
解决方案：框架提供  $set  /  $del  API。
2. 不能原生监听数组下标修改
 arr[2] = 999  不会触发set。

三、核心2：数组监听怎么实现（PPT第二条）

原生数组无法靠defineProperty监听下标变更，JsonOb采取 方法重写拦截：

1. 复制数组原型  Array.prototype ；
2. 重写会改变数组内容的变异方法： push pop shift unshift splice sort reverse ；
3. 当业务调用  arr.push()  时，先走重写后的包装函数：

• 执行原生数组操作
• 手动调用  trigger()  发送变更信号

javascript

// 伪代码思路
const rawPush = Array.prototype.push;
Array.prototype.push = function(...args){
const res = rawPush.apply(this, args);
trigger(this); // 广播数组变更
return res;
}
 

注意： arr[0] = xxx 、 arr.length = 10  依然无法被捕获，框架一般同样提供API规避。

四、核心3：依赖收集 & 信号广播（订阅发布）

劫持只是拿到“数据变化通知”，还需要知道哪些UI依赖这个字段。

1. track() 依赖收集（get阶段）

1. UI组件执行渲染函数，读取响应式字段  data.name ；
2. 触发  get() ，执行 track ；
3. 把「当前渲染函数」存入当前属性的依赖列表。
数据结构简易模型：

plaintext

targetMap = {
对象: {

属性名: [组件更新回调1, 组件更新回调2]

}
}
 

2. trigger() 信号广播（set阶段）

当 set 检测数值改变：

1. 获取该属性保存的所有依赖回调；
2. 批量执行回调 → UI组件执行刷新。
也就是PPT里的【信号广播】。

五、PPT重点特性：enableBatch 批量变更

场景：一帧内连续多次修改数据

plaintext

data.a = 1
data.b = 2
data.c = 3
 

不做批处理：每次赋值立刻触发UI刷新 → 3次渲染，性能浪费。
enableBatch实现逻辑：

1. 开启批量模式后， trigger 不会立刻执行更新；
2. 将所有变更任务存入队列；
3. 等到当前JS执行栈结束（下一帧/微任务时机）；
4. 去重、合并所有变更，统一执行一次UI更新。

游戏引擎、前端渲染库高频修改场景极其重要，减少重绘次数。

六、内存管理（PPT最后一条）

这套响应式很容易产生内存泄漏：
对象销毁后，依赖列表依然保存UI组件引用，组件无法GC。
JsonOb处理方案：

1. 组件销毁时，主动清除对应属性的依赖回调；
2. 使用弱引用容器（WeakMap）保存targetMap；
3. 对外提供销毁API，解除对象劫持，清空订阅列表。

七、拓展对比：defineProperty vs Proxy

你这套JsonOb使用 Object.defineProperty（Vue2方案）
现代方案用  Proxy （Vue3）：

1. Proxy原生支持监听新增属性、数组下标、删除；
2. 不需要递归深度劫持，可以惰性代理；
缺点：不支持低版本运行环境。
很多小游戏引擎、老框架继续沿用defineProperty实现的JsonOb。

八、完整数据流总结（对应PPT框图）

1. 开发者修改响应式数据；
2.  Object.defineProperty set  拦截赋值（数据拦截）；
3. 判断值是否真正变化，避免无效通知；
4. 发送变更信号（批量模式下先入队列）；
5. 信号广播遍历所有订阅该字段的UI组件；
6. 各个UI组件执行自身更新逻辑；
7. 组件卸载后自动清理依赖引用，防止内存泄露。

如果你需要，我可以写一份精简可运行的 JsonOb最小实现Demo（defineProperty版本），直观复现这套劫持+广播逻辑。

Cocos Creator 主动检测碰撞（3.8.8适用）

一、两种碰撞检测模式区分

1. 被动检测（默认）：绑定碰撞组件+碰撞回调，物体接触自动触发onCollisionEnter
2. 主动检测（你要的）：代码手动调用接口，任意时刻主动查询：有没有碰到、碰到哪些物体

二、2D主动碰撞检测（刚体/碰撞盒通用）

1. 检测当前节点周围所有碰撞体（重叠查询）

typescript

import { _decorator, Component, Node, Collider2D, Physics2DManager, Rect } from 'cc';
const { ccclass, property } = _decorator;

@ccclass
export class Test extends Component {

start() {
    this.checkOverlap();
}

checkOverlap() {
    // 获取自身2D碰撞盒
    const collider = this.node.getComponent(Collider2D);
    if (!collider) return;

    // 主动查询所有和自己重叠的碰撞物体
    const resultArr = Physics2DManager.instance.queryColliders(collider.worldAABB);
    for (const coll of resultArr) {
        // 排除自己
        if (coll.node === this.node) continue;
        console.log("主动检测到碰撞目标：", coll.node.name);
    }
}

}
 

2. 射线检测（主动发射射线探路）

适合：判断前方有没有障碍物、点击选中物体

typescript

// 从自身位置向右发射一条长射线
const origin = this.node.worldPosition;
const end = origin.add3f(200, 0, 0);
const hits = Physics2DManager.instance.raycast(origin, end);
if (hits.length > 0) {

console.log("射线碰到物体", hits[0].collider.node.name);

}
 

三、3D主动碰撞检测（软体、3D物体适用）

1. 包围盒重叠检测

typescript

import { PhysicsSystem, Collider } from 'cc';

// 获取自身碰撞包围盒
const selfCollider = this.node.getComponent(Collider);
const box = selfCollider.worldBounds;

// 查询所有和盒子重叠的3D碰撞体
const hits = PhysicsSystem.instance.queryColliders(box);
for (const hit of hits) {

if (hit.node !== this.node) {
    console.log("主动检测碰撞3D物体：", hit.node.name);
}

}
 

2. 3D射线检测

typescript

const start = this.node.worldPosition;
const dir = new Vec3(0, -1, 0); // 向下检测（落地判断）
const rayHit = PhysicsSystem.instance.raycastClosest(start, dir, 100);
if (rayHit) {

console.log("下方碰到地面/物体");

}
 

四、适用场景（对应你之前软体肉块需求）

1. 软体肉块掉落，主动向下射线检测：判断什么时候碰到桌子、凹凸物体
2. 肉块滑动时每帧主动查询周围碰撞体，贴合物体边缘
3. 不依赖自动碰撞回调，完全自己控制检测时机（每帧/间隔几秒检测一次）

五、关键注意点

1. 必须开启物理引擎：2D勾选 项目设置-物理2D；3D勾选物理系统
2. 所有需要被检测的物体，必须挂载对应 Collider2D / Collider 碰撞组件
3. 性能优化：

• 不要每帧大规模查询全部碰撞体，能用射线就不用包围盒查询
• 软体粒子多的话，隔2帧检测一次，降低消耗
  4. 区分：
• queryColliders：检测重叠（两个物体贴在一起）
• raycast：线段探测（预判前方物体）

六、简易落地检测示例（肉块掉桌面）

每帧向下射线，主动判断是否接触台面，接触后开启滑动软体动画：

typescript

update() {

const pos = this.node.worldPosition;
// 向下发射射线，长度50
const isHit = PhysicsSystem.instance.raycastClosest(pos, new Vec3(0,-1,0), 50);
if (isHit) {
    // 碰到物体，执行贴边滑动逻辑
}

}

Cocos Creator 3.8.8 自定义启动加载页（分3种方案，从简单替换LOGO到完整动画Loading场景）

先分清两个概念：

1. 引擎闪屏Splash（构建后黑屏前那张Cocos图）：Web/小程序/原生打包前的静态图片，项目设置一键替换；
2. 游戏内Loading加载场景（资源加载进度条、动画、动态LOGO）：引擎初始化完成后，加载贴图/预制体/关卡时的自定义页面，支持骨骼动画、液体/软体特效、渐变过渡（你做肉块液体项目优先用这个）

方案一：最简替换默认Splash闪屏（只换LOGO，无动画，5分钟搞定）

1. 编辑器内置配置（全平台通用：Web/微信小游戏/Android/iOS）

1. 顶部菜单 项目 → 项目设置 → Splash Setting（插屏设置）

2. 参数说明：
3. 预览框点击加号，上传你的Logo图片（png/jpg，5M以内）；
4. TotalTime：最小显示毫秒，建议2000（至少显示2秒，不能太短）；
5. Image Size Multiplier：图片缩放比例，100%=原图，200%放大；
6. 取消勾选可直接关闭引擎默认闪屏。
7. 构建项目，打包后自动替换Cocos默认Logo。

2. Web端深度自定义（改背景、隐藏进度条、全屏图）

每次构建会覆盖build文件夹，必须用构建模板build-templates永久保存修改：

1. 项目根目录新建文件夹：build-templates/web-mobile
2. 先构建一次Web，复制build/web-mobile/index.html、style-mobile.css到上面文件夹；

3. 修改css，替换背景图、全屏、隐藏进度条：

   #splash {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000 url(./myLogo.png) no-repeat center;
    background-size: 80%; /* logo占屏幕80% */
   }
   /* 隐藏默认进度条 */
   .progress-bar {
    display: none !important;
   }

4. 把你的logo图片放进build-templates/web-mobile/，下次构建自动生效。

方案二：完整游戏内Loading加载场景（推荐你的肉块液体项目，最强自定义）

优势

• 支持骨骼动画、粒子液体、软体肉块、渐变淡入淡出；
• 实时读取资源加载进度，自定义进度条、文字；
• 不受引擎Splash限制，所有平台通用，微信小游戏/安卓/iOS都能用；
• 可以复用前面写的全局数据单例控制加载参数。

完整实现步骤

步骤1：新建Loading场景

1. 新建场景 Scene_Loading，设为启动场景（项目设置 → 项目数据 → 默认启动场景选Scene_Loading）；

2. 节点结构：

   Canvas
   ├─ Sprite_Bg 背景图
   ├─ Sprite_Logo 你的品牌logo（可加缓动缩放动画）
   ├─ ProgressBar 进度条组件（ProgressTimer）
   └─ Label_Progress 文字：0%

步骤2：加载脚本 LoadingManager.ts

核心逻辑：异步预加载所有游戏资源、实时更新进度、加载完成跳转主场景

import { _decorator, Component, ProgressTimer, Label, director, resources, Vec3, tween } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LoadingManager')
export class LoadingManager extends Component {
    @property(ProgressTimer) progressBar!: ProgressTimer;
    @property(Label) progressText!: Label;

    onLoad() {
        // Logo入场缩放动画
        const logo = this.node.getChildByName("Sprite_Logo");
        tween(logo)
            .set({ scale: new Vec3(0,0,0) })
            .to(0.6, { scale: new Vec3(1,1,1) })
            .start();

        // 开始预加载资源
        this.loadGameAssets();
    }

    // 批量预加载所有游戏资源（肉块预制体、液体贴图、场景）
    async loadGameAssets() {
        const bundleList = ["textures", "prefabs", "scenes"];
        let total = bundleList.length;
        let loaded = 0;

        for(const bundleName of bundleList) {
            await new Promise(res => {
                resources.loadBundle(bundleName, (finish, totalAll) => {
                    // 更新实时加载进度
                    const curPercent = (loaded + finish / totalAll) / total;
                    this.updateProgress(curPercent);
                }, ()=>{
                    loaded++;
                    res(null);
                })
            })
        }

        // 全部加载完成，跳转主游戏场景
        director.loadScene("Scene_Game");
    }

    // 更新进度条+文字
    updateProgress(percent: number) {
        this.progressBar.progress = percent;
        this.progressText.string = `${Math.floor(percent * 100)}%`;
    }
}

进阶扩展（适配你的软体/液体项目）

1. 加载页放液体粒子、晃动肉块软体
   在Loading场景直接挂载之前写的液体发射器、弹簧质点肉块，加载资源时同步播放动态效果；
2. 全局数据联动
   读取GlobalData里的液体粘度、肉块软度参数，在加载页预览默认效果；
3. 过渡动画
   加载完成加淡出Tween，黑屏后再进入游戏场景，丝滑切换。

方案三：原生平台Android/iOS替换启动图（解决APP打开黑屏）

Android

1. 构建安卓项目后打开proj.android/app/src/main/res/mipmap-xxx；
2. 替换所有ic_launcher、splash图片；
3. 修改values/styles.xml设置全屏启动页背景色。

iOS

1. Xcode打开工程，修改LaunchScreen.storyboard；
2. 替换启动图资源，移除Cocos默认占位图。

三种方案对比，按需选择

避坑关键点

1. 不要混淆Splash和Loading场景
   引擎Splash是引擎初始化前，只能静态图；Loading场景是引擎跑起来之后，能做任意游戏动画；
2. Web端直接修改build文件夹图片会失效
   必须用build-templates模板目录保存自定义html/css，否则每次构建覆盖；
3. 加载场景资源尽量轻量化
   Loading场景只用1-2张小图，不要放大量贴图/物理预制体，避免加载页本身卡顿；
4. 多场景数据共享
   Loading场景和游戏主场景共用之前写的GlobalData全局单例，加载进度、配置互通。

最简推荐流程（你的项目直接照做）

1. 项目设置Splash替换自家Logo（解决开机Cocos标）；
2. 新建Scene_Loading作为启动场景，写上面LoadingManager脚本；
3. 在Loading场景添加液体粒子、弹簧肉块软体做动态视觉；
4. 预加载所有肉块、液体、关卡资源，进度条实时展示，加载完进入游戏。