Javascript

关于javascript:OFD-标准解析渲染

进度：开发中参考文件：GBT_33190-2016_电子文件存储与替换格局版式文档.pdf Demopdf,ofd 文件预览：http://sangongli.top:8082/#/doc/pdf测试文件：https://gitee.com/hs-xhl/test-docs同步github：https://github.com/XiahlHS/hs-vue3-framework TODOofd 印章解析渲染Other1.ofd渲染正在开发中，还有好多问题须要欠缺。

关于javascript:为什么日本的网站看起来如此不同

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home 该篇文章探讨了日本网站外观与设计的独特之处。作者指出日本网站设计与东方设计存在显著差别。文章首先强调了日本网站的视觉格调，包含丰盛的色调、可恶的角色和简单的排版。作者解释了这种格调背地的文化和历史因素，包含日本的印刷传统和动漫文化。文章还探讨了日本网站的信息密集型布局，这种布局适应了日本语言的特点，使得页面可能包容大量文字和图像。此外，文章提到了日本网站的性能丰富性，如弹出式窗口和互动元素，以及这些元素在用户体验方面的作用。作者强调了日本网站在技术和翻新方面的提高，只管在过来存在技术限度。最初，文章提出了一些对于如何将日本网站设计的元素利用到其余文化中的倡议。上面是注释~~~ 多年来，我敌人与日本的网站有过许多接触——无论是钻研签证要求、打算旅行，还是简略地在线订购货色。而我花了很长时间才适应这些网站上的大段文字、大量应用娇艳色彩和10多种不同字体的设计，这些网站就像是间接冲着你扔过去的。尽管有许多网站都采纳了更简洁、易于导航的设计，适应了东方网站的用户，然而值得探索的是为什么这种更简单的格调在日本依然流行。只是为了明确起见，这些不是过来的陈迹，而是保护的网站，许多状况下，它们最初一次更新是在2023年。咱们能够从几个角度来剖析这种设计办法：字体和前端网站开发限度技术倒退与停滞机构数字素养（或其不足）文化影响与大多数话题一样，很可能没有一个正确的答案，而是这个网站设计是随着工夫的推移而相互作用的各种因素的后果。字体和前端网站开发限度对于会一些根本排版常识、把握适当软件并有一些闲暇工夫的人来说，为罗马化语言发明新字体可能是一项乏味的挑战。然而，对于日语来说，这是一个齐全不同档次的致力。要从头开始创立英文字体，须要大概230个字形——字形是给定字母的单个示意（A a a算作3个字形）——或者如果想笼罩所有基于拉丁字母表的语言，则须要840个字形。对于日语而言，因为其三种不同的书写零碎和有数的汉字，须要7,000至16,000个字形甚至更多。因而，在日语中创立新字体须要有组织的团队单干和比其拉丁字母表的同行们更多的工夫。这并不令人意外，因而中文和（汉字）韩文字体也面临着相似的工作量，这导致这些语言通常被称为CJK字体所笼罩。因为越来越少的设计师面对这个非凡的挑战，建设网站时可供选择的字体也越来越少。再加上不足大写字母和应用日文字领会导致加载工夫较长，因为须要援用更大的库，这就不得不采纳其余形式来创立视觉档次。以美国和日本版的星巴克主页为例：美国的：日本的就这样，咱们就能够解释为什么许多日本网站偏向于用文字较多的图片来示意内容类别了。有时，你甚至会看到每个磁贴都应用本人定制的字体，尤其是在限时优惠的状况下。技术倒退/停滞与机构数字素养如果你对日本感兴趣，你可能对古代与过期技术之间的鲜明对比有所理解。在许多中央，先进的技术与齐全过期的技术并存。作为世界机器人领导者之一的国家，在台场人工岛上搁置了一座真人大小的高达雕像，却依然依赖软盘和传真机，面对2022年Windows资源管理器敞开时感到恐慌。在德国，前总理安格拉·默克尔在2013年称互联网为“未知领域”后，受到全国范畴的讥笑。然而，这在2018年被前网络安全部长樱田义孝轻易地超过，他宣称本人从未应用过电脑，并且在议会被问及USB驱动器的概念时，他被引述为“迷惑不解”（起源）。对于那些尚未有机会窥探幕后幻象的人来说，这可能听起来很奇怪，但日本在技术素养方面重大落后于更新打算。因而，能够推断这些问题也在妨碍日本网站设计的倒退。而具体来说，日本的网页设计正面临着这一挑战——只需在谷歌或Pinterest上搜寻日本海报设计，就能看到一个十分不同和现代化的平面设计程度。文化影响在剖析任何设计抉择时，不应低估文化风俗、偏向、偏见和偏好的影响。然而，“这是文化”的说法可能过于简单化，并被用作为各种差别辩解的借口。而且，解脱本人的观点偏见是艰难的，甚至可能无奈齐全实现。因而，从咱们的角度来看，看这个网站很容易.. 感觉手足无措，认为设计蹩脚，而后就此打住。因为谁会应用这个凌乱不堪的网站呢？这就是因为无知而导致乏味的见解被忽视的中央。当初，我没有资格通知你日本文化如何影响了这种设计。然而，我很侥幸可能从与日本外乡人士的交谈中取得启发，以及在日本工作和生存的教训。与这个剖析相干的一次对话实际上不是对于网站，而是对于YouTube的缩略图 - 有时候它们也同样令人手足无措。对于习惯了许多东方频道所采纳的极简和时尚设计——只有一个题目、反复的色调搭配和无限的字体——下面的缩略图的确有些难以承受。然而，当我询问一个日本外乡人士为什么许多极受欢迎频道的缩略图都是这样设计时，他对这种设计被视为令人困惑的想法感到诧异。他认为日本的设计办法使视频看起来更加引人入胜，提供了一些信息碎片，从而使咱们更容易做出是否乏味的理智决策。相比之下，我给他看的英文视频缩略图在他看来十分含糊和无聊。兴许正是这种寻求信息的态度导致了咱们的观点如此不同。在日本，对危险的回避、重复核查和对迅速做出决策的犹豫显著高于东方国家。这与更加集体主义的社会心态严密相连——例如，在将文件发送给商业伙伴之前进行两次（或三次）查看可能须要更长时间，但谬误的危险显著升高，从而防止了任何参与者丢面子的状况产生。只管有人认为这只实用于足够高的赌注，而蛊惑外国游客仿佛不符合条件——搜寻一下“Engrish”这个词，而后感激我吧。回到网站设计，这种文化角度有助于解释为什么在线购物、新闻和政府网站在内部观察者看来经常是“最蹩脚的罪犯”。毕竟，这些正是须要大量细节间接对应于做出良好购买决策、高效地放弃最新信息或确保你领有某个特定程序的所有必要信息的状况。乏味的是，对于美国人和中国/日本人如何感知信息，也有相当多的钻研。几项钻研的后果仿佛表明，例如，日本人更加整体地感知信息，而美国人偏向于抉择一个焦点来疏导他们的注意力（起源）。这可能给咱们提供了另一个线索，解释为什么即便在日语能力较高的状况下，西方人对这类网站也感到艰难。后但并非最不重要的是，必须说的是，网站并不是在一个在线真空中存在。而且，各种媒体，从小册子或杂志到地铁广告，也应用了尽可能多地压缩信息的布局，人们可能曾经习惯了这种无处不在的形式，以至于没有人已经想过质疑它。长话短说，这并不是为了找到题目问题的相对答案，也不是为了增强日本人独特性的观点，就像日本人论一样。相同，尤其是在看到了几次关注一个解释为“真正答案”的探讨之后，我想展现科技、历史和文化影响的广度，这些最终塑造了这种差别。交换有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于javascript:服务端主动推送消息Serverclient-eventsSSE

前言家喻户晓，用http能够实现从客户端申请服务端的音讯，用websocket能够实现客户端和服务器的双向通信，但用SSE实现服务端被动推送的比拟少。 SSE相当于http的长处是能够由服务端被动推送音讯。SSE相当于websocket的长处是断开连接后能够主动重连。应用场景音讯对立推送数据实时更新代替轮询应用办法node的话，能够用阮老师的例子node实现SSE python能够参考上面的代码 from flask import Flask, Responseimport timeimport jsonapp = Flask(__name__)def message_to_send(): time.sleep(5) return json.dumps({"message": "hello"})@app.route("/stream")def stream(): def event_stream(): while True: print("send") yield "data: {}\n\n".format(message_to_send()) return Response( event_stream(), mimetype="text/event-stream", headers={"Access-Control-Allow-Origin": "*"}, )if __name__ == "__main__": app.run()注意事项须要服务端设置容许跨域须要设置mimetype有连贯个数限度，每个域名下如同是限度6个如果想测试主动重连，能够先敞开服务端的服务再关上

关于javascript:js-截取视频第一帧转成File图片格式

1.电脑系统 win11专业版2.开发环境 vue2+element3.在开发的过程中,咱们会遇到截取视频第一帧转换成图片的需要,上面我来分享一下办法: // 上传视频的时候调用对应的办法videoRef.oncanplay = () => { let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); canvas.width = videoRef.clientWidth; // 获取视频宽度 canvas.height = videoRef.clientHeight; // 获取视频高度 // 利用canvas对象办法绘图 ctx.drawImage(videoRef, 0, 0, videoRef.clientWidth, videoRef.clientHeight); // 转换成base64模式 const imgBase64 = canvas.toDataURL("image/png"); const fileName = resultFileName + ".png"; console.log(dataURLtoFile(imgBase64,fileName)); //生成对应的file文件 const fileData = dataURLtoFile(imgBase64,fileName);}export const dataURLtoFile = (dataurl, fileName) => { let binary = atob(dataurl.split(",")[1]); let mime = dataurl.split(",")[0].match(/:(.*);/)[1]; let array = []; for (let i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } let fileData = new Blob([new Uint8Array(array)],{ type:mime }); return new File([fileData],fileName,{type:mime});}99.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。 ...

关于javascript:G6-50Beta-闪亮登场-

Hi 敬爱的用户，公布稿咱也不想写了，就让 GPT 老师发来喜报吧：瞧瞧，咱们正如获至宝地宣告：AntV G6 5.0 Beta 版本明天闪亮退场！这是一次引爆你视觉感官的数据可视化盛宴，业余又优雅，必须让你大呼过瘾！高性能渲染 & 计算咱们拥速度嗖嗖嗖的渲染技术！G6 5.0 Beta 采纳高性能 Canvas 和 WebGL 渲染，加上 WASM 和 GPU 布局的酷炫加持，你想玩大规模数据，咱们都能秒杀！几千点边，布局计算就是一瞬间的事！ 3D大图嗨，别以为咱们只能做平平无奇的 2D 图可视化！G6 5.0 Beta 反对了超强 3D 大图能力，让你纵情嗨玩简单宏大的图数据吧！唰唰唰，晦涩的渲染和交互体验等你来挑战！视觉和动画标准咱们的设计师小伙伴们可是费尽心思打造了一整套图表视觉和动画标准哦！从色板到图形排列，只有你敢想，就能通过简略的 JSON Spec 实现！让你的图表炫出新高度！元素图形动画、视口动画，简略定义，优雅出现：信息分层，让大图不再凌乱：新增主题机制你想要什么样的格调？G6 5.0 Beta 所有随你！新增主题机制，让你纵情定制图表的款式主题，无论是与品牌统一，还是谋求共性独特，咱们都能满足你的要求！树图和图交融是时候让你的图死记硬背了 —— 一般图用树图布局和交互，能行！森林，能画！树图加环，能画！G6 5.0 Beta 反对图数据和树图数据的读取，提供通用的交互和布局性能。不论是网络图数据还是嵌套构造数据，咱们都给你全方位解决方案！数据处理器小小的数据转换还有什么好放心的？G6 5.0 Beta 提供了灵便的数据处理器扩大，让你自由发挥解决数据的能力！筛选、转换，你想怎么玩都行！后端给的数据纷纷扰扰？v4 数据格式一键转换为 v5 格局？基本不在怕的！ ⛳️ 全民插件化哇哦！全民插件化，所有皆可是扩大！自定义写法 = 内置写法！你能够为图表削减各种离奇的交互方式，让你的图表充斥创意和视觉冲击力！你的想象力是咱们的极限！包体积优化小小的体积，大大的能力，让你的我的项目轻松上阵！咱们就是要给你最好的性能和最快的加载速度！还有一些渺小而美妙的扭转轮廓包裹 Hull 反对文本配置；折线反对主动避障；文本主动适配宽度；采纳长期层画布晋升交互性能；图例主动从画布中获取款式。这些性能咋用呢？干下这篇十全大补文，你就都懂了～ ...

关于javascript:面试官说说TypeScript扩展类型定义

小册这是我整顿的学习材料，十分零碎和欠缺，欢送一起学习古代JavaScript高级小册深入浅出Dart古代TypeScript高级小册linwu的算法笔记扩大类型定义在 TypeScript 中，咱们能够通过申明文件（.d.ts 文件）来为现有的 JavaScript 库提供类型定义，或者为现有的类型增加额定的属性和办法。这个过程通常被称为“类型申明扩大”。在这篇文章中，咱们将具体探讨如何通过申明文件扩大类型定义。什么是申明文件？在 TypeScript 中，申明文件是一种以 .d.ts 为扩展名的非凡文件，它不蕴含具体的实现，只蕴含类型申明。这些文件通常用来为已有的 JavaScript 库提供类型定义，使得咱们能够在 TypeScript 代码中更平安、更不便地应用这些库。申明文件的次要内容是类型申明，包含变量、函数、类、接口等的类型定义。这些类型申明提供了一种形容 JavaScript 代码的构造和行为的形式，使得 TypeScript 编译器可能了解和查看 JavaScript 代码。 // types.d.tsdeclare var foo: string;declare function bar(baz: number): boolean;在下面的申明文件中，咱们申明了一个全局变量 foo 和一个全局函数 bar，并别离给它们提供了类型申明。 declare当咱们在 TypeScript 中编写申明文件时，咱们应用 declare 关键字来申明全局变量、函数、类、接口等类型。 declare 关键字用于通知 TypeScript 编译器某个标识符的类型，而不须要理论的实现代码。它用于在申明文件中形容 JavaScript 代码的类型。上面是一些常见的用法： 1. 申明全局变量：declare const myGlobal: string;这个申明通知 TypeScript 编译器，存在一个名为 myGlobal 的全局变量，它的类型是 string。 2. 申明全局函数：declare function myFunction(arg: number): string;这个申明通知 TypeScript 编译器，存在一个名为 myFunction 的全局函数，它承受一个 number 类型的参数，并返回一个 string 类型的值。 ...

关于javascript:图扑软件-参展用友-2023-全球商业创新大会

2023 年 8 月 18 日，以“数据驱动，智能经营”为主题的用友 2023 寰球商业翻新大会，在上海国家会展中心圆满举办。此次大会旨在汇聚寰球商业智慧，用数智化翻新客户价值、开释企业潜能，助力更多的企业成为数智企业。图扑软件（Hightopo）作为用友的策略生态搭档受邀参展本次峰会，与企业领导、业界同仁、业界专家，独特研究新期间中国企业如何利用数字化技术继续进行商业翻新，晋升治理经营能力，推动企业数智化转型。在沉迷式“数智企业体验馆”内，图扑软件展区凭借丰盛的可视化内容，且步人后尘的画面格调，吸引了泛滥领导、业界专家、参展商和观众的驻足参观与征询。大家对所展现的新技术、新成绩以及将来的发展前景，体现出了浓重的趣味。参展期间，图扑软件展现了基于自研引擎 HT for Web 打造的一站式数字孪生可视化解决方案。计划涵盖电力能源、孪生工程、电信机房、智慧交通、园区楼宇、智慧水务等多个畛域，深度交融了包含集控核心、设施运行、故障诊断、智慧巡检、应急救济等多类型数智化经营体系的业务场景。目前，图扑软件提供二三维可视化轻量化引擎、GIS、BIM 以及视频交融等技术，可接入歪斜摄影、GIS 空间信息数据、智能物联网 IoT 数据以及大数据系统平台等数据信息。融聚数智新生态，创赢行业新价值推动数智化转型，成为数智企业，已成为新期间企业高质量倒退的外围门路之一。随着以大模型为根底的 AI 遍及利用时代的到来，商业翻新从此前的数字商业进入到数字化和智能化并重的全面数智商业翻新的新阶段。峰会上，用友携手业界大咖、生态搭档、企业代表、投资人、业余学者等万余人，深入探讨主题化交融翻新、全局数据治理、遍及 AI 利用、降级数智底座等企业关注的热点话题。期间，诸多出名企业家和专家学者发表了精彩演讲，用友网络董事长兼 CEO 王文京在致辞中示意，长期单干、共赢倒退是用友的搭档单干方针。自图扑软件与用友达成生态搭档策略单干以来，单方始终保持严密单干，依靠各自的技术积攒和行业实际，在工业、交通、城市、通信等多业务场景交融翻新，累计为上百家企业提供专业化、行业化、规模化的数智化综合服务。深耕行业，做企业服务翻新的生态引领者作为国内外当先的 2D 和 3D 数据可视化前端图形技术畛域高科技创新型企业，图扑软件致力于成为企业数字化转型的最佳赋能搭档。专精可视化技术我的项目劣势，通过实时展现运维、生产、治理等信息画面，间接升高企业运维老本，助推企业实现全产业链数字化和智能化的将来产业新模式。图扑软件自研 HT for Web 产品可帮忙传统企业打造线上 3D 监控场景，通过姿态控制、实时数据监测显示、设施近程管制以及零碎漫游等人机交互性能，实现对三维模型的全面出现和精准操作。使得企业可能更加高效、智能地进行生产和治理，为实现可继续倒退提供了重要的技术支持。先后与泛滥行业龙头企业达成密切合作，利用自研 HT for Web 产品，为其提供智能化革新我的项目服务。已笼罩工业制作、楼宇园区、轨道交通、城市政务、水务能源、新基建、智慧运维、国防公安、医疗科研、金融军工等各个行业。数百个工业互联网可视化我的项目施行教训，造成了⼀整套实践证明高效开发流程和生态系，可疾速实现现代化、高性能、跨平台桌面 Mouse/挪动 Touch/虚拟现实 VR 图形展现成果及交互体验。您能够至图扑软件官网查看更多案例及成果：图扑软件 - 构建先进 2D 和 3D 可视化所须要的所有

关于javascript:基于装饰器我劝你不要在业务代码上装逼

基于装璜器——我劝你不要在业务代码上装逼！！！装璜器模式的定义在传统的面向对象语言中，给对象增加性能常应用继承的形式，但继承的形式并不灵便，会带来一些许多问题，如：超类和子类存在强耦合性，也就是说当扭转超类时，子类也须要扭转。而装璜器模式的呈现扭转的这种形式，装璜器模式可在不扭转现有对象解构的根底上，动静地为对象增加性能。传统的 JavaScript 装璜器var plane = { fire: function () { console.log("一般子弹"); },};var missleDecorator = function () { console.log("发射导弹");};var atomDecorator = function () { console.log("发射原子弹");};var fire1 = plane.fire;plane.fire = function () { fire1(); missleDecorator();};var fire2 = plane.fire;plane.fire = function () { fire2(); atomDecorator();};plane.fire();/**一般子弹发射导弹发射原子弹 */装璜函数在 JavaScript 中，简直一切都是对象，其中函数也被成为对象，在平时的开发中，咱们都在和函数打交道。在给对象扩大属性和办法时，很难在不改变原性能函数的状况下，给函数增加一些额定的性能，最间接的粗犷形式就是间接改写函数，但这是最差的形式，这违反了凋谢——关闭准则。如下： function a(){console.log(1);}// 改写：function a(){console.log(1);// 新性能console.log(2);}很多时候，咱们都不想去触碰之前的一些代码，但须要增加性能，所以如果须要在不扭转原性能函数的状况下，给函数增加性能。可应用以下形式：要想完满的给函数增加性能，可应用 AOP 来装璜函数。 AOP：一种编程标准，通过将关注点从主业务逻辑中剥离进去并独自解决，以此来进步代码的可读性和重用性。如下： Function.prototype.before = function (beforeFn) {var _self = this;return function () { beforeFn.apply(this, arguments); return _self.apply(this, arguments);};};Function.prototype.after = function (afterFn) {var _self = this;return function () { var ret = _self.apply(this, arguments); afterFn.apply(this, arguments); return ret;}}// before 和 after 函数都接管一个函数作为参数，这个函数也就是新增加的函数(外面也就是要增加的新性能逻辑)。// 而before 和 after 函数区别在于在是原函数之前执行还是之后执行。AOP 函数的应用 ...

关于javascript:JavaScript集成公式编辑器-LatexEasy

在线示例https://latexeasy.com/en/demo/sdk 应用形式根底应用形式<iframe id="liveEditor" frameborder="0" style="width:100%;height:400px;border:0;outline:none;" src="https://latexeasy.com/editor"></iframe><script src="https://latexeasy.com/vendor/LatexEasyEditor/editor/sdk.js"></script><script> var letexeasy = new window.LatexEasy(document.getElementById('liveEditor')); letexeasy.on('ready', function () { console.log('LatexEasy.ready'); letexeasy.call('set.latex', { latex: 'x=\\frac {-b\\pm \\sqrt \{\{b\}^\{2\}-4ac\}\} {2a}' }); }); letexeasy.init();</script>办法set.latex 设置内容letexeasy.call('set.latex', { latex: 'x=\\frac {-b\\pm \\sqrt \{\{b\}^\{2\}-4ac\}\} {2a}'});get.latex 获取latex内容letexeasy.call('get.latex', {}, function(data){ console.log(data);});get.svg 获取svg内容letexeasy.call('get.svg', {}, function(data){ console.log(data);});事件ready 初始化实现latexeasy.on('ready', function(){ console.log('latex init finished');});

关于javascript:常用的处理文本的正则

1. 匹配子字符串A或子字符串B正则表达式：/ab|cd/应用场景：将一个长字符串依据子字符串A或子字符串B为分隔符进行分隔。 'a;b；c;d'.split(/;|；/g);// ['a', 'b', 'c', 'd']2. 保留匹配的文本正则表达式：/(a|b)/应用场景：将一个长字符串依据子字符串A或子字符串B为分隔符进行分隔，并且分隔后果蕴含匹配到的文本。 'a;b；c;d'.split(/(;|；)/g);// ['a', ';', 'b', '；', 'c', ';', 'd']3. 匹配指定字符集正则表达式：/[abc]/应用场景：将匹配到的文本转换成须要的文本。 'a;b；c;d'.replace(/；/g, ';');// 'a;b;c;d'4. 匹配以...结尾的字符串正则表达式：/a+$/应用场景：删除开端分号。 'a;b；c;d；'.replace(/[;|；]/g, '');// 'a;b；c;d'

关于javascript:编译wasm-Web应用

刚学完WebAssembly的入门课，卖弄一点入门常识。首先咱们晓得wasm是目标语言，是一种新的V-ISA规范，所以编写wasm利用，失常来说不会间接应用WAT可读文本格式，更不会用wasm字节码；而是应用其余高级语言编写源代码，通过编译后失去wasm利用。课程中应用了C++来编写源代码，所以这里我也用C++来编写demo。 wasm的运行环境次要分为两类，一类是Web浏览器，另一类就是out-of-web环境，运行于Web浏览器的wasm利用次要应用Emscripten来编译失去，因为它会在编译过程中，为所编译代码在Web平台的性能适配性进行肯定的调整。针对Web平台的编译对于性能适配性的调整，能够从上面这个例子中失去体现。编码首先咱们编写一段性能简略的C++源代码： #include <iostream>extern "C" { // 避免Name Mangling int add(int x, int y) { return x + y; }}int main(int argc, char **argv) { std::cout << add(10, 20) << std::endl; return 0;}这段代码里，申明了一个函数“add”，它的定义被搁置在“extern "C" {}”构造中，以避免函数名被C++的Name Mangling机制更改，从而确保在宿主环境中调用该函数时，能够用与C++源码中保持一致的函数名，来间接调用这个函数。这段代码中还定义了主函数main，其外部调用了add函数，并且通过std::cout 来将该函数的调用后果输入到stdout。编译当初咱们能够用Emscripten这个工具集中最为重要的编译器组件emcc，来编译这段源代码。命令如下所示： emcc main.cc -s WASM=1 -O3 -o main.html通过“-s”参数，为emcc指定了编译时选项“WASM=1”，这样emcc就会将输出的源代码编译为wasm格局指标代码，“-o”参数则指定了产出文件的格局为“.html”，这样Emscripten就会生成一个能够间接在浏览器中应用的Web利用。这个主动生成的利用中，蕴含了wasm模块代码、JavaScript代码以及HTML代码。运行当初咱们能够尝试在本地运行这个简略的Web利用。首先自行筹备一个简略的Web服务器： const http = require('http');const url = require('url');const fs = require('fs');const path = require('path');const PORT = 8888;const mime = { "html": "text/html;charset=UTF-8", "wasm": "application/wasm" // 遇到".wasm"格式文件的申请时，返回特定的MIME}http.createServer((req, res) => { let realPath = path.join(__dirname, `.${url.parse(req.url).pathname}`); // 查看所拜访文件是否存在并且可读 fs.access(realPath, fs.constants.R_OK, err => { if (err) { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end(); } else { fs.readFile(realPath, "binary", (err, file) => { if (err) { // 文件读取失败时返回500 res.writeHead(500, { 'Content-Type': 'text/plain' }); end(); } else { // 依据申请的文件返回相应的文件内容 let ext = path.extname(realPath); ext = ext ? ext.slice(1) : 'unknow'; let contentType = mime[ext] || 'text/plain'; res.writeHead(200, { 'Content-Type', contentType }); res.write(file, "binary"); res.end(); } }); } });}).listen(PORT);console.log("Server is running at port: " + PORT + ".");这段代码中最为重要的一个中央，就是对wasm格式文件申请的解决。 ...

关于javascript:Vim之父逝世为纪念他你现在可以开始学习-Vim-了

编辑器Vim之父，布莱姆·米勒（Bram Moolenaar）去世，享年62岁。（程式设计圈内广为流传的一句话：世界上只有叁种程式设计师，用Vim的，用Emacs，和用其余的。）在布莱姆家人发的讣告中写到：咱们必须怀着惨重的情绪告诉您，因为在过来几周裡病情迅速好转，Bram Moolenaar于8月3日逝世。为留念编辑器Vim之父，布莱姆·米勒，咱们来学习一下 Vim Vim 是一个命令行文本编辑器，因难以学习而臭名昭着（风行的笑话是生成一个真正随机的字符串，将 Web 开发人员放在 Vim 后面并通知他们退出）。那麽为什麽还要费神学习它呢，特地是如果您曾经相熟文本编辑器或 IDE 的话？学习 Vim 的一些益处包含： Vim 曾经装置在任何类 Unix 零碎上，这意味着你能够间接在服务器上编辑文件（真正的超能力）与大多数文本编辑器和 IDE 相比，Vim 是轻量级的，因而即便在最一般的硬件上也能疾速高效地运行 Vim 齐全是键盘驱动的（大多数操作集中在主行），所以它会让你更有效率？我在最初一个对于如何提高效率的问题上打了一个问号——这是一个你常常听到的论点，但我不确定这是否适宜每个人。基本上，为了高效地应用 Vim，您不仅须要投入大量工夫来学习它，而且还须要投入大量工夫来把握它。这意味着您应用它节俭的工夫会被您投入把握它的工夫所对消，并且您总是投入工夫把握它。我会说学习 Vim 的最佳理由是因为您喜爱花工夫学习和把握複杂的技能.这样一来，这与为什麽有人想学习一种新乐器并没有什麽不同！如果这些想法听起来对您很有吸引力，那麽您能够依照上面概述的周围打算来帮忙您学习 Vim。这就是我学习 Vim 的形式，它基于我在论坛和教程中重复遇到的倡议。我还增加了一些我本人的技巧，这些技巧对我一路走来有所帮忙。第 1 週：每天实现一次 vimtutor 许多人都认为学习 vim 基础知识的最佳办法是在终端中简略地输出以下命令： $ vim导师这将在 Vim 中关上一个文本文件，其中蕴含涵盖根本 Vim 命令的分步阐明。您应该须要 30 分钟左右能力实现整个过程。如果您理解中介绍的命令vimututor，那麽您就曾经準备好开始在 Vim 中高效工作了。问题是其中涵盖了很多命令vimtutor- 您不可能一次性学会所有命令！我的倡议是刻意练习，vimtutor每天一次，间断至多一周。每次你这样做时，看看你的工夫是否有所改善。为本人设定一个指标——看看你是否在 5 分钟内实现整个工作。重点不是要记住每一个命令，而是要练习足够的工夫，直到根本的导航和编辑命令成为第二天性。如果您的指标是理解足够的 Vim 以便可能在服务器上近程编辑文件，那麽您能够到此为止 - 您曾经理解的足够多了，这很危险！如果您想应用 Vim 作为您抉择的编辑器，能够持续下一步。第 2 週：以起码的配置应用 Vim，无需插件 ...

