我们平时工作中开发APP时，及时为用户提供应用更新是提升用户体验和保证功能完整性的重要一环。本文将通过一段实际的代码示例，详细介绍如何在基于uni-app框架的项目中实现自动检查应用更新的功能，并引导用户完成升级过程。该功能主要涉及与服务器端交互获取最新版本信息、比较版本号、提示用户升级以及处理下载安装流程。

创建一个checkappupdate.js文件

这个文件是写升级逻辑处理的文件，可以不创建，直接在App.vue中写，但是为了便于维护，还是单独放出来比较好，可以放在common或者util目录中（App.vue能引入到就行，随意放，根目录也行）,App.vue中引入该文件，调用升级函数如下图所示：

js完整代码

为了防止一点点代码写，容易让人云里雾里，先放完整代码，稍后再详细解释，其实看注释也就够了。

//这是服务端请求url配置文件,如果你直接卸载下面的请求中，可以不引入

import configService from '@/common/service/config.service.js'



export default function checkappupdate(param = {}) {

	// 合并默认参数

	param = Object.assign({

		title: "A new version has been detected！",

		content: "Please upgrade the app to the latest version！",

		canceltext: "No upgrade",

		oktext: "Upgrade now"

	}, param)



	plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {

		let platform = plus.os.name.toLocaleLowerCase() //Android

		let os_version = plus.os.version //13  安卓版本

		let vendor = plus.device.vendor //Xiaomi

		let url = configService.apiUrl

		uni.request({

			url: url + '/checkAppUpdate',

			method: 'GET',

			data: {

				platform: platform,

				os_version: os_version,

				vendor: vendor,

				cur_version: widgetInfo.version

			},

			success(result) {

				console.log(result)

				let versionCode = parseInt(widgetInfo.versionCode)

				let data = result.data ? result.data : null;

				// console.log(data);

				let downAppUrl = data.url

				//判断版本是否需要升级

				if (versionCode >= data.versionCode) {

					return;

				}

				//升级提示

				uni.showModal({

					title: param.title,

					content: data.log ? data.log : param.content,

					showCancel: data.force ? false : true,

					confirmText: param.oktext,

					cancelText: param.canceltext,

					success: res => {

						if (!res.confirm) {

							console.log('Cancel the upgrade');

							// plus.runtime.quit();

							return

						}

						// if (data.shichang === 1) {

						// 	//去应用市场更新

						// 	plus.runtime.openURL(data.shichangurl);

						// 	plus.runtime.restart();

						// } else {

						// 开始下载

						// 创建下载任务

						var dtask = plus.downloader.createDownload(downAppUrl, {

							filename: "_downloads/"

						},

							function (d, status) {

								// 下载完成

								if (status == 200) {

									plus.runtime.install(d.filename, {

										force: true

									}, function () {

										//进行重新启动;

										plus.runtime.restart();

									}, (e) => {

										uni.showToast({

											title: 'install fail:' + JSON

												.stringify(e),

											icon: 'none'

										})

										console.log(JSON.stringify(e))

									});

								} else {

									this.tui.toast("download fail,error code: " +

										status);

								}

							});

						let view = new plus.nativeObj.View("maskView", {

							backgroundColor: "rgba(0,0,0,.6)",

							left: ((plus.screen.resolutionWidth / 2) - 45) +

								"px",

							bottom: "80px",

							width: "90px",

							height: "30px"

						})



						view.drawText('start download...', {}, {

							size: '12px',

							color: '#FFFFFF'

						});

						view.show()

						// console.log(dtask);

						dtask.addEventListener("statechanged", (e) => {

							if (e && e.downloadedSize > 0) {

								let jindu = ((e.downloadedSize / e.totalSize) *

									100).toFixed(2)

								view.reset();

								view.drawText('Progress:' + jindu + '%', {}, {

									size: '12px',

									color: '#FFFFFF'

								});

							}

						}, false);

						dtask.start();

						// }

					},

					fail(e) {

						console.log(e);

						uni.showToast({

							title: 'Request error'

						})

					}

				})

			}

		})



	});

}

函数定义：checkappupdate

定义核心函数checkappupdate，它接受一个可选参数param，用于自定义提示框的文案等信息。函数内部首先通过Object.assign合并默认参数与传入参数，以确保即使未传入特定参数时也能有良好的用户体验。

获取应用信息与环境变量

利用plus.runtime.getProperty获取当前应用的详细信息，包括但不限于应用ID、版本号(version)和版本号代码(versionCode)，以及设备的操作系统名称、版本和厂商信息。这些数据对于后续向服务器请求更新信息至关重要。

请求服务器检查更新

构建包含平台信息、操作系统版本、设备厂商和当前应用版本号的请求参数，发送GET请求至配置好的API地址/checkAppUpdate，查询是否有新版本可用。后端返回参数参考下面：

   /**

     * 检测APP升级

     */

    public function checkAppUpdate()

    {

       $data['versionCode'] = 101;//更新的版本号

       $data['url'] = 'http://xxx/app/xxx.apk';//下载地址

       $data['force'] = true;//是否强制更新

       return json_encode($data);//返回json格式数据到前端

    }

比较版本与用户提示

一旦收到服务器响应，解析数据并比较当前应用的版本号与服务器提供的最新版本号。如果存在新版本，使用uni.showModal弹窗提示用户，展示新版本日志（如果有）及升级选项。此步骤充分考虑了是否强制更新的需求，允许开发者灵活配置确认与取消按钮的文案。

下载与安装新版本

用户同意升级后，代码将执行下载逻辑。通过plus.downloader.createDownload创建下载任务，并监听下载进度，实时更新进度提示。下载完成后，利用plus.runtime.install安装新APK文件，并在安装成功后调用plus.runtime.restart重启应用，确保新版本生效。

用户界面反馈

在下载过程中，通过创建原生覆盖层plus.nativeObj.View展示一个半透明遮罩和下载进度信息，给予用户直观的视觉反馈，增强了交互体验，进度展示稍微有点丑，可以提自己改改哈。

总结

通过上述步骤，我们实现了一个完整的应用自动检查更新流程，不仅能够有效通知用户新版本的存在，还提供了平滑的升级体验。此功能的实现，不仅提升了用户体验，也为产品迭代和功能优化提供了有力支持。开发者可以根据具体需求调整提示文案、下载逻辑、进度样式等细节，以更好地适配自身应用的特点和用户群体。

随着小程序项目的不断迭代升级，避免不了体积越来越大。微信限制主包最多2M，然而我们的项目引入了直播插件直接占了1.1M，导致必须采用一些手段去优化。下面介绍一下优化思路和终极解决方案。

1.分包

我相信几乎所有人都能想到的方案，基本上这个方案就能解决问题。具体如何实现可以参照官方文档这里不做过多说明。(基础能力 / 分包加载 / 使用分包 (qq.com))，但是有时候你会发现分包之后好像主包变化不是很大，这是为什么呢？

• 痛点1：通过依赖分析，如果分包中引入了第三方依赖，那么依赖的js仍然会打包在主包中，例如echarts、wxparse、socket.io。这就导致我们即使做了分包处理，但是主包还是很大，因为相关的js都会在主包中的vendor.js


• 痛点2：插件只能在主包中无法分包，例如直播插件直接占据1M
  


• 痛点3：tabbar页面无法分包，只能在主包内


• 痛点4：公共组件/方法无法分包，只能在主包内


• 痛点5：图片只能在主包内

2.图片优化

图片是最好解决的，除了tabbar用到的图标，其余都放在云上就好了，例如oss和obs。而且放在云上还有个好处就是背景图片无需担心引入不成功。

3.tabbar页面优化

这部分可以采用tabbar页面都在放在一个文件夹下，比如一共有4个tab，那么一个文件夹下就只存放这4个页面。其余tabbar的子页面一律采用分包。

4.独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
但是使用的时候需要注意：

• 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）


• 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；


• App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；


• 独立分包中暂时不支持使用插件。

5.终极方案we-script

我们自己写的代码就算再多，其实增加的kb并不大。大部分大文件主要源于第三方依赖，那么有没有办法像webpack中的externals一样，当进入这个页面的时候再去异步加载js文件而不被打包呢（说白了就是CDN）

其实解决方案就是we-script，他允许我们使用CDN方式加载js文件。这样就不会影响打包体积了。

使用步骤

使用中存在的坑

构建后可能会出现依赖报错，解决的方式就是将编译好的文件手动拖入miniprogram_npm文件夹中，主要是三个文件夹：we-script,acorn,eval5

最后成功解决了主包文件过大的问题，只要是第三方依赖，都可以通过这个办法去加载。

感谢阅读，希望来个三连支持下，转载记得标注原文地址~

前言

作为一个 uniapp 初学者，恰巧遇到微信短剧播放器接入的需求，在网上检索许久并没有发现傻瓜式教程。于是总结 uni-app 官网文档及微信开放文档，自行实践后，总结出几个步骤，希望为大家提供些帮助。实践后发现其实确实比较简单，大佬们可能也懒得写文档，那么就由我这个小白大概总结下。本文档仅涉及剧目提审成功后的播放器接入，其余相关问题请参考微信官方文档。

小程序申请插件

参考文档：developers.weixin.qq.com/miniprogram…

首先，需要在小程序后台，申请 appid 为 wx94a6522b1d640c3b 的微信插件，可以在微信小程序管理后台进行添加，路径是 设置 - 第三方设置 - 插件管理 - 添加插件，搜索 wx94a6522b1d640c3b 后进行添加：

uni-app 项目添加微信插件

参考文档：uniapp.dcloud.net.cn/tutorial/mp…

