前端

人的毕生，总是不免有浮沉。不会永远如旭日东升，也不会永远苦楚潦倒。重复地一浮一沉，对于一个人来说，正是磨难。因而，浮在下面的，不用自豪；沉在底下的，更用不着乐观。必须以率直、虚心的态度，乐观进取、向前迈进。——松下幸之助大家好，我是江辰，在现在的互联网大环境下，想必大家都或多或少且有感触，塌实的社会之下，只有一直的放弃心性，能力感知不同的播种，互勉。 2023年最新的面试题集锦，时刻做好筹备。 本文首发于微信公众号：家养程序猿江辰 欢送大家点赞，珍藏，关注 文章列表2023年前端面试真题之JS篇2023年前端面试真题之CSS篇2023年前端面试真题之HTML篇2023年前端面试真题之React篇2023年前端面试真题之编码篇Vue.js 与其余前端框架（如React和Angular）相比有什么劣势和区别？简略性和易用性：Vue.js 是一款轻量级框架，容易学习和上手。它提供了直观的API和清晰的文档，使开发者能够迅速构建应用程序。React 和 Angular 在某些方面更简单，须要更多的学习老本。 渐进式框架：Vue.js 被称为渐进式框架，容许你逐渐采纳它的个性。这意味着你能够在现有我的项目中集成Vue.js，而不用一次性重写整个利用。React 和 Angular 在集成到现有我的项目时可能须要更多的工作。 双向数据绑定：Vue.js 提供了间接的双向数据绑定，使数据在视图和模型之间放弃同步。这使得开发人员更容易管理应用程序的状态。React 和 Angular 也反对数据绑定，但它们的实现形式略有不同。 组件化开发：Vue.js、React 和 Angular 都激励组件化开发，但Vue.js在这方面表现出色。Vue组件的定义非常简单，易于复用和保护。React 应用JSX来创立组件，Angular应用模板。这些框架的组件零碎也很弱小，但可能须要更多的配置。 生态系统和社区：React 和 Angular 有宏大的生态系统和沉闷的社区反对，有丰盛的第三方库和插件。Vue.js 的生态系统也在一直壮大，尽管绝对较小，但社区也十分踊跃。 性能：Vue.js 在性能方面体现良好，具备虚构DOM机制，能够高效地更新视图。React 也应用虚构DOM，性能也很杰出。Angular 在某些状况下可能须要更多的性能优化工作。 工具和生态系统：Vue.js 提供了一些弱小的工具，如Vue CLI，用于疾速搭建我的项目，并与Vue Router和Vuex等官网库集成。React 和 Angular 也有相似的工具和库，但Vue的工具生态系统在某些方面更加直观和易用。 应用案例：Vue.js 实用于中小型应用程序和单页面应用程序（SPA），以及须要疾速原型开发的我的项目。React 和 Angular 实用于各种规模的利用，包含大型企业级利用。总之，抉择应用哪个前端框架取决于我的项目的需要和团队的偏好。Vue.js在简略性、易用性和渐进式开发方面具备劣势，适宜许多我的项目，但React和Angular在大型利用和企业级我的项目中也有其劣势。 Vue实例与组件之间的区别是什么？它们如何进行通信？Vue.js 中的 Vue 实例（Vue Instance）和组件（Components）是两个不同的概念，它们之间有一些重要的区别，同时也有不同的形式来进行通信。 1. Vue 实例（Vue Instance）： Vue 实例是 Vue.js 的外围概念之一。它是一个独立的 Vue 对象，用来治理利用的状态、行为和生命周期。通常，一个 Vue 利用的根实例会被创立，它治理整个利用的数据和办法。你能够应用 new Vue() 来创立一个 Vue 实例。2. 组件（Components）： ...

人的毕生，总是不免有浮沉。不会永远如旭日东升，也不会永远苦楚潦倒。重复地一浮一沉，对于一个人来说，正是磨难。因而，浮在下面的，不用自豪；沉在底下的，更用不着乐观。必须以率直、虚心的态度，乐观进取、向前迈进。——松下幸之助大家好，我是江辰，在现在的互联网大环境下，想必大家都或多或少且有感触，塌实的社会之下，只有一直的放弃心性，能力感知不同的播种，互勉。 2023年最新的面试题集锦，时刻做好筹备。 本文首发于微信公众号：家养程序猿江辰 欢送大家点赞，珍藏，关注 文章列表2023年前端面试真题之编码篇2023年前端面试真题之CSS篇2023年前端面试真题之HTML篇2023年前端面试真题之React篇2023年前端面试真题之Vue篇请简述JavaScript中的thisJS 中的 this 是一个绝对简单的概念，不是简略几句能解释分明的。粗略地讲，函数的调用形式决定了 this 的值。我浏览了网上很多对于 this 的文章，Arnav Aggrawal 写的比较清楚。this 取值合乎以下规定： 在调用函数时应用 new 关键字，函数内的 this 是一个全新的对象。如果 apply、call 或 bind 办法用于调用、创立一个函数，函数内的 this 就是作为参数传入这些办法的对象。当函数作为对象里的办法被调用时，函数内的 this 是调用该函数的对象。比方当 obj.method() 被调用时，函数内的 this 将绑定到 obj 对象。如果调用函数不合乎上述规定，那么 this 的值指向全局对象（global object）。浏览器环境下 this 的值指向 window 对象，然而在严格模式下('use strict')，this 的值为 undefined。如果合乎上述多个规定，则较高的规定（1 号最高，4 号最低）将决定 this 的值。如果该函数是 ES2015 中的箭头函数，将疏忽下面的所有规定，this 被设置为它被创立时的上下文。 说说你对 AMD 和 CommonJS 的理解。它们都是实现模块体系的形式，直到 ES2015 呈现之前，JavaScript 始终没有模块体系。CommonJS 是同步的，而 AMD（Asynchronous Module Definition） 从全称中能够显著看出是异步的。CommonJS 的设计是为服务器端开发思考的，而 AMD 反对异步加载模块，更适宜浏览器。 我发现 AMD 的语法十分简短，CommonJS 更靠近其余语言 import 申明语句的用法习惯。大多数状况下，我认为 AMD 没有应用的必要，因为如果把所有 JavaScript 都捆绑进一个文件中，将无奈失去异步加载的益处。此外，CommonJS 语法上更靠近 Node 编写模块的格调，在前后端都应用 JavaScript 开发之间进行切换时，语境的切换开销较小。 ...

web利用关上速度决定了用户对企业的第一印象。 更高的性能会帮忙企业带来高回访率， 转化率，参与度等各方面的益处。 通过缩小网页加载工夫，能晋升企业形象和用户更好的应用体验。 本文将教会你如何晋升网站性能的一些办法。 网站关上速度的影响因素？事实上导致网站加载速度迟缓的因素有很多。但最常见的因素，有以下几个： 大量应用 CSS 和 JavaScript图片素材体积过大不应用浏览器缓存太多的三方插件拜访量过大较旧的浏览器网络连接速度慢（挪动设施）有了这些常见因素，咱们能够做一系列优化措施来进步网站的加载性能。 但在做措施之前咱们须要晓得如何评估网站加载性能，并拿到初始评估数据。 如何评估网站性能？ 作为web 开发者，您能够掂量许多指标，但我倡议重点关注最大内容绘制（LCP）、首次输出提早（FID）和累积布局偏移（CLS）。 这三个指标被 Google 定义为 Core Web Vitals。 同时 Google 对着三个指标的数据做了一个举荐的 好坏倡议。 GoodPoorLCP≤2500ms>4000msFIP≤100ms>300msCLS≤0.1>0.25咱们能够通过 Chrome 开发者工具里的 lightHouse 扩大。来取得网站的性能数据。 网页性能优化的一些最佳工夫正如您所看到的，有很多因素会影响网站上每个页面的加载工夫。但进步网站性能的办法也有很多。 这里就提供一些优化的最佳实际来帮忙你进步你的网站性能。 1. 缩小 Http 的申请数量浏览器应用 HTTP 申请从 Web 服务器获取页面的数据。 例如图像、CSS样式表和 Javascript脚本。每个申请，尤其是应用 HTTP/1.1 的申请，在浏览器和近程 Web 服务器之间建设连贯时都会产生一些开销。 此外，浏览器通常对并行网络申请的数量有限度，因而如果有很多申请排队，如果队列太长，其中一些申请将被阻塞。 您要优化的第一步应该是打消不必要的申请。您的网站所需的最短渲染工夫是多少？找出这一点，而后仅加载必要的内部资源。 您应该删除任何不必要的图像、JavaScript 文件、样式表、字体等。 当您做完，网站不必要素材资源加载之后。下一步要优化的事件，应该是压缩你的css 和 js 文件，以达到减小http 申请的目标。 2. 切换到 HTTP/2我下面提到了通过 HTTP/1.1 发送许多申请的开销。 HTTP 是浏览器用来与近程 Web 服务器通信的协定。您网站的 HTML 以及所有其余素材资源（如：图像、样式表和 JavaScript 文件）均应用此协定进行传输。 ...

大家好！明天我向大家举荐一个适宜搭建车友社区的的社交零碎。 随着汽车文化的流行和车友之间的互动需要减少，搭建一个专门为车友们交换、分享和互动的社区变得尤为重要。而短说社区零碎能够为搭建车友社区提供了弱小的反对和性能。 首先，短说社区提供了丰盛的社交性能，能满足车友们的各种交换需要。包含但不限于个人资料展现、好友关系治理、私信、论坛性能等等。这些性能都能帮忙车友们更好地理解彼此、分享教训和常识，加深互动体验。 其次，短说社区提供了板块与频道性能，能够依据车友社区的特点和口味进行定制。无论是打造一个时尚、文艺还是业余的社区形象，短说社区都能依据需要提供灵便的设计和展现成果。这不仅可能进步用户的粘性，还可能为车友们带来更好的浏览体验。 此外，短说社区具备良好的扩展性和兼容性，能满足不同规模和需要的车友社区。无论是小型社区还是大型车友俱乐部，短说社区都可能提供高性能、高可靠性的服务。同时，短说社区还反对挪动端的拜访和应用，不便车友们在手机上随时随地与其余成员互动。 在短说社区中用户能够通过参加社区探讨和奉献代码等形式，取得更好的技术支持和性能更新。这也使得短说社区不仅仅是一个社交零碎，更是一个社区文化的传播者和推动者。 总之，短说社区是搭建车友社区的一个现实抉择，它不仅提供了丰盛的社交性能、自定义的主题和模板、良好的扩展性和兼容性，以及一个沉闷的社区反对，更是为车友们搭建了一个业余、便捷和丰盛的交流平台。如果你有搭建车友社区的需要，无妨思考短说社区和短说社区，它们会为你带来更丰盛、更乏味的车友社区体验！

大家好，我是杨胜利。 越来越多的前端团队抉择用 Docker 部署前端我的项目，办法是将我的项目打包成一个镜像，而后在服务端间接拉镜像启动我的项目。这种形式能够疏忽服务器环境差别，更容易做版本治理。 但咱们平时应用 Docker 拉取镜像时，默认会从 Docker Hub 这个公共仓库拉取。尽管 Docker Hub 也能够上传本人的镜像，然而上传后会对所有人凋谢，这对公司我的项目来说显然是不容许的。 为此，Docker 官网提供了工具 registry 来帮忙咱们搭建公有镜像仓库，用于治理本人的镜像。后续所有的我的项目更新、降级、回滚，都要用到这个镜像仓库。 上面具体介绍如何应用registry 搭建公有镜像仓库。 创立镜像仓库首先确保在你要搭建公有仓库的服务器上，曾经装置好了 Docker（如何装置 Docker 这里不介绍）。 （1）应用命令拉取 registry 镜像： $ docker pull registry（2）建设要存储公有镜像的目录，如 /data/docker/registry： $ mkdir -vp /data/docker/registry（3）应用以下命令，基于 registry 镜像运将容器运行起来： $ docker run -d \ -p 5000:5000 \ --restart=always \ --name registry \ -v /data/docker/registry:/var/lib/registry \ registry容器运行后会占用 5000 端口，该端口是拜访镜像仓库的入口。 （4）运行胜利后，应用以下命令测试连贯状况： $ curl http://localhost:5000/v2/_catalog如果返回以下后果： {"repositories":[]}则示意镜像仓库创立胜利。此时仓库内没有镜像，所以是一个空数组。 （5）配置 Nginx 转发 个别状况下，须要配置一个域名来转发 5000 端口。假如域名为 docker.test.com，增加一个配置文件，代码如下： server { listen 80; server_name docker.test.com; charset utf-8; location / { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host:$server_port; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; }}配置后，应用 nginx -s reload 命令重载配置文件，即可通过该域名拜访镜像仓库。 ...

智能时代的大考已来 千行万业集结，开释万千时机 往年，华为全联接大会重回上海 一起来看看有哪些亮点吧~ 流动简介华为全联接大会2023将于9月20日在上海拉开帷幕，本次大会的内容将涵盖擎云商用终端、华为ICT产品、F5G演进、盘古大模型、毕昇编译器、openEuler、华为云等多个畛域，以“减速行业智能化”为主题，邀请思维首领、商业精英、技术专家、合作伙伴、开发者等业界同仁，从商业、产业、生态等方面探讨如何减速行业智能化。 OpenTiny也将在本次HC大会上正式公布低代码引擎TinyEngine,为更多开发者提供低代码底层基座，独特打造开发者生态。与此同时OpenTiny也致力于与开发者在Web前端能力、Web前端技术选型、低代码畛域、前端品质畛域、性能优化畛域等方向进行深入探讨，独特深挖前端技术痛点及变革方向。因而将通过参加扫地僧、训练营、挑战赛的模式与前端开发者近距离交换，进行深度钻研。 流动议程 OpenTiny精彩看点1、9月21日 TinyEngine正式公布：OpenTiny Engine低代码引擎正式发表开源 2、9月21日CodeLabs训练营：【试验】应用OpenTiny实现Vue2我的项目平滑降级到Vue3我的项目 a、OpenTiny是一个实现了跨端跨框架的组件库，一套代码同时反对Vue2、Vue3，并且提供了丰盛的拓展性和定制性。 b、选手须要创立一个Vue2我的项目，并在其中应用OpenTiny的组件，搭建一个反对增删改查的表格和表单利用。 c、将以上 Vue2 我的项目平滑降级到到 Vue3我的项目。 试验解说工夫：9月21日15：00-16：00 报名入口： https://app.events.huawei.com/hc2023-activity/CodelabsDetail.... 3、9月21日极客挑战赛：【赛题】应用TinyEngine低代码引擎疾速开发 TinyEngine 是一个跨端、跨技术栈的低代码引擎。提供低代码底层的能力， 集成人工智能，让AI助力用户高效开发。适宜于多场景的低代码平台开发。 本试验基于低代码引擎提供的环境，通过体验简略拖、拉、拽的模式帮忙开发者疾速理解低代码设计器应用流程，达到疾速开发的成果。 试验工夫：9月21日15：00-17：00 报名入口： https://app.events.huawei.com/hc2023-activity/ChallengeDetail... 4、9月21日-9月22日扫地僧见面会：华为云前端技术委员会主席华宇果将与开发者独特探讨及分析Web前端能力、Web前端技术选型、低代码畛域、前端品质畛域、性能优化畛域等方向内容。 工夫：9月21日15：00-16：00/9月22日15：00-16：00 报名入口： https://app.events.huawei.com/hc2023-activity/TechtalkDetail.... OpenTiny Vue招募贡献者啦！OpenTiny Vue 正在招募社区贡献者，欢送退出咱们 你能够通过以下形式参加奉献： 在 issue 列表中抉择本人喜爱的工作浏览贡献者指南，开始参加奉献你能够依据本人的爱好认领以下类型的工作： 编写单元测试修复组件缺点为组件增加新个性欠缺组件的文档如何奉献单元测试： 在packages/vue目录下搜寻it.todo关键字，找到待补充的单元测试依照以上指南编写组件单元测试执行单个组件的单元测试：pnpm test:unit3 button如果你是一位经验丰富的开发者，想承受一些有挑战的工作，能够思考以下工作： ✨ [Feature]: 心愿提供 Skeleton 骨架屏组件✨ [Feature]: 心愿提供 Divider 分割线组件✨ [Feature]: tree树形控件能减少虚构滚动性能✨ [Feature]: 减少视频播放组件✨ [Feature]: 减少思维导图组件✨ [Feature]: 增加相似飞书的多维表格组件✨ [Feature]: 增加到 unplugin-vue-components✨ [Feature]: 兼容formily参加 OpenTiny 开源社区奉献，你将播种： 间接的价值： 通过参加一个理论的跨端、跨框架组件库我的项目，学习最新的Vite+Vue3+TypeScript+Vitest技术学习从 0 到 1 搭建一个本人的组件库的整套流程和方法论，包含组件库工程化、组件的设计和开发等为本人的简历和职业生涯添彩，参加过优良的开源我的项目，这自身就是受面试官青眼的亮点结识一群优良的、酷爱学习、酷爱开源的小伙伴，大家一起打造一个平凡的产品久远的价值： 打造集体品牌，晋升集体影响力造就良好的编码习惯取得华为云 OpenTiny 团队的荣誉和定制小礼物受邀加入各类技术大会成为 PMC 和 Committer 之后还能参加 OpenTiny 整个开源生态的决策和长远规划，造就本人的治理和布局能力将来有更多机会和可能其余阐明 ...

你有没有遇到这种状况：我有一个很棒的想法，想要开发出一个“扭转世界”的我的项目，然而我既没有技术，也没有人脉，甚至没有资金，导致我始终没有方法开始口头，痛苦万分。就比方在黑客大赛上，我想到一个肯定能够得奖的点子，然而却找不到合伙人，也无奈单独实现，导致机会白白溜走。 明天我就介绍一个能够扭转你这种现状的技术：DAO。但在介绍DAO之前咱们须要先理解一下所有人都在热烈探讨的web3.0。 Web3.0web2.0时代的最大特色就是“中心化”，由几个大公司为核心，向外来提供服务。比方咱们所相熟的谷歌提供的搜寻服务，微信提供的社交服务，乃至咱们的京东提供的购物服务。其实不仅限于互联网，现今的整个社会构造都与之类似：由银联为核心提供金融服务，保险公司为核心提供保险服务等等。 而咱们行将进入的web3.0时代，最大的特色有几点：去中心化，基于区块链技术保障数据信息安全，AI技术。其中AI技术带来的服务咱们大多数人曾经都体验到了，而我明天介绍的DAO模式则是与去中心化和区块链技术严密相干。 DAO简介DAO的全称是Decentralized Autonomous Organization，中文译名是“岛”，它的性质简略来说就是一个“去中心化的公司”，它的核心理念和最根本的准则就是代码既法律(Code Is Law)。 在这里我举一个例子来贯通整篇文章的解说：我忽然有一天想要开一家网店，然而我并没相干的教训，也没有进货和销售渠道，甚至都没有足够的资金，有的仅仅是一个“奇异”的点子，然而在web3.0时代这都不是阻塞性的问题，只有我有想法，我就能够发动一个DAO。我能够把我对于整个“公司”的想法形容进去，并说明当初空缺的“职位”，如果有其余对这个想法感兴趣的小伙伴正好满足职位需要，就能够退出进来，一起组成一个DAO。 DAO的次要组成DAO这种模式没有一个固定的模版做限定，然而一个残缺的DAO必然蕴含以下几个根本组成部分，我联合方才举的“网店”的例子来解释一下： 一.指标形容这一部分不蕴含在DAO的主体代码里，然而确是DAO最重要的局部。它相似于是我这家“网店”的“招标书”，要具体说明这家店要买什么，有什么特点，将来的倒退方向如何布局。它的次要作用就是吸引成员退出，要让其他人对你的DAO感兴趣才会有更多人退出，这也是DAO最重要的指标：吸引更多成员。 二.角色分工说明书(人才配置)在有很多小伙伴留神到我的DAO之后，他们下一步要明确的就是：我要进这家“公司”，我能做什么？这就是“角色分工”的最次要作用，形容DAO须要的人才品种和每个职位须要具体执行的工作。每个想要退出DAO的人能够自行判断以何种身份退出，在“网店”中，只有职位处于空缺状态就能够退出，比方作为采购员，销售员或者投资者。 比方这则形容：“须要一名采购员，工作是在每当面包库存低于阀值的时候，以20块的均价购入面包，使库存量达到X件”。这条形容既是对这个职位职责的形容，也是一条代码（Code）。在DAO中代码既法律，如果你批准并退出DAO，那么就要遵循DAO中的代码，须要依照代码的形容来履行本人的职责，如果没有实现的话就无奈取得收益。 三.验收规范和竞标规定DAO还须要一套欠缺且能令人信服的验收规范来断定每个职位的工作实现状况，同样是由代码来形容并进行断定。每个职位的最终验收规范都可能不一样，有的还可能存在“竞标”机制，比方在“网店”的DAO里，我的职位是：负责开发进货零碎的代码，通过AI剖析销售数据，判断每次面包的进货量“X件”具体是多少。然而我所写出的代码尽管可能算出答案，但并不一定是最优的代码，还有另一个程序猿也退出进DAO竞争我的职位，那么咱们俩写出代码更优的那一方就博得了竞标。 收规范和竞标规定保障了DAO可能实现指标并继续优化，而且不至于因为某一环的失败导致整个“公司”停滞不前。公司的治理简略来说就是“治理人”和“治理钱”，而角色分工说明书和验收规范就是治理人”的规范。 四.设置激励和处分退出进DAO后，如果付出的是劳动，那么我须要取得的就是报酬；如果我付出的是资金，那么我须要取得的就是分成，这跟真正的公司是一样的。在DAO中，激励和处分就是公司治理中“治理钱”的局部。在我实现职责并验收通过后，代码会立刻执行处分机制，将收益划归到我的账户。 处分机制基于“区块链”技术建设，对于还不是很分明该技术的同学，我这里简略的介绍一下：区块链是“去中心化”的一个重要体现，区别于当初“由一个银行记录你账户的贷款数”，区块链实现的是“全民记账”，每个区块链用户都记录了你账户里的钱款总额，每一次交易实现时，所有用户手里的账本都会更新你的贷款变动，所以黑客攻击某一核心的做法不再无效，所以这种“记账”模式更为平安；同时因为不再存在“银行”这一中介组织的存在，钱款具备“即时到账”和“无中介费”的劣势。 当然，要退出DAO并取得激励，须要有基于区块链的数字钱包，发放的激励也是数字货币，尽管当初数字货币的概念股被炒作的很高，然而在web3.0真正遍及的时候它们还是会回归“价值符号”的根本属性。由代码来治理资金，不走法律程序和会计程序，保障了平安，公正和迅速，同时不存在“糜烂”和“贪污公款”等行为。 五.劫难应答机制当初网上探讨的DAO概念根本都在提它的劣势和长处，很少会提及它作为一个“公司”来说，其实也会有可能失败。再遭逢到这种状况的时候，就要用足够强健的劫难应答机制进行应答，包含资金池的回退准则，曾经实现工作的结项以及残余资源和“生产品”库存的解决等等。劫难应答机制不仅仅要将损失降到最低，保障参与者的权利，更是要给予DAO的参与者信念，让更多的人可能更释怀的退出到DAO中。 综合来说，DAO只须要有想法，有人同意你的想法，给你投资，而后订立规定，吸引参与者就能够开始运行，整个过程不须要简单的法律流程，会计流程，基于一个准则：代码既法律，由规定代码主动治理运行的去中心化“公司”。通过DAO建设起来的公司有一个特点就是没有人在治理和经营，就算某一个环节的“员工”来到，只有“零碎不死”，就能够吸引新的成员退出，从而半永恒的运行上来。 目前为止，最出名也最胜利的一个DAO例子就是比特币，比特币的发行是主动的，发行当前就会依据规定分发给矿工，而且也没有人治理整个比特币零碎，就算中本聪死掉，比特币这个零碎也会始终运作上来，而且整个比特币零碎的收益情况都是通明公开的的，中本聪账户里有多少比特币所有参与者也都能够查失去，你不挖矿也会有他人持续挖，让整个零碎持续运作，这就很合乎竞标规定。 DAO工具理解DAO所需的内容是构建DAO的第一步。既然你曾经开始了一步，那么你当初应该相熟这个畛域中最罕用和最重要的DAO工具。 这里我也放几个DAO相干的工具网站： DAOstack：旨在构建和反对DAO的开源软件堆栈。 Gnosis Safe：Multisig钱包，用于治理以太坊上DAO的数字资产。 Discord：用于分享想法和探讨治理倡议的渠道。 Coordinape：应用工具扩大社区，以处分贡献者，激励参加和治理资源。 Mirror：一个容许通过代币化众筹来赞助创意我的项目的公布平台。 DAO的呈现让咱们每个人都可能发展本人的“公司”，回到咱们最后的主题，如果你当初就有一个黑客大赛的好想法，无妨试试这种组织模式来尝试实现本人的现实吧。 作者：京东批发 姜海 起源：京东云开发者社区 转载请注明起源

最近，编程畛域又一个黑马突然冲进了开发者们的视线并正式凋谢下载。 它的名字叫Mojo，置信有不少小伙伴最近也看到了。 Mojo是为AI开发者所筹备的编程语言，语法有点像Python。 依据Mojo官网的形容，它联合了Python的易用性和C语言的高性能，解锁了AI硬件的可编程性和AI模型的可扩展性。 Mojo看起来如同挺能打，它到底是哪个公司所推出来的呢？ 看了一下才发现Mojo是由人工智能公司Modular所推出的全新编程语言。 而Modular这个公司则是一个十分年老的新生AI守业公司，于2022年由Chris Lattner和Tim Davis所创建。 提到这两个创始人，置信有些同学也有所理解，都是业内顶级专家。其中Chris Lattner还被称为“LLVM之父”和“Swift之父”，在苹果、谷歌、特斯拉等多家出名科技巨头里曾率领构建了AI和外围零碎。 Modular公司的愿景十分雄伟，指标是自下而上重塑AI基础设施。 去年的时候，Modular AI曾取得过3000万美金的融资。而就在前些天，Modular又再次发表胜利融资 1 亿美金，这对于一个刚诞生不久的初创型公司而言堪称是成绩斐然。 另外在公司官网的投资者名单里能看到，不少AI畛域的出名投资机构都有参加。 Mojo这个编程语言有几个比拟显著的特点。 1、首先是性能方面。 Mojo充分利用硬件的个性和性能，包含多核、矢量单元和加速器单元，以及先进的编译器和异构运行时机制，在不减少复杂性的前提下实现了与C++和CUDA相当的性能。 在并行化这一块，Mojo利用MLIR，使Mojo开发者可能充分利用向量、线程和AI硬件单元。 2、其次是互操作性方面。 大家都晓得，倒退到明天，Python的生态极其凋敝，各种函数、库、框架、模型、工具等等不可胜数。 而Mojo则能够拜访整个Python生态。比方应用Mojo，能够在代码中无缝地接入和混合像Numpy和Matplotlib等库。 3、再者就是可扩展性方面。 可扩展性这块也是Mojo的劣势。Mojo能够降级用户模型中的已有操作，以便开发者能够应用预处理、后处理、自定义替换等操作来轻松地扩大用户的模型。 Mojo最后公布于往年的5月初，上线数月以来就已造成根本规模和生态。 前不久，Modular官网发表Mojo正式凋谢下载，首先是从Linux零碎开始，并在后续的迭代版本中将陆续增加对Mac和Windows的反对。 这也意味着开发者能够通过Mojo SDK进行尝试并编写本人的Mojo代码。 而就在Mojo官宣能够下载后不久，一位名叫Aydyn Tairov开源作者就利用Mojo来做了一个突破性的尝试。 这个作者之前曾将GitHub上炽热的由纯C实现的llama2.c我的项目移植到了基于Python的llama2.py。 而这次Aydyn Tairov又将llama2.py移植到了llama2.mojo，后果十分出其不意，移植后性能晋升了近250倍。 即便如此，作者依然认为外面还有一些改良的空间。 看到Mojo如此的体现，有不少网友说Python这次堪称是遭逢了一个弱小的对手，Mojo甚至有可能在将来会取代Python？ 对此，公司CEO Chris Lattner间接回应称： Mojo并不会对Python造成威逼，相同，还会帮忙Python开发者变得更弱小。要放心的也不是Python，而是C++们。 文章的最初也附上相干的页面，感兴趣的小伙伴能够尝试一下。 Mojo地址：https://www.modular.com/mojoMojo文档：https://docs.modular.com/mojo至于这门编程语言在接下来的AI时代会倒退如何，咱们能够刮目相待。 注：本文在GitHub开源仓库「编程之路」 https://github.com/rd2coding/Road2Coding 中曾经收录，外面有我整顿的6大编程方向(岗位)的自学路线+知识点大梳理、面试考点、我的简历、几本硬核pdf笔记，以及程序员生存和感悟，欢送star。

首发于公众号 大迁世界，欢送关注。 每周7篇实用的前端文章 ️ 分享值得关注的开发工具 分享集体守业过程中的趣事已经想过制作本人的Chrome扩大，却因为感觉过程太简单而打消了念头吗？好消息，事件并没有你设想的那么简单！在接下来的几分钟里，咱们不仅将为你详解Chrome扩大的基础知识，还将手把手教你如何用五个简略的步骤创立本人的扩大。 咱们将构建什么？近年来，咱们见证了人工智能能力的飞速发展。只管这些全新的数字助手为咱们带来了前所未有的便捷，但它们也随之带来了一个揭示：不要与它们分享敏感信息。 不晓得你如何对待这一点，但对我来说，我的手指动作通常比我的大脑快。为了预防可能的失误，咱们将为 ChatGPT 构建一个 “molly-guard” 。 如果你在纳闷什么是 “molly-guard”，它最后是用来指一个放在按钮或开关上的盾牌，以避免意外激活。在咱们的上下文中，它是一个数字守护者，确保咱们不会适度分享信息。 用户能够指定他们认为敏感的单词或短语列表。如果咱们试图向ChatGPT提交蕴含这些词的信息，扩大将立刻启动，禁用提交按钮，并避免咱们可能的忽略。 什么是Google Chrome扩大？在咱们开始之前，让咱们先明确一下 Chrome 扩大到底是什么。Chrome 扩大是一小块旨在加强或批改 Chrome 浏览体验的软件。扩大是用规范的网络技术——HTML，JavaScript和CSS——开发的，它们能够从简略的工具（如色彩选择器）到更简单的工具（如明码管理器）。 注：对于那些渴望更深刻理解Chrome扩大的人，Google的官网文档是一份极其贵重的资源。 值得注意的是，Google Chrome 扩大能够依据其预期的性能采取多种形式。有些有一个浏览器动作，通过地址栏旁边的图标可见，以便快速访问其性能。其余一些可能会在后盾默默运行，在所有网页上或仅在特定网页上，具体取决于它们的设计。 对于咱们的教程，咱们将专一于应用内容脚本的扩大类型。该脚本将容许咱们与特定页面的DOM进行交互和操作——在咱们的状况下，即ChatGPT界面。 步骤1：创立扩大文件首先，咱们须要为咱们的Chrome扩大设置根本构造。咱们的扩大名为chatgpt-mollyguard，将在一个专门的文件夹中进行组织。这个扩大目录将蕴含所有必要的文件，以使咱们的 molly-guard 可能顺畅运行。 上面是一个细分： 文件夹：chatgpt-molly-guard。这是咱们扩大的根目录，所有咱们的文件都将寄存在这个文件夹里。文件：manifest.json。这是咱们扩大的外围和灵魂，这个文件蕴含无关扩大的元数据，例如其名称、版本和所需的权限。最重要的是，它指定了在哪些网站上运行哪些脚本。文件：contentScript.js。顾名思义，这个JavaScript文件蕴含内容脚本。这个脚本能够间接拜访网页的内容，容许咱们扫描敏感词并依据须要批改页面。文件：wordsList.js。一个专门用于蕴含用户指定的敏感词或短语列表的JavaScript文件。咱们将这个文件独自进去，以便用户能够轻松自定义他们的列表，而无需深刻理解contentScript.js中的外围性能。文件：styles.css。一个样式表，用于为咱们的扩大减少一些外观成果。尽管咱们的次要指标是功能性，但使咱们的正告或提醒看起来更好也不妨！要开始：在你的电脑上创立一个名为 chatgpt-molly-guard 的新文件夹。在这个文件夹内，创立下面列出的四个文件。有了这些文件，咱们就筹备好开始填写细节了。 在接下来的几节中，咱们将更深刻地探讨每个文件，并概述其在扩大中的特定作用。 步骤2：创立 Manifest 文件Manifest 文件是一个 JSON 文件，它向浏览器提供了无关你的扩大的根本信息。这个文件必须位于扩大的根目录中。 以下是咱们的 manifest 构造。将这段代码复制到 manifest.json： { "manifest_version": 3, "name": "ChatGPT Molly-guard", "version": "1.0", "description": "Prevents submission if specific words are typed into chat window", "content_scripts": [ { "matches": ["https://chat.openai.com/*"], "css": ["styles.css"], "js": ["wordsList.js", "contentScript.js"] } ]}Manifest 文件有三个必填字段，别离是：manifest_version、name 和 version。其余都是可选的。 ...

前端近程调试计划 Chii 的应用教训分享Chii 是与 weinre 一样的近程调试工具 ，次要是将 web inspector 替换为最新的 chrome devtools frontend\监控列表页面能够看到网站的题目链接，IP，useragent，能够疾速定位调试页面，监控页信息欠缺，反对https申请等，开发者工具能看到的都能看到。本文次要介绍其应用，在电脑运行，通过注入 js 的形式将将远端的日志，申请等同步推送在电脑端查看显示，及命令的执行我的项目地址：https://github.com/liriliri/chii 运行监控一览启动nginx配置监控列表监控页Chii 装置应用 npm 装置 npm install chii -gChii 运行及转发配置如果是本地间接运行即可：chii start -p 8082思考到可能存在的跨域状况，可参考如下配置运行应用生产环境运行：chii start -p 8082 --base-path /chii -d xxxx.xxxx.xxx.com 联合前缀和域名，不影响生产环境拜访，也能够应用生产环境域名拜访到chii服务-p 端口-base-path 前缀-d 域名更多参数见源码配置转发 若须要调试的网站域名是：xxxx.xxxx.xxx.com，则 nginx 配置其转发 xxxx.xxxx.xxx.com/chii/如果网站是 https 则将正文处放开real_ip_header X-Real-IP;server { #location / { # .... #} location /chii/ { real_ip_recursive on; proxy_set_header Host $http_host; # 运行chii的本地地址 proxy_pass http://192.168.0.188:8082/chii/; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host-Real-IP $http_host; #https则将上面正文的放开 #proxy_set_header X-Forwarded-Proto "https"; #proxy_set_header X-Forwarded-Ssl on; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }}拜访：https://xxxx.xxxx.xxx.com/chii/ 即可关上调试监控 ...