关于javascript:Vue3-现实生活的过渡和微互动

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home Vue为解决动画提供了一种简略而优雅的形式。咱们能够通过增加一个 <transition /> 指令来轻松利用它们，这个指令会为咱们实现所有沉重的工作。或者，你能够利用javascript钩子将更简单的逻辑融入到你的动画中，甚至能够增加像gsap这样的第三方库，以应答更高级的应用场景。在这篇文章中，咱们将探讨这些不同的选项，但首先，让咱们临时把Vue放在一边，来谈谈CSS过渡和动画之间的区别。过渡成果 Vs 动画成果转换是在两个不同的状态之间进行的。起始状态和完结状态。就像模态组件一样，起始状态可能是暗藏的，而完结状态可能是可见的。设置了这些状态，浏览器会用一系列两头帧填充这种状态变动。 button { background-color: #0ff1ce; transition: background-color 0.3s ease-in;}button:hover { background-color: #c0ffee;}如果你想执行一些不明确波及起始状态和完结状态的操作，或者你须要对过渡中的关键帧有更粗疏的管制，那么你就必须应用动画。如果你想执行一些不明确波及起始状态和完结状态的操作，或者你须要对过渡中的关键帧有更粗疏的管制，那么你就必须应用 animation。 button:hover { animation-duration: 3s; animation-iteration-count: infinite; animation-name: wobble;}@keyframes wobble { 0%, 100% { transform: translateX(0%); transform-origin: 50% 50%; } 15% { transform: translateX(-32px) rotate(-6deg); } 30% { transform: translateX(16px) rotate(6deg); } 45% { transform: translateX(-16px) rotate(-3.6deg); } 60% { transform: translateX(10px) rotate(2.4deg); } 75% { transform: translateX(-8px) rotate(-1.2deg); }}将会导致以下后果： ...

关于javascript:uniapp-项目实践总结一uniapp-框架知识总结

导语：最近开发了一个基于 uniapp 框架的我的项目，有一些感触和领会，所以想记录以下一些技术和教训，在这里做一个系列总结，算是对本人做一个交代吧。目录简介全局文件全局组件罕用 API条件编译插件开发简介uniapp 是 DCloud 公司于 2015 年开发的一款基于 vue 的跨端框架，编写一套代码就能够运行到 web、小程序（各种小程序）和 app（Android 和 iOS）端，使得开发一个我的项目的老本很小，效率很高，方便快捷。 uniapp 官网性能框架图各端运行成果全局文件这里次要是两个文件：pages.json治理页面路由、和manifest.json治理利用配置。 pages.jsonpages.json 文件是进行全局配置，包含页面文件门路、款式、原生导航栏等内容。以下是官网给出的配置示例： { "pages": [ { "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } } ], "condition": { //模式配置，仅开发期间失效 "current": 0, //以后激活的模式（list 的索引项） "list": [ { "name": "test", //模式名称 "path": "pages/component/view/index" //启动页面，必选 } ] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents": { "collapse-tree-item": "/components/collapse-tree-item" }, "renderingMode": "seperated", // 仅微信小程序，webrtc 无奈失常时尝试强制敞开同层渲染 "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，反对 auto / portrait / landscape "rpxCalcMaxDeviceWidth": 960, "rpxCalcBaseDeviceWidth": 375, "rpxCalcIncludeWidth": 750 }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "height": "50px", "fontSize": "10px", "iconWidth": "24px", "spacing": "3px", "iconfontSrc": "static/iconfont.ttf", // app tabbar 字体.ttf文件门路 app 3.4.4+ "list": [ { "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "组件", "iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc "text": "\ue102", "selectedText": "\ue103", "fontSize": "17px", "color": "#000000", "selectedColor": "#0000ff" } }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "接口" } ], "midButton": { "width": "80px", "height": "50px", "text": "文字", "iconPath": "static/image/midButton_iconPath.png", "iconWidth": "24px", "backgroundImage": "static/image/midButton_backgroundImage.png" } }, "easycom": { "autoscan": true, //是否主动扫描组件 "custom": { //自定义扫描规定 "^uni-(.*)": "@/components/uni-$1.vue" } }, "topWindow": { "path": "responsive/top-window.vue", "style": { "height": "44px" } }, "leftWindow": { "path": "responsive/left-window.vue", "style": { "width": "300px" } }, "rightWindow": { "path": "responsive/right-window.vue", "style": { "width": "300px" }, "matchMedia": { "minWidth": 768 } }}manifest.jsonmanifest.json 文件是利用的配置文件，用于指定利用的名称、图标、权限等内容。 ...

关于javascript:算法与数据结构梳理6大排序算法-为了offer

6种排序如下冒泡排序计数排序疾速排序归并排序插入排序抉择排序工夫复杂度如下图冒泡排序这个名字的由来是向泡泡一样浮起来，脑补一下，就是每次比拟相邻的两个元素大小，而后缓缓'沉没'起来，我瞎掰的，看思路吧。「工夫复杂度O(n^2)」思路比拟相邻的元素，前者比后者大的话，两者替换地位。对每一对相邻元素做雷同操作，从开始第一对到最初一对，这样子最初的元素就是最大元素。针对n个元素反复以上步骤，每次循环排除以后最初一个。反复步骤1~3，直到排序实现。动画冒泡排序代码实现// 最外层循环管制的内容是循环次数// 每一次比拟的内容都是相邻两者之间的大小关系let BubbleSort = function (arr) { let len = arr.length for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { // 从大到小 [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] } } } return arr}let arr = [2, 9, 6, 7, 4, 3, 1, 7]console.log(BubbleSort(arr))计数排序从名称上就晓得，它的思维：就是把数组元素作为数组的下标，而后用一个长期数组统计该元素呈现的次数。 ...

关于javascript:Python-潮流周刊17Excel-终于支持-Python-了Meta-重磅开源新项目Mojo-新得-1-亿美元融资

你好，我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容，大部分为英文。题目取自其中两则分享，不代表全部内容都是该主题，特此申明。本周刊由 Python猫出品，精心筛选国内外的 250+ 信息源，为你筛选最值得分享的文章、教程、开源我的项目、软件工具、播客和视频、热门话题等内容。愿景：帮忙所有读者精进 Python 技术，并增长职业和副业的支出。微信 | 博客 | 邮件 | Github | Telegram | Twitter 本周的大新闻一个接一个啊！微软在 Python 之父 Guido 的帮忙下，在 Excel 中集成了 Python；Meta 开源了 Code Llama，让程序员看到领有本人编码助手的福音；Mojo 发表 1 亿美元的巨额融资，势头之猛让人惊叹。本期周刊还分享了几则对于 FastAPI 的内容、大量学习资源、100 多个新鲜出炉的演讲视频等等，不容错过哟~~ 起源：https://pythoncat.top/posts/2023-08-26-weekly 文章&教程1、Excel 终于反对 Python 了！本周的重磅新闻！微软将 Python 引入到 Excel 中，反对在 Excel 中应用 Python 弱小的数据分析、统计建模以及数据可视化库（pandas、statsmodels、Matplotlib 和 seaborn 等）。Guido 发推示意他参加了这个我的项目。 2、如何应用 FastAPI 与 aiohttp 进行 SSE 响应开发？ Server-Sent Events（服务器推送事件）能够让服务端一边生成内容，一边将数据返回给客户端。文章介绍了 FastAPI 如何应用 SSE 形式返回数据，并用 requests 和 aiohttp 来获取与展现接口数据。 ...

关于javascript:Web-安全字体和网络字体-Web-Fonts

什么是Web平安字体网络安全字体是由许多操作系统事后装置的字体。尽管不是所有的零碎都装置了雷同的字体，但你能够应用网络安全字体堆栈来抉择几种看起来相似的字体，并且装置在你想反对的各种零碎上。如果你想应用预装字体以外的字体，从CSS3开始，你能够应用网络字体Web fonts - Learn web development | MDN。 Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.英文Web平安字体合集 CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.没有网页平安中文字体相比通常只有几十 KB 的英文字体，网页加载一个 GB2312 的中文字体至多要减少 2 MB 以上加载量，而大部分中文字体都在 5 MB 以上。所以网络字体在国内没有流行起来，还是要像英文网页好多年前一样，用网页平安字体。 ...

关于javascript:算法与数据结构梳理6大排序算法-为了offer

关于javascript:Web-安全字体和网络字体-Web-Fonts

关于javascript:CrossOrigin-Read-Blocking-CORB-网络兼容性和对其他资源的影响问题

CORB 对图像的影响CORB 对标签应该没有显著的影响<img>，除非图像资源 1) 被谬误地标记为不正确的、非图像的、受 CORB 爱护的 Content-Type 和 2) 与响应标头一起提供X-Content-Type-Options: nosniff。例子：正确标记的 HTML 文档标签中应用的资源<img>：注释：一个 HTML 文档Content-Type: text/html没有X-Content-Type-Options题目预期行为：无显著差别。当 1) 尝试将 html 文档出现为图像（没有 CORB）和 2) 尝试将空响应出现为图像（当 CORB 阻止响应时）时，出现的图像应该是雷同的损坏图像。WPT测试：fetch/corb/img-html-correctly-labeled.sub.html谬误标记的图像（嗅探）标签中应用的资源<img> ：注释：图像Content-Type: text/html没有X-Content-Type-Options题目预期行为：无差别。CORB 将嗅探到响应主体实际上不是受 CORB 爱护的类型，因而将容许响应。WPT测试：fetch/corb/img-png-mislabeled-as-html.sub.html谬误标记的图像（nosniff）标签中应用的资源<img>：注释：图像Content-Type: text/htmlX-Content-Type-Options: nosniff预期行为：可察看到的差别。因为nosniff标头，CORB 将不得不依赖Content-Type标头。因为此响应被谬误标记（注释是图像，但题目Content-Type说它是 html 文档），CORB 将谬误地将响应分类为须要 CORB 爱护。WPT测试：fetch/corb/img-png-mislabeled-as-html-nosniff.tentative.sub.html除了 HTML<img>标记之外，下面的示例还实用于其余应用图像的网络性能 - 包含但不限于： /favicon.icoSVG 的<image>，<link rel="preload" as="image" ...>（参见 WPT 测试fetch/corb/preload-image-png-mislabeled-as-html-nosniff.tentative.sub.html：）background-image在样式表中将图像绘制到（可能被净化的）HTML 上<canvas> [lukasza@chromium.org ] 晚期尝试阻止具备不兼容 MIME 类型的 nosniff 图像失败了。咱们认为 CORB 会更侥幸，因为它只会阻止 CORB 爱护的 MIME 类型的子集（例如，它不会application/octet-stream像Firefox 谬误中援用的那样阻止）CORB 对多媒体的影响音频和视频资源应该会看到与图像相似的影响，只管 206 响应更有可能呈现在媒体上。 ...

关于javascript:CrossOrigin-Read-Blocking-CORB-跨域读阻塞

跨源读取阻止 (CORB)，这是一种算法，通过该算法能够辨认可疑的跨源资源加载，并在它们达到网页之前被 Web 浏览器阻止。CORB 通过使敏感数据远离跨源网页来升高泄露敏感数据的危险。在大多数浏览器中，它将此类数据排除在不受信赖的脚本执行上下文之外。在具备Site Isolation的浏览器中，它能够将此类数据齐全排除在不受信赖的渲染器过程之外，甚至有助于抵挡边信道攻打。问题同源策略通常会阻止一个源从另一个源读取任意网络资源。在实践中，执行此策略并不像阻止所有跨源加载那么简略：必须为 Web 性能建设例外，例如<img>或<script>因为历史起因能够针对跨源资源，以及容许某些资源的 CORS 机制有选择地跨源浏览。然而，某些类型的内容可能被证实与所有历史上容许的宽容上下文不兼容。JSON 就是这样一种类型：JSON 响应在标记为指标时会导致解码谬误<img>，在标记为指标时会导致空操作或语法错误<script>，等等。网页能够加载具备可察看后果的 JSON 的惟一状况是通过fetch()或XMLHttpRequest；在这些状况下，跨源读取由 CORS 调节。通过尽早检测和阻止受 CORB 爱护的资源的加载——也就是说，在响应进入图像解码器或 JavaScript 解析器阶段之前——CORB 能够进攻可能呈现在被跳过的阶段中的侧信道破绽。 CORB 加重了哪些攻打？CORB 缓解以下攻打起源：跨站点脚本蕴含 (XSSI) <script>XSSI 是将标记指向非 JavaScript 的指标资源，并在将后果资源解释为 JavaScript 时察看一些副作用的技术。2006 年发现了这种攻打的一个晚期示例：通过笼罩 JavaScript Array 构造函数，JSON 列表的内容能够像以下一样简略地被拦挡：<script src="https://example.com/secret.json">。尽管数组构造函数攻打向量在以后浏览器中失去修复，但在随后的十年中发现并修复了许多相似的破绽利用。例如，请参阅此处的幻灯片。CORB 可避免此类攻打，因为受 CORB 爱护的资源将被阻止传送到跨站点<script>元素。CORB 在没有其余 XSSI 进攻（如XSRF 令牌和/或JSON 平安前缀）的存在也能够用作 CORB 算法的信号，表明资源应该受 CORB 爱护。嗅探性旁道攻打（例如 Spectre）。例如，攻击者可能会应用一个<img src="https://example.com/secret.json">元素将跨站点机密拉入攻击者运行 JavaScript 的过程中，而后应用揣测性侧通道攻打（例如Spectre）来读取该机密。当与站点隔离一起应用时，CORB 能够避免此类攻打，办法是避免 JSON 资源呈现在托管跨站点页面的过程的内存中。CORB 如何“阻止”响应？当 CORB 决定响应须要受 CORB 爱护时，响应被批改如下：响应主体替换为空主体。响应标头已删除。 [lukasza@chromium.org ] Chromium 目前保留了 Access-Control-* 标头（这有助于为 CORS 生成更好的谬误音讯）。为了无效抵挡揣测性旁路攻打，CORB 阻塞必须在响应达到托管申请的跨域发起者的过程之前产生。换句话说，CORB 阻止应该避免受 CORB 爱护的响应数据呈现在托管跨源网站的过程的内存中（即便是临时的或短期的）。这与过滤响应（例如CORS 过滤响应或不通明过滤响应）的概念不同，过滤响应仅提供对残缺数据的无限视图，这些数据依然存储在外部响应中，并且能够在渲染器过程中实现。 ...

关于javascript:UDP应知应会

文章仅作为给位考试、面试复习内容应用，不适宜零根底学习UDP常识。 UDP数据报 UDP实现了传输协定可能做的起码的工作，在IP的数据报服务上减少了两个最根本的服务：复用和分用以及差错控制。 UPD长处UDP无需建设连贯，不会有建设连贯的时延无连贯状态，UDP不保护连贯状态，应用服务器应用UDP时，可能反对更多的流动客户机首部开销小利用场景特点UDP罕用于一次性传输较少数据的网络应用，例如DNS，SNMP等等。UDP提供最大致力的交付，即不牢靠交付，所有的保护传输可靠性的工作都须要应用层来实现。UPD是面向报文的，保温是UDP的最小解决单位。 UDP首部UDP首部十分短，仅携带以下四条信息源端口号：发送方端口号，须要对方回信时应用，不须要能够全用0，目标端口号：起点交付报文时必须应用长度：UDP数据报长度（包含首部和数据），最小值8测验和：检测UDP用户数据包在传输中是否有错，有错就会间接抛弃。该字段是可选的，当源主机不想计算校验和时，则间接令该字段为0收到数据报之后的解决依据首部中的目标端口，讲UDP数据报通过相应的端口上交给利用过程。如果接管方UDP发现接管的报文中的目标端口号不正确，会抛弃该报文，并由ICMP发送”端口不可达“的过错报文给发送方。 UDP数据校验 UDP自身检错能力不强，然而简略，数据处理快（要么抛弃要么上报给下层，并附带错误报告），而且仅查看首部和数据局部。其中要留神的是，校验时，对不满偶数个字节的数据局部，会进行补全一个全为0的字节。对谬误的报文，要么抛弃，要么附带上错误报告交给下层解决（检错而不是纠错）。其能够通过伪首部，查看源端口、目标端口号和UDP数据报的数据局部，还能够查看IP数据报的源IP地址和目标地址。

关于javascript:RESTful-下请求方法的幂等性

概念论述一个 HTTP 办法是幂等的，指的是同样的申请被执行一次与间断执行屡次的成果是一样的，服务器的状态也是一样的。换句话说就是，幂等办法不应该具备副作用（统计用处除外）。所有的 safe 办法也都是幂等的。幂等性只与后端服务器的理论状态无关，而每一次申请接管到的状态码不肯定雷同。须要留神的是，服务器不肯定会确保申请办法的幂等性，有些利用可能会谬误地突破幂等性束缚。 Safe（平安）如果说一个 HTTP 办法是平安的，是指这是个不会批改服务器的数据的办法。也就是说，这是一个对服务器只读操作的办法。这些办法是平安的：GET，HEAD 和 OPTIONS。所有平安的办法都是idempotent的，但并非所有幂等办法都是平安的，例如，PUT 和 DELETE 都是幂等的，但不是平安的。剖析图表HTTP MethodIdempotent 幂等Safe 平安OPTIONS✔️✔️HEAD✔️✔️GET✔️✔️POST❌❌PUT✔️❌PATCH❌❌DELETE✔️❌为什么put和delete是幂等，而patch则是非幂等的？PUT【幂等】 PUT /user/1 #批改id为 1 的 user 的全副信息用于更新资源，没有的话则执行创立操作。每次执行申请时都会先判断一下序号为1的User信息是否存在，不存在则创立，否则视为更新。很显然，申请携带的数据每次都是一样的，所以不管申请多少次，最终的后果都是后盾存在这么一个资源（同内容笼罩式的更新或创立资源）。 PATCH【非幂等】 PATCH /user/1/house/3 #给id为1的user减少3个大房子用于更新资源，即数据实体的一部分属性（部分批改），该数据必然存在，否则失去更新意义。每次执行申请时都会先判断一下序号为1的User信息是否存在，存在则更新数据信息。依据URL，咱们须要解决的是将User的house属性减少3，很显然，屡次申请时会反复减少，而无奈放弃为一个确定的值。PATCH 处于不可控的位置，所以说 PUT 办法是幂等的，而 PATCH 办法不是幂等的。

关于javascript:前端存储方案一览

Cookies在HTML5规范前本地贮存的次要的也是最早提出的⽅式，长处是兼容性好，申请头⾃带cookie⽅便（应用fetch的话须要额定配置），毛病是⼤⼩只有4k，⾃动申请头加⼊cookie节约流量，而且每个domain限度20个cookie，使⽤起来麻烦，须要自行封装相干办法。 Cookie一旦创立胜利，名称就无奈批改Cookie是无奈跨域名的，然而子域名之间共享有平安问题，如果Cookie被拦挡了，那就可取得session的所有信息，预防形式包含设置httpOnlyCookie在申请一个新的页面的时候都会被发送过来跨域名共享计划： Nginx反向代理单个站点登入后，通过setCookie的形式，在其余网站上写上Cookie，同时服务端的Session应用同一个节点LocalStorageHTML5加⼊的以键值对(Key-Value)为规范的⽅式，长处是操作⽅便，永久性贮存（除⾮⼿动删除），⼤⼩为5M，兼容IE8+ 。如果浏览器设置为隐衷模式，那咱们将无奈读取到LocalStorage，同时受到同源策略的限度，非同源页面无法访问。 SessionStorage与LocalStorage根本相似，区别是SessionStorage当⻚⾯敞开后会被清理，⽽且与cookie、LocalStorage不同，其次要用于长期保留同一窗口(或标签页)的数据，刷新页面时不会删除，敞开窗口或标签页之后将会删除这些数据。 Web SQL2010年被W3C废除的本地数据库数据存储⽅案，然而支流浏览器（⽕狐除外）都曾经有了相干的实现，Web SQL相似于SQLite，是真正意义上的关系型数据库。Web SQL 数据库 API 并不是 HTML5 标准的一部分，然而它是一个独立的标准，引入了一组应用 SQL 操作客户端数据库的 APIs。 Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.本文档是 2010 年 11 月 18 日 Web SQL 数据库工作组的阐明。作为工作组阐明公布并不意味着失去 W3C 成员的认可。这是一份草稿文件，可能随时被其余文件更新、替换或废止。除了正在进行的工作之外，援用本文件是不失当的。W3C Web 应用程序工作组是负责本文档的 W3C 工作组。 IndexedDBIndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包含文件/二进制大型对象（blobs））。其是被正式纳⼊HTML5规范的数据库贮存⽅案，它是NoSQL数据库，⽤键值对进⾏贮存。键值对贮存异步反对事务同源限度贮存空间大反对二进制贮存

关于javascript:浏览器缓存机制请求头

相干头部字段强缓存： ExpiresCache-Control协商缓存： Etag、If-None-MatchLast-Modified、If-Modified-SinceCach-Control优先级高于Expires；Etag/If-Node-Match优先级高于Last-Modified/If-Modified-Since强缓存应用强缓存策略时，如果缓存资源无效，则间接应用缓存资源，不再向服务器发动申请。强缓存策略能够通过两种形式来设置，别离是 HTTP 头信息中的 Expires 属性和 Cache-Control 属性。 Expires 是 HTTP 1.0 中的形式，因为它的一些毛病，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，Cache-Control 通用音讯头字段，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在申请中设置的指令，不肯定被蕴含在响应中。当Expires和Cache-Control的 "max-age" 或者 "s-max-age" 指令同时存在时，会忽视Expires，只遵循Cache-Control的指令内容。 Cache-Control缓存申请指令客户端能够在 HTTP 申请中应用的规范 Cache-Control 指令。 Cache-Control: max-age=<seconds>Cache-Control: max-stale[=<seconds>]Cache-Control: min-fresh=<seconds>Cache-control: no-cacheCache-control: no-storeCache-control: no-transformCache-control: only-if-cached缓存响应指令服务器能够在响应中应用的规范 Cache-Control 指令。 Cache-control: must-revalidateCache-control: no-cacheCache-control: no-storeCache-control: no-transformCache-control: publicCache-control: privateCache-control: proxy-revalidateCache-Control: max-age=<seconds>Cache-control: s-maxage=<seconds>此外，还有扩大Cache-Control指令，拓展缓存指令不是外围 HTTP 缓存规范文档的一部分，应用前请留神查看兼容性。罕用指令内容不包含实验性指令内容可缓存管制名称成果public表明响应能够被任何对象（包含：发送申请的客户端，代理服务器，等等）缓存，即便是通常不可缓存的内容（甚至是Post）。private表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。no-cache强制要求缓存把申请提交给原始服务器进行验证 (协商缓存验证)。no-store不应用任何缓存缓存时长管制名称成果max-age=<seconds>设置缓存存储的最大周期，超过这个工夫缓存被认为过期 (单位秒)。与Expires相同，工夫是绝对于申请的工夫。s-maxage=<seconds>笼罩max-age或者Expires头，然而仅实用于共享缓存 (比方各个代理)，公有缓存会疏忽它。更多见Cache-Control MDN ExpiresExpires 响应头蕴含日期/工夫，即在此时候之后，响应过期。如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被疏忽。 ...

关于javascript:详解-React-中的闭包问题

hello 大家好，我是 superZidan，这篇文章想跟大家聊聊 React 中的闭包这个话题，如果大家遇到任何问题，欢送分割我 JavaScript 中的闭包肯定是最可怕的个性之一。即便是无所不知的 ChatGPT 也会通知你这一点。它也可能是最隐秘的语言概念之一。每次编写任何 React 代码时，咱们都会用到它，大多数时候咱们甚至没有意识到。但最终还是无奈解脱它们：如果咱们想编写简单且高性能的 React 应用程序，咱们就必须理解闭包。因而，让咱们深入研究它，并在此过程中学习以下内容：什么是闭包，它们是怎么呈现的，为什么咱们须要它们什么是过期闭包，为什么它们会呈现React 中哪些常见的场景会导致过期闭包，以及如何应答它们正告：如果你从未解决过 React 中的闭包，这篇文章可能会让你的大脑爆炸。当你浏览本文时，请确保随身携带足够的巧克力来刺激脑细胞。问题呈现设想一下你正在实现一个带有几个输入框的表单。其中一个字段是来自某些内部库的十分重的组件。你没有方法理解其内部结构，因而无奈修复其性能问题。但你的表单中的确须要它，因而你决定将其包装在 React.memo 中，以在表单中的状态发生变化时最大水平地缩小从新渲染的频率。像这样： const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo /> </> ); };到目前为止，所有都很好。这个「十分重」的组件只接管一个字符串属性（比方 title）和一个 onClick 回调函数。当单击这个组件内的 “实现” 按钮时会触发此回调函数。并且心愿在产生此单击时提交表单数据。也很简略：只需将题目和 onClick 属性传递给它即可。 ...

关于javascript:浏览器缓存机制缓存位置

从缓存地位上来说分为四种，并且各自有优先级，当顺次查找缓存且都没有命中的时候，才会去申请网络。 Service WorkerMemory CacheDisk CachePush CacheService WorkerService Worker 是运行在浏览器背地的独立线程，个别能够用来实现缓存性能。应用 Service Worker的话，传输协定必须为 HTTPS。因为 Service Worker 中波及到申请拦挡，所以必须应用 HTTPS 协定来保障平安。Service Worker 的缓存与浏览器其余内建的缓存机制不同，它能够让咱们自在管制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。 Memory CacheMemory Cache 也就是内存中的缓存，次要蕴含的是以后中页面中曾经抓取到的资源,例如页面上曾经下载的款式、脚本、图片等。读取内存中的数据必定比磁盘快,内存缓存尽管读取高效，可是缓存持续性很短，会随着过程的开释而开释。一旦咱们敞开 Tab 页面，内存中的缓存也就被开释了。 Disk CacheDisk Cache 胜在容量和存储时效性上，针对容量大，读取速度慢，然而时效长的资源。此类资源是从磁盘当中取出的，此资源不会随着该页面的敞开而开释掉，因为是存在硬盘当中的，下次关上仍会from disk cache。相比于内存缓存，硬盘缓存会依据HTTP头部中的字段判断哪些资源须要缓存，哪些能够间接应用或者须要从新申请。 Push CachePush Cache 是 HTTP/2 中的内容，是HTTP2 在 server push 阶段存在的缓存，当以上三种缓存都没有命中时，它才会被应用，优先级最低，然而是一种趋势。同时，其缓存工夫也很短，只针在对立会话（Session）中存在，一旦会话完结就被开释。其具备以下特点：所有的资源都能被推送，能够推送 no-cache 和 no-store 的资源工夫较短，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令，连贯一旦被敞开，就会被开释多页面能够应用雷同的HTTP/2连贯，也就是能够应用同一个Push Cache。这次要还是依赖浏览器的实现而定，出于对性能的思考，有的浏览器会对雷同域名但不同的tab标签应用同一个HTTP连贯。Push Cache 中的缓存只能被应用一次浏览器能够拒绝接受曾经存在的资源推送你能够给其余域名推送资源