添加插件完成后，在 manifest.json 中，点击 源码视图，找到如下位置并添加红框内的代码，此步骤意在将微信小程序插件引入项目。

/* 添加微短剧播放器插件 */

 "plugins" : {

    "playlet-plugin" : {

         "version" : "latest",

         "provider" : "wx94a6522b1d640c3b"

     }

 }

manifest.json 中完成添加后，需要在 pages.json 中找一个页面（我这边使用的是一个新建的空白页面）挂载组件，挂载方式如下图红框中所示，需注意，这里的组件名称需要与 manifest.json 中定义的一致：

{

	"path": "newPage/newPage",

	"style": {

		"navigationBarTitleText": "",

		"enablePullDownRefresh": false,

		"navigationStyle": "custom",

		"app-plus": {

			"bounce": "none"

		},

		"mp-weixin": {

			"usingComponents": {

				"playlet-plugin": "plugin://playlet-plugin/playlet-plugin"

			}

		}

	}

}

挂载空页面是个笨办法，目前我这边尝试如果不挂载的话，会有些问题，有大神知道别的方法可以在评论区指点一下～

App.vue 配置

参考文档：developers.weixin.qq.com/miniprogram…

首先，找个地方新建一个 playerManager.js，我这边建在了 common 文件夹下。代码如下（代码参考微信官方文档给出的 demo）：

	var plugin = requirePlugin("playlet-plugin");

	// 点击按钮触发此函数跳转到播放器页面

	function navigateToPlayer(obj) {

	    // 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧目的dramaId，变量${srcAppid}是提审方appid，变量${serialNo}是某一集，变量${extParam}是扩展字段，可通过

	    const { extParam, dramaId, srcAppid, serialNo } = obj

	    wx.navigateTo({

	      url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&serialNo=${serialNo}&extParam=${extParam || ''}`

	    })

	}

	const proto = {

	  _onPlayerLoad(info) {

	    const pm = plugin.PlayletManager.getPageManager(info.playerId)

	    this.pm = pm

	    // encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节

	    this.getEncryptData({serialNo: info.serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      pm.setCanPlaySerialList({

	        data: res.encryptedData,

	        freeList: [{start_serial_no: 1, end_serial_no: 10}], // 1~10集是免费剧集

	      })

	    })

	    pm.onCheckIsCanPlay(this.onCheckIsCanPlay)

	    // 关于分享的处理

	    // 开启分享以及withShareTicket

	    pm.setDramaFlag({

	      share: true,

	      withShareTicket: true

	    })

	    // 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数

	    // 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况

	    plugin.getShareParams().then(res => {

	      console.log('getLaunch options query res', res)

	      // 关于extParam的处理，需要先做decodeURIComponent之后才能得到原值

	      const extParam = decodeURIComponent(res.extParam)

	      console.log('getLaunch options extParam', extParam)

	      // 如果设置了withShareTicket为true，可通过文档的方法获取更多信息

	      // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

	      const enterOptions = wx.getEnterOptionsSync()

	      console.log('getLaunch options shareTicket', enterOptions.shareTicket)

	    }).catch(err => {

	      console.log('getLaunch options query err', err)

	    })

	    // extParam除了可以通过在path传参，还可以通过下面的接口设置

	    pm.setExtParam('hellotest')

	    // 分享部分end

	  },

	  onCheckIsCanPlay(param) {

	    // TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置

	    console.log('onCheckIsCanPlay param', param)

	    var serialNo = param.serialNo

	    this.getEncryptData({serialNo: serialNo}).then(res => {

	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节

	      this.pm.isCanPlay({

	        data: res.encryptedData,

	        serialNo: serialNo,

	      })

	    })

	  },

	  getEncryptData(obj) {

	    const { serialNo } = obj

	    // TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数

	    const { srcAppid, dramaId } = this.pm.getInfo()

	    console.log('getEncryptData start', srcAppid, dramaId, serialNo)

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

	      resolve({

	        encryptedData: '' // TODO: 此参数需从后台接口获取到

	      })

	    })

	  },

	}

	function PlayerManager() {

	  var newProto = Object.assign({}, proto)

	  for (const k in newProto) {

	    if (typeof newProto[k] === 'function') {

	      this[k] = newProto[k].bind(this)

	    }

	  }

	}

	

	PlayerManager.navigateToPlayer = navigateToPlayer

	module.exports = PlayerManager

新建完成后，在 App.vue 中进行组件的配置和引用。

onLaunch: function() {

	// playlet-plugin必须和上面的app.json里面声明的插件名称一致

	const playletPlugin = requirePlugin('playlet-plugin')

	

	const _onPlayerLoad = (info) => {

		var PlayerManager = require('@/common/playerManager.js')

		const playerManager = new PlayerManager()

		playerManager._onPlayerLoad(info)

	}

	// 注册播放器页面的onLoad事件

	playletPlugin.onPageLoad(_onPlayerLoad.bind(this))

},

_onPlayerLoad(info) {

	var PlayerManager = require('@/common/playerManager.js')

    const playerManager = new PlayerManager()

    playerManager._onPlayerLoad(info)

},

页面使用

参考文档：developers.weixin.qq.com/miniprogram…

以上所有步骤完成后，就可以开心的使用短剧播放器了。 我这边临时写了个图片的 click 事件测试了一下：

clk() {

	// 逻辑处理...获取你的各种参数

	// 打开组件中封装的播放器页面

	PlayerManager.navigateToPlayer({

		srcAppid: 'wx1234567890123456', // 剧目提审方 appid

		dramaId: '100001', // 小程序管理后台的媒资管理上传的剧目的 dramaId

		serialNo: '1', // 剧目中的某一集

		extParam: encodeURIComponent('a=b&c=d'), // 扩展字段,需要encode

	})

},

写在最后：

总结完了，其实整体下来不是很难，对我这种前端小白来说检索和整合的过程是比较痛苦的，所以希望下一个接入的朋友可以少检索一些文档吧。
另附一个短剧播放器接口的文档： developers.weixin.qq.com/miniprogram…
文档主要介绍了短剧播放器插件提供的几个接口，在js代码里，插件接口实例通过下面的代码获取

// 名字playlet-plugin必须和app.json里面引用的插件名一致

const playletPlugin = requirePlugin('playlet-plugin')

读书越多越发现自己的无知，Keep Fighting！

欢迎友善交流，不喜勿喷~

Hope can help~

😅【现场还原】

"前端为什么没有自己的数据库？把数据存前端不就解决了后端性能问题" ——当CTO抛出这个灵魂拷问时，会议室突然安静得能听见CPU风扇的嗡鸣，在座所有人都无语了。这场因后端性能瓶颈引发的技术博弈，最终以"前端分页查询+本地筛选"的妥协方案告终。

面对现在几乎所有公司的技术leader都是后端出身，有的不懂前端甚至不懂技术，作为前端开发者，我们真的只能被动接受吗？

😣【事情背景】

• 需求：前端展示所有文章的标签列表，用户可以选择标签筛选文章，支持多选，每个文章可能有多个标签，也可能没任何标签。


• 前端观点：针对这种需求，我自然想到用户选中标签后，将标签id传给后端，后端根据id筛选文章列表返回即可。


• 后端观点：后端数据分库分表，根据标签检索数据还要排序分页，有性能瓶颈会很慢，很慢就会导致天天告警。


• 上升决策：由于方案有上述分歧，我们就找来了双方leader决策，双方leader也有分歧，最终叫来了CTO。领导想让我们将数据定时备份到前端，需要筛选的时候前端自己筛选。
  
  

  
  

  CTO语录：

  
  

  “前端为什么没有数据库？，把数据存前端，前端筛选，数据库不就没有性能压力了”

  
  

  "现在手机性能比服务器还强，让前端存全量数据怎么了？"

  
  

  "IndexedDB不是数据库？localStorage不能存JSON？"

  
  

  "分页？让前端自己遍历数组啊，这不就是你们说的'前端工程化'吗？"

  
  

  
  

😓【折中方案】

在方案评审会上，我们据理力争：

但现实往往比代码更复杂——当CTO拍板要求"先实现再优化"，使用了奇葩的折中方案：

• 前端轮询获取前1000条数据做本地筛选，用户分页获取数据超过1000条后，前端再轮询获取1000条，以此类推。


• 前端每页最多获取50条数据，每次最多并发5个请求（后端要求）

只要技术监控不报错，至于用户体验？慢慢等着吧你......

🖨️【批量并发请求】

既然每页只有50条数据，那我至少得发20个请求来拿到所有数据。显然，逐个请求会让用户等待很长时间，明显不符合前端性能优化的原则。于是我选择了 p-limit 和Promise.all来实现异步并发线程池。通过并发发送多个请求，可以大大减少数据获取的总时间。

import pLimit from 'p-limit';

const limit = pLimit(5); // 限制最多5个并发请求



// 模拟接口请求

const fetchData = (page, pageSize) => {

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve(`数据页 ${page}：${pageSize}条数据`);

    }, 1000);

  });

};



// 异步任务池

const runTasks = async () => {

  const totalData = 1000;  // 总数据量

  const pageSize = 50;     // 每页容量



  const totalPages = Math.ceil(totalData / pageSize); // 计算需要多少页



  const tasks = [];

  

  // 根据总页数动态创建请求任务

  for (let i = 1; i <= totalPages; i++) {

    tasks.push(limit(() => fetchData(i, pageSize))); // 使用pLimit限制并发请求

  }

  

  const results = await Promise.all(tasks); // 等待所有请求完成

  console.log('已完成所有任务:', results);

};



runTasks();

📑【高效本地筛选数据】

当所有数据都请求回来了，下一步就是进行本地筛选。毕竟后端已经将查询任务分配给了前端，所以我得尽可能让筛选的过程更高效，避免在本地做大量的计算导致性能问题。

1. 使用哈希进行高效查找

如果需要根据某个标签来筛选数据，最直接的做法就是遍历整个数据集，但这显然效率不高。于是我决定使用哈希表（或 Map）来组织数据。这样可以在常数时间内完成筛选操作。

const filterDataByTag = (data, tag) => {

  const tagMap = new Map();



  data.forEach(item => {

    if (!tagMap.has(item.tag)) {

      tagMap.set(item.tag, []);

    }

    tagMap.get(item.tag).push(item);

  });



  return tagMap.get(tag) || [];

};



const result = filterDataByTag(allData, 'someTag');

console.log(result);

2. 使用 Web Workers 进行数据处理

如果数据量很大，筛选过程可能会比较耗时，导致页面卡顿。为了避免这个问题，可以将数据筛选的过程交给 Web Workers 处理。Web Worker 可以在后台线程运行，避免阻塞主线程，从而让用户体验更加流畅。

const worker = new Worker('worker.js');



worker.postMessage(allData);



worker.onmessage = function(event) {

  const filteredData = event.data;

  console.log('筛选后的数据:', filteredData);

};



// worker.js

onmessage = function(e) {

  const data = e.data;

  const filteredData = data.filter(item => item.tag === 'someTag');

  postMessage(filteredData);

};

📝【总结】

这场技术博弈给我们带来三点深刻启示：

站在CTO那句"前端为什么没有数据库"的肩膀上，我们正在构建这样的未来：每个前端应用都内置轻量级数据库内核，通过差异同步策略与后端保持数据一致，利用浏览器计算资源实现真正的端智能。这不是妥协的终点，而是下一代Web应用革命的起点。

后记：三个月后，我们基于SQL.js实现了前端SQL查询引擎，配合WebWorker线程池，使得复杂筛选的耗时从秒级降至毫秒级——但这已经是另一个技术突围的故事了。

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

有趣的动画效果

前几天在网上看到了一个很有趣的动画效果，如下，光会跟随鼠标在卡片上进行移动，并且卡片会有视差的效果

那么在 Vue3 中应该如何去实现这个效果呢？

基本实现思路

其实实现思路很简单，无非就是分几步：

• 首先，卡片是相对定位，光是绝对定位


• 监听卡片的鼠标移入事件mouseenter，当鼠标进入时显示光


• 监听卡片的鼠标移动事件mouseover，鼠标移动时修改光的left、top，让光跟随鼠标移动


• 监听卡片的鼠标移出事件mouseleave，鼠标移出时，隐藏光

我们先在 Index.vue 中准备一个卡片页面，光的CSS效果可以使用filter: blur() 来实现

可以看到现在的效果是这样

实现光源跟随鼠标

在实现之前我们需要注意几点：

• 1、鼠标移入时需要设置卡片 overflow: hidden，否则光会溢出，而鼠标移出时记得还原


• 2、获取鼠标坐标时需要用clientX/Y而不是pageX/Y，因为前者会把页面滚动距离也算进去，比较严谨

刚刚说到实现思路时我们说到了mouseenter、mousemove、mouseleave，其实mouseenter、mouseleave 这二者的逻辑比较简单，重点是 mouseover 这个监听函数

而在 mouseover 这个函数中，最重要的逻辑就是：光怎么跟随鼠标移动呢？

或者也可以这么说：怎么计算光相对于卡片盒子的 left 和 top

对此我专门画了一张图，相信大家一看就懂怎么算了

• left = clientX - x - width/2


• height = clientY - y - height/2

知道了怎么计算，那么逻辑的实现也很明了了~封装一个use-light-card.ts

接着在页面中去使用

这样就能实现基本的效果啦~

卡片视差效果

卡片的视差效果需要用到样式中 transform 样式，主要是配置四个东西：

• perspective：定义元素在 3D 变换时的透视效果


• rotateX：X 轴旋转角度


• rotateY：Y 轴旋转角度


• scale3d：X/Y/Z 轴上的缩放比例

现在就有了卡片视差的效果啦~

给所有卡片添加光源

上面只是给一个卡片增加光源，接下来可以给每一个卡片都增加光源啦！！！

让光源变成可配置

上面的代码，总感觉这个 hooks 耦合度太高不太通用，所以我们可以让光源变成可配置化，这样每个卡片就可以展示不同大小、颜色的光源了~像下面一样

既然是配置化，那我们希望是这么去使用 hooks 的，我们并不需要自己在页面中去写光源的dom节点，也不需要自己去写光源的样式，而是通过配置传入 hooks 中

所以 hooks 内部要自己通过操作 DOM 的方式，去添加、删除光源，可以使用createElement、appendChild、removeChild 去做这些事~

完整源码

<!-- Index.vue -->



<template>

  <div class="container">

    <!-- 方块盒子 -->

    <div class="item" ref="cardRef1"></div>

    <!-- 方块盒子 -->

    <div class="item" ref="cardRef2"></div>

    <!-- 方块盒子 -->

    <div class="item" ref="cardRef3"></div>

  </div>

</template>



<script setup lang="ts">

import { useLightCard } from './use-light-card';



const { cardRef: cardRef1 } = useLightCard();

const { cardRef: cardRef2 } = useLightCard({

  light: {

    color: '#ffffff',

    width: 100,

  },

});

const { cardRef: cardRef3 } = useLightCard({

  light: {

    color: 'yellow',

  },

});

</script>



<style scoped lang="less">

.container {

  background: black;

  width: 100%;

  height: 100%;

  padding: 200px;

  display: flex;

  justify-content: space-between;



  .item {

    position: relative;

    width: 125px;

    height: 125px;

    background: #1c1c1f;

    border: 1px solid rgba(255, 255, 255, 0.1);

  }

}

</style>

// use-light-card.ts



import { onMounted, onUnmounted, ref } from 'vue';



interface IOptions {

  light?: {

    width?: number; // 宽

    height?: number; // 高

    color?: string; // 颜色

    blur?: number; // filter: blur()

  };

}



export const useLightCard = (option: IOptions = {}) => {

  // 获取卡片的dom节点

  const cardRef = ref<HTMLDivElement | null>(null);

  let cardOverflow = '';

  // 光的dom节点

  const lightRef = ref<HTMLDivElement>(document.createElement('div'));

  // 设置光源的样式



  const setLightStyle = () => {

    const { width = 60, height = 60, color = '#ff4132', blur = 40 } = option.light ?? {};

    const lightDom = lightRef.value;

    lightDom.style.position = 'absolute';

    lightDom.style.width = `${width}px`;

    lightDom.style.height = `${height}px`;

    lightDom.style.background = color;

    lightDom.style.filter = `blur(${blur}px)`;

  };



  // 设置卡片的 overflow 为 hidden

  const setCardOverflowHidden = () => {

    const cardDom = cardRef.value;

    if (cardDom) {

      cardOverflow = cardDom.style.overflow;

      cardDom.style.overflow = 'hidden';

    }

  };

  // 还原卡片的 overflow

  const restoreCardOverflow = () => {

    const cardDom = cardRef.value;

    if (cardDom) {

      cardDom.style.overflow = cardOverflow;

    }

  };



  // 往卡片添加光源

  const addLight = () => {

    const cardDom = cardRef.value;

    if (cardDom) {

      cardDom.appendChild(lightRef.value);

    }

  };

  // 删除光源

  const removeLight = () => {

    const cardDom = cardRef.value;

    if (cardDom) {

      cardDom.removeChild(lightRef.value);

    }

  };



  // 监听卡片的鼠标移入

  const onMouseEnter = () => {

    // 添加光源

    addLight();

    setCardOverflowHidden();

  };



  // use-light-card.ts



  // 监听卡片的鼠标移动

  const onMouseMove = (e: MouseEvent) => {

    // 获取鼠标的坐标

    const { clientX, clientY } = e;

    // 让光跟随鼠标

    const cardDom = cardRef.value;

    const lightDom = lightRef.value;

    if (cardDom) {

      // 获取卡片相对于窗口的x和y坐标

      const { x, y } = cardDom.getBoundingClientRect();

      // 获取光的宽高

      const { width, height } = lightDom.getBoundingClientRect();

      lightDom.style.left = `${clientX - x - width / 2}px`;

      lightDom.style.top = `${clientY - y - height / 2}px`;



      //   设置动画效果

      const maxXRotation = 10; // X 轴旋转角度

      const maxYRotation = 10; // Y 轴旋转角度



      const rangeX = 200 / 2; // X 轴旋转的范围

      const rangeY = 200 / 2; // Y 轴旋转的范围



      const rotateX = ((clientX - x - rangeY) / rangeY) * maxXRotation; // 根据鼠标在 Y 轴上的位置计算绕 X 轴的旋转角度

      const rotateY = -1 * ((clientY - y - rangeX) / rangeX) * maxYRotation; // 根据鼠标在 X 轴上的位置计算绕 Y 轴的旋转角度



      cardDom.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; //设置 3D 透视

    }

  };

  // 监听卡片鼠标移出

  const onMouseLeave = () => {

    // 鼠标离开移出光源

    removeLight();

    restoreCardOverflow();

  };



  onMounted(() => {

    // 设置光源样式

    setLightStyle();

    // 绑定事件

    cardRef.value?.addEventListener('mouseenter', onMouseEnter);

    cardRef.value?.addEventListener('mousemove', onMouseMove);

    cardRef.value?.addEventListener('mouseleave', onMouseLeave);

  });



  onUnmounted(() => {

    // 解绑事件

    cardRef.value?.removeEventListener('mouseenter', onMouseEnter);

    cardRef.value?.removeEventListener('mousemove', onMouseMove);

    cardRef.value?.removeEventListener('mouseleave', onMouseLeave);

  });



  return {

    cardRef,

  };

};

结语 & 加学习群 & 摸鱼群

我是林三心

• 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；


• 一个偏前端的全干工程师；


• 一个不正经的掘金作者；


• 一个逗比的B站up主；


• 一个不帅的小红书博主；


• 一个喜欢打铁的篮球菜鸟；


• 一个喜欢历史的乏味少年；


• 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

URL 结尾是否带 / 主要影响的是 服务器如何解析请求 以及 相对路径的解析方式，具体区别如下：

1. 基础概念

• URL（统一资源定位符） ：用于唯一标识互联网资源，如网页、图片、API等。


• 目录 vs. 资源：
  
  
  
  
  • 以 / 结尾的 URL 通常表示目录，例如：
    
    

    https://example.com/folder/
    
    

    
    
  
  
  • 不以 / 结尾的 URL 通常指向具体的资源（如文件），例如：
    
    

    https://example.com/file
    
    

    
    
  
  
  
  

2. 带 / 和不带 / 的具体区别

（1）目录 vs. 资源

• https://example.com/folder/
  
  
  
  
  • 服务器通常会将其解析为 目录，并尝试返回该目录下的默认文件（如 index.html）。
  
  
  
  


• https://example.com/folder
  
  
  
  
  • 服务器可能会将其视为 文件，如果 folder 不是文件，而是目录，服务器可能会返回 301 重定向到 folder/。
  
  
  
  

📌 示例：

• 访问 https://example.com/blog/
  
  
  
  
  • 服务器可能返回 https://example.com/blog/index.html。
  
  
  
  


• 访问 https://example.com/blog（如果 blog 是个目录）
  
  
  
  
  • 服务器可能重定向到 https://example.com/blog/，再返回 index.html。
  
  
  
  

（2）相对路径解析

URL 末尾是否有 / 会影响相对路径的解析。

假设 HTML 页面包含以下 <img> 标签：

<img src="image.png">

📌 示例：

• 访问 https://example.com/folder/
  
  
  
  
  • 图片路径解析为 https://example.com/folder/image.png
  
  
  
  


• 访问 https://example.com/folder
  
  
  
  
  • 图片路径解析为 https://example.com/image.png
  
  
  • 可能导致 404 错误，因为 image.png 在 folder/ 里，而浏览器错误地去 example.com/ 下查找。
  
  
  
  

原因：

• 以 / 结尾的 URL，浏览器会认为它是一个目录，相对路径会基于 folder/ 解析。


• 不带 /，浏览器可能认为 folder 是文件，相对路径解析可能会出现错误。

（3）SEO 影响

搜索引擎对 https://example.com/folder/ 和 https://example.com/folder 可能会视为两个不同的页面，导致 重复内容问题，影响 SEO 排名。因此：

• 网站通常会选择 一种形式 并用 301 重定向 规范化 URL。


• 例如：
  
  
  
  
  • https://example.com/folder 自动跳转 到 https://example.com/folder/。
  
  
  • 反之亦然。
  
  
  
  

（4）API 请求

对于 RESTful API，带 / 和不带 / 可能导致不同的行为：

• https://api.example.com/users
  
  
  
  
  • 可能返回所有用户数据。
  
  
  
  


• https://api.example.com/users/
  
  
  
  
  • 可能返回 404 或者产生不同的结果（取决于服务器实现）。
  
  
  
  

一些 API 服务器对 / 非常敏感，因此最好遵循 API 文档的规范。

3. 总结

如果你在开发网站，建议：

我是天元，立志做1000个有趣的项目的前端。如果你喜欢的话，请点赞，收藏，转发。评论领取零花钱+100勋章

背景

我老婆从事HR的工作，公司有很多连锁店，她需要将所有的门店的工资汇总计算，然后再拆分给各门店请确认，最后再提供给财务发工资。

随着门店数量渐渐增多，渐渐的我老婆已经不堪重负，每天加班都做不完，严重影响夫妻感情生活。

最终花费了2天的时间，完成了整个node程序，她只需要传入工资表，相应的各种表格在10s内自动输出。目前已正式交付，得到了每月零花钱提高100元的重大成果。

整体需求

• 表格的导入和识别


• 表格的计算（计算公式要代入），表格样式正确


• 最终结果按照门店拆分为工资表

需求示例（删减版）

需求为，根据传入的基本工资及补发补扣，生成总工资表，门店工资表，财务工资表发放表。

工资表中字段为门店，姓名，基本工资，补发补扣，最终工资（基本工资+补发补扣）。最后一行为总计

门店工资表按照每个门店，单独一个表格，字段同工资表。最后一行为总计

工资表

基础工资

补发补扣

技术选型

这次的主力库为exceljs，官方文档介绍如下

读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。

一个 Excel 电子表格文件逆向工程项目

选择exceljs是因为它支持完整的excel的样式及公式。

安装及目录结构

优先安装exceljs

npm init

yarn add exceljs

创建input,out,src三个文件夹，src放入index.js

package.json增加start脚本

"scripts": {

    "start": "node src/index.js"

  },

代码相关

导入

通过new Excel.Workbook();创建一个工作簿，通过workbook.xlsx.readFile来导入文件, 注意这是个promise

const ExcelJS = require("exceljs");

const path = require("path");

const inputPath = path.resolve(__dirname, "../input");

const outputPath = path.resolve(__dirname, "../out");



const loadInput =async () => {

  const workbook = new ExcelJS.Workbook();

  const inputFile = await workbook.xlsx.readFile(inputPath + "/工资表.xlsx")

};



loadInput()

数据拆分

通过getWorksheetApi,我们可以获取到对应的工作表的内容

  const loadInput =async () => {

	...

  // 基本工资

  const baseSalarySheet = inputFile.getWorksheet("基本工资");

  // 补发补扣

  const supplementSheet = inputFile.getWorksheet("补发补扣");



}

然后我们需要进一步的来进行拆分，因为第一行为每个工作表的头，这部分在我们实际数据处理中不会使用，所以通过getRows来获取实际的内容。

  const baseSalaryContent = baseSalarySheet.getRows(

    2,

    baseSalarySheet.rowCount

  );

  baseSalaryContent.map((row) => {

    console.log(row.values);

  });



  /**

[ <1 empty item>, '2024-02', '海贼王', '路飞', 12000 ]

[ <1 empty item>, '2024-02', '海贼王', '山治', 8000 ]

[ <1 empty item>, '2024-02', '火影忍者', '鸣人', '6000' ]

[ <1 empty item>, '2024-02', '火影忍者', '佐助', 7000 ]

[ <1 empty item>, '2024-02', '火影忍者', '雏田', 5000 ]

[ <1 empty item>, '2024-02', '一拳超人', '琦玉', 4000 ]

[]

[]

**/

可以看到实际的内容已经拿到了，我们要根据这些内容拼装一下最终便于后续的调用。

我们可以通过 row.getCellApi获取到对应某一列的内容，例如门店是在B列，那么我们就可以使用row.getCell('B')来获取。

因为我们需要拆分门店，所以这里的基本工资，我们以门店为单位，把数据进行拆分

  const baseSalary = {};



  baseSalaryContent.forEach((row) => {

    const shopName = row.getCell("B").value;

    if (!shopName) return; // 过滤空行



    const name = row.getCell("C").value;

    const salary = row.getCell("D").value;



    if (!baseSalary[shopName]) {

      baseSalary[shopName] = [];

    }

    baseSalary[shopName].push({

      name,

      salary,

    });

  });

这样我们得到了一个以门店名称为key的对象，value为该门店的员工信息数组。利用相同方法，获取补发补扣。因为每个人已经确定了门店，所以后续只需要根据姓名来做key，拆分成一个object即可

  // 补发补扣

  const supplement = {};

  supplementSheet.getRows(2, supplementSheet.rowCount).forEach((row) => {

    const name = row.getCell("C").value;

    const type = row.getCell("H").value;



    let count = row.getCell("D").value;

    // 如果为补扣，则金额为负数

    if (type === "补扣") {

      count = -count; 

    }

    if (!supplement[name]) {

      supplement[name] = 0;

    }

    supplement[name] += count;

  });



  

数据组合

门店工资表

因为每个门店需要独立一张表，所以需要遍历baseSalary

  

  Object.keys(baseSalary).forEach((shopName) => {

    const workbook = new ExcelJS.Workbook();

    const worksheet = workbook.addWorksheet("工资表");



    // 添加表头

    worksheet.addRow([

      "序号",

      "门店",

      "姓名",

      "基本工资",

      "补发补扣",

      "最终工资",

    ]);

    baseSalary[shopName].forEach((employee, index) => {

      worksheet.addRow([

        index + 1,

        shopName,

        employee.name,

        +employee.salary,

        supplement[employee.name] || 0,

        +employee.salary + (supplement[employee.name] || 0),

      ]);

    });

  });

此时你也可以快进到表格输出来查看输出的结果，以便随时调整

这样我们就把基本工资已经写入工作表了，但是这里存在问题，最终工资使用的是一个数值，而没有公式。所以我们需要改动下

 worksheet.addRow([        index + 1,        shopName,        employee.name,        employee.salary,        supplement[employee.name] || 0,

        {

          formula: `D${index + 2}+E${index + 2}`,

          result: employee.salary + (supplement[employee.name] || 0),

        },

      ]);

这里的formula将对应到公式，而result是显示的值，这个值是必须写入的，如果你写入了错误的值，会在表格中显示该值，但是双击后，公式重新计算，会替换为新的值。所以这里必须计算正确

合计

依照上方的逻辑，继续添加一行作为合计，但是之前计算的时候，需要添加一个临时变量，记录下合计的相关内容。

     const count = [0, 0, 0];

    baseSalary[shopName].forEach((employee, index) => {

      count[0] += +employee.salary;

      count[1] += supplement[employee.name] || 0;

      count[2] += +employee.salary + (supplement[employee.name] || 0);

      worksheet.addRow([

        index + 1,

        shopName,

        employee.name,

        +employee.salary,

        supplement[employee.name] || 0,

        {

          formula: `D${index + 2}+E${index + 2}`,

          result: +employee.salary + (supplement[employee.name] || 0),

        },

      ]);

    });

然后在尾部添加一行

worksheet.addRow([      "合计",      "",      "",      {        formula: `SUM(D2:D${baseSalary[shopName].length + 1})`,

        result: count[0],

      },

      {

        formula: `SUM(E2:E${baseSalary[shopName].length + 1})`,

        result: count[1],

      },

      {

        formula: `SUM(F2:F${baseSalary[shopName].length + 1})`,

        result: count[2],

      },

    ]);

美化

表格的合并，可以使用mergeCells

   worksheet.mergeCells(

      `A${baseSalary[shopName].length + 2}:C${baseSalary[shopName].length + 2}`

    );

这样就合并了我们的最后一行的前三列，接下来我们要给表格添加线条。

对于批量的添加，可以直接使用addConditionalFormatting，它将在一个符合条件的单元格范围内添加规则

    worksheet.addConditionalFormatting({

      ref: `A1:F${baseSalary[shopName].length + 2}`,

      rules: [

        {

          type: "expression",

          formulae: ["true"],

          style: {

            border: {

              top: { style: "thin" },

              left: { style: "thin" },

              bottom: { style: "thin" },

              right: { style: "thin" },

            },

            alignment: { vertical: "top", horizontal: "left", wrapText: true },

          },

        },

      ],

    });

表格输出

现在门店工资表已经拆分完成，我们可以直接保存了，使用xlsx.writeFileApi来保存文件

 Object.keys(baseSalary).forEach((shopName) => {

 

	...



	  workbook.xlsx.writeFile(outputPath + `/${shopName}工资表.xlsx`);

})

最终效果

相关代码地址

github.com/tinlee/1000…

前言

autofit.js 发布马上要一年了，也收获了一批力挺用户，截至目前它在github上有1k 的 star，npm 上有超过 13k 的下载量。

这篇文章主要讲从设计稿到落地开发大屏应用，大道至简，这篇文章能帮助各位潇洒自如的开发大屏。

分析设计稿

分析设计稿之前先吐槽一下大屏这种展现形式，这简直就是自欺欺人、面子工程的最直接的诠释，是吊用没有，只为了好看，如果设计的再不好看啊，这就纯纯是屎。在我的理解中，这就像把PPT放到了web端，仅此而已。

但是王哥告诉我："你看似没有用的东西，其实都有用，很多想真正做出有用的产品的企业，没钱，就要先把面子工程做好，告诉别人他们要做一件什么事，这样投资人才会看到，后面才有机会发展。"

布局方案

上图展示了一个传统意义上且比较普遍的大屏形态，分为四个部分，分别是

头部

头部经常放标题、功能菜单、时间、天气

左右面板

左右面板承载了各种数字和报表，还有视频、轮播图等等

中间

中间部分一般放地图，这其中又分假地图（一张图片）、图表地图（如echarts）、地图引擎（如：leaflet、mapbox、高德、百度）。或者有的还会放3D场景，一般有专门的同事去做3D场景，然后导入到web端。

大屏的设计通常的分辨率是 1920*1080 的，这也是迄今为止应用最广泛的显示器配置，当然也有基于客户屏幕做的异形分辨率，这就五花八门了。

但是万变不离其宗，分辨率的变化不会影响它的基本结构，根据上面的图，我们可以快速构建结构代码

  <div class='Box'>

    <div class="header"></div>

    <div class="body">

      <div class="leftPanel"></div>

      <div class="mainMap"></div>

      <div class="rightPanel"></div>

    </div>

  </div>

上面的代码实现了最简单的上下(Box)+左右(body)的布局结构，完全不需要任何定位策略。

要实现上图的效果，只需最简单的CSS即可完成布局。

组件方案

大屏虽然是屎，但是是一种可玩性很强的项目，想的越复杂，做起来就越复杂，想的越简单，做起来就越简单。

可以疯狂封装炫技，因为大屏里面的可玩组件简直太多了，且涵盖的太全了，想怎么玩都可以，包括但不限于 各类图表库的封装（echarts、highCharts、vChart）、轮播图（swiper）、地图引擎、视频库（包括直播流）等等。

如果想简单，甚至可以不用封装，可以看到结构甚至简单到不用CSS几行就可以搭建出基本框架，只把header、leaftPanel、rightPanel、map封装一下就可以了。

这里还有一个误区，就是大家都喜欢把 大型的组件库 拉到大屏里来用，结果做完了发现好像只用了一个 toast 和一个下拉组件，项目打包后却增大了几十倍的体积，其实像这种简单的组件，完全可以手写，或者找小的独立包来用，一方面会减小体积，不至于让项目臃肿，另一方面可以锻炼自己的手写能力，这才是有必要的封装。

适配

目前主流的适配方案，依然是 rem 方案，其原理就是根据根元素的 font-size 自动计算大小，但是此方法需要手动计算 rem 值，或者使用第三方插件如postcss等，但是此方案还有一个弊端，就是无法向下兼容，因为浏览器中最小的文字大小是12px。

vh/vw方案就不再赘述了，原理基本和 rem/em 相似，都涉及到单位的转换。

autofit.js

主要讲一下使用 autofit.js 如何快速实现适配。

不支持的场景

首先 autofit.js 不支持 elementUI(plus)、ant-design等组件库，具体是不支持包含popper.js的组件，popper.js 在计算弹出层位置时，不会考虑 scale 后的元素的视觉大小，所以会造成弹出元素的位置偏移。

其次，不支持 百度地图，百度地图对窗口缩放事件没有任何处理，有同学反馈说，即使使用了resize属性，百度地图在和autofit.js共同使用时，也会有事件热区偏移的问题。而且百度地图使用 bd-09 坐标系，和其他图商不通用，引擎的性能方面也差点意思，个人不推荐在开发中使用百度地图。

然后一些拖拽库，如甘特图插件，可能也不支持，他们在计算鼠标位置时同样没有考虑 scale 后的元素的视觉大小。

用什么单位

不支持的单位：vh、vw、rem、em

让我诧异的是，老有人问我该用什么单位，主要徘徊在 px 和 % 之间，加群的同学多数是因为用了相对单位，导致留白了。不过人各有所长，跟着各位大佬我也学到了很多。

看下图

假如有两个宽度为1000的元素，他们内部都有一个子元素，第一个用百分比设置为 width:50%;left:1% , 第二个设置为 wdith:500px;left:10px 。此时，只要外部的1000px的容器宽度不变，这两个内部元素在视觉上是一模一样的，且在实际数值上也是一模一样的，他们宽度都为500px，距离左侧10px。

但是如果外部容器变大了，来看一下效果：

在样式不变的情况下，仅改变外部容器大小，差异就出来了，由上图可知，50%的元素依然占父元素的一半，实际宽度变成了 1000px，距离左侧的实际距离变成了 20px。

这当然不难理解，百分比单位是根据 最近的、有确定大小的父级元素计算的。

所以，应该用什么单位其实取决于想做什么，举个例子：在1920*1080基础上开发，中间的地图写成了宽度为 500px ，这在正常情况下，看起来没有任何问题，它大概占屏幕的 26%，当屏幕分辨率达到4096*2160时,它在屏幕上只占 12%，看起来就是缩在一角。而当你设置宽度为26%时，无论显示器如何变化，它始终占屏幕26%。

autofit.js 所干的事，就是把1000px 变成了 2000px或者把2000px变成了1000px，并给它设置了一个合适的缩放大小。

图表、图片拉伸

背景或各种图片按需设置 object-fit: cover;即可

图表如echarts一般推荐使用百分比，且监听窗口变化事件做resize()

结语

再次感慨，大道至简，事情往往没有那么复杂，祝各位前程似锦。

迅速崛起和快速退出

时间回到2014年，此时的 Angular 1.x 习得了多种武林秘籍，左手降龙十八掌、右手六脉神剑，哦不，左手双向数据绑定、右手依赖注入、上能模块化开发、下有模板引擎 和 前端路由, 背后还有Google这个风头无两的带头大哥做技术背书，可以说集万千功能和宠爱于一身，妥妥的主角光环。

而此时的江湖，B端开发正尝到了 SPA 的甜头，积极的从传统的 MVC 开发模式转变为更为方便快捷的单页面应用开发模式，

文章同步在公众号：萌萌哒草头将军，欢迎关注！

一拍即合，强大的一站式单页面开发框架Angular自然而然，就成了公认的武林盟主，江湖一哥。

但是好景不长，2016年9月14日 Angular 2.x 的发布，彻底断送了武林盟主的宝座，

Vue：大哥，你可是真给机会呀！

2.0 使用ts彻底重写（最早支持ts的框架）、放弃了脏检查更新机制，引入了响应式系统、使用现代浏览器标准、加入装饰器语法，和 1.0 完全不兼容。可以从上图看到，此时大家基本上还不太接受ts!

新手面对陡然升高的学习曲线叫苦连连，已经入坑的开发者因为巨大的迁移工作而怨声载道。

此时，默默耕耘了两年的小弟，Vue已经拥有完备的本地化文档和丰富的可选生态，而且作为新手你只要会使用html、css、javascript，就可以上手写项目了。

所以，此时的 Vue 振臂一呼：“王侯将相宁有种乎！”，立马新皇加冕！

积极改变，三拜义父的数据驱动

忆往昔峥嵘岁月稠，恰同学少年，风华正茂；书生意气，挥斥方遒。

一转眼，angular 已经发布第19个大版本了（平均一年两个版本）。

失去武林盟主的Angular，飘零半生，未逢明主，公若不弃，Angular愿拜为义父，

从 脏检查机制 到 响应式系统，再到Signals系统， Angular 历经沧桑的数据驱动方式可以说是前端发展的缩影。

脏检查机制

脏检查机制 是通过拦截异步操作，http setTimeout 用户交互事件等，触发变更检测系统，从根组件开始检查组件中数据是否有更新，有更新时，对应的 $scope 变量会被标记为 脏，然后同步的更新dom的内容，重新开始变更检查，直到稳定后标记为干净，即通过稳定性检查！

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>AngularJS Counter</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body ng-controller="CounterController as ctrl">



<h1>Count: {{ ctrl.count }}</h1>

<h2>Double Count: {{ ctrl.doubleCount() }}</h2>

<button ng-click="ctrl.increment()">+1</button>



<script>

  angular.module('myApp', [])

    .controller('CounterController', function() {

      var vm = this;

      vm.count = 0;



      vm.increment = function() {

        vm.count++;

        console.log('Latest count:', vm.count);

      };



      vm.doubleCount = function() {

        return vm.count * 2;

      };

  });

</script>

</body>

</html>

但是这种检查机制存在缺陷，例如，当数据量十分庞大时，就会触发非常多次的脏检查机制。

响应式系统

响应式系统 没有出现之前，脏检查机制 是唯一的选择，但是响应式系统凭借快速轻便的特点，立马在江湖上引起了不小的轰动，Angular也放弃了笨重的脏检查机制采用了响应式系统!

// app.component.ts

import { Component } from '@angular/core';



@Component({

  selector: 'app-root',

  template: `

    <h1>Count: {{ count }}</h1>

    <h2>Double Count: {{ doubleCount() }}</h2>

    <button (click)="increment()">+1</button>

  `,

})

export class AppComponent {

  count: number = 0;



  increment() {

    this.count++;

    console.log('Latest count:', this.count);

  }



  doubleCount() {

    return this.count * 2;

  }

}

和我们熟知的Vue的响应式不同，Angular的响应式采用双向数据流的设计，这也使得它在面对复杂项目时，性能和维护上不如Vue快捷方便。

所以，为了更好的驾驭双向数据流的响应式系统，Angular也是自创了很多绝学，例如：局部变更检测。

该绝学主要招式：组件级变更检测策略、引入zonejs、OnPush 策略等。

1. 组件级变更检测策略

每个组件都有自己的更新策略，只有组件的属性和文本发生变化时，才会触发变更检测！

2. 引入zonejs

引入zonejs拦截http setTimeout 用户交互事件等异步操作

3. OnPush 策略

默认情况下，整个组件树在变更时更新。

但是开发者可以选择 OnPush 策略，使得组件仅在输入属性发生变化、事件触发或手动调用时才进行变更检测。这进一步大大减少了变更检测的频率，适用于数据变化不频繁的场景。

Signals系统

很快啊，当SolidJS凭借优异的信号系统在江湖上闯出了响亮的名声，这时，大家才意识到，原来还有更优秀的开发方式！signal系统的开发方式，也被公认为新一代的武林绝技！

于是，Angular 16它来了，它带着signal、memo、effect三件套走来了！

当使用signal时，更新仅仅发生在当前组件。

// app.component.ts

import { Component, signal, effect, memo } from '@angular/core';



@Component({

  selector: 'app-root',

  template: `

    <h1>Count: {{ count() }}</h1>

    <h2>Double Count: {{ doubleCount() }}</h2>

    <button (click)="increment()">+1</button>

  `,

  styles: []

})

export class AppComponent {

  // 使用 signal 来管理状态

  count = signal(0);



  // 使用 memo 来计算 doubleCount

  doubleCount = memo(() => this.count() * 2);



  constructor() {

    // 使用 effect 来监听 count 的变化

    effect(() => {

      console.log('Latest count:', this.count());

    });

  }



  increment() {

    // 更新 signal 的值

    this.count.set(this.count() + 1);

  }

}

总结

Angular 虽然在国内市场一蹶不振，但是在国际市场一直默默耕耘 10 年。它作为一站式解决方案的框架，虽然牺牲了灵活性，但是也为开发者提供了沉浸式开发的选择！

且它不断创新、积极拥抱新技术的精神令人十分钦佩！

今天的内容就这些了，如果你觉得还不错，可以关注我。

如果文章中存在问题，欢迎指正！

在 JavaScript 中，使用 debugger 关键字可以在代码执行到该位置时触发断点调试。这可以帮助开发人员进行代码调试和排错。然而，有些网站开发者可能会故意使用 debugger 关键字来阻止调试，从而增加代码的安全性。但仍然有一些方法可以绕过这种防护措施，进行调试和排错。

禁用浏览器debugger

因为 debugger 其实就是对应的一个断点，它相当于用代码显示地声明了一个断点，要解除它，我们只需要禁用这个断点就好了。

禁用全局断点

全局禁用开关位于 Sources 面板的右上角，如下图所示：

点击它，该按钮会被激活，变成蓝色。

这个时候我们再重新点击一下 Resume script execution(恢复脚本执行)按钮，跳过当前断点，页面就不会再进入到无限 debugger 的状态了。

请注意，禁用所有断点可能会导致你错过一些潜在的问题或错误，因为代码将会连续执行而不会在可能的问题点停止。因此，在禁用所有断点之前，请确保你已经理解了代码的行为，并且明白在出现问题时该如何调试。

禁用局部断点

尝试使用另一种方法来跳过这个无限 debugger。在 debugger 语句所在的行的行号上单击鼠标右键，此时会出现一个快捷菜单，操作下图所示：

添加条件断点

在JS代码 debugger 行数位置的最左侧点击右键，添加条件断点（满足条件才会进入断点），将条件设置为false，就是条件永远不成立，永远不会断下来。

添加条件断点还可以监视获取一些变量信息，还是挺好用的。

如果是简单的debugger断点，直接用上边的方式就可以，如果是通过定时器触发的debugger断点，就需要进行Hook处理了。

以上的方案执行完毕之后有时候会跳转空页面，这时候只需要在空页面上打开原先地址即可。

先打开控制台

有时候我们一打开网页，就直接进入空页面，控制台上的js和html文件也随之为空，这时候需要在空白页面，或者F12等键无法打开控制台等，这种可以先打开控制台，然后再在空白页面上打开网站即可。

可以在这个网站上试一下。

替换文件

直接使用浏览器开发者工具替换修改js（Sources面板 --> Overrides），或者通过FD工具替换。

这种方式的核心思路，是替换 JS 文件中的 debugger 关键字，并保存为本地文件，在请求返回的时候、通过正则匹配等方式、拦截并替换返回的 JS 代码，以达到绕过 debugger 的目的。也可以直接删掉相关的debugger代码。

具体实现可参考：2024最新版JavaScript逆向爬虫教程-------基础篇之无限debugger的原理与绕过

快捷方案-使用油猴等插件

使用这种方法，就不需要再打 script 断点。直接安装插件即可。

参考文献

2024最新版JavaScript逆向爬虫教程-------基础篇之无限debugger的原理与绕过

解决浏览器调试无限debugger

这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。

无限debugger

• 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行


• 由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的.

基础方案

(() => {

  function ban() {

    setInterval(() => { debugger; }, 50);

  }

  try {

    ban();

  } catch (err) { }

})();

• 将 setInterval 中的代码写在一行，可以禁止用户断点，即使添加 logpoint 为 false 也无用


• 当然即使有些人想到用左下角的格式化代码，将其变成多行也是没用的

浏览器宽高

根据浏览器宽高、与打开F12后的宽高进行比对，有差值，说明打开了调试，则替换html内容；

• 通过检测窗口的外部高度和宽度与内部高度和宽度的差值，如果差值大于 200，就将页面内容设置为 "检测到非法调试"。


• 通过使用间隔为 50 毫秒的定时器，在每次间隔内执行一个函数，该函数通过创建一个包含 debugger 语句的函数，并立即调用该函数的方式来试图阻止调试器的正常使用。

(() => {

  function block() {

    if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {

      document.body.innerHTML = "检测到非法调试";

    }

    setInterval(() => {

      (function () {

        return false;

      }

      ['constructor']('debugger')

      ['call']());

    }, 50);

  }

  try {

    block();

  } catch (err) { }

})();

关闭断点，调整空页面

在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。(文心一言采用方案)

setInterval(function () {

  var startTime = performance.now();

  // 设置断点

  debugger;

  var endTime = performance.now();

  // 设置一个阈值，例如100毫秒

  if (endTime - startTime > 100) {

    window.location.href = 'about:blank';

  }

}, 100);

第三方插件

disable-devtool

disable-devtool可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的代码搬运。

该库有以下特性:

🦂使用🦂

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'>script>

更多使用方法参见官网：disable-devtool

disable-devtool

console-ban禁止 F12 / 审查开启控制台，保护站点资源、减少爬虫和攻击的轻量方案，支持重定向、重写、自定义多种策略。

使用

<head>

  

  <script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js">script>

  <script>

    // default options

    ConsoleBan.init()

    // custom options

    ConsoleBan.init({

      redirect: '/404'

    })

  script>

head>

在项目中使用：

  yarn add console-ban

import { init } from 'console-ban'



init(options)

重定向

ConsoleBan.init({

  // 重定向至 /404 相对地址

  redirect: '/404',

  // 重定向至绝对地址

  redirect: 'http://domain.com/path'

})

使用重定向策略可以将用户指引到友好的相关信息地址（如网站介绍），亦或是纯静态 404 页面，高防的边缘计算或验证码等页面。

注：若重定向后的地址可以通过 SPA 路由切换或 pjax 局部加载技术等进行非真正意义上的页面切换，则切换后的控制台监测将不会再次生效，对于 SPA 你可以在路由卫士处重新注册本实例，其他情况请引导至真正的其他页面。

重写

var div = document.createElement('div')

div.innerHTML = '不要偷看啦~'



ConsoleBan.init({

  // 重写 body 为字符串

  write: '
 不要偷看啦~ 
',

  // 可传入节点对象

  write: div

})

重写策略可以完全阻断对网站内容的审查，但较不友好，不推荐使用。

回调函数

ConsoleBan.init({

  callback: () => {

    // ...

  }

})

回调函数支持自定义打开控制台后的策略。

参数

注：redirect、write、callback 三种策略只能取其一，优先使用回调函数。

参考文章

禁止别人调试自己的前端页面代码

前端防止恶意调试

禁止调试，阻止浏览器F12开发者工具

前端防止调试技术

结语

需要注意的是，这些技术可以增加攻击者分析和调试代码的难度，但无法完全阻止恶意调试。因此，对于一些敏感信息或关键逻辑，最好的方式是在后端进行处理，而不是完全依赖前端来保护。

下篇文章主要介绍如何破解这些禁止调试的方法。

矛与盾：⚔️不让我在控制台上调试，哼，休想🛠️

表妹问：前端好玩吗？我说好玩，但表妹接下来的回复看哭了我。

是的，回复如下：

这红海血途上，新兵举着 "大前端" 旌旗冲锋，老兵拖着node_modules残躯撤退。资本织机永不停歇，框架版本更迭如暴君换季，留下满地deprecated警告如秋后落叶。

其一、夹缝中的苦力

世人都道前端易，不过调接口、改颜色，仿佛稚童搭积木。却不知那屏幕上寸寸像素之间，皆是血泪。产品拍案，需求朝夕三变，昨日之红蓝按钮，今晨便成黑白圆角。UI稿纸翻飞如雪，设计师手持“用户体验”四字大旗，将五更赶工的代码尽数碾碎。后端端坐高台，接口文档空悬如镜花水月，待到交付时辰，方抛来残缺数据。此时节，前端便成了那补天的女娲，于混沌中捏造虚拟对象，用JSON.parse('{"data": undefined}')这等荒诞戏法，将虚无粉饰成真实。

看这段代码何等悲凉：

// 后端曰：此接口返data字段，必不为空

fetch('api/data').then(res => {

  const { data } = res;

  render(data[0].children[3].value || '默认值'); // 层层掘墓，方见白骨

});

此乃前端日常——在数据废墟里刨食，用||与?.铸成铁锹，掘出三分体面。

其二、技术的枷锁

JavaScript本是脚本小儿，如今却要扛鼎江山。君不见React、Vue、Angular三座大山压顶，每年必有新神像立起。昨日方学得Redux真经，今朝GraphQL又成显学。更有Electron、ReactNative、Flutter诸般法器，教人左手写桌面应用，右手调移动端手势。所谓“大前端”，实乃资本画饼之术，人前跨端写，人后页面仔——既要马儿跑，又言食草易。

且看这跨平台代码何等荒诞：

// 一套代码统治三界（iOS/Android/Web）

<View>

  {Platform.OS === 'web' ? 

    <div onClick={handleWebClick} /> : 

    <TouchableOpacity onPress={handleNativePress} />

  }

</View>

此类缝合怪代码，恰似给长衫打补丁，既失体统，又损性能。待到内存泄漏、渲染卡顿时，众人皆指前端曰："此子学艺不精！"

何人怜悯前端 node18 react19 逐人老，后端写着 java8 看着 java22 笑。

其三、尊严的消亡

领导提拔，必先问尔可懂SpringBoot、MySQL分库分表？纵使前端用WebGL绘出三维宇宙，用WebAssembly重写操作系统，在会议室里仍是“做界面的”。工资单上数字最是直白——同司后端新人起薪一万五，前端老将苦熬三年方摸得此数。更可笑者，产品经理醉酒时吐真言："你们不就是改改CSS么？"

再看这可视化代码何等心酸：

// 用Canvas画十万级数据点

ctx.beginPath();

dataPoints.forEach((point, i) => {

  if (i % 100 === 0) ctx.stroke(); // 分段渲染防卡死

  ctx.lineTo(point.x, point.y);

});

此等精密计算，在他人眼中不过"动画效果"，与美工修图无异。待浏览器崩溃，众人皆曰："定是前端代码劣质！"

技术大会，后端高谈微服务、分布式，高并发，满座掌声如雷，实则系统使用量百十来人也是远矣；前端言及 CSS 栅格、浏览器渲染，众人瞌睡连天。领导抚掌笑曰：“后端者，国之重器；前端者，雕虫小技。” 晋升名单，后端之名列如长蛇，前端者埋没于墙角尘埃。纵使将那界面写出花来，终是 “美工” 二字定终身。

其四、维护者的悲歌

JavaScript本无类型，如野马脱缰。若非经验老道之一，常写出这等代码：

function handleData(data) {

  if (data && typeof data === 'object') { // 万能判断

    return data.map(item => ({

      ...item,

      newProp: item.id * Math.random() // 魔改数据

    }));

  }

  return []; // 默认返回空阵，埋下百处报错

}

此类代码如瘟疫蔓延，领导却言“这些功能实习生也能写！”，却不顾三月后连作者亦不敢相认，只得下任前端难上加难。

而后端有Type大法，编译检查护体，有Swagger契约，有Docker容器，纵使代码如乱麻，只需扩内存、增实例，便可遮掩性能疮疤。

其五、末路者的自白

诸君且看这招聘启事："需精通Vue3+TS+Webpack，熟悉React/Node.js，有Electron/小程序经验，掌握Three.js/WebGL者重点考虑。" 薪资却标着"6-8K"。更有机智者发明"全栈"之名，实欲以一人之躯，承三头六臂之劳。

再看这面试题何等荒谬：

// 手写Promise实现A+规范

class MyPromise {

  // 三千行后，方知自己仍是蝼蚁

}

此等屠龙之术，入职后唯调API用。恰似逼庖丁解牛，却令其日日杀鸡。

或以使用组件库之经验薪资招之，又以写不好组件库之责裁出。

尾声：铁屋中的叩问

前端者，数字化时代的纺织工也。资本织机日夜轰鸣，框架如梭穿行不息。程序员眼底血丝如网。所谓"全栈工程师"，实为包身工雅称；所谓"技术革新"，不过剥削新法。

若仍有少年热血未冷，欲投身此业，且听我一言：君有凌云志，何不学Rust/C++，做那操作系统、数据库等真·屠龙技？莫要困在这CSS牢笼中，为圆角像素折腰，为虚无需求焚膏。前端之路，已是红海血途，望后来者三思，三思！

大家好，我是 Java陈序员。

由于为了生活奔波，常年在外，导致很多关系稍疏远的亲戚之间来往并不多。

因此节假日回家时，往往会搞不清楚哪位亲戚应该喊什么称呼，很容易“社死”。

今天给大家介绍一个亲戚关系计算器，让你快速的计算出正确的亲戚称谓！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

relationship —— 中国亲戚关系计算器，只需简单的输入即可算出称谓。

输入框兼容了不同的叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等，方便不同地域的习惯叫法。

快捷输入按键，只需简单的点击即可完成关系输入，算法还支持逆向查找称呼哦～

功能特色：

• 使用别称查询：姥姥的爸爸的老窦 = 外曾外曾祖父


• 使用合称查询：姐夫的双亲 = 姊妹姻父 / 姊妹姻母


• 大小数字混合查询：大哥的二姑妈的七舅姥爷 = 舅曾外祖父


• 不限制祖辈孙辈跨度查询：舅妈的婆婆的外甥的姨妈的侄子 = 舅表舅父


• 根据年龄推导可能性：哥哥的表姐 = 姑表姐 / 舅表姐


• 根据语境确认性别：老婆的女儿的外婆 = 岳母


• 支持古文式表达：吾父之舅父 = 舅爷爷


• 解析某称谓关系链：七舅姥爷 = 妈妈的妈妈的兄弟


• 算两个亲戚间的合称关系：奶奶 + 外婆 = 儿女亲家

项目地址：

https://github.com/mumuy/relationship

在线体验：

https://passer-by.com/relationship/

移动端体验地址：

https://passer-by.com/relationship/vue/

功能体验

1、关系找称呼

2、称呼找关系

3、两者间关系

4、两者的合称

安装使用

1、直接引入安装

<script src="https://passer-by.com/relationship/dist/relationship.min.js">

获取全局方法 relationship.

2、使用 npm 包管理安装

安装依赖：

npm install relationship.js

包引入：

// CommonJS 引入

const relationship = require("relationship.js");

// ES Module 引入

import relationship from 'relationship.js';

3、使用方法：唯一的计算方法 relationship.

• 选项模式 relationship(options)
  
  

  构造函数：

  
  

  var options = {
  
      text:'',		// 目标对象：目标对象的称谓汉字表达，称谓间用‘的’字分隔
  
      target:'',	    // 相对对象：相对对象的称谓汉字表达，称谓间用‘的’字分隔，空表示自己
  
      sex:-1,			// 本人性别：0表示女性,1表示男性
  
      type:'default',	// 转换类型：'default'计算称谓,'chain'计算关系链,'pair'计算关系合称
  
      reverse:false,	// 称呼方式：true对方称呼我,false我称呼对方
  
      mode:'default',	// 模式选择：使用setMode方法定制不同地区模式，在此选择自定义模式
  
      optimal:false,  // 最短关系：计算两者之间的最短关系
  
  };
  
  

  
  

  代码示例：

  
  

  // 如：我应该叫外婆的哥哥什么？
  
  relationship({text:'妈妈的妈妈的哥哥'});
  
  // => ['舅外公']
  
  
  
  // 如：七舅姥爷应该叫我什么？
  
  relationship({text:'七舅姥爷',reverse:true,sex:1});
  
  // => ['甥外孙']
  
  
  
  // 如：舅公是什么亲戚
  
  relationship({text:'舅公',type:'chain'});
  
  // => ['爸爸的妈妈的兄弟', '妈妈的妈妈的兄弟', '老公的妈妈的兄弟']
  
  
  
  // 如：舅妈如何称呼外婆？
  
  relationship({text:'外婆',target:'舅妈',sex:1});
  
  // => ['婆婆']
  
  
  
  // 如：外婆和奶奶之间是什么关系？
  
  relationship({text:'外婆',target:'奶奶',type:'pair'});
  
  // => ['儿女亲家']
  
  

  
  


• 语句模式 relationship(exptession)
  
  

  
  

  参数 exptession 句式可以为：xxx是xxx的什么人、xxx叫xxx什么、xxx如何称呼xxx等。

  
  

  
  

  代码示例：

  
  

  // 如：舅妈如何称呼外婆？
  
  relationship('舅妈如何称呼外婆？');
  
  // => ['婆婆']
  
  
  
  // 如：外婆和奶奶之间是什么关系？
  
  relationship('外婆和奶奶之间是什么关系？');
  
  // => ['儿女亲家']
  
  

  
  

4、其他 API

// 获取当前数据表 

relationship.data



// 获取当前数据量 

relationship.dataCount



// 用户自定义模式 

relationship.setMode(mode_name,mode_data)

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

前言

在家没事的时候刷抖音玩，抖音首页的视频怎么刷也刷不完，经常不知不觉的一刷就到半夜了😅

不禁感叹道 ＂垃圾抖音，费我时间，毁我青春😅＂

这是我的 模仿抖音 系列文章的第二篇，本文将一步步实现抖音首页 视频无限滑动 的效果，干货满满

第一篇：200行代码实现类似Swiper.js的轮播组件

第三篇：Vue 路由使用介绍以及添加转场动画

第四篇：Vue 有条件路由缓存，就像传统新闻网站一样

第五篇：Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像

如果您对滑动原理不太熟悉，推荐先看我的这篇文章：200行代码实现类似Swiper.js的轮播组件

最终效果

在线预览：dy.ttentau.top/

Github地址：github.com/zyronon/dou…

源码：SlideVerticalInfinite.vue

实现原理

无限滑动的原理和虚拟滚动的原理差不多，要保持 SlideList 里面永远只有 N 个 SlideItem，就要在滑动时不断的删除和增加 SlideItem。

滑动时调整 SlideList 的偏移量 translateY 的值，以及列表里那几个 SlideItem 的 top 值，就可以了

为什么要调整 SlideList 的偏移量 translateY 的值同时还要调整 SlideItem 的 top 值呢？

因为 translateY 只是将整个列表移动，如果我们列表里面的元素是固定的，不会变多和减少，那么没关系，只调整　translateY 值就可以了，上滑了几页就减几页的高度，下滑同理

但是如果整个列表向前移动了一页，同时前面的 SlideItem 也少了一个，，那么最终效果就是移动了两页...因为 塌陷 了一页

这显然不是我们想要的，所以我们还需要同时调整 SlideItem 的 top 值，加上前面少的 SlideItem 的高度，这样才能显示出正常的内容

步骤

定义

virtualTotal：页面中同时存在多少个 SlideItem，默认为 5。

//页面中同时存在多少个SlideItem

virtualTotal: {

  type: Number,

  default: () => 5

},

设置这个值可以让外部组件使用时传入，毕竟每个人的需求不同，有的要求同时存在 10 条，有的要求同时存在 5 条即可。

不过同时存在的数量越大，使用体验就越好，即使用户快速滑动，我们依然有时间处理。

如果只同时存在 5 条，用户只需要快速滑动两次就到底了(因为屏幕中显示第 3 条，刚开始除外)，我们可能来不及添加新的视频到最后

render：渲染函数，SlideItem内显示什么由render返回值决定

render: {

  type: Function,

  default: () => {

    return null

  }

},

之所以要设定这个值，是因为抖音首页可不只有视频，还有图集、推荐用户、广告等内容，所以我们不能写死显示视频。

最好是定义一个方法，外部去实现，我们内部去调用，拿到返回值，添加到 SlideList 中

list：数据列表，外部传入

list: {

  type: Array,

  default: () => {

    return []

  }

},

我们从 list 中取出数据，然后调用并传给 render 函数，将其返回值插入到 SlideList中

初始化

watch(

  () => props.list,

  (newVal, oldVal) => {

    //新数据长度比老数据长度小，说明是刷新

    if (newVal.length < oldVal.length) {

      //从list中取出数据，然后调用并传给render函数，将其返回值插入到SlideList中

      insertContent()

    } else {

      //没数据就直接插入

      if (oldVal.length === 0) {

        insertContent()

      } else {

        // 走到这里，说明是通过接口加载了下一页的数据，

        // 为了在用户快速滑动时，无需频繁等待请求接口加载数据，给用户更好的使用体验

        // 这里额外加载3条数据。所以此刻，html里面有原本的5个加新增的3个，一共8个dom

        // 用户往下滑动时只删除前面多余的dom，等滑动到临界值（virtualTotal/2+1）时，再去执行新增逻辑

      }

    }

  }

)

用 watch 监听 list 是因为它一开始不一定有值，通过接口请求之后才有值

同时当我们下滑 加载更多 时，也会触发接口请求新的数据，用 watch 可以在有新数据时，多添加几条到 SlideList 的最后面，这样用户快速滑动也不怕了

如何滑动

这里就不再赘述，参考我的这篇文章：200行代码实现类似Swiper.js的轮播组件

滑动结束

判断滑动的方向

当我们向上滑动时,需要删除最前面的 dom ，然后在最后面添加一个 dom

下滑时反之

slideTouchEnd(e, state, canNext, (isNext) => {

  if (props.list.length > props.virtualTotal) {

    //手指往上滑(即列表展示下一条视频)

    if (isNext) {

      //删除最前面的 `dom` ，然后在最后面添加一个 `dom`  

    } else {

      //删除最后面的 `dom` ，然后在最前面添加一个 `dom`  

    }

  }

})

手指往上滑(即列表展示下一条视频)

• 首先判断是否要加载更多，快到列表末尾时就要加载更多数据了


• 再判断是否符合 腾挪 的条件，即当前位置要大于 half，且小于列表长度减 half。


• 在最后面添加一个 dom


• 删除最前面的 dom


• 将所有 dom 设置为最新的 top 值(原因前面有讲，因为删除了最前面的 dom，导致塌陷一页，所以要加上删除 dom 的高度)

let half = (props.virtualTotal - 1) / 2



//删除最前面的 `dom` ，然后在最后面添加一个 `dom`  

if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {

  emit('loadMore')

}



//是否符合 `腾挪` 的条件

if (state.localIndex > half && state.localIndex < props.list.length - half) {

  //在最后面添加一个 `dom`  

  let addItemIndex = state.localIndex + half

  let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addItemIndex}']`)

  if (!res) {

    slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))

  }



  //删除最前面的 `dom` 

  let index = slideListEl.value

    .querySelector(`.${itemClassName}:first-child`)

    .getAttribute('data-index')

  appInsMap.get(Number(index)).unmount()



  slideListEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {

    _css(item, 'top', (state.localIndex - half) * state.wrapper.height)

  })

}

手指往下滑(即列表展示上一条视频)

逻辑和上滑都差不多，不过是反着来而已

• 再判断是否符合 腾挪 的条件，和上面反着


• 在最前面添加一个 dom


• 删除最后面的 dom


• 将所有 dom 设置为最新的 top 值

//删除最后面的 `dom` ，然后在最前面添加一个 `dom`

if (state.localIndex >= half && state.localIndex < props.list.length - (half + 1)) {

  let addIndex = state.localIndex - half

  if (addIndex >= 0) {

    let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)

    if (!res) {

      slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))

    }

  }

  let index = slideListEl.value

    .querySelector(`.${itemClassName}:last-child`)

    .getAttribute('data-index')

  appInsMap.get(Number(index)).unmount()



  slideListEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {

    _css(item, 'top', (state.localIndex - half) * state.wrapper.height)

  })

}

其他问题

为什么不直接用 v-for直接生成 SlideItem 呢?

如果内容不是视频就可以。要删除或者新增时，直接操作 list 数据源，这样省事多了

如果内容是视频，修改 list 时，Vue 会快速的替换 dom，正在播放的视频，突然一下从头开始播放了😅😅😅