1. 名称 “必须过”2. 主页设计 3. 分类列表设计 4. 看亿模块的设计 5. 听忆模块的设计 6. 背诵单词模块的设计 7. 答题模块的设计 8. 听写模块的设计 9. 默写模块的设计 10. 趣味背单词-地鼠模块的设计 11. 趣味背单词-消消乐模块的设计 12. 趣味背单词-抓单词模块的设计 13. 每日翻译模块的设计 14. 背佳句模块的设计 15. 拜访体验

电子商务网站建设的开发计划是一个简单的过程，须要通过多个阶段的设计和开发，包含需要剖析、架构设计、前端开发、后端开发、数据库开发、测试和优化、上线和部署、以及经营和保护等。上面将具体介绍每个阶段的具体内容。一、需要剖析 在开始电子商务网站建设之前，须要与客户进行充沛的沟通，理解他们的需要和指标。这包含网站的性能、设计格调、指标用户等方面的要求。同时，还须要思考到竞争对手的状况，以及市场的需要和趋势。通过充沛的需要剖析，能够确保网站的设计和开发合乎客户的要求，同时也可能满足市场的需要。 二、架构设计 在确定了网站的需要和指标之后，须要进行网站的架构设计。这包含页面构造、功能模块、数据库设计等方面的内容。在设计页面构造时，须要思考到用户的应用习惯和体验，以及页面的好看和易用性。在设计功能模块时，须要依据网站的需要和指标，确定须要哪些功能模块，以及这些功能模块之间的关系和交互方式。在设计数据库时，须要依据网站的需要，确定须要哪些数据表和字段，以及它们之间的关系和约束条件。 三、前端开发 在进行网站的前端开发时，须要依据设计稿，开发网站的前端页面。这包含HTML、CSS、JavaScript等技术的使用，以及响应式设计和浏览器兼容性的思考。在开发前端页面时，须要确保页面的好看和用户敌对性，同时也须要思考到页面的性能和加载速度，以提供用户良好的体验。 四、后端开发 在进行网站的后端开发时，须要依据需要和指标，抉择适合的后端开发语言和框架，开发网站的后端性能。这包含用户注册登录、商品治理、订单解决等方面的性能。在开发后端性能时，须要思考到安全性和性能，以及不同性能之间的关系和交互方式。 五、数据库开发 在进行网站的数据库开发时，须要依据网站的需要，设计数据库构造，创立相应的表和字段。在设计数据库时，须要思考到数据的存储和治理，以及不同数据表之间的关系和约束条件。同时，还须要思考到数据安全和备份等方面的问题。 六、测试和优化 在实现网站的开发之后，须要进行网站的测试和优化。这包含功能测试、性能测试、平安测试等方面的内容。在测试过程中，须要发现和解决问题，确保网站的稳定性和流畅性。在优化过程中，须要思考到网站的性能和用户体验，以进步网站的品质和效率。 七、上线和部署 在实现网站的测试和优化之后，须要将网站部署到服务器上，并进行相干的配置和优化。在部署过程中，须要思考到网站的安全性和可靠性，以确保网站能够失常运行。同时，还须要进行网站的备份和复原等方面的工作，以应答不同的状况。 八、经营和保护 在网站上线之后，须要进行网站的经营和保护工作。这包含内容更新、平安防护、性能监控等方面的内容。在经营过程中，须要关注用户的反馈和需要，以及市场的变动和趋势，以不断改进和优化网站。在保护过程中，须要及时发现和解决问题，确保网站的稳定性和安全性。 总之，电子商务网站建设的开发计划是一个简单的过程，须要通过多个阶段的设计和开发。通过充沛的需要剖析、架构设计、前端开发、后端开发、数据库开发、测试和优化、上线和部署、以及经营和保护等方面的工作，能够确保网站的品质和效率，提供用户良好的体验，同时也可能满足市场的需要。

售后零碎、换货、培修、退货退款售后零碎：售后分为：换货，返修，退货退款三种。售后即反对物流售后也反对上门售后服务。售后信息由：申请信息，问题图片凭证，发货信息，发回信息，上门服务信息等组成。售后次要流程有：【确认 -> 买家发货 -> 待商家签收 -> 商家解决中 -> 商家发回 -> 实现】【确认 -> 回绝】【确认 -> 待上门 -> 上门服务中 -> 实现】【确认 -> 买家发货 -> 退款中 -> 已退款 -> 实现】 一、买家对于实现的订单能够申请售后服务：换货，培修，退货退款等，售后形式反对：物流快递售后，上门售后，到店售后等。买家提交售后申请时，须要抉择售后商品数量，申请起因，问题形容，拍照上传等，依据不两只的售后形式与售后类型，其相应提交的信息也有所不同。 二、买家申请售后，须要商家的确认，所有售后过程中，须要与商家放弃顺畅的沟通渠道。确认售后后，零碎将生成售后详单，并显示相应的售后过程，如果买家不称心的话，也能够发动投诉，要求官网染指等。 三、商家上门售后：买家提交申请后，商家能够抉择是否上门售后，如果是上门售后，须要指派售后人员，留下相应联系方式，不便买家分割，售后人员是否达到，须要买家在零碎中确认。售后服务实现后，也须要买家确认。

最近简略学习了一下 OGSM 模型，把一些学习感想给大家分享一下。可能咱们用不到这个模型，然而也算是一个小知识点，留个印象也不错。 OGSM 模型是企业策略治理的实践工具。它次要是以下 4 个局部： O（Objective） ：目标，指企业要达成的短期指标，个别是定性形容，跟使命比拟相似，然而周期不要太长。G（Goal） ：指标，从企业指标里拆分出的，可量化/可跟踪的指标，如果达成这些指标，将很可能能够达成目标。S（Strategy） ：策略，达成指标的做法组合。要辨别主次和优先级。M（Measurement） ：度量，掂量策略是否执行到位。上面是一个简略的例子： OGSM 是一个自上向下的模型。在制订了公司级的 OGSM 之后，其中的 S 和 M 就会调配到下一层级，比方某部门，作为部门的 O 和 G，而后制订部门的 SM。通过这种形式，一级一级地向下拆分上来。到了最初一层级，在制订了 OGSM 之后，就须要制订达成每一个 SM 的行动计划了。 以上就是 OGSM 模型的根本内容了。 看起来，OGSM 模型跟指标管理工具很像，可能你会有疑难，OGSM 模型和 OKR 工具有什么区别？OKR 也是有定性的 O 和定量的 KR，而后也是一层一层拆解上来，能够高低关联。我认为，OGSM 跟 OKR 最大的差异在于两个工具的侧重点不一样吧。OGSM 会更加侧重于达成指标的策略制订下面。而 OKR 侧重于指标的关联治理。在其余方面，OGSM 模型跟 OKR 工具其实差异不大。 OGSM 模型中的 G 和 M 都是定量的，然而它们的作用是不一样的。M 是用来考核策略 S 的执行状况的。到了考核期时，如果 G 没有达成的话，那到底是策略制订的有问题？还是底下的人执行不到位呢？因而，如果 M 达成了，那就示意执行是到位的，底下的人很好的实现了策略。G 没达到，就不应该是执行问题了。这点也是 OGSM 模型的劣势之一。 我用前端页面性能优化来举个栗子： 假如最终咱们的首屏时延指标没有达成，那问题出在哪里呢？如果是因为动态资源包大小优化指标没有达成，那可能这个点就要背锅了，很有可能因为这项优化没有执行好，导致指标没有达成。但如果所有度量都实现了呢？这就证实策略都实现了，但指标还是没达成，阐明咱们的策略，也就是咱们的优化方案设计得有问题了。 ...

9 月 8 日，外滩大会分论坛上，蚂蚁团体首次开源了代码大模型 CodeFuse 。 支付宝小程序云负责人李铮发表 CodeFuse 正式开源 这是蚂蚁自研的代码生成专属大模型，依据开发者的输出提供智能倡议和实时反对，帮忙开发者主动生成代码、主动减少正文，主动生成测试用例，修复和优化代码等，以晋升研发效率。无论用户是初学者还是有教训的开发者，CodeFuse 都可能极大地提高编程效率和准确性，让人人可编程、可翻新成为事实。 CodeFuse 基于蚂蚁根底大模型研发，在近期代码补全的 HumanEval 评测中，CodeFuse 得分 74.4%，超过 GPT-4 ( 67% ) 的问题，也超过了 WizardCoder-34B 73.2% 的得分，在开源模型中位于国际前列。本次开源内容包含代码框架、模型等，现已上架相干平台，模型可在 HuggingFace 下载。 代码框架局部包含自研的多任务微调 ( Multi-task fine-tuning，缩写为 MFT ) 框架。MFT 反对代码生成、代码翻译、测试用例生成、bug 修复等数 10 个工作一起微调，它充分利用多任务之间的信息互补，通过翻新的 loss 设计解决不同工作之间收敛难易不平衡的难题，最终获得比单任务微调 SFT 更好的成果。 MFT 微调框架反对蚂蚁自研模型，以及多个开源大模型的代码能力微调。同时，框架内含翻新的微调数据打包技术，晋升微调速度约 8 倍；并应用多重部署优化技术，使推理减速约 2 倍。 模型局部包含 CodeFuse-13B、CodeFuse-CodeLlaMa34B-MFT 两个大模型。模型训练过程中，CodeFuse 应用了程序剖析校验技术，对高质量代码数据进行筛选，并构建了代码畛域专用字典，编码均匀长度低 10%+ 。 早在 2022 年 1 月，蚂蚁团体外部成立了代码智能生成专项，随着公司整体策略的推动，在对立软硬件基础设施反对下，从零到一训练了多个代码大模型，最终基于 13B 版本，打造了 CodeFuse，并在往年 6 月开始内测，用以实在开发环境，能够助力开发者低门槛编程，例如用自然语言编写 H5 小游戏、疾速开发支付宝小程序等。 基于 CodeFuse 的利用场景有开发助手、IDE 插件、数据分析器等，笼罩了目前研发工作的次要需要，在蚂蚁团体外部研发流程中陆续失去验证。 ...

数据集是JVS-智能BI中承载数据、应用数据、治理数据的根底，同样也是构建数据分析的根底。能够艰深地将其了解为数据库中的一般的表，他来源于智能的ETL数据加工工具，能够将数据集进行剖析图表、统计报表、数字大屏、数据服务等制作。 在整体的数仓架构中，数据集是在线加工的规范数据状态。 实现从业务数据抽取到数据统计分析库中，在界面上实现数据加工的过程。 数据集的创立选中对应要增加数据集的目录，点击“+”新增数据集 零碎进入新增数据集的界面，须要填写数据集根本的信息，对数据集进行设计 数据集的状态数据集的状态是用于管制在数据利用中的可见性，状态为启用时数据集为可用状态。 在启用状态下，数据设计不可批改。 数据集的设计点击数据集设计按钮 进入到数据集的设计界面，其中包含根本信息配置、界面化的数据设计、周期性执行设置、血统视图、执行日志等 设计界面介绍数据设计，左上角能够设置数据集名称，左侧是零碎提供的多种数据处理节点，主界面为数据配置画布，左侧的数据处理节点能够拖拽至画布，点击节点，下侧弹出对应的节点配置界面。 点击节点，下侧弹出对应的节点配置界面 性能阐明输出节点是数据集设计的数据引入的开始节点，用来抉择要解决的数据源。在抉择数据源时，将输出节点拖入数据集设计画布，零碎将自动弹出数据源的抉择弹框，抉择对应的数据源后，能够自在勾选所需的字段。 操作阐明引入与预览点击抉择的数据输出节点，零碎下侧展现数据节点的配置界面，左上角展现的数据查问的量（最大只能查问到50条，数据量过大不宜展现），并将抉择的数据字段名称与类型，并把对应数据预览进去，如下图所示 更改数据源点击更改数据源，零碎会从新弹出数据源抉择框，进行从新抉择数据源 在线demo：http://bi.bctools.cn/gitee地址：https://gitee.com/software-minister/jvs-bi 智能BI性能会集自助式数据分析平台：JVS智能BI性能介绍（一）数据源

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 UI管理器用于治理游戏中所有的UI界面，更加方便快捷地治理UI界面的创立、销毁以及层级治理。本文将深入探讨Cocos独立游戏开发框架中的UI管理器. 本文源码和源工程在文末获取，小伙伴们自行返回。 什么是UI管理器？UI管理器是游戏开发中的一个组件或模块，负责管理和管制游戏中的所有UI元素。这些元素包含菜单、按钮、得分板、角色状态栏、工作列表等。UI管理器的次要指标是协调UI元素的创立、渲染、交互和销毁，使它们与游戏的逻辑和用户输出相互配合。 UI管理器的次要性能UI元素的创立和销毁：UI管理器负责动态创建和销毁UI元素，确保它们在须要时呈现，并在不须要时被正确地销毁，以缩小内存占用。UI元素的层级治理：游戏中可能有多个UI档次，如主菜单、游戏界面和设置界面。UI管理器确保UI元素依照正确的程序绘制，以防止遮挡或混同。用户输出解决：UI管理器拦挡和解决用户输出，例如点击、滑动和拖拽，以确保这些操作正确地传递给UI元素并触发相应的响应。动画和过渡成果：UI管理器能够治理UI元素的动画和过渡成果，以加强用户体验。例如，按钮点击时的平滑过渡成果或角色状态栏的动静更新。数据绑定和更新：UI管理器能够将游戏数据与UI元素绑定，以便在游戏状态发生变化时自动更新UI。这对于显示分数、生命值和工作进度等信息十分有用。UI管理器的劣势提高效率：UI管理器能够缩小反复的UI元素创立和销毁代码，使开发人员可能更专一于游戏逻辑的实现。简化保护：通过将UI元素的治理集中在一个中央，开发人员能够更容易地批改、扩大和保护UI，而不会引入意外的谬误。加强用户体验：通过增加动画、过渡成果和晦涩的用户交互，UI管理器能够进步用户体验，使游戏更具吸引力。跨平台兼容性：UI管理器能够使UI代码更具可移植性，因而能够更容易地将游戏移植到不同的平台和设施上。可配置性：UI管理器通常容许开发人员应用可配置的形式定义UI元素，从而使UI的外观和行为更容易进行调整。UI管理器的实现过程1.构建UI基类UI基类继承cc.Component使其能够增加到节点上。 次要蕴含关上、敞开、显示、暗藏等办法。 2.构建UI层级类UI层级类继承cc.Node,所有这个类型的UI增加到这个类型的节点下。 次要包含增加UI到层级和从层级中移除UI办法。 3.弹出类UI弹出类UI示例，继承View类即可。 4.构建UI管理器创立UIMgr单例类。 初始化，设置canvas大小为960*640，创立游戏中用到的几个层级，包含根层、ui层、弹出层、提醒层等等。 关上UI办法，资源的加载用后面文章介绍到的资源管理器加载。 敞开UI办法，敞开UI并且开释资源。 不同的界面类型的封装 5.编写测试代码申明UITest类继承UI,给背景图增加一个点击事件，点击之后敞开UI。 开始界面给Logo增加一个点击事件，点击之后关上咱们的预制体UI。 6.筹备测试资源构建一个简略的预制体 把UITest脚本挂上去 7.成果演示 总结UI管理器是游戏开发中的重要组件，能够显著进步用户体验和开发效率。通过治理UI元素的创立、渲染、交互和动画，UI管理器帮忙开发人员创立出吸引人和晦涩的用户界面，从而使游戏更加引人入胜。在抉择游戏开发框架和工具时，理解UI管理器的性能和劣势将有助于更好地满足游戏我的项目的需要。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。UI管理器的介绍、次要性能及其劣势。源码通过关注“亿元程序员”发送"UIMgr"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

呈现问题其余小组在客户现场部署咱们的零碎时遇到了问题，公司环境测试失常的一个Docker到客户服务器上无奈失常应用。Docker外围是运行theia程序，能够在网页里与VSCode一样开发代码。在客户服务器启动后，网页拜访失常关上，但在外面开启终端时就卡死，而后theia的后盾服务就解体断连了。 收集信息通过沟通了解到，客户现场是离线环境，没方法近程，没方法下载工具调试，传输内部文件也不能轻易传送。简略的让共事做了下测试，并排除了权限问题、操作谬误、配置不正确等问题。剩下的很可能就是镜像自身问题了。 把雷同镜像拿到客户的其余机器上，发现能失常应用。询问后通晓，不能应用的服务器是 麒麟V10 零碎，失常应用的是 CentOS，以及本人测试服务器的Ubuntu。麒麟零碎咱们没思考过，有些意料之外问题也是能承受的。这种运行终端最外围的性能也没定制过，很大概率是兼容性问题，手头没复现的环境很是头疼。 再次询问后发现一个十分费解的事件，他们组是有部署一台麒麟V10 零碎的，这台跑同样的镜像就十分失常，为此还专门过来试了试，的确如此。只能一边让共事比照两台服务器的差别，一边持续收集错误信息。 最初膨胀到两个谬误上，一个是程序终止后最初会输入终端id是-1与其余环境不统一，另一个是稍早一些有抛出一个错误信息Error: Unexpected SIGPIPE。 推断排查翻翻代码，从@theia/terminal开始，终端id -1是终端初始化值，接着调用 @theia/process 模块，@theia/process 模块创立终端是调用 node-pty 包（版本 0.11.0-beta17）的spawn办法。node-pty 作用就是创立一个过程，返回能够读写的终端对象，spawn就是他的创立办法。 抛出的错误信息是在@theia/core中的 src/node/backend-application.ts，调用process.on 监听了 “SIGPIPE”事件，解决逻辑就仅仅是抛出错误信息。 在这段代码有附带一个 electron 的 issues，工夫很早曾经修复敞开了。issues里是electron环境，咱们当初是在浏览器环境，并不太一样。并且Node.js中有对SIGPIPE信号做疏忽解决，应该不至于过程被终止。持续搜寻其余相干探讨也没更多有用的材料了。只能回头，再从提示信息 SIGPIPE 下手了。 信号 signal SIGPIPE 是什么？这是 linux 过程通信的形式之一，是惟一的异步通信形式。 linux零碎定义了64种信号值，其中1-31是不牢靠信号，大部分是一些错误信息。 当过程接管到信号，能够有三种解决形式：1. 捕捉信号本人解决。2. 疏忽信号不做任何解决。3. 缺省解决，应用零碎默认的解决形式，有终止过程、疏忽信号、挂起等。 除了谬误产生的，软硬件也能被动产生信号，像是键盘触发ctrl+c时，就是发送的2信号标识码是 SIGINT。kill命令也能借助零碎向其余过程发送信号，以达到杀死过程的成果。 SIGPIPE 的缺省解决就是终止过程，是管道操作产生的谬误，产生在管道敞开后，但过程仍然在写入，会触发这个信号产生。 所以theia捕捉并抛出了错误信息也合乎对信号的解决。 管道 pipe 由以上得悉，这个标记阐明过程执行时遇到了谬误，这个谬误是在操作“管道”产生的。 什么是“管道”呢？管道与信号一样，也是过程间的通信形式。过程间通信（Inter Process Communication）缩写为IPC，形式一共有四种：管道(pipe)、信号(signal)、共享映射区(mmap)、套接字(socket)。管道还有辨别为pipe匿名管道，FIFO为命名管道，个别用在血缘关系的过程之间（父子过程、兄弟的子过程）实现数据传递。 推断 依据以上信息做出一个大抵推断，node-pty 在创立终端时要向相终端过程读写数据，但指标过程不明起因未启动或者意外敞开了，导致后续对管道读写数据时呈现了谬误，零碎产生了SIGPIPE 信号。 可能 node-pty 中的错误处理在麒麟下未失效，或是并没对此有做错误处理，导致过程异样连带theia一起被终止。 陷入纳闷没有复现环境很麻烦，好在最初又整了套麒麟零碎，胜利了复现了问题。那这样就搞个最小化的验证。 在这期间还发现了，此前旧版的theia在客户服务器上能够失常应用。查问 theia 历史，最开始应用的是 @theia/node-pty 也就是定制的 node-pty ，在 1.22.0版本更换了包，应用了原版的 node-pty。 ...