关于javascript:利用Nodejs脚本提取你的OPML文件信息

什么是OPML在当今互联网时代，咱们每天都面对着大量的信息，从新闻到博客，从社交媒体到订阅源。如何无效地组织、治理和共享这些信息成为一个重要的挑战。而OPML（Outline Processor Markup Language）作为一种弱小的工具，成为了连贯和解决信息的桥梁。 OPML是一种基于XML（可扩大标记语言）的规范文件格式，旨在形容、存储和替换纲要（outline）或纲要构造的信息。纲要是一种层次结构，它以递进的形式组织和展现信息，从总体到细节。通过应用OPML，咱们能够轻松地创立、编辑和共享这些纲要。作为一种通用的文件格式，OPML能够用于各种用处。例如，在RSS阅读器中，咱们能够应用OPML文件导入和导出订阅源列表，从而疾速建设本人的个性化浏览汇合。此外，OPML还被广泛应用于博客编辑器、纲要编辑工具、项目管理软件等畛域，为用户提供高效的信息处理和组织能力。利用xml-reader提取信息在后面的内容中，咱们曾经理解了OPML（Outline Processor Markup Language）的概念和重要性。当初，让咱们摸索一下如何应用Node.js脚本来提取和解析OPML文件中的信息，以便进一步解决和利用这些数据。为了解析OPML文件，咱们能够应用Node.js的xml-reader库。xml-reader是一个轻量级的XML解析器，能够帮忙咱们不便地读取和提取XML文档中的数据。xml-reader是一个玲珑、疾速和简略的XML解析器。它能够在各种环境中运行，包含浏览器、Node.js、React Native、ServiceWorkers和WebWorkers等。它提供了事件驱动和同步的API，并且能够按程序逐块地解决输出，还反对流模式（低内存应用）和读取CDATA节。首先，咱们须要确保在咱们的Node.js我的项目中装置了xml-reader库。能够通过以下命令应用npm进行装置： npm install xml-reader一旦装置实现，咱们就能够编写一个Node.js脚本来解析OPML文件。上面是一个简略的示例： const fs = require("fs");const XmlReader = require('xml-reader');const readFeeds = () => { // 创立 XmlReader 实例 const reader = XmlReader.create({ stream: true }); return new Promise((resolve, reject) => { // 读取 OPML 文件 fs.readFile("Feeds.opml", function (err, opmltext) { const feedUrls = []; if (!err) { // 在 'tag:outline' 事件中提取订阅源 URL reader.on('tag:outline', (data) => { feedUrls.push(data.attributes); }); // 解析 OPML 文件 reader.parse(opmltext.toString()); } else { reject(err); } resolve(feedUrls); }); });}module.exports = readFeeds;这段代码定义了一个readFeeds函数，它应用fs模块读取名为"Feeds.opml"的OPML文件，并返回一个Promise对象。在Promise外部，咱们创立了一个XmlReader实例，并应用fs.readFile读取OPML文件的内容。 ...

关于javascript:解析XML数据使用xml2js库轻松进行XML解析

解析XML文件是开发中常见的需要之一。为了以一种简略易用的形式拜访XML数据，你可能不想编译一个C解析器，而是想寻找一个更不便的解决方案。那么，xml2js就是你须要的工具！xml2js是一个简略的XML到JavaScript对象转换器，反对双向转换。它应用了sax-js和xmlbuilder-js这两个工具库。装置最简略的装置xml2js的形式是应用npm。只需执行npm install xml2js，npm将会下载xml2js及其所有依赖。xml2js也能够通过Bower进行装置，只需执行bower install xml2js，Bower将会下载xml2js及其所有依赖。用法因为你是一位十分聪慧的开发者，所以不须要过多的教程领导。解析XML应该是一件简略的事件，咱们间接通过一些示例进行学习。简短用法你心愿尽可能简略、轻松地解析XML吗？应用以下代码： var parseString = require('xml2js').parseString;var xml = "<root>Hello xml2js!</root>"parseString(xml, function (err, result) { console.dir(result);});这真是再简略不过了，对吧？这个办法实用于xml2js的0.2.3版本及以上。应用CoffeeScript时，代码如下： CoffeeScript 可能比拟小众，然而官网文档有举例了相干内容，故本文进行保留。{parseString} = require 'xml2js'xml = "<root>Hello xml2js!</root>"parseString xml, (err, result) -> console.dir result如果你须要一些非凡的选项，也不必放心，xml2js反对许多选项（见下文），你能够将这些选项作为第二个参数进行指定： parseString(xml, {trim: true}, function (err, result) {});实例办法如果你之前始终应用xml-simple或者本人封装的办法来解决XML，那么从0.1.11版本开始，xml2js为你增加了以下办法： var fs = require('fs'), xml2js = require('xml2js');var parser = new xml2js.Parser();fs.readFile(__dirname + '/foo.xml', function(err, data) { parser.parseString(data, function (err, result) { console.dir(result); console.log('Done'); });});看吧，没有事件监听器！你还能够应用CoffeeScript来进一步缩小代码的冗余： fs = require 'fs',xml2js = require 'xml2js'parser = new xml2js.Parser()fs.readFile __dirname + '/foo.xml', (err, data) -> parser.parseString data, (err, result) -> console.dir result console.log 'Done.'然而，如果你遗记应用new关键字创立一个新的Parser对象会怎么样？从0.2.8开始，你也能够不应用这个关键字。从0.2.8开始，你能够不应用它，在这种状况下，xml2js会帮忙你增加它，以保障不会再出现意外和莫名其妙的bug! ...

关于javascript:Node-笔记2模块化

模块化什么是模块化开发？事实上模块化开发最终的目标是将程序划分成一个个小的构造；这个构造中编写属于本人的逻辑代码，有本人的作用域，不会影响到其余的构造；这个构造能够将本人心愿裸露的变量、函数、对象等导出给其构造应用；也能够通过某种形式，导入另外构造中的变量、函数、对象等；下面说提到的构造，就是模块；依照这种构造划分开发程序的过程，就是模块化开发的过程； CommonJS和Node咱们须要晓得CommonJS是一个标准，最后提出来是在浏览器以外的中央应用，并且过后被命名为ServerJS，起初为了体现它的广泛性，批改为CommonJS，平时咱们也会简称为CJS。 Node中对CommonJS进行了反对和实现；在Node中每一个js文件都是一个独自的模块；这个模块中包含CommonJS标准的外围变量：exports、module.exports、require；exports导出exports是一个对象，咱们能够在这个对象中增加很多个属性，增加的属性会导出； exports.name = 'name';exports.age = 'age';exports.sayHello = 'sayHello';另外一个文件中能够导入： const bar = require('./bar');下面这行实现了什么操作呢？意味着main中的bar变量等于exports对象；也就是require通过各种查找形式，最终找到了exports这个对象；并且将这个exports对象赋值给了bar变量；bar变量就是exports对象了；它们实际上是一个浅层拷贝bar对象是exports对象的浅拷贝（援用赋值）；浅拷贝的实质就是一种援用的赋值而已； module.exports又是什么？在Node中真正用于导出的其实基本不是exports，而是module.exports；CommonJS中是没有module.exports的概念的；然而为了实现模块的导出，Node中应用的是Module的类，每一个模块都是Module的一个实例，也就是 module；为什么exports也能够导出呢？这是因为module对象的exports属性是exports对象的一个援用；也就是说 module.exports = exports = main中的bar；模块的加载过程模块在被第一次引入时，模块中的js代码会被运行一次模块被屡次引入时，会缓存，最终只加载（运行）一次这是因为每个模块对象module都有一个属性：loaded。为false示意还没有加载，为true示意曾经加载；如果有循环引入，那么加载程序是采取深度优先算法main -> aaa -> ccc -> ddd -> eee ->bbb CommonJS标准毛病CommonJS加载模块是同步的：同步的意味着只有等到对应的模块加载结束，以后模块中的内容能力被运行；这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度十分快；如果将它利用于浏览器呢？浏览器加载js文件须要先从服务器将文件下载下来，之后在加载运行；那么采纳同步的就意味着后续的js代码都无奈失常运行，即便是一些简略的DOM操作；所以在浏览器中，咱们通常不应用CommonJS标准；在晚期为了能够在浏览器中应用模块化，通常会采纳AMD或CMD 然而目前一方面古代的浏览器曾经反对ES Modules，另一方面借助于webpack等工具能够实现对CommonJS或者 ES Module代码的转换；AMD标准 CMD标准 ES Moduleexport关键字export关键字将一个模块中的变量、函数、类等导出；咱们心愿将其余中内容全副导出，它能够有如下的形式：形式一：在语句申明的后面间接加上export关键字形式二：将所有须要导出的标识符，放到export前面的 {}中形式三：导出时给标识符起一个别名import关键字导入内容的形式也有多种： import {标识符列表} from '模块'；形式二：导入时给标识符起别名形式三：通过 * 将模块性能放到一个模块性能对象（a module object）上Export和import联合应用export {sum as barSum} from './bar.js';为什么要这样做呢？在开发和封装一个性能库时，通常咱们心愿将裸露的所有接口放到一个文件中；这样不便指定对立的接口标准，也不便浏览；这个时候，咱们就能够应用export和import联合应用；default用法默认导出（default export）: 默认导出export时能够不须要指定名字；在导入时不须要应用 {}，并且能够本人来指定名字；它也不便咱们和现有的CommonJS等标准互相操作；留神：在一个模块中，只能有一个默认导出（default export）； ...

关于javascript:Node-笔记1内核引擎

参照教程：coderwhy - 深刻Node.js技术栈浏览器内核是什么？咱们常常会说：不同的浏览器有不同的内核组成 Gecko：晚期被Netscape和Mozilla Firefox浏览器应用；Trident：微软开发，被IE4~IE11浏览器应用，然而Edge浏览器曾经转向Blink；Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在应用；Blink：是Webkit的一个分支，Google开发，目前利用于Google Chrome、Edge、Opera等；事实上，咱们常常说的浏览器内核指的是浏览器的排版引擎：排版引擎（layout engine），也称为浏览器引擎（browser engine）页面渲染引擎（rendering engine）或样版引擎渲染引擎工作的过程然而在这个执行过程中，HTML解析的时候遇到了JavaScript标签，应该怎么办呢？会进行解析HTML，而去加载和执行JavaScript代码；为什么不间接异步去加载执行JavaScript代码，而要在这里进行掉呢？因为JavaScript代码能够操作咱们的DOM；所以浏览器心愿将HTML解析的DOM和JavaScript操作之后的DOM放到一起来生成最终的DOM树，而不是频繁的去生成新的DOM树；JavaScript代码由谁来执行呢？ JavaScript引擎 JavaScript引擎为什么须要JavaScript引擎呢？事实上咱们编写的JavaScript无论你交给浏览器或者Node执行，最初都是须要被CPU执行的；然而CPU只意识本人的指令集，实际上是机器语言，能力被CPU所执行；所以咱们须要JavaScript引擎帮忙咱们将JavaScript代码翻译成CPU指令来执行；比拟常见的JavaScript引擎有哪些呢？ SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；Chakra：微软开发，用于IT浏览器；JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；V8：Google开发的弱小JavaScript引擎，也帮忙Chrome从泛滥浏览器中怀才不遇；WebKit内核WebKit事实上由两局部组成的： WebCore：负责HTML解析、布局、渲染等等相干的工作；JavaScriptCore：解析、执行JavaScript代码；在小程序中编写的JavaScript代码就是被JSCore执行的； V8引擎V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和应用x64，IA-32， ARM或MIPS处理器的Linux零碎上运行。V8能够独立运行，也能够嵌入到任何C ++应用程序中。 V8引擎的原理Parse模块会将JavaScript代码转换成AST（形象语法树），这是因为解释器并不间接意识JavaScript代码； Ignition是一个解释器，会将AST转换成ByteCode（字节码） TurboFan是一个编译器，能够将字节码编译为CPU能够间接执行的机器码； Orinoco模块，负责垃圾回收，将程序中不须要的内存回收； Node.js是什么也就是说Node.js基于V8引擎来执行JavaScript的代码，然而不仅仅只有V8引擎：后面咱们晓得V8能够嵌入到任何C ++应用程序中，无论是Chrome还是Node.js，事实上都是嵌入了V8引擎来执行JavaScript代码；然而在Chrome浏览器中，还须要解析、渲染HTML、CSS等相干渲染引擎，另外还须要提供反对浏览器操作的API、浏览器本人的事件循环等；另外，在Node.js中咱们也须要进行一些额定的操作，比方文件系统读/写、网络IO、加密、压缩解压文件等操作；浏览器和Node.js架构区别 Node.js架构咱们编写的JavaScript代码会通过V8引擎，再通过Node.js的Bindings，将工作放到Libuv的事件循环中；libuv（Unicorn Velociraptor—独角伶盗龙）是应用C语言编写的库；libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容； Node.js的利用场景目前前端开发的库都是以node包的模式进行治理；npm、yarn工具成为前端开发应用最多的工具；越来越多的公司应用Node.js作为web服务器开发；大量我的项目须要借助Node.js实现前后端渲染的同构利用；资深前端工程师须要为我的项目编写脚本工具（前端工程师编写脚本通常会应用JavaScript，而不是Python或者shell）；很多企业在应用Electron来开发桌面应用程序；Node的版本工具nvm：Node Version Manager；曾经能够在Windows应用n：Interactively Manage Your Node.js Versions（交互式治理你的Node.js版本）Node的REPLREPL是Read-Eval-Print Loop的简称，翻译为“读取-求值-输入”循环；REPL是一个简略的、交互式的编程环境；事实上，咱们浏览器的console就能够看成一个REPL。Node也给咱们提供了一个REPL环境，咱们能够在其中演练简略的代码。 Node程序传递参数在某些状况下执行node程序的过程中，咱们可能心愿给node传递一些参数： node index.js env=development coderwhy如果咱们这样来应用程序，就意味着咱们须要在程序中获取到传递的参数：获取参数其实是在process的内置对象中的； argv属性中蕴含了咱们须要的参数非凡的全局对象这些全局对象能够在模块中任意应用，然而在命令行交互中是不能够应用的； __dirname：获取以后文件所在的门路__filename：获取以后文件所在的门路和文件名称、常见的全局对象process对象：process提供了Node过程中相干的信息：比方Node的运行环境、参数信息等console对象：提供了简略的调试控制台，在后面解说输出内容时曾经学习过了。定时器函数：在Node中应用定时器有好几种形式： setTimeout(callback, delay[, ...args])：callback在delay毫秒后执行一次；setInterval(callback, delay[, ...args])：callback每delay毫秒反复执行一次；setImmediate(callback[, ...args])：callbackI / O事件后的回调的“立刻”执行；process.nextTick(callback[, ...args])：增加到下一次tick队列中；global是一个全局对象，事实上前端咱们提到的process、console、setTimeout等都有被放到global中 ...

关于javascript:Vue3-组件-ref-注意事项

如果一个子组件应用的是选项式 API 或没有应用 <script setup>，被援用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和办法都有齐全的拜访权。这使得在父组件和子组件之间创立严密耦合的实现细节变得很容易，当然也因而，应该只在相对须要时才应用组件援用。大多数状况下，你应该首先应用规范的 props 和 emit 接口来实现父子组件交互。有一个例外的状况，应用了 <script setup> 的组件是默认公有的：一个父组件无法访问到一个应用了 <script setup> 的子组件中的任何货色，除非子组件在其中通过 defineExpose 宏显式裸露： <script setup>import { ref } from 'vue'const a = 1const b = ref(2)// 像 defineExpose 这样的编译器宏不须要导入defineExpose({ a, b})</script>当父组件通过模板援用获取到了该组件的实例时，失去的实例类型为 { a: number, b: number } (ref 都会主动解包，和个别的实例一样)。为组件模板援用标注类型有时，你可能须要为一个子组件增加一个模板援用，以便调用它公开的办法。举例来说，咱们有一个 MyModal 子组件，它有一个关上模态框的办法： <script setup lang="ts">import { ref } from 'vue'const isContentShown = ref(false)const open = () => (isContentShown.value = true)defineExpose({ open})</script>为了获取 MyModal 的类型，咱们首先须要通过 typeof 失去其类型，再应用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型： <script setup lang="ts">import MyModal from './MyModal.vue'const modal = ref<InstanceType<typeof MyModal> | null>(null)const openModal = () => { modal.value?.open()}</script>留神，如果你想在 TypeScript 文件而不是在 Vue SFC 中应用这种技巧，须要开启 Volar 的 Takeover 模式。 ...

关于javascript:js加减乘除精度丢失问题解决

/** 解决两个数相加精度失落问题@param a@param b@returns {Number} */export function floatAdd(a, b) { var c, d, e; if (undefined == a || null == a || "" == a || isNaN(a)) { a = 0; } if (undefined == b || null == b || "" == b || isNaN(b)) { b = 0; } try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } catch (f) { d = 0; } e = Math.pow(10, Math.max(c, d)); return (floatMul(a, e) + floatMul(b, e)) / e;}/** ...

关于javascript:自己简单总结的-loader-原理

loaderloader 其实就是一个函数，会返回解决文件的后果当webpack解析资源时，会调用相应的loader 去解决（从下往上，从右往左的顺序调用）// context 文件内容// map SourceMap （传入SourceMap传入的相干数据）// meta 其余loader 传的参数module.exports = function (context,map,meta){ console.log(context return context}同步loader如果在同步loader中增加异步代码程序会报错 The callback was already called（已调用回调）再次调用就会报错// 第一种module.exports = function (context,map,meta){ console.log(context) return context}// 第二种（如有下一个loader 须要解决能够采纳这种）module.exports = function (context,map,meta){ // 一个参数如果有错误信息，就传错误信息如果没有就是null // context 文件内容 // map SourceMap （传入SourceMap传入的相干数据）持续传递 SourceMap // meta 其余loader 传的参数 this.call(null, context, map, meta)}异步loadermodule.exports = function (context,map,meta){ const callback = this.async() setTimeout(()=>{ callback(null, context, map, meta) }, 1000)}raw Loaderraw loader接管的context 是 Buffer 数据（二进制数据）同步loader 和异步loader 都能够须要配置 module.exports.raw = truemodule.exports = function loader(context,map,meta){ console.log(context) return context}module.exports.raw = truepitch Loaderpitch loader 中能够是异步loader 和同步loader须要裸露一个 pitch办法当在 use 中设置多个loader时，执行程序是先执行 pitch loader pitch loader 执行完了会再执行一般loadermodule.exports = function loader(context,map,meta){ console.log(context) return context}module.exports.pitch = function (){ console.log(pitch)}有什么总结不到位请大佬们帮忙补充下 ...

关于javascript:手写一个-promise

筹备工作实现一个高阶函数调用一个办法，在这个办法执行前先执行另一个办法 // AOP 切片编程function say(who){ console.log(who + '谈话了');}//在函数的原型对象上增加一个属性berfor 能够让每个函数都能调用Function.prototype.berfor = function(berforFunc){ return (...agrs)=>{ berforFunc() this(...agrs) }}let newFn = say.berfor(function(){ console.log('谈话之前');})newFn('我')// ======================================================let oldPush = Array.prototype.push;function push(...agrs){ // this ===》 arr console.log('数据更新了'); oldPush.call(this,...agrs); // call 1、扭转this指向 2、让函数执行}let arr = [1,2,3]// push(arr,4,5,6) // 在这调用push办法时，this的指向是全局，所以应用call 扭转this指向push.call(arr,4,5,6) // 在这调用push办法时，this的指向是全局，对应的函数外部也是全副，所以应用call 扭转this指向console.log(arr)AOPAOP（面向切面编程）的次要作用是把一些跟外围业务逻辑模块无关的性能抽离进去，其实就是给函数加一层，不必管函数外部实现成果代码： function perform(anyMethod,wrappers){ return function(){ wrappers.forEach(wrapper => wrapper.initialize()) anyMethod() wrappers.forEach(wrapper => wrapper.close()) }}let newFn1 = perform(function(){ console.log('say')},[{ initialize(){ console.log('wrapper1 beforeSay') }, close(){ console.log('wrapper1 close') } }, { initialize(){ console.log('wrapper2 beforeSay') }, close(){ console.log('wrapper2 close') } }])newFn1()// wrapper1 beforeSay// wrapper2 beforeSay// say// wrapper1 close// wrapper2 closeafter 在。。。之后// 利用闭包保留times 在执行两次后才会输入function after(times,callback){ return function(){ if(--times === 0){ callback() } }}let fn = after(2, function(){ console.log('really')})fn();fn();应用高阶函数解决异步问题的思路let fs = require('fs')fs.readFile('./name.txt','utf8',function(err,res){ // console.log(res) // 第一种办法应用 school.name = res out() // 第二种办法应用 out('name',res)})fs.readFile('./age.txt','utf8',function(err,res){ // console.log(res) // 第一种办法应用 school.age = res out() // 第二种办法应用 out('name',res)})// 第一种应用回调函数的办法然而这个办法会导致school裸露再里面 //都能够批改 school，所哟并不是黑号let school = {}function out(){ console.log(Object.keys(school)) if(Object.keys(school).length == 2){ console.log(school) }}// 第二种应用上述after的办法来实现，，也就是闭包的模式let out = after(2, function(res){ console.log(res)})function after(times,callback){ let school = {} return function(key,val){ school[key] = val if(--times === 0){ callback(school) } }}公布模式和订阅模式let fs = require('fs')fs.readFile('./name.txt','utf8',function(err,res){ school.name = res event.emit()})fs.readFile('./age.txt','utf8',function(err,res){ school.age = res event.emit()})let event = { _arr:[], // 订阅 on:function(fn){ this._arr.push(fn) }, // 公布 emit:function(fn){ this._arr.forEach(fn => fn()) }}let school = {}event.on(function(){ console.log('读取一个');})event.on(function(){ if(Object.keys(school).length == 2){ console.log(school) }})观察者模式是基于公布订阅模式的 ...

关于javascript:面试官策略模式有使用过吗我没有

何为策略模式？比方在业务逻辑或程序设计中比方要实现某个性能，有多种计划可供咱们抉择。比方要压缩一个文件，咱们既能够抉择 ZIP 算法，也能够抉择 GZIP 算法。这些算法灵活多样，可随便切换，而这种解决方案就是咱们所要学习的策略模式。定义或概念策略模式：定义一系列的算法，将他们一个个封装，并使他们可互相替换。策略模式的最佳实际例子1：奖金计算题目：在很多公司的年终奖都是依照员工的工资基数和年底绩效状况来发放的，例如，绩效为 S 的人年终奖有 4 倍工资，A 的人年终奖有 3 倍，B 的人年终奖有 2 倍。要求咱们写出一个程序来更快的计算员工的年终奖。(编写一个名为 calcBonus 办法来计算每个员工的奖金数额)可能有些人一上来间接就在一个办法中进行很多 if...else 或 switch...case 判断, 而后通过这个办法进行计算。咱们能够来试着写一下： /** * * @param {*} level 绩效等级 * @param {*} salary 工资基数 * @returns 年终奖金额 */var calcBonus = function (level, salary) {if (level === "S") { return salary * 4;} else if (level === "A") { return salary * 3;} else if (level === "B") { return salary * 2;}};calcBonus('A', 20000); // 60000calcBonus('B', 8000); // 16000我想在咱们每个人初学代码时必定都写出过这样的代码。其实这段代码有不言而喻的毛病： ...

关于javascript:手写一个-new