Vue中如何进行表单地区抉择与级联联动在Vue中实现表单地区抉择和级联联动是一个常见的需要。用户常常须要填写地区信息，而一个简略的抉择框往往无奈满足简单的地区数据结构。上面将介绍如何应用Vue实现表单地区抉择和级联联动。 1. 数据筹备首先，咱们须要筹备地区数据。地区数据个别以树形构造组织，例如： [ { "id": 1, "name": "中国", "children": [ { "id": 11, "name": "北京", "children": [ { "id": 111, "name": "东城区" }, { "id": 112, "name": "西城区" }, // 其余区县 ] }, { "id": 12, "name": "上海", "children": [ { "id": 121, "name": "黄浦区" }, { "id": 122, "name": "徐汇区" }, // 其余区县 ] }, // 其余省份或直辖市 ] }, // 其余国家]咱们能够将该数据保留在一个JSON文件中，并在Vue中通过Ajax或Axios等办法获取。 2. Vue组件接下来，咱们创立一个Vue组件用于表单地区抉择和级联联动。 <template> <div> <select v-model="selectedCountry" @change="onCountryChange"> <option v-for="country in countries" :key="country.id" :value="country.id">{{ country.name }}</option> </select> <select v-model="selectedProvince" @change="onProvinceChange"> <option v-for="province in provinces" :key="province.id" :value="province.id">{{ province.name }}</option> </select> <select v-model="selectedDistrict"> <option v-for="district in districts" :key="district.id" :value="district.id">{{ district.name }}</option> </select> </div></template><script>export default { data() { return { countries: [], provinces: [], districts: [], selectedCountry: null, selectedProvince: null, selectedDistrict: null }; }, mounted() { // 获取地区数据并初始化第一个下拉框 this.fetchCountries(); }, methods: { fetchCountries() { // 通过Ajax或Axios等办法获取地区数据，并赋值给countries // 这里为了简化示例，间接应用静态数据 this.countries = [ { "id": 1, "name": "中国" }, // 其余国家 ]; }, fetchProvinces(countryId) { // 依据countryId获取相应省份数据，并赋值给provinces // 这里为了简化示例，间接应用静态数据 this.provinces = [ { "id": 11, "name": "北京" }, // 其余省份 ]; }, fetchDistricts(provinceId) { // 依据provinceId获取相应区县数据，并赋值给districts // 这里为了简化示例，间接应用静态数据 this.districts = [ { "id": 111, "name": "东城区" }, // 其余区县 ]; }, onCountryChange() { // 当国家抉择框扭转时，从新获取对应的省份数据，并重置选中的省份和区县 this.fetchProvinces(this.selectedCountry); this.selectedProvince = null; this.selectedDistrict = null; }, onProvinceChange() { // 当省份抉择框扭转时，从新获取对应的区县数据，并重置选中的区县 this.fetchDistricts(this.selectedProvince); this.selectedDistrict = null; } }};</script>在上述代码中，咱们定义了一个Vue组件，蕴含三个下拉框，别离用于抉择国家、省份和区县。通过v-model指令，咱们绑定了这三个下拉框的选中值，即selectedCountry、selectedProvince和selectedDistrict。在抉择国家和省份时，触发对应的onCountryChange和onProvinceChange办法，依据选中的国家和省份从新获取相应的省份和区县数据，并更新下拉框的选项。 ...

随同凋谢数据生态和数智化业务的蓬勃成长，各类业务利用的运维可见性、平安脆弱性、业务行为危险以及数据合规挑战备受关注，而流动数据则是执行各类剖析的绝佳观测点，可能对绝大多数的危险、数据、人员、行为、异样实现综合监测和关联剖析。在理论的用户环境下，往往存在着丰盛的基础设施与多样化的业务场景，固化的专家规定和预训练模型往往难以在差异化的用户业务中产出最佳的剖析后果。通过部署灵便可变的开放式数据分析能力，能够施展出最大的数据价值，并利用于任意用户场景。萤火智能剖析平台作为一款综合性流动数据分析产品，针对异构、多模态利用数据提供危险监测、合规性治理、数据建模、用户追踪、行为关联、AI解释与推理等一体化数据分析能力，为企业应用运维、数据合规、平安监测、业务洞察等场景提供全面反对。在行将迎来的3.0版本中，萤火将通过凋谢数据分析能力、数据编排开发能力、可视化引擎承载不同业务的深度剖析需要，助力用户实现多价值流动数据后劲开释。 01数据洞察&疾速能力构建萤火3.0数据底层基于列式OLAP进行了大量革新，可实现流动数据场景下40000EPS的并发入库和全量数据存储，并采纳分布式框架，反对节点横向扩大，实现百亿级数据量的实时交互探查。新版本萤火将内置多种可视化分析器，反对用户通过自定义SQL的形式，对关注的数据进行疾速画像，并联合时序剖析，以可视化形式出现各类拜访趋势、周期性指标；通过在SQL中构建鉴权-拜访表数据关联，可反对异样用户行为剖析、业务链路剖析等简单威逼场景。零碎同时反对自定义SQL保留为告警事件/监测指标/合规检测项，实现多场景数据深度洞察，并可能帮忙用户疾速在数据底座上构建全新的的危险辨认/行为监测/合规查看能力。 02实时数据关联&简单工作编排萤火3.0将残缺反对数据集成、数据加工、工作公布与调度、工作流编排等性能，残缺出现数据开发的残缺工作栈，并将流批一体大数据分析底座的能力凋谢至用户端，可基于用户自定义Flink SQL工作，关联实时流数据与离线数据，构建回溯历史行为的异样检测能力、越权检测能力、行为风控能力。工作流方面，3.0版本将提供内建算子拖拽及基于DAG的场景化实例编排，可依据用户业务的理论统计指标、数据处理规定设置各项检测阈值，从而帮忙用户构建自主可控、了解业务的深度监测计划，进一步开释全量数据业务后劲。 03可视化引擎自定义仪表板性能反对多种可视化组件拖拽编排，同时零碎针对资产拜访关系、数据流动跟踪、威逼链路追溯、用户行为剖析等多个场景提供专题可视化计划，并反对各项用户关注指标&报表展现的自定义编辑，进步整体经营效率与展现成果，实现数据采集-开掘-经营-价值体现的全链路闭环。 04Future萤火3.0首次将数据洞察/Flink SQL/DAG编排等开放式数据能力凋谢至用户端，提供数据流动场景下的高级自定义剖析能力，为用户和合作伙伴提供极具扩展性的数据基座。后续萤火将进一步加强平台性能与大数据底座，助力多行业用户和合作伙伴联合本身场景特点，疾速实现利用运维、数据合规、平安监测、业务洞察等多维度能力构建。

在当今，挪动领取在咱们生存中曾经是不可或缺的货色，以微信和支付宝为代表的扫码领取零碎正在各种线下生产场景中应用，给咱们日常的生存购物生产带来了不少的便当。第一些第三方的扫码领取零碎更是汇合了各种领取渠道，买家或消费者只须要扫一个二维码，零碎就能够自动识别是应用支付宝还是微信领取，或者是其余的领取渠道，而OctShop商城的扫码领取零碎就是这样一个聚合了各种领取渠道的扫码领取零碎。OctShop商城的扫码领取零碎还实现了支付宝和微信的分账性能，分账次要性能逻辑就是：当消费者用户扫码聚合后的领取二维码后，扫码领取零碎就自动识别拉起不同渠道的领取，如支付宝、微信领取等。消费者输出领取明码或扫脸之后，实现领取。这时领取的金额间接到账商家的账号中。如：支付宝账号、微信账号等。这个收款账号能够是集体的、个体工商户、企业公司等。平台扫码领取零碎确认结算，而后就能够对此笔收款进行分账了，比方：在OctShop商城扫码领取零碎中，分账收款零碎会依据你设置的每个店铺分账比例值，对须要分账的账号进行分账。比方：领取平台能够进行抽佣，快递费用、分润分账、平台服务费、手续费、增值业务费、广告费用等等分账类型的抽佣。每个分账的账号都能够由扫码领取零碎进行自在设置。而分账的金额是间接从商家的账号中进行扣除，扣除的金额就依据分账信息间接把钱打入到分账账号中，比方：支付宝账号、微信零钱等。真正实现了集体扫码领取，企业扫码领取一体化，而且收费了二清问题，公账收款的账务税务问题。 OctShop扫码领取零碎利用场景如下：一、扫码转账领取用户扫码就能够实现转账，商家在扫码领取系统生成一个二维码，用户扫码就能够将款项转账给商家。此种领取的实质就是转账，通过二维码就零碎就能够定位到交易单方的账号，而后，进行转账操作，个别商家无需承当领取手续费。二、店铺买单OctShop扫码领取零碎思考到线下实体店的收款需要，为入驻的商家开发了一个弱小的店铺零碎，商家在后盾管理系统中，能够生成独立的店铺二维码和收款二维码。扫店铺二维码或收款二维码，能够间接进入到店铺的首页，买家能够浏览商品，优惠券，流动等信息，如下图： 买家能够在店铺中点击间接买单就能够间接领取了，也能够抉择相应的商品，进行在线领取买单。如果消费者在店铺充值了，还能够应用余额领取。 三、扫码公众号领取，微信h5领取这种扫码领取理论就是通过生成领取链接，而后，在关上链接的时候调走各领取渠道的领取，为了不便线下实体店，就将生成的领取链接内容制作成了一个独立的领取二维码。用户只须要扫码就能够关上相应链接进行领取。这种形式是比拟灵便不便，任何一个页面都能够援用领取网址，点击网址就能够领取，发一个链接给好友也能够实现领取。四、条码领取OctShop的条码领取次要是以支付宝和微信的条码领取为根底，通过用户展现的不同条码，零碎主动判断应用哪种领取条码。此领取形式目前线下应用最为宽泛，也失去了支付宝、微信的大力推广和反对。五、店铺收款零碎_收款分账零碎_带分账的门店收款零碎_店铺收钱零碎 店铺收款零碎_收款分账零碎_带分账的门店收款零碎_店铺收钱零碎https://pc.opencodetiger.com/OctShop/FeatureDetail_400074_0_0... 聚合店铺买单、扫码收款、聚合领取买单零碎https://pc.opencodetiger.com/OctShop/FeatureDetail_16_0_0.html

前言想体验卡通格调的休闲挂机回合制游戏吗？想体验满级VIP的尊贵吗？想体验榜一大佬的无敌寂寞吗？各种极品炫酷时装、坐骑、翅膀、宠物统统给你，就在石器时代 H5 之恐龙宝贝！ 本文解说石器时代 H5 之恐龙宝贝架设教程，想钻研H5游戏如何实现，体验游戏中秒天秒地秒空气的肯定不要错过。 我架设的石器时代 H5 游戏链接和源码请关注我的公众号 echeverra 发送“石器时代”获取，手机和电脑都可完满运行，后盾 GM 发送“石器时代GM”获取，游戏长期保护，快来体验一下吧。 如果你对H5游戏感兴趣，举荐另外几款我架设的 H5 游戏：H5游戏整顿汇总，欢送来游玩~ 石器时代游戏截图： 架设1. 架设条件石器时代架设须要筹备： linux服务器，倡议 CentOs 7.6 版本，举荐腾讯云轻量应用服务器，性价比高。游戏源码，关注我的公众号 echeverra，发送 “石器时代” 获取。服务器举荐 2H4G 配置，游戏运行会占用 1.3G 左右的内存。 2. 装置宝塔及环境宝塔是一个服务器运维管理软件，装置命令： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh装置完后，依照提示信息登录宝塔（如果无法访问可能是因为服务器没有凋谢8888端口，参考步骤凋谢端口），并在宝塔软件商店中搜寻以下软件装置： web服务器：Nginx1.18数据库：Mysql 5.6编程语言：PHP 5.6数据库管理工具：phpMyAdmin 4.43. 敞开防火墙通过宝塔菜单终端，执行敞开防火墙命令： systemctl stop firewalld.servicesystemctl disable firewalld.service4. 凋谢端口咱们间接凋谢所有端口1-65535，阿里云服务器在平安组中配置规定。 腾讯云服务器在防火墙中配置规定。 而后在宝塔菜单平安中凋谢所有端口。 5. 上传源码拿到源码后，将 sqsd.zip 压缩文件通过宝塔上传到根目录（如果宝塔禁止上传到根目录，可上传其余门路后剪切粘贴到根目录）。 ...

在挪动端开发中，常常会碰到须要横向滚动的场景，例如这样的 但很多时候是不须要展现这个滚动条的，也就是这样的成果，如下 你可能想到间接设置滚动条款式就能够了，就像这样 ::-webkit-scrollbar { display: none;}目前来看如同没什么问题，但在某些版本的 iOS 上却有效（具体待测试），滚动条依然呈现。 那有没有其余形式能够解决这个问题呢？上面介绍几个办法 一、通过 overflow 暗藏既然有时候批改滚动条款式无奈解决，咱们能够想方法把它暗藏。 上面是一个横向滚动列表 <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>简略润饰一下，让这个列表能够横向滚动 .list{ display: flex; overflow: auto; gap: 10px; padding: 10px;}.item{ width: 100px; height: 100px; background: royalblue; border-radius: 8px; flex-shrink: 0;}成果如下 通过overflow暗藏的形式很简略，咱们须要一个父级 <div class="wrap"> <div class="list"> </div></div>而后，将列表底部padding设置的略微大一些，比方 .list{ /**/ padding-bottom: 20px;}能够看到列表下方的间隔变大了，滚动条也更靠下了，成果如下 如何让整体尺寸依然放弃原有呢？答案是借助负margin，比方之前底部padding是10，当初改成了20，所以须要-10的margin .list{ /**/ margin-bottom: -10px;}这样整体尺寸就失常了，不过滚动条依然是可见的，只是进来了 最初只须要设置父级的 overflow为暗藏就能够了 .wrap{ /**/ overflow: hidden;}原理示意如下 这样就完满暗藏了滚动条 当然，不仅仅是 overflow，上面这种形式也能够实现超出暗藏 ...

花了小半年开发了一个 AI 套壳 APP ，这是我自己第一次尝试开发 APP ，现学现做，投入了大量的工夫和精力，然而大势已过，加上国家对 AIGC 类 APP 的管控越来越严格，APP 上架后第二版就被禁止在国内销售了，思来想去，再持续搞上来前途也比拟迷茫。所以间接开源了，须要的自取哈。 APP 应用的是 Flutter 开发的，后端为 Golang 。反对 Web 端，Android 、IOS APP ，桌面端（Windows+Mac）。 大概在 10 天前，我在 V 站公布了名为 花了小半年开发了一个 AI 套壳 APP ，然而大势已过，间接开源了 的帖子，受到了大家的宽泛关注，截止至目前已获得以下问题 APP 端代码 在 Github 上取得了 3.3K StarAPP 服务端代码 在 Github 上取得了 250+ StarAPP 注册用户数量增长 5400 +APP 服务端代码其实前段时间始终都是一个空仓库，我过后说 9 月 10 日前开源后端代码。通过一周的致力（下班时间），终于在上周六将服务端的代码公布到了 Github。简介 一款集成了支流大语言模型以及绘图模型的 APP ， 采纳 Flutter + Golang 开发，代码齐全开源，反对以下性能： 反对 GPT-3.5/4 问答聊天反对国产模型：通义千问，文心一言、讯飞星火反对开源模型：Llama2 ，ChatGLM2 ，AquilaChat 7B ，Bloomz 7B 等，后续还将凋谢更多反对文生图、图生图、超分辨率、黑白图片上色等性能，集成 Stable Diffusion 模型，反对 SDXL 1.0我的项目地址APP （ Flutter ）： https://github.com/mylxsw/aidea服务端（ Golang ）： https://github.com/mylxsw/aidea-server在线体验Android/IOS APP： https://aidea.aicode.cc/ ...

一、列表页按钮配置按钮类型A、表级按钮；B、行级按钮，表级按钮往往用作新增或者是整体性的操作，行级按钮次要用于对单行数据的操作。行级按钮超过3个主动折叠。 按钮增减零碎内置了 新增、删除、批改、详情、导入、导出、模板下载这几个按钮，不能删除以外，能够自定义按钮，并且能够自行删除 按钮触发联动性能按钮能触发逻辑、表单、发动网络申请 点击设计时，会进入对应的配置设计界面。 按钮的显隐管制按钮显隐管制能够通过间接设置，或者动静公式设置。 导入导出按钮配置能够依据数据模型，设置导入导出的款式格局。 二、列表页权限配置列表页权限配置包含两个方面：性能权限配置与数据权限配置 性能权限配置 表白页的性能权限配置默认是全副赋权给利用受权的相干人员，也能够依照自定义配置，如图所示，抉择自定义是，能够对人员设置能够操作的按钮。 人员抉择的形式如图所示： 数据权限配置数据权限能够依据查看人的组织、和数据自身的内容进行设置，下图为设置界面 也能够依据表单中的某项数据值进行筛选展现的数据，这种形式就比拟灵便 在线Demo：https://frame.bctools.cn/开源地址：https://gitee.com/software-minister/jvs 列表页相干往期干货低代码工具：jvs-list（列表引擎）2.1.7性能清单及新增性能介绍Java低代码外围引擎：jvs-list（列表）设计页配置低代码外围引擎：jvs-list（列表）的字段及款式配置

大家好，我卡颂。 codesandbox是前端工程师常常应用的代码在线运行环境，页面如下： 他的利用场景很广，比方： 有代码逻辑要分享，分享个codesandbox链接有新想法须要验证，又不想本地起个我的项目，用codesandbox技术文档演示Demo，用codesandbox作为一个在线运行代码的编辑器，这么多人天天收费用，他服务器扛得住么？ 毕竟，同样作为在线代码运行环境（次要是跑算法题）的leetcode，如果同时刷题的人多了，提交后都还得排队： codesandbox是如何实现的？他会面临leetcode一样的服务器压力么？ 欢送围观朋友圈、退出人类高质量前端交换群，带飞 codesandbox的分类这个问题的实质其实是问 —— 用户在codesandbox中写的代码，到底是在前端还是后端编译成动态资源的？毕竟，如果是在后端实现，会减少服务器压力。 比方，对于上面这段React代码： // main.jsximport { createRoot } from "react-dom/client";import { Cpn } from "./Cpn";function App() { return ( <Cpn /> );}createRoot(document.getElementById("root")).render(<App />);要想在浏览器中运行，波及几个前置工作： 须要编译JSX语法，比方将<App/>编译为_jsx(App, {})须要解析并提前下载所有依赖，比方这里的react-dom、react包须要解析模块依赖关系，比方main.jsx导入了Cpn.jsx中的Cpn组件。对于不反对ESM的浏览器，须要将代码打包。对于反对ESM的浏览器，须要解决引入门路如果波及到其余资源，比方图片、文字、HTML文件，须要有相应的解决上述工作，codesandbox是在浏览器还是服务器实现的呢？ 在这个例子中，这些工作都能在浏览器实现，比方： 对于所有第三方依赖，能够在浏览器中间接申请CDN波及编译的工作（比方编译JSX、模块依赖剖析），实质其实是字符串的解析，能够用浏览器版本的babel实现下面的例子是一个纯前端的React我的项目。但有些依赖服务端环境的我的项目没法采纳上述形式运行，比方： 应用了Docker的我的项目相似Next.js这样的全栈我的项目这种状况就须要一个实在的服务端环境。 两者的区别能够用下图概括： 纯前端我的项目：编译与执行都能在浏览器实现全栈我的项目：我的项目编译在服务端进行，浏览器负责我的项目执行 他们别离对应codesandbox的两种运行环境： Browser Sandbox：基于浏览器的本地运行环境Cloud Sandbox：基于MicroVM的云端运行环境当咱们通过模板创立codesandbox我的项目时，能够通过右上角是否有Cloud标记辨别两者： 能够发现： 纯前端我的项目（比方React我的项目、纯JS我的项目）应用Browser Sandbox须要服务端运行环境（比方Docker我的项目、全栈框架我的项目）应用Cloud Sandbox对于Cloud Sandbox，他底层应用亚马逊开发的Firecracker疾速启动轻量级的MicroVM，这也是AWS Lambda底层应用的库。 所以，基于Cloud Sandbox启动的我的项目的确会占用服务端资源。具体来说，每个我的项目会调配： CPU：2个虚构 CPU（vCPUs）内存：2GB存储：6GB这块是codesandbox公司的外围业务。毕竟，收费试用称心后，可能就会上付费的Pro版（更多资源分配），或者团队定制版。商业模式与Vercel相似 —— 提供收费根底服务（自担局部资源费用），通过增值的云服务免费。 而前端开发日常应用codesandbox创立的我的项目，大多数并不是基于Cloud Sandbox，而是基于Browser Sandbox启动的。这些我的项目并不会给codesandbox带来太多服务端压力。 两种sandbox的区别有个很直观的形式辨别两种Sandbox —— 当咱们新建一个codesandbox我的项目，在预览区域能够看到我的项目长期url： 新开页面，拜访这个url，如果申请的资源包含： 我的项目运行所需的动态资源webpack热更新相干代码 那代表这是个Cloud Sandbox我的项目。Cloud Sandbox在云端启动后端服务与以后页面通信，就相似咱们本地开发时起的后端服务一样。 ...

很早之前，就写过一篇与原生嵌套相干的文章 -- CSS 行将反对嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而明天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的标准！ CSS 原生嵌套语法在之前，只有在 LESS、SASS 等预处理器中，咱们能力应用嵌套的写法，像是这样： div { & > p { color: red; } &:hover { color: yellow; }}从 Chrome 112 开始，原生 CSS 也能够应用嵌套语法了。 其语法规定大抵如下： parentRule { /* parent rule style properties */ & childRule { /* child rule style properties */ }}CSS 原生嵌套语法能力边界大部分同学对嵌套应该还是十分相熟的，上面咱们一起看看，CSS 原生嵌套的能力边界，语法反对范畴。 反对嵌套，并且反对多层嵌套这个很好了解，间接看 DEMO： <div class="g-container"> <h3 class="g-h3">CSS <span class="g-span">Nesting</span> </h3></div>div { border: 1px solid #000; .g-h3 { color: red; .g-span { color: blue; } }}成果如下： ...

DOMPurify是一个仅限DOM的，超疾速的，超级宽容的XSS清理器，用于HTML，MathML和SVG。 它也非常简单易用和入门。DOMPurify于2014年2月启动，同时已达到v3.0.5版本。 DOMPurify是用JavaScript编写的，实用于所有古代浏览器（Safari（10+），Opera（15+），Edge，Firefox和Chrome - 以及简直所有应用Blink，Gecko或WebKit的其余浏览器）。它不会在 MSIE 或其余旧版浏览器上中断。它什么都不做。 它有什么作用？ DOMPurify清理HTML并避免XSS攻打。你能够用充斥脏HTML的字符串来输出DOMPurify，它将返回一个带有洁净HTML的字符串（除非另有配置）。DOMPurify将删除所有蕴含危险HTML的内容，从而避免XSS攻打和其余恶浊的内容。它也该死的血腥快。咱们应用浏览器提供的技术，并将它们转换为XSS过滤器。您的浏览器越快，DOMPurify 的速度就越快。 如何应用它？ 这很容易。只需在您的网站上蕴含 DOMPurify。 @types/dompurify <script type="text/javascript" src="src/purify.js"></script>生成的 HTML 能够应用 DOM 元素 innerHTML 写入 DOM 元素，也能够应用 document.write() .这齐全取决于你。请留神，默认状况下，咱们容许 HTML、SVG 和 MathML。如果你只须要HTML，这可能是一个十分常见的用例，你也能够轻松设置它： const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } }); TypeScript 类型定义在哪里？ 只有用这个就行 @types/dompurify 更多技术小窍门：开发者技术前沿

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 很多小伙伴一听到A星算法，第一反馈就是它就是个寻路的算法，我会。确实是，把握了算法的人，天然感觉容易。然而对于游戏开发新人或者刚接触A星算法的人，这个算法还是很难很简单的。而且让把握的人在游戏我的项目中使用，也不肯定能第一工夫敲进去。上面追随笔者一起来看看。 本文源码和源工程在文末获取，小伙伴们自行返回。 什么是A星算法？A星算法（A-star algorithm）是一种广泛应用的门路布局算法，它被设计用来在图形或网络中寻找两个节点之间的最短门路。 A星算法的原理A星算法是一种启发式搜索算法，联合了广度优先搜寻和最佳优先搜寻的特点。其核心思想是通过评估每个可能的门路，以找到从终点到指标节点的最佳门路。在A星算法中，每个节点都有两个要害值： G值（代价）：示意从终点到以后节点的理论代价，即曾经走过的门路长度。H值（启发式值）：示意从以后节点到指标节点的预计代价，即预计还须要走多远能力达到目标。A星算法的步骤简略列举一下A星算法的步骤，大家写代码时能够依据算法的步骤间接"翻译"过去就行： 创立一个凋谢列表和一个敞开列表，用于存储待摸索和已摸索的节点。将终点增加到凋谢列表，并将其G值设为0。反复以下步骤直到找到指标节点或凋谢列表为空： a. 从凋谢列表中抉择F值最小的节点（通常是H值+G值最小的节点）。 b. 将该节点从凋谢列表移至敞开列表。 c. 对该节点的街坊节点进行遍历，计算它们的G值和H值。 d. 如果街坊节点不在凋谢列表中，将其增加到凋谢列表，并更新其G值和父节点。 e. 如果街坊节点已在凋谢列表中，查看以后门路是否更短，如果更短则更新G值和父节点。当找到指标节点或凋谢列表为空时，搜寻完结。A星算法的劣势齐备性：如果存在可行解，A*算法可能找到最佳门路。启发式搜寻：通过应用启发式估计值，A*算法能够在大型图形中高效搜寻，缩小搜寻空间。适应性：A*算法能够依据不同问题的需要和启发式函数进行定制。广泛应用：A*算法在多个畛域都有胜利的利用记录，因而被宽泛应用。A星算法实际1.关上上一篇文章的工程如下图，笔者曾经编辑好整个地图的阻挡信息(红色局部)，蓝色原点是终点地位。绿色的是起点地位。红色的是门路点。 2.依据地图信息抽象化数据创立网格，并且依据地图信息标记阻挡格子不可行走。 3.创立AStar类创立一个凋谢列表和一个敞开列表，用于存储待摸索和已摸索的节点。并且将终点退出Open集设置G值为0。 4.检索门路反复以下步骤直到找到指标节点或凋谢列表为空： a. 从凋谢列表中抉择F值最小的节点（通常是H值+G值最小的节点）。 b. 将该节点从凋谢列表移至敞开列表。 c. 对该节点的街坊节点进行遍历，计算它们的G值和H值。 d. 如果街坊节点不在凋谢列表中，将其增加到凋谢列表，并更新其G值和父节点。 e. 如果街坊节点已在凋谢列表中，查看以后门路是否更短，如果更短则更新G值和父节点。直到达到起点检索完结。 5.构建门路通过链表反向造成门路。 6.编写测试代码仍旧通过cc.Graphics去绘制终点、起点、门路和阻挡。 每次点击地图之后从新生成门路并且从新绘制。 7.后果演示 总结A星算法是一种弱小的门路布局算法，通过综合思考理论代价和启发式预计，可能在游戏寻路中中寻找最佳门路。它的原理简略但功能强大，为解决许多游戏中的导航和布局问题提供了无力的工具。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。A星算法的概念、原理、步骤和劣势以及实际。源码通过关注“亿元程序员”发送"Astar"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

Vue 和 React 是创立 JavaScript 网络应用程序最罕用的两种工具。但咱们该如何在两者之间做出抉择呢？在本篇 Vue 与 React 的比照中，咱们将尝试找出答案。咱们将回顾每种工具的优缺点，提供抉择应用哪种工具的技巧，并帮忙你开始应用。总览什么是Vue？ Vue趣事什么是React？ React趣事Vue vs React：全面比拟 React 灵活性Vue 灵活性应用 React 进行开发应用 Vue 进行开发React 工具Vue 工具React 性能Vue 性能React 的文档和社区反对Vue 的文档和社区反对Vue vs React：总结受欢迎水平 应用 Vue 和 React 创立的出名应用程序Vue vs React：何时应用？10条FAQ Vue 和 React 之间的理论区别是什么？为什么 Vue 比 React 更快？为什么 React 比 Vue 更受欢迎？Vue 比 React 更好吗？Vue 比 React 更简略吗？如果咱们晓得 React，咱们能学习 Vue 吗（反之亦然）？咱们应该从 React 转向 Vue 吗？Vue 比 React 更适宜我的职业生涯吗？Vue 能够与 React 一起应用吗？那么，咱们应该学习 Vue 还是 React？总结什么是Vue？Vue 是一个用于构建用户界面的渐进式、可逐渐采纳的 JavaScript 框架。它由 Evan You 于 2014 年创立，并由一个沉闷的开发者社区负责保护。 ...

Vue.js 是一个风行且弱小的 JavaScript 框架，它容许咱们构建动静和交互式 Web 应用程序。 然而，与任何软件一样，Vue.js 应用程序有时会遇到内存透露，从而导致性能降落和意外行为。 明天，咱们将深入探讨 Vue.js 应用程序中内存透露的起因，并摸索如何定位和修复这些问题的无效策略。 什么是内存透露 ?当程序执行过程中保留不再须要的内存时（次要是一些 变量、 办法等），会阻止内存被开释并导致程序的内存使用量随着工夫的推移而增长，称为内存透露。 在 Vue.js 应用程序中，内存透露通常是因为组件、全局 EventBus、事件定时器 和 变量，函数援用的治理不当而引起的。 1. EventBus 引起的内存泄露一个陈词滥调的话题， Vue.js 中跨组件通信，要么是EventBus， 要么是Vuex 或者Pinia 这种数据流工具。 当咱们对 EventBus 应用不过后，它们可能导致内存透露。当组件被销毁时，应将它们从事件总线中删除，以避免提早援用。 举个例子： // 组件A.vue<template> <div> <button @click="sendMessage">播送音讯</button> </div></template><script>import { EventBus } from "./EventBus.js";export default { methods: { sendMessage() { EventBus.$emit("message", "Hello world from A!"); } }};</script>// 组件B.vue<template> <div> <p>{{ receivedMessage }}</p> </div></template><script>import { EventBus } from "./EventBus.js";export default { data() { return { receivedMessage: "" }; }, created() { EventBus.$on("message", message => { this.receivedMessage = message; }); }};</script>在此示例中，产生内存透露是因为 ComponentB 从EventBus订阅了一个事件，但在该组件被销毁时并未勾销订阅。 ...

笔者开源了一个Web思维导图，在做导出为图片的性能时走了挺多弯路，所以通过本文来记录一下。 思维导图的节点和连线都是通过 svg 渲染的，作为一个纯 js 库，咱们不思考通过后端来实现，所以只能思考如何通过纯前端的形式来实现将svg或html转换为图片。 应用img标签联合canvas导出咱们都晓得 img 标签能够显示 svg，而后 canvas 又能够渲染 img，那么是不是只有将svg渲染到img标签里，再通过canvas导出为图片就能够呢，答案是必定的。 const svgToPng = async (svgStr) => { // 转换成blob数据 let blob = new Blob([svgStr], { type: 'image/svg+xml' }) // 转换成data:url数据 let svgUrl = await blobToUrl(blob) // 绘制到canvas上 let imgData = await drawToCanvas(svgUrl) // 下载 downloadFile(imgData, '图片.png')}svgStr是要导出的svg字符串，比方： 而后通过Blob构造函数创立一个类型为image/svg+xml的blob数据，接下来将blob数据转换成data:URL： const blobToUrl = (blob) => { return new Promise((resolve, reject) => { let reader = new FileReader() reader.onload = evt => { resolve(evt.target.result) } reader.onerror = err => { reject(err) } reader.readAsDataURL(blob) })} ...

随着需要的一直开发，前端我的项目一直收缩，业务提出：你们的首页加载也太慢啦，我都须要7、8秒能力看到内容，于是乎主管就让我联结后端开启优化专项，指标是3s内展现齐全首页的内容。 性能指标开启优化时，咱们要清晰的晓得现状和指标，以及咱们采纳什么样的伎俩，通过检测什么指标来查看到优化的过程。 后果指标依据这个指标，咱们能够抉择一些性能指标，google 提供了基于用户体验的性能指标，如FCP、LCP、FID、TTI、TBT、CLS等，也有指标更少新的用户体验量化形式 Web Vitals，只选取 LCP、FID、CLS。 咱们这次次要抉择的指标是 FCP、LCP。FCP 示意着用户能最快看到页面内容的工夫，LCP 则是可视区域的最大内容，这两个指标代表着用户实在对于页面快和慢的体验，FCP 在 1.8 秒内，LCP 在2.5 秒内是比拟好的。 通过 chrome 浏览器 lighthouse 性能可查看的以后页面的后果指标数据，该我的项目首页 LCP 和 FCP 工夫别离为 7.5s、1s，LCP 十分之慢了。 过程指标FCP、LCP 是心愿达到的后果，在优化的过程中，咱们须要一些数据来记录到底在哪些方向做的优化能导致一个比拟好的后果，比方申请数量、页面加载工夫、打包总体积/入口文件体积、依赖的 cdn 数量、传输资源体积。 无痕模式下通过 chrome 开发者工具 network 记录这些过程指标，以后我的项目首页过程指标：申请（requests） 117 个，页面加载工夫（Load）3.79 秒，打包总体积（resources） 21.8MB、依赖的 CDN（须要本人点击页面右键查看网页源码去数）25个js 、7个css资源，传输资源体积（transferred）6.6MB 较多的资源数量、较大的打包体积都导致了页面加载速度变慢。 页面生命周期首先咱们得晓得页面的生命周期，能力有针对性的去对前端参加的过程进行优化。那么从浏览器地址栏输出url，到页面渲染进去，次要通过了哪些步骤呢？ 输出域名后，DNS 域名解析发动TCP的3次握手建设TCP连贯后发动 http 申请服务器端响应http申请，浏览器失去html代码浏览器解析html代码，并申请html代码中的资源浏览器对页面进行渲染出现给用户（DOM、CSSOM、渲染树）在这个过程中，有很多网络、服务器参加的过程，而咱们次要关注前端可能进行的优化，比方应用 DNS 预解析、缓存机制、缩小我的项目编译后 html / css/ js 包资源大小。 通用优化删除无用代码这一步实用于所有我的项目，定期的清理掉不须要的代码能防止我的项目无止境的收缩。因咱们我的项目的历史遗留问题，存在一些无用的cdn资源、依赖、组件、配置，在页面加载的过程中他们占据了肯定的网络带宽。 无用 cdn 资源以后业务场景下这些资源都曾经用不到，也无需在页面初始化的时候加载。 性能反复的资源由不同开发者依据团体标准引入了，两个不同域名但雷同性能的前端异样数据采集的 cdn 资源，只需保留一个依然保护并且举荐应用的即可。 无用依赖找遍整个我的项目都用不到的依赖 ...

前言周末逛github的时候，发现咱们只须要在github域名上加上1s他就可能关上一个vscode窗口来浏览代码，比起在github仓库中查看更加不便 而后我就想网页端vscode能不能关上我本地的我的项目呢，带着这个纳闷我关上了网页版vscode，它竟然真的能够关上我本地的我的项目代码! 难道又出了新的API让前端的能力更进一步了？关上MDN查了一下相干文档，发现了几个新的API showOpenFilePicker用来抉择文件 语法showOpenFilePicker()参数options：（可选）蕴含以下属性 multiple：布尔值，默认为false。为true示意容许用户抉择多个文件excludeAcceptAllOption：布尔值，默认为false。默认状况下，文件选择器带有一个容许用户抉择所有类型文件的过滤选项（开展于文件类型选项中）。设置此选项为 true 以使该过滤选项不可用。types：示意容许抉择的文件类型的数组返回值返回一个promise对象，会兑现一个蕴含 FileSystemFileHandle 对象的 Array 数组。 体验<template> <div class="open_file" @click="openFile">关上文件</div></template><script setup lang="ts">const openFile = async () => { const res = await window.showOpenFilePicker(); console.log(res);};</script>默认只能关上一个文件，能够传入multiple:true关上多个文件 showDirectoryPicker用来抉择目录 语法属于浏览器全局办法，间接调用即可 showDirectoryPicker()参数options：（可选）蕴含以下属性 multiple：布尔值，默认为false。为true示意容许用户抉择多个文件excludeAcceptAllOption：布尔值，默认为false。默认状况下，文件选择器带有一个容许用户抉择所有类型文件的过滤选项（开展于文件类型选项中）。设置此选项为 true 以使该过滤选项不可用。types：示意容许抉择的文件类型的数组返回值返回一个promise对象，会兑现一个蕴含 FileSystemFileHandle 对象的 Array 数组。 体验<template> <div class="open_file" @click="openFile">关上文件</div> <div class="open_file" @click="openDir">关上文件夹</div></template><script setup lang="ts">const openFile = async () => { const res = await window.showOpenFilePicker({ // multiple: true, }); console.log(res.length);};const openDir = async () => { const res = await window.showDirectoryPicker(); console.log(res);};</script> ...

单行文本溢出的CSS.box1{ width:200px; // 设置固定宽度，文本内容超过宽度才会呈现省略成果 white-space:nowrap; // 不容许换行 overflow:hidden; // 暗藏溢出局部 text-overflow:ellipsis; // 应用省略号代替溢出局部}多行文本溢的CSS.item { width: 100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; // 垂直布局内容 -webkit-line-clamp: 3; // 设置行数 word-break: break-all; // 只有达到指定宽度，就强制拆分英文单词，使其换行}

引言笔者是一名有着8年游戏行业教训并且酷爱游戏的主程，从0到1率领着技术团队经验过多个大型的游戏我的项目起步到上线，获得十分好的问题。欢送大家关注订阅。 大家周末好，周末好好劳动，不发技术文，给大家讲讲游戏开发入门。 游戏开发是一个创造性和技术性兼具的畛域，吸引着越来越多的小伙伴想要摸索其中的神秘。本文将为想要入门游戏开发编程的新人介绍一个简略而无效的学习流程，帮忙你逐渐建设起松软的编程根底和游戏开发技能。 1. 确定学习指标：在开始之前，明确你的学习指标十分重要。你是想要开发2D还是3D游戏？是挪动平台还是PC平台？理解你的指标将有助于你抉择适合的编程语言和工具。 小伙伴们尽量抉择本人感兴趣的游戏类型的游戏，这样学习起来会事倍功半。 2. 学习游戏引擎：尽量抉择当初游戏开发行业风行的游戏引擎，例如Unity、Unreal Engine、Cocos、Laya，排名不分先后。 这些引擎提供了图形界面和工具，简化了游戏开发的过程。学习如何创立场景、增加角色、设置相机等基本操作。 不想学编程的小伙伴，还能够学习一些不必编程的游戏引擎，例如RpgMaker、GameMaker、微信小游戏制作工具等等。这些是可视化的游戏编辑工具，不须要写代码。然而笔者倡议还是要学习编程技术，因为编程之美，只有把握的人才懂。 不论什么引擎，重点先学习外面的UI零碎，一个残缺的游戏什么最多？ UI界面，新手入门必备。 3. 学习编程根底：编程根底作为游戏开发的根基，咱们要扎扎实实地把握，大家能够依据本人在学校或者已学的根底去抉择。或者依据本人抉择的游戏引擎去抉择编程语言学习。 举个例子，Unity用C#，Cocos能够用C++也能够用Typescript等等等。 编程的基础知识是什么？如变量、数据类型、条件语句和循环等。进阶的笔者强烈推荐数据结构与算法，锤炼你的写代码能力和写代码程度。 4. 把握根本数学和物理概念：游戏开发波及到许多数学和物理概念，如向量、矩阵、碰撞检测等。学习这些基本概念将帮忙你更好地了解游戏引擎和开发过程。 游戏开发经常还波及随机数算法，经常用于产出游戏道具。还有坐标系，坐标的转换等等。 5. 实现简略我的项目：通过实现一些简略的小我的项目，如Flappy Bird或迷宫游戏，来实际你所学的常识。这有助于你坚固编程技能并理解整个开发流程。 笔者举荐做些比拟动态的游戏、操作简略，游戏逻辑丰盛，算法明显的游戏。比如说贪吃蛇、象棋、推箱子等等。 这些练手的我的项目，咱们练完手就能够间接上架小游戏，何乐而不为。 6. 深刻学习：一旦你相熟了基础知识，能够开始深刻学习更高级的主题，如游戏物理、人工智能、图形渲染等。这些常识将帮忙你开发更简单和引人入胜的游戏。 深刻学习引擎和编程，笔者倡议理解和相熟内存治理，深入研究编程设计模式，深刻学习高质量的代码。引擎方面能够进一步理解高级零碎，例如粒子等等。 7. 参考文档和教程：游戏开发社区充斥了优质的文档、教程和论坛。利用这些资源，解决你在学习和开发过程中遇到的问题。还能够浏览一些经典的游戏开发书籍，深入你的常识。 学习哪一个引擎就间接去哪一个引擎的社区交换。寻找气味相投的小伙伴群体，学习的时候多想想，多思考。学习教程的时候要追随视频实操。 8. 实际和我的项目教训：继续地实际是晋升技能的最佳形式。参加一些开源我的项目或者本人入手开发残缺的小游戏，这将帮忙你积攒贵重的我的项目教训。 尝试退出游戏公司，外面有正规的标准和流程，通知你游戏开发须要什么。要做什么。 9. 学习优化和调试：学会优化游戏性能和解决bug是成为一名合格游戏开发者的重要局部。把握性能优化技巧和调试工具，以进步你的游戏品质。 调试能力是必须要晋升的，无论什么游戏引擎、什么编程语言。改bug离不开调试，通过调试软件、通过打印输出，剖析本人的代码哪里出了问题。 10. 继续学习和翻新：游戏行业一直变动和翻新，所以你须要放弃继续学习的态度。跟踪最新的技术和趋势，一直晋升本人的技能，为将来的游戏开发之路做好筹备。 当你曾经得心应手地编写游戏界面、编写游戏逻辑之后，你要下意识地往游戏外围模块进阶，下意识地思考，本人是否独立架设游戏框架，为他人提供更好的典范。 总结游戏开发编程是一个充斥挑战但也充斥乐趣的畛域。通过以上的学习流程，你将逐渐建设起松软的编程根底和游戏开发技能，为你将来的游戏开发之路打下松软的根底。记住，坚定不移和继续学习是取得成功的要害。祝福你在游戏开发的世界中获得优异的成就！ 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 游戏开发的举荐学习流程。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

本文由 Deguang 发表于 码路-技术博客什么是ARTS打卡？Algorithm 算法94. 二叉树的中序遍历 中序遍历：左子树->根节点->右子树function inorderTraversal(root: TreeNode | null): number[] { const result: number[] = []; const traverse = (node: TreeNode | null) => { if (!node) { return; } traverse(node.left); result.push(node.val); traverse(node.right); } traverse(root) return result};100. 雷同的树 递归判断function isSameTree(p: TreeNode | null, q: TreeNode | null): boolean { if (!p && !q) { return true; } if (!p || !q) { return false; } if (p.val !== q.val) { return false; } return isSameTree(p.left, q.left) && isSameTree(p.right, q.right);};Review 英文浏览Article: ...

 由前文内容浏览器工作原理与事件循环引出的问题：当咱们的页面足够简单，足够大时，如何使页面更快展现内容呢？当初在本文来做一次抛砖引玉。若有其余加载优化，心愿评论区不吝赐教。 首先，咱们须要先理解的是浏览器网络过程和渲染过程。（具体内容参照文章：浏览器是如何渲染页面的？）接下来，我会依据每一个渲染阶段提出能够优化的内容。 一.解析HTML阶段 解析HTML阶段，浏览器可能会遇到须要加载内部资源的 script 标签与 link 标签。浏览器会通过网络过程去加载 JS ，CSS 等内部资源，若JS资源较大，加载工夫过长可能会导致因期待资源而无奈持续解析HTML。（解析CSS生成CSSOM树不会扭转DOM树，所以HTML解析不会阻塞，解析JS也不会扭转DOM树，然而执行JS可能会改DOM树和CSSOM树，所以CSSOM树解析好后才会执行JS。因而JS会阻塞HTML解析，CSS不会阻塞但可能因JS而暂停HTML解析。） 解析程序图如下： 因而，为了尽可能避免HTML解析被阻塞，咱们须要人为干预浏览器的默认操作。我临时能想到的就是两个方面： 异步加载(defer、async、module)和预加载(preload、prefetch、dns-prefetch、preconnect 、prerender)。HTTP2里申请的多路复用。1.异步加载和预加载 应用异步加载是在script标签上减少对应字段。如下图所示： 依据上图，咱们能够晓得以下信息：1.默认状况下，HTML解析的过程中，如果遇到script脚本，就会进行页面的解析进行下载，当脚本都执行结束后，才会持续解析页面。

分治算法是一种解决问题的策略，将一个规模为N的问题合成为K个规模较小的子问题，这些子问题互相独立且与原问题性质雷同。而后，求解这些子问题，再合并这些子问题的解以失去原问题的解。例如，二分法就是一种简略的分治算法。 以下是一个简略的分治算法Java实现示例，该示例应用分治算法计算数组中的最大和最小元素。 public class ArrayMinMax { // 分治函数，返回数组中的最大和最小元素 public static int[] findMinMax(int[] array, int low, int high) { if (low == high) { return new int[]{array[low], array[high]}; } int mid = (low + high) / 2; int[] leftMinMax = findMinMax(array, low, mid); int[] rightMinMax = findMinMax(array, mid + 1, high); return new int[]{Math.min(leftMinMax[0], rightMinMax[0]), Math.max(leftMinMax[1], rightMinMax[1])}; } // 测试函数 public static void main(String[] args) { int[] array = {7, 2, 1, 8, 6, 3, 5, 4}; int[] minMax = findMinMax(array, 0, array.length - 1); System.out.println("Min: " + minMax[0] + ", Max: " + minMax[1]); } }在这个示例中，findMinMax函数是一个分治函数，它将数组分成两个子数组，而后递归地调用本身以找到每个子数组中的最小和最大元素。最初，该函数将两个子数组的最小和最大元素合并以失去整个数组的最小和最大元素。 ...

从 Spartacus 发动的 base site occ 申请的 response 获取以后 site 的数据： 从 CMS page 的 response 后果里失去的 properties： 应用 renderer 往 DOM 元素上增加 attribute： 在这个 DynamicAttributeService 里设置断点。 Angular 是一种风行的前端框架，它提供了一套弱小的工具和性能来帮忙开发者构建简单的单页面利用（SPA）。其中，@angular/core 是 Angular 外围模块之一，蕴含了许多重要的性能和类，其中之一就是 Renderer2。在这篇文章中，我将具体解释 Renderer2 的作用以及如何应用它，以便在开发Angular利用时更好地了解和利用这个要害工具。 Renderer2 的作用Renderer2 是 Angular 中的一个抽象类，它充当了开发者与 DOM（文档对象模型）之间的桥梁。它的次要作用是提供一种平安的形式来操作 DOM 元素，以确保利用的稳定性和可维护性。Renderer2 的存在有以下几个重要的起因： 跨平台兼容性： Angular 不仅能够在浏览器中运行，还能够在服务器端（如Node.js）和挪动设施上（如Ionic利用）运行。Renderer2 提供了一种形象层，使得开发者能够在不同的环境中应用雷同的代码来操控 DOM 元素。安全性： 间接操作 DOM 可能引发安全漏洞，例如跨站脚本攻打（XSS）。Renderer2 提供了一组办法，确保生成的 HTML 是平安的，从而避免潜在的平安问题。渲染器无关性： Renderer2 容许开发者将代码从特定的渲染器中形象进去。这使得利用能够在不同的渲染器中运行，例如浏览器渲染器和Web Worker渲染器。测试性： 应用 Renderer2 能够更轻松地编写单元测试，因为它将 DOM 操作抽象化，使得模仿 DOM 行为更加容易。性能优化： Renderer2 具备内置的性能优化机制，能够帮忙利用更高效地渲染和更新 DOM，从而进步用户体验。如何应用 Renderer2上面我将通过示例来具体阐明如何应用 Renderer2。 ...

笔者最近三年始终在 SAP 中国研究院负责 Angular 利用开发程序员的职位，负责的产品是 SAP 电商云 Spartacus UI 的开发。Spartacus 是 SAP 公司主导的一个开源我的项目，Github 我的项目地址：https://github.com/SAP/spartacus. 电商云 Storefront UI 界面如下，客户如果想在下面下单，须要点击 Sign In / Register 进行用户注册或者登录。 因为电商云是一款面向企业级用户的产品，不少客户在施行的过程中，抉择将 SAP Customer Data Cloud(简称 CDC) 接入电商云的用户登录认证模块。CDC 容许企业轻松施行繁多登录（Single Sign-On，SSO）以提供无缝的用户体验。用户只需一次登录即可拜访多个企业应用程序。 除了 SSO 之外，CDC 还反对通过社交媒体账户进行登录，如 Facebook、Google 或LinkedIn. 这简化了用户注册流程，进步了转化率。 问题形容和剖析客户反映网站登录时，很少可能一次登录胜利：应用 SSO 登录时，login 按钮往往要反复点好几次才可能实现失常的网站登录。 咱们接到这个 incident 之后，在 Chrome 开发者工具的 network 面板里察看，发现 login 按钮点击之后，发送的 HTTP Post 申请，收到了 400 谬误： 这个 HTTP Post 申请的作用，是通过从 SAP CDC 颁发的 UID 和 UIDSignature，发送到 SAP Commerce Cloud authorization server endpoint 去换取 access token. ...

笔者最近三年始终在 SAP 中国研究院从事 SAP Commerce Cloud (电商云)这款产品的前端开发。电商云 Storefront 基于开源我的项目 Spartacus，其 Github 代码仓库地址能够通过这个链接拜访。 我最近所在的团队始终在负责 Spartacus 服务器端渲染(SSR) 逻辑的开发，蕴含渲染引擎(Rendering Engine)和配套的单元测试代码开发工作。在开发过程中有不少待测试的代码须要借助 @angular/core/testing 这个开发包里的 fakeAsync 来实现单元测试，因而我也利用工作中的机会，深入研究了 fakeAsync 的应用。 从其名称 fakeAsync 不难判断，这个工具用于模仿异步操作和解决工夫相干的工作。从其所处的开发包 @angular/core/testing 也能联想到，这个工具的目标是让 Angular 开发人员更轻松地编写和执行测试用例。 fakeAsync容许咱们编写同步格调的测试代码，同时模仿异步操作，而无需理论期待异步工作实现。这在 Angular 利用的单元测试中十分有价值，因为咱们常常须要测试与异步操作相干的组件或服务。 什么是 fakeAsync？fakeAsync 是 Angular 测试框架的一部分，它提供了一种形式来模仿异步操作，使测试用例能够以同步的形式编写。通常，在 Angular 利用中，咱们会应用 async 和await 来解决异步操作，但在测试中，这可能会导致测试用例的代码变得复杂和难以了解。引入 fakeAsync 的指标是简化测试代码，使其更易于浏览和保护。 fakeAsync 的次要性能包含： 模仿定时器：开发人员能够应用 fakeAsync 来模仿 setTimeout、setInterval 等定时器函数，以便测试中的工夫期待不会导致理论期待。管制工夫：fakeAsync 能显式地推动工夫，以模仿异步操作的实现，而不是期待理论工夫过来。同步测试代码：能够在 fakeAsync 块内编写同步代码，而不须要应用 async 和 await 来解决异步操作。如何应用 fakeAsync？要应用 fakeAsync，首先须要导入它并包裹测试代码块。依照常规，咱们会在测试套件中应用 describe 代码块，将测试代码包裹在 fakeAsync 函数外部。而后，能够应用 tick 函数来推动工夫，模仿异步操作的实现。 以下是应用 fakeAsync 的个别步骤： ...

在 Angular 开发中，我的项目根目录下的 .angular 文件夹是 Angular CLI 工具的一部分，它蕴含了一些配置和缓存文件，用于进步开发效率和构建性能。.angular 文件夹的作用次要包含： 缓存构建信息：.angular 文件夹中蕴含了一些缓存文件，用于存储先前构建的信息，以减速后续的构建过程。这有助于缩小不必要的从新编译，进步构建性能。Angular CLI会在这个文件夹中存储一些构建相干的信息，例如模块依赖关系、构建缓存等。我的项目配置：.angular 文件夹中可能蕴含一些我的项目配置文件，用于存储我的项目的一些设置。这些配置文件能够包含我的项目的构建配置、测试配置、代码剖析配置等。这些配置文件通常以 JSON 格局存储，以便 Angular CLI 能够读取并利用它们。临时文件：在开发过程中，Angular CLI 可能会在 .angular 文件夹中生成一些临时文件，用于解决编译、打包、优化和代码剖析等工作。这些临时文件在构建实现后通常会被清理，但它们对于构建过程中的一些两头步骤是必要的。性能优化：.angular 文件夹中的一些信息能够用于进步构建性能。Angular CLI 能够利用缓存信息来检测文件是否已更改，从而跳过不必要的从新构建。这对于大型 Angular 我的项目来说尤其重要，因为从新构建整个我的项目可能会消耗大量工夫。运行时配置：某些我的项目特定的配置信息可能会存储在 .angular 文件夹中，以供我的项目的运行时应用。这些配置可能包含环境变量、打包选项、构建模式等。示例：假如您应用 Angular CLI 创立了一个名为 my-angular-app 的 Angular 我的项目，并在我的项目根目录下发现了 .angular 文件夹。让咱们看看这个文件夹可能蕴含的内容以及其作用： .angular 文件夹下的 cache 子文件夹：这个子文件夹可能蕴含构建缓存信息，以便 Angular CLI 能够依据先前的构建信息来优化构建过程。这有助于缩小不必要的从新编译工夫。.angular 文件夹下的 config 子文件夹：这个子文件夹可能蕴含我的项目的一些配置文件，例如 angular.json，其中定义了我的项目的构建和打包配置。这些配置文件能够在开发和构建过程中被 Angular CLI 读取和利用。.angular 文件夹下的 tmp 子文件夹：这个子文件夹可能蕴含一些临时文件，用于两头构建步骤。这些文件在构建实现后通常会被清理。.angular 文件夹下的其余可能文件：这里还可能蕴含其余一些与我的项目相干的信息，具体取决于我的项目的须要和配置。总之，.angular 文件夹是 Angular CLI 的一部分，用于治理我的项目的构建和开发过程中的一些配置、缓存和临时文件。它的存在有助于进步 Angular 我的项目的构建性能和开发效率，同时也提供了一种形式来存储和治理我的项目的一些配置信息。在失常状况下，您无需手动批改或删除 .angular 文件夹中的内容，因为 Angular CLI 会主动治理它。

Spartacus 里 SmartEditFeatureModule 这段实现代码： import { NgModule } from '@angular/core';import { CmsConfig, provideConfig } from '@spartacus/core';import { SmartEditRootModule, SMART_EDIT_FEATURE,} from '@spartacus/smartedit/root';@NgModule({ imports: [SmartEditRootModule], providers: [ provideConfig(<CmsConfig>{ featureModules: { [SMART_EDIT_FEATURE]: { module: () => import('@spartacus/smartedit').then((m) => m.SmartEditModule), }, }, }), ],})export class SmartEditFeatureModule {}其中动静导入了 @spartacus/smartedit: 在 tsconfig.json 文件里能找到 @spartacus/smartedit 的精确实现门路：feature-libs/smartedit/public_api 这个被动静加载的 module，蕴含的是 core module，而不是 root module. root module 在 SmartEditFeatureModule 里被动态导入。 另外说说 @spartacus/smartedit/core 里的 @ 符号。 ...

我明天在 Visual Studio Code 里依据关键字 @spartacus/smartedit 进行搜寻时，发现 Visual Studio Code 也把文件夹 .angular 里的文件一并搜寻了： C:\Code\SPA\6.0.x.angular\cache\15.2.4\babel-webpack\00e62bc8b359a06bfe0641d2c1403dc3443ea1190700c09d90a94ab550ad973f.json 实际上，在Visual Studio Code中，您能够配置搜寻性能，以指定疏忽某些文件夹，从而不会对这些文件夹中的内容进行搜寻。这对于大型项目或蕴含大量第三方库的我的项目十分有用，能够进步搜寻效率。上面我将具体介绍如何在Visual Studio Code中执行此操作，包含示例和设置。 步骤1：关上Visual Studio Code首先，确保您曾经关上了Visual Studio Code并加载了您的我的项目。 步骤2：创立.vscode文件夹要配置搜寻设置，您须要在我的项目根目录中创立一个名为.vscode的文件夹（如果尚未存在）。能够应用以下命令在终端中创立它： mkdir .vscode步骤3：创立settings.json文件在.vscode文件夹中，您须要创立一个名为settings.json的文件，这是用于配置Visual Studio Code的设置的文件。 touch .vscode/settings.json步骤4：配置搜寻排除规定当初，编辑settings.json文件以配置搜寻排除规定。您能够应用以下JSON格局的示例进行配置： { "search.exclude": { "**/node_modules": true, "**/build": true, "**/dist": true, "**/.git": true, "**/.vscode": true }}下面的示例中，咱们配置了五个排除规定： "**/node_modules": true - 这将排除我的项目中的node_modules文件夹，通常蕴含依赖库。"**/build": true - 这将排除build文件夹，如果您的我的项目应用构建工具生成构建文件，能够排除它。"**/dist": true - 这将排除dist文件夹，如果您的我的项目蕴含编译后的散发文件，能够排除它。"**/.git": true - 这将排除.git文件夹，以避免搜寻Git版本控制文件。"**/.vscode": true - 这将排除.vscode文件夹，以避免搜寻Visual Studio Code配置文件。依据您的我的项目构造，您能够增加或批改这些规定以满足本人的需要。这些规定应用Glob模式匹配文件夹，true示意要排除它们。 步骤5：保留设置一旦您实现了搜寻排除规定的配置，保留settings.json文件。 步骤6：应用搜寻性能当初，您能够在Visual Studio Code中应用搜寻性能，而不会搜寻被排除的文件夹中的内容。只有未在排除规定中指定的文件夹中的内容才会蕴含在搜寻后果中。 示例： ...

在Angular我的项目中，angular.json是一个十分重要的配置文件，用于定义和治理我的项目的各种设置和构建选项。其中，assets数组是angular.json中的一个要害配置项，用于指定须要在构建后蕴含在应用程序中的动态资源文件和文件夹。在本文中，我将解释什么是assets数组，并提供具体示例来阐明如何应用它来治理我的项目中的动态资源。 什么是assets数组？assets数组是Angular我的项目的angular.json配置文件中的一个属性，用于定义哪些动态资源文件和文件夹应该被蕴含在构建后的应用程序中。这些资源能够是图像、字体文件、JSON文件、款式文件、HTML文件等，它们通常不须要在构建过程中进行编译或转换，而是简略地复制到最终的输入目录中，以便在应用程序中应用。 assets数组的次要作用包含： 治理动态资源：通过assets数组，您能够通知Angular构建工具哪些动态资源须要被蕴含在最终的构建输入中，以便应用程序能够应用它们。放弃我的项目构造：它容许您放弃我的项目的文件构造，确保在构建后动态资源的地位与源代码中的地位保持一致。简化部署：通过将动态资源增加到assets数组，您能够确保它们在部署应用程序时主动复制到正确的地位，无需手动操作。进步性能：将动态资源增加到应用程序中，能够缩小资源加载工夫，从而进步应用程序的性能。assets数组的配置示例让咱们通过一个具体的示例来阐明如何配置assets数组以治理我的项目中的动态资源。假如您正在开发一个电子商务网站，您须要在应用程序中蕴含一些图像、字体文件和JSON数据文件。 步骤1：关上angular.json首先，关上您的Angular我的项目中的angular.json文件，该文件通常位于我的项目的根目录中。 步骤2：找到projects局部在angular.json中，我的项目配置通常位于一个名为projects的JSON对象下，其中蕴含了您的Angular我的项目的各种配置。在这个对象中，找到您的我的项目的配置，通常以我的项目的名称作为键。例如： { "projects": { "your-project-name": { // 我的项目配置将在这里 } }}步骤3：配置assets数组在我的项目配置中，您将找到一个名为architect的子对象，其中蕴含了各种构建和部署配置。在architect对象中，找到您的我的项目的构建配置，通常命名为build，例如： { "projects": { "your-project-name": { "architect": { "build": { // 构建配置将在这里 } } } }}在构建配置中，有一个名为options的子对象，其中蕴含了与构建相干的各种选项。在options对象中，您能够找到assets数组的配置，它用于指定要蕴含在构建输入中的动态资源文件和文件夹。 以下是一个示例assets数组的配置： { "projects": { "your-project-name": { "architect": { "build": { "options": { "assets": [ "src/assets", "src/favicon.ico", { "glob": "**/*", "input": "src/assets/images", "output": "assets/images" }, { "glob": "data.json", "input": "src/app/data", "output": "assets/data" } ], // 其余构建选项将在这里 } } } } }}上述示例中，assets数组蕴含了多个配置项，每个配置项都形容了一个动态资源的门路和输入目录。让咱们一一解释这些配置项： ...

Angular Schematics是Angular框架中一个弱小的工具，用于自动化和简化我的项目的创立、保护和扩大。它提供了一种可扩大的形式来生成、转换和治理Angular利用的代码和文件构造。在本文中，我将具体解释什么是Angular Schematics，并提供示例来阐明如何应用它。 什么是Angular Schematics？Angular Schematics是Angular CLI的一个要害组成部分，它容许开发人员通过编写可重用的生成器来自定义和加强Angular我的项目的创立和保护过程。这些生成器能够执行各种工作，包含创立新组件、服务、模块、路由配置，增加依赖，批改配置文件等等。Angular Schematics的核心思想是"生成、转换、挪动"，它能够利用于新建我的项目、更新我的项目、增加功能模块、进行重构等多个方面。 Angular Schematics的次要劣势包含： 自动化：它能够主动执行重复性的工作，如生成组件、服务等，从而缩小了手动操作的工作量。一致性：通过应用Schematics，能够确保我的项目中的各个局部都遵循雷同的最佳实际和我的项目标准。可维护性：Schematics能够使代码生成和我的项目批改的过程更具可维护性，因为它们将变更集中在可重用的生成器中。可扩展性：您能够轻松地编写自定义Schematics，以适应您的我的项目需要，甚至将其公布为开源库供其余开发人员应用。跨我的项目共享：Schematics生成器能够跨多个我的项目共享，使得开发团队可能在不同我的项目中重复使用雷同的生成器。Angular Schematics示例为了更好地了解Angular Schematics的工作原理，让咱们通过几个示例来演示它的用法。 示例 1：生成组件假如您正在开发一个电子商务利用，并且须要频繁创立产品列表组件。您能够应用Angular Schematics来生成这些组件，而不用手动创立每个文件。 首先，创立一个Schematics生成器，命名为product-list。ng generate schematic product-list在生成器中定义所需的文件和代码模板。例如，您能够定义要生成的组件文件、模板文件、款式文件和测试文件。在Angular我的项目中运行您的自定义Schematics生成器。ng generate product-list product-list-name这将主动生成一个名为product-list-name的组件，包含所有定义的文件和代码。 示例 2：批改配置文件假如您须要在Angular利用中增加一个全局配置文件，以存储利用的一些罕用设置。您能够应用Schematics来主动增加这个文件并更新Angular利用的配置。 创立一个Schematics生成器，命名为app-config。ng generate schematic app-config在生成器中定义要创立的配置文件和其内容。在Angular我的项目中运行您的自定义Schematics生成器。ng generate app-config这将主动生成一个全局配置文件，并将其增加到Angular利用的配置中。 示例 3：增加第三方库假如您想要将一个第三方库（例如ngx-bootstrap）集成到您的Angular我的项目中。您能够应用Schematics来主动执行这个集成过程。 创立一个Schematics生成器，命名为ngx-bootstrap-integration。ng generate schematic ngx-bootstrap-integration在生成器中定义集成步骤，例如装置依赖、导入模块、增加款式等。在Angular我的项目中运行您的自定义Schematics生成器。ng generate ngx-bootstrap-integration这将主动执行将ngx-bootstrap集成到您的Angular利用中所需的所有步骤。 示例 4：自定义Schematics如果您有特定的我的项目需要，您能够编写自定义Schematics生成器。例如，您能够创立一个生成特定模块构造的生成器，实用于您的公司或我的项目的规范。这样，您的团队能够在不同我的项目中应用雷同的构造，进步一致性和可维护性。 编写自定义Schematics生成器须要深刻理解Angular Schematics的API和工作原理，但它提供了极大的灵活性，能够满足各种我的项目需要。 总结Angular Schematics是Angular框架中的一个弱小工具，能够用于自动化和简化我的项目的创立、保护和扩大。它容许开发人员定义和应用可重用的生成器，从而进步开发效率、一致性和可维护性。通过示例，咱们演示了如何应用Schematics生成器来生成组件、批改配置文件、增加第三方库以及编写自定义生成器。这些示例突显了Angular Schematics的理论利用和后劲，以及它如何成为Angular开发过程中的弱小工具。如果您是Angular开发人员，倡议深入研究Angular Schematics，并思考如何在您的我的项目中利用它来进步工作效率。

前言本篇章讲述对于垃圾回收机制、内存透露以及堆栈溢出的相干常识，并理解如何通过工具定位排查内存透露状况，实现性能优化。面试答复1.垃圾回收机制：垃圾回收机制就是周期性地找出不再持续应用的变量，开释其内存。那么通常相干的问题就是内存透露问题，起因就是被占用的内存因为程序起因无奈开释，造成节约，如果内存透露过多的话，会使程序无奈申请到内存，呈现程序迟缓甚至解体的状况，那么通常的解决办法就是把这些隐患毁灭在开发阶段，比方防止意外的全局变量、及时敞开定时器、开释DOM援用、开释监听事件以及缩小闭包的应用。知识点1.垃圾回收机制垃圾回收机制即周期性地找出不再持续应用的变量，开释其内存。判断变量是否不再应用的条件是通过标签判断，标识无用变量的策略有以下的2种形式。 1.标记革除绝大多数浏览器采纳的垃圾收集机制均是通过标记革除的形式，它次要分为两个阶段，标记阶段和革除阶段，判断规范是看这个对象是否可到达。 标记阶段：垃圾收集器会从根对象（Window对象）登程，扫描所有能够涉及的对象，这就是所谓的可到达。革除阶段：在扫描的同时，根对象无奈涉及（不可到达）的对象，就是被认为不被须要的对象，就会被当成垃圾革除。 function changeName(){ var obj1={}; var obj2={}; obj1.target=obj2; obj2.target=obj1; obj1.age=15; console.log(obj1.target); console.log(obj2.target);}changeName();在函数执行结束之后，函数的申明周期完结，那么当初，从 Window对象 登程， obj1 和 obj2 都会被垃圾收集器标记为不可到达（因为办法曾经执行过，扫描就达到不了办法外部，天然也就扫描不到obj对象），这样子的状况下，相互援用的状况也会迎刃而解。 2.援用计数援用计数法，就是变量援用的次数。你能够认为它就是对以后变量所援用次数的形容。 var obj={name:'jack'}当给obj赋值的同时，其实就创立了一个指向该变量的援用，援用计数为1，在援用计数法的机制下，内存中的每一个值都会对应一个援用计数。 而当咱们给obj赋值为null时，这个变量就变成了一块没用的内存，那么此时，obj的援用计数将会变成 0，所有援用计数为0的变量都将会被垃圾收集器所回收，而后obj所占用的内存空间将会被开释。 2.内存透露内存透露（Memory Leak）是指程序中已动态分配的堆内存因为某种原因程序未开释或无奈开释，造成零碎内存的节约，内存泄露过多的话，就会导致前面的程序申请不到内存，因而内存泄露会导致外部内存溢出，导致程序运行速度减慢甚至零碎解体等严重后果。 1.意外的全局变量在JavaScript中并未严格定义对未声明变量的解决形式，即便在部分函数作用域中仍旧可能定义全局变量，这种意外的全局变量可能会存储大量数据，且因为其是可能通过全局对象例如window可能拜访到的，所以进行内存回收时不认为其是须要回收的内存而始终存在，只有在窗口敞开或者刷新页面时才可能被开释，造成意外的内存透露。 //未声明变量在全局环境创立，通过全局对象拜访function test() { a ='1111' console.log('test=====',window.a)}test() 解决形式应用严格模式（"use strict"），应用let const 来定义变量，严格模式下定义未声明变量在会抛出谬误；缩小创立全局变量，如果必须应用全局变量存储大量数据，确保应用完当前把他设置为null或者从新定义。 //必须要用的状况下,手动开释全局变量的内存window.a = nulldelete window.a2.被忘记的定时器和回调函数当不须要setInterval或者setTimeout时，定时器没有被clear，定时器的回调函数以及外部依赖的变量都不能被回收，造成内存透露。 <button>开启定时器</button><script> function fn1() { let largeObj = new Array(100000) setInterval(() => { let myObj = largeObj }, 1000) } document.querySelector('button').addEventListener('click', function () { fn1() })</script>这段代码是在点击按钮后执行fn1函数，fn1函数内创立了一个很大的数组对象largeObj，同时创立了一个setInterval定时器，定时器的回调函数只是简略的援用了一下变量largeObj，然而从 Chrome devTools 查看还是能看出内存透露。起因其实就是因为setInterval的回调函数内对变量largeObj有一个援用关系，而定时器始终未被革除，所以变量largeObj的内存也天然不会被开释。 验证形式：关上控制台，点击Performacne，点击圆点，每个一段时间点击按钮，如果存在内存透露的状况会呈现这种阶梯状 失常的则是单个，如下图。 解决形式设置敞开条件，应用clearInterval、clearTimeout开释 3.拆散的DOM节点假如你手动移除了某个dom节点，本应开释该dom节点所占用的内存，但却因为忽略导致某处代码仍对该被移除节点有援用，最终导致该节点所占内存无奈被开释，例如这种状况： <div id="root"> <div class="child">我是子元素</div> <button>移除</button></div><script> let btn = document.querySelector('button') let child = document.querySelector('.child') let root = document.querySelector('#root') btn.addEventListener('click', function() { root.removeChild(child) })</script>该代码所做的操作就是点击按钮后移除.child的节点，尽管点击后，该节点的确从dom被移除了，但全局变量child仍对该节点有援用，所以导致该节点的内存始终无奈被开释。 ...

"全排列"是数学中的一个概念，指的是从给定汇合中取出所有元素的所有排列形式。在这个问题中，咱们须要实现一个办法，该办法可能生成数字1、2和3的所有全排列。 以下是一个简略的Java实现： import java.util.*; public class Main { public static void main(String[] args) { int[] nums = {1, 2, 3}; List<List<Integer>> permute = permute(nums); for (List<Integer> integers : permute) { System.out.println(integers); } } public static List<List<Integer>> permute(int[] nums) { List<List<Integer>> output = new ArrayList<>(); ArrayList<Integer> nums_list = new ArrayList<Integer>(); for (int num : nums) { nums_list.add(num); } int n = nums.length; backtrack(n, nums_list, output, 0); return output; } public static void backtrack(int n, ArrayList<Integer> nums, List<List<Integer>> output, int first) { if (first == n) { output.add(new ArrayList<Integer>(nums)); } for (int i = first; i < n; i++) { Collections.swap(nums, first, i); backtrack(n, nums, output, first + 1); Collections.swap(nums, first, i); } } }这个程序首先创立一个蕴含1、2和3的数组，而后通过permute办法计算全排列。permute办法应用回溯算法来生成所有可能的排列，每次递归地替换数组中的两个元素，直到所有的元素都被替换过。最初，将生成的排列增加到后果列表中。 ...

零碎环境新终端装置和PowerShell 7首先天然是全新的 Windows 终端了，颜值能力同步在线，再也不必去折腾 Cmder 相似的货色了，间接通过windows的利用商店装置即可。 Nerd Fonts 字体装置 终端显示图形，须要装置字体，可从Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher 选抉择装置。 装置和配置 Oh My Posh Oh My Posh 应用如下命令装置： winget install oh-my-posh --source winget在 Themes | Oh My Posh 中抉择你喜爱的主题款式，以 grandpa-style 为例 # 关上 pwsh 的配置文件notepad $PROFILE# 在文件中增加以下内容oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\grandpa-style.omp.json" | Invoke-Expression选用其余主题则自行替换下面代码中的 grandpa-style 即可。 装置并启用 posh-git # 装置PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force# 关上 pwsh 的配置文件notepad $PROFILE# 在文件中增加以下内容Import-Module posh-gitWSL 装置参考官网文档装置 WSL | Microsoft Learn 逐渐操作即可。 ...

Vue2装置JSX反对有时候，咱们应用渲染函数（render function）来形象组件，而渲染函数应用Vue的h函数来编写Dom元素绝对template语法差异较大，体验不佳，这个时候就派 JSX 上场了。然而在Vue3中默认是带了JSX反对的，而在 Vue2 中应用 JSX，须要装置并应用 Babel 插件： @vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props装置脚本npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props配置.babelrc文件module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx', { 'injectH': false }] ]}template和JSX的应用差别针对方向 变量绑定变量绑定由data中的数据由 v-model="value"变为 v-model={this.value} template语法 <el-input v-model="value" />JSX语法 <el-input v-model={this.value} />事件绑定变量绑定由data中的数据由 @input="inputChange"或v-on:input="inputChange"变为 onInput={this.inputChange}或on-input={this.inputChange} template语法 <el-input v-model="value" @input="inputChange" v-on:click="inputClick" />JSX语法 <el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} />条件渲染条件渲染由 v-if变为插入JSX 语句段 template语法 <el-input v-model="value" v-if="show" @input="inputChange" v-on:click="inputClick" />JSX语法 { if(this.show){ return <el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} /> }}列表渲染变量绑定由data中的数据由 v-for变为插入JSX 语句段 template语法 <el-select v-model={this.form.formula} clearable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"> </el-option></el-select>JSX语法 ...

大家好，我是大冶同学。 最近 AIGC 是一个很火的畛域，正好我之前意识的一个敌人 Alien 开始了全职在 AIGC 畛域的守业，接下来咱们来看看他到底在做些什么。 (以下内容为 Alien 讲述) 大家好，我是Alien。明天给大家介绍下咱们公司的新敌人 —— AI Cube！ AI Cube 的初衷是借助 AI 创作精彩艺术，玩转人工智能新境界，体验人工智能带来的有限可能，咱们的网站是： 网址十分好记：https://cube.waixingyun.cn/ 给大家介绍下这个网站。这个平台是咱们独立研发的AI助手，其设计理念是 “简洁明了，应用便捷”，旨在让所有的人都能轻松地与AI进行交换，利用AI来晋升学习和工作的效率，让大家深深感触到AI的弱小实力！ 你能够用AI Cube来做什么呢？ 目前总共有 4 大业务， 15个场景！肯定要看到最初，有很弱小的性能哦~ AI · 智能问答 基于GPT-3.5 Trubo引擎打造的智能问答，是目前世界上最弱小的自然语言解决模型。它能够胜任各种语言工作，如对话生成、文章创作、翻译等，同时它还可能自我学习和优化，一直晋升本人的能力，曾经成为生存和工作中不可短少的工具。咱们的智能问答，有如下特点： 实时问答响应内置丰盛场景历史音讯漫游内置平安审核无频率限度 在问答首页，咱们还提供了丰盛的内置实用便捷的数十种场景抉择，无效进步生存、工作效率。 你能够和【IT专家】交换，让他帮你学编程、改 Bug，转移头秃 ！ 你能够和【提醒词生成器】 交换，他会依据你的提醒，丰盛 Midjourney 和 Stable Diffusion 的提醒词语，疾速把握作图魔法。 你甚至还能和【音乐作词人】交换，周杰伦的歌十分经典，很适宜老手改编： AI · 图片创作 图片创作性能将艺术与科技完满联合，打造了一套涵盖文生图、图生文、照片时光机、图片魔法师、AI装修、AI换装、老照片修复、图片加强等多种场景的智能图像处理工具。无论是将文字转化为活泼的图像，还是通过图像来引发文字的灵感，都能轻松实现。无论您是设计师、摄影师还是普通用户，都能在这款AI作图性能中找到满足您需要的工具。 文生图在文生图的性能中，咱们提供了七种不同的格调供您抉择。无论是通用大模型的智能生成，还是漫画风、机械风、漫画蜡笔风的艺术诠释，都能将您的文字转化为独特的视觉作品。此外，宝可梦风将带您重返童年，窈窕风能展示细腻的女性美，超现实风则能为您描述梦幻的视觉世界。这些格调丰盛多样，能满足您多样化的创作需要。 通用大模型 漫画风 照片时光机能够让您领略到历史的韵味，图片魔法师可能让您的照片焕发新生。AI装修和AI换装为您提供了全新的个性化设计体验，而老照片修复性能能够让过来的记忆重现荣耀。 机械风 漫画-蜡笔风 宝可梦风 窈窕风 超现实风 图生文图生文是一种独特的场景性能，能将您上传的图片转化为精密的文字描述。无论是风光、人物、物品，还是形象的艺术作品，这个性能都能通过深度学习技术，将图片的元素、色调、布局和情感，精准地转化为文字。这不仅能帮忙您了解和解读图片，也为创作提供了新的灵感起源。这种技术的利用场景宽泛，实用于艺术、教育、媒体等多个畛域。 照片时光机照片时光机是一项翻新的性能，能够让您摸索工夫的魅力。只须要上传本人的照片，这个性能就能生成从年老到老的间断图像，好像关上了时光的通道，让您提前领略到本人的老去过程。这不仅是一项技术展现，也是一次对人生、岁月和工夫的深度思考。无论是为了满足好奇心，还是寻找生存的乐趣，照片时光机都能为您提供独特的体验。 图片魔法师图片魔法师是一种能将事实照片漫画化的神奇性能。只有上传您的照片，AI就能将其转化为独特的漫画作品，使得照片中的人物、风物都如同漫画中的元素一样，具备显明的特色和活泼的线条。这项性能不仅让您的照片充斥艺术感，也让您能够以全新的形式观赏和分享您的生存。无论是本人的生活照，还是游览照片，都能够通过图片魔法师取得不一样的视觉体验。 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 1.时光轴性能：源代码掌控新纬度谁不晓得Git和各种源代码管制工具的威力呢？这些工具让咱们可能轻松地追踪文件变动、回退到过来的版本。VS Code的工夫线视图主动刷新，展现与以后文件关联的重要流动，包含Git提交、文件保留和测试运行等。 开展此视图以查看与以后文件相干的事件快照列表。这里包含文件保留以及文件被暂存的Git提交。 将鼠标悬停在快照我的项目上，即可查看 VS Code 创立快照的日期和工夫。 抉择一个快照我的项目，查看差别视图，显示快照工夫的文件与以后文件之间的更改。 2. 主动存储：辞别Ctrl + S的日子不用再依赖Ctrl + S快捷键，主动保留性能在你编辑时实时保留更改。这样不仅节俭了工夫，也确保你始终应用的是最新版本的文件。 尽管它并不完满，但你须要衡量其中的利弊——这些利弊在这里失去了全面的笼罩。 应用 File > Auto Save 轻松启用此性能： 3. 命令面板：一站式操作核心VS Code中简直所有工作都能够通过“命令”来执行。这些命令涵盖文件操作、导航、编辑以及终端工作等，都是通过精心设计的。 命令让咱们在编辑器中实现工作，它们包含与文件相干的命令、导航命令、编辑命令和终端命令，每个命令都通过最佳设计，以加强你的编辑体验的不同方面。 所以，通过命令面板，咱们只需搜寻命令并抉择执行相干操作。要关上命令面板，请应用以下键盘快捷键： Windows/Linux: Ctrl + Shift + PMac: Shift + Command+ PMac：Shift + Command + P 4.文件快速访问：不再依赖鼠标应用Ctrl + P快捷键能够疾速搜寻并关上我的项目中的指定文件，而Ctrl + Tab则让你轻松在已关上的文件之间切换。 按住 Ctrl 并按下 Tab 以在编辑器实例中循环浏览以后关上的文件列表 ...

引言Hello大家周末好，最近有小伙伴私信我，想从其余行业进去转到游戏行业，因为感觉游戏行业很吃香，想问有什么倡议。在这笔者想说一句，并没有什么行业天生就优于某某某行业，只有你喜爱在什么行业，你能在什么行业发明出你喜爱的问题。上面笔者简略讲一下，在游戏行业中，游戏的开发流程，看看到底有多简单，能不能胜利把你吓退。 1.概念和布局阶段概念化：确定游戏的外围概念、主题和玩法。市场钻研：剖析指标受众和市场趋势，确定游戏的定位和竞争劣势。制订游戏设计文档：编写具体的游戏设计文档，包含游戏规则、关卡设计、角色和故事情节等。在游戏公司，这个阶段能够称之为立项阶段，一个游戏的诞生往往是有以下几种状况： 第一呢是因为市场需求，目前游戏市场上哪个游戏比拟火爆热门，咱们就连忙跟上节奏瓜分市场。或者说哪个类型的游戏冷门，市场空缺，那么咱们就去填补这个空洞。因而我的项目应市场而生。 第二则是资本携带者的想法，往往人一旦有了资本就想要持续投资倒退，他们认为这么一款游戏将会有市场或者这么一款游戏很好玩，于是我的项目应资本而生。 第三就是游戏设计师的执念，或者很多小伙伴都和笔者一样，从小就有就酷爱游戏，从小就构思了开发属于本人的游戏。还有的就是认为本人的游戏十分有创意，可能火起来。于是我的项目应幻想而生。 2.预生产阶段团队组建：招募或聘用开发团队，包含程序员、美术设计师、音乐制作人等。技术抉择：抉择适合的游戏引擎和开发工具。制作原型：创立游戏原型，用于测试外围玩法和概念的可行性。这个阶段往往是招集团队筹备战斗的阶段。个别有几种状况： 第一个呢是领头的带着投资过去了，他想打造这么一款游戏，须要各路大神多向奔赴，如果他是策动，往往他会拉一些技术大牛、还有美术大咖，就开始画饼聊人生。 第二就是领头的并没有钱，怀揣着守业的幻想，寻找气味相投的游戏策动、游戏技术、游戏美术一起去开拓幻想之路，往往大家都是以副业的模式进行，毕竟为爱发电不能养家糊口。 第三呢就是外包团队，外包团队呢比拟成熟，可能疾速上手游戏开发，并且能在规定工夫内交付验收。 团队组建胜利之后，团队开始探讨，这样的游戏做进去是否好玩？ 更残暴的探讨是，咱们想要做的这款游戏到底能不能实现？ 3.生产阶段程序开发：编写游戏的代码，包含游戏引擎、物理引擎、AI等。美术制作：设计游戏的角色、场景、动画和界面。音效制作：创立游戏的音乐和音效。关卡设计：制作游戏的各个关卡或级别。游戏测试：进行品质管制和bug修复。在确定了游戏将会很好玩、而且做进去大海捞针之后， 这个阶段往往就开始了游戏开发团队无尽地赶工，每周或者每两周一个版本，每逢封版早晨，团队每个成员都"奋笔疾书"，夜不能寐，只为堆砌好一个又一个小版本，成就最终的上线版本。数据就是测验这个阶段的唯一标准。 4.后期制作阶段游戏优化：进步游戏性能、图形和音效品质。本地化：将游戏翻译成不同语言，并适应不同地区的文化。营销和宣传：制订游戏的营销策略，包含预告片、社交媒体宣传等。发行策略：决定游戏的公布平台和形式。往往这个阶段呢，要么就是资金不足，游戏不得不马上上线测试看成果，成果不好，游戏完结。成果还行，抓紧时间调整优化，有bug的批改bug，优化游戏性能，缩小游戏闪退、内存优化等等。还有就是要换一身漂漂亮亮的UI。还有就是如果要上线海内，须要翻译以及做本地化需要。 通常这个阶段是游戏上线前的噩梦，修不完的bug、调不完的UI、以及改不完的性能。甚至在上线测试前一晚还在通宵解决问题。为的就是一个长期抱佛脚，为的就是争取小小的细节失去大大的问题。 5.公布和维护阶段公布游戏：将游戏公布到指标平台，如PC、游戏机或挪动设施。反馈和改良：依据玩家反馈进行游戏更新和改良。保护：解决游戏中的bug、安全漏洞和技术问题。扩大和下载内容：开发和公布额定的游戏内容和扩大包。游戏挺过了后面的阶段，终于要步入正轨。游戏数据还行，不至于夭折，就能够开始踊跃筹备进入各个渠道发行、买量发行等等。 胜利上线后，也是游戏的一个重要挑战，上线后用户量剧增，许多bug和安全漏洞还有性能问题全副裸露进去，开发会在一直开发新性能和一直批改bug的状态中切换，踊跃修复各种报错和bug，填补服务器被刷资源破绽，优化服务器性能瓶颈，优化手机卡顿发热问题。 6.经营阶段社区治理：与游戏社区互动，回应问题和倡议。剖析和数据收集：监督游戏数据，理解玩家行为并制订策略。继续更新：定期公布新内容、修复破绽，并保护游戏的长期可玩性。到了游戏中后期，游戏开始大规模推广，咱们能够整顿出游戏的各项数据，比如说沉闷、留存、付费等等。这个阶段能够针对性的优化这些数据，往往采取的办法是一直减少游戏玩法、游戏零碎。目标就是为了拉一拉玩家的沉闷和留存。大批量地开发游戏内置付费流动、游戏内付费痛点，目标在于将游戏的付费数据再拉高一把。 总结游戏开发流程有多简单，小伙伴通过下面的介绍能够清晰地看到。每一个阶段都有可能是游戏我的项目夭折。所以说没有一个行业是简略的，游戏开发也不例外。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 游戏我的项目真的很容易夭折，每一个能胜利上线的游戏，都不容易。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

一、UIAbility概述UIAbility是一种蕴含用户界面的利用组件，次要用于和用户进行交互。UIAbility也是系统调度的单元，为利用提供窗口在其中绘制界面。每一个UIAbility实例，都对应于一个最近工作列表中的工作。一个利用能够有一个UIAbility，也能够有多个UIAbility，如下图所示。 例如浏览器利用能够通过一个UIAbility联合多页面的模式让用户进行的搜寻和浏览内容；而聊天利用减少一个“外卖性能”的场景，则能够将聊天利用中“外卖性能”的内容独立为一个UIAbility，当用户关上聊天利用的“外卖性能”，查看外卖订单详情，此时有新的聊天音讯，即能够通过最近工作列表切换回到聊天窗口持续进行聊天对话。 一个UIAbility能够对应于多个页面，倡议将一个独立的功能模块放到一个UIAbility中，以多页面的模式出现。例如新闻利用在浏览内容的时候，能够进行多页面的跳转应用。 二、UIAbility页面跳转和数据传递UIAbility的数据传递包含有UIAbility内页面的跳转和数据传递、UIAbility间的数据跳转和数据传递，本章节次要解说UIAbility内页面的跳转和数据传递。 在一个利用蕴含一个UIAbility的场景下，能够通过新建多个页面来实现和丰盛利用的内容。这会波及到UIAbility内页面的新建以及UIAbility内页面的跳转和数据传递。 关上DevEco Studio，抉择一个Empty Ability工程模板，创立一个工程，例如命名为MyApplication。 在src/main/ets/entryability目录下，初始会生成一个UIAbility文件EntryAbility.ts。能够在EntryAbility.ts文件中依据业务须要实现UIAbility的生命周期回调内容。在src/main/ets/pages目录下，会生成一个Index页面。这也是基于UIAbility实现的利用的入口页面。能够在Index页面中依据业务须要实现入口页面的性能。在src/main/ets/pages目录下，右键，新建一个Second页面，用于实现页面间的跳转和数据传递。 为了实现页面的跳转和数据传递，须要新建一个页面。在原有Index页面的根底上，新建一个页面，例如命名为Second.ets。 页面间的导航能够通过页面路由router模块来实现。页面路由模块依据页面url找到指标页面，从而实现跳转。通过页面路由模块，能够应用不同的url拜访不同的页面，包含跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换以后页面、返回上一页面或指定的页面等。 2.1 页面跳转和参数传递router模块的页面跳转的几种形式，依据须要抉择一种形式跳转即可。 形式一实用于API 9及以上，router.pushUrl()办法新增了mode参数，能够将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。 在单实例模式下，如果指标页面的url在页面栈中曾经存在同url页面，离栈顶最近同url页面会被挪动到栈顶，挪动后的页面为新建页，原来的页面依然存在栈中，页面栈的元素数量不变；如果指标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量会加1。 router.pushUrl({ url: 'pages/Second', params: { src: 'Index页面传来的数据', }}, router.RouterMode.Single)形式二实用于API 9及以上，router.replaceUrl()办法新增了mode参数，能够将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。 在单实例模式下，如果指标页面的url在页面栈中曾经存在同url页面，离栈顶最近同url页面会被挪动到栈顶，替换以后页面，并销毁被替换的以后页面，挪动后的页面为新建页，页面栈的元素数量会减1；如果指标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。 router.replaceUrl({ url: 'pages/Second', params: { src: 'Index页面传来的数据', }}, router.RouterMode.Single)接下来，咱们看一下如何在Second页面中接管自定义参数。很简略，通过调用router.getParams()办法即可获取Index页面传递过去的自定义参数。 import router from '@ohos.router';@Entry@Componentstruct Second { @State src: string = router.getParams()?.['src']; // 页面刷新展现 ...}运行下面的代码，成果示意如下图所示。 除此之外，咱们常常还会遇到一个场景，在Second页面中，实现了一些性能操作之后，心愿能返回到Index页面，那咱们要如何实现呢？ 在Second页面中，能够通过调用router.back()办法实现返回到上一个页面，或者在调用router.back()办法时减少可选的options参数（减少url参数）返回到指定页面。 router.back();router.back({ url: 'pages/Index' });成果示意如下图所示。在Second页面中，点击“Back”后，即可从Second页面返回到Index页面。 当然，页面返回能够依据业务须要减少一个询问对话框。即在调用router.back()办法之前，能够先调用router.enableBackPageAlert()办法开启页面返回询问对话框性能。 router.enableBackPageAlert({ message: 'Message Info'});router.back();在Second页面中，调用router.back()办法返回上一个页面或者返回指定页面时，依据须要持续减少自定义参数，例如在返回时减少一个自定义参数src。 router.back({ url: 'pages/Index', params: { src: 'Second页面传来的数据', }})接着，从Second页面返回到Index页面。在Index页面通过调用router.getParams()办法，获取Second页面传递过去的自定义参数。同时，能够放在业务须要的地位进行参数解析。示例代码在Index页面中的onPageShow()生命周期回调中进行参数的解析。 ...

导语：在日常 APP 开发过程中，常常要进行文件的保留、读取列表以及查看和删除文件等操作，接下来就看一下具体的办法。目录原理剖析办法实现实战演练案例展现原理剖析次要是以下 API。 uni.saveFile：保留文件到本地缓存列表；uni.getSavedFileList：获取保留文件列表；uni.getSavedFileInfo：获取文件详细信息；uni.removeSavedFile：移除保留的文件；uni.openDocument：打开文档；以下办法存于根目录下的scripts文件夹下的http.js文件中。 办法实现接下来一一阐明如何实现数据申请、文件下载以及文件的上传的办法封装。 保留文件保留文件这里应用条件编译，别离对 h5、微信小程序、APP 进行了对应办法的封装。 总体办法这里次要是进行参数的解决，包含默认参数，传入参数，合并参数。 // 保留图片async function saveFile(options) { let isHttp = options.url.indexOf("http") > -1; let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`; let defultOptions = { url, name: options.name || utils.uuid(), extName: options.extName || utils.fileExt(url), filePath: options.filePath, }; let params = { ...options, ...defultOptions }; console.log("保留文件参数：", params); // h5代码 // 微信小程序代码 // APP 代码}h5 保留文件这个次要是应用fetchAPI 进行文件下载，而后应用a标签进行点击下载。 // #ifdef H5fetch(url, { mode: "cors",}) .then(async (res) => { const e = await res.blob(); return e; }) .then((blob) => { const fileElem = document.createElement("a"); let fileUrl = URL.createObjectURL(blob); fileElem.style.display = "none"; fileElem.href = fileUrl; fileElem.download = `${params.name}.${params.extName}`; document.body.appendChild(fileElem); fileElem.click(); setTimeout(() => { URL.revokeObjectURL(fileUrl); fileElem.remove(); }, 1000); });// #endif微信小程序保留文件这个次要是应用微信小程序的wx.getFileSystemManagerAPI 来获取文件管理器接口，而后进行下载保留文件。 ...

笔者始终在 SAP 中国研究院从事 Commerce Cloud 这款 Angular 利用的开发，最近工作中修复了一个 bug. 在 Spartacus UI 上点击 Create 按钮之后： 保护 User 的明细数据，而后点击 Save 按钮： 点击之后，咱们冀望的后果是收到一条 用户胜利创立的提醒音讯，并且页面主动导航回到点击 Create 按钮的页面。但 bug 修复之前，并没有胜利创立的提醒音讯。 咱们在 Github 这个 PR里修复了该问题。在解决方案里应用到了 Rxjs 的 Subject，我也顺带理解了 Subject 和 BehaviorSubject 的区别，本文将我的学习记录如下。 在 Angular 开发中，RxJS 是一个十分重要的库，它提供了弱小的响应式编程工具，用于解决异步操作和数据流。Subject 是 RxJS 中的一个要害工具，它是一种非凡类型的 Observable，同时也能够被用于触发和监听事件，是实现事件总线的一种形式。BehaviorSubject 则是 Subject 的一个变种，它在 Subject 的根底上减少了初始值和记忆性能。 Subject 的特点和用法： Subject 是一个多播的 Observable，它既是观察者也是可察看对象。这意味着咱们能够通过 subscribe 办法订阅它，也能够通过 next 办法向它发送新值。Subject 会将这些值播送给所有订阅者。它通常用于实现事件总线、播送事件、多播数据流等场景。不过须要留神，Subject 在新的订阅者订阅时，不会向其发送之前发送的值。 BehaviorSubject 的特点和用法： BehaviorSubject 继承自 Subject，在 Subject 的根底上减少了初始值和记忆性能。这意味着在 BehaviorSubject 被订阅时，它会发送其以后的值给订阅者。而当新的值通过 next 办法发送时，它会播送给所有订阅者，也会被记忆为新的以后值，以供新的订阅者应用。因而，BehaviorSubject 实用于须要初始值和对新订阅者播送最新值的状况。 ...

更灵便的 serverless framework 配置文件前言再通过前置教程的部署之后，不晓得你有没有留神这样一个问题，就是咱们部署的函数名，以及 API网关 的 endpoint，它们的名称和门路都带一个 dev? 这个就是 stage 导致的了，咱们执行 sls deploy 部署的时候，因为没有指定 --stage 的参数，导致它默认就是 dev，所以咱们之前部署的函数名称，网关外面都带它。 那么它有什么作用呢？实际上这个值就是用来给你的函数，以及对应的服务去辨别阶段/环境的。 比方咱们一个提供 web 服务的函数，咱们本人人为划分出三个环境： dev 用于给开发者自行测试sit 用于进行集成测试prod 生产环境不同的环境，它们各自的 API网关 调配的 endpoint 也是不同的。 如果你有一个域名，你就能够把域名多配置一些主或多级域名，把它们的 CNAME 解析到指定的 API网关 地址来应用。当然你仅仅在域名控制台，间接解析是不失效的，因为API网关有个双重验证，你必须进入API网关的 自定义域名界面，创立自定义域名，并绑定 ACM 证书，审核通过后解析能力失效。 什么是 ACM证书？ACM残缺名称为Amazon Certificate Manager，点击这里查看更多 释怀，ACM 证书 申请和颁发非常简单，它的性能和申请流程和咱们申请收费的 SSL/TLS 证书是统一的，都是咱们域名多解析一个 CNAME的事件。 这时候咱们天然能够利用 cli option 去设置: "scripts": { "deploy:dev": "sls deploy", "deploy:sit": "sls deploy -s sit", "deploy:prod": "sls deploy -s prod"},然而随着我的项目的日益简单，你会发现应用 CLI 命令，一直的去减少配置项，这种形式既繁琐，又效率低下，有什么形式能够用一个变量去管制大量的配置呢？ <!-- 一般的 nodejs 我的项目咱们通常会想到 dotenv，侥幸的是，serverless framework 同时也给咱们提供了更多的抉择。 -->在serverless framework里，通常咱们能够应用 动静变量 的形式去解决这个问题。 ...

咱们是袋鼠云数栈 UED 团队，致力于打造优良的一站式数据中台产品。咱们始终保持工匠精力，摸索前端路线，为社区积攒并流传教训价值。 本文作者：琉易 liuxianyu.cn 在日常工作中，较少的能遇到一次性往页面中插入大量数据的场景，数栈的离线开发（以下简称离线）产品中，就有相似的场景。本文将分享一个理论场景中的前端开发思路，实现高效的数据渲染，晋升页面性能和用户体验。 一、场景介绍 在离线的数据开发模块，用户能够在 sql 编辑器中编写 sql，再通过 整段运行/分段运行 来执行 sql。在点击 整段运行 后，运行胜利日志打印后到展现后果的过程中，有一段时间页面很卡顿，次要体现为编辑器编写卡顿。 二、性能问题 咱们是在解决 sql 最大运行行数 问题时，发现了上述须要进行性能优化的场景。先来梳理下以后代码的设计逻辑： 前端将选中的 sql 传递给服务端，服务端返回一个调度运行的 jobId；前端接着以该 jobId 轮询服务端，查问工作的执行状态；当轮询到工作已实现时，选中的 sql 中如果有查问语句，服务端则会按 select 语句的程序返回一个 sqlId 的数组汇合；前端基于 n 个 sqlId 的汇合，并发 n 个 selectData 的申请；所有的 selectData 申请实现后渲染数据； 为了保障后果最终的展现程序和 select 语句程序统一，咱们为单纯的 sqlIdList 循环办法加上了 Promise.allsettled 的办法，使得 n 个 selectData 的申请程序和 select 语句程序统一。 由上述逻辑能够看出，问题可能呈现在如果选中的 sql 中有大量 select 语句的话，会在「整段运行」实现后大批量申请 selectData 接口，再期待所有 selectData 申请实现后，集中进行渲染。此时，就会呈现一次性往页面中插入大量数据的场景。那么，咱们怎么解决上述问题呢？ 三、解决思路 能够看出，上述逻辑次要有两个问题： ...

一个人接受孤单的潜质有多大，他的潜质就有多大大家好，我是柒八九。 前言可能最近前端的货色分享的多，给大家一种错觉，咱们的文章只是偏差前端的。而相熟咱们文章的同学都晓得，咱们的武器库，其实不仅仅只有前端，咱们还有Ruse，并且还有AI。 原本想以普通人的身份和大家意识，然而我摊牌了，我不装了。我是一个全能小超人(手动狗头)。 而咱们明天就来讲讲Rust的历史、它通常用于什么、为什么开发者如此青睐它,并且附带一下学习材料和网站，让咱们对它有一个更深的理解。 间断第八年，Rust在Stack Overflow的年度开发者考察中再次成为最受欢迎的编程语言。而且，超过80%的开发者示意他们明年依然想持续应用这种语言，这让人不禁想晓得一个不到20出头的后起之秀，如何在宦海沉浮的技术界杀出了一条血路，并且大有睥睨天下的即视感。 从下面的统计中，无论在学习和利用志愿上，Rust都遥遥领先。while(true){printn!("遥遥领先");} 你能所学到的知识点前置知识点Rust简史为什么Rust如此非凡Rust 善于的畛域Rust 大受欢迎的起因前端为什么要理解Rust如何学习Rust好了，天不早了，干点闲事哇。 1. 前置知识点前置知识点，只是做一个概念的介绍，不会做深度解释。因为，这些概念在上面文章中会有呈现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到后面来。如果大家对这些概念相熟，能够间接疏忽语言类型分类俗话说，物以类聚，人以群分，人是一种社会动物，语言也逃脱不了，世俗的枷锁，它也有属于本人的分类。 咱们别离从编程范式/动静动态类型/强弱类型别离形容下它们的特点和常见的开发语言。 分类形式开发语言特点和阐明按编程范式分类 命令式语言（Imperative Languages）C, C++通过指令和状态扭转形容计算过程，应用变量、循环和条件语句。函数式语言（Functional Languages）Haskell, Lisp强调函数作为根本构建块，防止状态和可变性，通常采纳不可变数据。面向对象语言（Object-Oriented Languages）Java, C#将数据和操作数据的办法封装在对象中，强调对象之间的交互。申明式语言（Declarative Languages）SQL形容问题的解决方案，而不是指定如何实现它们。按动静动态类型分类 动静类型语言（Dynamic Typing）Python, JavaScript在运行时进行类型查看，变量类型能够在程序执行过程中扭转。动态类型语言（Static Typing）C, C++, Java在编译时进行类型查看，变量类型在编写代码时须要明确定义。按强弱类型分类 强类型语言（Strongly Typed）C++, Java有严格的隐式类型转换规定，不容许不平安的类型操作，进步代码安全性。弱类型语言（Weakly Typed）JavaScript,Perl, PHP容许更灵便的类型转换和操作，但可能导致潜在的类型谬误，开发时需谨慎。Rust能够依据下面提到的分类形式进行如下分类： 按编程范式分类： 命令式语言（Imperative Languages）： Rust能够被归类为命令式语言，因为它反对可变变量和通过指令来改变程序状态。函数式语言（Functional Languages）： Rust也具备一些函数式编程个性，如闭包和高阶函数，但它通常被视为一种多范式（multi-paradigm）语言，因为它容许开发者在不同的编程范式之间切换。按动静动态类型分类： 动态类型语言（Static Typing）： Rust是一种动态类型语言，类型查看在编译时进行，变量的类型必须在编写代码时明确定义，这有助于进步代码的安全性和性能。按强弱类型分类： 强类型语言（Strongly Typed）： Rust是一种强类型语言，它有严格的类型零碎，不容许不平安的类型操作，以确保内存平安和类型平安。综上所述，Rust是一种动态类型的、强类型的、多范式编程语言，可用于通用编程以及具备零碎级性能和内存安全性要求的各种应用领域。这使得它成为一种弱小的编程语言，尤其实用于零碎级编程和平安要害利用的开发。2. Rust简史fn main(){ printn!("前端柒八九");}咱们明天的主人公（Rust）最后旨在作为C和C++的更平安替代品，Rust是一种零碎编程语言，因其重视安全性、性能和生产力取得了开发者的青眼。Rust是一种动态类型语言，得益于变量和表达式的类型在编译时查看，这有助于加强内存安全性和谬误检测，从而产生更牢靠的构建。 2006年，软件开发者Graydon Hoare在Mozilla工作期间，开始了Rust作为一个集体我的项目。依据他在麻省理工技术评论的一次采访，Rust的灵感来自于Hoare公寓楼里一个坏掉的电梯。电梯操作系统的软件解体了，Hoare意识到这类问题通常源于程序如何应用内存的问题。 通常，这些类型设施的软件是用C或C++编写的，但这些语言须要大量的内存治理，可能导致系统解体的谬误。因而，Hoare着手钻研如何创立一种既紧凑又无内存谬误的编程语言。 起初，他向一位经理展现了这个我的项目，这导致了Mozilla在2009年赞助该我的项目，作为将该语言纳入实验性浏览器引擎开发的长期致力的一部分。2010年，Mozilla Research正式发表了Rust我的项目，并将源代码作为一个开源我的项目向公众公布。通过数年的开发，Rust达到了稳固和成熟的状态，2015年5月公布了Rust 1.0版本。这一里程碑标记着Rust已筹备好投入生产，并为开发者提供了一个构建根底。 据Hoare说，Rust被命名为一种特地倔强(robust)的真菌。自1.0版本公布以来，Rust在受欢迎水平和采用率方面迅速增长，顶级应用程序（如Microsoft Windows）利用Rust重写外围库。除了技术巨头之外，Rust还领有一个充满活力的开发者社区，被称为Rustaceans，致力于使Rust的体验变得踊跃而合作。 对于国内的用户来讲,Rust社区也是一个不错的抉择。 并且，也是一个学习的不二之选。 依据SlashData最近的一项考察，2023年寰球大概有280万名Rust开发者，这一数字在过来两年里简直翻了三倍。有着泛滥踊跃的论坛、文档以及反对各种技能程度的开发者的社区，或者难能可贵，Rust始终在最受欢迎的编程语言榜单上居首。 ...

这是《程序员职场工具库》系列文章，在浏览本文之前，倡议先浏览 《程序员职场工具库》 工具导论。前言如果做个跟 PPT 相干的考察问卷，预计大部分的程序员都会避之唯恐不迭。因为每次谈起 PPT 工具，总会让咱们想起很多不太好的回顾，到了谈虎色变的境地了。对于你来说，也是这样吗？ 在程序员圈，PPT 始终都是风评极差的工具，几乎是到了人嫌狗厌的境地了，起因是什么大家都懂的，我就不多说了。 但不论你有多厌恶 PPT 工具，你都须要把握它。不要求你能做到精通，但至多须要达到及格的境地。如果你达不到，将会对你的影响力的晋升有十分大的妨碍。而你的影响力也在很大水平上决定了你的职场竞争力。 既然 PPT 工具这么重要，又为什么不要求精通呢？那是因为 PPT 只是一个工具，跟它强绑定配套的还有一种能力，叫做演讲表达能力，这个能力比 PPT 制作能力要重要百倍。与其破费大量工夫在精通 PPT 制作上，不如投入到演讲表达能力的晋升上。因而，我才会说，对于咱们程序员来说，PPT 工具不要求精通，但必须及格。 对于 PPT 工具，我也只是达到及格线吧，嗯，这是我自认为的，哈哈。所以，我的 PPT 系列文章教不了你 PPT 制作的各种高大上的技巧，然而，我能帮你正视 PPT 工具，并学习一些程序员应该理解的制作 PPT 的一般性技巧，让你的 PPT 制作能力更加靠近及格线。 因而，这篇文章的惟一目标，就是让你能够正视 PPT 工具。 PPT 实用场景的详细分析让咱们一起来详细分析一下 PPT 的实用场景。 在第一层维度，咱们首先划分为两个场景：面对面场景、非面对面场景。 对于非面对面场景来说，所有非面对面场景都不适宜用 PPT！原本非面对面的信息传输效率就不高，还应用信息含量较低的 PPT 来作为信息传递的内容载体，那要是能沟通分明事件，就见鬼了。 对于面对面场景来说，咱们再次划分为两个场景：1对1 场景、1 对多场景。 对于 1对1 场景来说，所有 1对1 场景都不适宜用 PPT！能想到的 1对1 场景，次要是面试、下级 1V1、上级 1V1、日常沟通等，在这些沟通场景下，PPT 都不是最佳的信息传播工具。实在零碎演示要比 PPT 更具体；解决方案文档要比 PPT 更具体；思维导图要比 PPT 更清晰；就连一张白纸都比 PPT 更有说服力！ ...

大家好，我是杨胜利。 将近一年没有更新思否，仅有的一两篇也是看到停更太久了，整顿了局部笔记发一下。其实并不是我躺平了，而是我所有的工夫都用来了写一本书。 上面就来聊聊写书这件事。 编辑约稿写书的事件要追溯到前年吧。那个时候写技术文比拟频繁，根本放弃一周一篇，也收到了小伙伴们的反对和激励。起初被一个电子工业出版社的编辑老哥看到了，就分割到我，和我聊了有没有写书的想法。 说实话我过后压根没有底气，因为网上写文的格调比拟自在随便，只有句子读得通、能把技术讲明确就问题不大。然而写书就要正式很多了，一些格局、语法、表述都有要求。 起初和编辑老哥聊完，他通知我写书最难的不是这些，而是保持。因为写一本书根本要花费一年之久，而且要用上班业余时间来写，好多约稿的人写一半就保持不上来了，所以毅力是最重要的，能不能完结前期全靠作者的毅力和自律水平。 我过后也在思考，如果签了这本书，公众号和思否根本就没工夫再更新了。写公众号技术文时，你只有写一遍收回去，就能收到读者反馈；而写书就不一样了，在出版之前除了改稿没有任何反馈，而且我也不敢保障本人肯定可能保持写完。 起初决定要写，有两个起因。一是我工作曾经六七年了，的确有很多成体系、我认为重要的货色想要整理出来；二是纸质版的书籍和电子版感觉的确不一样，正好有这样一个机会，那就致力尝试一下，把本人多年的积攒和想表白的内容整顿成一本书。 写一本什么样的书？编辑老哥找我的时候曾经有计划了，想写一本实战类的书，这个想法与我不约而同。因为过后市面上充斥着大量的根底原理和面试真题，实战类的也根本是后盾管理系统。这些内容深度不够，而且套路性强，对实战开发真正重要和有用的常识反而比拟稀缺。 老哥的倡议是，面向前端基础薄弱的读者，让大家轻松入门，而后通过重点常识开掘和丰盛的案例层层拔高。我想写一个偏高级、偏简单的实战我的项目。最初通过约定，敲定了“根底案例+我的项目实战”的总体路线。 根底局部必定要写，但咱们有两个准则： 根底不用大而全，从我的工作教训登程，筛选那些最要害的局部集中介绍。不介绍大段的概念，用“大白话+举例子”的形式，把重点讲明确即可。根底介绍完之后，进阶必不可少。进阶局部就不局限于前端自身了，很有多能够深刻的方向，但整体还是会围绕着前端我的项目服务。 至于实战，咱们设定在根底局部和框架介绍完之后，先来一个前端我的项目实战；在全书内容全副介绍完后，再来一个全栈综合实战，这样就敲定了这本书“根底+进阶+实战”的大方向。 抉择要介绍的前端框架时，其实我更中意React，不过老哥通过调研更倡议抉择Vue3，因为Vue3的受众更广，所以最终抉择了Vue3全家桶。 样章过审，签约写书第一步是先写目录，这和写代码一样 ——— 先搭框架，再进行业务开发。老哥说一本书目录是最要害的，必须能通过目录看出书中的内容，同时也是全书的思路梳理，所以目录来来回回搞了很久才定下来。 目录敲定之后，接下来抉择几个章节开始写样章。所谓样章，其实就是先写几章试试看，编辑老哥会从写的过程中看你顺不顺利，能不能保持，再决定是否与你签约。 写第一章就和我意料的大不一样。第一章文字表述比拟多，我曾经尽力的写的符合规范，合乎语法了，后果老哥给我返回来的第一版，稀稀拉拉全是批改。什么主语不够了，主宾不搭了，语句不通了，间接给我整麻了。 可能我本人的写作习惯和文字表白与出版社的要求不同，我感觉很直白的一句话，老哥会感觉太书面语了；我感觉一句简略直观的表述，老哥感觉不够谨严，要补充残缺，但我又感觉有点多余。总之磨合了很久，我才缓缓和老哥同频。 最让我感觉好受的是，写稿要用 Word。平时习惯了 VSCode + Markdown 一把梭，应用 Word 真的效率低下。首先是格局麻烦，题目、字号、字体都有规定，格局就得搞半天。其次是没有 Git 的加持，还要用传文件的形式调换每次更新的内容。 不过书的版面自身就是 Word，所以只能用 Word 来写，写了一段时间也慢慢适应了。通过初期和编辑老哥的磨合，样章算是顺利完成了，侥幸的是样章过审，终于和出版社正式签约。 始终被刷视频困扰正式开始写作后，我给本人定了一个指标：每半个月实现一章的初稿，有了指标之后就抽出所有工夫来实现。 因为平时要下班，写作的工夫只能压缩在上班和周末，所以开始的两个月每天特地累，上班就拿电脑开始写，搞的跟加班一样。周末工夫集中，我会抽一整天来写，尽管累，然而进度也很快。 又过了一个月，我发现我如同高估本人的自控能力了，想要长时间的放弃专一真的难如登天。一开始上班能够专一写作，越往后越难以集中注意力，总是忍不住刷手机、刷B站，一刷就停不下来。 以前上班刷手机会放松，然而有了写作工作之后，刷手机就变成了一件十分苦楚的事件。我明明只想玩半小时的手机，剩下的工夫用来写作，然而手机就是卡在手里放不下来，一刷就是俩小时，刷到该上床睡觉的工夫，我就会十分后悔，又节约了一天。 起初我罗唆把抖音和B站卸载了，断绝干扰源，这下于注力有晋升，但也仅仅放弃了一周。有一次逛淘宝买货色，莫名其妙的就开始刷视频了，等我意识到的时候曾经过来一个多小时。拼多多也一样，最离谱的是支付宝查个基金，点进去也是短视频。 通过N次的实际验证，我不得不抵赖一个事实 —— 靠自控力无奈管住本人不刷手机，只能是彻底断烦扰。我试过无效的办法有三个： 手机断网手机关机手机扔到3米外的中央在我认为终于有了反抗短视频烦扰的办法时，某一天在电脑上查资料，忽然发现抖音居然有网页版，而后...悲伤就连续了。手机能够关机断网，然而电脑不行，写作的时候要随时联网查资料，于是又进入了刷视频和写作相互抗争的苦楚中。 就这样，整本书写完破费的工夫比预期的工夫多了50%以上。不过在这个期间我积攒了十分多怎么让本人放弃专一的教训，前面独自开一篇文章和大家分享。 终于成书从开始写样章，到最初一章完结，用了一年多的工夫。在整本书完结后，发现比打算的内容多出100多页，于是又开始从全书精简内容，删掉不重要的局部，终于完稿成书。 这本书命名为《前端开发实战派》，每一章的内容我都通过大量的文档查阅，每一个论断我都会本人编写案例确认执行后果。毕竟是本人的第一本书嘛，不上心是不可能的。 回过头看这本书，我的确把本人想整顿和分享的货色写进去了。写作的过程也是我整顿总结和查漏补缺的过程，也尝试了很多新货色。 全书内容整体分为三个局部：根底局部、进阶局部、实战局部。 根底局部整体向“新”介绍，包含前端三驾马车 HTML、CSS、JavaScript，着重开掘一些原理和新个性开展介绍。同时还有新时代的 JavaScript，包含 ES6+、TypeScript、Node.js，我把这些也归类为根底，因为之后的章节要大量用到它们。 进阶局部面向“实战中最须要的外围技能”介绍，首先是Vue3框架以及Vue3+TypeScript+Pinia的全家桶详解，接着跟一个我的项目实战来坚固Vue3全家桶的使用。之后详解Vite构建、性能优化、浏览器高级调试、GIT命令与合作、代码标准实际等6个进阶类的章节。 实战局部除了Vue3的根底我的项目实战，最重要的是全书最初的我的项目综合实战 ——— “全栈开发仿稀土掘金”。综合实战篇幅较大，包含书中的三个章节+两套我的项目源码，会将书中介绍的所有常识全副利用在我的项目中。 综合实战的接口局部，应用 Express+MongoDB 开发。为什么抉择Express呢？起因之一是尝试了一种新的开发部署形式 —— 阿里云Serverless函数计算，Express 的轻量劣势能够实现更快的冷启动。 综合实战的前端局部，仍然是应用书中介绍的Vue3全家桶（组合式API）开发，尽可能贴近掘金的性能（要仿就高仿嘛），这部分我还发现掘金很多性能的设计十分精妙，钻研起来很有意思。 下一步的打算完稿之后，我认为很快能够拿到纸质书了，后果编辑老哥通知我，印刷出版至多也得4个月。 好吧，比我设想的慢了好多。不过也好，这个空档工夫正好放松放松。前段时间看朋友圈大家都在出去玩，我还在苦哈哈的码字，当初终于有工夫了，先出门玩一段时间再说。 再之后的打算，首先是缓缓复原掘金的更文吧，而后我应该会把精力放在如何放弃专一力上。写书这一年多，我最大的感触就是短视频时代想要放弃专一力有如许艰难。那种“不能掌控本人”的感觉真的十分苦楚。 最近也看到很多人经验了裁员，也有很多人越来越贴近生活。不论世界如何变动，在“活的开心”这件事上，每个人都是掌权者。

1、调整 vxe-table 表格(表头)排序箭头的地位 element-ui中el-table的排序高低箭头间距比拟小 而vxe-table的排序默认款式下高低箭头间距比拟大 如果在同一个页面内同时应用了el-table 和 vxe-table，这两个排序箭头会显著的不同，此时倡议调整vxe-table的箭头高度。用深度选择器::v-deep .vxe-sort--asc-btn { top: 0px;}::v-deep .vxe-sort--desc-btn { top: 7px;}调整后的款式如下，和el-table的高低箭头间距基本一致。 2、调整 vxe-grid 设置rowConfig: {height: 60} 不失效 vxe-table的版本低了，降级一下。 vue2我的项目，对应的是vxe-table v3+版本 设置rowConfig: {height: 60} 不失效。height这个属性没有表明版本，按说是全版本反对，然而过后我的项目用的3.3.x版本的确不失效。 而后降级到了@3的最新版本3.6.13，这个属性就失效了。 同步更新到本人的语雀https://www.yuque.com/dirackeeko/blog/tiaytog1uzms4zsa

火力发电作为寰球次要的可再生能源之一，被誉为21世纪最实惠、最可管制的能源模式。 建设背景火力发电厂目前依然是寰球范畴内次要的发电形式之一。在“双碳”指标压力下，深度调峰、超低排放、灵便运行已成为火电行业的必然发展趋势和长期钻研热点，随着技术的倒退和环保意识的进步，各大电厂急需引进新技术向智慧化转型降级;国务院、各中央政府和发电团体对于建设智慧电厂的文件一直出台，“碳中和”政策的提出进一步推动我国能源市场向数字化、信息化、智慧化方向转型。 零碎概述“智慧火力火电厂”利用物联网、人工智能、大数据等古代信息技术，将火电厂的传统控制系统和新型智能技术相结合，以自动控制为根底，以数据管理为外围，实现设施管制更加自主、生产治理更加智能、危险决策更加迷信的全新电力生产组织状态与管理模式。从而进步能源利用效率，缩小净化，改善社会环境。 零碎性能电厂三维总览基于数维图Sovit3D可视化编辑器，利用三维建模对电厂进行数字孪生，在线搭建火电厂三维可视化数字经营平台，以三维场景为主，2D 数据面板为辅，可视化展现火电厂各区域的修建、设施、人员、环境等状况。对火电厂平安生产、设施保护、数据监测、近程管制、故障诊断、能源管理等模块进行全方位的智能化治理，构建平安、高效、绿色的智慧火电厂体系。 大屏驾驶舱 零碎通过物联网采集数据，联合数据传输技术，将厂区重点信息、设施运行状况等因素在场景中实时展示，让厂区运维人员通过可视化大屏驾驶舱实时监管厂区信息。驾驶舱左右侧信息面板展现火电厂厂区以下信息：厂区综合信息(摄像头、车辆、机组等)、厂区人员信息(员工数、在岗数、访客数等)、厂区生产信息(各机组实时功率等详细信息)、厂区安防信息(门禁、电子围栏、报警、异样等)、设施运行状况(设施故障、培修记录等)。其中经营信息能够查看实时的老本、支出、利润动静趋势图。 视频监控零碎 在火力发电厂三维场景中设置了视频监控点位，以摄像头图标展现其地位。存在报警信息的监控点位会呈现声光报警成果，反对管理者及时点击查看实时监控影像以及抓拍记录。集成各类子系统的设施告警信息，在可视化零碎中展现所有的告警信息。通过三维场景，对厂区的摄像头地位散布高深莫测。亦可通过新兴视频交融技术，将视频无缝嵌入到场景中，实在还原场景实景。 电子围栏零碎 在三维零碎中，对电厂重点区域或重要设施设置电子围栏，围栏通常分为永久性围栏和临时性围栏，永久性围栏在火电厂我的项目中个别呈现在汽轮机、变压器、升压站等区域；临时性围栏往往呈现在厂区内长期施工或者“两票”维修区。当有异样闯入或异常情况，可进行色彩报警并汇集异样区域，并且以弹窗提醒异样状态，全方位保障电厂设施运行平安。 人员定位系统 通过智能穿戴设施，对电厂区域内的人员进行动静跟踪，对特定区域进行平安管控，当人员越权进入某区域或长时间滞留某区域，零碎立刻进行声光报警揭示，保障人员和厂区平安；当人员遭逢险情时，可利用定位终端进行一键呼救，零碎可接管该人员的具体地位散布，联动报警视频显示及录像，实现快速反应和精准解决。 机组数据监测 在场景内查看机组负荷、汽机转速、给水流量等机组主要参数的实时数据，进行电力设备状态检修、厂站智能运行、大数据辅助决策等，发展火电厂的数字化、无人化治理。将 2D 和 3D 无缝交融，通过图表的数据绑定，利用不同款式的图表统计形式统计总装机容量、机组实时功率;日发电量、月发电量、总发电量数据等生产指标，保障火力发电厂运行的安全性、经济性。 能耗管理系统 通过物联网技术实现对设施不间断的能耗数据监测，此外，在实现能耗数据直观化展示的根底上，通过对能耗数据的剖析，对能耗设施的异样耗能状况进行及时诊断，升高因为异常情况造成的设施故障率，将经济损失最小化。 供配电零碎 通过三维模型展现配电零碎的管线，数据面板实时显示以后功率、总功率、电流、电压等。平台还可直观地以供配电原理图的模式显示供配电状态和以后各类数据的实时参数。 智能设施监测 系统对设施进行环境、性能、状态等信息的全方位、多角度监测，对多个关键性指标进行实时判断，实现智能化告警。一旦参数达到阈值，零碎会主动进行声光报警，且表明准确的故障区域及状态。管理人员可在界面上对周边环境及故障设施进行全方位的查看，让火电厂全场景更加通明直观，有助于管理层对事变整体的把握。 巡检管理系统 火电厂巡检人员须要对运行的机器设备、仪器仪表等进行查看，去发现和辨认潜在隐患、解决隐患、上报隐患。巡检零碎与人员定位系统相结合，实现巡检工作的发送、巡检人员指派、巡检路线布局等。如若巡检异样，则通过视频抓拍将异样后果主动推送至零碎中。 消防报警零碎 系统集成消防系统中的烟感、温感等报警设施，并以图标的模式展现在场景中，能够直观的查看消防设备的空间布局状况以及运行状态信息。当呈现故障及报警时，能够主动联动左近摄像头，管理人员按需点击查看摄像头实时画面，第一工夫理解现场状况。 开发技术数字孪生智慧火力发电厂可视化治理平台基于 Sovit3D 可视化平台在线拖拽搭建，利用三维建模技术、数字孪生技术对火电厂 1：1 高仿真还原，实现可交互式的 Web 三维场景。以三维场景为根底，2D数据面板为辅，数字化展示火电厂各区域的建设、运行状况、平安装备、周边动静环境等状况。 零碎价值智慧电厂作为将来十年电力企业的倒退方向，基于企业现有的数字化、信息化建设根底，将云平台、大数据、物联网、挪动互联、机器人、虚拟现实、人工智能等技术手段与传统电力企业平安生产、经营管控有机交融，在节能、降耗、减排等政策的驱动下，综合互联网技术、大数据资源，推动智慧运行治理、智慧检修平安等动作，将晋升电厂外围竞争力，造成电厂本身综合竞争劣势，推动电厂的继续倒退。

本文作者：Gisercyw背景应用程序蕴含两个局部，代码和资源，资源通常包含配置文件、图标、图片、字体等，他们都间接影响到应用程序的包大小并且肯定水平会影响应用程序的运行速度。在社交直播业务开发中不难发现，以下的两类场景对资源管理的诉求会绝对强烈： 在游戏的开发过程中，个别须要应用到大量的图片、音频等资源来丰盛整个游戏内容，而大量的资源就会带来治理上的艰难, 一个好的资源管理也会为当前性能优化提供很大的帮忙。经营流动须要应用资源管理形式并配合浏览器缓存来实现流动资源的预加载/预申请, 以晋升页面性能与用户体验。基于下面两个场景的目标，咱们须要一个通用的资源管理计划，让咱们在游戏或者流动开发中，无需关怀资源加载的细节，只须要指定加载的资源，并且在对应的逻辑地位中增加相应的执行加载代码即可实现对我的项目资源的治理。 调研游戏框架通常具备较齐备的资源管理计划，而这些资源管理计划具备上面共性和性能： 欠缺的资源加载根本机制，比方加载资源、查找资源、销毁资源、缓存资源多资源配置文件治理与分组反对资源过程状态监督资源模块化反对预加载/预申请反对自定义资源解决，这样可能让加载更具备灵活性这里我分为两类管理器，一类是资源预加载库，一类是游戏的资源管理库，并依据资源管理具备的性能点比照下目前已有的资源管理计划的特点。 在调研完这些计划后，我认为上述计划并不齐全适宜咱们，咱们须要的是可能笼罩咱们游戏与流动业务开发更为通用的资源管理计划，不会与任何游戏引擎绑定，这是与其余计划最实质的不同。其次在设计上须要思考更多的是性能问题，采纳插拔式的代码组织形式，在保障主包体积稳固的根底上，通过插件扩大特定场景的性能需要，例如将预申请性能能够作为外围性能，而面向各个场景的资源转换、缓存性能能够作为独立的插件。具体的不同如下： 绝对于游戏资源管理，大部分的游戏资源管理更多的目标是为其游戏引擎提供开箱即用的资源管理工作，跟游戏引擎耦合较深；另外尽管大型游戏引擎具备齐备的资源管理体系，然而在预申请等场景下并不反对；绝对于这些预加载库，其作用次要是资源加载，而资源管理器的定位不只是资源的加载器，还包含资源管理，缓存，解析，转换等性能，并且在资源优先级等方面都做了残缺的定义。另外在通过团队的测试后，发现 resource-loader 与 PxLoader 这类预加载库，在音视频资源的解决与加载上会存在一些兼容性问题，不反对 SSR/SSG 等服务端渲染等。整体设计针对业务开发中的外围场景，在放弃资源管理外围模块根底上，通过插件化架构，设计出资源管理器的整个体系，如下图所示。 依赖能力资源管理器次要依赖 Extension 模块的注册能力和 WebWorker 的多线程能力。 资源解析与转换是一项耗时的操作，特地是在须要大量资源的游戏场景中，如果只是并发的加载、解析大量的资源，因为 Javascript 单线程的起因，会容易产生卡顿景象，导致页面无奈及时响应，而 Web Worker 使得网页中进行多线程编程成为可能。当主线程在解决界面事件时，Worker 能够在后盾运行，帮你解决大量的资源加载、解析、转换、缓存工作，当实现这些操作后，将加载后果或者缓存数据返回给主线程，由主线程更新UI。资源管理器内置了 WebWorker 来解析、加载资源，每种类型资源的解决都能够通过开启 Worker 通道来实现，默认是开启的，同时也提供了开启参数可能笼罩默认配置，须要留神的是并非所有的环境都反对 Workers，在一些场景下设置不开启可能更适合。如下所示，以解决 Image 资源转换 Buffer 为例，通过指定资源转换脚本的 URI 来执行 Worker 线程。 import WorkController from 'music/WorkController';const MAX_WORKER_NUM = navigator.hardwareConcurrency || 6;const loadBufferImageCode = ` async function loadBufferImage(url) { const result = await fetch(url); if (!result.ok) { throw new Error('failed to load'); } const imageBuffer = await result.arrayBuffer(); return imageBuffer; } onmessage = async (e) => { const { data: { uuid, id, } } = e try { const bufferImage = await loadBufferImage(e.data.data[0]); postMessage({ data: bufferImage, uuid, id, }, [bufferImage]); } catch(error) { postMessage({ error, uuid, id, }); } };`;let worker = WorkController.workerPool.pop();if (!worker && WorkController.WorkersNumber < MAX_WORKER_NUM) { const workerURL = URL.createObjectURL( new Blob([loadBufferImageCode], { type: 'application/javascript' }) ); WorkController.WorkersNumber++; worker = new Worker(workerURL); worker.addEventListener('message', (event: MessageEvent) => { WorkController.complete(event.data); WorkController.next(); });}插件注册能力是资源管理器的一个根本能力，形式是主性能通过主包引入，其余性能通过插件的模式按需引入，既可能保障主包的稳固，又可能减小整个包体积。资源管理器的外围性能是资源预加载，而针对特定类型资源的解析、缓存、转换则是通过对应插件来实现，插件模块的次要办法类型定义如下所示，提供了插件解决的基本功能。 ...

本文呈现的问题都是在8月阶段理论面试过程中遇到的，大小公司都有波及，心愿可能助力大家金九银十，也心愿本人可能顺利找到工作。当初里面大环境确实太难了…… 文中局部题目提供了参考资料以及本人整顿的相干答案，可能不肯定是最精确的，大家酌情参考。 如波及到其余文章内容援用没有表明出处的，能够私聊补充更新。 Javascript1.JS根本数据类型有哪些根本数据类型： 字符串（String）：示意文本数据，应用引号（单引号或双引号）括起来。例如："Hello World"。数字（Number）：示意数值数据，包含整数和浮点数。例如：10、3.14。布尔值（Boolean）：示意逻辑值，只有两个值：true（真）和false（假）。null：示意空值，示意一个空对象指针。undefined：示意未定义的值，示意变量未被赋值。Symbol：示意惟一的标识符，用于对象属性的键。【扩大】说一下undefined和null的区别当谈到 JavaScript 中的 undefined 和 null 时，它们是两个不同的值，但都示意短少值。它们之间的区别如下： undefined 是示意变量申明但未赋值的默认值。当尝试拜访未初始化的变量时，它的值为 undefined。全局属性 undefined 示意原始值undefined。它是一个 JavaScript 的 原始数据类型 。undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最后值就是原始数据类型undefined。值 null 特指对象的值未设置。它是 JavaScript 根本类型 之一，在布尔运算中被认为是falsy。它是一个非凡的关键字，示意变量不指向任何对象、数组或函数。值 null 是一个字面量，不像 undefined，它不是全局对象的一个属性。null 是示意短少的标识，批示变量未指向任何对象。把 null 作为尚未创立的对象，兴许更好了解。在 API 中，null 常在返回类型应是一个对象，但没有关联的值的中央应用。2.const、let和var的区别【参考资料】 面试官：说说var、let、const之间的区别 3.call、apply和bind的区别三者都能够扭转函数的this对象指向。三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。三者都能够传参，然而apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind能够分为屡次传入。bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立刻执行 。【参考】 彻底弄懂bind，apply，call三者的区别 深刻理解 call, apply, bind 和模仿实现 5分钟带你搞懂 Javascript 中的this（蕴含apply、call、bind） 4.对闭包的了解概念一个函数和对其四周状态（lexical environment，词法环境）的援用捆绑在一起（或者说函数被援用突围），这样的组合就是闭包（closure）。也就是说，闭包让你能够在一个内层函数中拜访到其外层函数的作用域。在 JavaScript 中，每当创立一个函数，闭包就会在函数创立的同时被创立进去。 重点的一句：闭包让你能够在一个内层函数中拜访到其外层函数的作用域。 应用场景return一个外部函数，读取外部函数的变量；函数作为参数IIFE（自执行函数）封装对象的公有对象和公有办法；5.new 一个构造函数的过程用new操作符创建对象时产生的事件： 创立新对象新对象原型[[prototype]] = 构造函数prototypethis 指向新对象执行构造函数如果构造函数返回非空对象，就返回这个对象援用，不然返回创立的新对象函数调用时后面不加new就按一般函数来 执行。加new后对其进行了相应的变动， 按构造函数来执行。 new的具体过程如下: //例子:function Person(name,age) { this.userName = name; this.userAge = age;}var personl = new Person('LULU',20)1、创立一个新的空对象。（即实例对象） ...

就在昨天，一个名为win12的开源我的项目一度冲上了GitHub的Trending热榜。 而且最近我的项目的Star量也在飙升，目前曾经取得了2.2k+的Star标星。 出于好奇，点进去看了看。好家伙，我的项目README里写道这是一个14岁的初中生所打造的开源我的项目。 即：在网页端实现了Windows 12的UI界面和交互成果。 这里也放几张图片感受一下。 登录页面 开始菜单 资源管理器 设置 终端命令行 AI Copilot 其余利用 这个我的项目的灵感来源于作者之前看到 Windows 12 概念版后深受启发，于是决定做一个Windows12网页版（就像之前的 Windows 11 网页版一样），能够让用户在网络上事后体验 Windows 12。 能够看到，这个我的项目是一个前端开源我的项目，而且由规范前端技术（HTML，JS，CSS）来实现，下载代码，无需装置，关上desktop.html即可。 我的项目蕴含： 精美的UI设计晦涩丰盛的动画各种高级的性能（相较于网页版）不仅如此，作者团队对于该项目标后续倒退还做了不少布局和畅想。 我的项目布局 我的项目畅想 刚下面也说了，我的项目README里写道该项目标作者是一位14岁的初中生，网名叫星源，曾取得CSP遍及组一等奖和蓝桥杯国赛三等奖。 作者出生于2009年，在成都上的小学和初中，目前刚上初三。 看得出来虽说作者年龄很小，不过接触计算机和编程应该十分早，而且对计算机领域的常识和技术应该有着十分浓重的趣味。 从作者的自我介绍里也能看出，其技术栈这块涉猎得也比拟宽泛。 作者本人也示意现在上初三了，对于win12这个我的项目也不会做什么性能的更新了，后续的保护更新将交给其余贡献者成员。 文章的结尾也附上Windows 12网页版体验地址：tjy-gitnub.github.io/win12/desktop.html，感兴趣的同学能够自行体验。 聊到这里不得不说，人与人之间的差距的确挺大的。就像这位小哥，才14岁就曾经精通前端技术了。 而14岁的我，当年在干嘛呢？ 我想了又想。。 额，我如同在网吧里玩红警。。（手动doge） 注：本文在GitHub开源仓库「编程之路」 https://github.com/rd2coding/Road2Coding 中曾经收录，外面有我整顿的6大编程方向(岗位)的自学路线+知识点大梳理、面试考点、我的简历、几本硬核pdf笔记，以及程序员生存和感悟，欢送star。

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 在上一篇文章，笔者给大家解说了在Cocos独立游戏开发框架中，如何自定义实现Tile地图管理器，胜利地在游戏中优化加载一张特大的地图。接下来笔者为大家解说一下游戏中地图编辑器的思路，以及它的简略实现。 本文源码和源工程在文末获取，小伙伴们自行返回。 什么是地图编辑器？游戏中的地图编辑器是一种软件工具或性能，通常由游戏开发者，用于创立、编辑和定制游戏中的地图或关卡。地图编辑器容许玩家或设计者通过增加、挪动、调整和删除游戏中的元素来自定义游戏地图，包含地形、修建、路线、角色生成点、敌人和物品的搁置地位等。 地图编辑器的次要性能地形编辑：容许用户绘制、编辑和调整游戏地图的地形，如山脉、河流、森林、草地等。物品和资源搁置：容许用户搁置和编辑游戏中的各种物品、资源和道具，例如武器、药品、宝藏等。角色和敌人生成：容许用户设置玩家角色的初始地位和敌人的生成点，以及它们的行为和属性。地图细节：容许用户减少地图细节，如装饰物、建筑物、环境成果、天气等，以进步地图的视觉吸引力和气氛。地图导出和分享：通常，地图编辑器容许用户保留和导出他们创立的地图，以便与其余玩家共享，或者在游戏中进行测试和玩耍。阻挡编辑：一些禁止返回的中央须要描绘阻挡。地图编辑器的实现思路1.关上上一节的地图工程关上咱们上一篇文章的Map工程，PS:笔者所有文章在文末都会附有源码的获取形式，大家能够自行返回获取。 2.创立MapEditor脚本MapEditor目前蕴含了编辑地图阻挡信息和生成并下载对应配置文件的性能，思路十分清晰，有需要的话大家能够自行实现其余性能，例如搁置怪物、道具等等其余性能。 依据地图信息将阻挡信息描绘出来： 描述次要应用cc.Graphics组件，该组件次要是用于绘制一些点、线、面，在地图编辑器上非常适合： 地图编辑器中的鼠标操作，左键用于画阻挡，右键用于勾销阻挡，长按滑动能够间断绘制或者勾销阻挡。 留神咱们须要用event.stopPropagation()阻断事件传递，防止间断绘制的时候拖动地图： 监听键盘事件，i键能够开启和敞开地图编辑器，w键能够保留以后阻挡信息并且下载(须要用浏览器运行程序) 3.编写测试代码创立一个MapEditor地图编辑器和mapEditorNode节点，通过地图数据初始化地图编辑器： 地图数据笔者次要用了上一份工程现成的，大家能够自行实现读取和加载指定地图的地图数据： 4.测试后果演示测试胜利！按键i能够开启和敞开地图编辑器，按键w保留并下载地图数据。鼠标左键能够画阻挡，右键能够打消阻挡。地图编辑器敞开状态下才能够滑动地图。 总结地图编辑器通常呈现在各种类型的游戏中，包含沙盒游戏、策略游戏、角色扮演游戏和射击游戏等。它们为玩家提供了更大的自由度和创造性，使他们可能为游戏世界增加本人的想法和内容，从而丰盛了游戏的体验和可玩性。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。什么是地图编辑器。地图编辑器的次要性能。地图编辑器的实现思路。源码通过关注“亿元程序员”发送"Editor"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

奇怪的 javascriptps: 本文的题目解答都是以谷歌浏览器为准。本文就从四道题来剖析 javascript 的奇怪行为，首先咱们来看第一道题，如下所示: 题目 1let a = 1;function fn() { let a = 2; // 这里写代码，使得最初的打印是3}fn();console.log(a); // 3问题很简略，先应用 let 在全局中定义了一个变量 a,并定义初始值为 1，而后定义了一个函数，在函数的外部又定义了一个同样的变量 a，而后调用这个函数，在调用函数之后打印变量 a，问题就是在函数外部增加一些代码使得最终打印变量 a 的后果是 3。 思路剖析首先咱们晓得如果没有非凡的方法，那么最外层的打印将始终打印的是 a 变量最后的值，那就是 1。函数外部如果没有定义 a 变量，那么咱们是能够拜访到 a 变量的，而有了 a 变量，那么咱们只能在函数拜访到 2，这就导致咱们在函数外部仿佛没有任何方法拜访到内部的变量 1，因而咱们无奈批改内部的变量 a。要解决这道题，咱们能够从 2 个方向动手，第一个方向就是如何在函数外部拜访到内部的变量 a，从而批改变量 a，第二个方向则是从 console.log 函数动手。 咱们先看第一个方向，如何在函数外部拜访到内部的变量 a,这听起来仿佛很不堪设想，但咱们的确能够做到，应用 eval 函数就能够了，eval 函数反对传一个字符串当做参数，我想这大多数开发者都晓得，然而很少有人晓得 eval 函数的调用形式分为间接调用和间接调用，什么是间接调用，什么又是间接调用。咱们来看两段代码: eval('console.log(1)'); // 间接调用(0, eval)('console.log(1)'); // 间接调用看了以上代码咱们就晓得了，间接调用就是间接调用 eval 办法即可，而间接调用，是让 eval 函数像自调用函数（当然这里并不是自调用函数）那样去调用，这里用到了逗号操作符，逗号操作符能够用来在一条语句中执行多个操作，如下所示： let num1 = 1, num2 = 2, num3 = 3;不过，也能够应用逗号操作符来辅助赋值。在赋值时应用逗号操作符分隔值，最终会返回表达式中最初一个值： ...

小册这是我整顿的学习材料，十分零碎和欠缺，欢送一起学习古代JavaScript高级小册深入浅出Dart古代TypeScript高级小册linwu的算法笔记一、什么是EventEmitter？在Node.js中，EventEmitter是事件驱动的根底，简直所有模块都继承自它。它实现了观察者模式，其中被观察者保护一组观察者，并在更新时告诉观察者。 EventEmitter容许对象绑定和触发事件监听器，实现异步操作。在Node.js中，许多对象都会散发事件，例如fs.readStream对象会在文件被关上时触发一个事件。 二、应用EventEmitterNode.js的events模块提供了一个EventEmitter类，能够通过继承它创立自定义事件对象。 根本应用办法如下： const EventEmitter = require('events');class MyEmitter extends EventEmitter {}const myEmitter = new MyEmitter();function callback() { console.log('触发了event事件！');}myEmitter.on('event', callback);myEmitter.emit('event');myEmitter.removeListener('event', callback);EventEmitter的罕用办法有： on(eventName, listener): 增加类型为eventName的事件监听器。once(eventName, listener): 增加类型为eventName的事件监听器，但只能执行一次，执行后将被删除。prependListener(eventName, listener): 增加类型为eventName的事件监听器到事件数组头部。emit(eventName, ...args): 触发类型为eventName的事件监听器。removeListener(eventName, listener): 移除类型为eventName的事件监听器。三、实现自定义EventEmitter咱们能够简略实现一个EventEmitter类，理解其基本原理。在实现过程中，须要保护一个蕴含所有事件的对象events。 class EventEmitter { constructor() { this.events = {}; } on(type, handler) { if (!this.events[type]) { this.events[type] = []; } this.events[type].push(handler); } emit(type, ...args) { if (!this.events[type]) { return; } this.events[type].forEach((handler) => { handler.apply(this, args); }); } removeListener(type, handler) { if (!this.events[type]) { return; } this.events[type] = this.events[type].filter((item) => item !== handler); }}以上代码实现了on、emit、removeListener办法，别离用于增加事件监听器、触发事件和移除事件监听器。 ...

lambda nodejs 函数升高冷启动工夫的最佳实际lambda nodejs 函数升高冷启动工夫的最佳实际 前言什么是冷启动工夫打包服务端 js什么是 inline进一步封装的打包工具存在的弊病以及解决方案Next Chapter残缺示例及文章仓库地址前言本文章的思路，继承倒退自这两篇文章: serverless 升高冷启动工夫的摸索 - 服务端打包 node_modulesNodejs云函数冷启动工夫的优化这里要感激这2篇文章的作者:ice breaker，2年前就提供了这么优良的思路和解决方案了，真是忍不住给他点赞呀。 首先在看这篇文章之前，我先必须给你介绍一个概念，就是 冷启动工夫。 什么是冷启动工夫这个个性各个服务商的 serverless 云函数都存在，这个和 函数容器的生命周期 非亲非故。 以 Lambda 为例，Lambda 生命周期能够分为三个阶段： Init：在此阶段，Lambda 会尝试冻结之前的执行环境，若没有可冻结的环境，Lambda 会进行资源创立，下载函数代码，初始化扩大和 Runtime，而后开始运行初始化代码（主程序外的代码）。Invoke：在此阶段，Lambda 接管事件后开始执行函数。函数运行到实现后，Lambda 会期待下个事件的调用。Shutdown：如果 Lambda 函数在一段时间内没有接管任何调用，则会触发此阶段。在 Shutdown 阶段，Runtime 敞开，而后向每个扩大发送一个 Shutdown 事件，最初删除环境。 当您在触发 Lambda 时，若以后没有处于激活阶段的 Lambda 可供调用，则 Lambda 会下载函数的代码并创立一个 Lambda 的执行环境。从事件触发到新的 Lambda 环境创立实现这个周期通常称为 “冷启动工夫”。显然，这个工夫必定是越短越好的。 这里能够参考 AWS 这篇博客 以获取更多信息。 其中 AWS 提供的几种升高冷启动工夫的形式有: 抉择适合的编程语言 （咱们大部分状况无奈更换）减小应用程序大小预热 (定时触发器避免回收和预置并发，保留实例)JVM 分层编译(java特供)其中可行性最高的形式，就是本篇文章要探讨的 减小应用程序大小 打包服务端 js回到正题，为什么要去打包服务端 js 代码呢? 用 layer 的形式不是蛮好吗？ ...

Hightopo 公司 3D 可视化产品有对应的官网手册。然而这些手册内容比拟多。对于想学习的新同学来说可能绝对比拟繁琐。这里自己依据集体应用教训做了一些总结。心愿对读者有所帮忙。 本文会提到一些前端开发的概念，如 H5, JavaScript，JSON 等。没有开发教训的读者还须要先补一下相干概念。再持续浏览。 HT for Web，通常简称为 HT，这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发，其外围文件只有一个，就是 ”ht.js”。在 index.html 中应用 script 标签进入后便可应用，该文件总共1M左右。 <body><script src="lib/core/ht.js"></script></body>因为其可扩展性比拟强，因而还提供了一系列插件。比方：连线，动画，obj，右键菜单等。在开发的过程中可依据须要引入。 该引擎由国内 Hightopo 公司自主研发，是100%的国产前端可视化引擎。通过10多年一直地迭代优化，其无论是在学习曲线，开发效率，还是渲染成果，运行性能方面都可圈可点。 该引擎的毛病是目前并不开源，须要商业受权能力应用。然而感兴趣的开发者能够从其官网申请收费的试用包。该试用包除了包含外围引擎文件，还包含使用手册及大量插件。试用包的有效期通常为3个月，然而到期后咱们还能够持续申请，不影响前面的应用。上面是我的试用包外面蕴含的插件： 本章的次要内容是先帮大家把 HT for Web 外面的几个次要概念捋分明一下。不便后续了解。 根底数据 - ht.Dataht.Data简称 Data，是 HT for Web 中最根底的数据类型（或数据元素）。举个例子：比方一个表格有3行数据。那么每一行数据就能够用一个 Data 来示意。 在 Data 中咱们能够寄存和配置业务数据。如下面表格的第一行咱们能够用一个 Data 来寄存其行数据： let row1 = new ht.Data(); // 新建空白的Data用以寄存行数据// 给Data(行数据)赋值。其中冒号前为key，前面为显示的值。// 至于key如何与表格列数据绑定，这个会在前面table章节中叙述。row1.a({ "empNo": "ht424", "name": "唐尼", "sex": "男", "job": "CEO"});let table = new ht.ui.TableView(); // 创建表格table.dm().add(row1); // 将新建的行数据增加到表格中。其中table.dm()为前面要讲的数据容器下面代码中，row1.a() 是 row1.setAttr() 的简写模式。用于将自定义属性寄存到该 Data 中。 ...

为什么应用Path Manifests？当在 IPFS 上公布 NFT 时，图片和元数据会被上传到 IPFS 网络以取得一个根 CID，其模式如下： ipfs://bafybeic36ik6cngu37xbzmpytuvyo7z3lyeen44clkkxq5d263zj4nkzr4 通过应用这个根 CID，每个 NFT 的图片门路能够依照 root cid/'file name的格局来定义。例如，一个 NFT 的元数据中的图片门路可能如下所示： ipfs://bafybeie7byrnb3vo2lc2lwaqm5lox6jiow5ntzod3aoquki36gtirdhodm/0.png 同样地，Arweave 容许应用门路清单来打包 NFT，提供基于门路拜访的益处。例如：https://arweave.net/Bgw5-GwpymUoe5VMeb-No9WWXpjWsq_8g4oeiGP5R... 这种办法比在 Arweave 上为每个存储的图像应用独立的 ID 更为有序，后者看起来会像这样：https://arweave.net/ISvPQyG8qWzJ1Pv5em5xK8Ht38HZ3ub1fPHbFEqDPK0 如何创立NFT上面解说如何应用 4EVERLAND Bucket + Path Manifests 将NFT文件存储到Arweave网络中。 创立Bucket并上传NFT 文件首先，须要在4everland dashboard 创立一个bucket 并开启Sync to AR 按钮 而后，在Bucket中将您的nft文件夹上传，获取所有nft的TxID,除了在dashboard中手动操作外，您也能够应用 S3 Compatible API 上传获取。 Init S3 client // initS3Client.jsimport { S3 } from '@aws-sdk/client-s3'export const client = new S3({ endpoint: 'https://endpoint.4everland.co', credentials:{ accessKeyId: '', secretAccessKey: '', sessionToken: '', }, forcePathStyle: false, region: 'eu-west-2'})批量上传NFT： ...

本篇文章次要介绍如何将您的 NFT(ERC-721 Token) 通过智能合约部署到去中心化网络中。 Init Project//创立一款ocean的NFTmkdir nft-ocean//进入目录cd nft-ocean//初始化我的项目，依据提醒填写即可，packname和description填写即可npm init//增加hardhat依赖npm install --save-dev hardhat/*应用脚手架搭建我的项目,咱们抉择Create a basic sample project能够帮忙咱们创立1个demo工程并依照所需的依赖*/npx hardhat这是初始化实现后的代码构造 contracts目录用来寄存咱们的智能合约代码scripts用来寄存咱们的脚本，比方合约部署就会依赖其中的脚本test目录用来寄存咱们为智能合约编写的测试代码hardhat.config.js是对于hardhat框架的一些配置，比方solidity版本等package.json是npm的相干配置编写合约代码目前就能够开始写合约代码了，本文次要是介绍NFT的发行，咱们简略来实现一份NFT智能合约代码。 //装置openzeppelin/contracts依赖，内置较多合约协定的实现以及工具代码npm install @openzeppelin/contracts咱们在contracts目录下创立NFT_OCEAN.sol的文件。 pragma solidity ^0.8.0;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/access/Ownable.sol";import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";contract NFT_OCEAN is ERC721, ERC721Enumerable, Ownable { string private _baseURIextended; //Set mint limit uint256 public constant MAX_SUPPLY = 5; //0.01eth per mint uint256 public constant PRICE_PER_TOKEN = 0.01 ether; constructor() ERC721("nft_ocean", "NFT_OCEAN") { } function _beforeTokenTransfer(address from, address to, uint256 firstTokenId, uint256 batchSize) internal override(ERC721, ERC721Enumerable) { super._beforeTokenTransfer(from, to, firstTokenId, batchSize); } function supportsInterface(bytes4 interfaceId) public view virtual override(ERC721, ERC721Enumerable) returns (bool) { return super.supportsInterface(interfaceId); } function setBaseURI(string memory baseURI_) external onlyOwner() { _baseURIextended = baseURI_; } function _baseURI() internal view virtual override returns (string memory) { return _baseURIextended; } function mint(uint numberOfTokens) public payable { uint256 ts = totalSupply(); require(ts + numberOfTokens <= MAX_SUPPLY, "Purchase would exceed max tokens"); require(PRICE_PER_TOKEN * numberOfTokens <= msg.value, "Ether value sent is not correct"); for (uint256 i = 0; i < numberOfTokens; i++) { _safeMint(msg.sender, ts + i); } } function withdraw() public onlyOwner { uint balance = address(this).balance; payable(msg.sender).transfer(balance); }}该代码不具备上线规范，因为没有白名单。每个地址限度mint多少个等，仅供示意。倡议发行NFT前须要好好设计合约 ...

1. 手写 call 函数call 函数的实现步骤： 判断调用对象是否为函数，即便咱们是定义在函数的原型上的，然而可能呈现应用 call 等形式调用的状况。判断传入上下文对象是否存在，如果不存在，则设置为 window 。解决传入的参数，截取第一个参数后的所有参数。将函数作为上下文对象的一个属性。应用上下文对象来调用这个办法，并保留返回后果。删除方才新增的属性。返回后果。// call函数实现Function.prototype.myCall = function(context) { // 判断调用对象 if (typeof this !== "function") { console.error("type error"); } // 获取参数 let args = [...arguments].slice(1), result = null; // 判断 context 是否传入，如果未传入则设置为 window context = context || window; // 将调用函数设为对象的办法 context.fn = this; // 调用函数 result = context.fn(...args); // 将属性删除 delete context.fn; return result;};2. 手写 apply 函数apply 函数的实现步骤： 判断调用对象是否为函数，即便咱们是定义在函数的原型上的，然而可能呈现应用 call 等形式调用的状况。判断传入上下文对象是否存在，如果不存在，则设置为 window 。将函数作为上下文对象的一个属性。判断参数值是否传入应用上下文对象来调用这个办法，并保留返回后果。删除方才新增的属性返回后果// apply 函数实现Function.prototype.myApply = function(context) { // 判断调用对象是否为函数 if (typeof this !== "function") { throw new TypeError("Error"); } let result = null; // 判断 context 是否存在，如果未传入则为 window context = context || window; // 将函数设为对象的办法 context.fn = this; // 调用办法 if (arguments[1]) { result = context.fn(...arguments[1]); } else { result = context.fn(); } // 将属性删除 delete context.fn; return result;};3. 手写 bind 函数bind 函数的实现步骤： ...

参考APIhttps://kjur.github.io/jsrsasign/api/symbols/ASN1HEX.htmlASN1HEX.parse(h)ArrayBuffertohex,hextoArrayBuffer,hextob64预览http://sangongli.top:8082/#/doc/pdf ofd测试文件https://gitee.com/hs-xhl/test-docs/tree/master/ofd回绝花里胡哨简单讲，用最简略的形式去做

1、如何利用NestedScrollView 进行吸顶成果？在Flutter中，你能够应用NestedScrollView和SliverAppBar来实现吸顶成果。以下是咱们经常在搜寻外面搜寻到的类型模版,来应用NestedScrollView以达到实现吸顶成果的步骤： @overrideWidget build(BuildContext context) { return Scaffold( body: NestedScrollView( // 配置可折叠的头布局 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { // 在这里创立你的SliverAppBar return [ SliverAppBar( // 设置吸顶成果的属性 // 设置为true以启用吸顶成果 pinned: true, // 其余属性设置 ), ]; }, //页面的主体内容 body: SingleChildScrollView( ... ), ), );}2、咱们采纳这样的形式去写的时候会产生什么问题？以及如何一步步去解决问题在咱们应用会呈现body被header遮挡的问题。 导致滑动到顶部咱们的body 在有一部分展现不全。如下图： 产生以上的起因是因为NestedScrollView滑动的时候他无奈预支header的高度问题，所以咱们应用“SliverOverlapAbsorber+ SliverOverlapInjector”来解决问题，这两个小部件是在解决header和body之间的重叠问题时被应用到。 Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return [ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( pinned: true, // 其余属性设置 ), ), ]; }, body: Builder( builder: (BuildContext context) { return CustomScrollView( slivers: [ SliverOverlapInjector( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), ), ... ], ); }, ), ), );}3、注意事项应用这个咱们会发现如何只有一个header的时候，个别问题就会被解决。然而咱们有多个header怎么办呢？在测试的过程中发现尽管返回的是一个数组，然而数组外面咱们只能应用一个 ”SliverOverlapAbsorber“ 去监听，如果写入多个SliverOverlapAbsorber会造成重大的卡顿，最终大概率会产生死机的状况，如何去解决这个问题，咱们能够应用一下俩种形式： ...

Vue实现Excel预览性能前言： 我的项目中常常能遇到要求预览excel文件的需要，上面分享一下罕用的办法以及可能遇到的问题。 应用场景： 通过解析excel性能，实现PDF导入时的预览 首先咱们用到了XLSX（sheetJs）这个库来解决Excel类型的文件 地址： https://docs.sheetjs.com/ https://www.npmjs.com/package/xlsx 反对大部分的古代浏览器版本 具体应用：下载： npm i xlsx 首先咱们获取一Excel类型的文件。 这里我间接用了el-upload组件返回的文件 而后应用FileReader读取文件，注册初始化onload办法，并且在其onload办法中应用xlsx库解决文件; 首先应用xlsx的read办法，配置解决的详情。 const workbook = XLSX.read(data, { type: "binary", cellText: false, cellDates: true, });再轮询读取文件 for (let sheet in workbook.Sheets) { //循环读取每个文件 const header = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { header: 1, }); const sheetArray = XLSX.utils.sheet_to_json( workbook.Sheets[sheet], // 配置单元的数据转换方法，dateNF不失效 { raw: true, cellDates: true, dateNF: "yyyy/mm/dd" } ); //若以后sheet没有数据，则continue if (sheetArray.length == 0) { continue; } this.tableHeader = header[0]; this.handleNetX(sheetArray, header[0]); } } catch (e) { this.$message.warning("上传失败"); }留神sheet_to_json办法中此时cellDates配置为true之后，如果excel文件内的数据类型为工夫，会被转成Date格局。 ...

最近一段时间，通过各种形式与同行们交换了「前端技术」与「前端工程师」的现状及将来倒退的方向性问题，大家在一些方面有所共鸣。 上面就来说说我的一些认识—— 困惑多多少少，有人已经或正在困惑：「前端有将来吗？」 有此困惑的人，TA 可能是—— 正在学习 web 前端技术，就是纯正的 HTML、CSS 和 JS，在用这几样做网页。练习的过程中发现，或者说忽然想到：「当初微信小程序风靡，在其与原生客户端利用的夹击下，前端有将来吗？」 一毕业就退出了看似门槛低、工资高的前端工程师行列，进入了一家业务型公司的业务部门。产品经理的需要一直，都曾经排满接下来的一年了。做的货色，竟是些不太须要动脑子的，做得多了根本只是让本人变得更纯熟。这个性能今天上线，那个需要下周五提测，每天都疲于奔命。 下班时总在想：「如果有工夫的话，我肯定要好好学学技术，晋升下本人！」可真难得上班早了或到休息日了，却又想：「平时太辛苦了，还是看看动漫、电影，刷刷抖音、B 站鬼畜，玩玩游戏，解解压、放松下吧！」 周而复始，一年、两年过来了，团队还是那个团队，本人还是那个本人。跟两年前的本人相比，如同只是做需要更快了，因为手法、套路曾经相当娴熟了。这时，不禁感叹道：「前端有将来吗？」 与下面的相似，也是一毕业就在业务部门，工作日每天为业务需要忙得焦头烂额。不同的是，本人是个喜爱折腾的人，有本人的技术现实，就算工作日再忙再累，也违心额定投入一些工夫和精力去做些本人想要做的技术产品，尽管是试验性质的。 为了验证本人的想法并测验本人的技术产品，拿到业务中是最好的形式，它们之间能够相互促进。于是会在做业务的同时推动团队的技术及工具更新，让开发效率晋升下来。这样一来，不仅业务迭代变快了，本人也会有更多的工夫去折腾，几乎双赢啊！ 一年过来了，用本人很多业余时间做的组件库、UI 框架、命令行工具给团队及公司带来很多收益，但受环境及本身限度，能做的也根本止步于此。然而，本人还想持续折腾，还想做更多的货色，还想进一步晋升研发效率，无奈道：「前端有将来吗？」 这些人的困惑，演绎一下，无非就两个方面：前端技术有没有将来？前端职业有没有将来？ 解惑回顾过去，HTML 的呈现，只是想让常识得以在世界范畴内共享，而不只是攥在手里和与身边人分享；CSS 也只是为了使文字排版好一些，可能像报刊、书籍一样容易浏览；而 JS 的诞生，扭转了这所有，使 web 产生了改革。 如果说只有 HTML 和 CSS 的「动态 web」的时代叫作「web 1.0」，那么 JS 所拉开帷幕的「动静 web」的时代就是「web 2.0」。在此之前，能够说 web 前端没有交互，也没有「前端工程师」这个职业。 精确地说，拉开「web 2.0」时代帷幕的还有另外一只手——Java。要想让 web 真正变动静，真正有交互，必须是客户端、服务端中间同时抓起，不然数据怎么流动起来？ 前端职业的诞生与改革这带来了商机，扩大了销售和流传渠道，传统企业将交易从线下搬到了线上，把实体转为虚构，并催生了一批服务这些企业的企业，以及服务服务这些企业的企业的企业。因而，以网页为载体所进行的业务越来越多，涵盖各行各业，千奇百怪，使页面的展示与交互越来越简单。 业务逻辑变得复杂，给后端开发也带来了很大的挑战。起初他们还能本人写写 JS 代码，HTML 和 CSS 让设计师或所谓的「页面重构工程师」去写。但在这种状况下曾经自顾不暇了，哪还有空去管前端？！「前端工程师」这个职业应运而生。 缓缓地，「页面重构工程师」退出历史舞台，他们要么转变为「前端工程师」，要么曾经转行。在做 web 利用开发时，前端工程师和后端工程师成为规范搭配。 随着智能手机问世，挪动互联网时代降临，又诞生了为不同智能手机开发客户端利用的职业，如：iOS 工程师、Android 工程师等。可将他们统称为「客户端工程师」。 他们的呈现，对后端工程师没有任何影响，因为他们的工作不存在竞争关系，对前端工程师影响就大了。 为了抢占用户手机里的一点空间，很多具备互联网基因的企业都要领有本人的客户端利用，招入大量客户端工程师。本来面向用户的性能，都改用客户端利用而不是 web 页面，前端工程师的工作根本只剩做做后盾管理系统，前端工程师在公司中被边缘化，并慢慢被裁减。 就是在这一时期，前端工程师开始纷纷去接触 Node.js，想将本人往后端开发方向拓展一些边界，给本人减少点生存空间。能够说这是「前端工程师」这个职业呈现以来的最低谷、最迷茫的期间了。 接着，企业头脑略微沉着了一些，发现每次要做新的性能，都得开发 feature * platform 遍，各种老本太高！就想着能不能有只开发一遍就能在不同客户端中运行，且体验不要太差的形式？这就又催生了混合开发、React Native 等开发模式、工具与框架。 ...

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 在独立游戏开发中，tile地图管理器是一个十分有用的工具，能够帮忙你轻松创立和治理游戏中的地图。在这篇文章中，我将介绍如何在Cocos独立游戏开发框架中打造属于本人的tile地图管理器来创立和治理游戏地图。 本文源码和源工程在文末获取，小伙伴们自行返回。 什么是Tile地图？Tile地图是一种通过将游戏地图宰割成小块（瓦片）来构建游戏世界的技术。每个瓦片通常都是一个小的图像，能够拼接在一起以创立大型的游戏地图。这种办法使得地图的创立和治理变得非常简单，因为你只须要创立一组瓦片，而后将它们搁置在游戏世界中以构建地图。 Tile地图的劣势疾速加载和渲染：因为地图被分成小块，只需加载和渲染以后可见区域的瓦片，而不是整个地图。这能够显著进步地图加载速度，使用户可能更疾速地查看地图数据。加重服务器累赘：Tile地图能够将地图数据散发到多个独立的瓦片，因而能够在多台服务器上存储和提供这些瓦片，从而扩散了服务器累赘。这对于大型地图服务和高流量应用程序至关重要。缓存和离线应用：用户在拜访地图后，浏览器或应用程序能够缓存已加载的瓦片，以便稍后的拜访。这使得在离线模式下依然可能查看地图数据成为可能。灵活性：Tile地图容许开发人员自定义地图款式、图层和标记，以满足特定应用程序的需要。这意味着您能够依据本人的需要创立定制的地图体验。交互性：Tile地图反对各种用户交互，如平移、缩放和标记点击。这使得用户可能在地图上执行各种操作，从查看地位到查找路线等。Tile地图管理器的实现1.申明MapTile类Tile地图是将一个残缺的大地图切割拆分成许多小图片，俗称瓦片。因而咱们须要一个类去解决每个图片。 申明一个MapTile类继承cc.Sprite，次要负责加载并显示图片。 通过行和列进行一些列的计算得出图片显示的指定地位，瓦片地图的加载cc.resources.load和销毁cc.resources.release: 2.申明MapTiles治理类下面介绍了单个MapTile的解决，咱们须要一个治理类去治理所有的MapTile： MapTiles治理类次要负责更新传入的坐标左近应该显示的MapTile，即更新"角色"左近的地图块。 通过一系列简单的计算得出坐标(x,y)左近应该显示的地图块行列： 治理并精确创立和显示左近的地图块： Tile地图能显示无限大地图的要害，动态创建和显示左近的地图块，暗藏不在屏幕内的地图，从而达到最优成果： 3.申明Map类Map类次要实现加载对应地图ID的配置数据并且驱动MapTiles治理类去更新指定坐标左近的地图块： 4.编写测试代码初始化并构建地图： rootNode节点次要负责挪动。 mapNode节点负责装载TileMap节点。 增加简略的地图拖拽办法，实现拖拽并且显示指定地位的地图块： 5.筹备测试资源资源来源于网络，仅供学习。 还有地图的配置文件，包含地图的宽和高还有阻挡信息。 6.测试后果演示测试胜利，胜利将地图散件拼接并且动静加载显示，蕴含地图的拖拽性能： 总结总之，Tile地图是游戏开发中一个重要的工具，能够简化地图设计和渲染，进步游戏性能，并反对各种类型的游戏。通过正当应用Tile地图，开发者能够疾速创立具备简单世界的游戏，同时升高开发的复杂性。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。什么是Tile地图。Tile地图的劣势。Tile地图管理器的实现。源码通过关注“亿元程序员”发送"Map"获取。下篇文章给大家解说如何编辑地图的阻挡信息。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

双指针算法在Java中的应用次要波及到两个指针同时遍历或者迭代一个数组或列表，罕用于解决一些具备线性构造的问题，如寻找数组中的旋转排序数组的最大值，或寻找数组中的最长间断子数组等。 以下是一个简略的双指针算法的Java实现，用于寻找数组中的最长间断子数组： java复制代码 public class Main { public static void main(String[] args) { int[] nums = {1, 2, 3, 4, 5, 6}; System.out.println(findLongestConsecutiveSubArray(nums)); } public static int findLongestConsecutiveSubArray(int[] nums) { int maxLength = 0; int left = 0; int right = 0; for (int i = 0; i < nums.length; i++) { while (nums[i] > nums[right]) { right++; } if (i - left + 1 > maxLength) { maxLength = i - left + 1; } if (right == i) { left++; } } return maxLength; } }在这个例子中，咱们应用了双指针的技巧来寻找数组中的最长间断子数组。左指针和右指针别离从数组的头部开始，同时向两头挪动。如果以后元素大于右指针指向的元素，那么右指针就会向右挪动。如果左指针和右指针相遇，那么咱们就找到了一个间断的子数组。咱们通过比拟子数组的长度来找到最长的间断子数组。 ...

作兔器——手写一个可恶的兔兔相册展现器兔岁既来，为迎兔岁，更认为兔兔甚是可怜，故作一兔相册展现器，以藏兔图。而今先顾此效，如下所示: 自译: 兔年既然来了，为了示意欢送兔年的到来，而且我也认为兔兔很是可恶，令人喜爱，因而写了一个兔兔相册展现器，用来珍藏可恶的兔兔图片，当初让咱们先来看看这个相册展现器的成果吧，正如上面所展现的:据上而知，此器可分三成，一则为头部，头部含一按钮，点此可随意见兔之图，二则为图区，图区不限，此例乃九，每一区见一兔，鼠标移之可得一词以述兔也，所述则同分为二，其一乃题，其二乃文，文即一词。 自译: 依据上图咱们能够晓得，这个兔兔相册展现器能够分成三个局部，第一个局部就是一个标题栏头部，标题栏头部有一个按钮，点击这个按钮能够随机的展示兔兔的图片，第二个局部则是兔兔的图片展现区域，这个展现区域能够分成多个局部，在这个例子当中是九个图区，每一个图区就会展现一个兔兔，鼠标移上去能够看到一首词来形容兔兔。这个形容同样分成了两局部，第一局部就是题目，第二局部就是内容，内容就是一首诗。三则为细品兔图,鼠标击之，可得一黑盒，黑盒中位，即为兔图，鼠标复击之，即可关之。由之可见，其有动效，如何实之？需有二者，其一为定时器，其二乃以透明度为效，如是娓娓道来。 自译： 第三个局部则是具体的预览图片，通过应用鼠标点击图片，就能够失去一个彩色的背景遮罩，在彩色背景遮罩的两头地位，就是兔兔的图片，鼠标再次点击就能够敞开具体预览。从这里咱们能够看到，这个敞开和关上都是有动画成果的，那么咱们如何实现这个动画成果呢？第一局部很显然咱们须要用到定时器，第二局部就是通过批改透明度达到成果，接下来让咱们一一来看每一部分的实现吧。其一，构之 HTML 元素: 自译： 第一步，当然是编写 html 元素。<div class="rabbit-box"> <header class="rabbit-box-header"> <button type="button" class="rabbit-box-header-btn">换一换</button> </header> <div class="rabbit-box-album"></div></div>如上所示，应知外有容器元素，内有题目元素与兔图容器元素，其内更有一按钮元素，使之可更兔图，兔图容器之内，乃元素抽成，如之奈何？ 自译: 正如下面所展现的，咱们应该晓得最外层有一个容器元素,外面又有一个题目元素以及一个装满兔子图片的容器元素，在题目元素中还有一个按钮元素，能够让它来随机更换兔子图片，兔子图片外部的元素正好是动静生成的元素，咱们应该怎么做呢？使我等估之如下: 自译: 让咱们猜想 html 元素构造应该如下所示:<div class="rabbit-box-album-item" data-title="..." data-content="..."> <img src="..." alt="图片加载中" class="rabbit-box-album-item-img" /></div>甚易，构之大成，因此画之美样，但其乃易，故可径直赏码矣。 自译: 太简略了，构建元素功败垂成，因而咱们只须要用 css 款式丑化一下即可，不过因为这也同样简略，因而咱们只须要间接查看代码即可。* { margin: 0; padding: 0; box-sizing: border-box;}body,html { height: 100%; overflow: hidden;}body { overflow-y: auto; padding: 2em; background: linear-gradient(135deg, #f184e8 10%, #e209e9 90%);}.rabbit-box { width: 100%; max-width: 1200px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: auto;}.rabbit-box-header { width: 100%; background: linear-gradient(135deg, #ffc5e7 10%, #fa6cc4 90%); height: 60px; border-radius: 10px 10px 0 0; text-align: center; line-height: 60px;}.rabbit-box-header-btn { outline: none; border-radius: 4px; padding: 0.4rem 1rem; border: none; transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); display: inline-block; color: #fff; cursor: pointer; background: linear-gradient(135deg, #f173bd 10%, #e71b92 90%); letter-spacing: 2px; font-size: 20px; font-family: '微软雅黑', '楷体';}.rabbit-box-header-btn:hover,.rabbit-box-header-btn:active { background: linear-gradient(135deg, #f060b4 10%, #e60f8c 90%);}.rabbit-box-album { width: 100%; height: 100%; display: flex; flex-wrap: wrap;}.rabbit-box-album-item { width: 33.3333%; height: 300px; overflow: hidden; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); cursor: pointer; position: relative;}.rabbit-box-album-item::before,.rabbit-box-album-item::after { position: absolute; color: #fff; font-size: 15px; width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; left: 0; transition: transform 0.4s ease-in-out; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}.rabbit-box-album-item::before { content: attr(data-title); top: 0; background-color: rgba(0, 0, 0, 0.85); transform: translateY(-100%) scale(0);}.rabbit-box-album-item::after { content: attr(data-content); bottom: 0; background-color: rgba(0, 0, 0, 0.65); border-top: 1px solid #fff; transform: translateY(100%) scale(0);}.rabbit-box-album-item:hover.rabbit-box-album-item::before,.rabbit-box-album-item:hover.rabbit-box-album-item::after { transform: translateY(0) scale(1);}.rabbit-box-album-item-img { display: block; width: 100%; height: 100%; object-fit: cover;}@media screen and (max-width: 900px) { .rabbit-box-album-item { width: 100%; height: 200px; }}::-webkit-scrollbar { width: 4px; height: 4px; background-color: #f1f1f1;}::-webkit-scrollbar-thumb { width: 4px; height: 4px; background-color: #ee4f9e;}甚易，皆凡样也，故无需多言以述之，使我等望功码。 ...

导语：很多时候手机设施会忽然没网,这时候就须要一个网络检测组件,在没网的时候显示提醒用户,提供用户体验。目录筹备工作原理剖析组件实现实战演练案例展现筹备工作在components新建一个q-online文件夹，并新建一个q-online.vue的组件；依照前一篇所说的页面构造，编写好预约的网络检测页面；原理剖析次要是应用uni.onNetworkStatusChange来判断网络状态，而后依据状态调整页面款式显示网络提醒。 组件实现筹备工作和原理剖析实现后，接下来写一个网络检测页面。 模板局部这里提供了两种提醒，一种是全屏显示，一种是顶部显示，反对自定义插槽。 <view class="q-online" v-if="show"> <slot name="content"> <view :class="{'q-online-inner': true, [props.type]: true}"> <q-icon class="q-online-icon" :name="props.type == 'top' ? 'info-circle' : 'wifi'" :size="props.type == 'top' ? 20 : 52" color="#f30d0d" /> <text class="q-online-txt">您的网络已断开，请查看连贯!</text> </view> </slot></view>款式局部.q-online { .q-online-inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 100rpx; background: $netBg; .q-online-icon { margin-right: 20rpx; } .q-online-txt { color: $netColor; font-size: 30rpx; } &.full { position: absolute; top: 0; left: 0; flex-direction: column; height: 100%; background: $white; z-index: 39; .q-online-txt { margin-top: 30rpx; font-size: 36rpx; } } }}脚本局部引入依赖包和属性设置import { ref } from "vue";import { onLoad } from "@dcloudio/uni-app";// 页面属性let show = ref(false);// 显示类型const props = defineProps({ type: { type: String, default: "top", // top 顶部 full 全屏 },});// 状态发送const emits = defineEmits(["change"]);办法定义// 页面办法// 显示onLoad((option) => { checkNet();});// 检测网络function checkNet() { uni.onNetworkStatusChange((res) => { const status = res.isConnected; show.value = !status; emits("change", status); let title = status ? "网络已连贯!" : "网络已断开!", icon = status ? "success" : "error"; uni.showToast({ title, icon, }); });}实战演练模板应用<!-- 顶部格调 --><q-online type="top" /><!-- 全屏格调 --><q-online type="full" @change="getNetStatus" />脚本应用// 获取网络状态function getNetStatus(val) { console.log(`网络状态：${val ? "有网" : "无网"}`);}案例展现顶部成果全屏成果最初以上就是自定义网络检测组件的次要内容，有不足之处，请多多斧正。 ...

前言第一个博客是在大学时候弄的，用的是 hexo 搭建的。然而过后还是个小白，只在 github 上部署了打包后的代码，没有保留源代码，导致前面我就再也没更新过我的集体博客，始终停留在了 2019 年。起初有用 vuepress 搭建了一个学习笔记记录的我的项目，但感觉不是很难看，没有当主力的博客应用，之后就始终在掘金和思否上写，就没怎么更新集体博客了。 因为往年上半年常常跑出去完，最近忽然又想从新搭建一下本人的集体博客，记录一下生存。 blog github 我的项目地址 blog 预览 设计方面参考了antfu 大佬的 blog格调，antfu 的 blog 简洁难看，是我喜爱的格调。 次要也是用了他的框架，所以色调和格调很统一。 plugins这些插件使得写起来十分的难受，比方我能够间接在index.md里增加一个 icon，应用一个组件，并且传入一些数据。 ---title: blogdate: 2023-09-06tags: ["js", "ts", "vue"]---<tag-list :tags="tags" /><div class="i-uil-github-alt" />vite-plugin-pages用 vite-plugin-pages 主动生成路由。 然而我发现 build 进去的页面应用 live-server 启动时刷新会失落，我在vite-plugin-pages issues247看到有人遇到和我同样的问题，然而我没有找到适合的解决方案。而且当我把 antfu 的博客我的项目 clone 下来打包之后发现有同样的问题，然而他的网站是 OK 的，我不晓得他怎么解决的。 最初我发现用 vite preview 运行 dist 进去的没有问题，于是我在vite 动态部署站点中间接复制了github-pages构建代码，这样就 github pages 是好了，然而 Vercel 外面主动部署还是有问题。 unplugin-vue-markdown这是一个能够将 Markdown 编译成 Vue 组件的 vite 插件，能够解析 md 预设的参加，以及间接应用 vue 组件。和 vite-plugin-pages 搭配实现安心的写 md。 ...

SASS中定义变量的公式如下：// $符号固定，variables为变量名，expression为表达式$<variables>: <expression>;$font-size-medium: 32px / 2; // 16px$font-size-normal: 12px + 2px; // 14px$font-size-small: 12px; // 12pxSASS中的变量是命令式的，意味着你在批改变量前后，值可能不雷同的。$font-size: 14px;.box { font-size: $font-size; // 14px}// 批改值$font-size: 16px;.item { font-size: $font-size; // 16px}SASS默认变量有些时候，咱们心愿定义一些变量并给默认值，这样内部用户应用的时候，能够从新定义雷同的变量，但变量的值由内部用户本人规定，此时能够应用默认变量!default： $font-size: 14px !default;$theme-color: #4093ff !default;// 应用默认.box { font-size: $font-size; // 14px; background-color: $theme-color; // #4093ff;}// 本人定义$font-size: 16px;$theme-color: #58a;.box { font-size: $font-size; // 16px background-color: $theme-color; // #58a;}在一些组件库或者款式库中，简直都容许用户自定义款式，其本质就是默认变量在起作用。SASS局部变量因为SASS容许嵌套规定，所以变量也能够定义在嵌套规定中。当在嵌套规定中定义一个变量时，此变量的拜访范畴只存在于此规定内，对于内部不可见，例如： .box { .item { $font-size: 16px; font-size: $font-size; // 16px; } .row { font-size: $font-size; // error Undefined variable }}对于嵌套规定中雷同命名的变量，内层的变量会遮蔽外层的变量，例如： ...

Delegate是个好货色，看看孙啸达 同学对ZoneDelegate的介绍吧，这是他对于zone.js系列文章的第三篇~zone.js系列往期文章zone.js由入门到放弃之一——通过一场游戏意识zone.jszone.js由入门到放弃之二——zone.js API大练兵zone.js源码剖析接下来的全是干货，从头到尾，一干到底 一点前置：Zone 和 ZoneDelegate在前文中，咱们始终在回避解说Zone和ZoneDelegate之间的区别。尤其在上篇文章讲API的时候，我甚至让大家把这两者当成一回事。其实这两者并不是齐全相等的。单从Delegate这个单词你也能看出，尽管Zone和ZoneDelegate的API很像，然而真正干活的是ZoneDelegate。我简略节选几段Zone的源码，大家不难发现，大多数Zone的API都间接或间接通过代理中绝对应的API实现的。 public fork(zoneSpec: ZoneSpec): AmbientZone { // 此处省略成吨源码 return this._zoneDelegate.fork(this, zoneSpec);}public run<T>(callback: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], source?: string): T { // 此处省略成吨源码 return this._zoneDelegate.invoke(this, callback, applyThis, applyArgs, source);}runTask(task: Task, applyThis?: any, applyArgs?: any): any { // 此处省略成吨源码 return this._zoneDelegate.invokeTask(this, task, applyThis, applyArgs);}我把上篇文章讲到的API和ZoneDelegate之间的调用关系简略梳理了一下。下文在剖析源码的时候，会有大量Zone、ZomeDelegate、ZomeTask三者之间互相调用的场景，切实理不清的中央能够返回这里看下。 尽管ZoneDelegate理论承当了大量的工作，然而Zone也不是甩手掌柜，啥活儿也不干。在我集体看来，Zone其实次要只负责两件事： 保护Zone的上下文栈：咱们晓得Zone是个具备继承关系的链式构造。zone.js在全局会保护一个Zone栈帧，每当咱们在某个Zone中执行代码时，Zone要负责将以后的Zone上下文置于栈帧中；当代码执行结束，又要负责将Zone栈帧复原回去。public run<T>(callback: (...args: any[]) => T, applyThis?: any, applyArgs?: any[], source?: string): T { // 将以后的Zone上下文置于栈帧中 _currentZoneFrame = {parent: _currentZoneFrame, zone: this}; try { ... } finally { // 复原Zone栈帧 _currentZoneFrame = _currentZoneFrame.parent!; }}Zone还负责ZoneTask的状态切换。上文说过，Zone能够对宏工作、微工作、事件进行治理。那么每个工作在Zone中处于何种阶段、何种状态也是由Zone负责的。Zone会在适当时候调用ZoneTask的_transitionTo办法切换ZoneTask的状态。*接下来会把zone.js对setTimeout的Patch过程进行具体的阐明，为了不便了解，其中波及的大量源码都是我简化之后。第一阶段：zone.js打包setTimeoutPatch第一站zone.js提供一个静态方法用于Patch咱们常见的API，对setTimeout的Patch位于zone.js/lib/browser/browser.ts下：其中这个patchTimer(global, set, clear, 'Timeout');就是本次源码剖析的终点。 ...

引言一幅活泼的可视化作品往往少不了动画的参加。无论是各色各样的图表还是叙事作品，组织周密、成果杰出的动画都能更好的帮忙用户了解潜藏在可视化背地的数据观点。与动态的图像相比，动画以活泼的模式将简单的数据与概念转化为更易了解的视觉模式，在展现数据的变动、关系和趋势的同时也能无效的形容随工夫变动的信息。 那么 VisActor 在动画方面做了哪些事件呢？咱们将通过两篇文章为您揭秘VisActor中动画实现原理及利用： 《魔力之帧（上）：VisActor动画揭秘》《魔力之帧（下）：VisActor动画实战》本篇文章重点解说动画实现原理。 简单的动画目前学界以及业界针对于动画曾经做了许多的钻研，发明了诸多不同的产品，那么为什么目前为止在图表库这样的状态的产品中依然没有一个对立的动画实现呢？ （demo：https://visactor.io/vchart/demo/storytelling/ranking-bar） 上图形容了一个常见的竞速条形图动画，从这个动画展现的内容中，咱们能够分辨出形成可视化作品中动画的两局部因素： 动画成果：动画成果形容了在某一特定的动画阶段中图元以怎么的形式执行渲染的变动。动画成果包含一般的视觉通道插值，例如竞速条形图中柱子色彩、宽度、地位的变动；同时动画成果也蕴含一些非凡的变动，例如下图中的图元形变。 （demo：https://visactor.io/vrender/demo/examples/graphic-rect/morphi...） 动画编排：在确定每一个阶段的动画成果之后，须要思考的便是如何通过动画编排将这些原子的动画成果进行组合以失去残缺、晦涩的动画内容。例如下图中从入场、更新到出场的一连串动画成果。 （demo：https://visactor.io/vgrammar/demo/animate/basic-animate） 在理论的业务场景中，无论是动画成果还是动画编排都呈现出多种不同的模式。从一般的图表出入场动画到叙事作品中不同叙事元素之间的任意动画成果，动画成果与动画编排的相互交织发明出有数的简单动画需要。 为此，咱们须要为动画提供残缺的解释以及足够弱小的配置形式以反对自在的可视化创作。 动画设计动画定义在讲述 VisActor 的动画设计之前，让咱们首先来简略谈谈图形语法。为了系统性的形容各种不同的图表以及可视化作品中所共通的数据逻辑，利兰·威尔金森提出了图形语法的概念。从数据到映射再到具体的图元视觉通道，图形语法的设计将状态差别微小的柱状图与桑基图等纳入到对立的框架中。VisActor 中的图表库 VChart 以及语法引擎 VGrammar 同样基于图形语法的概念为可视化的创作提供反对。 对于图形语法的更多形容能够参见利兰·威尔金森影响深远的著述《The Grammar of Graphics》。 （图形语法的流程） 尽管图形语法残缺的论述了从数据变量到美学解决的整个流程，然而这一流程中并没有为图元的动画作出解释。图形语法的外围在于构建数据与图形渲染之间的分割，而动画与数据之间的关联并不那么亲密： 有些动画设计只出于美学考量，并不具备理论的数据含意： （demo：https://visactor.io/vchart/demo/gauge-chart/clock） 有些动画设计则反映了数据变更的过程： （demo：https://visactor.io/vchart/demo/storytelling/ranking-bar） 为了更好的解释动画的含意，在 VisActor 中动画被视作为渲染阶段的润饰：动画配置与图形语法流程执行失去的图元视觉通道一起决定了渲染阶段的后果。动画的体现是具体图形元素在某一时间段内视觉通道属性的插值计算或者非凡计算逻辑，而动画配置形容了这一计算的触发机会以及执行时长。 （VGrammar 动画流程） 动画触发机会动画的申明形式能够划分为两种： 被动模式的申明：配置申明图元在接下来的一段时间里该当执行何种动画成果（例如 Canis）；被动模式的申明：配置申明图元在某种状态下该当触发何种动画成果。在图表库的场景中，动画出现往往是随同着交互动作或者特定机会的，例如出场 / 入场 / hover / select 等均会触发相应的动画成果，因而被动模式的申明更便于动画的配置。 VGrammar 所提供的动画配置实际上形容了渲染阶段的执行逻辑，开发者并不间接触发动画的执行，而是通过申明动画的执行逻辑，在特定的动画机会触发时由 VGrammar 逻辑触发相应的动画计算。 从图元状态的角度来看，动画的触发机会能够分为： enter：新增图形元素时的动画触发；exit：移除图形元素的动画触发；update：图形元素视觉通道更新的动画触发；state：图形元素交互状态变更的动画触发，在最为常见的交互与动画配合的场景中，动画体现为随同着交互状态变更的插值，例如 hover 动画。针对这一动画状态，咱们独自在底层渲染库做额定解决，防止低廉的数据流计算以晋升性能；任意机会触发的动画：动画配置将会立刻利用于图元，在可视化叙事的场景中，这一模式的动画往往更为常见； 临时无奈在飞书文档外展现此内容 （动画触发机会） 基于动画与数据流的拆散，咱们可能自在划定动画的触发机会，并且配置相应的动画成果。例如在 VGrammar 的图元上能够如此配置矩形图元上各个动画阶段的成果：（参见 VGrammar 教程 https://visactor.io/vgrammar/guide/guides/animation） { type: 'rect', // other mark specs animation: { enter: { type: 'growHeightIn', duration: 2000, options: (datum, element, params) => { return { orient: 'negative' }; } }, update: { type: 'update', duration: 2000 }, exit: { type: 'fadeOut', duration: 2000 }, state: { duration: 500 } } }同时，为了便于叙事可视化场景下自在的触发动画成果，VGrammar 在图元以及顶层对象 View 上同样提供了 animate 对象以反对主动的动画接口调用： ...

周刊首发于微信公众号“写代码的宝哥”，欢送各位前端小伙伴前来关注！ 快讯 Astro 3.0 公布，成为第一个反对 View Transitions API 的 Web 框架Biome 公布，Fork 自 Rome 官网仓库，持续 Rome 的未竟事业文章 CSS 2023 年度调查报告 - CSS 正在经验前所未有的新性能演进，浏览器也在一直跟进实现。从本份报告你不仅能理解 CSS 罕用的一些性能个性，还能接触到一些新个性、新名词，帮你把握将来 CSS 的发展趋势。值得一提的是，从往年报告的后果中，能够看到 CSS 框架的应用当初正处于某种降落趋势。请进行比拟 Web Component 与 React - 凭借其宏大的生态系统和社区，React 常常成为掂量其余技术的规范。对于Web组件来说尤其如此。然而，这种比拟框架是不偏心的，并助长了适度依赖 React 等库的误导性批评。这篇文章旨在理清这些错位的批评，并强调为什么 Web Component 值得依据其本身的长处进行评估 TypeScript中的数组类型 - 最近有人在 Twitter 开展调查，应用 TypeScript 数组类型时，更喜爱 Array<string> （泛型语法）还是 string[]（数组语法），78% 的人抉择了数组语法。作者认为 78% 的人齐全错了，咱们更应该应用泛型语法，并在文中给出了理由 面向未来的 React 利用构造：本文为构建古代 React 我的项目，给出了一套本人的目录计划。疏导您你远离那些常见的谬误，播种编码愉悦感如何构建像 Lodash 这样的 JavaScript 工具库 - 手把手教你构建一个繁难版本的 Lodash 工具库 几个应用 CSS 暗影的乏味办法 - 本文较少几种不同的暗影成果的试验为什么 Tailwind CSS“赢”了 - Tailwind CSS 是一个新的、无处不在的前端框架。它取代了用 Twitter Bootstrap 构建的一代网站。然而，当初以后咱们提到 Tailwind CSS 时，往往不是指框架自身，而是指通过 Tailwind UI 提供的 UI 组件。为什么 Tailwind CSS 变得如此受欢迎？文中列举了 4 个起因 ...

　编译优化 指的是编译器将模板（template）编译为渲染函数（render）的过程中，尽可能的 提取要害信息，以达到生成最优代码的过程。上面咱们一起看看Vue3中的编译优化的形式。　标记动静节点　标记动静节点之后，在后续渲染器更新阶段旧能够间接基于动静节点汇合，实现对动静节点的 靶向更新 或 定向更新.　patchFlag 属性　在编译器进行编译时，如果判断以后节点是属于 动静节点，就会为这个 vnode 节点打上 patchFlag 标记，也就是增加一个 patchFlag 属性，并且 patchFlag 属性 对应的 数值 代表了以后这个 动静节点的类型，如：　数字 1：代表该节点是 动静 的 textContent　数字 2：代表该节点是 动静 的 calss 绑定　数字 3：代表该节点是 动静 的 style 绑定　...　dynamicChildren 属性　dynamicChildren 属性 值对应的是一个数组，其中保留的就是带有 patchFlag 属性 的 vnode 节点，并且带有 dynamicChildren 属性 的 vnode 节点成称为 块，即 Block.　Block 节点　一个 Block 实质上也是一个 虚构 DOM 节点，只不过它比一般的虚构节点多了一个用于 存储动静子节点 的 dynamicChildren 属性.　一个 Block 不仅可能收集它的 间接动静子节点，也能收集所有 动静的子代节点，而后续渲染器的更新操作将以 Block 作为更新维度去解决.　什么样的节点会变成 Block 节点？　所有模板的 根节点　带有 v-if 指令的节点　带有 v-for 指令的节点　模板中 Frament 节点所包裹的 多根节点　其中 v-if 和 v-for 指令会导致 更新前后模板构造不稳固，不过因为 v-for 指令渲染的是一组子节点，为了更好的示意这一组子节点，就须要应用 Fragment 节点来表白 v-for 指令的渲染后果，并将其作为 Block 节点.　动态晋升　动态晋升的目标是尽可能减少更新时创立 虚构 DOM 带来的 性能开销 和 内存占用.　没有动态晋升时带来的问题　通常，在响应式数据发生变化时，渲染函数就会从新执行，并产生新的虚构 DOM 节点，显然纯动态的虚构节点齐全没有必要从新创立，这会带来肯定的性能开销.　解决方案　在编译阶段能够 将纯动态节点晋升到渲染函数内部，在渲染函数外部放弃对动态节点的援用即可，当响应式数据变动引起渲染函数从新执行时，并不会从新创立动态的虚构节点，这样旧能够防止反复创立动态节点的虚构 DOM 带来的性能开销.　值得注意的是，动态晋升是以树为单位的，毕竟不可能会为每一个小的动态节点进行动态晋升，这会导致渲染函数内部对应存储动态节点的变量增多，这也会 占用肯定的内存.　预字符串化　基于 动态晋升 能够持续采纳 预字符串化 的优化伎俩，即间接将本来须要以树为单位进行动态晋升的内容，间接转换为对应基于 DOM 操作的 字符串模式.　预字符串化的劣势如下：　大块的动态内容能够间接通过 innerHTML 进行设置，在 初始化渲染 时具备肯定的性能劣势　缩小创立虚构节点产生开销的性能　缩小内存占用　缓存内联事件处理函数　不缓存内联事件函数带来的问题　在模板事件处理函数中，为了一些简略的更新操作，通常会在模板中编写 内联的事件处理函数，例如：　...

很多时候，处于好奇或者其余的目标，咱们会关上Chorme的调试性能，会看到页面会调用很多接口，而后有心的人可能会应用这些接口进行爬虫剖析，破解后获取数据。为了 杜绝 这种状况，最简略的办法就是禁止人家调试本人的前端代码。 以下是几种常见的措施禁止人家调试本人的前端代码： 1，有限 debugger前端页面避免调试的办法次要是通过一直 debugger 来疯狂输入断点，因为 debugger 在控制台被关上的时候就会执行。因为程序被 debugger 阻止，所以无奈进行断点调试，所以网页的申请也是看不到的。 以下是应用有限debugger形式阻止代码调试的示例： /*** 根底禁止调试代码*/(() => { function ban() { setInterval(() => { debugger; }, 50); } try { ban(); } catch (err) { }})();不过，如果仅仅是加上面那么简略的代码，对于一些技术人员而言作用不大。能够通过控制台中的 Deactivate breakpoints 按钮或者应用快捷键 Ctrl + F8 敞开有限 debugger。这种形式尽管能去掉碍眼的 debugger，然而无奈通过左侧的行号增加 breakpoint。 2，禁止断点的对策如果将 setInterval 中的代码写在一行，就能禁止用户断点，即便增加 logpoint 为 false 也无用。当然即便有些人想到用左下角的格式化代码，将其变成多行也是没用的。 (() => { function ban() { setInterval(() => { debugger; }, 50); } try { ban(); } catch (err) { }})();3，疏忽执行的代码能够通过增加 add script ignore list 须要疏忽执行代码行或文件，也能够达到禁止有限 debugger。 ...

之前有人问过我，“到底什么样才算中高级前端，须要具备哪些技能才算中高级？”他的本意是让我举荐一下前端的学习路线，而后再问了我这个问题，预计是想看看有哪些技术是降职中高级前端的要害，提前学习吧。 这里不论是前端、终端还是后盾，我感觉是能够对立来探讨的。 有什么标志性的技能或者技术是能够作为中级工程师和高级工程师的分水岭的吗？只有学会了这些技术和技能，就肯定能够降职中高级工程师？我想是没有的。 我分享一下我对初中高级工程师的了解，仅供参考。 高级工程师就是应届毕业生，标记是可能纯熟撑持中小型业务需要开发。他可能会撑持所有业务模块的开发，或者非核心业务模块的开发，同时也会撑持根底技术我的项目的开发。所以，如果应用是否参加根底技术我的项目来作为判断的话，是不对的。 中级工程师的标记是可能独立负责一个外围模块。成为一个模块负责人，这个模块的所有事件，领导都能够释怀交给你的时候，你就是中级工程师了。这个负责模块，不是指可能撑持波及这个模块相干的需要。而是指，你要： 理解它的全副代码、它的设计原理理解它在整个零碎中的地位、它跟其余模块的关联关系理解它的各种个性、现状、问题、将来的优化、倒退方向保护好它的文档能够很好地给其他人、你的领导形容分明，这个模块的所有内容负责它的所有高级工程师的标记是可能负责一个零碎。成为零碎负责人，率领我的项目成员一起，承当这个零碎的所有事件。比照中级工程师，负责的内容更大更加简单了，但实质没变，就是要综合能力。同时，中级工程师还只是单人作战，如果想要成为高级工程师，肯定须要理解团队的力量，并学习如何通过正当的项目管理伎俩，做好一个简单零碎。 这里中级和高级都提到了“负责”这个词，那具体怎么才算负责，是领导指派给你，让你负责一个外围模块，就算负责了吗？不是的。这里的“负责”是指可能齐全胜任，做出让领导称心的成绩，让领导十分释怀。 当然，每家公司对不同职级的能力要求是不一样的，你也能够齐全依照下面的能力形容来进行有针对性的学习和成长。 以上就是我对于中高级前端开发的了解，心愿可能给你带来一些启发。 【探讨问题】 你是如何了解中高级工程师的呢？ 欢送在评论区分享你的想法，一起探讨。 ----------------【END】---------------- 【往期文章】 给你介绍一个工具，帮你找到将来的致力方向 《程序员职场工具库》高效工作的神器 —— checklist 2023 年上半年最值得看的一篇文章 欢送加我v【longyiyiyu】，进行无累赘沟通，我会 长期职业倒退布局领导近期工作重点交换职场解惑面试辅导也欢送关注公众号【潜龙在渊灬】，播种程序员职场相干教训、晋升工作效率和职场效力、结交更多人脉。

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 有过上线游戏开发教训的小伙伴们都晓得，一款胜利上线的游戏想要实现营收，他要么具备登陆和领取的能力、要么具备播放不同类型的广告的能力。这些能力往往取决于咱们对接的不同渠道、不同的平台。平台通常包含安卓、苹果、微信小程序、抖音小程序等等。渠道的话就更多了，比方oppo、华为、vivo、利用宝等等，还有其余一些具备领取能力的厂家。往往泛滥的渠道他们提供的Sdk和接入文档都不同，上面追随笔者来看看对于Cocos独立游戏开发框架中对接Sdk的相干常识。 本文源码和源工程在文末获取，小伙伴们自行返回。 什么是SdkSdk指的是在不同的平台上开发和公布游戏的开发者提供的工具包。通过接入他们提供的一系列工具和服务，有助于游戏实现社交互动、领取解决、广告展现等性能，以及疾速集成不同的平台。实现接入之后，咱们的游戏才容许进一步在该平台公布游戏。 Sdk通常蕴含哪些接口SDK通常包含一系列接口，这些接口容许开发者与SDK进行交互并利用其性能。接入哪些接口取决于SDK的类型和用处，以下是一些常见的SDK接口类别： 初始化接口：通常，SDK须要在应用之前进行初始化。这个初始化接口通常包含配置SDK的参数、密钥或凭据，以确保SDK可能失常工作。用户治理接口：如果SDK须要用户身份验证或治理用户数据，那么它通常会提供用户治理接口。这包含用户登录、注册、登记、明码重置等操作。领取接口：如果SDK波及领取解决，它会提供领取接口，用于解决购买、订阅、付款等领取操作。这些接口通常与领取网关或第三方领取提供商集成。广告接口：对于广告SDK，它通常提供广告加载、展现、点击跟踪和处分回调等接口，以容许开发者在应用程序中集成广告。数据分析接口：SDK可能提供数据分析接口，用于收集应用程序的应用数据，以便开发者理解用户行为和利用性能。社交媒体接口：如果SDK与社交媒体互动无关，它可能提供分享、点赞、评论等社交性能的接口，以便开发者集成社交互动。Sdk管理器的实现1.申明Sdk接口类申明SdkInterface接口类。 定义渠道根本接口，包含登陆、登出、退出、切换账号、数据上报、领取接口。 定义广告接口，包含激励视频广告、banner广告、插屏广告、自定义广告。 定义分享接口。 2.定义默认Sdk默认的Sdk，Pc模拟器上应用该Sdk。 3.定义微信小程序Sdk实现根底接口。 实现广告接口和分享接口。 4.编写测试代码通过window["SDKTYPE"]去创立对应的Sdk。并且示例初始化、登陆、领取和分享接口。 5.PcSdk测试演示PcSdk测试演示1。 PcSdk测试演示2。 6.WxSdk测试演示点击我的项目-构建公布-抉择微信小游戏公布平台-勾选隐衷政策和用户协定-构建。 用微信开发者工具关上构建好的我的项目。 批改game.js,设置window["SDKTYPE"] WxSdk测试演示1。 WxSdk测试演示2。 总结创立自定义SDK管理器须要肯定的开发教训和技能，以确保它可能满足游戏我的项目的需要。这是一个简单的工作，但如果可能正确施行，能够大大简化游戏开发过程，进步我的项目的可维护性和可扩展性。实现Sdk管理器设计之后，无论咱们接入任何渠道或者任何平台，都蛟龙得水。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。什么是Sdk。Sdk通常蕴含哪些接口。源码通过关注“亿元程序员”发送"Sdk"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

弱小的 css 计数器css content 属性有很多实用的用法，这其中最为弱小的莫过于是计数器了，它甚至能够实现连 javascript 都不可能实现的成果，上面咱们一起来钻研一下吧。 css 计数器次要有 3 个关键点须要把握。如下: 首先须要一个计数器的名字，这个名字由使用者本人定义。计数器有一个计数规定，比方是 1,2,3,4...这样的递增形式，还是 1,2,1,2...这样的间断递增形式。计数器的应用，即定义好了一个计数器名字和计数规定，咱们就须要去应用它。以上 3 个关键点别离对应的就是 css 计数器的 counter-reset 属性,counter-increment 属性，和 counter()/counters()办法。上面咱们顺次来介绍这三个玩意儿。 counter-reset 属性counter-reset 属性叫做计数器重置，对应的就是创立一个计数器名字，如果能够，顺便也能够通知计数器的计数起始值,也就是从哪个值开始计数，默认值是 0,留神是 0,而不是 1。例如以下一个示例: html 代码如下: <p>开始计数，计数器名叫counter</p><p class="counter"></p>css 代码如下: .counter { counter-reset: counter;}.counter::before { content: counter(counter);}在浏览器中运行以上示例，你会看到如下图所示: 能够看到计数器的初始值就是 0,当初咱们批改一下 css 代码，如下所示: .counter { counter-reset: counter 1;}在浏览器中运行以上示例，你会看到如下图所示: 这次咱们指定了计数器的初始值 1，所以后果就是 1，计数器的初始值同样也能够指定成小数，正数，如-2,2.99 之类，只不过 IE 和 FireFox 浏览器都会认为是不非法的数值，当做默认值 0 来解决，谷歌浏览器也会间接显示正数，如下图所示: 低版本谷歌浏览器解决小数的时候是向下取整，比方 2.99 则显示 2,最新版本则当成默认值 0,来解决，如下图所示: ps: 当然不举荐指定初始值为正数或者小数。你认为到这里就完了吗？还没有，计数器还能够指定多个，每一个计数器之间用空格隔开，比方以下代码: ...

二分查找算法是一种在有序数组中查找特定元素的搜索算法。查找过程从数组的两头元素开始，如果两头元素正好是目标值，则查找过程完结；如果目标值大于或小于两头元素，则在数组大于或小于两头元素的那一半中查找，而不是整个数组。以下是一个二分查找的Java实现： java public class BinarySearch { // Returns index of x if it is present in arr[], else return -1 int binarySearch(int arr[], int x) { int l = 0, r = arr.length - 1; while (l <= r) { int m = l + (r - l) / 2; // Check if x is present at mid if (arr[m] == x) return m; // If x greater, ignore left half if (arr[m] < x) l = m + 1; // If x is smaller, ignore right half else r = m - 1; } // if we reach here, then element was not present return -1; } // Driver method to test above public static void main(String args[]) { BinarySearch bs = new BinarySearch(); int arr[] = {2, 3, 4, 10, 40}; int n = arr.length; int x = 10; int result = bs.binarySearch(arr, x); if (result == -1) System.out.println("Element not present in array"); else System.out.println("Element found at index " + result); } }这段代码首先初始化一个指向数组最右边和最左边的指针（l和r）。而后，它进入一个循环，在循环中，它会计算两头索引（m），查看该索引处的值是否等于x。如果等于，就返回该索引。否则，如果x大于两头值，就在右半局部持续查找；如果x小于两头值，就在左半局部查找。如果在整个数组中都找不到x，就返回-1。 ...

在 APP 的日常凋谢过程中，咱们常常能够看到上拉刷新、下拉刷新、左滑、右滑、触底加载等成果，那其中的原理是如何呢，又是如何实现的呢，上面就一探到底。这篇文章次要是讲述自定义滑动触摸组件的方放，兼容网页 H5 端、微信小程序端和 App 端。目录筹备工作原理剖析组件实现实战演练案例展现筹备工作在components新建一个q-swiper文件夹，并新建一个q-swiper.vue的组件；依照前一篇所说的页面构造，编写好预约的滑动触摸页面；原理剖析自定义滑动触摸组件就是采纳一般的办法进行判断滑动上下左右的间隔，从而实现滑动成果。 次要应用到的事件有ontouchstart、ontouchend、onmousedown和onmouseup。 依据pageX、pageY、clientX和clientY来判断滑动方向从而实现滑动性能。 组件实现筹备工作和原理剖析实现后，接下来写一个简略的自定义滑动模块组件。 模板局部<view class="q-swiper" @touchstart="handlerStart" @touchend="handlerEnd" @mousedown="handlerStart" @mouseup="handlerEnd"> <slot name="content"> <!-- 插槽自定义内容 --> </slot></view>款式局部.q-swiper { width: 100%; height: 100%;}脚本局部引入依赖包和属性设置import { reactive } from "vue";// 滑动信息const touchInfo = reactive({ touchX: "", touchY: "",});// 滑动类型const touchTypes = reactive({ left: { id: 1, name: "左滑", val: "left", }, right: { id: 2, name: "右滑", val: "right", }, up: { id: 3, name: "上滑", val: "up", }, down: { id: 4, name: "下滑", val: "down", },});// 发送事件const emits = defineEmits(["change"]);滑动办法定义// 滑动开始function handlerStart(e) { let { clientX, clientY } = e.changedTouches[0]; touchInfo.touchX = clientX; touchInfo.touchY = clientY;}// 滑动完结function handlerEnd(e) { let { clientX, clientY } = e.changedTouches[0]; let diffX = clientX - touchInfo.touchX, diffY = clientY - touchInfo.touchY, absDiffX = Math.abs(diffX), absDiffY = Math.abs(diffY), type = ""; if (absDiffX > 50 && absDiffX > absDiffY) { type = diffX >= 0 ? "right" : "left"; } if (absDiffY > 50 && absDiffX < absDiffY) { type = diffY < 0 ? "up" : "down"; } if (type) { console.log("滑动信息：", touchTypes[type]); emits("change", touchTypes[type]); }}实战演练写好滑动组件后，能够在 H5 、小程序和 App 外面应用了，上面是页面模板和脚本应用办法。 ...

机车整备场是铁路运输零碎中的重要组成部分，它承当着机车的培修、颐养和整备工作，对保障铁路运输的运维和平安起着至关重要的作用。 随着铁路运输的倒退、机车技术的不断进步，以及数字化转型的一直推动，数字孪生技术在机车整备场的利用越来越宽泛。数字孪生三维可视化技术的利用为机车整备工作带来了许多便当和效益，包含进步整备效率、优化培修计划和晋升安全性等方面。 图扑软件机车整备场三维可视化，从整备场全局调度、到各分段作业流程、再到各机车整备和工人在岗状况等多个维度，展现了数字孪生技术在机车整备场上的利用。 传统的机车整备工作通常须要依附人工察看和教训判断，而图扑 HT 数字孪生技术能够将整个机车的构造和运行状态，以三维模型的模式活泼形象出现进去。使培修人员能够更直观地理解机车各个部件之间的关系，并精确判断机车是否存在故障或须要培修的部位。由此一来，既能够节俭人力，又能够缩小因失误而造成的保护失误，进步整备效率。 全场整备打算传统机车整备场中的全场整备计划表，往往存在信息不及时、不精确的问题，不足实时监控和数据分析的性能，且整备场的工作量宏大，人工填写计划表须要消耗大量工夫和精力。此外，人为因素和传统的纸质记录形式，很容易呈现计划表中的信息谬误或问题脱漏，无奈提供实时的监控和反馈。 利用图扑软件 HT 数字孪生技术将理论物体的数字模型与实时数据相结合，在机车整备场中，能够通过建设机车的数字孪生模型，实时监控各类型机车的状态和整备过程，如进闸、综合检测、吸污、牵车出棚、总验收等等。数物联合能够及时发现问题并进行调整，进步整备场的工作效率和品质。 作业流程在传统的机车整备场中，作业流程图被广泛应用于领导和治理整备作业。然而，随着整备场作业规模和复杂程度的减少，传统流程图提供的动态信息，已无奈满足古代整备场的需要，并且流程图的传播和共享也存在肯定的艰难，不利于信息的及时沟通和合作。 通过图扑数字孪生整备场可视化平台，能够实时获取作业数据并将其进行模仿剖析，从而更精确地制订作业打算和调度。此外，还能够实现整备场作业流程的动静更新和优化，进步整备作业的效率和品质。 图扑 HT 监控平台还能实现对机车入库-查看-出库作业流程的可视化展现和共享，不便信息的传播和合作。 动静检测棚作业动静检测棚是机车整备场中重要的作业设施，用于对机车的动静监测和调试，培修人员通常须要进行各种简单操作，如监测机车的部件或调试机车的各项参数，以防止设施长期应用和不足保护导致的故障或损坏。 图扑 HT 通过虚拟现实技术将这些操作以三维模仿的模式活泼出现，使培修人员能够在虚拟环境中进行操作演练和培训，提前理解操作的具体步骤和注意事项，缩小意外事故的产生。 可视化平台内反对实时监测机车的运行状态、设施的工作状况以及以后的作业环境。当监测零碎发现潜在的安全隐患时，零碎会及时告知相干人员采取对应的措施进行预防和解决。 主动洗车机因为洗车机的设计和技术局限性，时常无奈将机车外表的污垢齐全荡涤洁净，导致洗车成果不尽如人意，不仅节约人力资源，也缩短了机车整备的工夫。 图扑 HT 三维可视化监控平台，通过数字孪生技术对洗车机进行三维仿真、测试、细节优化，施展其荡涤成果的稳定性，确保每一辆机车都能失去彻底地荡涤，进步其作业效率，从而节约工夫和人力老本。同时，近程监管也能对洗车过程中人员作业平安，提供必要平安预警。 图扑软件反对跨平台，挪动终端均可轻松关上场景，实现触屏设施的单指旋转、双指缩放、三指平移等操作，用户不用再为跨平台交互模式而懊恼。 上砂卸污棚该作业过程须要人工操作，作业工夫长且存在安全隐患，无奈满足疾速整备的需要。并且在传统模式下难以获取作业过程中的要害数据，如砂的使用量、污水的排放状况等，影响了管理人员的调度和监管时长。 图扑 HT 将理论物理零碎与其数字模型相结合，以现场数据状况为驱动，实时获取作业过程中的要害数据，实现对整个上砂卸污棚作业过程的模仿和监控。从而进步了作业效率和安全性，同时还为管理人员提供了科学决策反对。 通过数字孪生模型，管理人员能够对作业过程进行虚构仿真，评估不同计划的成果，并进行优化。这有助于进步整备场的管理水平，优化资源调度，晋升整备效率。 整备作业区因为机车数量宏大且作业简单，传统的人工治理形式无奈高效安顿作业流程，可能会导致整备工夫长、效率低下等问题的存在。另一方面纸质记录容易造成数据失落、信息不精确，记录剖析及整合也存在肯定艰难。 图扑软件数字孪生技术的利用，能够无效地解决传统机车整备场中整备区的作业现状问题。通过对整备区内待整区、作业区、验收区等各个环节机车状态进行数字建模仿真，再搭配 2D 数据面板，即可实现对整备区整体作业态势的全方位追踪跟进，不便作业人员实时把握以后的工作状态，以及对历史作业流程进行高效溯源比对。肯定水平上进步了经营监管效率，优化宏观层面的综合经营监管与兼顾指挥。 图扑 HT 可通过在整备区外部、周边装置传感器和监控设施，建设智能化和平安化的整备区。实现对作业环境和机车状态的实时可视化监测，做到及时发现问题，及时处理问题。 全场同步作业监管传统机车整备场全场同步监管存在信息不对称问题。针对流通阻塞状况，监管人员无奈及时获取实况信息，且反复工作耗时长。这不仅减少了营运老本，还影响了经营效率。 图扑 HT 三维可视化监控平台，以作业时间轴为主线，通过模仿整个机车整备过程，实时展现以后工夫下整备场全局的机车作业状况，实现全场同步监管。监管人员能够通过虚拟环境，实时理解整备场的状况，以此进行实时监控和调整。在进步监管成果的同时，还能够缩小人为谬误的产生。此外，自动化和智能化能够缩小繁琐的手续和反复的工作，监管人员进行近程监控和领导，进步整备过程的效率和准确性。 图扑软件数字孪生技术在传统机车整备场中具备广大的利用前景。通过数字化、自动化、智能化和平安化的伎俩，能无效地解决机车整备场作业现状中的问题，进步整备效率和作业安全性，实现机车整备作业的规范化和集成化治理。 图扑软件作为保持自主翻新的国家级高新技术企业，提供 BIM、GIS、VR、AR、XR、MR 、2D 组态/3D 组态等 Web 可视化利用解决方案。 ...

机车整备场是铁路运输零碎中的重要组成部分，它承当着机车的培修、颐养和整备工作，对保障铁路运输的运维和平安起着至关重要的作用。 随着铁路运输的倒退、机车技术的不断进步，以及数字化转型的一直推动，数字孪生技术在机车整备场的利用越来越宽泛。数字孪生三维可视化技术的利用为机车整备工作带来了许多便当和效益，包含进步整备效率、优化培修计划和晋升安全性等方面。 图扑软件机车整备场三维可视化，从整备场全局调度、到各分段作业流程、再到各机车整备和工人在岗状况等多个维度，展现了数字孪生技术在机车整备场上的利用。 传统的机车整备工作通常须要依附人工察看和教训判断，而图扑 HT 数字孪生技术能够将整个机车的构造和运行状态，以三维模型的模式活泼形象出现进去。使培修人员能够更直观地理解机车各个部件之间的关系，并精确判断机车是否存在故障或须要培修的部位。由此一来，既能够节俭人力，又能够缩小因失误而造成的保护失误，进步整备效率。 全场整备打算传统机车整备场中的全场整备计划表，往往存在信息不及时、不精确的问题，不足实时监控和数据分析的性能，且整备场的工作量宏大，人工填写计划表须要消耗大量工夫和精力。此外，人为因素和传统的纸质记录形式，很容易呈现计划表中的信息谬误或问题脱漏，无奈提供实时的监控和反馈。 利用图扑软件 HT 数字孪生技术将理论物体的数字模型与实时数据相结合，在机车整备场中，能够通过建设机车的数字孪生模型，实时监控各类型机车的状态和整备过程，如进闸、综合检测、吸污、牵车出棚、总验收等等。数物联合能够及时发现问题并进行调整，进步整备场的工作效率和品质。 作业流程在传统的机车整备场中，作业流程图被广泛应用于领导和治理整备作业。然而，随着整备场作业规模和复杂程度的减少，传统流程图提供的动态信息，已无奈满足古代整备场的需要，并且流程图的传播和共享也存在肯定的艰难，不利于信息的及时沟通和合作。 通过图扑数字孪生整备场可视化平台，能够实时获取作业数据并将其进行模仿剖析，从而更精确地制订作业打算和调度。此外，还能够实现整备场作业流程的动静更新和优化，进步整备作业的效率和品质。 图扑 HT 监控平台还能实现对机车入库-查看-出库作业流程的可视化展现和共享，不便信息的传播和合作。 动静检测棚作业动静检测棚是机车整备场中重要的作业设施，用于对机车的动静监测和调试，培修人员通常须要进行各种简单操作，如监测机车的部件或调试机车的各项参数，以防止设施长期应用和不足保护导致的故障或损坏。 图扑 HT 通过虚拟现实技术将这些操作以三维模仿的模式活泼出现，使培修人员能够在虚拟环境中进行操作演练和培训，提前理解操作的具体步骤和注意事项，缩小意外事故的产生。 可视化平台内反对实时监测机车的运行状态、设施的工作状况以及以后的作业环境。当监测零碎发现潜在的安全隐患时，零碎会及时告知相干人员采取对应的措施进行预防和解决。 主动洗车机因为洗车机的设计和技术局限性，时常无奈将机车外表的污垢齐全荡涤洁净，导致洗车成果不尽如人意，不仅节约人力资源，也缩短了机车整备的工夫。 图扑 HT 三维可视化监控平台，通过数字孪生技术对洗车机进行三维仿真、测试、细节优化，施展其荡涤成果的稳定性，确保每一辆机车都能失去彻底地荡涤，进步其作业效率，从而节约工夫和人力老本。同时，近程监管也能对洗车过程中人员作业平安，提供必要平安预警。 图扑软件反对跨平台，挪动终端均可轻松关上场景，实现触屏设施的单指旋转、双指缩放、三指平移等操作，用户不用再为跨平台交互模式而懊恼。 上砂卸污棚该作业过程须要人工操作，作业工夫长且存在安全隐患，无奈满足疾速整备的需要。并且在传统模式下难以获取作业过程中的要害数据，如砂的使用量、污水的排放状况等，影响了管理人员的调度和监管时长。 图扑 HT 将理论物理零碎与其数字模型相结合，以现场数据状况为驱动，实时获取作业过程中的要害数据，实现对整个上砂卸污棚作业过程的模仿和监控。从而进步了作业效率和安全性，同时还为管理人员提供了科学决策反对。 通过数字孪生模型，管理人员能够对作业过程进行虚构仿真，评估不同计划的成果，并进行优化。这有助于进步整备场的管理水平，优化资源调度，晋升整备效率。 整备作业区因为机车数量宏大且作业简单，传统的人工治理形式无奈高效安顿作业流程，可能会导致整备工夫长、效率低下等问题的存在。另一方面纸质记录容易造成数据失落、信息不精确，记录剖析及整合也存在肯定艰难。 图扑软件数字孪生技术的利用，能够无效地解决传统机车整备场中整备区的作业现状问题。通过对整备区内待整区、作业区、验收区等各个环节机车状态进行数字建模仿真，再搭配 2D 数据面板，即可实现对整备区整体作业态势的全方位追踪跟进，不便作业人员实时把握以后的工作状态，以及对历史作业流程进行高效溯源比对。肯定水平上进步了经营监管效率，优化宏观层面的综合经营监管与兼顾指挥。 图扑 HT 可通过在整备区外部、周边装置传感器和监控设施，建设智能化和平安化的整备区。实现对作业环境和机车状态的实时可视化监测，做到及时发现问题，及时处理问题。 全场同步作业监管传统机车整备场全场同步监管存在信息不对称问题。针对流通阻塞状况，监管人员无奈及时获取实况信息，且反复工作耗时长。这不仅减少了营运老本，还影响了经营效率。 图扑 HT 三维可视化监控平台，以作业时间轴为主线，通过模仿整个机车整备过程，实时展现以后工夫下整备场全局的机车作业状况，实现全场同步监管。监管人员能够通过虚拟环境，实时理解整备场的状况，以此进行实时监控和调整。在进步监管成果的同时，还能够缩小人为谬误的产生。此外，自动化和智能化能够缩小繁琐的手续和反复的工作，监管人员进行近程监控和领导，进步整备过程的效率和准确性。 图扑软件数字孪生技术在传统机车整备场中具备广大的利用前景。通过数字化、自动化、智能化和平安化的伎俩，能无效地解决机车整备场作业现状中的问题，进步整备效率和作业安全性，实现机车整备作业的规范化和集成化治理。 图扑软件作为保持自主翻新的国家级高新技术企业，提供 BIM、GIS、VR、AR、XR、MR 、2D 组态/3D 组态等 Web 可视化利用解决方案。 ...

1. 手搓 Promiseconst PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected";function MyPromise(fn) { // 保留初始化状态 var self = this; // 初始化状态 this.state = PENDING; // 用于保留 resolve 或者 rejected 传入的值 this.value = null; // 用于保留 resolve 的回调函数 this.resolvedCallbacks = []; // 用于保留 reject 的回调函数 this.rejectedCallbacks = []; // 状态转变为 resolved 办法 function resolve(value) { // 判断传入元素是否为 Promise 值，如果是，则状态扭转必须期待前一个状态扭转后再进行扭转 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 保障代码的执行程序为本轮事件循环的开端 setTimeout(() => { // 只有状态为 pending 时能力转变， if (self.state === PENDING) { // 批改状态 self.state = RESOLVED; // 设置传入的值 self.value = value; // 执行回调函数 self.resolvedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 状态转变为 rejected 办法 function reject(value) { // 保障代码的执行程序为本轮事件循环的开端 setTimeout(() => { // 只有状态为 pending 时能力转变 if (self.state === PENDING) { // 批改状态 self.state = REJECTED; // 设置传入的值 self.value = value; // 执行回调函数 self.rejectedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 将两个办法传入函数执行 try { fn(resolve, reject); } catch (e) { // 遇到谬误时，捕捉谬误，执行 reject 函数 reject(e); }}MyPromise.prototype.then = function(onResolved, onRejected) { // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数 onResolved = typeof onResolved === "function" ? onResolved : function(value) { return value; }; onRejected = typeof onRejected === "function" ? onRejected : function(error) { throw error; }; // 如果是期待状态，则将函数退出对应列表中 if (this.state === PENDING) { this.resolvedCallbacks.push(onResolved); this.rejectedCallbacks.push(onRejected); } // 如果状态曾经凝固，则间接执行对应状态的函数 if (this.state === RESOLVED) { onResolved(this.value); } if (this.state === REJECTED) { onRejected(this.value); }};2. 手搓 Promise.thenthen 办法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，咱们应用一个 callbacks 数组先把传给then的函数暂存起来，等状态扭转时再调用。 ...

时隔一年之久终于迎来的大更新，本次次要对UI大换血，晋升了用户视觉效果的同时，还加强了相干应用上的体验。微信小程序扫码中转～ 首先调整了首页的内容布局，更换了全套icon,在顶部减少了搜寻框。 色系上也从原来的黑白红改成了绿色，视觉上也更能让公众承受。 在以后地位的右侧减少了周边详情的入口，点击进入页面能够查看所选地位的POI举荐。 回到首页点击上面的快捷查问能够在地图上展现标记的地位，点击标记点能够查看地位详情。 点击地图中的标记点，再点击下方选项卡中的【路线】，起点即为选中的地位，终点为以后地位。 能够抉择上方的出行形式，点击路线查问进入页面即可提供路线布局服务。 这里为了不便演示，咱们抉择终点起点间隔较远的地位。 切换【驾车】【公交】【骑行】【步行】将提供不同的路线布局，在抉择【公交】时提供不同的换乘计划，并且在地图上标注了上下车地位，以及不同车辆路线显示不同的色彩。这也是本次更新次要应用体验上的晋升。其余的局部大家能够在应用中缓缓摸索，欢送在评论区留言提出倡议，在下一个版本中更新～ 微信小程序扫码中转～

侦听器️侦听器和计算属性都能够用于侦听响应式数据的变动，如果须要在数据变动后执行操作，批改依赖项，那么就应该应用侦听器。watch和watchEffect都能够侦听数据源并执行回调操作，不同的是他们追踪响应式依赖的形式。 watch：只追踪指定的数据源，所以能够准确地管制回调函数的触发机会 watchEffect：主动追踪回调内的响应式数据，相比watch更加简洁，但有时其响应性依赖关系会不那么明确。 视频链接 watch函数第一个参数须要指定须要侦听的数据。能够是响应式数据(ref、reactive、computed...)、getter函数、也能够是以上数据源组成的数组,也就是同时侦听多个数据源。 第二个参数是在侦听到数据变动时，须要执行的回调办法。该回调办法有两个参数，第一个为数据更新后的值，第二个为数据更新前的值。 import { ref, watch } from 'vue'const count = ref(0)const price = ref(10)// 侦听响应式数据watch(count, (newVal, oldVal) => { // 每当count更新时，都会执行这里的函数 console.log("new count:", newVal) // 1 更新后的值 console.log("old count:", oldVal) // 0 更新前的值})// 侦听getter函数watch( () => count.value * price.value, (newVal, oldVal) => { // 每当count或者price更新时，都会执行这里的函数 console.log("新总价:", newVal) // 10 更新后的值 console.log("旧总价:", oldVal) // 0 更新前的值 })// 应用数组侦听多个数据源watch( [count, () => price.value], (newValArr, oldValArr) => { // 每当count或者price更新时，都会执行这里的函数 // 须要留神此时的回调数据为数组 // newValArr[0] count // newValArr[1] () => price.value] // oldValArr 同上 console.log(newValArr) // [1, 10] 更新后的值 console.log(oldValArr) // [0, 10] 更新前的值 })count.value++ // 更新count值可选配置以上两个参数在侦听器中是必传的,除此之外watch函数还有一些可选配置。 ...