前言当一个构造函数返回一个根本类型的话很好写，指定重定向原型对象和this指向，然而还有两种状况，比方返回一个堆（函数或者对象），那么new进去的实例就会扭转，如下代码 function Dog(name){ this.name = name // 在构造函数中 return 根本类型的成果和没有写 return 是一样的 // return 123 // 在构造函数中 return 一个对象，那么最终 new 进去的是本人写的对象 //return {age：100} // 在构造函数中 return 一个函数，那么最终 new 进去的是本人写的函数 return function(){ console.log('fn......') } // 在构造函数中 return null 的成果和没有写 return 是一样的 return null}let wc = new Dog('wangcai')第一版依据 new 本人写一个 _new()function Dog(name){ this.name = name}// ===============================================(第一版)function _new(Ctor, ...args){ let obj = {}; obj.__proto__ = Ctor.protoType; Ctor.apply(obj,args) return obj}let wc = _new(Dog, 'wangcai')console.log(wc.name) // wangcai第二版（应用Object.create() 办法实现）优化代码; 然而有一个问题如果传的参数不是一个狗造函数，在调用_new() 的时候会报错function Dog(name){ this.name = name}// ===============================================(第二版)function _new(Ctor, ...args){ let obj = Object.create(Cror.perototype) Ctor.apply(obj,args) return obj}// 正确调用let wc = _new(Dog, 'wangcai')// 如果这样写会报错let wc = _new('hellow', 'wangcai')console.log(wc.name) // wangcai第三版这边能够做一个判断因为咱们都晓得结构器上都有一个属性 ’perototype‘ 咱们能够依据这个属性进行判断function Dog(name){ this.name = name}// ===============================================(第三版)function _new(Ctor, ...args){ if(Ctor.hasOwnProperty('perototype')){ throw new TypeError(`${Ctor} is not a constructor`) } let obj = Object.create(Cror.perototype) Ctor.apply(obj,args) return obj}// 正确调用let wc = _new(Dog, 'wangcai')// 如果这样写会报错let wc = _new('hellow', 'wangcai') // console.log(wc.name) // wangcai以上却是是能够然而依据前言局部的状况，还是会呈现问题，达不到new的成果，所一有了第四版 ...

关于javascript:解密与探究理解WebSocket协议与报文格式

1. 背景过来，在创立须要在客户端和服务端之间进行双向通信的 Web 应用程序（比方，即时通讯和游戏应用程序）时，须要滥用 HTTP，轮询服务端以获取更新，并且通过独自的 HTTP 调用发送上行告诉。这导致许多问题：服务器被迫为每个客户端应用多个不同的底层 TCP 连贯：一个用于向客户端发送信息，每个传入的音讯都须要建设新连贯。协定开销较高，每个客户端到服务端的音讯都带有 HTTP 头。客户端脚本被迫保护从出站连贯到入站连贯的映射，以跟踪回复。更简略的解决方案是在两个方向上应用单个 TCP 连贯进行通信。这就是 WebSocket 协定所提供的。它为网页与近程服务器之间的双向通信提供一种代替 HTTP 轮询的抉择。该技术能够用于各种 Web 应用程序，比方游戏、股票行情、反对并发编辑的多用户应用程序、实时公开服务器端服务的用户界面等。WebSocket 协定旨在取代应用 HTTP 作为传输层的双向通信技术，以便利用现有基础设施（代理、过滤、身份验证）。因为 HTTP 最后并非为双向通信而设计，因而这些技术是在效率和可靠性之间进行衡量的状况下施行的。WebSocket 协定的指标是在现有的 HTTP 基础设施环境中，实现双向 HTTP 技术。因而，WebSocket 协定被设计为能够在 HTTP 端口 80 和 443 上运行，并且反对 HTTP 代理和中间设备，即便可能引入一些特定于以后环境的复杂性。然而，WebSocket 的设计不局限于 HTTP，将来的实现能够在专用端口上应用更简略的握手形式，而无需从新设计整个协定。最初一点很重要，因为交互式音讯的流量模式与规范 HTTP 流量不齐全匹配，某些组件可能产生异样负载。 2. WebSocket 握手WebSocket 服务端应用规范 TCP 套接字监听进入的连贯。下文假设服务端监听 example.com 的 8000 端口，响应 example.com/chat 上的 GET 申请。握手是 WebSocket 中 “Web”。它是从 HTTP 到 WebSocket 的桥梁。在握手过程中，协商连贯的细节，并且如果行为不非法，那么任何一方都能够在实现前退出。服务端必须认真了解客户端的所有要求，否则可能呈现平安问题。 2.1 客户端握手申请客户端通过分割服务端，申请 WebSocket 连贯的形式，发动 WebSocket 握手流程。客户端发送带有如下申请头的规范 HTTP 申请（HTTP 版本必须是 1.1 或更高，并且申请办法必须是 GET）：`GET /chat HTTP/1.1Host: example.com:8000Upgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13 ...

关于javascript:手写一个call

;(function(){ // 接管实参有三种计划 1、通过形参 2、...args 数组 3、arguments 伪数组，并且接管了所有的实参 // 因为call 接管不是数组也不能安找形参来接管，所以抉择第三种 arguments 接管 function myCall(context, arguments){ context = context ? Object(context): window //this 只有谁调用 this就是谁这里示意 fn // ================== 因为this指向了函数所以能够试着这样 //this() // 因为是独立函数调用所以this 又指向了window 所以这样写不行 // ================== // ================== 因为this指向了函数也能够试着这样 let res = context.f(...args) // ================== let args = [] for(let i = 1; i<arguments.length; i++){ args.push(arguments[i]) } let res = context.f(...args) // 然而这样的就往源数据上增加了一个属性，所以咱们须要删除 f属性 delete context.f return res; } // 挂载到Function 的原型对象上，就意味着所有的函数都能够调用myCall Function.prototype.myCall = myCall;})()function fn(num1, num2){ console.log(this) return num1 + num2}let obj = {name: 'wc'}let res = fn.myCall(obj ,1 ,2);

关于javascript:zonejs由入门到放弃之一通过一场游戏认识zonejs

之前有写过一些介绍Angular中一些理念的文章，接下来咱们来聊聊Angular中的一些依赖，比方zone.js。它是一个跨多个异步工作的执行上下文，在拦挡或追踪异步工作方面有着特地弱小的能力。来跟着啸达同学的文章，一起理解一下吧~前言最近一段时间因为工作上的安顿，须要钻研Angular中的一些外部机制和模块。Angular作为一个专门为大型前端我的项目而设计的优良框架，实际上有很多值得大家学习和借鉴的长处的。之前理解到Angular的变更检测跟Vue和React有实质的区别，而Angular的检测体系是离不开zone.js的，所以本系列就针对zone.js进行一些分享，也心愿可能随着集体对zone.js逐渐学习制作一个由浅入深地学习领导，欢送大家踊跃上车，一起学习、探讨。为什么要学习zone.js这个系列的文章会蕴含大量的猜测、验证、demo和源码剖析。在我本人学习的过程中，也呈现过屡次想要放弃，或者感觉差不多就行了的想法。所以如果想要保持一件事，须要有一些明确的动机，毕竟动机不纯，想装纯也难。那么就我集体而言，除了工作上的须要之外，我感觉有以下两点驱动力：动机一17年的时候，有幸加入了一次大厂的面试，技面的时候我被问到Angular是如何解决变更检测的。我对这块的常识非常含糊，所以乱答了一气。我把脑子里跟变更检测相干的词都掏了进去，后果越描越黑，最初不能自圆其说。面试官跟我说，心愿我当前把这块内容理理顺。我许可了他，但没想到竟是6年当前。动机二置信每个Angular的开发者都会见过相似上面这样的报错信息，甚至有些初学Angular的共事也因而感觉Angular的学习曲线比拟平缓、错误信息极不敌对。其实，大家认为这些不敌对的错误信息正是zone.js弱小的中央。在不理解zone.js的前提下，这的确有点反人类。所以心愿在学完这个系列后，不仅晓得这样的谬误意味着什么，还能分明这样的问题是怎么产生的。 at HTMLButtonElement.throwError (https://zonejs-basic.stackblitz.io/~/index.js:19:11)at _ZoneDelegate.invokeTask (https://unpkg.com/zone.js:446:35)at Zone.runTask (https://unpkg.com/zone.js:214:51)at ZoneTask.invokeTask [as invoke] (https://unpkg.com/zone.js:528:38)at invokeTask (https://unpkg.com/zone.js:1730:22)at globalCallback (https://unpkg.com/zone.js:1761:31)at HTMLButtonElement.globalZoneAwareCallback (https://unpkg.com/zone.js:1797:20)at ____________________Elapsed_496_ms__At__Fri_Jan_20_2023_16_20_20_GMT_0800_________ (http://localhost)at Object.onScheduleTask (https://unpkg.com/zone.js@0.8.20/dist/long-stack-trace-zone.js:108:22)at _ZoneDelegate.scheduleTask (https://unpkg.com/zone.js:426:55)at Zone.scheduleTask (https://unpkg.com/zone.js:257:47)at Zone.scheduleEventTask (https://unpkg.com/zone.js:283:29)at HTMLButtonElement.addEventListener (https://unpkg.com/zone.js:2038:37)at HTMLButtonElement.bindSecondButton (https://zonejs-basic.stackblitz.io/~/index.js:16:8)at _ZoneDelegate.invokeTask (https://unpkg.com/zone.js:446:35)at Zone.runTask (https://unpkg.com/zone.js:214:51)at ____________________Elapsed_1801_ms__At__Fri_Jan_20_2023_16_20_18_GMT_0800_________ (http://localhost)at Object.onScheduleTask (https://unpkg.com/zone.js@0.8.20/dist/long-stack-trace-zone.js:108:22)at _ZoneDelegate.scheduleTask (https://unpkg.com/zone.js:426:55)at Zone.scheduleTask (https://unpkg.com/zone.js:257:47)at Zone.scheduleEventTask (https://unpkg.com/zone.js:283:29)at HTMLButtonElement.addEventListener (https://unpkg.com/zone.js:2038:37)at main (https://zonejs-basic.stackblitz.io/~/index.js:5:8)at _ZoneDelegate.invoke (https://unpkg.com/zone.js:412:30)at Zone.run (https://unpkg.com/zone.js:169:47)简略认识一下我不太会形象概括，幸好Angular团队对zone.js的定义只有一句，然而它简略形象到让你看了和没看都没什么区别： A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.到目前为止，我感觉大家也不用太在意这里形容了个啥，前面我会用其它的形式让你慢慢理解它。这里权且对几个词有点印象即可： ...

关于javascript:ECMAScript-2023新增特性

官网现已全新降级—欢送拜访！数新网络-让每个人享受数据的价值前言2023 年 6 月 27 日，第 125 届 ECMA 大会正式批准了 ECMAScript 2023 语言标准，这意味着它当初正式成为最新 ECMAScript 规范。上面就来看看 ECMAScript 2023 都有哪些新个性吧！ 01 概览 1 ）从头到尾搜寻数组：findLast() 、findLastIndex()；2 ）Hashbang 语法；3）通过正本更改数组：toReversed()、toSorted()、toSpliced()、with();4）Symbol 作为 WeakMap 的键. 02 具体介绍2-1 findLast（）数组的find办法咱们罕用来从前查找符合条件的元素如果咱们先从后查找元素呢？那么就能够应用array.findLast 2-2 findLastIndex咱们能够应用findLastIndex来查找数组开端的元素所在位置了 2-3 Hashbang 语法Unix 的命令行脚本都反对#!命令，又称为 Hashbang。这个命令放在脚本的第一行，用来指定脚本的执行器。Hashbang 就是想为 JavaScript 脚本引入了#!命令，这个命令写在脚本文件或者模块文件的第一行：这样，Unix 命令行就能够间接执行脚本了：不过这样的话，hashbang 就必须严格的在文件头，否则就会呈现语法错误，导致这个 JavaScript 脚本文件无奈应用2-4 数组的非破坏性办法（通过正本更改数组） · Array.prototype.toReversed()· Array.prototype.toSorted()· Array.prototype.toSpliced()· Array.prototype.with()咱们晓得大多数组办法都是非破坏性的，也就是不会更改原数组如filter 当然，也有一些是破坏性的办法，它们在执行时会扭转原数组，比方 sort() 办法：在数组的办法中，上面的办法是具备破坏性的：· reverse()· sort()· splice()如果想要这些数组办法利用于数组而不扭转它，能够应用上面任意一种模式：能够看到，咱们首先须要创立数组的正本，再对这个正本进行批改。因而就引入了这三个办法的非破坏性版本，因而不须要手动创立正本再进行操作：· reverse() 的非破坏性版本：toReversed()· sort() 非破坏性版本：toSorted(compareFn)· splice() 非破坏性版本：toSpliced(start, deleteCount, ...items)这些函数属性引入到了 Array.prototype：· Array.prototype.toReversed()· Array.prototype.toSorted(compareFn)· Array.prototype.toSpliced(start, deleteCount, ...items)· Array.prototype.with(index, value)除此之外，还有了一个新的非破坏性办法：with()。该办法会以非破坏性的形式替换给定 index 处的数组元素，即 arr[index]=value 的非破坏性版本Array.prototype.toReversed()toReversed() 是 reverse() 办法的非破坏性版本： Array.prototype.toSorted()toSorted() 是 sort() 办法的非破坏性版本： Array.prototype.toSpliced()splice() 办法比其余几种办法都简单，其应用模式：splice(start, deleteCount, ...items)。该办法会从从 start 索引处开始删除 deleteCount个元素，而后在 start 索引处开始插入item 中的元素，最初返回曾经删除的元素。toSpliced 是 splice() 办法的非破坏性版本，它会返回更新后的数组，原数组不会变动，并且无奈再失去曾经删除的元素： Array.prototype.with().with()办法的应用模式：.with(index, value)，它是 arr[index] = value 的非破坏性版本： WeakMap反对应用Symbol作为key很久以前，咱们只能应用一个对象作为 WeakMap 的key。当初咱们应用“Symbol”作为“WeakMap”的key。 03 浏览器反对目前支流浏览器都以反对以上办法

关于javascript:JavaScript-闭包是什么深入了解

闭包是指在一个函数外部创立另一个函数，并且外部函数能够拜访内部函数的变量、参数以及其余外部函数，即便内部函数曾经执行结束。这种机制使得外部函数保留了对外部作用域的援用，即便内部作用域曾经不再沉闷。为什么闭包重要？闭包在 JavaScript 中具备重要的用处和价值。它们能够用于创立公有变量、封装逻辑、防止全局净化等方面。另外，闭包还容许你在函数之外操作局部变量，从而为代码提供更大的灵活性和可维护性。 JavaScript 闭包的特点闭包能够拜访内部函数的变量，即便内部函数曾经返回了。闭包保留内部函数变量的援用，而不是理论的值。每当一个函数在另一个函数中被创立时，就会产生闭包。JS 闭包的用处闭包常被用于: 封装 - 外部函数能够拜访内部变量,但内部函数不能拜访外部变量。这提供了封装和数据私密性。状态继续 - 闭包能够在函数调用之间放弃状态(例如计数器)。函数的变量在调用之间继续存在。偏函数利用 - 闭包能够用于偏函数利用和柯里化函数。这波及到创立一个捕捉一些参数但保留其余参数未设置的函数。JS 闭包的类型1. 一般闭包一般闭包是指一个函数外部定义了另一个函数，并且外部函数援用了内部函数的变量。这种状况下，外部函数会捕捉内部函数的变量，并能够在内部函数执行结束后持续应用。 var outerVar = 'I am from outer'; function inner() { console.log(outerVar); } return inner;}var closureFunction = outer();closureFunction(); // 输入：I am from outer2. 立刻调用函数表达式（IIFE）闭包IIFE 是一种创立闭包的常见模式。通过将函数定义包裹在括号内并立刻调用它，你能够创立一个在执行后依然具备拜访内部作用域的函数。 var privateVar = 'I am private'; return function() { console.log(privateVar); };})();closureFunction(); // 输入：I am private实际案例：计数器闭包让咱们通过一个理论案例来进一步了解闭包的利用。思考一个简略的计数器，能够通过闭包来实现： var count = 0; return function() { return ++count; };}var counter = createCounter();console.log(counter()); // 输入：1console.log(counter()); // 输入：2console.log(counter()); // 输入：3 ...

关于javascript:7个实用的CSS技巧

关于javascript:微服务与微前端区别在哪里

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 在一直倒退的软件开发畛域，两种开创性的架构格调，微服务和微前端，曾经成为了变革性的范例。这些办法曾经从新定义了古代应用程序的构建和部署形式。微服务和微前端都秉承了模块化、可扩展性和灵活性的准则，曾经成为了寰球开发团队的首选。什么是微服务？微服务是一种架构格调，其中单体利用被划分为若干个小型、涣散耦合且独立的服务。所有这些微服务独特工作，造成一个更大的零碎。在微服务架构中，每个服务代表一个特定的业务能力，并作为一个领有本人的数据库和逻辑的独立单元运行。微服务教程步骤一：设定我的项目为我的项目创立一个新的文件夹，并初始化一个新的 Node.js 我的项目。关上终端并运行以下命令： mkdir microservices-tutorialcd microservices-tutorialnpm init -y步骤二：装置依赖项npm install express axios步骤3：创立微服务对于这个教程，咱们将创立两个微服务："用户"服务和"订单"服务。"用户"服务将解决与用户相干的操作，而"订单"服务将解决与订单相干的操作。在主我的项目文件夹内创立两个文件夹，名为“users”和“orders”。在每个文件夹内，创立一个 index.js 文件。步骤4：施行微服务让咱们从施行"用户"服务开始。关上users/index.js文件，并增加以下代码： const express = require('express');const app = express();const port = 3000;app.get('/users', (req, res) => { const users = [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }, { id: 3, name: 'Bob Johnson' }, ]; res.json(users);});app.listen(port, () => { console.log('Users service is running on port ' + port);});当初，实现"订单"服务。关上 orders/index.js 文件，并增加以下代码： ...

关于javascript:为threejs实现实时渲染与烘焙

Three.js 社区的敌人们，大家好！当初，通过简略的 API 调用，实时的渲染和烘焙曾经成为可能。您还能够应用其余一些 3D 工具，比方 Babylon.js、Unity3D、Blender，甚至 FBX 或 GLTF，都能够间接应用，无需任何渲染引擎即可烘焙或渲染您的模型。阳光成果输入：区域光成果输入：此外，咱们还为一些我的项目引入了咱们本人的区域光，比方 three.js、babylon.js、FBX 和 GLTF/GLB 格局，因为它们短少区域光个性。尽管 Three.js 有 ReactAreaLight，但它不能间接用于烘焙或渲染引擎中的光线追踪渲染。注：这是测试版，意味着咱们仍在开发一些性能，它们将尽快推出。咱们须要的只是您的反对。 RealAPI 是一个完满的解决方案，可在 Three.js 我的项目中间接实现无缝实时烘焙和渲染，打消了手动操作 WebGL 的复杂性，将您的创作晋升到前所未有的高度。次要亮点：实时渲染或烘焙：RealAPI 引入了一项前沿性能，能够在应用程序内动静地烘焙和渲染场景，为视觉魅力不凡的场景铺平道路。轻松集成：咱们的 npm 包确保了无障碍的入门体验，具体和易懂的文档将随同您的每一步。演示展现：通过咱们的演示视频亲眼见证 RealAPI 的弱小性能：带有阳光的根本演示带有区域光的根本演示开始应用：文档：RealAPI 文档官网页面：RealAPI 官网页面npm 包（实用于 three.js）：RealAPI npm 包有问题吗？：如果您遇到任何问题，或者有什么须要征询的中央，请随时与咱们分割：在咱们的 Discord 平台上进行深刻的探讨：RealAPI Discord在咱们专属反对 Discord 上体验一流的客户关心：客户关心 Discord我期待着您的退出，与您一起摸索 RealAPI，独特踏上这个充斥创意的 3D 之旅。最好的祝福

关于javascript:ReactNative-Canvas

思路：React-Native本人是没有Canvas，能够利用react-native-webview注入html做一个Canvas，把写入Webview的html作为可变的字符串，每写一条canvas就在字符串上的script标签里增加对应的语句，每一次增加都是异步的，通过onMessage去获取Webview往外传的值初始化一个html页面window.onload里去执行咱们要增加的js字符串private state: State = { js: `const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');window.document.body.appendChild(canvas);`, end: '', // js尾巴 style: {width: 1, height: 1}};<WebView style={[style]} javaScriptEnabledAndroid={true} overScrollMode="never" mixedContentMode="always" thirdPartyCookiesEnabled allowUniversalAccessFromFileURLs javaScriptEnabled={true} domStorageEnabled={false} automaticallyAdjustContentInsets={true} scalesPageToFit={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} onMessage={(e) => { }} source={{ html: `<!DOCTYPE html> <html lang="en"> <head> <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'> <style> html { -ms-content-zooming: none; -ms-touch-action: pan-x pan-y; } * { user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; padding: 0; margin: 0; } </style> </head> <body> <script> window.onload = () => { ${js + end} } </script> </body> </html>` }}/>写js的代码设置宽高 public setStyle = (options: { width: number; height: number }, ratio = 1) => { return new Promise<Canvas>((resolve) => { const {style, js} = this.state; this.setState({ style: {...style, ...options}, js: js + `canvas.width = ${options.width * ratio};canvas.height = ${options.height * ratio};` } as State, () => resolve(this)); }); };非凡解决画图片，须要在图片image.load实现之后写别的jsprivate changeJs = (newJs: string, callback: () => void, newEnd?: string) => { const {js, end} = this.state; this.setState({ js: js + newJs, end: end + (newEnd || "") } as State, callback);};// 设置图片public setImage = (src: string, x: number, y: number, w: number, h: number) => { const imageName = this.randCode(); // 随机字符串 return new Promise<Canvas>((resolve) => { this.changeJs(`const ${imageName} = new Image();${imageName}.src = "${src}";${imageName}.setAttribute("crossOrigin", 'Anonymous');${imageName}.onload = function() { ctx.drawImage(${imageName}, ${x}, ${y}, ${w}, ${h}); window['ReactNativeWebView'] && window['ReactNativeWebView'].postMessage(JSON.stringify({ onKey: "${imageName}", }));// 把尾巴 }; 作为一段放在最初面的`, () => resolve(this), `};`); });};获取webview的值(window.ReactNativeWebView.postMessage)打印

关于javascript:使用Vue-Query进行高级数据获取

关于javascript:使用Web浏览器来管理手机和服务器上的文件

一维文件应用Web浏览器对立治理手机/平板/电脑/服务器/云存储等设施上的文件, 目前反对Windows, Android 和Linux等设施. 主界面看起来还比拟清爽, 反对换色和黑夜模式, 如下图: 提供了单机版和网络版2个版本, 其中: 单机版无需注册和登录, 适宜于单个设施操作. 网络版须要注册和登录, 适宜于操作多个设施. 其中的代码编辑器, 比拟适宜治理服务器上的配置文件: 详情参考主页: https://wfsok.com

关于javascript:本地存储封装

前言在我的项目中应用本地存储(LocalStorage/SessionStorage)的场景有很多，如果有较多频次的应用，则能够思考简略封装一下。封装便当：对立治理：如果视频频次将多，思考将本地存储全放到某一个文件夹中，防止前期凌乱几不好保护等问题；序列化：存储的时候转字符串，应用的时候转回来，通过公共办法解决即可，不必当应用的时候再一一解决；类型推断：在实例化时传入类型，在传入和获取的时候会主动推断类型；兼容性：PC\挪动\小小程序等多端通用接下来简略实现一下：(以 LocalStorage 为例) 封装// src/utils/storage.tsinterface IStorage<T> { key: string; defaultValue: T;}export class Storage<T> implements IStorage<T> { key: string; defaultValue: T; constructor(key: string, defaultValue: T) { this.key = key; this.defaultValue = defaultValue; } // 填值 setItem(value: T) { localStorage.setItem(this.key, JSON.stringify(value)); } // 取值 getItem(): T { const val = localStorage[this.key] && localStorage.getItem(this.key); if (val === undefined) return this.defaultValue; try { return val && val !== 'null' && val !== 'undefined' ? (JSON.parse(val) as T) : this.defaultValue; } catch (err) { return val && val !== 'null' && val !== 'undefined' ? (val as unknown as T) : this.defaultValue; } } // 移除 removeItem() { localStorage.removeItem(this.key); }}实例化// src/common/storage.tsimport { Storage } from '../utils/storage';// user messageexport interface IUser { id: number; name: string; phoneNum: number;}export const userStorage = new Storage<IUser | null>('user', null);应用以 angular 为例 ...

关于javascript:下载文件并重命名文件名称

话不多说，间接上菜，请各位大佬提出不同意见 /** * @filename <string> 自定义的文件名 * @url <string> 下载地址 */export function renameDownloadFile(filename,url){ // 获取文件 getBlob(url).then(blob => { // 保留文件 saveAs(blob, filename); })}// 重命名下载export function getBlob(url) { // 创立Promise对象 return new Promise(resolve => { // 创立XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 设置申请形式 xhr.open('GET', url, true); // 设置响应类型 xhr.responseType = 'blob'; // 当申请实现时，触发onload事件 xhr.onload = () => { // 如果响应状态码为200，则解析响应 if (xhr.status === 200) { resolve(xhr.response); } }; // 发送申请 xhr.send(); });}export function saveAs(blob, filename) { // 如果反对msSaveOrOpenBlob办法，则应用msSaveBlob办法保留文件 if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, filename); } else { // 创立a标签 const link = document.createElement('a'); // 获取body元素 const body = document.querySelector('body'); // 设置a标签的href属性 link.href = window.URL.createObjectURL(blob); // 设置a标签的download属性 link.download = filename; // 当a标签被点击时，触发onclick事件 // fix Firefox link.style.display = 'none'; body.appendChild(link); // 点击a标签，触发onclick事件 link.click(); // 销毁a标签 body.removeChild(link); // 开释a标签的href属性 window.URL.revokeObjectURL(link.href); }}

关于javascript:展会预告-图扑与您相约用友-2023-全球商业创新大会

为汇聚商业智慧，开释企业潜能，深刻推动企业数智化转型降级，翻新客户价值，让数智化在更多的企业胜利，由用友主办的“2023 寰球商业翻新大会”，将于本月 8 月 18 日至 20 日，在上海市“国家会展中心”隆重召开。图扑软件受邀缺席本次大会，届时将携诸多 Web 端的 UI/2D/3D、GIS、BIM 及 VR/AR 等可视化、数字孪生相干解决方案，亮相 4.2 馆 E 厅 B3 展位。咱们诚邀您光临参观，期待与各位领导、业界专家和潜在合作伙伴，独特探讨赋能行业数字化发展趋势。本次大会以“数据驱动智能经营”为主题，将深入探讨主题化交融翻新、全局数据治理、遍及 AI 利用、降级数智底座及全球化经营等企业关注的热点话题。大会设有价值、技术、生态 3 大主题峰会，40+ 专题论坛，3000+ m² 数智企业体验馆等诸泛滥流动安顿。会上，用友将与来自各畛域及行业的生态搭档、先锋企业、专家学者等千余位嘉宾共话业务新增长，共享用友 BIP 生态新成绩。以 ChatGPT 为代表的 AI 热潮席卷寰球，标记着 AI 遍及利用时代的到来，企业的商业翻新，也由此前偏重数据服务的数字化，进入到数据服务与智能化并举的数智化新阶段。作为专精可视化技术的图扑软件，咱们致力于成为企业数智化转型的优质赋能搭档，助推各畛域突破数据孤岛景象，让产业运维可追溯，设施运行可监管，实现智能制作和数字化转型。牵手泛滥龙头企业，利用自研 HT for Web产品打造多项利用场景。已笼罩工业制作、楼宇园区、轨道交通、城市政务、水务能源、新基建、智慧运维、国防公安、医疗科研、金融军工等各个行业。数百个工业互联网可视化我的项目施行教训，造成了⼀整套实践证明高效开发流程和生态系，可疾速实现现代化、高性能、跨平台桌面 Mouse/挪动 Touch/虚拟现实 VR 图形展现成果及交互体验。提供从征询、设计、施行到售后的全方位可视化反对服务。您能够至图扑软件官网查看更多案例及成果：图扑软件 - 构建先进 2D 和 3D 可视化所须要的所有

关于javascript:总结继承的一些笔记

原型链继承 // 父 ==> 构造函数 function Person(name,age){ this.name = name this.age = age } Person.prototype.sayHello = function(){ console.log('谈话...') } // 子 ==> 构造函数 function Child(name,age){ this.name = name this.age = age } // 扭转Child 的原型对象，指向Person的公共属性，达到原型链的继承形式 Child.prototype = new Person() Child.prototype.constructor = Child let p = new.Child() p.sayHello() // '谈话...'组合继承 // 父 ==> 构造函数 function Person(name,age){ this.name = name this.age = age } Person.prototype.sayHello = function(){ console.log('谈话...') } // 子 ==> 构造函数 function Child(name,age){ Person.call(this,name,age) // 继承Person的公有属性 } // 扭转Child 的原型对象，指向Person的公共属性，达到原型链的继承形式 Child.prototype = new Person() Child.prototype.constructor = Child let c = new.Child('wc',18) p.name // 'wc'寄生组合继承 ...

关于javascript:总结全面的监测数据类型的方法

须要检测是不是 number string boolean undefined function应用typeOf 检测是有局限性的比方数组、对象等援用类型检测进去都是Object console.log(typeOf 123) // Numberconsole.log(typeOf '123') // String console.log(typeOf NaN) // Numberconsole.log(typeOf true) // Booleanconsole.log(typeOf undefined) // Undefinedconsole.log(typeOf function(){}) // Functionconsole.log(typeOf null) // Objectconsole.log(typeOf {}) // Objectconsole.log(typeOf []) // Object应用 instanceof 检测某个对象是否属于某个类的实例然而检测数组、对象、函数等援用类型检测进去也是Object console.log({}.instanceof Object) // trueconsole.log([].instanceof Array) // trueconsole.log(123.instanceof Number) // 报错应用 construct 检测能够依据原型对象检测 console.log({}.construct === Object) // trueconsole.log([].construct === Array) // trueconsole.log(123.construct === Number) // 报错目前精确的检：Object.prototype.toString.call() ...

关于javascript:让你兴奋不已的13个CSS技巧

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 1.应用边框绘制一个三角形在某些状况下，例如在工具提醒中增加箭头指针时，如果你只须要简略的三角形，那么加载图片可能会适度。仅应用CSS，您就能够通过边框创立一个三角形。这是一个相当老的技巧。现实状况下，你会在一个宽度和高度都为零的元素上设置边框。所有的边框色彩都是通明的，除了那个将造成箭头的边框。例如，要创立一个向上指的箭头，底部边框是有色彩的，而右边和左边是通明的。无需包含顶部边框。边框的宽度决定了箭头的大小。 .upwards-arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid crimson;}这将创立一个像上面所示的向上指的箭头：事例地址：https://codepen.io/chriscoyier/pen/DELgOJ 2.替换元素的背景z-index 属性规定了元素如何重叠在其余定位元素上。有时，你可能会设置一个 z-index 属性让子元素的层级较低，后果却发现它暗藏在其父元素的背景之后。为了避免这种状况，你能够在父元素上创立一个新的重叠上下文，避免子元素暗藏在其前面。创立重叠上下文的一种办法是应用 isolation: isolate CSS款式申明。咱们能够利用这种重叠上下文技术来创立悬停成果，该成果能够替换按钮的背景。例如： button.join-now { cursor: pointer; border: none; outline: none; padding: 10px 15px; position: relative; background-color: #5dbea3; isolation: isolate; /* If ommitted, child pseudo element will be stacked behind */}button.join-now::before { content: ""; position: absolute; background-color: #33b249; top: 0; left: 100%; right: 0; bottom: 0; transition: left 500ms ease-out; z-index: -1;}button.join-now:hover::before { left: 0;}上述代码在鼠标悬停时替换了 button 的背景。背景的变动不会烦扰前景的文本，如上面的gif所示： ...

关于javascript:前端打包优化

前言最近发现公司前端我的项目打包后生成的单个文件都超过4Mb了，导致页面关上的时候十分慢，于是着手优化打包，指标是实现单个文件大小低于1Mb。筹备在优化之前咱们先提出两个优化思路，如下所示：1、应用CDN引入包文件2、应用npm引入的第三方包文件进行拆包3、将我的项目文件的公共局部进行拆包，如src/components和src/views文件夹有了思路之后，接下来咱们就开干。留神：上面我是用vue我的项目做为演示。应用CDN引入包文件实用的场景：公共的框架或者库独自引入，避免nodejs打包引入，如：vue.js、vuex、vue-router和elementui。实现：咱们能够应用第三方CDN库复制链接放入public/index.html文件中，如下所示：尽管咱们引入了，然而咱们还要配置webpack不要把nodejs引入的包进行打包。批改vue.config.js文件，如下所示： configureWebpack: { name: name, externals: { // 包名: '引入名' vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'Element', moment: 'moment', dayjs: 'dayjs', axios: 'axios', clipboard: 'ClipboardJS', echarts: 'echarts', html2canvas: 'html2canvas', 'js-beautify': 'beautifier', 'js-cookie': 'Cookies', lodash: '_', qrcode: 'QRCode', screenfull: 'screenfull', 'vue-clipboard2': 'VueClipboard', 'vue-i18n': 'VueI18n' }下面externals中key是包名，value是引入名，大家依照这个参考设置就好。这样就实现了第1步的操作。应用npm引入的第三方包文件进行拆包接下来咱们剖析一下前端我的项目打包后的报告，剖析文件大小状况，依据这个报告咱们来判断是否要分包，如下所示。批改vue.config.js文件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin configureWebpack: { name: name, externals: { // 包名: '引入名' vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'Element', moment: 'moment', dayjs: 'dayjs', axios: 'axios', clipboard: 'ClipboardJS', echarts: 'echarts', html2canvas: 'html2canvas', 'js-beautify': 'beautifier', 'js-cookie': 'Cookies', lodash: '_', qrcode: 'QRCode', screenfull: 'screenfull', 'vue-clipboard2': 'VueClipboard', 'vue-i18n': 'VueI18n' }, resolve: { alias: { '@': resolve('src'), '@@': resolve('src/x7') } } plugins: [ new BundleAnalyzerPlugin() ]}批改package.json文件 ...

关于javascript:RN项目调试过程中遇到的坑

一、开发过程中遇到短少 .jsbundle或者 .jsbundle没有及时更新的状况解决办法： ios端：yarn react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest iosandroid端：yarn react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/舒适提醒，每次公布release包之前，最好是应用上述命令生成对应平台的最新bundle包。以保障公布的包是最新的。二、开发过程中遇到依赖加载反复报错信息如下： error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: react-native-doc-viewer (to unlink run: "react-native unlink react-native-doc-viewer")react-native-document-picker (to unlink run: "react-native unlink react-native-document-picker")react-native-fs (to unlink run: "react-native unlink react-native-fs")解决办法：在我的项目的根目录中，增加一个 react-native.config.js。文件中如下配置： // react-native.config.jsmodule.exports = { dependencies: { 'react-native-doc-viewer': { platforms: { // android: null, ios: null, // add more platform to disable auto-linking for them too }, }, 'react-native-document-picker': { platforms: { // android: null, ios: null, // add more platform to disable auto-linking for them too }, }, 'react-native-fs': { platforms: { // android: null, ios: null, //ios: null, // add more platform to disable auto-linking for them too }, }, }}此处只作为参考，具体须要依据您反复的依赖进行对应的配置。 ...

关于javascript:大多数开发人员无法通过这个简单的CSS面试问题CSS特异性

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 给定以下HTML和CSS代码，你晓得 test文本的色彩会是什么吗？ <body> <div class="hello"> <p class="abc">test</p> </div></body>p.abc { color: purple;}.hello p { color: red;}.abc { color: blue;}p { color: green;}花点工夫认真思考一下如果你猜想的色彩是红色，那么你是正确的！你也对CSS特异性有着扎实的了解。事例地址：https://codepen.io/ambroseliew/pen/jOpzXpj 为什么？如果你没有找到正确答案或者不明确为什么文本色彩是红色的，你能够查看这篇其余文章，在这里我具体解说了CSS的特异性。 https://medium.com/@ambroseliew1998/stop-writing-important-in... 了解这个概念很重要，因为如果你是一个网页开发者，尤其是前端开发者，这样的概念常常被应用。攻略指南但更进一步解释，利用紫色的CSS特异性和利用红色的另一条规定，它们的特异性都是0-0-0-1-1。这是因为它们都有1个类选择器和1个类型选择器。同时，对于利用蓝色的规定，其CSS特异性为0-0-0-1-0，因为它只有一个类选择器。而利用绿色的规定的CSS特异性为0-0-0-0-1，因为它只有一个类型选择器。因而，具备最高CSS特异性值的规定是利用紫色的规定和利用红色的其余规定。然而有两个具备雷同CSS特异性值的CSS规定！咱们如何晓得应该利用哪个？这就是“层叠”在层叠样式表（CSS）中发挥作用的中央。这意味着最初利用的规定（即位于底部的规定）将被利用。在这种状况下，将利用利用红色的规定。咱们甚至能够进一步增加另一个CSS规定到列表中。 .hello.hello { color: pink;}是的，你能够重叠类选择器（和ID选择器）来减少特异性。因而，这条规定的CSS特异性将为0-0-0-2-0。这个值必定比迄今为止的所有其余规定都要高。然而，如果你将这个CSS规定增加到目前在codepen中已有的CSS代码中，你会发现文本的色彩依然是红色！为什么会这样呢？这是因为间接针对元素的规定总是优先于针对父元素的规定（也称为继承款式）。因而，在这种状况下，因为这个CSS规定是针对父元素而不是理论的p 标签自身，它会被其余更具体的CSS规定笼罩。是的，利用绿色的CSS规定也会笼罩这个粉色。如果你感觉学到了新货色，随时能够点个赞，鼓掌或者留下评论✍️！交换有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于javascript:现代TypeScript高级教程枚举和泛型

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接枚举和泛型接下来咱们将学习TypeScript 中的两个重要主题：枚举（Enums）和泛型（Generics）。这两个个性能大大提高代码的可重用性和安全性。枚举枚举是 TypeScript 中一种非凡的数据类型，容许咱们为一组数值设定敌对的名字。枚举的定义应用 enum 关键字。 enum Direction { Up = 1, Down, Left, Right,}在这个例子中，咱们定义了一个名为 Direction 的枚举，它有四个成员：Up、Down、Left 和 Right。Up 的初始值为 1，其余成员的值会主动递增。除了应用数值，咱们也能够应用字符串： enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT",}此外，TypeScript 还反对计算的和常量成员。常量枚举通过 const enum 进行定义，TypeScript 会在编译阶段进行优化： const enum Enum { A = 1, B = A * 2}异构枚举TypeScript 反对数字和字符串混用的枚举，这种类型的枚举被称为异构枚举： enum BooleanLikeHeterogeneousEnum { No = 0, Yes = "YES",}只管 TypeScript 反对这种用法，但咱们在理论我的项目中应尽可能防止应用异构枚举，因为这会引入不必要的复杂性。枚举成员的类型在某些非凡的状况下，枚举成员自身也能够作为一种类型： enum ShapeKind { Circle, Square,}interface Circle { kind: ShapeKind.Circle; radius: number;}interface Square { kind: ShapeKind.Square; sideLength: number;}泛型在 TypeScript 中，泛型（Generics）是一种弱小的类型工具，它容许咱们编写可重用、灵便和类型平安的代码。泛型容许咱们在定义函数、类或接口时应用类型参数，这些类型参数在应用时能够被动静地指定具体的类型。 ...

关于javascript:js插入排序

插入排序：保护一个有序区，把元素一个个插入有序区的适当地位，直到所有元素都有序为止。例子：无序数组:[5,8,6,3,9,2,1,7]第一轮：让元素8和有序区[5]的元素顺次比拟。8>5，所以元素8和元素5毋庸替换。此时有序区的元素减少到两个：[5,8] 第二轮：让元素6和有序区[5,8]的元素顺次比拟。6<8，所以把元素6和元素8进行替换。6>5，所以元素6和元素5毋庸替换。此时有序区的元素减少到3个：[5,6,8] 第三轮：让元素3和有序区的元素顺次比拟3<8，所以把元素3和元素8进行替换3<6，所以把元素3和元素6进行替换3<5，所以把元素3和元素5进行替换此时有序区的元素减少到了四个[3,5,6,8] 优化：第三轮循环，把元素用inserValue存起来，把有序区的元素从前向后逐个复制。第1步：暂存元素3，inserValue第2步：和前一个元素比拟，因为3<8，复制元素8到它下一个地位。第3步：和前一个元素比拟，因为3<6，复制元素6到它下一个地位。第4步：和前一个元素比拟，因为3<5，复制元素5到它下一个地位。第5步：把暂存的元素3赋值到数组的首位。

关于javascript:现代JavaScript高级教程Cookie-Session-SessionStorage-LocalStorage

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接详解Cookie, Session, SessionStorage, LocalStorage引言在Web开发中，数据的存储和治理是十分重要的。Cookie、Session、SessionStorage和LocalStorage是常见的Web存储解决方案。本文将具体介绍这些概念，比拟它们的特点和用法，并提供相干的代码示例。 1. 什么是Cookie？属性Cookie是一种在客户端存储数据的机制，它将数据以键值对的模式存储在用户的浏览器中。Cookie具备以下属性：名称和值：每个Cookie都有一个名称和对应的值，以键值对的模式示意。域（Domain）：Cookie的域属性指定了能够拜访Cookie的域名。默认状况下，Cookie的域属性设置为创立Cookie的页面的域名。门路（Path）：Cookie的门路属性指定了能够拜访Cookie的门路。默认状况下，Cookie的门路属性设置为创立Cookie的页面的门路。过期工夫（Expires/Max-Age）：Cookie的过期工夫属性指定了Cookie的有效期限。能够通过设置Expires或Max-Age属性来定义过期工夫。过期工夫能够是一个具体的日期和工夫，也能够是一个从以后工夫开始的时间段。安全标志（Secure）：Cookie的安全标志属性指定了是否只在通过HTTPS协定发送申请时才发送Cookie。同站点标记（SameSite）：Cookie的同站点标记属性指定了是否限度Cookie只能在同一站点发送。能够设置为Strict（仅容许来自以后站点的申请携带Cookie）或Lax（容许局部跨站点申请携带Cookie）。利用场景Cookie在Web开发中有多种利用场景，包含：会话治理：Cookie罕用于存储会话标识符，以便在用户拜访不同页面时放弃会话状态。身份验证：Cookie能够用于存储用户的身份验证凭证或令牌，以便在用户下次访问时主动登录。个性化设置：Cookie能够用于存储用户的个性化首选项，例如语言偏好、主题设置等。追踪和剖析：Cookie能够用于追踪用户的行为和进行网站剖析，例如记录用户拜访的页面、点击的链接等。以下是一个应用JavaScript创立和读取Cookie的示例： // 设置Cookiedocument.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/; secure; SameSite=Strict";// 读取Cookieconst cookies = document.cookie.split("; ");for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].split("="); const name = cookie[0]; const value = cookie[1]; console.log(name + ": " + value);}2. 什么是Session？属性Session是一种在服务器端存储和跟踪用户会话状态的机制。Session具备以下属性：存储地位：Session数据存储在服务器端的内存或长久化介质中，而不是存储在客户端。会话ID：每个会话都有一个惟一的会话ID，用于标识该会话。会话ID通常通过Cookie或URL参数发送给客户端，并在后续申请中用于辨认会话。过期工夫：Session能够设置过期工夫，以管制会话的有效期。过期工夫能够是一个具体的日期和工夫，也能够是一个从会话创立时开始的时间段。安全性：Session的会话ID须要进行爱护，以避免会话劫持和其余平安问题。利用场景Session在Web开发中有多种利用场景，包含：用户身份验证：Session用于存储用户的身份验证状态，以便在用户拜访须要验证的资源时进行验证。购物车：Session用于存储用户的购物车内容，以便在用户进行结账或持续购物时放弃购物车状态。个性化设置：Session能够用于存储用户的个性化首选项，例如语言偏好、主题设置等。以下是一个应用Express.js解决Session的示例： const express = require("express");const session = require("express-session");const app = express();app.use(session({ secret: "mysecret", resave: false, saveUninitialized: true, cookie: { secure: true, sameSite: "strict", httpOnly: true }}));app.get("/", (req, res) => { req.session.username = "John Doe"; res.send("Session is set.");});app.get("/profile", (req, res) => { const username = req.session.username; res.send("Welcome, " + username);});app.listen(3000, () => { console.log("Server is running on port 3000");});3. 什么是SessionStorage？属性SessionStorage是一种在客户端存储长期数据的机制。SessionStorage具备以下属性： ...

关于javascript:js一个正则匹配数字千位分隔符的位置支持小数

前言在日常业务中，常会碰到产品要求数字展现千位分隔符的需要，本着学习钻研，不做业务码农的想法，尝试着写了一个单正则并且反对小数点的增加千位分隔符的办法。间接上后果就一行代码 thousandBitSeparator = (num) => { return num?.toString().replace(/(?<!\..)\B(?=(\d{3})+(\.|$))/g, ',')}看看成果小数点前每3位加一个分隔符，小数点后不加 thousandBitSeparator(1) // '1'thousandBitSeparator(1000) // '1,000'thousandBitSeparator(1000222) // '1,000,222'thousandBitSeparator(1234.) // '1,234'thousandBitSeparator(1234.56) // '1,234.56'thousandBitSeparator(1234.5678) // '1,234.5678'正则解析先来解释一些这里用到的正则元字符\d 数字（不必解释）\B 非单词边界（不是单词边界的边界）a(?=b) 正向断言（匹配跟着b的a）(?<!b)a 反向否定断言（匹配后面不是b的a）再来个可视化解析思路需要是增加千位分隔符，所以首先是要匹配增加分隔符的这个边界（也就是指标地位），又因为数字不会有空格什么的中断，而且中间的地位也不合乎需要，应用\B作为主表达式来匹配指标地位最合适不过了。 /\B/先思考整数的正则，什么样的地位符合要求呢？从个位开始每3位数字一个，也就是说指标地位前面始终到结尾，要恰好并且至多一组3位数字。 /\B(?=(\d{3})+$)/再思考小数的状况，小数是不须要千位分隔符的，也就是说指标地位后面没有小数点。 /(?<!\..)\B(?=(\d{3})+$)/有小数点的话，个位就不肯定是结尾了，所以要用小数点和结尾两种状况来辨认个位在哪。 /(?<!\..)\B(?=(\d{3})+(\.|$))/用来匹配数字千位分隔符地位的正则就实现啦。总结第一次写技术分享文章，还在一直学习之中，心愿将来可期。如果我的文章对你有帮忙那再好不过啦，帮我也点个赞吧，谢谢！欢送同学们斧正谬误，一起交换啊！

关于javascript:web3-连接以太坊XverseUniSat钱包获取签名

连贯以太坊这里是我是应用 Metamask 钱包连贯MetaMask SDK 筹备工作装置 SDK yarn add @metamask/sdk// ornpm install @metamask/sdk装置 ethers（我这里是间接引入 JS 文件） <script src="https://cdn.ethers.io/scripts/ethers-v4.min.js" charset="utf-8" type="text/javascript"></script>编写逻辑// 1. 这里依照官网提供的代码引入 SDKimport { MetaMaskSDK } from '@metamask/sdk'// 实例化const MMSDK = new MetaMaskSDK(options);const ethereum = MMSDK.getProvider();// 获取钱包地址, 没有装置钱包会提醒装置 MetaMask 钱包插件const accounts = await ethereum.request({ method: 'eth_requestAccounts' })console.log(accounts, 'accounts')// 2. 获取签名和公钥const provider = new window.ethers.providers.Web3Provider(ethereum)const signer = provider.getSigner() const signature = await signer.signMessage(`${Number(new Date())}`) console.log('签名后果：', signature) const publicKey = await signer.getAddress() console.log('公钥（以太坊地址）：', publicKey)连贯UniSat这里是我是应用 UniSat 钱包连贯Docs ...

关于javascript:HHDESK资源管理功能

为使客户体验更上一层楼，咱们在最新的HHDESK版本中，新增了一个性能“资源管理”，其中不仅整合了原有的连贯治理、网络代理性能，还减少了不少实用的新性能。本篇便为您简略介绍一下。 1 本地服务能够不便的调用本地资源。比方设置快捷方式关上软件；以及在设置快捷方式的同时，能够设置其余参数，比方浏览器首页。 2 服务端蕴含了本来的代理性能以及共享性能。包含新上线的SSH隧道服务、SOCKET穿透服务，以及本来的HTTP代理、文件、共享服务 3 客户端原“连贯治理”项，能够应用终端性能。蕴含SSH，FTP,TELNET，SMB，VNC，RDP六种连贯形式，涵盖简直所有需要。

关于javascript:图扑-AR-技术应用与管理施工建造机柜扫描办公室导航解决方案

随着科技的一直变革和翻新，越来越多的行业开始迎来数字化时代的改革。建筑行业作为人类历史上最重要的产业之一，在数字化转型方面同样也在一直推动。图扑软件联合 AR 技术的利用，为建筑行业带来了更加便捷高效的建筑施工过程治理。传统的建筑施工治理过程中，因为不足信息化伎俩，往往存在材料不全、沟通艰难等问题，导致施工周期缩短、成本增加、品质降落等景象。而利用图扑软件与 AR 技术的联合，能够实现对建筑施工各个阶段进行实时监控、协同设计、近程调试等性能，从而晋升施工过程的效率和品质，缩小了建筑施工的安全隐患和误差。图扑软件应用自主研发的 HT for Web 产品，搭建了建筑施工的三维场景过程，以及联合 AR 技术同步实现 AR 场景的虚构仿真成果。桩基流程在传统的桩基施工中，因为信息的不齐备和交换艰难等诸多问题，往往会造成施工延期和品质问题。而利用图扑软件联合 AR 技术，能够实现实时监控、协同设计和近程调试等性能，从而晋升施工过程的效率和品质，缩小安全隐患和误差。 3D 场景 & VR 场景主体构造搭建流程在主体建构搭建流程中，图扑软件联合 AR 技术能够实现修建模型的可视化展现和立体化出现，建筑工人能够通过 AR 眼镜等设施间接查看施工图纸和构建过程，便于及时发现和解决问题，进步工作效率。 3D 场景 & VR 场景砌体幕墙装置流程在砌体幕墙装置流程中，利用传感器等设施进行数据采集和剖析，也可能无效地监测施工现场的温度、湿度、空气质量等环境因素，保障施工的平安和卫生。 3D 场景 & VR 场景景观环境在景观环境方面，图扑软件联合 AR 技术能够实现设计方案的可视化展现和立体化出现，有利于更加粗疏地布局景观场景和施工流程，进步景观设计的效率和品质。 3D 场景 & VR 场景具体来说，图扑软件联合 AR 技术的利用，能够通过虚拟现实技术将修建模型投影到事实场景中，实现设计方案的可视化展现和立体化出现。此外，建筑工人能够通过 AR 眼镜、手机、挪动终端等设施，间接查看施工图纸和构建过程，便于及时发现和解决问题。同时，利用传感器等设施进行数据采集和剖析，也可能无效地监测施工现场的温度、湿度、空气质量等环境因素，保障施工的平安和卫生。办公室 AR 导航在古代办公室中，往往有很多房间、走廊、门牌等简单的空间结构，对于新员工或访客来说，找到目的地往往是一件艰难的事件。这时候，办公室 AR 导航就能够派上用场了。 ...

关于javascript:现代JavaScript高级教程原型和原型链

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接原型和原型链JavaScript是一门反对面向对象编程的语言，它的函数是第一公民，同时也领有类的概念。不同于传统的基于类的继承，JavaScript的类和继承是基于原型链模型的。在ES2015/ES6中引入了class关键字，但其本质依然是基于原型链的语法糖。原型（Prototype）原型（Prototype）是JavaScript中对象的一个非凡属性，它用于实现属性和办法的继承。在JavaScript中，每个对象都有一个原型属性，它指向另一个对象，这个对象被称为原型对象。通过原型链，对象能够从原型对象继承属性和办法。原型的概念能够用以下形式解释：每个JavaScript对象都是基于一个构造函数创立的，构造函数是对象的模板或蓝图。在创建对象时，构造函数会创立一个关联的原型对象，对象通过原型链继承原型对象上的属性和办法。原型对象是一个一般的JavaScript对象，它具备本人的属性和办法。让咱们以一个示例来阐明原型的概念和作用： // 构造函数function Person(name) { this.name = name;}// 在原型对象上增加办法Person.prototype.sayHello = function() { console.log("Hello, my name is " + this.name);};// 创立实例var person1 = new Person("John");var person2 = new Person("Alice");// 调用原型对象上的办法person1.sayHello(); // 输入: "Hello, my name is John"person2.sayHello(); // 输入: "Hello, my name is Alice"在这个示例中，咱们定义了一个构造函数Person，它有一个name属性。而后，咱们通过给原型对象Person.prototype增加一个sayHello办法，使得所有通过Person构造函数创立的实例都能够拜访该办法。咱们创立了两个实例person1和person2，并别离调用了sayHello办法。原型的重要性体现在以下几个方面：继承：原型链容许对象继承其原型对象上的属性和办法。通过原型链，子对象能够拜访和复用父对象的属性和办法，实现了继承的概念。代码复用和共享：通过将办法和属性定义在原型对象上，能够实现多个对象共享雷同的办法和属性。这样能够节俭内存空间，进步性能，同时也不便了代码的保护和扩大。上面是一个简略的原型链示意图： +----------------------+ | Object.prototype | +----------------------+ ^ | +----------------------+ | Constructor.prototype | +----------------------+ ^ | +----------------------+ | Object instance | +----------------------+在这个示意图中，Object.prototype是所有对象的原型，Constructor.prototype是构造函数的原型，Object instance是基于构造函数创立的对象实例。 ...

关于javascript:原生JavaScriptPHP多图上传实现

摘要很多场景下须要抉择多张图片上传，或者是批量上传以提高效率，多图上传的需要天然就比拟多了，本文应用最简略的XMLHttpRequest异步上传图片。界面上传示例代码index.html <!DOCTYPE html><html> <head> <title>多图上传</title> <meta charset="utf-8"> <style> #fileInput{ width: 500px; height: 45px; margin: 50px auto 0; background: #eee; display: block; padding: 20px 20px; border-radius: 20px; } #previewContainer{ width: 500px; margin: 10px auto; background: #eee; padding: 20px 20px; display: none; } .preview-image { max-width: 200px; max-height: 200px; margin-bottom: 10px; } </style> </head> <body>  <input type="file" id="fileInput" accept="image/*" multiple> <div id="previewContainer"></div> <script> const fileInput = document.getElementById('fileInput'); const previewContainer = document.getElementById('previewContainer'); // 监听抉择文件 fileInput.addEventListener('change', handleFileSelect); function handleFileSelect(event) { const files = event.target.files; for (let i = 0; i < files.length; i++) { const file = files[i]; const reader = new FileReader(); reader.onload = function(event) { const image = document.createElement('img'); image.className = 'preview-image'; image.src = event.target.result; previewContainer.appendChild(image); // 将文件上传至服务器 uploadImage(file); } reader.readAsDataURL(file); } } // 将文件上传至服务器 function uploadImage(file) { const xhr = new XMLHttpRequest(); const formData = new FormData(); // 将文件增加到formData对象 formData.append('image', file); // 设置XHR申请的处理函数 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log('上传胜利'); // 显示图片预览区域 document.querySelector('#previewContainer').setAttribute('style', 'display:block'); // 打印JSON console.log(JSON.parse(xhr.response)) } else { console.log('上传失败'); } } } // 发送POST申请到服务器 xhr.open('POST', 'upload.php', true); xhr.send(formData); } </script> </body></html>upload.php（请建设一个upload文件夹以寄存上传的文件） ...

关于javascript:现代JavaScript高级教程作用域和作用域链

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接作用域和作用域链引言在 JavaScript 中，作用域是指变量在代码中可拜访的范畴。了解 JavaScript 的作用域和作用域链对于编写高质量的代码至关重要。本文将具体介绍 JavaScript 中的词法作用域、作用域链和闭包的概念，并探讨它们在理论开发中的利用场景。 1. 词法作用域1.1 概念词法作用域是 JavaScript 中最常见的作用域类型。它是在代码编写阶段确定的，而不是在代码执行阶段确定的。在词法作用域中，变量的拜访权限是由它们在代码中的地位决定的。 1.2 示例function outer() { var outerVariable = "Hello"; function inner() { var innerVariable = "World"; console.log(outerVariable + " " + innerVariable); } inner();}outer(); // 输入: Hello World在下面的示例中，函数 inner 外部能够拜访内部函数 outer 中定义的变量 outerVariable，这是因为它们处于词法作用域中。词法作用域确保了变量在代码编写阶段就可能正确地被拜访。 1.3 词法作用域的利用场景词法作用域在 JavaScript 中有宽泛的利用场景，包含：变量访问控制：词法作用域使得咱们能够控制变量的可见性和拜访权限，防止命名抵触和变量净化。模块化开发：通过应用函数和闭包，能够实现模块化的代码组织，将变量和函数封装在公有作用域中，提供了良好的封装性和代码组织性。函数嵌套：函数嵌套是 JavaScript 中常见的编程模式，词法作用域确保了外部函数能够拜访内部函数的变量，实现了信息的暗藏和封装。2. 作用域链2.1 概念作用域链是 JavaScript 中用于查找变量的一种机制。它由以后作用域和所有父级作用域的变量对象组成。当拜访一个变量时，JavaScript 引擎会首先在以后作用域的变量对象中查找，如果找不到，则沿着作用域链向上查找，直到找到变量或者达到全局作用域。 Global Execution Context | +-- Function Execution Context 1 | | | +-- Function Execution Context 2 | | | +-- Function Execution Context 3 | +-- Function Execution Context 42.2 示例var globalVariable = "Global";function outer() { var outerVariable = "Hello"; function inner() { var innerVariable = "World"; console.log(globalVariable + " " + outerVariable + " " + innerVariable); } inner();}outer(); // 输入: Global Hello World在下面的示例中，函数 inner 外部能够拜访全局作用域中定义的变量 globalVariable，以及内部函数 outer 中定义的变量 outerVariable，这是因为 JavaScript 引擎依照作用域链的程序查找变量。 ...

关于javascript:现代JavaScript高级教程序言

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接序言可能是市面上比拟好的Javascript高级教程，适宜有肯定Javascript根底的同学学习欢送来到《古代JavaScript高级教程》！在这本书中，我将与您一起摸索JavaScript这门令人着迷的编程语言的深度和广度。作为一名曾在腾讯负责高级前端开发工程师的教训分享者，我深知JavaScript在当今软件开发畛域中的重要性和广泛应用。它不仅仅是一门语言，更是连贯着互联网世界的纽带。无论是网页利用、挪动利用、服务器端开发，还是大规模的跨平台解决方案，JavaScript都扮演着至关重要的角色。本书旨在帮忙那些曾经具备肯定JavaScript根底的开发者，更深刻地了解和把握这门语言的高级个性和技术。咱们将摸索古代JavaScript中的最佳实际、设计模式、性能优化和代码组织等要害畛域，以帮忙您构建更高质量、可保护和可扩大的应用程序。在本书中，我将为您提供丰盛的示例代码、实用的技巧和深刻的解释，以确保您可能逐渐进阶成为一名真正的JavaScript专家。无论您是心愿扩大您的职业倒退机会，晋升您的技能程度，还是简略地享受深刻学习JavaScript的乐趣，本书都将成为您不可或缺的指南。与此同时，我也心愿通过本书激发您的创造力和实际能力。JavaScript的生态系统一直倒退演进，新的库、框架和工具层出不穷。通过学习和把握古代JavaScript的高级概念，您将可能更好地适应行业变动，并使用最新的工具和技术来解决事实世界中的问题。无论您是一名前端开发者、全栈工程师还是对JavaScript充斥好奇心的初学者，本书都将为您提供清晰的领导和丰盛的常识。请筹备好迎接一个充斥挑战和成长的学习之旅！在本书的旅程中，我将致力提供最新的见解和最佳实际，以帮忙您在古代JavaScript的陆地中航行。无论您是一名学生、工程师还是教育工作者，我心愿本书可能成为您的搭档，疏导您在JavaScript的世界中一直前行。让咱们一起开始吧。对于我笔名linwu,一枚前端开发工程师，曾入职腾讯等多家出名互联网公司，前面我会继续分享精品课程，欢送继续关注

关于javascript:vue使用小结

装置，webpack根本配置等根底官网够具体了，略1.路由： ——路由懒加载（按需加载）：const Home = r => require.ensure([], () => r(require('../pages/home/home.vue')), 'Home'); 举荐博文益处就是到哪个页面加载对应的路由，节俭资源，进步访问速度。 ——路由跳转：router-link:面试时问过好多这个问题，组件和router-link下面想写点击事件怎么写，大多数都答复：间接写啊... 正确姿态：@click.native="func"刚用vue的时候，不太习惯所有货色都尽量应用它的语法。有一次有个页面须要从哪来，保留的时候还返回到哪里去。过后第一工夫想的就是 location.back();location.go(-1); 幸好过后，一个实习的产品发现了bug。在IOS手机下面，列表页a编辑进入b，b页面点击保留后返回到列表页a，列表页a的数据并不更新，安卓都失常。百思不得姐，度娘了一波。应用了vue的 this.$router.go(-1);this.$router.back(); 就OK了。不分明起因 ——监听起源门路及去向门路用到两个钩子：beforeRouteEnter的from.path和beforeRouteLeave的to.path场景：产品需要：下单时如果点击返回就popup提醒，提醒用户再想想，还是确定来到。此时beforeRouteLeave判断只有to.path不是上行页面就阻断，参数next(false)即可阻断。——有个问题就是，IOS的侧滑会有提早，当在下单页面侧滑返回的时候，会先返回上个页面，提早一会之后再回来。目前没发现可行方法(挪动端touch事件禁用过，与侧滑是两码事，不在一个层级)。——京东、天猫的是，下单及上行页面，禁用侧滑，其余页面失常应用(毕竟咱们不是app，禁用不了)——当然，这些都是为了用户体验。如果有适合方法，可探讨。——监听起源：刚刚说了beforeRouteEnter的from.path,然而内部链接间接拜访vue我的项目，拿到的from.path是 “/”,——如果有很多渠道拜访咱们我的项目，就无奈辨别了。——解决办法：1.进入咱们我的项目必须携带起源参数，每个渠道都必须传递不同参数。2.当然，如果公司原本就招商，他人又不违心配合，那么不用太强求。JS提供了一个办法,document.referrer获取起源门路，前提是他人进入咱们我的项目是通过,href属性进来的。比方a标签，location.href2.webpack打包：查看各个模块的打包后的占用空间：运行： npm run build -report 执行完之后会自动弹出模块占用空间页面，打包前及打包后的。发现雷同模块屡次渲染，那就去重咯.最常见的公共组件，多人援用，组件外部又援用其余资源，这时把此公共组件按需加载即可。3.keep-alive缓存模式首次应用：解决列表页返回记录地位。搭配钩子：activated之前探讨过这个一些坑的补充阐明：产品设计要求：后退刷新数据，返回记录地位(刷新与否都可),那么在beforeRouteLeave钩子外面要进行一些判断，判断须要记录地位的页面b的入口有哪些。 beforeRouteLeave(to, from, next){ this.isOk = false; if (to.path == "/a" || to.path == "/c") { this.isOk = true;} next();//这个肯定要写} activated钩子须要做的是把所有的数据初始化(跟第一次进入页面一样)： activated(){ if (this.isOk) { this.dataList = [];this.pageNum = 1;}} 起因就是该模式下，created,mounted只触发一次,数据都在缓存中，如果不手动清空，数据不会更新，用了activated无需这俩货了4.能用computed代替watch的，尽量都应用computed http://www.developcls.comhttp://www.developcls.com/qa/3eaea6f7e1c04a489072879d93c590f9... 官网也有阐明是尽量，不是肯定。性能和代码不便computed还是挺有劣势的.场景：购物车，价格计算(个别后端算，淘宝无网络前端算好，优惠在订单)，页面多个输入框，当所有的输入框输出符合条件，提交按钮高亮可点击5.某些场景下$nextTick代替setTimeout延时器释义：在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，获取更新后的 DOM。当然这个某些场景指的是批改数据后，DOM没有及时更新。受js影响很深啊，老是想用setTimeout顺便说下一下,有时候批改数组或者对象的数据，页面没有及时更新。倡议应用this.$set办法，eg:this.$set(data,name,'zhangsan');6.@import引入less文件反复渲染算是优化的内容了解决办法：@import (reference) 'main.less';less传送门7.安利一个三级联动,mint-ui的，下篇文章会独自讲之前文章数据从后端获取，下次应用的是纯前端本地或cdn一段json8.客户端的搜寻 ...

关于javascript:深度剖析之由浅入深揭秘JavaScript类型转换最全总结篇

前言系列首发于公众号『前端进阶圈』，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。深度分析之由浅入深揭秘JavaScript类型转换(最全总结篇)值类型转换将值从一种类型转换为另一种类型通常称为类型转换，分为隐式强制类型转换和显示强制类型转换。两者的区别在于是否可直观看出。如下代码： var a = 42;var b = a + ""; // 隐式强制类型转换var c = String( a ); // 显式强制类型转换b; // 42c; // 42上述代码中，对于 b 而言是隐式转换，而对于 c 而言是显示转换。形象值操作在值类型转换前咱们先来看看字符串、数字、布尔值之前的根本转换规则。 toString该操作，负责解决非字符串到字符串的强制类型转换。例如：null -> "null"，undefined -> "undefined", true -> "true"对于一般对象来说，除非自定义，否则都会调用其外部的 toString() 办法。Array 数组的toString() 办法通过了重定义，会将所有数组元素用 , 连接起来。 var a = [1,2,3];a.toString(); // 1,2,3JSON 工具函数 JSON.stringify() 在将 JSON 对象序列化为字符串时也用到了 toString对于大多数简略值来说，JSON 字符串与 toString() 的后果基本相同。但对于某一些值来说不同，例如：undefined, function, symbol, 循环援用(对象之间的互相援用，行程一个有限循环)，JSON.stringify() 就无奈解决它。如下代码： JSON.stringify(undefined); // undefinedJSON.stringify(function () {}); // undefinedJSON.stringify([1, undefined, function () {}, 4]); // "[1,null,null,4]"JSON.stringify({ a: 2, b: function () {} }); // "{"a":2}"JSON.stringify([undefined, Object, Symbol("")]); // '[null,null,null]'对于蕴含循环援用的对象执行 JSON.stringify() 会出错。但咱们能够通过 toJSON() 办法进行重写。如下代码： ...

关于javascript:Vite是如何实现Esbuild打包的

后面文章说过（Vite如何实现秒级依赖预构建的能力），在 Vite 依赖预构建的底层实现中，大量地应用到了 Esbuild 这款构建工具，实现了比较复杂的 Esbuild 插件性能和技巧。接下来，我就来带你揭开 Vite 预构建神秘的面纱，从外围流程到依赖扫描、依赖打包的具体实现，带你彻底了解Esbuild预构建背地的技术。一、预构建流程对于预构建所有的实现代码都在optimizeDeps函数当中，对应的仓库源码：packages/vite/src/node/optimizer/index.ts，大家能够下载下来对照学习。 1.1 缓存判断首先，是预构建缓存的判断。Vite 在每次预构建之后都将一些要害信息写入到了_metadata.json文件中，第二次启动我的项目时会通过这个文件中的 hash 值来进行缓存的判断，如果命中缓存则不会进行后续的预构建流程，代码如下所示。 // _metadata.json 文件所在的门路const dataPath = path.join(cacheDir, "_metadata.json");// 依据以后的配置计算出哈希值const mainHash = getDepHash(root, config);const data: DepOptimizationMetadata = { hash: mainHash, browserHash: mainHash, optimized: {},};// 默认走到外面的逻辑if (!force) { let prevData: DepOptimizationMetadata | undefined; try { // 读取元数据 prevData = JSON.parse(fs.readFileSync(dataPath, "utf-8")); } catch (e) {} // 以后计算出的哈希值与 _metadata.json 中记录的哈希值统一，示意命中缓存，不必预构建 if (prevData && prevData.hash === data.hash) { log("Hash is consistent. Skipping. Use --force to override."); return prevData; }}值得注意的是哈希计算的策略，即决定哪些配置和文件有可能影响预构建的后果，而后依据这些信息来生成哈希值。这部分逻辑集中在getHash函数中，代码如下。 ...

关于javascript:filter箭头函数的一个bug

先上错误代码： this.expandedRowKeys = this.expandedRowKeys.filter(item => {item !== record.index})这个代码片段应用了花括号 {} 将箭头函数的主体包裹起来。花括号示意函数体的起始和完结，并创立了一个代码块。在这种状况下，因为短少 return 语句，箭头函数将返回 undefined，而不是条件表达式的后果。正确的写法是在花括号{}中加return this.expandedRowKeys = this.expandedRowKeys.filter(item => { return item !== record.index })或者去掉花括号{},因为箭头函数会隐式返回条件表达式 item !== record.index 的后果。 this.expandedRowKeys = this.expandedRowKeys.filter(item => item !== record.index)

关于javascript:开发人员必备9个令人惊叹的CSS网格生成器推荐

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 文章首先解释了CSS网格是什么以及为什么它在古代网页设计中十分重要。它强调了响应式设计的重要性，这是使网站在各种设施和屏幕尺寸上都能良好出现的要害。接下来，文章列举了9个最佳的响应式CSS网格生成器，并提供了对每个生成器的简要介绍。这些生成器包含不同的个性和性能，能够帮忙开发人员依据本人的需要抉择适宜的工具。 Grid Layout Generator地址：https://angrytools.com/css-grid/ Angry Tools 网格布局生成器是一个收费的CSS网格生成器，能够让咱们在网页上创立二维布局。此外，还能够依照指定的行或列构造排列元素。它有一个十分易于了解的用户界面，在其中你能够通过容器中的“+”和“-”按钮增加行和列。还能够通过增加多个网格单元来扩大网格项。此外，它还容许咱们在这些网格项之间插入间隙。此外，为了让网格具备响应性，能够在 grid-template 中应用fr、%和 auto 单位。 CSS Grid Generator Netlify地址：https://cssgrid-generator.netlify.app/ CSS Grid Generator是由 Sarah Drasner 创立的开源我的项目。它是一个十分有用的工具，能够利用其实用的CSS Grid性能创立动静布局。此外，它还能够让咱们设置列和行的数量和单位。此CSS生成器非常容易通过在网格内拖动方框来创立分区。每行和每列都有一个单位方框，因而咱们能够以 px、fr 和 % 的形式更改行和列的大小。这有助于咱们创立响应式布局和网格。 Layout it Grid地址：https://grid.layoutit.com/ Layoutit 是一个很酷的CSS Grid构建工具，能够疾速设计网页布局，并提供HTML和CSS代码来启动您的我的项目。它容许咱们增加任意数量的网格列和行，并且还能够设置它们之间的间距。你能够应用这个网格生成器轻松构建响应式布局，实现后还能够在Codepen中生成代码。此外，应用Layout it Grid十分乏味，因为它具备直观的性能。例如，它反对命名网格区域，因而在设计网格时，你能够依据须要为它们命名。 Vue Grid Generator地址：https://vue-grid-generator.netlify.app/ Vue Grid Generator是一个基于Nuxt v1.x构建的开源我的项目。它的确有一些依赖项，如Hashids、Nuxtjs和Vue Awesome库。此外，它具备十分清晰易懂的构造，咱们能够轻松地增加行和列，并相应地调整它们之间的间距。最初，你能够拆分单元格以创立多个局部，并依据您的需要对其进行命名，以创立一个简略的网站布局。 CSS Grid Layout Generator地址：https://css-grid-layout-generator.pw/ CSS Grid布局生成器是一个业余的开源工具，它容许咱们应用隐式网格轨道（主动生成的网格）、min-max()、fit-content()、JSX导出和Styled Components创立简单的网格布局。 ...

关于javascript:作为面试官为什么我推荐微前端作为前端面试的亮点

前段时间陆续面试了一波候选人，其中提到最多的就是微前端计划，微前端不像前端框架的面试题那样，它更偏重于我的项目实战，更加考查候选人的技术水平，不像React,Vue轻易一问，就是各种响应式原理,Fiber架构等等烂大巷的。为什么抉择微前端作为我的项目亮点如果你的简历平平无奇，面试官切实在你的简历上问不出什么，那么只能给你上点“手写题”强度了作为面试官，我常常听到很多候选人说在公司做的我的项目很简略，平时就是堆页面，写治理端，写H5,没有任何亮点，我以我一次面试候选人的经验分享给大家面试官：你为什么抉择用微前端做治理端降级，你的我的项目很宏大么？候选人：不是的，其实是咱们把两个治理端合并，让用户方便使用。面试官：咦，居然这样你们还不如用a标签链接或者nginx转发一下就行了，更加不便，杀鸡焉用牛刀啊候选人：为了让客户体验到单页面的感觉，体验感更好面试官：enen....从这里你会感觉候选人的想法有点奇葩，然而换个角度来想，肯定要等到我的项目宏大拆服务了才用微前端么，我治理端我的项目一开始就上微前端不行么。其实从这里能够看进去，管理系统应用微前端的老本并不会太大，而且从前面的技术问答中，候选人的微前端还是挺优良的，各个细节根本都涉略到了。如果你在公司外部很闲，又是刚好负责无关紧要的经营治理端，那么新的治理端能够一开始接入微前端计划，为将来的技术升级提供一个接口，危险也可控，还可能倒腾技术,简历还能新增亮点，何乐而不为另外提到H5了，就提多一嘴，H5面向C端用户比拟多，这方面更应该关怀一些性能指标数据，比方FP，FCP等等，围绕这些指标进行优化，亮点不就来了么，这类例子亘古未有，要学会多开掘接下来是我作为面试官，常常考查候选人的问题，因为大部分候选人都是用qiankun框架，所以本文以qiankun框架为模板，重点分析我的项目实战中微前端中遇到的问题和原理请解释一下微前端的概念以及它的次要长处和挑战? 微前端是一种将不同的前端利用组合到一起的架构模式。这些利用能够独立开发、独立部署、独立运行，而后在一个主利用中进行集成。这种模式的次要指标是解决大型、长期演进的前端我的项目的复杂性问题。次要长处：解耦：微前端架构能够将大型项目合成为多个能够独立开发、测试和部署的小型利用。这种解耦能够进步开发效率，缩小团队间的协调老本。技术栈无关：不同的微前端利用能够应用不同的技术栈，这为应用新技术、降级旧技术提供了可能。并行开发：因为微前端利用是独立的，所以多个团队能够并行开发不同的利用，无需放心相互影响。独立部署：每个微前端利用能够独立部署，这意味着能够更快地推出新性能，同时升高了部署失败的危险。次要挑战：性能问题：如果不同的微前端利用应用了不同的库或框架，可能会导致加载和运行的性能问题。一致性：放弃不同的微前端利用在用户体验、设计和行为上的一致性可能会比拟艰难。状态共享：在微前端利用之间共享状态可能会比较复杂，须要应用非凡的工具或模式。复杂性：只管微前端能够解决大型项目的复杂性问题，然而它本身也带来了一些复杂性，比方须要治理和协调多个独立的利用。安全性：微前端架构可能会减少跨域等平安问题。你能详细描述一下 qiankun 微前端框架的工作原理吗？qiankun 是一个基于 single-spa 的微前端实现框架。它的工作原理次要波及到以下几个方面：利用加载：qiankun 通过动态创建 script 标签的形式加载子利用的入口文件。加载实现后，会执行子利用暴露出的生命周期函数。生命周期治理：qiankun 要求每个子利用都须要暴露出 bootstrap、mount 和 unmount 三个生命周期函数。bootstrap 函数在利用加载时被调用，mount 函数在利用启动时被调用，unmount 函数在利用卸载时被调用。沙箱隔离：qiankun 通过 Proxy 对象创立了一个 JavaScript 沙箱，用于隔离子利用的全局变量，避免子利用之间的全局变量净化。款式隔离：qiankun 通过动静增加和移除款式标签的形式实现了款式隔离。当子利用启动时，会动静增加子利用的款式标签，当子利用卸载时，会移除子利用的款式标签。通信机制：qiankun 提供了一个全局的通信机制，容许子利用之间进行通信。在应用 qiankun 时，如果子利用是基于 jQuery 的多页利用，你会如何解决动态资源的加载问题？在应用 qiankun 时，如果子利用是基于 jQuery 的多页利用，动态资源的加载问题可能会成为一个挑战。这是因为在微前端环境中，子利用的动态资源门路可能须要进行非凡解决能力正确加载。这里有几种可能的解决方案：计划一：应用公共门路在子利用的动态资源门路前增加公共门路前缀。例如，如果子利用的动态资源寄存在 http://localhost:8080/static/，那么能够在所有的动态资源门路前增加这个前缀。计划二：劫持标签插入函数这个计划分为两步：对于 HTML 中已有的 img/audio/video 等标签，qiankun 反对重写 getTemplate 函数，能够将入口文件 index.html 中的动态资源门路替换掉。对于动静插入的 img/audio/video 等标签，劫持 appendChild、innerHTML、insertBefore 等事件，将资源的相对路径替换成绝对路径。例如，咱们能够传递一个 getTemplate 函数，将图片的相对路径转为绝对路径，它会在解决模板时应用： ...

关于javascript:从自研走向开源的-TinyVue-组件库

从自研走向开源的 TinyVue 组件库TinyVue 的开源征程OpenTiny 提供企业级的 Web 利用前端开发套件，包含 TinyVue/TinyNG 组件库、TinyPro 管理系统模板、TinyCLI 命令行工具以及 TinyTheme 主题配置零碎等。这些前端开发的基础设施和技术已在华为外部积攒和积淀多年，其中 TinyVue 组件库更是历经九年的磨难，从最后的关闭自研逐渐走向社区开源。 TinyVue 九年的开源征程大抵分为三个阶段：第一阶段走齐全自研的线路，过后称为 HAE 前端框架；第二阶段开始引入开源的 Vue 框架，更名为 AUI 组件库；第三阶段对架构进行从新设计，并逐渐演变为当初开源的 TinyVue 组件库。本文将围绕 TinyVue 三个阶段的技术倒退历程，深刻代码细节解说不同阶段的外围竞争力。全文蕴含以下章节：齐全自研的 HAE 前端框架实现数据的双向绑定实现面向对象的 JS 库配置式开发的注册表迁徙到 Vue 的 AUI 组件库封装成 Vue 组件后端服务适配器标签式与配置式全新架构的 TinyVue 组件库开发组件库面临的问题面向逻辑编程与无渲染组件跨端跨技术栈TODO组件示例齐全自研的 HAE 前端框架工夫回到2014年，彼时的我刚退出公共技术平台部，参加 HAE 前端框架的研发。HAE 的全称是 Huawei Application Engine，即华为利用引擎。过后咱们部门负责团体 IT 零碎的基础设施建设，在布局 HAE 时咱们对行业和技术趋势进行了剖析，并得出结论：云计算、大数据牵引 IT 架构变动，并带来商业模式转变和产品改革，而云计算和大数据须要新的 IT 基础架构的撑持。基于这个背景，咱们提出 IT 2.0 架构的指标：利用互联网技术打造面向未来的更高效、麻利的下一代 IT。作为云开发平台，HAE 须要反对全面的云化：云端开发、云端测试、云端部署、云端经营，以及利用施行的云化。其中，云端开发由 Web IDE 负责实现，这个 IDE 为用户提供基于配置的前端开发能力，因而须要反对可配置的 HAE 前端框架。 ...

关于javascript:先来聊聊go有趣的事情然后如何学习

在google中，大部分的我的项目都是采纳C C++开发，大量地用了java，其次才是python;在2007年的某一天，google的首席工程师在编译一个C++我的项目过程中，只管在google早就实现了分布式编译系统，然而Rob Pike和Robert Griesemer切实受够了那个漫长的编译等待时间，于是突发灵感与坐在旁边的 Ken Thompson一起探讨切实有必要创造一个新的编程语言，这个编程语言必须有近乎C语言的执行效率和近乎解析型语言的开发效率，以及近乎完满的编译速度，于是他们取名这个语言为go语言，就如每一个go语言的使用者都成为 gopher，gopher是一种生存在加拿大的小动物，它的中文名叫做囊地鼠，这种动物有个特点就是生存在底下，哈哈，当然这个不是最要害的，他们最大的特点就是挖洞速度特地快，当然可能不止是挖洞啦，取名为go意为语言的运行速度、开发速度、学习速度(develop)都像gopher一样快。GoGolang DevOps运维开发download/daxiacode.com 被称为GO语言之父的Rob Pike说，你是否批准GO语言，取决于你是认可少就是多，还是少就是少(Less is more or less is less)。Rob Pike以一种十分奢侈的形式，概括了GO语言的整个设计哲学--将简略、实用体现得酣畅淋漓。很多人将GO语言称为21世纪的C语言，因为GO不仅领有C的简洁和性能，而且还很好的提供了21世纪互联网环境下服务端开发的各种实用个性，让开发者在语言级别就能够不便的失去本人想要的货色。弱小的研发团队 go的利用应用go语言开发的开源我的项目比拟驰名的次要有: Docker，炽热的容器化技术; Kubernetes，Goole Borg的开源实现; Etcd，相似zookeeper的高可用key-value存储; TIDB，国人开发的Google spanner的开源实现; 许多大厂都曾经拥抱 Go 语言，包含以 Java 打天下的阿里巴巴，更别提深爱着 Go 语言的滴滴、今日头条、小米、奇虎 360、京东等明星公司。同时，守业公司也很喜爱 Go 语言，次要因为其入门快、程序库多、运行迅速，很适合疾速构建互联网软件产品，比方轻松筹、快手、知乎、探探、美图、猎豹移动等等，更比方前不久透露的B站后端源码都是采纳go语言开发。从业务维度看，在云计算、微服务、大数据、区块链、物联网等畛域，Go 语言早已蓬勃发展。有的使用率曾经十分之高，有的已有一席之地。即便是在 Python 为王的数据迷信和人工智能畛域，Go 语言也在迟缓浸透，并初露头角。

关于javascript:11个每个Web开发人员都应该拥有的VS-Code扩展

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 本文列出了11个举荐的插件，并为每个插件提供了简要的形容和其对Web开发的好处。这些VS Code插件包含： Live Server：提供实时预览和主动刷新性能，不便调试和开发网页。Prettier：主动格式化代码，放弃代码格调的一致性和可读性。Auto Rename Tag：主动重命名HTML标签，进步代码保护效率。IntelliSense for CSS class names：提供CSS类名的智能提醒和主动补全性能。HTML CSS Support：加强HTML和CSS的语法高亮和代码提醒性能。Bracket Pair Colorizer：为代码中的括号增加色彩，进步代码可读性。GitLens：集成Git性能，显示代码行的作者和最近的批改记录。Better Comments：改善代码正文的可读性，辨别不同类型的正文。ES7 React/Redux/GraphQL/React-Native snippets：提供React和GraphQL的代码片段和疾速生成模板。Code Spell Checker：查看代码中的拼写错误和语法问题。Color Highlight：在编辑器中突出显示颜色代码，不便调试和设计。1. Auto Rename Tag 厌倦了在解决HTML/JSX时手动更改开闭标签吗？主动重命名标签来帮忙了。只需装置它，让它主动解决替换开/闭标签，无论您何时调整它们中的任何一个；每当您重命名一个开标签或闭标签时，此扩大程序将更新另一个标签。地址：https://marketplace.visualstudio.com/items?itemName=formulahe... 2. Color Highlight 简略而弱小的扩大，能够实时为所有文件以理论色彩边框或背景突出显示色彩，这样您就不用浪费时间在下次找出特定值的色彩。地址：https://marketplace.visualstudio.com/items?itemName=naumovs.c... 3. Code Spell Checker 确保代码没有拼写错误对开发人员和审阅人员来说都是一种苦楚，因为咱们常常在代码中脱漏一些小的拼写错误，无论是在代码、内容还是正文中，然而这个扩大能够实时地突出显示这些拼写错误，并且还反对驼峰命名法和蛇形命名法。它还反对增加一系列自定义词汇，你能够将其申明为误报地址：https://marketplace.visualstudio.com/items?itemName=streetsid... 4. CodeSnap 间接从VS Code中拍摄一张可恶的代码快照，怎么样？只需装置此扩大程序，按下Ctrl + Shift + P，搜寻CodeSnap，抉择您想要捕获的代码，而后您的快照就能够分享了！地址：https://marketplace.visualstudio.com/items?itemName=adpyke.co... 5. Error Lens 在列表中，这是我集体最喜爱的之一。我无奈表白这个扩大对于调试代码有多大帮忙，它能够在编辑器自身上显示谬误和正告（带有颜色代码），从而缩小了始终须要悬停在红线上的需要。地址：https://marketplace.visualstudio.com/items?itemName=usernameh... 6. Git Lens Git Lens 提供了疾速查看是谁批改了一行或代码块以及为什么批改的性能。它具备文件标记（指责和更改）和侧边栏视图等性能。地址：https://marketplace.visualstudio.com/items?itemName=eamodio.g... ...

关于javascript:初学者8个JavaScript技巧

有很多办法能够优化咱们的 JavaScript 代码，本文总结了我在工作中常常应用的 8 个 JavaScript 技巧，心愿它也能帮忙你。  缩小应用 if-else在编写两个以上的 if ... else 时，是否有更好的优化办法?如下代码，咱们须要依据一个汉堡包的名字来计算它的价格。 const getPriceByName = (name) => { if (name === '') { return 30; } else if (name === '') { return 20; } else if (name === '') { return 10; }};console.log(getPriceByName('')); // 30更好的写法 ✅ const getPriceByName = (name) => { const foodMap = { '': 30, '': 20, '': 10, // 其余食物 // ... }; return foodMap[name];};console.log(getPriceByName('')); // 30应用 "filter"和 "map"当初，如果让你找到属于第 1 组的食物，你会如何找到它？比方上面这样数据： ...

关于javascript:WebSocket-API安全风险解读

WebSocket协定1.1 简介WebSocket协定是基于TCP的一种新的网络协议。它实现了客户端与服务器全双工（full-duplex）通信，即容许服务器被动发送信息给客户端。因而，在WebSocket中，客户端和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯，并进行双向数据传输，这样也使得客户端和服务器之间的数据交换变得更加简略。 1.2 特点WebSocket特点如下：较少的管制开销。在连贯建设后，服务器和客户端之间替换数据时，用于协定管制的数据包头部绝对较小。在不蕴含扩大的状况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度无关）；对于客户端到服务器的内容，此头部还须要加上额定的4字节的掩码。更强的实时性。因为协定是全双工的，所以服务器能够随时被动给客户端下发数据。放弃连贯状态。与HTTP不同的是，Websocket须要先建设连贯，这就使得其成为一种有状态的协定，之后通信时能够省略局部状态信息。而HTTP申请可能须要在每个申请都携带状态信息（如身份认证等）。更好的二进制反对。Websocket定义了二进制帧，绝对HTTP，能够更轻松地解决二进制内容。能够反对扩大。Websocket定义了扩大，用户能够扩大协定、实现局部自定义的子协定。更好的压缩成果。绝对于HTTP压缩，Websocket在适当的扩大反对下，能够沿用之前内容的上下文，在传递相似的数据时，能够显著地进步压缩率。 1.3 WebSocket 和 HTTP 的区别 HTTP 是一个无状态的协定，使客户端向服务器申请资源，并从服务器接管响应。客户端应用 HTTP 申请/响应语法，即申请发送到服务器之后，服务器向客户端返回 HTML 文件、图像和其余媒体内容。 WebSocket 通信协议尝试在较大范畴内改良 Web 实时通信和插件技术，并提供全双工、基于事件的通信而无需采纳低效的轮询形式。开发人员能够从 Web 浏览器的 JS 端轻松地创立 WebSocket 连贯并发送数据，进而实现应用程序的实时数据传输的实现。因为 WebSocket 是面向音讯的，因而它更加实用于实时通信，而 HTTP 更实用于申请和服务器-客户端通信的响应。 WebSocket APIWebsocket 应用 ws 或 wss 的对立资源标志符（URI），其中 wss 示意应用了 TLS 的 Websocket，相似于HTTP协定的http和https。wss协定通过TLS连贯建设一个WebSocket，即加密传输；ws协定即明文传输。 ws://echo.websocket.orgwss://echo.websocket.orgWebSocket API与传统API一样都是由通信协议、域名、版本号、门路、申请参数等因素组成，只是因为WebSocket API在实现握手流程之后，客户端和服务端之间就创立了持久性的连贯，并且能够间接用文本音讯或者二进制音讯进行通信的数据交互，这样咱们在WebSocket API流量报文中看到的个别都是JSON格局文本音讯。从开发的角度，WebSocket API还包含了：构造函数，构造函数的语法示例为：const myWebSocket = new WebSocket(url [, protocols])，其中url示意连贯的 URL；protocols示意为一个协定字符串或者一个蕴含协定字符串的数组，为可选。属性：属性分为很多次要有bufferedAmount，示意未发送至服务器的字节数；onopen，示意用于指定连贯胜利后的回调函数，等等。办法：办法次要分为close和send，别离示意WebSocket敞开连贯和数据传入服务器。事件：事件次要有close、error、message、open。 WebSocket API业务场景WebSocket API作为一种重要客户端-服务器通信接口，到底在哪些业务场景下可能用到WebSocket API呢？次要分为三大类：实时数据更新的应用程序：对于一些须要服务端一直发送数据在客户端实时显示的利用，应用WebSocket API作为数据传输接口无疑是最好的抉择。 ...

关于javascript:资讯-图扑软件亮相第二十一届中国海峡创新项目成果交易会

2023 年 6 月 18 日，第二十一届中国·海峡翻新我的项目成绩交易会（以下简称“海创会”）在福建省福州市拉开帷幕。海创会作为福建省宽泛吸纳国内外科技成果来闽对接，放慢科技成果转化的平台，始终以来保持以翻新我的项目为外围生命力，助力福建创新型省份建设，助推经济高质量倒退。图扑软件产品亮相第二十一届海创会据悉，厦门市遴选 59 家优良翻新企业加入线上线下展现。其中，厦门五家专精特新企业携最新研发成绩亮相线下展览，展现厦企硬实力。作为第二十一届海创会的重要组成部分和数字产品展现窗口，图扑软件应邀参展。发展期间图扑软件通过超清电视、手机等终端，全方位、多维度地向外界出现达到视觉高峰的数字孪生可视化成果，以及图扑先进的产品研发技术。将各行业与 Web 端的 UI/2D/3D、GIS、BIM 及 VR/AR 可视化、数字孪生等状态相结合。向各位领导、业界专家和潜在单干企业，展现了图扑可视化、数字孪生技术为监控治理畛域所提供的智能化经营体系。并与与会者分享咱们在技术创新和商业利用方面的教训与见解，独特探讨翻新发展趋势与单干机会。可视化解决方案赋能产业转型降级在承受《厦门日报》记者采访时，图扑软件事业部总经理林群淇示意：通过联合 2D 跟 3D 数字孪生可视化的计划，可能实在反映工业企业日常生产流程当中的生产状况，咱们也心愿通过纯技术的投入，更多地去倒退专属于国产化自主的一些翻新企业的产品。图扑软件致力于成为企业数智化转型的最佳赋能搭档，专精可视化技术我的项目劣势，助推智能制作和数字化转型，让产业运维可追溯，设施运行可监管。智慧工厂实时洞察生产图扑 HT 通过采纳自主研发的二三维可视化引擎、GIS、BIM 以及视频交融等技术，接入歪斜摄影、GIS 空间信息数据、智能物联网 IoT 数据以及大数据系统平台的等数据信息，联合轻量化建模计划，实现对多个智慧工厂、车间流水线等场景随时随地查看 3D 可视化成果，晋升设施产线数智化治理和运行效率，为工业互联网的智能化建设、数字化转型和一体化治理提供优质的解决方案。图扑 HT 一站式数据可视化解决方案，可通过可视化平台将传统工厂的机器设备、人员定位、智能监控等进行系统集成运维，直观展现各类生产指标信息打造全面感知、全面可视的智慧工厂管理系统。反对联合不同的工业生产需要提供可视化服务。目前，产品曾经广泛应用于智能制作、智慧城市、园区楼宇、光伏能源等多个畛域，服务了国内外数百家企业客户。中国·海峡翻新我的项目成绩交易会自 2003 年起，福建省委、省政府高屋建领，肇画科技翻新蓝图，联合区域倒退策略，举全省之力、集全省之智打造翻新平台一一中国·海峡翻新我的项目成绩交易会(简称“海创会”)。 2023 年第二十一届海创会以“我的项目·技术·资本·人才一一践行“深学争优、敢为争先、实干争效’口头，科技翻新助力高质量倒退”为主题，立足福建倒退劣势，推动“四链”深度交融，设置核心揭幕厅(院士及主宾高校专题馆)、企业翻新馆、省市合作馆、翻新成绩馆、人才资本馆、绿色经济馆。邀请安徽省、内蒙古自治区、昌都市等华东、华北、西南地区次要省(自治区)、市聚势引领翻新倒退，邀请两院院士展现核心技术攻关突破性成就和原创性重大成果，邀请同济大学、天津大学、厦门大学等国内出名高校深入产教交融，邀请央企和福建省属国企独特推动产业倒退迈向高端。邀请多位国家级院士、高校专家学者以及行业大咖等，围绕重点产业主题、技术转移、权威信息公布、我的项目推介等内容，举办多场高质量的论坛和流动，为鼎力推动中国式现代化、奋力谱写全面建设社会主义现代化国家福建篇章作出更大奉献。对于图扑软件厦门图扑软件科技有限公司成立于 2013 年，品牌倒退至今已有十年深耕。总部位于厦门，在北京、上海、天津、大连、青岛、成都、武汉等地设有分支机构。 HT 自研引擎图扑软件明星产品 HT for Web 图形引擎，是一套国产化独立自主研发的 2D 和 3D 图形界面开发框架，具备轻量、高效、易用和跨平台等个性。反对构建 PaaS/SaaS 层面低代码数字孪生平台、图形化组态 SCADA 平台、物联网 IoT 平台等各类平台产品和可视化我的项目利用。 ...

关于javascript:新一代响应式设计适应多设备的最佳解决方案

关于javascript:每日一题之js类型判断

typeoftypeof 操作符惟一的目标就是查看数据类型类型typeof 后果根本类型undefinedundefined Booleanboolean Numbernumber Stringstring Symbolsymbol BigIntbigint nullobject援用类型Object(Object, Array, Map, Set, Regexp, Date 等)object Functionfunction你会发现用typeof来判断援用类型时, 都会返回 'object'. 为此, 引入了 instanceof instanceof 运算符用于检测构造函数的 prototype 属性是否呈现在某个实例对象的原型链上。 var arr = [];arr instanceof Array; // truetypeof arr; // "object"function A() {}function B() {}// Javascript 继承B.prototype = new A();var b = new B();b instanceof A; // trueb instanceof B; // trueinstanceof 的外部实现原理思路: 利用原型和原型链, 每一个函数都有一个显式的 prototype, 每一个对象都有一个隐式原型 **proto**, 当咱们对象的原型链中存在构造函数的显式原型 prototype时, 咱们就能够确定它们之间存在关系;function myInstanceOf(constructor, instance) { let prototype = constructor.prototype; let proto = instance.__proto__; while (true) { // 阐明道原型链订单, 还未找到, 返回 false if (proto === null) { return false; } if (proto === prototype) { return true; } // 持续向 proto 的原型链上遍历 proto = Object.getPrototypeOf(proto); }}Object.prototype.toString()toString() 办法返回一个示意该对象的字符串。该办法旨在重写（自定义）派生类对象的类型转换的逻辑。valueOf() 办法返回对象的原始值示意该办法由字符串转换优先调用, 然而数字的强制转换和原始值的强制转换会优先调用 valueOf, 因为根本的 valueOf() 办法返回一个对象，toString() 办法通常在完结时调用 ...

关于javascript:带纵深可跳跃横版闯关游戏模版

此我的项目是以《卡比猎人队》为底本开发的横版带纵深闯关游戏模版。外延数据表配置文件。购买链接：微店购买链接开发环境开发引擎：CocosCreator3.6.3开发语言：TypeScript蕴含的内容：逻辑实现目录介绍（game）battle: 战斗相干代码db：存档数据管理energy：膂力equip：配备explore：摸索界面相干hero：英雄item：游戏中所有道具兼顾管理器loading：加载治理login：登录mission：工作prop：道具（未应用）public：公共性能resource：游戏中的资源role：游戏中的角色server：服务器拜访（未应用）shop：商店user：用户数据模型初始化类框架目录阐明（引擎无关）cfw.ts：框架初始化类config.ts：框架配置文件ai：AIanimation：动画astar：A星attribute: 角色属性相干audio：音频相干command：命令controller：控制器core：外围代码data：数据操作event：事件告诉input: 按键输出locality：本地模仿网络拜访的存档形式model：模型module：模块move：带纵深和跳台的横版闯关游戏模仿net：屏蔽长短连贯的繁琐网络network：简略的网络拜访npc：游戏角色objectMgr: 对象管理器pool：对象池quadTree：四叉树res：资源管理state：状态机相干struct：罕用数据结构time：工夫治理相干tools：常用工具类ui：UI管理器view：显示相干widget：罕用组件xlsx：数据表相干local: 本地存档封装webdb：模仿sqlite3数据库引擎相干文件介绍（引擎相干）BaseCompoenent：组件基类decorators.ts : 装璜器engine.ts : 引擎相干的封装EngineView：view的父类ResHelper: 资源加载类游戏开发中的罕用组件（components）animation：动画cursor:光标input ：按键相干keyboard：游戏手柄，键盘操作operate：遥感listview: 分层解决的ScrollViewredtip: 红点提醒性能move：挪动对象相干SDK框架介绍（试验中）小游戏sdk整合代码，通过反向适配和配置数据抹平各平台之间的差别，从而达到逻辑代码只书写一次的目标。简化sdk的调用。反对的小游戏平台cocos4399oppoqq微信百度vivo头条快手第三方库阐明（third）astar：A星behaviortree：行为树理解更多游戏开发相干内容https://gitee.com/sarsgame/gds QQ交换群：627248339QQ售后群：435159489微信公众号《微笑游戏》局部截图购买须知本产品为付费虚构商品，一经购买胜利概不退款，请领取前审慎确认购买内容。我的项目中所用资源来源于网络，仅限demo中学习应用，不具备商用条件，请勿用于商业用途。欢送扫码关注GZH《微笑游戏》，浏览更多内容。

关于javascript:每日一题之反转链表

链表反转链表-代码随想录思路: 咱们能够申请两个指针，第一个指针叫 pre，最后是指向 null 的。第二个指针 cur 指向 head，而后一直遍历 cur。每次迭代到 cur，都将 cur 的 next 指向 pre，而后 pre 和 cur 后退一位。都迭代完了(cur 变成 null 了)，pre 就是最初一个节点了。var reverseList = function (head) { if (!head || !head.next) { return head; } let pre = null, cur = head, temp = null; while (cur) { temp = cur.next; cur.next = pre; pre = cur; cur = temp; } return pre;};

关于javascript:手把手带你掌握迭代器可迭代对象生成器和异步函数以及优雅的异步处理方案-asyncawait

概述为什么要将迭代器、生成器和异步放在一块来讲述呢？因为他们存在肯定的分割。WTF，这不是废话吗？对的，但，是也不是。接下来咱们一个个来看吧迭代器什么是迭代器呢？迭代器是一种可能在容器对象上（例如数组或链表等）遍历数据汇合的对象。迭代器对象提供了一种对立的形式来拜访数据汇合中的元素，而无需裸露其底层示意。通过迭代器，能够一次拜访汇合中的每一个元素，而不须要晓得其中元素的个数或其底层存储形式。迭代器通常应用 next() 办法来拜访汇合中的下一个元素，并返回一个蕴含元素值和是否还有更多元素的对象。next办法有如下要求：一个无参数或者一个参数的函数，返回一个该当领有以下两个属性的对象： done(boolean) 如果迭代器能够产生下一个值，则为false。（这等价于没有指定done这个属性。）如果迭代器已将序列迭代结束，则为true。这种状况下，value是可选的，如果他仍然存在，即为迭代过后的默认返回值(undefined）value 迭代器返回的任何JS值，done为true时可省略。怎么样，到这里的话，咱们是不是对迭代器曾经有了大抵的理解。但这些实践还是有些让人头大对不对？没关系，让咱们一起看一个例子就能有更加粗浅的了解了。看代码吧 // 封装一个生成迭代器对象的函数function createArrayIterator(arr) { let indexNum = 0 // 1.首先，依照定义，迭代器是一个对象 const arrayIterator = { // 2. 其次，这个对象必须实现一个next办法(接管0或1个参数) next: function() { // 3. 而后，这个办法必须返回一个对象 // 这个对象蕴含两个参数： // done --> boolean // value --> 具体的值或undefined if(indexNum < arr.length) return { done: false, value: arr[indexNum++] } else // 此时value可省略 return { done: true, value: undefined } } } return arrayIterator }const nums = [3, 2, 9]const numsIterator = createArrayIterator(nums)console.log(numsIterator.next()) // { done: false, value: 3}console.log(numsIterator.next()) // { done: false, value: 2}console.log(numsIterator.next()) // { done: false, value: 9}console.log(numsIterator.next()) // { done: true, value: undefined}到这里应该齐全了解了吧！接下来，咱们一起来看一下可迭代对象 ...

关于javascript:安装brew后brew-update-报错问题解决

关于javascript:深入Vite再谈ESM的高阶特性

谈到前端模块化的倒退历史，就肯定不会漏掉ESM，除此之外，还有大家熟知的CommonJS、AMD、CMD以及ES6等。目前， ESM 曾经逐渐失去各大浏览器厂商以及 Node.js 的原生反对，正在成为支流前端模块化计划。而 Vite 自身就是借助浏览器原生的 ESM 解析能力(type="module")实现了开发阶段的 no-bundle，即不必打包也能够构建 Web 利用。不过咱们对于原生 ESM 的了解仅仅停留在 type="module"这个个性下面未免有些狭窄了，一方面浏览器和 Node.js 各自提供了不同的 ESM 应用个性，如 import maps、package.json 的 imports和exports 属性等等，另一方面前端社区开始逐步向 ESM 过渡，有的包甚至仅留下 ESM 产物，Pure ESM 的概念随之席卷前端圈，而与此同时，基于 ESM 的 CDN 基础设施也如雨后春笋般不断涌现，诸如esm.sh、skypack、jspm等等。因而你能够看到，ESM 曾经不仅仅局限于一个模块标准的概念，它代表了前端社区生态的走向以及各项前端基础设施的将来，不论是浏览器、Node.js 还是 npm 上第三方包生态的倒退，无一不在印证这一点。接下来，咱们一起来看一下浏览器和 Node.js 中基于 ESM 实现的一些高级个性，而后剖析一下Pure ESM 模式，以及这种模式下存在哪些痛点，以及如何解决这些痛点。一、高阶个性1.1 import map在浏览器中咱们能够应用蕴含type="module"属性的script标签来加载 ES 模块，而模块门路次要蕴含三种：绝对路径，如 https://cdn.skypack.dev/react相对路径，如./module-abare import即间接写一个第三方包名，如react、lodash对于前两种模块门路浏览器是原生反对的，而对于 bare import，在 Node.js 能间接执行，因为 Node.js 的门路解析算法会从我的项目的 node_modules 找到第三方包的模块门路，然而放在浏览器中无奈间接执行。而这种写法在日常开发的过程又极为常见，除了将 bare import 手动替换为一个绝对路径，还有其它的解决方案吗？答案是有的。古代浏览器内置的 import map 就是为了解决上述的问题，咱们能够用一个简略的例子来应用这个个性: ...

关于javascript:4种Javascript实现深拷贝的方式

概念介绍深拷贝：在堆内存中从新开拓一个存储空间，齐全克隆一个截然不同的对象；浅拷贝：不在堆内存中从新开拓空间，只复制栈内存中的援用地址。 01、递归形式（举荐，我的项目中最平安最罕用）应用递归的形式进行对象（数组）的深拷贝，奉上已封装的深拷贝函数：上方函数的应用形式： //函数拷贝 const copyObj = (obj = {}) => { //变量先置空 let newobj = null; //判断是否须要持续进行递归 if (typeof (obj) == 'object' && obj !== null) { newobj = obj instanceof Array ? [] : {}; //进行下一层递归克隆 for (var i in obj) { newobj[i] = copyObj(obj[i]) } //如果不是对象间接赋值 } else newobj = obj; return newobj; }02、JSON.stringify() ；(这个不举荐应用，有坑)一般的对象也能够进行深拷贝，然而！！！当对象内容项为number,string.boolean的时候，是没有什么问题的。然而，如果对象内容项为undefined,null,Date,RegExp,function，error的时候。应用JSON.stringify()进行拷贝就会出问题了。 03、应用第三方库lodash中的cloneDeep()办法是否举荐应用，看状况吧。如果咱们的我的项目中只须要一个深拷贝的性能，这种状况下为了一个性能引入整个第三方库就显得很不值得了。不如写一个递归函数对于我的项目来说性能更好。 lodash.cloneDeep()代码示例： import lodash from 'lodash';let obj = { a: { c: 2, d: [1, 3, 5], e:'阿巴阿巴' }, b: 4}const newObj = lodash.cloneDeep(obj);obj.b = 20;console.log(newObj.b); //输入 4；不会扭转实际上，cloneDeep()办法底层应用的原本就是递归办法。只是在外层又封装了一层而已。 ...

关于javascript:图扑数字孪生机房解锁运维新境界-数据中心可视化合集

IDC（Internet Data Center）数据中心可视化是指通过可视化的形式对数据中心的运行状态、资源应用状况、安全监控等进行展现和治理。能够帮忙管理员更好地理解数据中心的运行状况和趋势，及时发现问题并采取措施，进步数据中心的运行效率和安全性。通过图扑自研产品 HT for Web 可打造多类型数据中心数字孪生零碎，本次将展现中国风、科技风、写实风、线框工艺的数据中心机房。实在还原出机房的三维场景，展现了机柜、IT 设施、电源设施、空调设备、安全设备等，界面中同时搭配左右两侧的数据看板，以“所见即所得”的形式，实时近程监督数据中心的资产、运行、能耗、环境、安防信息。数据中心分级总览通过三维中的点击交互实现逐级下钻，实现了从地图-地区-园区-机房-机柜设施的逐级下钻的性能。从宏观的数据中心地理分布，再到宏观的园区、机房，HT 都进行了高精度、轻量化的建模还原，使 Web 端的三维场景运行更加晦涩，场景过渡更加顺滑天然。反对鼠标 360 度自在操作，如旋转、平移、拉近拉远操作，同时也适配触屏设施的单指旋转、双指缩放、三指平移操作。资产治理设施可视化在数据中心可视化零碎中，将业务相干的设施资产如机柜、UPS、空调等，通过 CAD 图、现场照片等材料建模进去，再导入 HT for Web 三维引擎中实现场景搭建和渲染。数据中心设施模型可视化的长处次要有以下几个方面：进步管理效率：通过数据中心设施模型可视化，管理人员能够更直观地理解整个数据中心的设施状况，包含设施的地位、状态、性能等信息，从而更疾速地进行设施治理和故障排查。升高保护老本：通过数据中心设施模型可视化，管理人员能够更精确地预测设施的故障和更换周期，从而合理安排保护打算，缩小保护老本。进步安全性：通过数据中心设施模型可视化，管理人员能够更及时地发现设施的异常情况，如温度过高、电流过大等，从而及时采取措施防止设施故障或火灾等安全事故的产生。进步可扩展性：通过数据中心设施模型可视化，管理人员能够更好地布局数据中心的扩大和降级，从而进步数据中心的可扩展性。 U 位可视化数据中心可视化的颗粒度，不仅仅能够到机柜设施，还能够细化到单台机柜的 U 位设施散布状况。通过鼠标点击机房中的某台机柜，下钻至机柜外部三维场景，展现出机柜的总 U 位，以及 U 位上以后装置的 IT 设施。点击设备，反对从 U 位上抽出展现设施根本信息，如设施名称、厂商、型号、业务 IP 等。 U 位上的设施模型既能够是固定的人工摆放，又能够是依据接口数据生成。实现办法是：建模预设好所有型号 IT 设施的模型；将机柜每个 U 位进行宰割和定义；前端调取某 U 至某 U 地位为某型号设施的数据；最初在此 U 位上主动生成模型。这种形式有利于将后端更新的设施地位信息，实时同步到前端三维页面中。科普小常识：机柜的 U 位是指机柜外部的一个规范尺寸，用于标识机柜外部的垂直空间。一个 U（也称为“单元”）的高度为 1.75 英寸（44.45毫米），它是机柜外部垂直空间的根本计量单位。通常，机柜的高度以 U 为单位来计算，例如，一个 42U 的机柜高度为 42 个 U ，即 73.5 英寸（1866.9毫米）。 ...

关于javascript:判断某个时间戳是否在当前时间北京时区的临近三个工作日内

关于javascript:手撸一个类似-Laravel-验证器的表单验证器

介绍Laravel 的表单验证很不便，想在前端也用这样的形式进行验证。 git 地址，欢送star 期待这个表单验证库有这样的性能。 let validator = new Validation(this.registerForm, { telephone: "required|telephone", captcha: "required|length:5",}, { telephone: { required: "手机号不能为空", telephone: "手机号格局不正确", }, captcha: "验证码不正确"})try { validator.validate()} catch(e) { uni.showToast({ icon: 'error', title: e.message })}构造函数的第三个参数 messages 能够不要，默认是英文提醒。而且该参数反对不同粒度的错误信息，如果传对象，则如果对应的规定校验不通过，就应用对应的错误信息；如果传字符串，则不论什么规定未通过，都应用该错误信息。内置一些规定，如果不够用，还能够本人扩大。依据以上的需要，就有了这个库 @church1117/form-validation。装置npm install @church1117/form-validation应用import Validation from "@church1117/form-validation"let data = { name: "church", mobile: "18565919379", age: 19, gender: '2', password: "123456", captcha: "12345", idcard: '42052919910727452X', email: "xxx@qq.com", test: "ttt", birthday: '1993/11/17', }let rules = { name: "required|between:6,255", mobile: "required|telephone", age: "numeric|between:8,60", gender: "numeric|range:" + gender.join(','), password: "required|min:6|password", captcha: "required|length:5", idcard: "required|idcard", email: "email", // test: "required|testRule" birthday: "datetime" }let messages = { name: { required: "名字不能为空", between: "名称长度必须在6~255之间", }, mobile: "不正确的手机格局", age: { numeric: "年龄不是一个无效的数值", between: "年龄必须在18-60岁之间" }, password: { required: "明码不能为空", min: "明码长度不能小于6位", regex: "明码只能由数字、大小写字母形成", }, captcha: "验证码不正确", idcard: { required: "身份证不能为空", idcard: "身份证格局不正确", }, test: { required: "测试字段不能为空", testRule: "该字段的值必须为test" } }let validation = new Validation(data, rules, messages);messages 能够定义不同粒度的错误信息，如果是字符串，那么该字段的所有验证规定都应用该错误信息。如果是对象，就只应用对应规定的错误信息。内置规定requiredtelephoneminmaxbetweenidcardrangepasswordnumericlengthemaildatetime自定义规定匿名函数参数(value, field, ...params) ...

关于javascript:前端面试题之性能优化大杂烩

次要内容为上面几大类：挪动端、图片、JavaScript、css、html、页面内容、服务器、cookie。挪动端性能优化：放弃单个文件小于25KB挪动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。打包内容为分段multipart文档因为HTTP申请每一次都会执行三次握手，每次握手都会耗费较多的工夫。应用multipart，实现了多文件同时上传，可用一个HTTP申请获取多个组件。图片优化：CSS sprites俗称 CSS 精灵、雪碧图，雪花图等。行将多张小图片合并成一张图片，达到缩小 HTTP 申请的一种解决方案。可通过 CSS中的background 属性拜访图片内容。这种计划同时还能够缩小图片总字节数，节俭命名词汇量。压缩图片图片占据资源极大，因而尽量避免应用多余的图片，应用时抉择最合适的格局大小，而后应用智图压缩，同时在代码中用Srcset来按需显示。（切记不要过分压缩可能会导致图片迷糊）尽量避免重设图片大小重设图片大小是指在页面、CSS、JavaScript等中屡次重置图片大小，屡次重设图片大小会引发图片的多次重绘，影响性能。图片尽量避免应用DataURLDataURL图片没有应用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。图片懒加载图片对页面加载速度影响十分大。比方，当一个页面内容比拟多的时候，加载速度就会大大的升高，极大的影响到用户体验。更有甚者，一个页面可能会有几百个图片，然而页面上仅仅只显示前几张图片，那其余的图片是否能够晚点加载用于进步性能。具体可见 >>JavaScript相干优化把脚本放在页面底部放在后面js加载会造成阻塞，影响前面dom的加载应用内部JavaScript和CSS 在事实环境中应用内部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的状况，因为 HTML 文档通常不会被配置为能够进行缓存的，所以每次申请 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在内部文件中，浏览器能够缓存它们，HTML 文档的大小会被缩小而不用减少 HTTP 申请数量。压缩JavaScript和CSS压缩文件是为了升高网络传输量，缩小页面申请的响应工夫。缩小DOM操作操作dom会产生几种动作，极大的影响渲染的效率。其中layout（布局）和paint（绘制）是最大的。js开销缩短解析工夫开销：加载-》解析和编译-》执行js的解析和编译，执行要花很长时间（谷歌开发工具中的performance中能够查看。选中main主线程中的某一段。）解决方案：代码拆分按需加载tree shaking代码减重防止长工作requestAnimationFrame和repuestIdleCallback进行工夫调度v8编译原理（代码优化）解析js代码成形象语法树-》字节码-》机器码编译过程会进行优化运行时可能会产生反优化v8外部优化脚本流:边下载边解析字节码缓存:罕用的字节码会存起来(这个文件用到其余的文件也用到的参数)函数懒解析:先解析用到的对象优化(投合v8进行优化)保障对象初始化程序统一(对象初始化时v8会生成暗藏属性以便后续复用并且是依照程序排序的)不要间接赋值对象新属性(追加的属性须要通过形容数组间接查找)应用数组代替类数组(v8会对数组进行优化)比方先将类数组转化成数组防止读取数组越界(比方for循环多查找1个下标会照成性能相差6倍)造成undefined和数字比拟数组也是对象，当找不到对应下标的时候回沿着原型链向上找造成额定开销业务上有效js内存，防止造成内存透露通过变量是否能被拜访到来判断内存是否开释。局部变量: 函数执行完没有闭包援用会被标记回收全局变量: 直到浏览器被卸载页面开释回收机制:援用计数:每调用一次加一,当计数为0的时候进行回收。毛病是不能解决循环援用(例如a对象依赖于b对象，标记革除(垃圾回收): 从根节点去拜访，当拜访到不能被拜访的对象就进行标记而后进行垃圾回收。(当a对象解决：防止意外的全局变量；防止重复运行引发的闭包；防止脱离的dom元素没有被回收(所以react有ref这个api)。 CSS 相干优化把样式表放在<head>标签中css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因而性能会更好。不要应用CSS样式表应用<link>代替@import不要应用filter防止元素类型转化(数组中放多种类型不利于v8引擎优化代码) 升高css对渲染的阻塞(按需加载，放在dom后面加载)利用pu实现动画(后面讲到的复合)应用contain进行优化(优化强度大。例如: contan:layout通知浏览器这个节点外部的子元素和里面的应用font-display进行优化:让文字更早的显示在页面上，加重文字闪动的问题html 相干优化缩小iframes应用压缩空白符防止嵌套档次太深防止应用table布局缩小没必要的正文删除元素默认属性(比方默认checkbox等)开发内容相干优化缩小HTTP申请数缩小DNS重定向缓存AJax申请提早加载预加载缩小DOM元素的数量划分内容到不同域名尽量减少应用iframe防止404谬误服务器相干优化应用CDN增加Expires或Cache-Control响应头启用Gzip配置Etag尽早输入缓冲Ajax申请应用GET办法防止图片src为空传输加载优化服务器启用gzipkeep Alive(长久TCP连贯)keepalive_requests 100;申请100次后开启http的keepAlive有keepalive_timeout 65;65秒后敞开。http缓存最好是用no-cache(要用的时候须要在服务器那边Etag验证下)service workers 减速反复拜访离线反对Cookie相干优化缩小cookie大小动态资源应用无cookie域名首屏加载优化资源压缩、传输压缩、代码拆分、tree shaking、http缓存路由懒加载、预渲染、inlineCss、虚构列表prefetch和preload调整加载程序js内存治理

关于javascript:leetcode2335-装满杯子需要的最短总时长

先上题目：现有一台饮水机，能够制备冷水、温水和热水。每秒钟，能够装满 2 杯不同类型的水或者 1 杯任意类型的水。给你一个下标从 0 开始、长度为 3 的整数数组 amount ，其中 amount[0]、amount[1] 和 amount[2] 别离示意须要装满冷水、温水和热水的杯子数量。返回装满所有杯子所需的起码秒数。示例 1：输出：amount = [1,4,2]输入：4解释：上面给出一种计划：第 1 秒：装满一杯冷水和一杯温水。第 2 秒：装满一杯温水和一杯热水。第 3 秒：装满一杯温水和一杯热水。第 4 秒：装满一杯温水。能够证实起码须要 4 秒能力装满所有杯子。示例 2：输出：amount = [5,4,4]输入：7解释：上面给出一种计划：第 1 秒：装满一杯冷水和一杯热水。第 2 秒：装满一杯冷水和一杯温水。第 3 秒：装满一杯冷水和一杯温水。第 4 秒：装满一杯温水和一杯热水。第 5 秒：装满一杯冷水和一杯热水。第 6 秒：装满一杯冷水和一杯温水。第 7 秒：装满一杯热水。示例 3：输出：amount = [5,0,0]输入：5解释：每秒装满一杯冷水。提醒： amount.length == 30 <= amount[i] <= 100解决思路：设 abc 按序列排如果c>a+b 返回c 如果c<a+b 返回（a+b-c）/2+c 如果是小数要进一 ...

关于javascript:漫画有趣的了解一下赋值深浅拷贝

什么是赋值？将某一数值赋给某个变量的过程，称为赋值。将确定的数值赋给变量的语句叫做赋值语句。所赋“值”能够是数字，也能够是字符串和表达式等。编辑赋值标识符简略的赋值，都是由'='示意。复合赋值应用'/'、'+'、'-'前面跟'='示意。这些赋值标识符，也是常说的“简写款式”。编辑每个数学赋值标识符都是举世无双的：编辑 +=(加) -=(减) *=(乘) /=(除) %=(取余) <<=(左移) >>=(右移) >>>=(无符号又移)(留神，数学赋值标识符只有简写作用，无晋升性能作用) 传值和传址赋值蕴含了传值和传址两种赋值形式。传值是根本数据的赋值形式，因为根本数据的值寄存于栈中。传值是援用数据的赋值形式，因为援用数据的值寄存在堆中。编辑 (上图为根本数据赋值传值形式，根本数据类型：string、number、boolean、undefined、null、symbol。) 编辑 (上图为援用数据赋值是传址的形式，因为援用数据的值只是指针指向同一堆地址，如果操作其中一个，其余都会被联动。) 编辑 (为variable name偷偷增加一个symbol。天呐variable name2竟然也能调用！！！) 编辑 variable name怄气了怎么办呢？拷贝为解决该问题，就须要应用到拷贝。也能够了解为只有在是援用性数据类型时，才用到深浅拷贝。浅拷贝先剖析一下浅拷贝是否可用。浅拷贝：回先创立一个新的对象，该对象有原始值的准确拷贝，然而属性值的拷贝是通过赋值来实现的。也就会有传说中的“只拷贝外表上的”一层。如果批改的是简单类型值自身，还是会相互影响。编辑这不行，不合乎 variable name的需要！深拷贝啊哦，浅拷贝并不能齐全满足variable name不想让variable name2拿到它新收集到的数据。或者咱们须要看看其余办法：深拷贝。编辑 (上图为深拷贝后的数据寄存图) 深拷贝后，会拷贝所有的属性,并将拷贝属性指向的动态分配的内存。深拷贝会另外创立一个截然不同的堆，新对象和原对象不共享堆内存。所以批改对象的值，也不会相互影响。当对象和它所援用的对象一起拷贝时即产生深拷贝。能够应用递归、JSON.parse()与JSON.stringify()测试查看成果。尝试一下，用深拷贝来实现variable name的需要：编辑齐全能够！！！ (留神，文章图中箭头方向不代表指针方向！！variable name以及variable name2只是代表变量名的英文！！)

关于javascript:前端优化之高并发处理

大部分的高并发解决根本都是在后端解决，然而在局部非凡状况下，后端无奈阻止用户行为，须要前端做配合。例如在抢购、秒杀等场景。高并发是什么？对此，咱们首先须要简略的去理解一下，高并发是什么？高并发是指在极短单位工夫内，有很多用户同时的拜访同一 API 接口或者 Url 地址，造成极多个申请同时发动到服务器。它常常会产生在有大沉闷用户量，用户高汇集的业务场景中。编辑浏览器申请限度浏览器在向后端发送http申请是，就会有高并发解决。应用HTTP/2.0，实践上HTTP/2.0协定反对在同一个TCP连贯上发送有限个HTTP申请，且这些申请的生命期能够重叠。然而实际上，浏览器并不会同时将所有申请就发过来，还是会有工夫距离。前端能够做些什么？尽管浏览器曾经对 http 申请并发设置了限度，然而并不能很好的解决掉不必要的申请。而且在局部状况下，用户较多，并且在同一时间端屡次申请，如图： (浏览器到服务器局部的申请会被后盾拒掉甚至可能会导致后盾解体) 编辑浏览器并不会过滤掉一部分申请，只是会分批发送。这时候极有可能会造成卡顿，甚至解体。所以如果，在浏览器发送申请时，能够杜绝掉一部分非必要申请就好了。编辑解决办法图片方面 1.CSS sprites 俗称 CSS 精灵、雪碧图，雪花图等。行将多张小图片合并成一张图片，达到缩小 HTTP 申请的一种解决方案。可通过 CSS中的background 属性拜访图片内容。这种计划同时还能够缩小图片总字节数，节俭命名词汇量。 2.压缩图片图片占据资源极大，因而尽量避免应用多余的图片，应用时抉择最合适的格局大小，而后应用智图压缩，同时在代码中用Srcset来按需显示。(切记不要过分压缩可能会导致图片迷糊) 3.图片应用Base64编码缩小页面申请数,采纳Base64的编码方式将图片间接嵌入到网页中。(然而这样做会有一个弊病，就是base64解码也是须要耗费工夫的) 文件方面 1.合井脚本和样式表将局部js和css模块合并，多个合并为单个。(无需适度合并，要思考前期接你代码的兄弟)缩小申请次数。代码压缩 1.js 代码压缩 JavaScript 压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等 (有的时候简化写法性能可能会升高，这点依照理论状况来吧)。 ...

关于javascript:最佳实践｜亚马逊可持续发展的架构模型

在过来的十年外面，亚马逊云科技始终都致力于帮忙企业和开发者实现数字化转型，包含如何应用云技术帮忙企业进步经营中资源利用率；如何通过云基础架构、容器、DevOps 进行业务的翻新和敏捷性；将来的十年，亚马逊云科技将帮忙开发者和企业开始新的可继续倒退转型。让开发者能够应用雷同的工具更专一于可持续性工作，并通过最佳实际和整体基础架构，帮忙你应答在可继续倒退转型过程中的新挑战。亚马逊云科技开发者社区为开发者们提供寰球的开发技术资源。这里有技术文档、开发案例、技术专栏、培训视频、流动与比赛等。帮忙中国开发者对接世界最前沿技术，观点，和我的项目，并将中国优良开发者或技术举荐给寰球云社区。如果你还没有关注/珍藏，看到这里请肯定不要匆匆划过，点这里让它成为你的技术宝库！在致力于云自身的可持续性倒退转型的同时，咱们将实际和教训做出了总结，并设计了无效的工具和服务提供给开发者。作为云上的可持续性倒退指标，咱们认为有两方面的工作是十分重要的：第一，要继续升高工作负载的能耗。第二，要一直进步工作负载组件之间的工作效率。基于以上两个指标，咱们总结了六个方面的最佳实际，帮忙开发者构建云上可继续倒退的架构模型，包含：区域的抉择、正确应用云资源、软件的架构、数据应用、硬件的抉择以及开发部署。亚马逊可持续性倒退的最佳实际抉择适合的区域来部署你的工作负载亚马逊云科技的区域亚马逊云科技在寰球提供了 30 多个区域以及 99 个可用区。咱们的构建者能够依据业务需要来抉择不同可用区的资源，包含网络提早，数据合规要求等等。而可持续性倒退，也就是节能减排的指标也应该在抉择适合的可用区时纳入考量。亚马逊云科技别离在北美洲、欧洲、中东和非洲、以及亚太区域通过 310 个可再生能源我的项目，实现了共计 15.7 千兆瓦可再生能耗。不同的区域针对不同的可再生能源我的项目，失去的能耗节俭略有不同。其中 32 个亚太地区的可再生能源我的项目包含中国山东和吉林的两个可再生能源我的项目。山东我的项目是 100 兆瓦 (MW) 的太阳能我的项目，目前曾经投入经营，每年可产生 12.8 万兆瓦时 (MWh) 的清洁能源。吉林我的项目是亚马逊在中国反对的第二个可再生能源我的项目，是 100 兆瓦 (MW) 的风能我的项目。该我的项目也将很快投入经营，届时每年可提供超过 30 万兆瓦时（MWh）的可再生能源，相当于为超过 15 万户中国普通家庭提供电力反对。咱们倡议的最佳做法是抉择凑近这些可再生能源我的项目的区域，利用亚马逊现有的成绩实现第一步的节能减排。正确应用云资源咱们的第二个倡议是正确应用云资源。这一点十分重要。和自建数据中心不同，云上的资源按需付费。少数企业，并没有将企业外部数据中心的建设老本均匀到具体业务所占用的服务老本，因而依照自建数据中心的形式生产云资源，对于单个利用来说，云上资源耗费没有特地显著的劣势。因而建设新的应用习惯，标准云资源的应用形式，特地是退出制订明确的可继续倒退指标，将其与 SLA 相平衡为前提来设计利用的交付形式，比方：按需扩张、打消闲置资源、依据所在地理位置油画工作负载的天文布局、以及依据可继续倒退指标，优化云上资源的应用行为。通过标准云上资源应用行为，能够帮忙开发者进一步实现麻利、高效、自动化，同时放慢实现可继续倒退转型。通过具体案例来看一下，什么是正确的云资源应用形式：咱们把某个具体的服务运行在两个可用区，通过实现从一个可用区到另一个可用区的实时故障切换，来取得高可用性。不言而喻，这个服务在每个可用区都须要预留与理论工作负载相匹配有闲暇资源。因而每个可用区的理论工作负载的能耗要限度在整体资源的 50% 以内。然而，如果咱们通过三个可用区实现这个服务的高可用性。那么咱们在每个可用区只有预留总资源的 2/3 就能够满足实时的故障切换。因而咱们能够看到，对于实时故障切换的高可用要求，三个可用区的抉择，资源均匀利用率更高，老本更低，故障的影响最小。很简略，这就是云上资源的正确应用形式之一。还有一个案例也很乏味，这是一个均衡 SLA 和可继续倒退指标的案例：针对非实时的故障切换业务，它们重要的考量因素是老本，用故障切换期待的工夫来换取尽可能大的资源节俭。对于非实时故障切换的业务需要，咱们能够通过优化故障切换的时长来实现可继续倒退的指标。具体的形式是抉择“冷容量”作为故障切换时服务资源的。当须要故障切换的时候，咱们在可用区外面寻找或者期待闲暇的资源，再去做故障切换。尽管咱们在切换的过程中就义了响应的工夫，然而咱们大幅度的缩小了资源闲置所造成的节约和能耗，从运行老本上实现可继续倒退的指标。其实如何正确的应用云上资源来实现可持续性倒退的指标，最大的考量点是均衡不同业务的 SLA 和整体业务的可继续倒退指标。在均衡工作负载的部署、业务部署、架构部署时做出正确的抉择，这就是咱们的最佳实际。优化软件与架构咱们能够通过扭转软件和架构来缩小资源耗费和产生的影响。包含：异步和调度、应用高能效的编程语言、移除或重构使用率低甚至是无用的负载组件、低代码化、优化开发者的终端设备产生的影响，应用匹配的数据拜访和存储模式的软件以及架构。通过性能调度，缩小因为“峰值”所产生的能耗图中展现了一个服务在它业务生命周期中的性能曲线。三条基准线别离示意：均匀能耗的耗费线 (Average)业务峰值的能耗 (Peak)业务运行所须要的资源 (Provisioned Capacity)咱们发现：服务应用的理论资源和能耗并不是均匀能耗曲线下的面积，而是配置容量线下的面积。值得注意的是配置容量的大小取决于该利用的能耗峰值。通常状况下，基于高可用的考量，配置容量是能耗峰值的两倍。 ...

关于javascript:收好这份直播预告本周六一起聊聊发版那些事儿

你想要深刻理解 ShardingSphere 、与业内技术大咖「面对面」探讨数据库畛域的前沿趋势吗？那就肯定不能错过由 ShardingSphere 社区出品、SphereEx 公司资助的寰球软件工程师必看的直播节目——《对谈时刻》！每期节目，咱们都会邀请三位业内表现出色的技术精英，与你分享开源与数据库畛域的前沿技术实际及热点新趋。将来，ShardingSphere 社区还将继续推出不同主题的《对谈时刻》流动，让所有关注 ShardingSphere 社区的敌人们，都能通过新栏目的继续输入，放弃敏锐且当先的行业嗅觉！全新版本闪亮退场 ✨近期，ShardingSphere 5.4.0 及 ShardingSphere-On-Cloud 0.3.0 行将正式公布，新版本的各项性能也很快会与大家正式见面！轻轻先跟大家预热下，在本次版本更新中， ShardingSphere 5.4.0 将播送表的应用范畴由分片数据源扩大到逻辑库下的所有数据源，同时也实现了 CDC 增量数据依照事务维度输入等能力。而在 ShardingSphere-On-Cloud 0.3.0 中，也对 Operator 进行了大幅晋升，且新增了全新的 CRD StorageNode 反对 AWS 数据源治理以及 Chaos 对接支流混沌工程框架等性能亮点 ... 数从新能力等你来揭秘为了让更多关注 ShardingSphere 的小伙伴及时理解到 ShardingSphere 社区最新的研发进度及技术演变方向、让大家更好地应用新版本，社区顺便筹备了一期线上圆桌会，来与大家独特拆解新版的重磅性能及高效应用办法。7 月 1 日下午两点，咱们邀请了 ShardingSphere PMC 端正强、ShardingSphere Committer 江龙滔、ShardingSphere Committer 苗立尧三位资深的社区贡献者做客「社区线上直播间」，将为大家具体解答新版本带来的重点性能更新及对应的性能冲破！本场流动以 ShardingSphere 5.4.0 及 ShardingSphere-On-Cloud 0.3.0 的新版个性为主题，除了与大家详谈 ShardingSphere 我的项目的技术架构及重磅性能之外，还会跟大家分享社区将来的发版打算、一起畅谈如何打造更弱小的 ShardingSphere 技术生态！此外，流动还设有「技术实战」、「有奖问答」等趣味环节，期待与大家一起解锁！心愿通过本场流动，社区一方面能助力宽广用户高效降级、一键开启 ShardingSphere 应用新体验，另一方面社区也能通过主题多元、形式多样的社区活动集结更多沉闷的青年开发者，从而使社区及参加流动的用户之间能建设起高质量的价值共振链路、实现多面共赢！就在本周六，围“桌”详谈，期待与您线上见～预约报名微信搜寻【SphereEx】视频号 ...

关于javascript:六年前写的老项目肝了一版更新

前言Essay新版本终于肝完了，这是我17年写的一个我的项目，原本都不打算更新了，只是最近在应用第三方平台写笔记的时候被恶心到了，想迁徙文章发现也很吃力，就想着还是整一个本人喜爱的吧，于是就又捡起来了。新版本做到了即便齐全不懂技术也能够应用的简略水平，图形化配置装置，这绝对于之前的版本是一次提高和尝试。在技术上，这次也做了各种取舍，为了保障整体的写作体验和浏览体验，前端没有应用相似Vue、React这种框架，也没有应用Jquery，只引入了必要的库和一个极小的UI，应用传统形式渲染。在数据库上抉择上，应用了更为轻量的SQLite，这也是尝试了各种数据库后的折中抉择。动态资源的存储，放弃了应用CDN，转而应用最根底的本地存储。能够说这次更新，除了必要的开发依赖，做到了尽可能不依赖第三方服务。本次更新实现后，我也把散落在各个平台的笔记全副迁徙过去了。装置步骤装置前请确保本地的Node版本大于16，本机已装置sqlite # 下载我的项目git clone https://github.com/wmui/essay.git# 装置依赖yarn install # or npm install# 启动我的项目npm run start我的项目启动后，拜访http://127.0.0.1:7001/install，进入装置界面：点击下一步，设置管理员明码：点击实现设置，装置就实现了，超简略开始写作极致的markdown写作体验，在功能设计上，只提供了必要选项。能够把重要文章置顶，同时能够抉择在导航栏显示文章，这样文章就相当于单页了，应用markdown设计出不同的展现页面，比方“对于咱们”。草稿箱的设计不仅用于放草稿，之前的版本我有设计公开分类和公有分类性能，这次全副割掉了，用草稿箱代替公有文章。题目输入框也被我割掉了，会主动读取内容的第一个h1 - h6标签作为题目，为的是沉迷式写作体验。文章提供主动保留性能，在写作过程中无需放心内容失落。性能阐明这次更新相比于之前的版本，阉割掉了很多性能，能够说越更新性能越少，但已有的性能也绝对的灵便了很多。整个设计一共就三张表，前面也不会加了，单用户博客，前面也不会改成多用户。没有前后台的设计，管理员和游客看到的页面是一样的，编辑和删除在文章详情页实现。评论性能也去掉了，加了一个留言板。必要的批改项对立放到设置外面结语这个我的项目始终是作为技术实际的，因为性能简略，所以代码浏览和重构都很简略。如果这个我的项目对大家学习有帮忙，或者只是单纯的对应用到的技术感兴趣，心愿能点个小小star。 github: https://github.com/wmui/essay预览：https://ppx.link 以上，感激浏览！

关于javascript:React实战利用甘特图和看板强化Paas平台应用

概述这是一篇 React 在 kintone 上的实战，咱们须要利用看板和甘特图来来强化项目管理 app。另外这次用到了 webpack，想理解根本配置思路的能够看这里我的项目地址GitHub - kintone-samples/SAMPLE-kintone-ganttchart-kanban-cn: project manager for kintone,using Gantt and Kanban 效果图需要整顿看板卡片上须要显示负责人、工夫、类型、题目、详细信息看板上不同的跑道代表不同的状态，须要依照程序显示容许卡片在各个跑道自在切换，当挪动实现时须要同步更新记录的状态信息点击卡片能进入具体画面不倡议用流程治理来设置状态，因为它须要设置每个 action 动作甘特图甘特图须要能标示明天日期甘特图要有不同的 viewmode 来管制工夫长度信息能显示父子工作关系图工作能被自在拖拽，工夫被扭转后须要同步更新记录的工夫信息工作状态以进度百分比的形式显示工作题目和工夫信息能以文字的模式显示进去点击工作能进入具体画面其余要有切换性能不同的工作类型须要用不同的色彩显示和 kintone 的列表性能联合起来，来控制数据大小具体画面要有甘特图，只显示本人的父子工作lookup 只能查其余 app 的信息，无奈利用它来实现父子关系绑定，须要有其余的伎俩 kintone App 设置代码详解局部代码因为零碎的起因无奈齐全显示，请以github上源文件为准第三方包抉择甘特图看板React UI library工作类型名转不同色彩 index.tsx、App.tsx、KintoneAppRepository.tsx、Card.tsx 具体代码请见：开发者网站-React实战

关于javascript:构建-JavaScript-ChatGPT-插件

聊天插件零碎是一种令人兴奋的新形式，能够扩大ChatGPT的性能，纳入您本人的业务数据，并为客户与您的业务互动减少另一个渠道。在这篇文章中，我将解释什么是聊天插件，它们能做什么，以及你如何用JavaScript建设你本人的聊天插件。这篇文章（或OpenAI所称的"训练数据"）提供了一个疾速入门指南，来建设你的第一个ChatGPT插件，并将其与ChatGPT界面整合。聊天插件是否会成为扭转生存的贾维斯般的体验，或者只是一个低廉的Alexa-for-your-browser，目前还没有定论。让咱们通过看看插件能提供什么，须要留神什么，以及如何制作你本人的插件，来决定咱们本人的想法。目录什么是聊天插件? 插件组成部分聊天插件生态系统的新机遇插件开发的考量和局限构建第一个JavaScript ChatGPT 插件设置我的项目增加OpenAI清单和API标准创立服务器设置强制性的插件路由设置Todo路由验证和测试插件(可选）将该服务器作为代理下一步什么是聊天插件？"聊天插件"容许ChatGPT模型应用并与第三方应用程序互动。从实质上讲，它是一套指令和标准，语言模型能够遵循这些指令和标准在聊天对话中创立API的调用和操作。与第三方零碎的整合为ChatGPT的用户提供了一系列新的性能：创立、更新和批改咱们本人的业务数据和数据库（如销售、营销零碎）从内部服务中获取信息（如金融、天气API）执行操作（例如，发送Slack音讯）插件组成部分建设一个能与AI互动的应用程序仿佛是一个令人生畏的简单零碎，然而，一旦你开始做，你会发现它非常简单。一个"插件"是一套简略的指令，它通知ChatGPT模型你的API是做什么的，以及如何和何时拜访它。这能够归结为两个重要文件： ai-plugin.json：插件清单，蕴含插件的根本元数据。这包含名称、作者、形容、认证和分割等细节。该清单被ChatGPT用来了解插件的作用。openapi.yaml：在OpenAPI标准中，你的API路由和模式的标准。也能够以json文件的模式提供。这将通知ChatGPT能够应用哪些API，出于什么起因，以及申请和响应会是什么样子。插件服务的根底性能和托管由你决定。你的API能够托管在任何中央，应用任何REST API或编程语言。聊天插件生态系统的新机遇聊天插件的到来为开发者、设计师、企业和企业家带来了一系列的机会：交互能够更"聪慧"和更"晦涩" ：插件引入了人性化、假如和上下文的能力，并联合申请提供这些能力。这为互动减少了一个流动性的元素，而这是一个死板的GUI或结构化的数据API所不能满足的。例如，"我明天应该穿外套吗？"这个提醒将导致API调用一个基于你的地位的天气服务，对天气的解释，以及对原始问题的答复："是的，你应该穿一件夹克。明天的温度是12度，有80%的机会下雨。"。新的客户渠道：ChatGPT在2023年4月以1.73亿沉闷用户发明了增长最快的用户记录。毫无疑问，在这个平台上占有一席之地，为你提供了接触大量潜在客户的机会。它还提供了一种潜在的更容易、更直观、更容易与应用它的现有客户互动的形式。人工智能界面（A.I.I.）的崛起：用户当初无需点击"按钮"就能够执行简单的操作。从实践上讲，一个插件能够提供一个惊人的服务，而不须要像传统的用户界面那样须要关注界面才行（或基本不须要）。一个直观的标准可能变得和一个直观的网络应用一样重要。新的商业机会：人工智能在提供工作的同时也会带走工作。如果胜利的话，插件生态系统将为插件开发者、人工智能API开发者，以及为企业托管、认证和治理插件的全新垂直业务发明新的机会和空间。插件开发的考量和局限直观和无代码界面的益处带来了一系列挑战。抵赖生态系统、逻辑和界面会随着工夫的推移而倒退，在构建插件时，咱们依然须要记住一些事件。特地是如果你想把它们作为一项业务来建设。响应速度慢：解释自然语言、抉择插件、建设申请和解释响应都须要工夫。对于简略的信息申请或操作，本人做就能够更快。依据下面的例子，我看一下我的手机主屏幕比期待15秒让ChatGPT解释天气并写给我要快得多。老本高：用户将破费token来与任何插件互动。这减少了潜在的老本，即便你是收费提供给他们的货色。你还必须为托管和经营这些API的基础设施付费。不同形式：在外部，与插件的互动依然是REST API，只能执行咱们与其余客户端雷同的操作。插件更像是一个与企业互动的新渠道，而不是目前让人工智能为咱们服务的新范式。可操纵性：因为用户在默认状况下看不到API响应，误导性信息和其余歹意策略可能会被插件制造商用来扭曲答案。不可预测性：让生成模型负责决策是有危险的，行为是不牢靠的。有很多推理和猜想工作在幕后产生，以依据人类书面聊天提醒创立API申请。打字不标准的信息或含糊不清的形容可能会导致调用谬误的API或做出谬误的口头。构建第一个JavaScript ChatGPT 插件咱们将为咱们的聊天插件建设本人的express服务器。这不仅是一个容易上手的办法，而且express能够被扩大到包含中间件、认证和所有其余你想要的生产级的货色。以下是咱们将在下列步骤中创立和增加代码的所有文件。如果你感到困惑，能够回到这里，或者克隆这里的源码。 my-chat-plugin/├─ .well-known/│ ├─ ai-plugin.json <- 插件元数据├─ routes/│ ├─ todos.js <- 解决Todo申请的路由│ ├─ openai.js <- 解决openAI申请的路由openapi.yaml <- Open API标准index.js <- 插件入口先决条件 OpenAI账号：在这里注册ChatGPT插件拜访：如果你还没有通过付费账户拜访，你能够在这里退出期待名单。设置我的项目创立一个名为my-chat-plugin的文件夹，执行上面的命令来开始： ## 1. Create the directory and open itmkdir my-chat-plugin && cd my-chat-plugin## 2. Initialize a project with the default valuesnpm init --yes## 3. Install our dependenciesnpm install axios express cors js-yaml增加OpenAI清单和API标准当初，咱们要创立所需的聊天插件清单和OpenAPI标准。ChatGPT会在你服务器的特定路由上申请这些文件，所以咱们要把它们放在： ...