前端

前言本篇章是偏了解性的博客，次要讲述在js环境中变量、办法执行形式。了解执行程序，可能更好地帮忙你在开发中解决奇奇怪怪的问题。面试答复1.执行上下文：执行上下文能够简略了解成一个对象，这个对象蕴含变量对象、作用域链、this指向，个别就全局执行上下文和函数执行上下文。 2.变量晋升：变量晋升就是在赋值操作之前，就应用对应的变量，导致变量变成undefined。起因在于执行过程中，首先会建设流动对象，而后构建作用域链，再确定this指向，最初才是代码执行。创立变量或者函数的步骤都在建设流动对象阶段，而赋值操作是在代码执行阶段，所以才会找不到。 3.this：this永远指向函数运行时所在的对象，而不是函数被创立时所在的对象。扭转this指向通常有三种办法，bind、call、apply，bind会返回一个新函数 ，call在扭转this指向后还执行了函数，且可能接管多个参数，而apply与call的区别在于apply接管数组作为传入参数。 4.手写apply：首先判断传入的参数是否为值类型，如果是值类型，则间接返回该值类型，如果是援用类型，则给该参数增加fn属性用来保留以后this，这个this指向以后的调用函数。下一步判断是否存在其余参数，如果有就将它开展，并将它作为参数传入到下面的this函数中，并把执行后果保留到result里，而后删除fn属性，并返回result。至于call与apply的区别在于传入的参数不一样，bind与apply的区别在于bind返回一个新函数并不执行。 5.事件循环（Event Loop）：事件循环是浏览器的一种解决JS单线程运行时不阻塞的机制，具体流程是这样的：1、首先所有同步工作都在主线程上执行，造成一个执行栈。2、如果遇到了异步工作，就丢到主线程外的工作队列，等异步工作有后果后，就会转移到调用栈中。3、再而后执行栈中所有同步工作执行结束，就会读取调用栈，如果有工作就丢到执行栈，开始执行这个工作中同步工作。4、最初主线程一直反复下面的几个步骤，这就是事件循环的一个机制。从执行程序上来看，就是一个主线程 > 微工作 > 宏工作，有后果 > 宏工作，无后果的程序。 知识点javascript函数执行过程次要由创立执行环境、进入函数调用栈、执行、销毁这四个阶段形成，上面咱们来一一了解每一个阶段所做的事件。 1.创立执行环境执行环境，也就是执行上下文，分为全局环境、函数环境、Eval 函数执行环境。 全局环境指的是JS默认的代码执行环境，是最外围的一个执行环境，在web浏览器中，全局执行环境被认为是window对象。一旦代码被载入，引擎最先进入的是这个环境，全局环境不会被主动回收，只有在敞开浏览器窗口的时候才会被销毁，所以在定义全局变量肯定要分外小心。 函数环境是一个绝对于全局环境的概念，因为在执行代码时，线程就是在全局环境和函数环境之间来回穿梭的，能够简略了解为函数环境即任何一个函数被调用都会创立一个新的执行环境，执行完结后返回全局环境，而创立的函数环境期待垃圾回收。 Eval 函数执行环境不常常用，尽量避免，这里不做探讨。 2.函数调用栈在创立执行环境后，函数/代码下一个阶段会被放入一个栈中，这个栈被称为函数调用栈。js依据函数的调用(执行)来决定执行程序。函数调用栈的栈底永远都是全局环境，而栈顶就是以后正在执行函数的环境。当栈顶的执行环境执行完之后，就会出栈，并把执行权交给之前的执行环境。举例： function A(){ console.log("this is A"); function B(){ console.log("this is B"); } B();}A();1.首先 A() ;A 函数执行了，A执行环境入栈。2.A函数执行时，又调用了 B()，B又执行了，B入栈。3.B中没有可执行的函数了，B执行完出栈。4.继续执行A， A中没有可执行的函数了，A执行完 出栈。 上述例子只是为了说明函数调用栈的作用，具体的执行过程，包含执行上下文、作用域链、this指向等操作是在执行过程产生的。 3.执行过程当函数被调用时，会创立一个新的函数执行环境，该创立过程次要由两个阶段组成：建设阶段 、代码执行阶段 A. 建设阶段(产生在调用/执行一个函数时，然而在执行函数外部的具体代码之前) 1.建设流动对象 2.构建作用域链 3.确定this的指向B. 代码执行阶段 1.执行函数外部的具体代码接下来，咱们一一了解其中的步骤： A.1. 建设流动对象这里咱们首先了解两个概念：变量对象(Variable object，VO) 、流动对象(Activation object) 变量对象(Variable object，VO) 是一个与执行上下文相干的非凡对象，在函数上下文中，VO是不能间接拜访的。变量对象用来存储上下文的函数申明、 函数形参、变量申明。优先级：函数申明>函数的形参>变量。 函数申明：每找到一个函数申明，就在流动对象上面用函数名建设一个属性，属性值就是指向该函数在内存中的地址的一个援用,如果上述函数名曾经存在于流动对象下，那么则会被新的函数援用所笼罩。 函数形参：建设arguments对象，查看以后上下文中的参数，建设该对象下的属性以及属性值 。没有实参的话，属性值为undefined。 变量申明：每找到一个变量申明，就在流动对象上面用变量名建设一个属性，该属性值为undefined。如果变量名称跟曾经申明的形式参数或函数雷同，则变量申明不会烦扰曾经存在的这类属性。 流动对象(Activation object，AO)：因为变量对象不能拜访，在函数执行阶段，由变量对象转化而来的可拜访对象。 举例： var a = 10;function b () { console.log('全局的b函数')};function bar(a, b) { console.log('1', a, b) var a = 1 function b() { console.log('bar下的b函数') } console.log('2', a, b) }bar(2, 3)console.log('3', a, b)解析：我这边的了解跟参考资料有所不同，望斧正。 ...

周刊首发于微信公众号“写代码的宝哥”，欢送各位前端小伙伴前来关注！ 快讯 间隔 jQuery 1.0 公布已过来 17 年Node 20.6.0 将内置 .env 文件反对：node -env-file=.env index.js文章 Use web components for what they’re good at。这篇文章是对 If Web Components are so great, why am I not using them? 的回应，Web Components 并不是一无是处，它有本人善于的某些方面，咱们要取长补短，充分利用好 Web Components 技术Shadow DOM: Not by Default - Enhance 是一个 HTML FIRST 的全栈 Web 框架（相似 htmx），团队成员 Simon MacDonald 解释为什么没有把 Shadow DOM 作为默认配置应用WebAssembly: byte-code of the future - 本文介绍了 WebAssembly（.wasm）的基本概念、根本应用（浏览器和 Node 端）及将来瞻望 Deep Dive: Caching and Revalidating - 深刻学习 Next.js App Router 构造下缓存及校验原理，作为官网文档 Caching in Next.js 的补充Using TypeScript in React - React 官网文档减少了 TypeScript 章节。深入浅出地介绍了 TypeScript 与 React 联合应用的所有常识，十分有用On React Suspense’s throttling - 在这篇文章中，作者讲述了嵌套 Suspense 组件时会呈现的一些奇怪行为（作者 Andrei Gătej 的集体博客近期都是议论 React 方面比拟深刻的话题，值得一读）Building a Two-Way Data Binding Hook for Form Inputs in React - 作者介绍了如何在 React 中通过 Hook 来实现与 Vue 中 v-model 类似的双向数据绑定成果️ React Query With The App Router - 11 分钟的视频介绍 React Query v5 是如何在 Next.js 的 App Router 架构中工作的 ...

明天咱们看一道 leetcode hard 难度题目：地下城游戏。 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。咱们勇敢的骑士最后被安置在 左上角 的房间里，他必须穿过地下城并通过反抗恶魔来援救公主。 骑士的初始衰弱点数为一个正整数。如果他的衰弱点数在某一时刻降至 0 或以下，他会立刻死亡。 有些房间由恶魔守卫，因而骑士在进入这些房间时会失去衰弱点数（若房间里的值为负整数，则示意骑士将损失衰弱点数）；其余房间要么是空的（房间里的值为 0），要么蕴含减少骑士衰弱点数的魔法球（若房间里的值为正整数，则示意骑士将减少衰弱点数）。 为了尽快拯救公主，骑士决定每次只 向右 或 向下 挪动一步。 返回确保骑士可能援救到公主所需的最低初始衰弱点数。 留神：任何房间都可能对骑士的衰弱点数造成威逼，也可能减少骑士的衰弱点数，包含骑士进入的左上角房间以及公主被监禁的右下角房间。 <img width=400 src="https://user-images.githubusercontent.com/7970947/263517730-f0614372-02c5-4ddf-8ffe-5410ffa3a68b.png"> 输出：dungeon = [[-2,-3,3],[-5,-10,1],[10,30,-5]] 输入：7 解释：如果骑士遵循最佳门路：右 -> 右 -> 下 -> 下 ，则骑士的初始衰弱点数至多为 7 。 思考挺像游戏的一道题，首先只能向下或向右挪动，所以每个格子能够由下面或右边的格子挪动而来，很天然想到能够用动静布局解决。 再想一想，该题必须遍历整个地下城而无奈取巧，因为最低衰弱点数无奈由部分数据算出，这是因为如果不把整个地下城走完，必定不晓得是否有更优路线。 动静布局二维迷宫用两个变量 i j 定位，其中 dp[i][j] 形容第 i 行 j 列所需的最低 HP。 但最低所需 HP 无奈推断出是否能继续前进，咱们还得晓得以后 HP 才行，比方： // 从左到右走3 -> -5 -> 6 -> -9在数字 6 的地位所需最低 HP 是 3，但咱们必须晓得在 6 时勇者残余 HP 能力判断 -9 会不会间接导致勇者挂了，因而咱们将 dp[i][j] 后果定义为一个数组，第一项示意以后 HP，第二项示意初始所需最低 HP。 ...

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。在独立游戏开发中，音频不仅仅是视听体验的一部分，更是情感、气氛和互动的要害元素。然而，随着我的项目的复杂性减少，无效地治理和管制音频资源变得至关重要。这就是音频管理器发挥作用的中央。音频管理器是开发框架中的一个不可或缺的组成部分，它为开发人员提供了一种有序且可扩大的形式来解决音频资源。通过加载、播放、进行和管制音频，音频管理器不仅使得音频的集成变得更加简略，还可能加强用户对游戏的沉迷式体验。 什么是音频管理器音频管理器是一个组件或模块，用于治理游戏或应用程序中的音频资源。它提供了一种结构化的形式来加载、播放、暂停、进行和治理音频文件，从而使开发人员可能更轻松地管制音频的各个方面。音频管理器通常蕴含了以下性能： 加载音频资源： 音频管理器容许开发人员预加载游戏中须要用到的音频文件。这样能够在游戏运行时防止提早，进步游戏性能和响应速度。播放和管制音频： 音频管理器容许开发人员在适当的时候播放音频文件。它提供了播放、暂停、进行和从新播放等管制性能，以便在游戏中依据须要管制音频的状态。音频混合： 在一些状况下，游戏可能须要同时播放多个音频，例如背景音乐、音效和语音。音频管理器能够提供音频混合性能，确保不同音频之间的均衡和协调。循环播放： 音频管理器通常容许指定某个音频是否应该循环播放，以便实现背景音乐或继续的音效。音量和音效管制： 音频管理器容许开发人员管制音频的音量大小，以及利用音频成果，如淡入淡出和立体声成果。内存治理： 音频管理器可能会实现内存管理策略，以便在不须要的时候开释不再应用的音频资源，以节俭内存。音频管理器的重要性独立游戏开发框架中的音频管理器扮演着至关重要的角色，它不仅可能加强游戏的声音成果，还可能晋升用户的游戏体验和互动性。以下是音频管理器在独立游戏开发框架中的重要性： 加强游戏气氛： 音频管理器使游戏开发者可能将背景音乐、环境音效和音效特效融入游戏中，从而发明出更加实在和引人入胜的游戏世界。适时的音频能够营造出情感、紧张感或喜悦，晋升玩家的沉迷式体验。减少互动性： 音频管理器使玩家与游戏之间的互动更加活泼。例如，在玩家实现工作或取得成就时播放特定音效，能够激发玩家的成就感和满足感。发明独特标识： 通过精心抉择和设计的音频，游戏能够塑造独特的品牌标识。玩家能够通过游戏中特定的音效和音乐来辨认和记忆游戏，这有助于建设游戏的名誉和认知度。提供疏导和反馈： 音频管理器能够用于提供玩家行为的疏导和反馈。例如，在须要玩家注意力的中央播放声音，或在玩家出错时播放提示音，帮忙玩家更好地了解游戏规则和机制。音频交互性： 一些独立游戏可能依赖于音频交互性，即玩家的声音和音调会影响游戏中的事件或互动。音频管理器能够帮忙实现这种独特的游戏机制。节俭开发工夫： 音频管理器提供了一种标准化的形式来解决音频，从而节俭了开发人员在每个音频实例中反复编写播放逻辑的工夫。优化性能： 音频管理器能够无效地解决音频资源的加载和开释，帮忙缩小内存应用并进步游戏的性能。音频管理器的实现1.新建脚本AudioMgr新建脚本AudioMgr，设置默认音量大小，依据本地存储内容设置音乐和音效的开关： 2.播放和进行音效通过引擎提供的接口cc.audioEngine.playEffect和cc.audioEngine.stopEffect实现： 3.播放和进行背景音乐通过引擎提供的接口cc.audioEngine.playMusic和cc.audioEngine.stopMusic实现： 4.设置和获取开启状态设置和获取音乐和音效的开启状态，通过cc.sys.localStorage.setItem和cc.sys.localStorage.getItem设置和获取本地存储： 5.设置和获取音量通过cc.audioEngine.setMusicVolume和cc.audioEngine.setEffectsVolume接口设置音量： 6.简略编辑一下测试UI 7.编写测试代码 8.增加测试资源 9.成果演示 总结音频管理器在独立游戏开发框架中是不可或缺的。它可能晋升游戏的可玩性、用户体验和互动性，同时也可能优化资源管理和开发效率。通过正当地利用音频管理器，开发者能够为他们的游戏注入更多的创意和生机。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。音频管理器的介绍。音频管理器的重要性。源码通过关注“亿元程序员”发送"AudioMgr"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把文章分享给你感觉有须要的其余小伙伴。谢谢。

本文由 Deguang 发表于 码路-技术博客什么是ARTS打卡？Algorithm 算法70. 爬楼梯 思路1：通过递归计算，但当数值大时反复计算过多容易超时；function climbStairs(n: number): number { if (n <= 2) return n; return climbStairs(n - 1) + climbStairs(n - 2);};思路2：爬到第n层楼梯，能够从第n-1层爬一阶楼梯或者从第n-2层爬两阶楼梯，即f(n) = f(n-1) + f(n-2)，也就是斐波那契数列function climbStairs(n: number): number { if (n <= 2) return n; const temp: number[] = [1, 2]; for (let i = 2; i < n; i++) { temp[i] = temp[i - 1] + temp[i - 2]; } return temp[n - 1];};83. 删除排序链表中的反复元素 循环判断以后值与下一项的值，判断是否跳过function deleteDuplicates(head: ListNode | null): ListNode | null { let cur = head while(cur && cur.next !== null) { if(cur.val === cur.next.val) { cur.next = cur.next.next; } else { cur = cur.next; } } return head;};Review 英文浏览Article: ...

原型链继承原型链继承是比拟常见的继承形式之一，其中波及的构造函数、原型和实例，三者之间存在着肯定的关系，即每一个构造函数都有一个原型对象，原型对象又蕴含一个指向构造函数的指针，而实例则蕴含一个原型对象的指针。例如： function Parent1() { this.name = 'parent1'; this.play = [1, 2, 3]}function Child1() { this.type = 'child2';}Child1.prototype = new Parent1();console.log(new Child1());下面的代码其实有一个潜在的问题，例如： var s1 = new Child1();var s2 = new Child1();s1.play.push(4);console.log(s1.play);console.log(s2.play);执行后果如下： 当我批改了s1的play属性的时候，s2的play属性也跟着变了，因为两个实例应用的是同一个原型对象。它们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行了变动，这就是应用原型链继承形式的一个毛病。 构造函数继承(借助 call)function Parent1(){ this.name = 'parent1';}Parent1.prototype.getName = function () { return this.name;}function Child1(){ Parent1.call(this); this.type = 'child1'}let child = new Child1();console.log(child); // 没问题console.log(child.getName()); // 会报错运行后果如下： 除了 Child1 的属性 type 之外，也继承了 Parent1 的属性 name。这样写的时候子类尽管可能拿到父类的属性值，解决了第一种继承形式的弊病，但问题是，父类原型对象中一旦存在父类之前本人定义的办法，那么子类将无奈继承这些办法。 因而构造函数实现继承的优缺点，它使父类的援用属性不会被共享，优化了第一种继承形式的弊病；然而随之而来的毛病也比拟显著——只能继承父类的实例属性和办法，不能继承原型属性或者办法。 组合继承(前两种组合)这种形式联合了前两种继承形式的优缺点，联合起来的继承，代码如下： function Parent3 () { this.name = 'parent3'; this.play = [1, 2, 3]; } Parent3.prototype.getName = function () { return this.name; } function Child3() { // 第二次调用 Parent3() Parent3.call(this); this.type = 'child3'; } // 第一次调用 Parent3() Child3.prototype = new Parent3(); // 手动挂上结构器，指向本人的构造函数 Child3.prototype.constructor = Child3; var s3 = new Child3(); var s4 = new Child3(); s3.play.push(4); console.log(s3.play); // 不相互影响 console.log(s4.play); console.log(s3.getName()); // 失常输入'parent3' console.log(s4.getName()); // 失常输入'parent3'后果如下： ...

类型守卫概述在 TypeScript 中，类型守卫能够用于在运行时查看变量的类型，并在代码块外部将变量的类型范畴放大到更具体的类型。这种类型收窄能够让 TypeScript 编译器更好地了解咱们代码的用意，从而提供更精确的类型推断和类型查看。 类型守卫通常应用类型断言、类型谓词、typeof 操作符、instanceof 操作符或自定义的谓词函数来判断变量的具体类型，并依据判断后果收窄变量的类型范畴。 typeof 类型守卫typeof 类型守卫容许咱们应用 typeof 操作符来在代码中依据变量的类型范畴进行条件判断。 function printValue(value: string | number) { if (typeof value === 'string') { console.log(value.toUpperCase()); } else { console.log(value.toFixed(2)); }}printValue('hello'); // 输入: HELLOprintValue(3.1415); // 输入: 3.14在下面的示例中，咱们应用 typeof 操作符在条件语句中查看变量 value 的类型。如果它的类型是 'string'，则调用 toUpperCase 办法；如果是 'number'，则调用 toFixed 办法。通过应用 typeof 类型守卫，咱们可能依据不同的类型执行不同的代码逻辑。 instanceof 类型守卫instanceof 类型守卫容许咱们应用 instanceof 操作符来查看对象的类型，并在代码块外部收窄对象的类型范畴。 class Animal { move() { console.log('Animal is moving'); }}class Dog extends Animal { bark() { console.log('Dog is barking'); }}function performAction(animal: Animal) { if (animal instanceof Dog) { animal.bark(); } else { animal.move(); }}const animal1 = new Animal();const animal2 = new Dog();performAction(animal1); // 输入: Animal is movingperformAction(animal2); // 输入: Dog is barking在下面的示例中，咱们应用 instanceof 操作符在条件语句中查看变量 animal 的类型。如果它是 Dog 类的实例，则调用 bark 办法；否则调用 move 办法。通过应用 instanceof 类型守卫，咱们能够依据对象的具体类型执行不 ...

文件系统规范（File System Standard）引入了源公有文件系统（origin private file system，OPFS），作为页面源公有的、用户不可见的存储端点，它提供了对一种非凡文件（a special kind of file）的可选拜访，并对性能进行了高度优化。 庆贺 源公有文件系统容许网络应用程序在本人特定的源虚构文件系统中存储和操作文件，包含低级文件操作、逐字节拜访和文件流。所有次要浏览器都反对源公有文件系统。浏览器反对源公有文件系统被古代浏览器反对，并由网络超文本应用程序技术工作组（WHATWG）标准化为 File System Living Standard。 动机提到计算机上的文件，你可能会想到这样的文件层次结构：文件被组织在文件夹中——你能够用操作系统的文件资源管理器来查看。例如，在 Windows 上，对于一个名为 Tom 的用户，他的待办事项列表可能位于 C:\Users\Tom\Documents\ToDo.txt。在这个示例中，ToDo.txt 是文件名，Users、Tom 和 Documents 是文件夹名。Windows 上的 C:\ 示意驱动器的根目录。 在本文中，我交替应用文件夹和目录这两个术语，而疏忽了文件系统概念（目录）和图形用户界面隐喻（文件夹）之间的区别。在 Web 上解决文件的传统形式若要在网络应用程序中编辑待办事项列表，这是传统的流程： 用户将文件上传到服务器，或在客户端应用 <input type="file"> 关上文件。用户进行编辑，而后通过 JavaScript 以编程形式对注入的 <a download="ToDo.txt"> 执行 click() 办法来下载生成的文件。要关上文件夹，能够应用 <input type="file" webkitdirectory>，只管该属性的名称具备公有前缀，但实际上失去了浏览器的广泛反对。在 Web 上解决文件的古代形式这种流程并不代表用户编辑文件的思维形式，这意味着用户最终只能下载其输出文件的正本。因而，文件系统拜访 API（File System Access API）引入了三个选择器办法——showOpenFilePicker()、showSaveFilePicker() 和 showDirectoryPicker()，它们的性能和名称一样（译注：它们的性能顺次为关上文件、保留文件和关上目录）。通过它们，能够以如下的流程来解决文件： 应用 showOpenFilePicker() 关上 ToDo.txt，失去一个 FileSystemFileHandle 对象。通过调用文件句柄 FileSystemFileHandle 对象的 getFile() 办法获取 File。编辑文件，而后在句柄上调用 requestPermission({ mode: 'readwrite' })。如果用户承受权限申请，则将更改保留回原始文件。或者，调用 showSaveFilePicker() 让用户抉择一个新文件。 （如果用户抉择的是之前关上的文件，其内容将被笼罩。）对于反复保留，能够保留文件句柄，这样就不用再次显示文件保留对话框。在 Web 上解决文件的限度通过这些办法拜访的文件和文件夹位于用户可见文件系统中。从网络上保留的文件，特地是可执行文件，都会被打上网络标记，因而在潜在危险文件被执行之前，操作系统会显示额定的正告。作为一项额定的平安性能，从网络上获取的文件也会受到平安浏览的爱护，为简略起见，在本文中，你能够将其视为基于云的病毒扫描。当应用文件系统拜访 API 向文件写入数据时，写入不是就地写入，而是会应用临时文件。除非通过所有这些安全检查，否则文件自身不会被批改。能够设想，即便在 macOS 等零碎上尽可能地进行了优化，但这些查看还是让文件操作变得绝对迟缓。尽管如此，每个 write() 调用都是独立的，因而它在后盾会关上文件，查找到给定的偏移量，并最终写入数据。 ...

读过这篇文章《用Node.js吭哧吭哧撸一个静止主页》的同学必定晓得，前段时间我搭了一个静止页面。当初我有个想法就是把它用Docker打包镜像推送到Docker官网仓库，像《前端切图仔入门Docker，三分钟上线本人的博客平台》文章中搭建博客零碎一样，提供一个静止主页的Docker镜像，不便有想法的同学三分钟部署本人的静止主页。 什么是动态文件服务器作为前端搬砖工，肯定接触过动态文件服务器。动态文件服务器它的工作是将动态文件通过http/https传输给客户端。动态文件又是什么？动态文件是指内容不须要动静生成的文件，如：图片、CSS文件、JS文件等等文件。咱们罕用的动态文件服务器有webpack-dev-server这也是为什么咱们能在本地开发环境能够通过链接拜访页面的起因，还有就是Nginx，个别线上环境应用它，因为它性能更加高效、稳固。 静止主页简略，齐全没必要在Docker打包时再下载Nginx镜像打包进去，间接用Node.js实现动态文件服务器的性能即可。 性能介绍我须要的动态服务器只须要一个性能： 当用户申请的内容是文件时，返回文件内容我的项目动态文件构造是这样的： client├─src│ └─js文件└─index.html具体文件构造请拜访仓库地址。 启动我的项目拉取我的项目： git clone https://github.com/CatsAndMice/keep下载依赖： npm i 创立.env文件，写入Keep帐号、明码： MOBILE="Keep帐号"PASSWORD="Keep明码"最初，执行npm run serve，我的项目即可启动。当咱们间接拜访 http://localhost:3000就能拜访index.html文件，index.html文件内容如下： 代码实现依据上文的需要形容，咱们先用流程图来设计一下咱们的逻辑如何实现: 动态文件服务器的实现思路还是很简略的：先判断资源存不存在，不存在就间接报错，资源存在的话依据资源的类型返回对应的后果给客户端就能够了。 Express实现静止主页非常简单，很多动态JS、图片文件已搁置在云端，index.html文件只援用了一份本地的JS文件。不论是什么申请形式，当有申请门路存在/src时都会走app.all('/src/*',()⇒{...})。 不同的动态文件对应不同的申请头Content-Type值，如：JS文件对应application/javascript 、CSS文件对应text/css等等，点Content-Type类型能够查看还有哪些值。 Content-Type 标头目标是为了通知客户端理论返回的内容的内容类型，以便客户端根据文件类型进行解析。 const express = require('express');const { getTotal, getFirstPageRecentUpdates } = require("./src")const { to } = require('await-to-js');const path = require('path');const fs = require('node:fs')const app = express();const port = 3000;//获取client文件夹的绝对路径const htmlPath = path.join(__dirname, './client');//申请头Content-Type值const contentType = { '.js': 'application/javascript;charset=utf8'}//省略其余逻辑//门路存在"/src"，执行下列代码块逻辑app.all('/src/*', (req, res) => { const { url } = req; const filePath = htmlPath + url; //判断文件是否存在 if (fs.existsSync(filePath)) { const extname = path.extname(filePath); res.setHeader('Content-Type', contentType[extname]); const content = fs.readFileSync(filePath); res.send(content); return } //不存在，浏览器状态码返回404 res.sendStatus('404')})//拜访http://localhost:3000时，执行这部分逻辑返回index.html内容app.get('/', async (req, res) => { res.setHeader('Content-Type', 'text/html;charset=utf8'); const readHtmlPath = htmlPath + '/index.html' const html = fs.readFileSync(readHtmlPath) res.send(html)})app.listen(port, () => { console.log('服务已开启');})写一个能用的动态文件服务器还是简略的，这里依赖Express框架不便得多。原生模块实现有趣味的同学能够去写写。 ...

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。在独立游戏开发中，事件管理器是一个不可或缺的组件。它为开发者提供了一种灵便的形式来解决游戏外部各种状态变动和用户交互，实现模块之间的解耦和通信。 什么是事件管理器游戏开发中的事件管理器是一种用于解决游戏外部模块之间通信和交互的工具或零碎。它容许游戏中的不同元素、对象或零碎可能互相告诉和响应事件，从而实现游戏逻辑的交互和动态变化。事件管理器在游戏开发中扮演着要害的角色，有助于升高代码耦合度，进步代码的可维护性和可扩展性，同时也使得游戏的开发过程更加灵便和高效。 在游戏开发中，许多不同的对象和模块须要进行通信，例如玩家输出、游戏外部状态变动、碰撞检测等。事件管理器提供了一个中心化的机制，使得这些对象和模块可能通过发送和监听事件来进行通信，而不用间接依赖彼此的具体实现细节。这有助于缩小代码之间的依赖性，使得游戏开发者能够更加专一于单个模块的设计和开发，从而进步代码的可维护性。 事件管理器通常基于观察者模式（Observer Pattern）实现。核心思想是，一个事件管理器保护了一系列观察者（监听器），当某个事件产生时，它会告诉所有注册了该事件的观察者，从而触发相应的回调函数或操作。这样，游戏中的不同模块能够通过监听事件来实现通信和合作，而无需间接援用或调用彼此的办法。 例如，在一个角色扮演游戏中，玩家可能管制一个角色进行挪动。当玩家按下挪动键时，游戏能够应用事件管理器发送一个“挪动事件”，而后角色管制模块能够监听这个事件并响应，使得角色依照玩家的输出进行挪动。 事件管理器的重要性模块解耦与复用： 在独立游戏开发中，游戏逻辑往往由多个模块组成，如玩家管制、敌人行为、关卡切换等。事件管理器可能使这些模块之间解耦，从而缩小依赖关系，使得每个模块可能独立存在、批改和复用，进步代码的可维护性。灵便的通信机制： 事件管理器为开发者提供了一种灵便的通信机制，不同模块能够通过订阅事件来监听特定类型的音讯。这意味着开发者能够在游戏运行时动静增加或移除事件监听器，实现实时的交互和反馈。逻辑集中管理： 游戏中的各种逻辑事件，如玩家取得道具、工作实现、游戏胜利等，都能够通过事件管理器进行集中管理。这样一来，开发者能够更清晰地掌控整个游戏的流程和状态变动。疾速迭代与测试： 事件管理器的应用使得开发者可能更加疾速地进行迭代和测试。通过模仿不同事件的触发，开发者能够更不便地验证游戏逻辑是否正确，放慢开发周期。多平台适应： 在独立游戏开发中，很多游戏可能须要适配不同平台，如PC、挪动设施、主机等。事件管理器能够帮忙开发者在不同平台上更好地治理游戏逻辑，缩小平台适配的工作量。事件管理器的设计准则公布-订阅模型： 事件管理器应该基于公布-订阅模型，其中对象能够订阅特定类型的事件，并在事件产生时接管告诉。事件类型： 开发者应该可能定义各种自定义的事件类型，以适应不同的游戏逻辑需要。灵活性： 事件管理器应该具备灵活性，容许多个订阅者监听同一事件，以及订阅者能够选择性地勾销订阅。数据传递： 事件管理器应该可能传递事件相干的数据，以便订阅者能够依据事件情境进行响应。事件管理器的实现1.新建脚本EventMgr继承cc.EventTarget在Cocos Creator中，cc.EventTarget 是一个用于事件处理的类。它提供了一种机制，容许您在不同的对象之间发送和接管事件，以便实现解耦和更好的交互性。因而咱们只须要继承它而后封装一下就能简略实现事件管理器。 2.创立事件管理器单例因为事件管理器要害的内容引擎曾经帮咱们实现了,那么咱们只须要简略地继承一下，而后以单例的模式，使得更不便地调用。 3.封装接口订阅事件。 订阅事件(仅订阅1次)，通过该接口订阅的事件，在接管一次之后主动勾销订阅。 删除订阅，通过该接口能够删除任意一个已订阅的事件。 删除指标的所有订阅。通过该接口能够删除指标所有已订阅的事件。 派发事件。所有订阅了指定事件的指标将会接管到事件，并能够作出响应。 4.成果演示测试on和once接口： 测试通过，once接口在第一次接管到事件后隐没，不会接管到第二次事件： 测试off接口： 测试通过，勾销订阅之后不会再接管到该事件： 测试targetOff接口： 测试通过，勾销指标订阅的所有事件后不会再收到事件： 总结代码整洁之道在于解耦，事件管理器有助于各模块代码之间最大水平地解耦，进步代码的可维护性。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。事件管理器的介绍。事件管理器的重要性。事件管理器的设计准则。源码通过关注“亿元程序员”发送"EventMgr"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把文章分享给你感觉有须要的其余小伙伴。谢谢。

泛型和类型体操泛型和类型体操（Type Gymnastics）是 TypeScript 中高级类型零碎的重要组成部分。它们提供了弱小的工具和技巧，用于解决简单的类型操作和转换。 泛型（Generics）1. 泛型函数泛型函数容许咱们在函数定义中应用类型参数，以便在函数调用时动静指定类型。例如： function identity<T>(arg: T): T { return arg;}let result = identity<number>(42); // result 的类型为 number在下面的示例中，identity 函数应用类型参数 T，并返回与输出类型雷同的值。通过显式传递泛型参数，咱们能够确保在函数调用时指定了具体的类型。 2. 泛型接口泛型接口容许咱们在接口定义中应用类型参数，以便在实现该接口时指定具体的类型。例如： interface Container<T> { value: T;}let container: Container<number> = { value: 42 };在下面的示例中，咱们定义了一个泛型接口 Container，它蕴含一个类型参数 T。通过指定 Container<number>，咱们创立了一个具体的实现，其中的 value 属性类型为 number。 3. 泛型类泛型类容许咱们在类定义中应用类型参数，以便在创立类的实例时指定具体的类型。例如： class Stack<T> { private items: T[] = []; push(item: T) { this.items.push(item); } pop(): T | undefined { return this.items.pop(); }}let stack = new Stack<number>();stack.push(1);stack.push(2);let item = stack.pop(); // item 的类型为 number | undefined在下面的示例中，咱们定义了一个泛型类 Stack，它应用类型参数 T 来示意堆栈中的元素类型。通过创立 Stack<number> 的实例，咱们限度了堆栈中的元素必须为 number 类型。 ...

规范化是咱们践行前端工程化中重要的一部分。 为什么要有规范化规范俗话说，无规矩不成方圆，尤其是在开发行业中，更是要有谨严的工作态度，咱们都晓得大多数软件开发都不是一个人的工作，都是须要多人协同的，而不同的开发者有不同的编码习惯和爱好，这些集体的爱好并没有什么不好的中央，只是说同一个我的项目中，每一个人的爱好都不雷同，那么就会导致我的项目的保护老本大大增加，所以说咱们须要为每个我的项目或者团队须要明确对立的规范，让我的项目或团队中的成员依照对立的规范去实现工作，从而防止各种不对立而带来的麻烦。那么晓得了为什么规范化规范之后，那么看一下在开发过程中，哪些地方用到规范化规范的。 代码、文档、甚至是提交的日志开发过程中人为编写的内容其中代码的标准化标准最为重要，因为代码的标准很大水平上决定着代码的品质以及可维护性，为了便于前期保护以及其余成员的浏览，个别状况下咱们都对代码的格调进行对立的要求。实现规范化的办法咱们在落实规范化的规范的时候也很简略，只须要提前约定好一个执行的规范，而后依照规范各自执行各自的开发工作。最初在Code Review环节依照之前约定的规范去查看各自相应的代码，然而依照人为约定的形式执行规范化会有很多的问题，一来人为束缚不牢靠，二来开发者也很难记住规定。所以咱们就须要绝对应的工具做保障，相比人为的查看，工具的查看更为牢靠，同时配合自动化的工具进行自动化查看，这样就能失去品质化的保障。将工具查看代码标准的过程称为lint，例如前端常见的eslint、stylelint等。 常见的规范化实现形式ESLint工具应用定制ESLint校验规定ESLint对TypeScript的反对ESLint联合自动化工具或者Webpack进行我的项目自动化校验基于ESLint的衍生工具Stylelint工具的应用ESLint介绍EsLint是目前最为支流的JavaScript Lint工具，专门用于检测JS代码品质，通过ESLint很容易对立开发者的编码格调，例如：缩进、换行、分号以及空格之类的应用。不仅如此，EsLint还能帮忙咱们找到代码中不合理的中央，例如咱们定义了一个从未应用的变量，或者在变量应用之后才去做申明等等，而这些不合理的操作就是代码中潜在的问题，通过EsLint能无效防止这些问题，从而进步代码的品质。 对于 JavaScript 这种动静、宽松类型的语言来说，开发者更容易犯错。因为 JavaScript 不具备先天编译流程，往往会在运行时裸露谬误，而 Linter，尤其最具代表性的 ESLint 的呈现，容许开发者在执行前发现代码谬误或不合理的写法。 ESLint 最重要的几点哲学思想： 所有规定都插件化所有规定都可插拔（随时开关）所有设计都透明化应用 Espree 进行 JavaScript 解析应用 AST 剖析语法想要顺利执行 ESLint，还须要装置利用规定插件。那么如何申明并利用规定呢？在根目录中关上 .eslintrc 配置文件，咱们在该文件中退出： { "rules": { "semi": ["error", "always"], "quote": ["error", "double"] }}semi、quote 就是 ESLint 规定的名称，其值对应的数组第一项能够为：off/0、warn/1、error/2，别离示意敞开规定、以 warning 模式关上规定、以 error 模式关上规定。 off/0：敞开规定warn/1：以 warning 模式关上规定error/2：以 error 模式关上规定同样咱们还会在 .eslintrc 文件中发现： { "extends": "eslint:recommended"}这行示意 ESLint 默认的规定都将会被关上。当然，咱们也能够选取其余规定汇合，比拟闻名的有： Google JavaScript Style GuideAirbnb JavaScript Style Guide留神，上文中 .eslintrc 文件咱们采纳了 .eslintrc.js 的 JavaScript 文件格式，此外还能够采纳 .yaml、.json、yml 等格局。如果我的项目中含有多种配置文件格式，优先级程序为： ...

构建工具概念及作用打包:将咱们写的浏览器不意识的代码解决的过程就叫做打包，打包实现当前会给咱们一个浏览器能够意识的文件。 构建工具做的工作1.模块化开发反对:反对间接从node_modules里引入代码 + 多种模块化反对；2.解决代码兼容性:比方babel语法降级，less,ts 语法转换(不是构建工具做的，构建工具将这些语法对应的解决工具集成进来自动化解决)；3.进步我的项目性能:压缩文件，代码宰割；4.优化开发体验:热更新：构建工具会帮你主动监听文件的变动，当文件变动当前主动帮你调用对应的集成工具进行从新打包，而后再浏览器从新运行(整个过程叫做热更新，hot replacement)；跨域问题：解决开发服务器跨域的问题，用react-cli create-react-element vue-cli 解决跨域的问题。 webpack和vite比照webpack须要先把依赖解析完，才开启服务器Vite先开启服务器，按需解析依赖。因为webpack反对多种模块化，他一开始必须要对立模块化代码，所以意味着他须要将所有的依赖全副读一遍；vite是基于es modules的，侧重点不一样，webpack更多的关注兼容性，而vite关注浏览器端的开发体验。 Vite做了哪些工作依赖预构建首先vite会找到对应的依赖，而后调用esbuild(对JS语法进行解决的一个库)，将其余标准的代码转换成esmodule标准，而后放到当前目录下的node_modules/.vite/deps，同时对esmodule标准的各个模块进行对立集成1. 将文件转为规范格局； 门路转为对立门路；引入第三方文件import改到index.js中，防止浏览器加载。依赖预构建解决了3个问题:1. 不同的第三方包会有不同的导出格局(vite没法的束人家)； 对门路的解决上能够间接应用.vite/deps，不便门路重写；网络多包传输的性能问题(也是原生esmodule标准不敢反对node_modules的起因之一)，有了依赖预构建无论有多少个额定的export和import，vite都会尽可能的将他们进行集成，最初只生成一个或者几个模块。//js文件export { default as a } from '.a.js'//vite重写后function a( ){}vite解决.vue文件服务端遇到了以 vue 后缀结尾的文件时，在服务端会去读取这个文件，而后去查找 template，script 等关键字，最初以字符串的模式去解决截取替换等，而后最重要的是在返回的时候 设置相应类型，最初让浏览器强制以 js 的模式去解决。 https://juejin.cn/post/7172119422562205710vite解决cssvite天生就反对对css文件的间接解决。1. vite在读取到main.js中援用到了index.css； 间接去应用fs模块去读取index.css中文件内容；间接创立一个style标签，将index.css中文件内容间接copy进style标签里；将style标签插入到index.html的head中；将该css文件中的内容间接替换为js脚本(不便热更新或者css模块化)，同时设置Content-Type为js，让浏览器以JS脚本的模式来执行该css后缀的文件。vite配置（1）Dotenv服务端：读取您的文件，解析内容，将其调配给process.env， 并返回一个 Object，其中蕴含蕴含加载内容的键或失败的键Vite我的项目中引入dotenv import * as dotenv from 'dotenv';dotenv 会主动把命名为.env.*（用于辨别以后运行环境，生产环境、开发环境...）文件中名称以VITE结尾的属性放入process.env并会依据package.json运行指令判断拿去对应文件内容。客户端：Vite 在一个非凡的 import.meta.env 对象上裸露环境变量，默认辨认VITE结尾的。envPrefix:'ENV',配置前缀ENV（VITE）结尾的被import.meta.env辨认  待调研（1）热更新；（2）Webpack编译原理；（3）Esmodule;（4）Npm i -D -s（5）Package.json scripts（6）Rollup vite生产环境打包库（7）process.cwd办法: 返回以后node过程的工作目录 参考(1).https://www.bilibili.com/video/BV1GN4y1M7P5/?p=10&spm_id_from...

最近咱们公司接到一个客户的需要，要求为正在开发的我的项目加个性能。我的项目的前端应用的是React，客户想增加具备Excel 导入/导出性能的电子表格模块。通过几个小时的原型构建后，技术团队确认所有客户需要文档中形容的性能都曾经实现了，并且原型能够在截止日期前做好演示筹备。然而，在跟产品组再次探讨客户需要时，咱们发现之前对无关电子表格的局部了解可能存在偏差。客户的具体需要点仅仅提到反对双击填报、具备边框设置、背景色设置和删除行列等性能，但这部分需要形容不是很明确，而且最初提到“像Excel的相似体验”，咱们之前疏忽了这句话背地的信息量。通过与客户的业务需求方的间接沟通，能够确认终端用户就是想间接在网页端操作Excel，并且间接把编辑实现的表格以Excel的格局下载到本地。 本文demo下载地址：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=Mj... 如何把前端表格增加到你的React利用中你能够看到在 StackBlitz 上实时运行的动态表格应用程序，并且能够在此处找到演示源。如果你想要曾经增加了 SpreadJS 的成熟应用程序，请下载此示例。实现后，关上终端，导航到克隆存储库的目录，而后运行： > npm install当初你将看到更新后的应用程序正在运行。 Step 1: 原生HTML表格 该应用程序的前端基于 ReactJS 构建，并由应用 JSX 语法、JavaScript 和 HTML 代码组合创立的组件形成。该应用程序是应用性能组件的语法创立的。这种办法使咱们能够防止编写类，这会使组件更加简单和难以浏览。仪表板位于 JSX 组件层次结构的顶部。它出现 HTML 内容并保护应用程序状态，源自具备虚构 JSON 销售数据的文件。每个子组件负责出现其内容。因为只有 Dashboard 保留应用程序状态，因而它通过 props 将数据向下传递给每个子组件。 Import React, { useState } from ‘react’;import { NavBar } from ‘./NavBar’import { TotalSales } from ‘./TotalSales’import { SalesByCountry } from ‘./SalesByCountry’import { SalesByPerson } from ‘./SalesByPerson’import { SalesTable } from ‘./SalesTable’import { groupBySum } from “../util/util”;import { recentSales } from “../data/data”;export const Dashboard = () => {const sales = recentSales;function totalSales() { const items = sales; const total = items.reduce( (acc, sale) => (acc += sale.value), 0 ); return parseInt(total);};function chartData() { const items = sales; const groups = groupBySum(items, “country”, “value”); return groups;};function personSales() { const items = sales; const groups = groupBySum(items, “soldBy”, “value”); return groups;};function salesTableData() { return sales;};return ( <div style={{ backgroundColor: ‘#ddd’ }}> <NavBar title=”Awesome Dashboard” /> <div className=”container”> <div className=”row”> <TotalSales total={totalSales()}/> <SalesByCountry salesData={chartData()}/> <SalesByPerson salesData={personSales()}/> <SalesTable tableData={salesTableData()}/> </div> </div> </div>);}Step 2: 替换为SpreadJS表格在编写任何代码行之前，咱们必须首先装置 GrapeCity 的 Spread.Sheets Wrapper Components for React。只需进行应用程序，而后运行以下两个命令： ...

Apifox 领有弱小的 Mock 性能，兼容 Mock.js 语法的同时还提供 Nunjucks 和自定义脚本反对，可能满足不同场景需要。 明天给大家分享一些常见业务场景的 Mock 应用技巧，当然，实现的办法不惟一。在开始之前，你须要将 Apifox 的以后环境切换为 「本地 Mock」 或 「云端 Mock」 环境。 模仿简略数据要模仿一些简略的数据，只需在 「返回响应」 里定义字段，零碎便会主动应用「智能 Mock」规定生成数据。 响应字段能够是简略的数据结构，也能够是简单的数据结构（如嵌套对象、数组等）。 通过 「智能 Mock」 主动生成的数据： 模仿列表数据当页面须要展现多条数据（如文章列表、商品列表等）时，要疾速生成几十条甚至几百条数据，能够在 「高级 Mock」里新建一个「冀望」，并通过 Nunjucks 语法写一个 for 循环即可。 或者更简略一点，不应用「高级 Mock」，间接限定字段的 「最大/最小元素个数」 即可： 生成的示例数据： 模仿分页数据当数据须要分页展现时，能够在「高级 Mock」外面编写脚本来模仿分页数据。 自定义的脚本反对获取接口的申请参数，你能够依据申请参数（比方当前页、页容量）来实现不同的业务逻辑。 例如当初设置一个 “总数据有 120 条，每页的页容量为 100 条，依据不同的页码返回不同数据” 的脚本，其脚本如下： 当前页为 1，页容量为 100 时，返回 100 条数据： 当前页为 2，页容量为 100 时，返回 20 条数据（因为总共 120 条数据，到第二页时只剩 20 条）： 当前页为 3，页容量为 100 时，返回 0 条数据（因为总共 120 条数据，到第三页时曾经没有数据了），你也能够抉择在这里定义“抛出谬误”的脚本。 ...

面试官：说说对受控组件和非受控组件的了解？利用场景？一、受控组件受控组件，简略来讲，就是受咱们管制的组件，组件的状态全程响应内部数据 举个简略的例子： class TestComponent extends React.Component { constructor (props) { super(props); this.state = { username: 'lindaidai' }; } render () { return <input name="username" value={this.state.username} /> }}这时候当咱们在输入框输出内容的时候，会发现输出的内容并无奈显示进去，也就是input标签是一个可读的状态 这是因为value被this.state.username所管制住。当用户输出新的内容时，this.state.username并不会自动更新，这样的话input内的内容也就不会变了 如果想要解除被管制，能够为input标签设置onChange事件，输出的时候触发事件函数，在函数外部实现state的更新，从而导致input框的内容页发现扭转 因而，受控组件咱们个别须要初始状态和一个状态更新事件函数 二、非受控组件非受控组件，简略来讲，就是不受咱们管制的组件 个别状况是在初始化的时候承受内部数据，而后本人在外部存储其本身状态 当须要时，能够应用 ref 查问 DOM 并查找其以后值，如下： import React, { Component } from 'react';export class UnControll extends Component { constructor (props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (e) => { console.log('咱们能够取得input内的值为', this.inputRef.current.value); e.preventDefault(); } render () { return ( <form onSubmit={e => this.handleSubmit(e)}> <input defaultValue="lindaidai" ref={this.inputRef} /> <input type="submit" value="提交" /> </form> ) }}对于refs的详情应用能够参考之前文章 ...

大家好，我卡颂。 要说React有什么其余框架没有的、举世无双的个性，那肯定是并发更新。围绕并发更新，存在两个很有意思的景象： 很多开发者据说过他很少开发者间接应用过他这两个景象看似矛盾，其实很好解释 —— React18之后的新个性，次要是面向下层框架的（次要是Next.js）。 换句话说，这些新个性（比方并发更新）次要是供框架集成，而不是开发者间接应用。 比方，并发更新的两个外围API —— useTransition和useDeferredValue，都是针对视图切换的场景。 而在前端交互中，最次要的视图切换场景就是路由切换，所以蕴含路由性能的前端框架就会集成这两个API。 而当初，一个试验性浏览器API —— View Transitions API将原生实现视图切换性能。 他到底有什么用？如果其余框架应用它，是不是能取得React同样的并发更新能力？ 欢送围观朋友圈、退出人类高质量前端交换群，带飞 什么是视图切换？不论是View Transitions API，还是React的useTransition，都是为了进步视图切换场景下的用户体验。 什么是视图切换？以view-transitions Demo举例。这是个简略的相册Demo，点击右边图片缩略图，左边会显示大图： 整个过程简略来说包含3个步骤： 点击缩略图申请大图数据大图申请胜利后，显示大图从步骤1到3的过程就是个典型的视图切换。整个过程有很多能够优化体验的中央，比方： 从旧图到新图的突变过渡成果点击缩略图发动图片申请后，大图区域能够先显示旧图（而不是立即显示loading成果），待新图申请胜利后再过渡到新图这里解释下第二点，对于切换类的交互，相比于当视图切换时立即显示loading成果，待新视图加载实现后过渡到新视图，当视图切换时先显示旧视图，待新视图加载实现后过渡到视图在提早不高的状况下体验会更好。 除了上述这些体验优化的点，视图切换的实现还有很多细节须要思考，比方： 如何解决新旧视图切换时的过渡成果？如何解决新视图加载时的loading成果？当正在申请新视图数据时（此时视图处在旧视图中），用户又对旧视图产生交互怎么办？视图切换时如何解决页面滚动地位、光标聚焦（focus）地位？对于应用屏幕阅读器的盲人，视图切换时阅读器会朗诵什么？除此之外，不同场景下的视图切换实现细节也不同。比方，如何在切换页面时优化视图切换成果？ 在SPA（单页利用）呈现之前，网站通常是由多个页面组成。比方上面网站的每个Tab栏，对应一个独立网页，其中： bramus Tab对应 https://http203-playlist.netlify.app/with-bramus/cassie Tab对应https://http203-playlist.netlify.app/with-cassie/ 在Tab之间切换，浏览器会： 卸载之前的页面申请新页面数据加载新页面从页面卸载到页面加载之间的白屏间隙会造成屏幕闪动。 要优化这种场景下优化视图切换成果，以后惟一做法是利用history API接管路由操作，将网页变成一个SPA。 既然视图切换是如此常见的需要，且有这么多须要思考的因素，那浏览器为什么不原生实现呢？ 于是，View Transitions API应运而生。 以后View Transitions API不反对跨页面的视图切换，但将来会反对View Transitions的应用View Transitions API的应用很简略，只须要用document.startViewTransition包裹视图切换后的回调函数即可。 对于上述相册示例，回调函数的逻辑是将img标签src属性更新为新图片地址： const transition = document.startViewTransition(() => { galleryImg.src = /* 新图片地址 */;});剩下所有跟过渡相干的实现，都由Transitions API解决。 View Transitions实现原理在视图切换时，存在2个概念： 切换前的旧视图切换后的新视图当应用View Transitions后，会顺次做： 对页面进行截图，作为旧视图执行传递给document.startViewTransition的回调DOM更新后，对更新后的页面进行截图，作为新视图结构一棵代表过渡成果的伪元素树，挂载在根元素（html元素）下，构造相似如下：::view-transition└─ ::view-transition-group(root) └─ ::view-transition-image-pair(root) ├─ ::view-transition-old(root) └─ ::view-transition-new(root)其中： ...

咱们是袋鼠云数栈 UED 团队，致力于打造优良的一站式数据中台产品。咱们始终保持工匠精力，摸索前端路线，为社区积攒并流传教训价值。 本文作者：佳岚 前言Cookie实际上是一小段的文本信息，它产生的起因是因为HTTP 协定是无状态的，所以须要通过 Cookie 来维持客户端与服务端之间的“会话状态”。如网络购物，可能在不同页面记录购物车信息，或者在网站不同页面共享登录状态。 Cookie 的根本构造包含：名字、值、各种属性 属性一块 Cookie 可能有 Domain、Path、Expires、Max-Age、Secure、HttpOnly 等多种属性，如 **HTTP**/1.1 200 **OK**Set-Cookie: token=abc; Domain=.baidu.com; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnlyDomain 和 PathDomain 和 Path 属性定义了该 Cookie 的可被拜访的范畴，通知浏览器该 Cookie 是属于哪一个网站的。在申请接口时，会依据 Domain 与 Path 由浏览器决定是否要携带该 Cookie。因而，Domain 是有严格标准进行束缚的，能够看成 Cookie 的第一道平安防线。首先 Domain 设置时在 格局上 必须以 . 结尾，且域必须还要蕴含一个 .  ，或者是齐全以 ip 的模式写入,比如说： .baidu.com  ✅ 192.168.3.5  ✅ .com ❌ .168.3.5 ❌ 非法ip地址是无奈写入的 www.baidu.com ❓ 是否非法 A Set-Cookie with Domain=ajax.com will be rejected because the value for Domain does not begin with a dot.尽管 RFC 中严格规定了 Domain 必须以 . 结尾，但可能因为网站开发者常常遗记加上 . ，所以浏览器都会主动的在后面加上一个 .比如说上面这种： ...

Vue我的项目，打包npm run build报错，内存溢出 有两种报错的体现：1、FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 2、Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory 1、2两种均是JavaScript 堆内存耗尽，导致 Node.js 过程解体导致。实质上这是一个node的问题。 解决办法：1、尝试减少堆内存限度，有全局级和我的项目级两种形式。 1a、在全局减少堆内存限度环境变量->零碎变量中加上变量名:NODE_OPTIONS变量值:--max-old-space-size=8192 (不肯定是8192这个值，能够本人批改) 1b、我的项目级减少堆内存限度(举荐)"build": "NODE_OPTIONS=--max-old-space-size=8192 vue-cli-service build --mode test"。 (不肯定是8192这个值，能够本人批改) 如果是windows零碎能够借助cross-env这个npm包首先npm i cross-env -D 再批改package.json 中的scripts"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vue-cli-service build --mode test" 2、应用压缩工具，如uglifyjs。目标是减小打包后代码体积。 同步更新到本人的语雀https://www.yuque.com/dirackeeko/blog/pkk0xamyuazgrkl6

SEO_CLASS_CREATE_COMPLETE函数模块用于在SAP零碎中创立一个残缺的SAP类。在SAP ABAP中，类是面向对象编程的根本构建块，它容许开发者将数据和行为组织到一个繁多的实体中。SAP的类通常用于形容业务对象、数据结构和业务逻辑，以实现灵活性和可维护性。 SEO_CLASS_CREATE_COMPLETE函数模块的主要用途包含： 创立类： 通过SEO_CLASS_CREATE_COMPLETE，开发者能够在SAP零碎中创立一个新的ABAP类。这个类能够是一个一般的类，也能够是一个异样类、单例类或接口类。定义属性和办法： 在创立类时，能够应用该函数模块来定义类的属性（成员变量）和办法。属性能够是公共的、受爱护的或公有的，办法能够是实例办法或类办法。处理事件： 除了属性和办法，SAP ABAP类还能够处理事件。通过SEO_CLASS_CREATE_COMPLETE，能够为类增加事件处理程序，以响应特定的事件。实现接口： 如果一个类须要实现一个或多个接口，SEO_CLASS_CREATE_COMPLETE也能够用于为类增加接口的实现。定义继承关系： SAP ABAP反对继承关系，容许一个类继承另一个类的属性和办法。通过SEO_CLASS_CREATE_COMPLETE，能够定义类之间的继承关系。本文介绍应用下列 ABAP Function Module 生成新的 ABAP 类的办法。 SEO_CLASS_CREATE_COMPLETE REPORT zdyanmic.DATA ls_vseoclass TYPE vseoclass.DATA ls_imp_if TYPE seor_implementing_r.DATA lt_imp_if TYPE seor_implementings_r.DATA ls_imp_det TYPE seoredef.DATA lt_methods_source TYPE seo_method_source_table.DATA ls_method_source TYPE seo_method_source.DATA lv_method TYPE LINE OF seoo_methods_r.DATA: lv_classname LIKE ls_vseoclass-clsname VALUE 'ZCLJERRY8'.ls_vseoclass-clsname = lv_classname.ls_vseoclass-state = seoc_state_implemented.ls_vseoclass-exposure = seoc_exposure_public.ls_vseoclass-descript = `Dynamic proxy generated by Jerry's code`.ls_vseoclass-langu = sy-langu.ls_vseoclass-clsccincl = abap_true.ls_vseoclass-unicode = abap_true.ls_vseoclass-fixpt = abap_true.ls_vseoclass-clsfinal = abap_true.ls_imp_det = ls_imp_if-clsname = lv_classname.ls_imp_det = ls_imp_if-refclsname = 'IF_HELLOWORLD'.ls_imp_if-state = seoc_state_implemented.APPEND ls_imp_if TO lt_imp_if.CLEAR: ls_method_source.DATA: lv_name TYPE string.ls_method_source-cpdname = 'IF_HELLOWORLD~PRINT'.APPEND ` WRITE:/ 'before Hello World'.` TO ls_method_source-source.APPEND ' mo_origin->print( ).' TO ls_method_source-source.APPEND ` WRITE:/ 'after Hello World'.` TO ls_method_source-source.APPEND ls_method_source TO lt_methods_source.CLEAR: ls_method_source.ls_method_source-cpdname = 'CONSTRUCTOR'.APPEND 'mo_origin = io_origin.' TO ls_method_source-source.APPEND ls_method_source TO lt_methods_source.DATA: lt_implementation TYPE seop_source_string, ls_mtdkey TYPE seocpdkey, cv_implementation TYPE seor_implementings_r, ls_source_code TYPE seo_method_source, lt_methods TYPE seoo_methods_r, lt_parameters TYPE seos_parameters_r, lt_attribute TYPE seoo_attributes_r, ls_attribute LIKE LINE OF lt_attribute, ls_parameter LIKE LINE OF lt_parameters, ls_method LIKE LINE OF lt_methods.ls_method-clsname = lv_classname.ls_method-cmpname = 'CONSTRUCTOR'.ls_method-state = 1. "implementedls_method-exposure = 2. "publicAPPEND ls_method TO lt_methods.ls_parameter-clsname = lv_classname.ls_parameter-cmpname = 'CONSTRUCTOR'.ls_parameter-version = 1.ls_parameter-descript = 'Jerry'.ls_parameter-type = 'IF_HELLOWORLD'.ls_parameter-sconame = 'IO_ORIGIN'.ls_parameter-cmptype = 1. "METHODls_parameter-mtdtype = 0. "METHODls_parameter-pardecltyp = 0. "IMPORTINGls_parameter-parpasstyp = 1. "pass by referencels_parameter-typtype = 3. "type ref toAPPEND ls_parameter TO lt_parameters.ls_attribute-clsname = lv_classname.ls_attribute-cmpname = 'MO_ORIGIN'.ls_attribute-state = 1.ls_attribute-attdecltyp = 0.ls_attribute-attexpvirt = 0. "privatels_attribute-typtype = 3. "type ref tols_attribute-type = 'IF_HELLOWORLD'.APPEND ls_attribute TO lt_attribute.CALL FUNCTION 'SEO_CLASS_CREATE_COMPLETE' EXPORTING devclass = '$TMP' version = seoc_version_active authority_check = abap_true overwrite = abap_true suppress_method_generation = abap_false genflag = abap_false method_sources = lt_methods_source suppress_dialog = abap_true CHANGING class = ls_vseoclass methods = lt_methods parameters = lt_parameters implementings = lt_imp_if attributes = lt_attribute EXCEPTIONS existing = 1 is_interface = 2 db_error = 3 component_error = 4 no_access = 5 other = 6 OTHERS = 7.WRITE: / sy-subrc.

在面向对象编程（Object-Oriented Programming，简称 OOP）畛域，"胖接口"，也称为"Fat Interface"，是一个被宽泛意识并且该当防止的设计反模式。这个术语指的是一个接口（或抽象类）蕴含了大量的办法，可能超出了繁多职责的准则，导致接口变得臃肿、简单和难以保护。在本文中，我将具体解释什么是胖接口，为什么它是一个问题，并通过实例来加深了解。 胖接口的定义和问题："胖接口"是指一个接口（或抽象类）具备过多的办法，这些办法在逻辑上可能属于不同的职责畛域。这违反了面向对象设计中的繁多职责准则（Single Responsibility Principle，SRP），该准则认为一个类（或接口）应该只有一个引起变动的起因。胖接口的问题在于，它使得实现该接口的类必须实现大量的办法，而其中一些办法可能与类的理论用处不相干。 胖接口的问题包含：复杂性减少： 胖接口会导致接口自身变得复杂，难以了解和保护。实现类须要同时解决多个职责，减少了代码的复杂性和谬误的危险。低内聚性： 胖接口可能导致实现类中呈现不相干的办法，升高了类的内聚性。内聚性指的是一个类应该蕴含相关性高的办法，胖接口违反了这一准则。耦合减少： 实现一个胖接口的类须要实现很多办法，这可能导致不相干的类之间产生耦合。当一个类的变动须要批改多个实现类时，耦合性减少会使零碎更软弱。难以保护： 当胖接口发生变化时，可能须要批改多个实现类的代码。这会使保护变得复杂，减少了引入谬误的危险。胖接口的示例：思考一个图形绘制利用的设计，其中有不同品种的图形（如矩形、圆形、三角形）和工具（如画笔、橡皮擦）。为了展现胖接口问题，咱们将设计一个名为Shape的接口，用于示意不同品种的图形，并增加一些与图形绘制相干的办法。 interface Shape { void draw(); void resize(); void rotate(); void erase();}在这个例子中，Shape接口蕴含了绘制、调整大小、旋转和擦除等办法。只管这些办法在图形绘制畛域中都是相干的，但在理论的设计中，不同品种的图形可能只须要实现其中一部分办法。 例如，对于圆形这种没有角度的图形，rotate办法毫无意义。对于橡皮擦这种工具，可能只须要erase办法，而其余办法则与其无关。在这种状况下，实现Shape接口的类不得不实现所有这些办法，即便某些办法对于特定的图形或工具是不相干的。 为了解决这个问题，咱们能够思考将Shape接口拆分为多个更细粒度的接口，每个接口代表一个具体的职责畛域。例如，咱们能够创立Drawable接口示意可绘制的图形，Resizable接口示意可调整大小的图形，Rotatable接口示意可旋转的图形，Eraser接口示意橡皮擦工具。 interface Drawable { void draw();}interface Resizable { void resize();}interface Rotatable { void rotate();}interface Eraser { void erase();}通过这种拆分，每个实现类只需实现其相干的接口，防止了不必要的办法实现，进步了代码的内聚性和可维护性。 总结："胖接口"是一个面向对象设计中该当防止的反模式，它违反了繁多职责准则，导致接口变得臃肿、简单和难以保护。在设计接口时，应该将不同职责的办法拆分为多个更细粒度的接口，以放弃接口的内聚性和清晰性。通过遵循良好的面向对象设计准则，能够构建出更具灵活性、可扩展性和可维护性的软件系统。

ABAP HPGL：连贯 SAP ABAP 和图形打印语言 HPGL ABAP（Advanced Business Application Programming）是SAP零碎中的编程语言，用于开发自定义的业务利用和性能。SAP S/4HANA是SAP的企业资源打算（ERP）套件。HPGL（Hewlett-Packard Graphics Language）是一种矢量图形打印语言，最后由惠普开发，用于管制绘图设施。 ABAP HPGL 的概念： 在SAP环境中，ABAP HPGL是指在ABAP程序中生成和管制HPGL格局的图形输入。这种办法通常用于从SAP零碎中生成绘图、图表或其余图形内容，并将其发送到图形绘图设施或打印机进行输入。通过应用ABAP生成HPGL指令，能够在打印设施上绘制线条、图形和文本，从而实现准确的图形打印。 示例： 假如您是一家制作公司的SAP开发人员，您须要在SAP零碎中开发一个报表，显示不同产品的生产工艺图。您决定应用ABAP HPGL来生成和输入这些工艺图。 生成HPGL指令： 首先，您在ABAP程序中编写代码来生成HPGL指令，这些指令将定义工艺图中的各个元素，如线条、圆圈和文本。例如，以下是一段生成HPGL指令的ABAP代码示例： DATA: hpgl_string TYPE string.CONCATENATE 'IN;' INTO hpgl_string.CONCATENATE 'SP1;' INTO hpgl_string.CONCATENATE 'PU100,100;' INTO hpgl_string.CONCATENATE 'PD200,200;' INTO hpgl_string.CONCATENATE 'PU300,300;' INTO hpgl_string.CONCATENATE 'CI50;' INTO hpgl_string.CONCATENATE 'LBHello;' INTO hpgl_string.CONCATENATE 'SP0;' INTO hpgl_string.CONCATENATE 'PA;' INTO hpgl_string.上述代码将生成一些HPGL指令，绘制一条直线、一个圆圈和一个文本标签。 将HPGL发送到打印设施： 一旦您生成了HPGL指令，您能够通过连贯到适合的打印设施，将这些指令发送给设施。这可能波及到与惠普或兼容HPGL的绘图设施进行通信。图形输入： 打印设施将依据您生成的HPGL指令绘制图形。直线、圆圈和文本将依据指令的定义呈现在纸张上。长处和用处： 应用ABAP HPGL的次要长处是您能够在SAP环境中生成简单的图形，并将其间接输入到绘图设施。这在制造业、设计畛域和科学研究等须要图形输入的畛域十分有用。您能够创立产品设计图、流程图、图表等，而后将其用于生产、决策或展现。 总结： ABAP HPGL是将SAP ABAP编程语言与HPGL图形打印语言联合的办法。通过生成HPGL指令，您能够在SAP零碎中创立简单的图形，并将其输入到图形绘图设施。这种办法在须要在SAP环境中生成和输入图形的场景中十分有用。

当谈到网络安全和破绽治理时，"NVD"，或者全称"National Vulnerability Database"，是一个不可或缺的概念。NVD是一个由美国国家标准与技术研究院（NIST）保护的综合性破绽数据库，旨在收集、共享和散发对于计算机软件和硬件中存在的安全漏洞的信息。NVD的存在对于爱护信息技术基础设施、进步软件和硬件安全性以及帮助网络安全业余人员应答威逼至关重要。 NVD的性能涵盖了许多方面，它不仅提供无关已知破绽的详细信息，还为平安钻研人员、开发人员、企业和政府部门提供了重要的资源。以下将具体探讨NVD的重要性、构造和对网络安全的影响。 NVD的重要性：NVD的次要指标之一是提供一个全面且及时的破绽信息库，帮忙平安业余人员更好地理解和治理已知的破绽。这有助于： 1. 破绽辨认和治理： NVD收集并展现了各种软件和硬件中的破绽信息。这些信息包含破绽的严重性、影响的范畴、可能的解决方案以及相干的参考资料。这使得企业和组织可能及早辨认并适当地治理可能影响其零碎和应用程序的破绽。2. 安全补丁公布： 厂商和开发者能够通过参考NVD中的破绽信息，为其产品创立并公布补丁。这有助于修复破绽，进步零碎和软件的安全性，并缩小受到攻打的危险。3. 破绽钻研： 平安钻研人员能够利用NVD的信息来深刻理解不同破绽的工作原理，从而更好地了解攻打技术并开发相应的进攻策略。4. 决策反对： 企业和政府能够依据NVD中的信息，制订安全策略、危险评估和破绽修复打算，以爱护其要害信息基础设施。NVD的构造和内容：NVD的内容包含丰盛的破绽信息，每个破绽都有一份具体的报告，其中包含以下要害信息： 1. 破绽标识符： 每个破绽都有一个惟一的标识符，例如CVE（通用破绽和裸露，Common Vulnerabilities and Exposures）标识符。这有助于疾速辨认和援用破绽。2. 破绽形容： 提供了破绽的详细描述，包含破绽的性质、可能的攻击方式以及受影响的组件或零碎。3. 破绽评分： 应用CVSS（通用破绽评分零碎，Common Vulnerability Scoring System）对破绽进行评分，以掂量其严重性。这有助于组织确定哪些破绽须要优先解决。4. 参考资料： 提供了与破绽相干的链接、参考文档和厂商布告，有助于进一步钻研和解决破绽。5. 破绽解决方案： 对于一些破绽，可能会提供倡议的解决方案或长期措施，以加重破绽带来的危险。NVD对网络安全的影响：NVD在网络安全方面产生了深远的影响，次要体现在以下几个方面： 1. 进步意识： NVD不仅为平安业余人员提供了贵重的信息，还帮忙了宽广用户理解以后存在的威逼。这有助于进步集体、组织和企业的网络安全意识。2. 疾速响应： 通过NVD，厂商和开发者可能更快地公布破绽修复和安全补丁，从而升高了潜在攻打的胜利几率。3. 继续监测： 平安团队能够通过订阅NVD的更新，及时理解新发现的破绽和已公布的修复，从而放弃对威逼的继续监测。4. 数据驱动进攻： NVD中的破绽信息能够帮忙平安业余人员理解攻击者可能的指标和办法，从而更好地制订进攻策略。5. 合规要求： 许多行业和法规要求组织及时修复已知破绽。NVD为满足这些合规要求提供了重要的参考根据。总结：综合来看，NVD作为一个综合性破绽数据库，在寰球范畴内对于网络安全的 晋升起着重要作用。它为平安业余人员、钻研人员、开发者和决策者提供了及时精确的破绽信息，有助于更好地应答日益简单和多样化的网络威逼。通过NVD，咱们能够更好地理解破绽，采取措施爱护信息资产，确保网络安全环境的稳固和牢靠。

在当今数字化时代，云计算技术已成为企业信息技术基础设施的重要组成部分，而"hosting service"作为云计算畛域中的重要概念，为企业提供了一种灵便、高效的IT资源托管和治理形式。本文将具体探讨什么是云计算畛域的"hosting service"，以及通过理论例子加深了解。 什么是"hosting service"？"hosting service"，中文翻译为"托管服务"，是指将企业的应用程序、数据和服务部署在第三方提供的基础设施上，以实现资源的共享、弹性扩大和老本效益。通过托管服务，企业能够将本身的外围业务集中精力，而将硬件和软件基础设施的保护和治理交给业余的云服务提供商。这种服务模式在云计算畛域失去广泛应用，涵盖了不同档次的服务，如基础设施即服务（IaaS）、平台即服务（PaaS）和软件即服务（SaaS）。 托管服务的类型和特点：1. 基础设施即服务（IaaS）：IaaS是一种托管服务，提供了根底的计算资源，如虚拟机、存储和网络。企业能够通过IaaS在云端创立和治理虚构服务器、存储资源和网络设置，防止了传统硬件洽购和保护的老本和复杂性。例如，亚马逊AWS的EC2（Elastic Compute Cloud）和微软Azure的虚拟机服务，容许用户依据理论需要疾速创立、启动和治理虚构服务器实例。 2. 平台即服务（PaaS）：PaaS提供了开发和部署应用程序的平台环境，包含操作系统、中间件和开发工具。它使开发人员可能专一于应用程序的开发，而无需放心底层基础设施的保护。例如，谷歌的App Engine和微软的Azure App Service提供了PaaS服务，让开发者能够疾速构建、部署和扩大应用程序。 3. 软件即服务（SaaS）：SaaS是一种通过云平台提供软件应用程序的托管服务。用户能够通过网络浏览器等形式拜访和应用这些应用程序，无需在本地装置和保护软件。常见的SaaS利用包含电子邮件、办公套件、客户关系治理等。例如，Salesforce提供的CRM（Customer Relationship Management）和Google Workspace（以前的G Suite）提供的办公套件都属于SaaS服务。 托管服务的劣势和理论案例：1. 灵活性和弹性扩大：托管服务使企业可能依据理论需要动静调整资源规模，实现弹性扩大。无论是面对业务顶峰还是低谷，都可能按需分配和开释资源，防止了资源节约。例如，一个电子商务平台在双十一期间能够通过云提供商的IaaS服务疾速扩大服务器数量，以满足激增的用户流量需要。 2. 老本效益：托管服务能够升高企业的IT经营老本。传统上，企业须要投入大量资金购买和保护硬件设施，而托管服务将这些老本转变为按需付费的模式，防止了大额后期投资。同时，也缩小了人力资源和能源老本。例如，一个初创公司能够通过应用PaaS服务，防止了购买和保护开发环境所需的硬件和软件老本。 3. 高可用性和可靠性：云服务提供商通常具备高度牢靠的基础设施，包含冗余和备份机制，以确保应用程序的高可用性和数据的安全性。例如，微软Azure提供了寰球范畴内的数据中心，能够实现跨地理位置的数据冗余和劫难复原。 4. 疾速部署和开发：通过托管服务，企业能够更疾速地部署和交付应用程序。开发人员能够专一于应用程序的逻辑和性能，而不用关注底层基础设施的设置和治理。这能够大大放慢应用程序的开发和迭代周期。例如，一个挪动利用开发团队能够应用PaaS服务疾速搭建后端服务，以反对利用的疾速上线。 总结："hosting service"作为云计算畛域的重要概念，为企业提供了灵便、高效、老本效益的IT资源托管和治理形式。通过不同档次的托管服务，企业能够将注意力集中在外围业务上，而无需过多关注底层基础设施的细节。这为企业实现资源优化、疾速响应市场变动、降低成本、晋升可靠性等方面带来了诸多益处。综上所述，"hosting service"在当今云计算时代具备重要意义，将持续为企业的数字化转型和翻新提供反对。 对于 Commerce Cloud hosting services 来说，它蕴含了构建和 host JavaScript 利用两局部能力。

在 SAP UI5 开发中，命名空间（namespace）是一个重要的概念，它用于组织和治理 UI5 利用的资源、模块和库。命名空间提供了一种结构化的形式来命名和援用 UI5 利用的各个局部，以防止命名抵触并使开发更具可维护性。在本文中，我将具体解释什么是 SAP UI5 的命名空间，为什么它重要，并通过实例进行阐明。 命名空间的概念命名空间是一种在编程中用于辨别不同模块、类、函数等标识符的机制。在 SAP UI5 中，命名空间用于标识和组织利用的各个模块、库和资源。每个命名空间都代表了一个独特的标识符前缀，用于将相干的功能模块组织在一起。这有助于确保不同局部之间的标识符不会发生冲突，同时也提供了一种逻辑构造，使开发者可能更好地组织和保护代码。 命名空间的重要性1. 防止命名抵触在大型利用中，可能存在多个模块、库和资源，它们可能应用雷同的名称。如果没有命名空间，不同模块之间的标识符可能会发生冲突，导致难以辨认的谬误。通过应用命名空间，每个模块都有一个惟一的前缀，能够防止命名抵触，使代码更加稳固牢靠。 2. 提供逻辑构造命名空间能够为利用提供一种逻辑构造，将相干的功能模块组织在一起。这使得开发者能够更轻松地查找和了解代码，同时也促成了代码的模块化和可维护性。 3. 反对模块化开发命名空间是模块化开发的根底。通过将代码划分为不同的模块，并应用命名空间进行组织，开发者能够更容易地治理和保护代码。这种模块化的形式也使得团队合作更加高效。 命名空间的示例阐明假如咱们要开发一个简略的 SAP UI5 利用，该利用显示一个蕴含一些文本的页面。咱们能够应用命名空间来组织利用的不同局部。 1. 创立命名空间首先，咱们为利用创立一个命名空间，例如 com.example.myapp。这个命名空间将作为利用中所有模块和资源的前缀。 2. 定义模块假如咱们有一个模块用于治理页面的显示逻辑，咱们能够创立一个名为 DisplayManager 的模块。在命名空间下，该模块的残缺名称将是 com.example.myapp.DisplayManager。 // com/example/myapp/DisplayManager.jssap.ui.define([], function() { "use strict"; return { showText: function() { // 显示文本的逻辑 } };});3. 应用模块在另一个模块中，咱们能够应用之前定义的 DisplayManager 模块。这里同样须要应用命名空间作为前缀。 // com/example/myapp/AppController.jssap.ui.define(["com/example/myapp/DisplayManager"], function(DisplayManager) { "use strict"; return { onInit: function() { // 初始化逻辑 DisplayManager.showText(); } };});通过这种形式，咱们在利用中应用命名空间来组织模块，防止了命名抵触，并且可能清晰地示意模块之间的关系。 论断SAP UI5 的命名空间是一种重要的组织和治理代码的机制。它通过为不同的模块、库和资源提供惟一的前缀，防止了命名抵触，同时也提供了逻辑构造和模块化开发的反对。通过实例阐明，咱们能够分明地看到命名空间在 SAP UI5 开发中的利用和劣势。在开发大型利用时，正当应用命名空间将有助于进步代码的可维护性和可扩展性，使开发过程更加高效和牢靠。 ...

B/S 架构（Browser/Server 架构），又称为 Web 架构，是一种应用程序的体系结构，将用户界面和业务逻辑拆散在不同的档次，通过浏览器作为客户端来拜访近程服务器上的应用程序。这一架构的诞生是为了应答日益增长的互联网利用需要，它带来了许多劣势，例如跨平台性、易于保护、可扩展性以及低成本部署等。在本文中，我将具体解释 B/S 架构的背景、劣势，并通过几个理论案例加以阐明。 背景与需要在计算机倒退晚期，应用程序次要是通过 C/S 架构（Client/Server 架构）来实现的，其中客户端负责用户界面，服务器端负责解决业务逻辑和数据存储。然而，C/S 架构存在一些限度，如客户端依赖、不同平台的兼容性问题、部署和保护简单等。随着互联网的衰亡，越来越多的利用须要可能在不同地点、不同设施上拜访，这促使了 B/S 架构的诞生。 B/S 架构通过将用户界面放在浏览器中，通过 HTTP 协定与服务器通信，实现了拆散用户界面和业务逻辑的指标。这种架构的呈现，极大地升高了客户端的依赖性，使得用户只须要一个古代的浏览器即可拜访利用，不再须要装置简单的客户端利用。 劣势与特点1. 跨平台性B/S 架构的利用能够在任何装有古代浏览器的设施上运行，无论是 Windows、Mac 还是挪动设施如手机和平板电脑。这种跨平台性使得开发人员不用为不同的操作系统和设施编写不同版本的利用，极大地缩小了开发和保护的工作量。 2. 易于保护和部署因为业务逻辑集中在服务器端，开发人员能够更轻松地进行保护和更新。只须要在服务器端进行批改，用户无需更新客户端利用。这也升高了保护老本，并且确保所有用户都应用的是最新版本。 3. 可扩展性B/S 架构容许服务器端进行程度扩大，以应答用户数量的增长。只需减少服务器数量，而无需扭转客户端。这种可扩展性使得零碎可能适应一直变动的用户需要。 4. 安全性因为大部分的业务逻辑在服务器端执行，客户端只负责显示数据和用户交互，因而能够更容易地施行安全策略。敏感数据和业务逻辑不会裸露在客户端，升高了潜在的危险。 5. 低成本部署相比于 C/S 架构，B/S 架构的部署更为简便。用户只需关上浏览器，输出网址即可拜访利用，而不须要简单的装置过程。这升高了用户应用门槛，也缩小了部署和保护的老本。 实例阐明以下是一些理论案例，阐明 B/S 架构是如何利用在不同畛域的。 1. 电子商务平台以淘宝、京东等电子商务平台为例，用户通过浏览器拜访这些网站，浏览商品、下订单等操作。所有的业务逻辑、订单解决、库存治理等都在服务器端实现。这种架构使得用户能够在任何地点、任何设施上购物，而无需装置专门的客户端。 2. 企业办公利用许多企业采纳 B/S 架构的办公利用，如在线合作工具、人力资源管理系统等。员工只需通过浏览器登录零碎，就可能在任何中央解决日常工作，不受设施限度。企业也能够更不便地进行系统升级和保护。 3. 社交媒体平台社交媒体平台如 Facebook、Twitter 应用 B/S 架构，用户能够通过浏览器公布状态、查看敌人动静等。服务器端负责解决用户关系、推送音讯等简单的业务逻辑。用户能够在不同的设施上无缝体验社交互动。 4. 在线学习平台在线学习平台如 Coursera、edX 提供了 B/S 架构的教育服务。学生只需通过浏览器登录，就能够参加在线课程、提交作业等。学习进度和问题等数据都存储在服务器上，确保了数据的安全性和一致性。 论断B/S 架构的诞生是为了应答日益增长的互联网利用需要，它通过将用户界面和业务逻辑拆散，使得利用可能跨平台、易于保护、可扩大，并提供了较高的安全性。通过电子商务平台、企业办公利用、社交媒体平台和在线学习平台等实 际案例，咱们能够分明地看到 B/S 架构在不同畛域的利用和劣势。 总而言之，B/S 架构的呈现极大地推动了互联网利用的倒退，为用户提供了更便捷、高效的利用体验，同时也为开发者提供了更灵便、可保护的开发方式。随着互联网的一直倒退，B/S 架构也在一直演进和欠缺，将持续施展重要作用。

模块化的背景前端模块化是一种规范，不是实现了解模块化是了解前端工程化的前提前端模块化是前端我的项目规模化的必然结果什么是前端模块化?前端模块化就是将简单程序依据标准拆分成若干模块，一个模块包含输出和输入。而且模块的外部实现是公有的，它通过对外裸露接口与其余模块通信，而不是间接调用。当初在HTML文件中能够援用的script包含脚本和模块，其中模块具备更高的开发效率(可读性强、复用性高)，而脚本具备更高的页面性能，因为模块绝对文件多，加载速度慢。须要留神的是模块在浏览器中运行会存在兼容性的问题，在script申明type="module"即可应用ES Module模块化标准。 模块化的进化过程全局function模式，将不同的性能封装成不同的函数，缺点是容易引发全局命名抵触。比方刚开始在一个js文件中中定义一个一个的函数作为模块，然而这些函数挂载windows上的，净化全局作用域，我在另一个js文件中定义同名的函数就会导致命名抵触，而且无奈治理模块依赖关系，进而早起模块化齐全依附约定。 function api(){ return { data:{ a:1, b:2 } } }全局namespace模式，约定每个模块裸露一个全局对象，所有的模块成员裸露在对象下，毛病是内部可能批改模块外部数据。将函数放在对象模块中挂载到window上，然而这样内部也能批改对象外部的属性。var __Module={ api(){ return { data:{ a:1, b:2 } } }}那么咱们能够通过函数作用域加闭包的个性来解决。 IIFE模式，将模块成员放在函数公有作用域中，通过自执行函数创立闭包，对于裸露给内部的成员通过挂载到全局对象这种形式实现。这种形式实现了公有成员的概念，缺点是无奈解决模块间相互依赖问题。(function(){ var a =1; function getA(){ return a; } function setA(a){ window.__module.a = a; } window.__module = { a, getA, setA }})();IIFE模式加强，反对传入自定义依赖，缺点是多依赖传入时，代码浏览艰难，无奈反对大规模的模块化开发，无特定语法反对，代码简陋。(function(global){ var a =1; function getA(){ return a; } function setA(a){ window.__module.a = a; } global.__Module_API = { a, getA, setA }})(window)(function(global,moduleAPI){ global.__Module = { setA:moduleApi.setA }})(window,window.__Module_API)以上就是晚期没有工具和标准的状况下对模块化的落地形式。 ...

背景在应用nginx做代理web容器转发的时候，依据url的前缀转发到不同的服务，呈现了接口报405的谬误，网上查了好多文档，说了好多种起因，通过排查定位，最终定位到的起因是申请的url地址不对，多了一个转发的前缀。 解决因为定位到了起因是申请的时候多了一个web容器/assetslog的上下文地址，如下图所以如果能够在转发的时候，将这个前缀去掉，就能够失常拜访，比方: a.com/user/user.html转发到用户服务b.com/user.htmla.com/order/order.html转发到订单服务b.com/order.html即，url的前缀对上游的服务是不须要的，除非上游服务增加context-path, 但很多时候咱们并不喜爱加这个。如果Nginx转发的时候，把这个前缀去掉就好了。 办法1：proxy_pass前面加根门路/server { listen 80; server_name a.com; location ^~/user/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_pass http://user/; } location ^~/order/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; proxy_pass http://order/; }}^~/user/示意匹配前缀是user的申请，proxy_pass的结尾有/， 则会把/user/*前面的门路间接拼接到前面，即移除location上的规定 user和order 办法2：应用rewrite，留神到proxy_pass结尾没有/， rewrite重写了urlserver { listen 80; server_name a.com; location ^~/user/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; rewrite ^/user/(.*)$ /$1 break; proxy_pass http://user; } location ^~/order/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; rewrite ^/order/(.*)$ /$1 break; proxy_pass http://order; }}此外nginx还能够简略的间接把申请一成不变的转发给下一个服务比方，拜访a.com/app/a/b.html, 要求转发到b.com/app/a/b.html设置proxy_pass即可。申请只会替换域名 ...

毫无疑问小程序，对电商行业的商机是很显著的。相比h5/wap、公众号等商城，具备更大的倒退空间。其次就是交易成本低，交易标准化、流量起源与转化多样化等劣势，能让商户和买家更加不便、快捷的拜访小程序，为用户提供更加欠缺的服务，助力企业的业绩增长，基于此趋势，很多中小企业都在能过各种各样的形式来开发与经营本人的商城小程序。一、开发一个商城小程序报价三五万正当吗通过几年的倒退，各种各样的小程序充斥着整个互联网，商城小程序也有各种各样的，如果在本身没有非凡的性能要求之下，只是弄个商城小程序来买买本人的几个产品，在不思考访问量，并发数，源码获取、以及当前的性能扩大，版权方面等问题，能够应用现成的SAAS小程序制作商城，以及商城小程序模板。个别几千块就能买到。当然，SaaS小程序制作的商城小程序，有其局限性，如果有些非凡或共性的性能，Saas商城小程序是做不了的。如果须要依据企业本人业务逻辑模式或业务须要进行性能开发，大部分时候，saas商城小程序是不能满足要求的。这个时候，就须要让软件开发公司，依据理论的业务须要进行定制化开发，依据理论性能的多少进行独自定制开发的小程序，费用在几万也是比拟正当的。所以，个别在商城小程序源码根底上，进行的性能定制开发，几万的破费也是比拟失常的，是否要定制开发，依据本人的理论需要来决定，如果本人手里有比拟多的商家资源，可能会波及的不同行业的商家比拟多的话，倡议应用商城小程序源码+定制开发来搭建本人的商城小程序平台，因为，每个行业的商家所波及的业务状态是不一样的，所须要的性能也是不同的。二、OctShop商城小程序OctShop商城小程序是一个大型的B2B2C+O2O一体的，可收费开源的商城小程序，商城的所有零碎都是齐全自主，领有残缺的版权，所有性能都有源码。十多年的电商零碎开发教训与技术积攒积淀，弱小雄厚的研发实力反对，能够在原有的商城零碎源码根底上，实现客户的各种性能以及业务经营需要。  OctShop的商城小程序，任何一个页面，任何一个性能都能够进行批改以及性能的扩大。咱们是一生保证系统稳固运行的，只有不是性能减少开发，根本是一生收费售后，还有简略的性能与页面批改，只有不超过两三天的工作量都是收费的。蕴含私有化独立部署，装置，调试，零碎培训，实操培训，培训视频等服务，一年的售后服务。一次性买断，一生应用，附带源码。OctShop商城小程序，还提供了一个收费开源的根底版本，无需商业受权，用户就能够间接用于商业。源码下载地址：https://pc.opencodetiger.com/OctShop/SourceDown ，  商城小程序体验演示网址： https://pc.opencodetiger.com/OctShop/SystemDemo   ，用户能够依据开发文档一步一步做，就能够很快搭建起本人的一个大型的商城小程序零碎平台，开发文档地址： https://pc.opencodetiger.com/OctShop/DevelopDoc三、如何经营好一个商城小程序对于大部分企业来讲，小程序的小而精，即用即开，用完就走的个性，达到了小而精的目标，运营者或商家能够依据本人的业务和产品个性来运营商城小程序，从而来获取更多的精准的流量和访客，进步流量的转化率。找准小程序的定位，次要是解决一个商城小程序大而全的问题，商城小程序经营的业务和跨行业太多的话就扩散了经营精力，导致经营不精。还有重要的一点就是以商家的调性以及用户画像为核心来决定小程序的定位。中小企业要做好经营本人的商城小程序，须要有肯定的本人特色，与其余的平台辨别进去，给用户显明的记忆点。中小企业该当保持本身比拟强的品类与选品，保持走贴合用户需要的路线，致力找一些性价比，较高的商品与定位。找到本身特色，企业或商家在经营方面须要找到本人的强项与特色并凸显进去，再者就是找到本人的外围竞争力，这样能力在商城小程序强烈竞争当中生存下来，外围竞争力能够疾速的引流，取得一批忠诚的粉丝。企业或商家要想经营好一个商城小程序，要防止把经营范围做的太大，太全面，没有外围的商品或服务的商城小程序平台，在与同行竞争时就失去了劣势。

如何查看以后机器是否已装置某字体？如何获取以后机器所装置的所有字体？试试这个，无需装置，一键测试

Vim 是从 vi 倒退进去的一个文本编辑器，其代码补全、编译及谬误跳转等不便编程的性能特地丰盛，在程序员中被宽泛应用。 Vi 是老式的字处理器，性能尽管曾经很齐全了，但还有能够提高的中央。Vim 能够说是程序开发者的一项很好用的工具。对于大多数用户来说，Vim 刚开始学习的时候可能会停顿迟缓，然而一旦把握一些基本操作之后，就能大幅度提高编辑效率。明天咱们就来简略介绍下 Vim 及其基本操作。 Vim 的三种模式 从 vi 派生进去的 Vim 具备多种模式，这种独特的设计容易使初学者产生混同。简直所有的编辑器都会有插入和执行命令两种模式，并且大多数的编辑器应用了与 Vim 截然不同的形式：命令目录（鼠标或者键盘驱动），组合键（通常通过 ctrl 键和 alt 键组成）或者鼠标输出。Vim和vi一样，仅仅通过键盘来在这些模式之中切换。这就使得 Vim 能够不必进行菜单或者鼠标操作，并且最小化组合键的操作。对文字录入员或者程序员能够大大加强速度和效率。 基本上，Vim 能够分为命令模式、插入模式和底线模式三种模式，各模块的性能辨别如下： 命令模式：应用 vim 编辑文件时，默认处于命令模式。在此模式下能够应用上、下、左、右键或者k、j、h、l键进行光标的挪动，还能够对文件内容进行复制、粘贴、替换、删除等操作。 插入模式：在该模式下能够对文件进行写的操作，相似于 windows 的文档操作。进入插入模式的办法是在命令模式下按 "i"或者"a"或者"o"，编写实现后按 Esc 即可回到命令模式。 i：从光标目前所在位置插入所输出的字符 a：从目前光标所在位置的下一个字符处插入所输出的字符 o：插入新的一行从行首开始输出 底线模式：如果要保留、查找或者替换一些内容等，就须要进入底线模式。底线模式的进入办法为：在命令模式下按":"键，Vim 窗口的左下方会呈现一个":"符号，这时就能够输出相干的指令进行操作了。指令执行后会主动返回命令模式。 Vim 的基本操作一、关上文件或者新建文件对立命令： vim 文件名 例子：vim 11.txt 而后在页面的左下角能够看到文件的信息，行数和字符数，例如上图：3行、426个字符。 二、光标的挪动以字符为单位挪动，在命令模式中应用 h、j、k、l 这 4 个字符管制方向，别离示意向左、向下、向上、向左 按G：挪动到文件最初按 gg: 挪动到文件的结尾按 0 或者^: 光标挪动到所在行的行首按 $: 光标挪动到所在行的行尾按 ctrl+f 往下翻一页按 ctrl+b 往上翻一页三、插入模式当处于插入模式，左下角的状态如下图所示： 当编辑实现，就能够按 Esc 退出插入模式，进入到命令模式。能够应用Shift+zz命令保留退出，其余保留和退出命令见下文。 ...

对于markdown置信大家都不生疏，日常写文档或日常记录都用到的比拟多，书写的是markdown的格局，实时预览的是转换后的html款式。本次实现的需要是在uniapp中转换markdown文本展现在不同的平台，次要平台是浏览器应用和微信小程序应用。 对于这两个平台目前没有一个比拟通用的解决方案，本次实现也是针对不同的平台独自实现，以下就是具体的实现过程。 浏览器实现浏览器实现次要基于marked，因为文本中会存在对代码的转换，所以还须要减少highlight.js解决代码高亮的状况。另外为了保障HTML的安全性，减少了DOMPurify库过滤HTML，DOMPurify可过滤不可信HTML和爱护应用程序免受歹意用户输出来帮忙避免跨站脚本攻打（XSS攻打）。 外围依赖包装置如下： npm install marked --savenpm install dompurify --savenpm install highlight.js --save外围依赖包援用如下： import { marked } from 'marked';import DOMPurify from 'dompurify';import hljs from "highlight.js/lib/common";// 代码主体款式文件import 'highlight.js/styles/github.css';marked应用前先进行初始配置初始化： marked.setOptions({ renderer: new marked.Renderer(), highlight: function(code) { return hljs.highlightAuto(code).value; }, pedantic: false, gfm: true, tables: true, breaks: false, sanitize: false, smartLists: true, smartypants: false, xhtml: false});而后即可对原始markdown文本进行html转换和平安过滤： this.html = DOMPurify.sanitize(marked.parse(text));转换之后的数据在html中渲染展现： <div v-html="parseHtml"></div>到此浏览器端实现就实现了，根本实现流程绝对比较简单。默认引入的款式不肯定满足需要，可通过笼罩款式重写，这个在小程序端也是同理。 微信小程序实现微信小程序外面实现较为简单一些，次要是基于Towxml 3.0实现。首先须要克隆我的项目到本地或间接到我的项目地址下载压缩包。 git clone https://github.com/sbfkcel/towxml.git装置依赖后在本地执行build编译代码 npm installnpm run build新构建进去的文件在dist目录下，把构建好的文件夹dist改名为towxml，在uni-app我的项目根目录中新建wxcomponents目录，将towxml复制进去即可。 towxml/decode.json中默认引入的组件依赖有些是用不上的，能够依据理论的状况进行删改。 ...

指标: 继续输入！每日分享对于web前端常见常识、面试题、性能优化、新技术等方面的内容。 次要面向群体：前端开发工程师（初、中、高级）、应届、转行、培训等同学 Day4-今日话题明天分享的是前端路由的进阶篇，将从路由的实现原理 、路由懒加载、路由预加载等多方面介绍。 路由实现原理前端路由的实现原理基本上是通过监听浏览器的 URL 变动，而后依据不同的 URL 门路来渲染不同的视图组件，从而实现页面切换和导航。这种机制使得在单页利用（Single Page Application，SPA）中可能实现无需刷新整个页面而只更新局部内容的成果，从而晋升用户体验。 次要的原理步骤如下：1.初始化路由配置 在利用启动时，配置所有可能的门路和其对应的组件，这就形成了路由表。 2.监听 URL 变动 前端框架会监听浏览器的 URL 变动，通常是通过浏览器提供的 popstate 事件或 hashchange 事件来实现。 3.解析 URL 框架会解析以后 URL，提取出门路和可能的查问参数、哈希等信息。 4.匹配路由 框架会依据解析到的门路，在路由表中查找匹配的路由配置。 5.渲染组件 找到匹配的路由配置后，相应的组件会被加载和渲染到页面中，实现页面切换。 6.更新 URL 如果反对历史模式的路由，框架可能会应用 pushState 或 replaceState 办法来更新 URL，以放弃 URL 与以后页面状态的一致性。 路由懒加载路由懒加载（Route Lazy Loading）是一种前端优化技术，它容许在须要时才加载特定页面的代码和资源，以缩小初始页面加载工夫。懒加载能够进步初始加载速度，因为不会一次性加载所有页面的代码，而是依据须要动静加载。这种技术在单页利用（SPA）中尤其有用，因为它们通常会有多个页面组件。 长处：缩小初始加载工夫： 懒加载只加载以后页面所需的代码，缩小了初始加载工夫，进步了用户体验。升高初始负载： 初始加载的代码量减少，加重了服务器和网络的累赘。节俭带宽： 懒加载能够防止一次性加载不必要的代码，节俭了带宽。毛病：加载提早： 当用户首次导航到一个新页面时，会产生短暂的加载提早，因为须要先加载该页面的代码和资源。代码宰割减少： 如果没有适当地划分代码，可能会导致过多的代码宰割，减少了保护的复杂性。在 Vue 和 React 我的项目中的实现：在 Vue2 我的项目中实现路由懒加载：Vue 提供了 import() 函数，能够在组件须要的时候动静加载代码。这能够通过在路由配置的 component 字段中应用 () => import() 语法来实现。 const routes = [ { path: '/home', component: () => import('./views/Home.vue') }];在 Vue3 我的项目中实现路由懒加载： ...

JVS-logic提供用户进行灵便配置和定制逻辑规定和行为的逻辑配置零碎。它由以下几个次要组成部分形成： 逻辑的治理逻辑的编排执行流的控制能力动态数据计算能力在线调试能力扩展组件的治理那么接下来，我先来看下具体的操作界面。 逻辑治理界面介绍进入逻辑引擎的操作界面，如下图所示：①：对逻辑可视化配置进行简要的介绍②：提供了对逻辑的目录式治理，反对拖动的形式调整菜单地位③：提供了逻辑治理与扩大组件的导航治理。 选中菜单中的逻辑，零碎会主动预览出逻辑配置的内容，如下图所示 ①：逻辑在目录中的地位，点击时，右侧会主动预览出逻辑的配置节点内容。②：逻辑预览配置内容，展现逻辑的具体服务编排的后果③：逻辑预览的导航栏展现，包含逻辑调用的实力和逻辑执行的日志逻辑的编排点击逻辑预览的设计按钮 进入逻辑的设计界面 ①：逻辑的根本信息设置，包含逻辑的名称、出入的参数等设置②：逻辑画布配置主界面③：设置逻辑执行的定时启动、周期执行④：执行的日志记录展现⑤：调用逻辑的示例展现 执行流的管制执行流控制包含串行执行、分支执行、循环执行，如下图所示 动静的数据处理能力逻辑引擎内置函数加工，能够通过入参、执行过程数据等多种形式，将数据进行动静加工援用，如下图所示： ①：函数配置窗口，通过函数式编程（类excel公式）的形式对数据进行加工解决，操作配置简略②：参数列表，能够援用入参、能够援用前述节点的执行后果用于数据的动静加工应用③：函数列表，提供了大量的内置函数，且这个函数能够自定义扩大④：函数解释阐明 在线调试能力在线实时调试是逻辑配置正确与否的要害性能，如下图所示： ①：在线执行按钮，点击按钮时，零碎会执行本逻辑②：逻辑执行历史记录，能够回显历史执行的过程与后果③：鼠标悬浮在执行节点上时，零碎会将逻辑执行的过程数据弹出展现 组件扩大界面介绍点击进入扩大界面，如下图所示： ①：新增扩大组件②：零碎内集成组件的展现。在线demo：https://frame.bctools.cn/gitee地址：https://gitee.com/software-minister/jvs-logic 逻辑引擎往期介绍低代码外围工具，jvs-logic逻辑引擎的背景及核心作用低代码、逻辑、规定、数据分析、协同工具汇合，解决企业不同需要

面试官：为什么说HTTPS比HTTP平安? HTTPS是如何保障平安的？一、平安个性在上篇文章中，咱们理解到HTTP在通信过程中，存在以下问题： 通信应用明文（不加密），内容可能被窃听不验证通信方的身份，因而有可能遭逢假装而HTTPS的呈现正是解决这些问题，HTTPS是建设在SSL之上，其安全性由SSL来保障 在采纳SSL后，HTTP就领有了HTTPS的加密、证书和完整性爱护这些性能 SSL(Secure Sockets Layer 安全套接字协定),及其继任者传输层平安（Transport Layer Security，TLS）是为网络通信提供平安及数据完整性的一种平安协定 二、如何做SSL 的实现这些性能次要依赖于三种伎俩： 对称加密：采纳协商的密钥对数据加密非对称加密：实现身份认证和密钥协商摘要算法：验证信息的完整性数字签名：身份验证对称加密对称加密指的是加密和解密应用的秘钥都是同一个，是对称的。只有保障了密钥的平安，那整个通信过程就能够说具备了机密性 非对称加密非对称加密，存在两个秘钥，一个叫公钥，一个叫私钥。两个秘钥是不同的，公钥能够公开给任何人应用，私钥则须要窃密 公钥和私钥都能够用来加密解密，但公钥加密后只能用私钥解密，反过来，私钥加密后也只能用公钥解密 混合加密在HTTPS通信过程中，采纳的是对称加密+非对称加密，也就是混合加密 在对称加密中讲到，如果可能保障了密钥的平安，那整个通信过程就能够说具备了机密性 而HTTPS采纳非对称加密解决秘钥替换的问题 具体做法是发送密文的一方应用对方的公钥进行加密解决“对称的密钥”，而后对方用本人的私钥解密拿到“对称的密钥” 这样能够确保替换的密钥是平安的前提下，应用对称加密形式进行通信 举个例子：网站机密保存私钥，在网上任意散发公钥，你想要登录网站只有用公钥加密就行了，密文只能由私钥持有者能力解密。而黑客因为没有私钥，所以就无奈破解密文 上述的办法解决了数据加密，在网络传输过程中，数据有可能被篡改，并且黑客能够伪造身份公布公钥，如果你获取到假的公钥，那么混合加密也并无多大用处，你的数据扔被黑客解决 因而，在上述加密的根底上仍需加上完整性、身份验证的个性，来实现真正的平安，实现这一性能则是摘要算法 摘要算法实现完整性的伎俩次要是摘要算法，也就是常说的散列函数、哈希函数 能够了解成一种非凡的压缩算法，它可能把任意长度的数据“压缩”成固定长度、而且举世无双的“摘要”字符串，就如同是给这段数据生成了一个数字“指纹” 摘要算法保障了“数字摘要”和原文是齐全等价的。所以，咱们只有在原文后附上它的摘要，就可能保证数据的完整性 比方，你发了条音讯：“转账 1000 元”，而后再加上一个 SHA-2 的摘要。网站收到后也计算一下音讯的摘要，把这两份“指纹”做个比照，如果统一，就阐明音讯是残缺可信的，没有被批改 数字签名数字签名能确定音讯的确是由发送方签名并发进去的，因为他人混充不了发送方的签名 原理其实很简略，就是用私钥加密，公钥解密 签名和公钥一样齐全公开，任何人都能够获取。但这个签名只有用私钥对应的公钥能力解开，拿到摘要后，再比对原文验证完整性，就能够像签订文件一样证实音讯的确是你发的 和音讯自身一样，因为谁都能够公布公钥，咱们还短少避免黑客伪造公钥的伎俩，也就是说，怎么判断这个公钥就是你的公钥 这时候就须要一个第三方，就是证书验证机构 CA验证机构数字证书认证机构处于客户端与服务器单方都可信赖的第三方机构的立场 CA 对公钥的签名认证要求包含序列号、用处、颁发者、无效工夫等等，把这些打成一个包再签名，残缺地证实公钥关联的各种信息，造成“数字证书” 流程如下图： 服务器的经营人员向数字证书认证机构提出公开密钥的申请数字证书认证机构在判明提出申请者的身份之后，会对已申请的公开密钥做数字签名而后调配这个已签名的公开密钥，并将该公开密钥放入公钥证书后绑定在一起服务器会将这份由数字证书认证机构颁发的数字证书发送给客户端，以进行非对称加密形式通信接到证书的客户端可应用数字证书认证机构的公开密钥，对那张证书上的数字签名进行验证，一旦验证通过，则证实： 认证服务器的公开密钥的是真实有效的数字证书认证机构服务器的公开密钥是值得信赖的三、总结能够看到，HTTPS与HTTP尽管只差一个SSL，然而通信安全失去了大大的保障，通信的四大个性都以解决，解决形式如下： 机密性：混合算法完整性：摘要算法身份认证：数字签名不可否定：数字签名同时引入第三方证书机构，确保公开秘钥的安全性 参考文献https://zhuanlan.zhihu.com/p/100657391https://juejin.cn/post/6844903830987997197#heading-7https://cloud.tencent.com/developer/article/1748862

前言模块指的是应用@Module装璜器润饰的类，每个应用程序至多有一个模块，即根模块。根模块是Nest用于构建应用程序的终点，实践上Nest程序可能只有根模块，但在大多数状况下是存在多个模块的，每个模块各自封装一组相干的性能。 @Module装璜器@Module()装璜器能够传入一个对象，属性值如下： providers将由 Nest 注入器实例化的提供程序，并且至多能够在该模块中共享controllers该模块中定义的必须实例化的控制器集imports导入模块的列表，导出该模块所需的提供程序exports该子集providers由该模块提供，并且应该在导入该模块的其余模块中可用@Module({ imports: [NanjiuModule, UserModule], controllers: [AppController], providers: [AppService],})export class AppModule {}模块共享如果你想把以后模块的service裸露给其它模块应用，则能够应用exports到处该服务 比方我应用nest g resource info新建了一个info类，并且应用export导出该服务 // info.module.tsimport { Module } from '@nestjs/common';import { InfoService } from './info.service';import { InfoController } from './info.controller';@Module({ controllers: [InfoController], providers: [InfoService], // 提供者 exports: [InfoService] // 导出 InfoService 供其余模块应用})export class InfoModule {}而后我在user模块中应用imports导入该模块 // user.module.tsimport { Module } from '@nestjs/common';import { UserService } from './user.service';import { UserController } from './user.controller';import { InfoModule } from 'src/info/info.module';@Module({ imports: [InfoModule], // 导入 InfoModule controllers: [UserController], providers: [UserService]})export class UserModule {}最初在controller中依赖注入并应用 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home 以下是你相对应该理解的7个VS Code技巧，这些技巧无疑会将你的生产力晋升到月球！ 1. Sticky Scroll 粘性滚动 是否常常在浏览长文件时迷失方向？ Sticky Scroll 来救济！它在屏幕顶部显示你所在的函数/类，这样你就再也不会迷失方向了！ 你能够通过拜访 Settings 并搜寻 Sticky Scroll 来启用它。 2. Command Palette 命令面板 须要疾速执行一个命令吗？ Command Palette 在这里帮忙你！只需应用快捷方式并抉择你须要的命令即可: Windows: Ctrl + Shift + P Windows: Ctrl + Shift + PMac: Cmd + Shift + P Mac: Cmd + Shift + P3. Custom Snippets 自定义片段 发现自己一遍又一遍地重写同样的代码吗？有了 Custom Snippets ，你能够实现自动化！ 你能够在这里找到它们：https://tapajyoti-bose.medium.com/how-pros-automate-repetitiv... 4. File Finder 文件查找器 ...

起因是这样的，我发现我的工资代扣个税，相较以前翻了三、四倍，工资也没给我涨呀，怎么交税还多了。狐疑给我算错了，于是我翻了翻材料找到一张税务总局的个人所得税税率表。 它是这样计算的： 1. 一年分成12个月，交征税也分为12期2. 本期应预扣预缴税额 = （累计预扣预缴应征税所得额 * 税率 - 速算扣除数）- 累计已预扣预缴税额3. 累计预扣预缴应征税所得额 = 累计支出 - 累计免税支出 - 累计减除费用 - 累计专项扣除 - 累计专项附加扣除 - 累计依法确定的其余扣除4. 其中，累计减除费用，依照5000元/月乘以纳税人当年截至本月在本单位的任职受雇月份数计算 举个例子，假如张三每月工资收入20000，各项社会保险金（五险一金）扣除为1000。 在八月份： 张三累计减除费用是5000*8=40000累计专项扣除是1000*8=8000排除张三有免税支出等状况，他的累计预扣预缴应征税所得额为20000*8-40000-8000=112000，累计预扣预缴应征税所得额112000对应税率表的2级数，所以第八期应预扣预缴税额为(112000*0.1-2520)-累计已预扣预缴税额。累计已预扣预缴税额是前7个月的征税总和。这样计算，20000*7-5000*7-1000*7=98000 对应税率表的2级数，前7期累计已预扣预缴税额为98000*0.1-2520 = 7280最初，张三在八月份，他要征税为(112000*0.1-2520)-7280=1400等等，文章还没完呢，不然又有人怼我纯水了。 我发现网络上像这类征税计算器参差不齐，计算公式差得离谱，所以决定本人入手撸一个。 个税计算器因为html、css、js代码内容长，所以我把这部分内容拼接成一张大图，也不便读源码。css布局大量应用Flex弹性布局，不理解的同学先学习一波《和我女神王冰冰一起学display: flex布局》。 形容下js逻辑层： 本月工资、社保（五险一金）、专项附加扣除都要乘以征税期数，别离计算出各自的累计数本月工资、社保（五险一金）、专项附加扣除、累计减除费用累计数相减计算后，就是累计预扣预缴应征税所得额（累计应缴税款）个人所得税税率表转化成taxRates数据结构，累计预扣预缴应征税所得额作为参数调用getTaxRate办法返回税率、速算扣除数累计已预扣预缴税额（已缴税款）计算为征税期数减1，而后以减后的征税期数再反复一遍上述计算过程本期应预扣预缴税额（应交税额）= 累计预扣预缴应征税*税率-速算扣除数-累计已预扣预缴税额（已缴税款）布局兼容到了PC端、挪动端，它们别离是这样的： 想要源码的同学，能够拜访上面链接保留页面即可。 个税计算器在线链接：https://www.linglan01.cn/c/salary/ 最初的话文章中一类的个税计算器，个别计算出来的后果是有偏差的，起因如下： 每月工资不是固定的，受KPI影响工资会有肯定起浮奖金类的支出也要计算进去，如果有奖金没有计算进累计预扣预缴应征税所得额，那计算的后果就是会偏差所以说，个税计算器只能计算出大略的税。 想要精确的计算本人征税状况，倡议下载个人所得税APP。 当工资收入越高，应征税所得额比重也会增大，比重在到肯定水平后，我想咱们应该要思考如何非法避税。 每年年未都会有一次在个人所得税APP提交专项附加扣除，它能肯定水平上补返回税额给咱们。 另外，开明集体养老金帐户也能够进行肯定额度的避税，未来养老滋不滋润重点看这个帐户。我支出还不足以供集体养老帐户，有条件、有须要的同学能够去理解一下。 如果我的文章对你有帮忙，您的就是对我的最大反对^_^。 欢送围观朋友圈、加我微信拉您退出「人类高质量前端交换群」

软件工程定义：将工程办法系统化地利用到软件开发中前端倒退历史前端工程化的倒退历史能够追溯到互联网的晚期阶段，随着前端技术的一直演进和互联网利用的复杂化，前端工程化也逐步成为了前端开发的重要畛域。以下是前端工程化的次要倒退里程碑： 1995年，Brendan Eich创造Javascript2005年，Ajax(Asynchronous Javascript And XML)广泛应用2008年，V8引擎公布,意味着js能够脱离浏览器应用2009年，Node.js公布，标记了前端工程化进入飞跃的时代2010年，Npm 0.1版本公布标记的模块化的时代到来2013年，Webpack 1.0版本公布，标记着当初前端开发模式正式造成。2013年，React 1.0版本公布2014年，Vue1.0版本公布，标记着前端MVVM时代到来前端开发模式进化过程前端开发模式经验了多个阶段的演进，以下是前端开发模式的次要进化过程： 前后端混合(1995\~2005)：服务端渲染，javascript仅实现交互前后端拆散(2005\~2013)：借助ajax实现前后端拆散、SPA等新模式模块化开发(2013\~2014)：npm治理模块、Webpack编译打包资源模块化+MVVM(2014\~至今)：基于React或Vue开发，不再开发html，开发html成为历史开发过程中的问题新近，咱们在开发过程中难免会遇到一些问题： 想要应用ES6+个性，然而兼容性有问题想要应用Less/Sass/PostCSS加强CSS的编程性，然而运行环境不能间接反对想要应用模块化的形式进步我的项目的维护性，但运行环境不能反对除了下面反对的工作以外，咱们在开发过程中也有重复性的工作，例如部署上线前须要手动压缩代码及资源文件，部署过程须要手动上传代码到服务器。手动会呈现各种各样的工作。多人合作开发，无奈硬性对立大家的代码格调，从仓库中pull回来的代码品质无奈保障，拉回来的代码运行解体。除了编码问题，在开发局部性能时，须要期待后端服务接口提前完成以上问题能够看出工程化次要解决的问题次要分为：传统语言或语法的弊病，无奈应用模块化、组件化，重复性的机械式工作，代码格调对立、质量保证，依赖后端服务接口反对，整体依赖后端我的项目。 工程化介绍前端工程化是应用软件工程的技术和办法来进行前端的开发流程、技术、工具、教训等规范化、标准化，其次要目标为了提高效率和降低成本，即进步开发过程中的开发效率，缩小不必要的反复工作工夫，而前端工程实质上是软件工程的一种，前端工程是指将工程办法系统化地利用到前端开发中，以零碎、谨严、可量化的办法开发、经营、保护前端应用程序，目标是降本提效。 在理论开发的过程中，一个残缺的迭代周期须要顺次通过开发、测试、部署、公布这几个环节，并且在产品上线之后，咱们还须要对产品进行稳定性保障也就是实时的监控和报警零碎，防止产品宕机。那么，工程化须要解决的问题就是如何在整个的迭代周期中降本提效。 工程化的体现是所有以提高效率、降低成本、质量保证为目标的伎俩都属于工程化，所有反复的工作都应自动化。咱们从我的项目的创立、编码、预览、提交、部署这几个环节中，每一个环节都能够用工程化的形式去提高效率。 创立我的项目：应用脚手架工具主动实现根底构造的搭建编码：借助工程化的工具主动的实现代码的格式化以及格调的校验，从而确保所有开发人员代码格调统一，借助编译工具去应用新的个性进步编码效率预览：能够借助Web服务能运行利用，同时提供热更新、SourceMap定位问题、Mock接口的性能提交：在提交代码之前应用Git Hooks和Lint-staged实现我的项目代码的查看，确保不会把有问题的代码提交到仓库中。部署：能够应用脚手架命令实现我的项目的上传，从而代替传统的ftp上传形式。还能够实现在代码提交过后自动化的通过继续集成和继续部署的形式，主动将代码部署到服务器中。工程化不是某个工具，例如webpack性能很弱小，然而它并不是工程化。工程化的外围是对我的项目整体的布局、架构，而工具只是帮忙咱们落实工程化的工具和伎俩。 那么咱们应该去选用那些工具来搭配实现工程化的布局呢？咱们能够参考create-react-app、vue-cli、angular-cli、gatsby-cli等官网脚手架，它不是一个工具，而是一个成熟的工程化集成计划。以vue-cli为例，创立Vue我的项目的同时，vue-cli提供了模板抉择、编译以及本地开发服务器等功能模块。对于应用vue-cli创立的Vue我的项目，业务开发人员毋庸操心简单的webpack配置，只需关注业务逻辑开发自身，这很大水平上升高了开发的工夫老本。 工程化个性前端工程化能够分成四大个性来说，别离为： 模块化：将一个文件拆分成多个相互依赖的文件，最初进行对立的打包和加载，这样可能很好的保障高效的多人合作。其中蕴含 JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是款式笼罩。而 CSS Modules 则是通过 JS 来治理依赖，最大化的联合了 JS 模块化和 CSS 生态，比方 Vue 中的 style scoped。资源模块化：任何资源都能以模块的模式进行加载，目前大部分我的项目中的文件、CSS、图片等都能间接通过 JS 做对立的依赖关系解决。组件化：不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。 通常，咱们会须要对页面进行拆分，将其拆分成一个一个的整机，而后别离去实现这一个个整机，最初再进行组装。在咱们的理论业务开发中，对于组件的拆分咱们须要做不同水平的考量，其中次要包含细粒度和通用性这两块的思考。对于业务组件，你更多须要考量的是针对你负责业务线的一个实用度，即你设计的业务组件是否成为你以后业务的 “通用” 组件。规范化：正所谓无规矩不成方圆，一些好的标准则能很好的帮忙咱们对我的项目进行良好的开发治理。规范化指的是咱们在工程开发初期以及开发期间制订的系列标准，其中又蕴含了： 我的项目目录构造文档规范化接口规范化编码标准：对于编码这块的束缚，个别咱们都会采纳一些强制措施，比方 ESLint、StyleLint 等。联调标准文件命名标准款式治理标准：目前风行的款式治理有 BEM、Sass、Less、Stylus、CSS Modules 等形式。git flow 工作流：其中蕴含分支命名标准、代码合并标准等。定期 code review… 等等自动化：从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为咱们节俭很多工作。而这些前端自动化其中的一部分，前端自动化还蕴含了继续集成、自动化测试等方方面面。前端工程化的3个阶段本地工具链前端工程化的初级阶段便是将各类工具的性能进行整合，为业务开发人员提供对立标准的工具栈。咱们无妨将此阶段的前端工程化称为本地工具链状态。此状态下的所有工程化功能模块，包含构建、本地服务器、部署等，均在本地环境下工作。 本地工具链状态的工程化计划解决的问题，升高了业务开发人员学习、应用工具的老本。这个计划将简单的性能需要全副交给工具链外部解决，工具链的对立，另一个益处是坚固了流程的规范性，开发者应用对立的工具链、遵循对立的标准进行业务代码的编写，利于多人合作与程序的保护。 治理平台本地工具链状态的工程化尽管解决了前端开发以及前后端合作开发中的局部痛点问题，但因为所有的功能模块均在本地环境工作，因而必然会受到环境差异性的影响，比方操作系统类型、版本、内核等。这些因素会在肯定水平上影响构建产出代码的一致性。为此前端工程化进化到下一进化状态：集中管理的云平台。 治理平台状态的工程化做到了以下几点。 淡化环境差异性，保障构建产出的一致性。权限集中管理，进步安全性。我的项目版本集中管理，便于危机解决，比方版本回滚等。治理平台状态将各个功能模块的执行环境集中化，从各模块实现角度来讲与本地工具链基本一致。 继续集成即便进化到治理平台状态，前端工程化计划所解决问题的实质依然只是将前端工程师与服务器端工程师的工作解耦。这尽管进步了两方的工作效率，但其各自的工作流却是孤立的。前端有了构建和部署，后端也有了相应的阶段，两方的工作流是拆散的，最终的交融工作依然难以避免繁缛的人工操作。所以前端工程化最终的完满状态，必然与整体工作流联合，作为继续集成计划中的一环。 ...

本文简介带尬猴！ 你是否在应用 Fabric.js 时心愿能在选中元素后自定义元素款式或选框（管制角和辅助线）的款式？ 如果是的话，能够释怀往下读。 本文将手把脚和你一起过一遍 Fabric.js 在对象元素选中后罕用的款式设置。 我将对象元素选中后的设置分成3类进行解说： 管制角辅助边其余款式状态 筹备工作创立一个画布和一个圆形。为什么是圆形而不是矩形？等下你就晓得了。 <canvas id="c" style="border: 1px solid #ccc;"></canvas><script> const canvas = new fabric.Canvas('c', { width: 400, height: 400, }) let circle = new fabric.Circle({ top: 80, left: 80, radius: 50, fill: '#ffde7d' // 淡黄色 }) canvas.add(circle)</script>一个蛋黄呈现了。下面这段代码是 Fabric.js 的根底。如果不太理解或者遗记语法了，能够查看 《Fabric.js 从入门到收缩》。 我最近也在整顿 Fabric.js 的罕用办法，有趣味的能够看看 《Fabric.js中文教程》 约定本文所说的管制角和辅助边请看下图。翻译能力无限，将就了解下吧~ 管制角管制角就是选中元素后周边呈现的几个方形。 实心管制角默认状况下，管制角是空心的。也就是只有边框，没有填充色。 如果想要做成实心的管制角，只需将元素的 transparentCorners 属性设置为 true 即可。 // 省略局部代码let circle = new fabric.Circle({ transparentCorners: false, // 其余配置...}) ...

近来，很多客户对OctShop店铺收款分账零碎有很大的需要，上面具体介绍一下，门店收款分账零碎是什么，以及其作用与意义是什么？店铺收款分账零碎本质上是一个解决门店各种收款场景，如：扫码付款，线高低单领取，余额积分抵扣领取的专业化零碎，能够帮忙平台型企业解决资金记账，分账，对账，管账，清理，报税等一零碎业务的综合解决方案，能够进步平台型企业整个交易过程的效率，帮忙平台型企业彻底解决二清问题。OctShop店铺收款分账零碎图片 一、平台型店铺收款零碎作用与意义个别做为平台型企业收款都会存在如下问题，买家在付款时，如扫码付款，在线领取付款，领取的款项怎么收款呢？个别的零碎是让企业间接去申请一个微信领取或者支付宝领取，而这些领取前面绑定的都是公司的公账。个别懂一些财务常识的老板都晓得。款项进入公账的每一笔，都须要开发票、报税。想想每个个人用户领取一笔款项就要开发票、报税、做账。一旦领取数量多了，这种数据量个别企业手动是无奈解决的。对于收款平台来讲，平台收的款项并不是本人的而是商家的，这样平台须要将款项结算给商家。这个过程就会产生二清问题，不合规。再者，公账 中的每一笔款项收入，也要向对方索取发票，否则会给公司做账带来十分大的麻烦。总之，对于平台来讲，钱的一进一出都会存在报税，账务，二清问题等麻烦。为了解决这个问题，抉择分账是一个老本很低的，而且高效的解决方案。后盾分账零碎界面截图二、聚合收款，领取渠道丰盛OctShop店铺收款分账零碎汇合了支付宝和微信领取的各种领取，并接入了相应的分账零碎。OctShop店铺收款分账零碎依据客户需要对接过各大银行的清分、结算、在线领取、分账零碎，并累积了相应残缺的源码。丰盛的领取与分账渠道能够满足用户的不同场景下的需要。从而进步付款用户的领取体验。大大提高用户粘性。目前，市场上的领取渠道，带领取分账的更是手续费高，对接流程简单-简短，平台企业对接起来耗时耗力。而间接应用OctShop店铺收款分账零碎源码，能够间接免去对接的开发的麻烦。间接申请通过后就能够应用。OctShop店铺收款分账零碎能够独立部署到客户指定的服务器上，零碎数据与平安客户能够本人齐全把握，并且能够提供零碎源码给客户，用户能够本人请技术人员进行二次开发，齐全能够接手整个零碎我的项目。三、门店收款零碎的主动分账当初互联网的商业状态多种多样，如：平台、代理、加盟、分销、分润、分成等。这种商业模式让平台型企业的资金结算与治理上无可避免的会遇到多方分账的，以及二清难题。不同角色的分账比例不同，结算形式也可能不同等都足够让账务人员机关用尽。要想扭转这种现状，接入带分账的收款分账零碎是老本最低，效率最高的形式。OctShop收款分账零碎在要管理员在平台后盾配置相应的参数就能够主动分账。实现全流程的自动化分账。平台或商家能够自在配置每笔订单分账的对象。分账收款对象能够是企业账号，集体账号或个体工商户。这样即能够大大提高企业的核算成本效率与升高人工成本，彻底解决账务，报税，二清等诸多麻烦。四、躲避平台二清、账务、报税等问题最几年来，很多资金量微小的平台或多或少都有二清问题，被举报、监管约谈也时有发生。对于想建设合规的资金结算形式是各大型平台企业的重点思考外围问题之一，OctShop收款分账零碎对接了支付宝分账、微信领取分账，各银行的领取清理分账零碎，能够实现分账，大大降低了资金转移与领取的危险，帮忙平台型企业彻底解决二清问题，晋升用户的交易信任度。要实现灵便自在的分账治理，跟上下游供应商实现高效的分账业务、收款分账零碎是一个最卓有成效的解决方案，实用于线上线下等多种业态。如：电商平台、物流平台、加盟连锁、商场、农贸市场等。

随着数字化时代的到来，PDF曾经成为了一种宽泛应用的文档格局。在许多场景下，咱们须要通过网页或应用程序来进行PDF文档的在线预览。而Java作为一种弱小的编程语言，能够提供一种不便、高效的形式来实现PDF在线预览。 Java实现PDF在线预览的目标是为了让用户可能通过网页或应用程序间接在浏览器中查看和操作PDF文档，而无需下载到本地并应用PDF阅读器进行关上。这样能够节俭用户的工夫和存储空间，并进步用户的应用体验。 Java实现PDF在线预览能够通过两种形式来实现：一种是通过应用Java的PDF解决库来解析PDF文档，并将其渲染为HTML或图片格式进行在线展现；另一种是通过调用第三方PDF阅读器插件或工具来实现在线预览。 第一种形式的劣势是能够实现更加定制化的展现成果，能够依据需要对文档进行格局转换和款式调整，同时也能够进行文档内容的搜寻和高亮显示。然而，这种形式须要应用Java的 PDF解决库，对于开发人员来说须要肯定的技术实力来进行开发和调试。 第二种形式的劣势是能够通过调用现成的PDF阅读器插件或工具来实现在线预览，无需本人进行PDF解析和渲染。这种形式相对来说更加简略和疾速，但可能受限于插件或工具的性能和兼容性。 永中DCS是一款弱小的文档在线预览和转换软件，它能够轻松实现PDF在线预览的性能。通过应用永中DCS的 Java SDK，开发人员能够疾速集成永中DCS的文档预览接口到本人的 Java应用程序中。 永中DCS的劣势在于其反对多种文档格局的预览和转换，并且能够放弃文档的原样输入，无需下载和装置任何插件或工具。此外，永中DCS还具备高度可定制化的特点，能够依据理论需要进行款式调整和性能扩大。

指标: 继续输入！每日分享对于web前端常见常识、面试题、性能优化、新技术等方面的内容。 次要面向群体：前端开发工程师（初、中、高级）、应届、转行、培训等同学 Day3-今日话题想必大家常常会在面试中或者工作生存中听到前端路由相干的问题或者话题，那么明天我将从以下几个方面聊聊前端路由： 1. 前端路由是什么？前端路由是指在单页利用（SPA）中，通过在前端治理和管制页面之间的切换和导航的机制。它容许用户在不来到以后页面的状况下浏览不同的内容，提供了更晦涩、响应更快的用户体验。前端路由通过监听 URL 的变动，依据不同的门路渲染不同的视图组件，实现页面的无刷新切换。 2. 前端路由模式有哪些？Hash 模式： 在 URL 中应用 # 前面的哈希局部来示意页面门路，例如 http://example.com/#/home哈希局部的变动不会导致浏览器向服务器发送申请，实用于没有服务器反对的场景。 History 模式： 应用浏览器的 History API 来扭转 URL 门路，不再须要应用 #，例如 http://example.com/home这种模式须要服务器反对，但相较于 Hash 模式，URL 更敌对 3. 路由守卫是什么？路由守卫是一些钩子函数，用于在页面导航产生时执行特定的操作，例如验证用户权限、重定向、勾销导航等。它们确保用户在拜访页面时具备正确的权限和行为。 在 React 中，你能够应用 React-Router 提供的 Route 组件的 render、component 或 children 属性来实现路由守卫。通过在这些属性中编写逻辑，能够在渲染前进行验证或重定向操作。 <Route path="/profile" render={() => { if (userIsAuthenticated) { return <Profile />; } else { return <Redirect to="/login" />; }}} /><Route path="/dashboard" children={({ match }) => { return match ? <Dashboard /> : <Redirect to="/login" />;}} />在 Vue 中，你能够应用 Vue Router 提供的全局导航守卫和路由独享守卫来实现路由守卫。 ...

我的项目中用到rancher公布前端代码，我本人参加了一次构建，遇到了很多的问题，不过一一解决了，用空闲的工夫，将遇到的问题记下来，也算是一次复盘了。 rancher是一个开源的企业级容器治理平台，重点“容器治理”，能够极大的简化容器治理的复杂度（绝对于K8s）,它是对于k8s容器引擎的封装，有趣味能够看看官网文档。 上传镜像须要先装置docker，确保docker是能够应用的。上面是Dockerfile文件和default.conf文件 FROM nginxCOPY ./build /usr/share/nginx/html/COPY ./default.conf /etc/nginx/conf.d/EXPOSE 80Dockerfile文件次要用于docker镜像的创立；FROM nginx：FROM指令初始化一个新的构建阶段，并为后续指令设置根底镜像，这里的根底镜像是nginx；COPY ./build /usr/share/nginx/html/：./build是前端打包之后的文件地址，将它复制到nginx的html目录下；COPY ./default.conf /etc/nginx/conf.d/：./default.conf是nginx配置文件, 将它复制到nginx的conf.d目录下；EXPOSE 80：监听80端口； 通过如下命令行打包代码（理论代码依据本人我的项目而定）： // 前端本地打包$ npm run build:prod// 移除之前旧的镜像$ docker rmi xx.harbor.com:10443/xx/front-web-project:1.0.0// 构建镜像$ docker build -f Dockerfile -t xx.harbor.com:10443/xx/front-web-project:1.0.0 .// push 镜像到镜像仓库$ docker push xx.harbor.com:10443/xx/front-web-project:1.0.0镜像仓库是提前构建好的，能够找运维工程师确认。我下面应用到的是harbor镜像存储库，这个是运维工程师搭建好的，我这边能够间接应用。镜像名和tag依据本人我的项目理论来。 Nginx配置上面就是nginx配置文件，因为是前端我的项目，nginx次要在这里做的就是动态资源服务器，接口代理。 server { listen 80; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods *; client_max_body_size 2000M; location / { root /usr/share/nginx/html/; index index.html index.htm; try_files $uri /index.html; }}nginx配置文件依据本人的理论需要编写，更多的配置也能够在这里持续增加（比例接口代理，负载平衡等）。 工作负载rancher是一个容器治理平台，是k8s的二次封装，提供更丰盛的性能，有趣味的同学，能够看看 官网 的相干材料。在rancher里工作负载是一个对象，包含pod以及部署应用程序所需的其余文件和信息。 ...

垂直居中 display: flex;justify-content: center;align-items: center;flex-direction: column;程度居中 display: flex;justify-content:space-between;align-items: center;display: flex; 弹性盒子由弹性容器justify-content 属性（程度）对齐弹性容器的我的项目，当我的项目不占用主轴上所有可用空间时。 提醒：请应用 align-items 属性 属性垂直对齐我的项目。flex-direction: column;灵便的我的项目将垂直显示，正如一个列一样。

中台框架前台我的项目 admin.ui.plus 的初识基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，内置反对一键生成微服务接口，适配手机、平板、pc 的后盾权限治理框架，心愿缩小工作量，帮忙大家实现疾速开发。框架一览我的项目地址 https://github.com/zhontai/admin.ui.plus技术栈 node 16+vue 3.xtypescriptelement plus特点 界面还能够，自定义度高，适配挪动端主动生成api接口定义文件没有适度封装零碎权限封装根本满足大部分我的项目举荐环境 Node v18VsCodeVsCode插件 TypeScript Vue Plugin (Volar)Vue Language Features (Volar)Vue 3 SnippetsESLintPrettier - Code formatter我的项目构造 bin 打包脚本gen 依据./templates生成api相干文件，接口更新后执行npm run gen:api会生成接口的定义和接口模型public 不须要打包的资源src 源码，vue我的项目构造，具体文档参考vue-next-admin，element-pluspackage.json script npm run dev 运行npm run build 打包npm run gen:api 生成api代码，增加了模块后退出到apis中默认实现性能用户治理：配置用户，查看部门用户列表，反对禁用/启用、重置明码、设置主管、用户可配置多角色、多部门和下级主管。角色治理：配置角色，反对角色分组、设置角色菜单和数据权限、批量增加和移除角色员工。部门治理：配置部门，反对树形列表展现。权限治理：配置分组、菜单、操作、权限点、权限标识，反对树形列表展现。租户套餐：配置租户套餐，反对新增/移除套餐企业。租户治理：配置租户，新增租户时初始化部门、角色和管理员数据，反对租户配置套餐、禁用/启用性能。字典治理：配置字典，查看字典类型和字典数据列表，反对字典类型和字典数据保护。任务调度：查看工作和工作日志列表，反对工作启动、执行、暂停等性能。缓存治理：缓存列表查问，反对依据缓存键革除缓存接口治理：配置接口，反对接口同步性能，用于新增权限点抉择接口，反对树形列表展现。视图治理：配置视图，反对视图保护性能，用于新增菜单抉择视图，反对树形列表展现。文件治理：反对文件列表查问、文件上传/下载、查看大图、复制文件地址、删除文件性能。登录日志：登录日志列表查问，记录用户登录胜利和失败日志。操作日志：操作日志列表查问，记录用户操作失常和异样日志。框架的应用1. 从GitHub 克隆/下载我的项目前端：git clone https://github.com/zhontai/admin.ui.plus.git后端：git clone https://github.com/zhontai/Admin.Core.git2. 启动运行装置好nodejs18+,vscode，执行 npm i && npm run dev 运行即可 启动地址：http://localhost:8100 默认会跳转到登录页，账号密码 admin 111111 会主动赋值 后盾 ZhonTai.Host 接口运行起来，登录无妨碍 ...

SAP UI5是一种用于构建古代Web应用程序的JavaScript框架，它提供了丰盛的UI控件、数据绑定和模型驱动的开发模式，用于创立用户敌对、功能强大的企业级利用。在SAP UI5框架中，BaseObject是一个重要的基类，Object.js是其中的一个文件，用于实现BaseObject类。本文将具体解释BaseObject的作用以及它在SAP UI5框架中的利用，同时提供示例阐明。 BaseObject的作用： BaseObject是SAP UI5框架中的一个基类，它是所有SAP UI5类的间接或间接基类。作为基类，BaseObject提供了一些通用的性能和办法，用于帮忙其余类继承这些性能，从而实现代码的重用和模块化。BaseObject提供了以下次要性能： 事件处理： BaseObject提供了事件处理的机制，使子类可能定义和触发事件，以便在利用中实现交互和通信。属性治理： BaseObject反对属性的定义和治理，包含属性的读取、设置和绑定等操作，从而实现数据驱动的UI开发。生命周期治理： BaseObject反对生命周期的治理，包含初始化、销毁等阶段，以确保资源的正确开释和治理。错误处理： BaseObject提供了错误处理的机制，容许子类抛出和捕捉异样，从而实现更强壮的利用。事件总线： BaseObject提供了事件总线的机制，用于实现不同组件之间的涣散耦合通信。BaseObject的利用示例： 假如咱们正在开发一个SAP UI5利用，波及到创立和治理不同类型的物品（Items）。咱们能够应用BaseObject作为物品的基类，从而实现属性治理、事件处理和错误处理等性能。以下是一个示例： sap.ui.define([ "sap/ui/base/Object"], function(BaseObject) { "use strict"; var Item = BaseObject.extend("my.app.Item", { constructor: function(sName, iValue) { BaseObject.call(this); this._sName = sName; this._iValue = iValue; } }); Item.prototype.getName = function() { return this._sName; }; Item.prototype.getValue = function() { return this._iValue; }; Item.prototype.setValue = function(iValue) { if (iValue >= 0) { this._iValue = iValue; this.fireEvent("valueChanged", { newValue: iValue }); } else { throw new Error("Value cannot be negative."); } }; return Item;});在这个示例中，咱们定义了一个名为Item的类，它继承自BaseObject。Item类具备以下性能： ...

React 是构建用户界面最风行的 JavaScript 库之一，它之所以取得如此多的关注，其中一个起因是其组件化架构。React 激励应用可重用组件来构建 UI，使开发人员可能更无效地构建简单的用户界面。 因为咱们要解决的是 React 中的组件，因而必须遵循组件设计的最佳实际。在本文中，咱们将探讨 10 种最佳实际，它们将帮忙您编写更简洁、更可保护和可重用的 React 组件。 1.统一的格局有几种办法能够在 React 应用程序中创立函数式组件，其中包含箭头函数、函数申明和函数表达式。所有这些都是创立组件的无效办法，但在应用程序中保持应用一种申明组件的办法是很重要的。不统一的组件函数会使代码难以浏览。 函数申明： function Test(){ return (<h1>这是觉Test组件</h1>)}函数表达式 const Test = function(){ return (<h1>这是觉Test组件</h1>)}export default Test箭头函数 const Test = () => { return (<h1>这是觉Test组件</h1>)}export default Test2.遵循并保持一种设计模式在 React 应用程序中应用设计模式能够使组件东倒西歪，便于浏览、测试和更改。其中两个曾经确立的实际包含： 容器/体现模式：遵循这种办法可确保业务逻辑和用户界面之间的关注点严格拆散。其中容器组件治理数据和状态，而示意组件专一于出现UI。更容易测试。Flux模式：Flux 模式由 facebook 团队引入，目标是在 react 应用程序中引入单向数据流。3.繁多责任准则应用程序中的每个组件都应该有一个繁多的职责，专一于一个特定的性能。遵循这一准则使组件更具可重用性，更不容易呈现bug。例如，在大多数状况下，“Button”组件应该只解决出现和用户交互。 4.prop类型和默认props值定义prop类型和默认值可确保组件的可靠性。PropTypes 验证预期的prop类型，尽早捕捉潜在的谬误。如果没有显式传递props，则默认props提供回退值，以防止意外行为。 您的我的项目中不应用 typescript？齐全没问题，您依然能够应用 propTypes 库实现这一指标。 npm install --save prop-typesimport PropTypes from 'prop-types';Button.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number,}; function Button(props) { const {name, age} = props return ( <div className='App'> <h1>Hello {name}</h1> <h2>I am {age}</h2> </div> );}export default Button;5.解构Props利用对象解构来拜访props，这能够缩小代码的简短性并加强可读性。它还进步了组件界面的清晰度，使辨认应用了哪些props变得更容易。 ...

在这个疾速教程中，咱们将应用JavaScript压缩带有文件输出元素的图像。咱们将压缩图像并将它们保留回文件输出，以便上传。 为了确保用户能够上传图片，并避免超大图片被上传，咱们能够在上传前压缩图片数据，而不用向用户提出各种要求。 如果您赶时间，或者感觉浏览代码自身更不便，能够跳转到这里的最终代码片段。 获取选定的图像文件在上面的示例中，咱们将承受所有类型的文件，但只压缩图像。multiple 属性容许抉择多个文件。 为了避免增加其余文件，咱们能够将文件输出承受属性设置为 image/*。 让咱们设置一个文件输入框，当用户抉择了一个或多个文件时，咱们将侦听 change 来检测。咱们将在下一节解决 TODO 我的项目。 <input type="file" multiple class="my-image-field" /><script> // 从文件输出中获取所选文件 const input = document.querySelector('.my-image-field'); input.addEventListener('change', (e) => { // 获取文件 const { files } = e.target; // 未选定文件 if (!files.length) return; // 对于文件列表中的每个文件 for (const file of files) { // 咱们不用压缩非图像文件 if (!file.type.startsWith('image')) { // TODO: 不是图像 } // TODO: 压缩图像 } // TODO: 贮存文件 });</script>当初，当用户抉择一个或多个图像文件时，咱们的代码就会运行。接下来是压缩图像。 压缩图像咱们将实现 compressImage 函数。该函数将把传递的文件对象转换为 ImageBitmap，并将其绘制到 <canvas> 元素中，而后画布将应用 toBlob API 返回压缩后的 JPEG。 ...

如果你正在思考应用JavaScript进行后端开发，你会听到“Node.js”这个术语。Node通常与开发功能强大的web服务器分割在一起。 但 Node.js 到底是什么？它是和 Angular 一样的 JavaScript 框架吗？它是一种编程语言吗？它是 JavaScript 库吗？它是一组技术的总称吗？或者它只是 JavaScript 的另一个词？ 在本文中，咱们将深刻理解 Node.js 的世界，理解它是什么、为什么创立它以及它的用处。这不是一个基于我的项目的教程——它旨在向初学者介绍 Node 及其工作原理。 以下是咱们将探讨的主题： Node.js的历史什么是Node.js？Node.js是如何工作的？Node.js 中的模块展望未来的 Node.js如果你喜爱理解软件工具及其工作原理，那么你肯定会喜爱浏览这篇文章。那么，让咱们开始吧。 1、Node.js的历史1995年，为网景公司工作的布兰登·艾奇（Brendan Eich）创造了JavaScript。但它是一种只能在浏览器上运行的编程语言。 网页最后只显示动态信息。JavaScript的创造满足了网页中更多交互行为的需要。有了这项创造，开发人员能够构建更动静的网页。 在Brendan Eich创造了JavaScript之后，许多公司也尝试应用这种语言来运行web服务器(服务器端脚本)。这些尝试包含网景的Livewire和微软的Active Server Pages。 但这素来没有成为开发web服务器的一种形式，即便JavaScript在浏览器中应用时持续取得风行。 2008年，谷歌公布了一款名为Chrome的新浏览器。这款浏览器的公布彻底改变了互联网浏览的世界。它是一个优化的浏览器，能够疾速执行JavaScript，并改善了用户在 Web 上的体验。 Google Chrome 浏览器之所以能如此疾速地执行 JavaScript 代码，是因为 Chrome 浏览器内运行着一个名为 V8 的 JavaScript 引擎。该引擎负责接管 JavaScript 代码，优化代码，而后在计算机上执行。 该引擎是客户端 JavaScript 的现实解决方案。谷歌 Chrome 浏览器成为当先的网络浏览器。 2009年，一位名叫Ryan Dahl的软件工程师批评了过后风行的后端服务器运行形式。最风行的构建Web服务器的软件是Apache HTTP服务器。Dahl认为它是无限的，因为它不能无效地解决大量的实时用户连贯(10,000 +)。 这也是 Ryan Dahl 开发 Node.js 的次要起因之一。Node.js 应用谷歌的 V8 引擎来了解和执行浏览器外的 JavaScript 代码。这是一个以运行网络服务器为目标的程序。 Node.js 是传统 Apache HTTP 服务器的一个很好的替代品，并缓缓取得了开发者社区的认可。 ...

在前端开发中，margin是一种重要的CSS属性，用于管制元素之间的空间和间隔。它不仅影响元素的外观，还能够影响整个页面的布局。本文将具体解释margin的概念、用处以及通过示例演示如何在HTML中应用margin来管制元素之间的间距。 概念margin是CSS（层叠样式表）中的一个属性，用于管制元素的外边距。外边距是元素与相邻元素之间的空间，它能够在元素四周创立空白区域。通过设置margin属性，您能够管制元素的外边距的大小，从而影响元素在页面布局中的地位和间距。 用处margin在前端开发中有多种用处，包含： 管制元素之间的间距： 最常见的用处是管制元素之间的间距。通过设置正数值的margin，您能够在元素四周创立额定的空白区域，从而实现元素之间的间隔。分隔元素： 应用margin能够在元素之间创立视觉上的分隔，进步页面的可读性和外观。布局调整： 通过调整元素的外边距，您能够在页面布局中创立空白区域，以适应不同屏幕尺寸和设施类型。定位： 在一些状况下，您能够应用正数的margin来调整元素的地位，从而实现一些非凡的布局成果。示例让咱们通过一些示例来具体阐明margin的用法和成果。 示例 1：根本的margin设置思考以下HTML代码： <!DOCTYPE html><html><head> <style> .box { width: 100px; height: 100px; background-color: blue; margin: 20px; } </style></head><body><div class="box"></div><div class="box"></div><div class="box"></div></body></html>在这个示例中，咱们定义了一个名为.box的CSS类，其中设置了元素的宽度、高度和背景色彩，并利用了margin: 20px;。这意味着每个.box元素四周都会有20像素的外边距，从而在它们之间创立了肯定的间距。 示例 2：不同方向的margin设置您能够为每个方向（上、右、下、左）独自设置margin。思考以下HTML代码： <!DOCTYPE html><html><head> <style> .box { width: 100px; height: 100px; background-color: red; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } </style></head><body><div class="box"></div></body></html>在这个示例中，.box元素的上边距是10像素，左边距是20像素，下边距是30像素，右边距是40像素。这会使元素在不同方向上有不同的间距。 示例 3：正数margin的应用通过应用正数的margin，您能够实现一些非凡的布局成果。思考以下HTML代码： <!DOCTYPE html><html><head> <style> .box { width: 100px; height: 100px; background-color: green; margin-top: -10px; margin-left: -20px; } </style></head><body><div class="box"></div></body></html>在这个示例中，.box元素的上边距和右边距都设置为负数值。这会使元素向上和向左挪动，与相邻元素重叠，从而实现一些非凡的布局成果。 总结margin是HTML和CSS中的一个要害概念，它用于管制元素之间的空间和间隔。通过设置margin属性，您能够调整元素的外边距，从而影响元素的布局和间距。margin属性不仅影响单个元素的外观，还能够影响整个页面的布局和可读性。理解如何应用margin能够帮忙前端开发人员创立出具备适合间距和布局的优雅Web页面。无论是分隔元素、调整布局还是管制页面外观，margin都是前端开发中不可或缺的一部分。 ...

Spartacus 是一个基于 Angular 的开源 JavaScript web 利用，与 SAP Commerce Cloud 的 REST API 进行交互。它的指标是提供一个稳固、牢靠、可扩大的前端解决方案，让开发者可能创立全功能的商店，同时防止了与后端系统的严密耦合。其中，B2B store 是一个专门为 B2B 交易设计的商店，而 My Company 是 B2B store 中的一个性能菜单，专门用于治理和配置 B2B 交易的相干性能。 以下是 My Company 菜单中可能蕴含的一些性能的具体介绍： 单位治理：在 B2B 交易中，通常波及到多个交易单位。单位治理 性能能够让你查看和治理你的公司的各个单位。例如，你能够创立新的单位，批改现有单位的详细信息，或者删除不再须要的单位。用户群治理：用户群治理 性能能够让你创立和治理用户群，这对于将你的客户分组十分有用。你能够依据各种条件（如地理位置、购买历史等）创立用户群，而后针对不同的用户群进行差异化的市场推广。估算治理：在 B2B 交易中，常常须要对每个单位的购买估算进行治理。估算治理 性能能够让你为每个单位设定购买估算，并监控估算的应用状况。老本核心治理：老本核心治理 性能能够让你为你的单位创立和治理老本核心。每个老本核心都能够有本人的估算，这对于跟踪和管制各个单位的破费十分有用。购买限度治理：购买限度治理 性能能够让你为每个单位设定购买限度。例如，你能够限度一个单位在肯定工夫内的购买量，或者限度他们购买某些特定的产品。订单批准治理：在 B2B 交易中，订单常常须要通过批准能力实现。订单批准治理 性能能够让你设置订单批准的流程，例如，你能够设置订单在被提交后须要由哪些人批准。

本教程前一篇文章，介绍了如何在 SAP Fiori Elements List Report 利用的 Table 区域里创立自定义 Action，并且在该 Action 对应按钮的点击事件处理函数里，应用 JavaScript 代码打印出以后选中的表格行我的项目的业务数据。 成果如下图所示： 前一篇教程的解决方案，依据按钮的 press 事件点击处理函数的输出参数 oEvent, 从其 oSource 字段拿到产生点击事件的 Button 实例，而后间断调用两次 getParent 办法，取得 List Report 表格的实例。 本文介绍另一种通过 Extension API 满足同样需要的开发方式。 Extension API 是 SAP Fiori Elements 利用开发人员进行的扩大开发，与 SAP Fiori Elements 框架提供的规范性能之间的官网接口。 开发人员只有正确应用这套官网接口，SAP 能力保障二次开发人员所实现的扩大，同 SAP Fiori Elements 的规范性能造成一个有机整体，确保零碎行为和性能的正确性和兼容性。 上面咱们通过 List Report 扩大的例子，具体学习 Extension API 的应用办法。 本例的残缺源代码地址如下。

我应用 Chrome 拜访网页，打不开网页，遇到如下谬误音讯： ERR_NAME_NOT_RESOLVED "ERR_NAME_NOT_RESOLVED" 是一个在 Google Chrome 浏览器中显示的谬误页面，意味着浏览器无奈解析您输出的域名来找到对应的 IP 地址，从而无奈建设与该域名的连贯。这个谬误会导致您无法访问特定的网站，因为浏览器无奈找到要连贯的服务器。 可能的起因： 域名拼写错误： 最常见的谬误之一是域名的拼写错误。如果您在地址栏中输出的域名拼写有误，浏览器会无奈正确解析该域名，从而引发 "ERR_NAME_NOT_RESOLVED" 谬误。DNS 配置问题： 域名解析是通过 DNS（Domain Name System）实现的，如果您所输出的域名没有正确的 DNS 配置，或者 DNS 配置呈现问题，浏览器就无奈将域名解析为 IP 地址。网络连接问题： 如果您的网络连接存在问题，浏览器可能无奈与 DNS 服务器通信，导致域名无奈解析。防火墙或代理设置： 一些防火墙或代理设置可能会影响域名解析，导致浏览器无奈找到正确的 IP 地址。服务提供商问题： 有时，服务提供商的 DNS 服务器可能呈现问题，无奈正确解析域名。举例说明： 假如您尝试拜访一个名为 "example.com" 的网站，但浏览器显示 "ERR_NAME_NOT_RESOLVED" 谬误。 域名拼写错误： 首先，您能够检查一下您输出的域名是否正确。确保没有拼写错误，例如 "exampel.com" 而不是 "example.com"。DNS 配置问题： 您能够尝试在终端或命令提示符中应用 "nslookup" 命令来查看域名是否可能正确解析为 IP 地址。如果没有正确的 IP 地址返回，可能是 DNS 配置问题。网络连接问题： 您能够尝试拜访其余网站，看看是否所有网站都无法访问，或者只有特定网站存在问题。如果只有特定网站存在问题，那么可能不是网络连接的问题。防火墙或代理设置： 如果您应用了防火墙或代理，尝试将它们禁用，而后再次拜访网站，看看是否问题解决。服务提供商问题： 如果其余网站都能失常拜访，只有特定域名存在问题，可能是域名所在服务提供商的 DNS 服务器呈现了故障。解决办法： 查看域名拼写： 确保您输出的域名没有拼写错误，且大小写正确。革除 DNS 缓存： 在命令提示符或终端中运行 "ipconfig /flushdns"（对于 Windows）或 "sudo dscacheutil -flushcache"（对于 macOS），革除本地 DNS 缓存。更改 DNS 设置： 尝试更改您的 DNS 设置，能够应用公共 DNS 服务器，如 Google 的 8.8.8.8 和 8.8.4.4。查看网络连接： 确保您的网络连接失常工作，尝试连贯其余网站，查看是否能失常拜访。查看防火墙和代理： 如果您应用防火墙或代理，尝试将它们禁用，而后再次尝试拜访网站。期待一段时间： 如果问题是由服务提供商的 DNS 服务器引起的，有时问题会在一段时间后自行解决。

笔者从 2007 年电子科技大学计算机专业硕士毕业后退出 SAP 成都研究院，始终从事 SAP 产品设计和研发工作至今，对 SAP 多项技术有着深刻透彻的钻研，尤其精通 ABAP 编程，SAP UI5(Fiori) 利用开发和 SAP OData 服务开发。 笔者将本人在 SAP 畛域 16年(2007～2023) 的技术积淀，进行了零碎的演绎和总结，别离写成了三套由浅入深的学习教程，收到了不错的反应： 零根底疾速学习 ABAP一套适宜 SAP UI5 开发人员循序渐进的学习教程SAP OData 开发实战教程 - 从入门到进步本教程是笔者开始编写的第四套开发教程。Fiori Elements 是 SAP 公司的旗舰级产品，第四代 ERP 产品即 SAP S/4HANA UI 界面的开发工具，能够说在 SAP 浩如烟海的技术开发体系中，占据着相对无足轻重的位置。 Fiori Elements 开发技术绝对 SAP 其余历史悠久，倒退成熟的开发技术来说，是一个新事物，它于 2013 年才在 SAP 公司外部试用，过后还称为 Smart Template. 正因如此，迄今为止国内深刻解说 Fiori Elements 利用的中文资料简直没有。而笔者从 2015 年起，就成为 SAP 公司外部第一批应用 Fiori Elements 工具来开发利用的先驱，对这门技术有着本人独到的了解。 本教程是笔者在工作实战中应用 Fiori Elements 积攒的开发教训和感悟的汇总。 上面是本教程的目录。笔者承诺该教程实现之后，文章篇幅不少于 100 篇。 ...

当我在浏览器里拜访网址 https://blog.csdn.net 时，遇到谬误音讯：blog.csdn.net's server IP address could not be found. 异样代码为 ERR_NAME_NOT_RESOLVED： 这个谬误 ERR_NAME_NOT_RESOLVED 是示意你的计算机无法解析申请的网站的 IP 地址。当你在浏览器里输出 https://blog.csdn.net，你的计算机会应用一个叫做 DNS (Domain Name System) 的零碎来将这个网址转换为服务器的 IP 地址。如果 DNS 服务器无奈找到与输出的网址绝对应的 IP 地址，或者你的计算机无法连贯到 DNS 服务器，就会呈现这个谬误。 上面是几种可能的解决办法。 第一种，革除浏览器的缓存和 cookies。有时候，浏览器缓存的旧的 DNS 信息可能会导致这个谬误。你能够在浏览器的设置中找到革除缓存和 cookies 的选项。 第二种，更改你的 DNS 服务器。你的计算机可能被设置为应用 ISP (Internet Service Provider) 提供的 DNS 服务器，但有时候这些服务器可能会呈现问题。你能够改为应用如 Google Public DNS 这样的公共 DNS 服务器。在 Windows 上，你能够在网络设置里找到 Internet Protocol Version 4 (TCP/IPv4) 的设置，而后抉择 Use the following DNS server addresses，在 Preferred DNS server 和 Alternate DNS server 中别离输出 8.8.8.8 和 8.8.4.4。 ...

Application Modeler 扩大容许 SAP UI5 开发人员可视化和更改 SAP Fiori Elements 应用程序的页面路由（页面地图），并通过清单设置(manifest settings)、正文属性(annotation properties)和 UI 灵活性更改（页面编辑器）配置各个页面。 从版本 1.10.1 开始，页面编辑器反对为基于 OData V4 的应用程序增加和保护 SAP Fiori Elements 构建块的属性。 此性能目前处于试验阶段，可能会依据客户反馈进行更改和加强。 SAP Fiori 工具 - Page Map 提供应用程序页面、导航及其应用的服务实体的可视化示意。 开发人员能够增加新的导航和页面、删除页面以及导航到相应的编辑工具。 Page Map 扩大以紧凑且独立于技术的表示法，读取并更新蕴含导航和页面信息的 app.json 文件。 该文件用作简略的基于文本的界面。 它是按需生成的，能够通过从“地图”节点的右键单击上下文菜单中选择“显示源代码”选项，从 SAP Fiori 侧边栏视图的应用程序建模器树视图中进行拜访。 保留app.json时，应用程序的应用程序描述符（webapp/manifest.json）将自动更新，并且对webapp/manifest.json的更改将转换为app.json。 app.json 是虚构的，不会写入我的项目文件夹。 Page Map 是 Application Modeler 的一部分，它提供了一种图形化的形式来展示和编辑利用的页面构造。在 Page Map 中，能够看到利用的各个页面及其相互之间的关系。开发者能够通过拖拽、编辑等操作来批改页面的构造。 app.json 是 SAP Fiori Tools 中的一个重要文件，它用于存储和治理利用的配置信息。这个文件通常会包含以下局部： "_version"：这个字段定义了 app.json 的版本信息。"sap.app"：这个字段蕴含了利用的元数据，比方利用的 id、title、description 等。"sap.ui5"：这个字段蕴含了 UI5 的配置信息，比方用到的模型、路由等。"sap.fiori"：这个字段蕴含了 Fiori 的配置信息，比方利用的类型等。"sap.platform.runtime"：这个字段蕴含了利用的运行时配置信息，比方利用的组件等。以一个简略的 app.json 为例： ...

本教程后面的文章，笔者介绍了应用 SAP Fiori Tools 这个工具里蕴含的 Application Modeler 提供的 Page Map 性能，来给 Fiori Elements List Report 利用增加自定义列的具体步骤。 10. 如何通过扩大(Extension)的形式给 SAP Fiori Elements List Report 的表格新增列咱们在 Visual Studio Code 里选中一个 Fiori Elements 工程，在命令栏抉择 Show Page Map，就能以图形化界面的形式，直观的显示以后选中 Fiori Elements 利用的技术明细信息： 如果大家跟着笔者的教程一起做，给 Fiori Elements List Report 利用增加了自定义列，则工程在 Visual Studio Code 里的 Page Map 显示如下图所示。点击红色高亮的铅笔符号： 就能看到咱们新增加的自定义列： 然而有敌人在应用 Page Map 这个性能时，不时会遇到 Page Map 无奈关上的问题，即下图这种空白屏幕，没有任何内容显示： 本文余下局部，具体介绍 SAP Fiori Tools 的 Application Modeler 提供 Page Map 的性能背地的实现原理，以及遇到问题时该如何排查。 ...

本教程之前的步骤，咱们介绍了如何应用 SAP Fiori Tools 这个扩大包的 Application Modeler 提供的 Page Map 来给 List Report 的 Table 控件增加自定义列的步骤。 本文介绍另一种在 Fiori Elements 利用里进行扩大开发的形式，即 Fiori Elements Guided Development 工具向导。 依照本教程介绍的步骤，实现之后的利用截图如下图所示。咱们能够很显著的察看到 List Report 工具栏区域多进去一个叫做 Test Action 的按钮。 点击之后，还能够弹出一个 Custom handler invoked 的 Message Toast 弹出框。 所谓 Guided Development，就是 SAP 曾经提前将 Fiori Elements 利用各种定制开发的步骤，以向导的模式封装起来，Fiori Elements 利用开发人员，只须要跟着向导，一步一步实现，最初就能达到本人想要实现的需要。 上面是具体的实现步骤。本例的源代码位于文末。

一、OctShop收费开源大型商城零碎，反对商用OctShop是一个收费开源的大型商城零碎，无需官网受权就能够间接商用，商城零碎集B2B2C和O2O模式于一体。采纳前后端拆散 + 八大数据库 + 分布式系统 + 微服务架构，反对高并发，十分弱小的数据处理性能。同时反对Windows和Linux部署，反对Docker容器化部署。OctShop商城零碎所有性能齐全API接口化，API接口同时兼容多种语言如：Java，C#，PHP，JavaScript，Swift，Oc，Dart等。如果用户须要对接第三方零碎，也能够依据客户需要，定制API接口以达到与第三方零碎的无缝对接。OctShop领有几十个电商相干零碎，如：商品类目零碎，商品规格零碎，结算零碎，抽成零碎，交易订单零碎，店铺收单收银零碎，售后零碎，店铺零碎，礼品，赠品，优惠券，积分领取，商品零碎，库存零碎，运费计算零碎，财务零碎，领取零碎，多种营销零碎，全网用户分成零碎，会员推广商品分润零碎，推广会员分润零碎，会员推广店铺商家分润零碎等等。能够帮忙企业打造本人的电商生态圈，让企业将本人的交易都线上化，最大限度的升高疫情对企业的冲击。上面是OctShop各电商零碎关系逻辑图二、抉择收费开源大型商城零碎，应该留神什么1、收费开源商城现状当初市面上有很多开源的模板商城，堪称也是泥沙俱下，想要挑到一款真正适宜本人，高质量，比拟全面的商城零碎真心不容易。很多客户常常在这个筛选的问题上花了很多的精力与摸索工夫，不停的体验各个厂商的商城零碎，同时也钻研了不少的开源商城。就是找不到真正贴合本人的，总感觉商城的某些业务逻辑不适宜。基于此状况，开源虎软件科技，把本人十多年不断更新迭代欠缺的大型商城零碎OctShop收费开源给大家，为用户提供一个更好的抉择。2、对于商城零碎知识产权个别你抉择应用其余厂商现成的开源电商零碎，软件的版权都是属于厂商的，有些是须要厂商进行商业受权。而OctShop根底收费开源版是不须要官网受权就能够商用的开源商城零碎。用户个别找的软件外包服务商开发商城，大部分操作是下载开源电商零碎，而后在此基础上进行二次开发，而后交付你应用。这时你肯定要留神知识产权问题，如果没有失去官网受权，等你平台经营大了当前，必定会有版权的法律问题。如果是开源官网个别都会申明源码只限于学习和钻研应用，如果是有商业行为那么就须要商业受权的。在没有受权的状况下，你进行了商业化使用，没有发现你，可能没事，如果你有实力了或被发现，那么，就会收到官网的律师函了，所以，在应用之前肯定要弄清楚版权问题。3、收费水平，是否完全免费市面上有很多各种各样的开源商城零碎，很多都说收费，而根底性能收费，但用到一些高级一点的性能就要免费了。OctShop根底版是完全免费开源的，同时提供Git下载，只有企业版，专业版，定制版才是免费的。OctShop从Git下面下载的源码用户能够齐全放心使用，没有免费的性能限度，也不须要官网受权就能够商用。4、收费开源商城零碎性能降级应用OctShop根底版源码，商城性能都能够满足用户的个别网上购物需要与流程，如果你想对某此性能进行降级，或者退出本人个性化的业务逻辑，如：退出本人的分销逻辑，会员等级逻辑等。这时你就须要认真浏览官网的性能文档啦，而OctShop商城零碎所有性能都API接口化，只有你调用接口就能够实现利用的性能业务逻辑。免去了浏览简单的源码，如果是比较复杂的性能，你也能够让官网技术团队代为开发。OctShop商城零碎总体简介： https://pc.opencodetiger.com/OctShop/TechOperDetail_810059.html

组态软件，又称监控组态软件，译自英文SCADA，即 Supervision,Control and Data Acquisition(数据采集与监督管制)，组态软件的应用领域很广，实际上，这些软件也是一种通用级的软件工具，能够通过灵便的配置疾速建设工业主动控制系统的监控性能。广泛应用于机械、汽车、石油、化工、造纸、水解决、过程管制等畛域。 随着技术的飞速发展，市场呈现了很多弱小的组态软件，接下来，咱们一起看看国内外支流且弱小的那些组态软件： 国外组态软件WinCC wincc是由SIEMENS(西门子)公司开发的一款简单的SCADA(数据采集与监控)零碎，一套性能十分弱小的组态软件;适宜所有工业畛域，反对多语言，全球通用。能够集成到所有自动化解决方案内，内置所有操作和治理性能，可简略、无效地进行组态。WinCC集生产自动化和过程自动化于一体，实现了相互之间的整合，实用于多种畛域，如汽车工业、化工和制药行业、印刷行业等等。 InTouch InTouch是最早进入我国的组态软件，原属于Wonderware公司，当初属于AVEVA剑维软件。 InTouch充沛开释了标签数量、有限读写网络拜访、集成历史记录、报告、开发工具(包含用于图形的云存储和通信驱动套件)的弱小性能。InTouch现代化降级的最大劣势在于，它无需对现有利用做任何重构和革新!利用云端和Web的弱小威力，使InTouch客户享受到真正无缝的降级过程。 iFIX Intellution公司以Fix组态软件起家，1995年被爱默生收买，当初是爱默生团体的全资子公司，Intellution将本人最新的产品系列命名为iFiX。iFIX组态软件是一种广泛应用于工业自动化畛域的嵌入式系统软件，具备弱小的数据处理和图形显示性能，被广泛应用于电力、化工、石油、制作等行业的监控和自动化管制中。 Citech 施耐德公司的Citect SCADA正式更名为“AVEVA Plant SCADA”，Citect是较早进入中国市场的产品，Citech的产品控制算法比拟好，但应用方便性和图形性能不迭InTouch。Citech具备简洁的操作形式，但操作形式更多的是面向程序员，而不是工控用户。Citech提供了相似C语言的脚本语言进行二次开发。值得一提的是，Citech也是较早进入中国市场的产品。 国内组态软件ForceControl ForceControl是一款通用型的人机可视化监控组态软件，是国内率先以分布式实时数据库技术作为内核的自动化软件产品。软件提供易用的配置工具和行业套件、良好的用户开发界面和简捷的工程实现办法，提供软、硬件全副接口实现与第三方的软、硬件系统集成。广泛应用于市政、水利、环保、配备制作、石油、化工、国防、冶金、煤矿、配电、新能源、制药、交通、教育等行业。 KingView kingview即组态王开发监控系统软件，是新型的工业主动零碎，它以规范的工业计算机软、硬件平台形成的集成系统取代传统的封闭式零碎。具备适应性强、开放性好、易于扩大、经济、开发周期短等长处。充分利用Windows的图形编辑性能，不便地形成监控画面，并以动画形式显示管制设施的状态，具备报警窗口，实时趋势曲线等，可便当的生成各种报表。 Sovit2D Sovit2D是一款功能强大的Web组态编辑器，由长沙数维图信息科技有限公司自主研发，采纳规范HTML5技术，基于B/S架构进行开发，反对 2D/3D图形组态，反对 MQTT 协定接入。配置界面可独自公布，可与企业自有平台无缝集成。Sovit2D具备宽泛的设计性能，提供丰盛的行业标准元器件图元库及多行业模板和组件，在浏览器端即可实现便捷的人机交互，简略的拖拽即可实现可视化页面的编排设计，可疾速构建现代化的SCADA、HMI、仪表板、IIOT零碎等，广泛应用于工业、水利、电力、能源、油气、环境、园区、交通等畛域。 HT for Web HT for Web是Web组态编辑器网站，由厦门图扑软件科技有限公司创立;HT for Web有一套丰盛的 JavaScript 界面类库，能提供残缺的基于 HTML5 图形界面组件库。能够构建现代化的跨桌面和挪动终端的企业应用。提供监控可视化解决方案，可用于疾速创立和部署，高度可定制化，并具备弱小交互性能的拓扑图形及表盘图表等利用。HT for Web 实用于实时监控零碎的界面出现，广泛应用于电信网络拓扑和设施治理，以及电力、燃气等工业自动化 (HMI/SCADA) 畛域。 Mcgs Mcgs由北京昆仑通态自动化软件科技有限公司研发，是一套基于Windows、用于疾速结构和生成上位机监控零碎的组态软件系统。Mcgs包含三个版本：网络版、通用版、嵌入版。Mcgs具备操作简便、可视性好、功能完善、可维护性强的突出特点;通过与其余相干的硬件设施联合，能够疾速、不便的开发各种用于现场采集、数据处理和管制的设施。 Controx ControX是国内支流的工控组态软件，是运行于Windows操作系统的工业监控零碎撑持软件。作为HMI/SCADA工具软件，其采纳真正的Client/Sever体系结构，反对实时数据共享和分布式历史数据库;接口完全符合OPC国际标准，提供方便、高性能的I/O驱动。在软件提供的平台上，可实现简单的管制画面和控制策略的结构，并失去及时精确的报表，是真正意义上的网络版工业自动化控制系统。

计算属性计算属性（computed）它能够依据其余响应式依赖项的变动自动更新。计算属性的次要作用是在须要对数据进行简单解决或计算时，提供一个更优雅、高效的解决方案。视频链接 // false未购买 true已购买 const buyStatus = ref(false)const buyStatusText1 = computed(() => { return buyStatus.value === true ? '已购买' : '未购买'})const buyStatusText2 = computed(function () { if (buyStatus.value === true) { return '已购买' } return '未购买'})computed函数的参数是一个==带返回后果的办法==。以上实例中别离在computed函数中应用箭头函数跟办法作为参数，并进行简略的逻辑判断返回后果，当响应式数据buyStatus被批改时,buyStatusText1,buyStatusText2会自动更新。 计算属性的特点响应式计算属性会主动收集依赖项，并在依赖项发生变化时触发更新。这使得计算属性可能很好地与 Vue 的响应式系统集成。 简化模板中的简单逻辑computed计算属性能够帮忙咱们在解决一些简单的逻辑时，使代码更加简洁可读。 进步性能应用办法来进行逻辑运算同样能够使模板放弃简洁，然而计算属性是基于它们的依赖项进行缓存的，只有在依赖项发生变化时，计算属性才会从新计算。这使得计算属性在性能上比应用办法更优越，因为办法在每次调用时都会从新执行计算。 留神点1. 在js中应用须要加上.value和ref一样，computed创立的变量在js代码中应用须要加上.value，在模板中应用不必加，计算属性是只读的，不能去批改它。 2. 不要在计算属性中批改依赖项计算属性是基于它们的依赖项进行缓存的，如果在计算属性中批改依赖项，可能会导致计算属性无奈正确缓存和更新。如果须要批改依赖项，应该应用办法或侦听器。 3. 不要在计算属性中执行异步操作计算属性应该是同步的，如果在计算属性中执行异步操作，可能会导致计算属性无奈正确缓存和更新。如果须要执行异步操作，应该应用办法或侦听器。 可写计算属性默认状况下计算属性都是只读的，在某些非凡场景中可能才须要用到可写属性,因为应用较少，有趣味的同学能够去官网理解。vue3官网-可写计算属性

在企业我的项目中，经常呈现须要给内部零碎提供一个api ，让内部零碎触发调用，本零碎间接数据入库，那么咱们来看看jvs的表单引擎与逻辑引擎联结实现这个性能 配置步骤：一、配置列表页如下图所示：①选中须要减少列表页的目录，在目录操作的主界面上②点击创立列表页设计，零碎进入列表页的设计器 在进入列表页设计器后①，如下图所示，增加界面上展现的数据字段②，点击保留后零碎主动创立对应数据存储的物理模型③，零碎主动创立“离线传输数据”的模型 这样咱们能够预览下界面，列表页曾经配置好 二、创立一个独立逻辑进入轻利用详情配置界面，如下图所示 ①：点击“订单治理"(轻利用的logo)，界面在右侧进入轻利用的详情配置页面②：点击业务逻辑菜单，右侧将把零碎内的逻辑全副展现进去③：点击新增业务逻辑，这里新建的业务逻辑是独立的，能够通过设置定时工作、或者api被触发。进入逻辑引擎的根本信息设计界面，如下图所示： ①：设置执行逻辑的名称②：设置执行逻辑的形容③：设置执行逻辑的入参，这里依照json的格局进行设置④：这里能够复制逻辑的调用凭证金融逻辑设计界面，进行逻辑的配置，如下图所示： ①：进入逻辑设计界面，展现具体逻辑的编排画布②：将内置的新增数据组件，拖拽进逻辑执行画布，并将开始节点与新增数据节点连接起来③：点击新增数据节点，右侧将逻辑节点的配置项展示进去④：抉择数据模型，选中列表页对应的数据模型“离线传输数据”⑤：设计字段取值形式为公式，点击设置进入公式配置界面如下图所示设置公式取值内容，内容间接取入参内容 三、应用postman 模仿调用逻辑获取利用的APP ID ，APP Secret与逻辑调用的凭证 设置postman的调用参数 在线demo：https://frame.bctools.cn/JVS根底框架开源地址：https://gitee.com/software-minister/jvs 往期干货低代码、逻辑、规定、数据分析、协同工具汇合，解决企业不同需要JVS低代码：如何触发逻辑并获取内部API数据，接入百度天气查问低代码外围工具，jvs-logic逻辑引擎的背景及核心作用

引言对于前端开发者来说，caniuse网站是一个十分有用的工具，它能够帮忙咱们查问JavaScript API在不同浏览器版本中的兼容性状况。以fetch为例，咱们能够在网站上查到其兼容性如下图所示： fetch('http://domain/service', { method: 'GET' }) .then(response => response.json()) .then(json => console.log(json)) .catch(error => console.error('error:', error));然而人工保障 API 的兼容性是不牢靠的，上面我分享一个实在产生的案例来分享本文的主题自动化兼容性检查和解决方案 线上事变最近产生了一起线上事变，让我深感可惜。事件是这样的，小飞是刚毕业不久的前端应届生，7月份本该是他转正的日子。然而，不久前，因为他的一个小问题，导致线上APP H5页面呈现了白屏，造成了局部业务损失。小飞同学次要负责借贷业务，这类业务波及C端用户，而且波及金钱，所以问题的严重性显而易见。最终，这次事变导致他的转正申请未能通过，切实是遗憾。 事变起因起初，小飞问我，该如何尽量避免这种白屏问题。他提到，在回归测试阶段，测试同学通知他没有问题，后果线上用户才反馈白屏问题。我的第一反馈是询问他是否有JS报错导致的问题。事实上，这的确是问题的本源。因为低端机型不反对某个API，导致页面报错，从而呈现白屏问题。 那么，有没有方法在CICD流程中或者在代码开发中就能扫描到这种问题呢？除了监控零碎之外是否还有其余形式？实际上是有的。之前我写过一篇文章我给我的项目加了性能守卫插件，共事叫我早晨别睡的太死，提到了如何利用eslint-plugin-compat插件来实现这种机制，从而防止相似线上生产事变的产生。应用这个插件，咱们能够在代码开发阶段就发现可能的兼容性问题，让开发者及时修复，防止将问题带入线上环境。 自动化兼容性查看应用eslint-plugin-compat插件eslint-plugin-compat是一个弱小的工具，能够帮忙咱们查看代码中应用的个性在不同浏览器中的兼容性。以下是应用eslint-plugin-compat进行自动化兼容性查看的步骤： 装置插件：npm install eslint-plugin-compat --save-dev配置ESLint：在我的项目的.eslintrc.js配置文件中增加插件： module.exports = { // ... plugins: [ // ... 'compat' ], // ...};设置browserslist：通过应用browserslist配置，你能够确保你的我的项目在指标浏览器中都可能失常运行，并在开发阶段主动引入相应的polyfill或进行兼容性正告，从而节俭调试工夫，进步开发效率，并构建跨浏览器敌对的Web利用。无论是在古代浏览器中应用最新的个性，还是在旧版浏览器中提供兼容性反对，browserslist都能帮忙你轻松治理和配置我的项目的兼容性需要。 示例.browserslistrc配置如下： # Browsers that have more than 5% global usage> 5% # Last 2 versions of major browsers (including Chrome, Firefox, Safari, and Edge)last 2 major versions # Specific browser versionsIE 11 iOS >= 11not dead# Browsers used in specific countriesand_chr 78and_ff 68# Browsers used in specific environmentsmaintained node versionsnot IE 11# Development and production environment specific targetsdevelopment last 1 chrome version last 1 firefox versionproduction > 0.2%配置选项形容> 5%寰球使用率超过5%的浏览器last 2 major versions最近两个次要版本的浏览器IE 11仅包含Internet Explorer 11iOS >= 11iOS零碎版本大于等于11的浏览器not dead排除曾经被认为是不再应用的浏览器and_chr 78特定版本的Chrome浏览器and_ff 68特定版本的Firefox浏览器maintained node versions以后被保护的Node.js版本not IE 11排除Internet Explorer 11development开发环境配置，指定兼容性需要production生产环境配置，指定兼容性需要last 1 chrome version最近一个版本的Chrome浏览器last 1 firefox version最近一个版本的Firefox浏览器> 0.2%寰球使用率超过0.2%的浏览器测试成果：假如咱们有以下的代码示例main.js： ...

前言在开发过程中，咱们常常会应用 console.log 来输入一些信息，以便于咱们调试。然而，当咱们的我的项目越来越大，咱们的 console.log 也会越来越多，这时候咱们就须要对 console.log 进行治理，以便于咱们更好的调试。以埋点为例子，本地开发中，咱们个别是通过打印埋点来看是否失效，这时候埋点日志可能跟其它日志混在一起，咱们很难找到咱们想要的日志，这时候咱们就须要对埋点日志进行治理，以便于咱们更好的调试。logN.success("埋点", "page_click_report", { eventName: "page_click_report", params: { user_id: "linwu", age: "18", height: "171cm", sex: "male", wx: "linwu-hi" }}); 版本号信息 打印申请信息有时候在混合H5开发的时候，接口并不是走XHR而是由客户端提供的JSBridge申请，这时候咱们就要对log进行一些解决，以便于咱们更好的调试。 Log函数间接copy上面的代码到我的项目中，能够间接应用,童叟无欺啊亲type Color = 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'error';const COLORS: Color[] = ['primary', 'success', 'info', 'warning', 'danger', 'error'];const COLOR_MAP: Record<Color, string> = { primary: '#2d8cf0', success: '#19be6b', info: '#909399', warning: '#ff9900', danger: '#35495E', error:"#FF0000"};const getColor = (type: Color) => COLOR_MAP[type];const createLog = <T extends any[]>( fn: (type: Color, ...args: T) => void): Record<Color, (...args: T) => void> => { return COLORS.reduce((logs, type) => { logs[type] = (...args: T) => fn(type, ...args); return logs; }, {} as Record<Color, (...args: T) => void>);};const nsLog = (type: Color, ns: string, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${ns} %c ${msg} %c ${args.length ? '%o' : ''}`, `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`, `border:1px solid ${color}; padding: 1px; border-radius: 0 4px 4px 0; color: ${color};`, 'background:transparent', ...args );};export const logN = createLog(nsLog);const sLog = (type: Color, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${msg} ${args.length ? '%o' : ''}`, `color: ${color};`, ...args );};export const logS = createLog(sLog);const bLog = (type: Color, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${msg} ${args.length ? '%o' : ''}`, `background:${color}; padding: 2px; border-radius: 4px; color: #fff;`, ...args );}; export const logB = createLog(bLog);示例// Usage:logS.primary("Primary message");logN.success("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{ "err_no": 0, "err_msg": "success", "data": { "user_basic": { "user_id": "3450719496318734", "user_name": "linwu", "company": "腾讯", "job_title": "高级前端开发工程师", "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/6c748ea6567c4afdd9f54dde04dbbfdf~300x300.image", "description": "☀高级前端开发工程师\r\n就任于腾讯等多家互联网大厂\r\n《古代Javascript高级教程》、《古代Typescript高级教程》、《深入浅出Dart》作者", "favorable_author": 1, "builder": 0, "book_author": 0, "can_tag_cnt": 0, "is_select_annual": false, "select_annual_rank": 0, "annual_list_type": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "study_point": 0, "identity": 0, "is_vip": false, "is_logout": 0, "become_author_days": 49 }, "user_counter": { "followee_count": 0, "follower_count": 620, "post_article_count": 110, "digg_article_count": 111, "got_digg_count": 2072, "got_view_count": 104959, "post_shortmsg_count": 3, "digg_shortmsg_count": 3, "select_study_event_count": 0, "select_online_course_count": 0, "collection_set_article_count": 29, "recommend_article_count_daily": 36, "got_article_collect_count_daily": 0 }, "user_growth_info": { "user_id": 3450719496318734, "jpower": 7711, "jscore": 813.2, "jpower_level": 5, "jscore_level": 5, "jscore_title": "先锋掘友", "author_achievement_list": [ 1 ], "vip_level": 0, "vip_title": "", "jscore_next_level_score": 2000, "jscore_this_level_mini_score": 500, "vip_score": 0 } }});logN.error("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{ "err_no": 0, "err_msg": "fail", });logB.info("VERSION v1.0.0");小册整顿两本小册，一本是前端面试小册，一本是图解算法，浏览体验都很好,欢送增加我微信linwu-hi获取 ...

图解算法小册最近整顿了一本算法小册，感兴趣的同学能够加我微信linwu-hi进行获取 前言在上一篇作为面试官，为什么我举荐微前端作为前端面试的亮点？反馈成果不错，我接着出第二篇组件库专题，次要是我抉择的方向，前端同学都能够很轻易尝试，这样我的项目上就减少很多亮点了 大厂面试的时候，我也看到很多候选人写了xx组件的封装，很少见过二次组件库的封装或者保护开源组件库,其实这些都是我的项目上的亮点，个别面试官如果看到，都会具体考查本文将会以antd Element vant等等组件库为例子，会进行剖析比照 为什么须要二次封装组件库？理论工作中，咱们在我的项目中须要自定义主题色，更改按钮款式，自定义图标,自定义table组件等等，这些都能够基于antd组件库进行二次封装，缩小反复工作，晋升开发效率。所以咱们在封装的时候依照上面这四个准则进行思考就行了，另外自身封装组件库对于我的项目来说也是没有任何危险，因为一开始咱们把PropsType间接进行转发，外部再进行减少业务的性能，这样就是达到齐全的解耦 对立格调：在一个大的我的项目或者多个相干的我的项目中，保持一致的界面风格和交互方式是十分重要的。通过二次封装，咱们能够定义对立的款式和行为，缩小不一致性。升高保护老本：当底层的组件库更新时，咱们可能须要在我的项目的多个中央进行批改。然而如果咱们有了本人的封装，只须要在封装层面进行更新即可，这大大降低了保护老本。减少定制性能：有些时候，咱们须要在原有组件库的根底上减少一些特定的性能，如特定的验证、错误处理等。二次封装提供了这样的可能。进步开发效率：在一些罕用的性能（如表单验证、全局提醒等）上，二次封装能够提供更不便的API，进步开发效率。请联合一个组件库设计的过程,谈谈前端工程化的思维当咱们联合一个组件库设计的过程来议论前端工程化的思维时，须要理清这些要点： 1. 应用 Lerna 进行多包治理：通过 Lerna 来治理多个包（组件），实现组件级别的解耦、独立版本控制、按需加载等个性。# 装置 Lernanpm install -g lerna# 初始化一个 Lerna 仓库lerna init# 创立 "Button" 组件包lerna create button --yes2. 规范化提交：应用规范化的提交信息能够进步 Git 日志的可读性，并且能够通过 conventional commits 主动生成 CHANGELOG。能够应用 commitizen、commitlint 等工具来配置。# 装置相干工具npm install commitizen cz-conventional-changelog --save-dev// package.json{ "scripts": { "commit": "git-cz" }, "config": { "commitizen": { "path": "cz-conventional-changelog" } }}3. 代码规范化：通过 ESLint、Prettier 等工具实现代码规范化和格式化，并封装为本人的标准预设。# 装置相干工具npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev// .eslintrc.jsmodule.exports = { extends: ['eslint:recommended', 'plugin:prettier/recommended'],};// .prettierrc.jsmodule.exports = { singleQuote: true, trailingComma: 'es5',};4. 组件开发调试：须要思考热更新编译、软链接援用等问题，以不便在开发过程中进行组件的调试。// packages/button/src/Button.jsimport React from 'react';const Button = ({ type = 'primary', onClick, children }) => { return ( <button className={`button ${type}`} onClick={onClick}> {children} </button> );};export default Button;5. 文档站点：能够基于 dumi 搭建文档站点，并实现 CDN 减速、增量公布等优化。能够应用 surge 实现 PR 预览。<!-- packages/button/docs/index.md --># ButtonA simple button component.## Usageimport { Button } from 'button-library';const MyComponent = () => { return <Button onClick={() => alert('Button clicked!')}>Click Me</Button>;};### Props| Name | Type | Default | Description || -------- | ---------------------- | ------- | ----------------------------- || type | `primary` \| `secondary` | `primary` | The type of the button. || onClick | `function` | | Event handler for click event. |6. 单元测试：须要思考 jest、enzyme 等工具的配合应用，生成测试覆盖率报告。# 装置相干工具npm install jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev// packages/button/src/Button.test.jsimport React from 'react';import { mount } from 'enzyme';import Button from './Button';describe('Button', () => { it('renders without crashing', () => { const wrapper = mount(<Button>Click Me</Button>); expect(wrapper.exists()).toBe(true); }); it('calls onClick function when clicked', () => { const onClickMock = jest.fn(); const wrapper = mount(<Button onClick={onClickMock}>Click Me</Button>); wrapper.find('button').simulate('click'); expect(onClickMock).toHaveBeenCalledTimes(1); });});7. 按需加载：须要配合 babel-plugin-import 实现按需加载，即在编译时批改导入门路来实现组件的按需加载。# 装置相干工具npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [ [ "import", { "libraryName": "button-library", "style": "css" } ] ]}8. 组件设计：须要思考响应式、主题、国际化、TypeScript 反对等问题，以保障组件的灵活性和可扩展性。// packages/button/src/Button.jsimport React from 'react';import PropTypes from 'prop-types';const Button = ({ type = 'primary', onClick, children }) => { return ( <button className={`button ${type}`} onClick={onClick}> {children} </button> );};Button.propTypes = { type: PropTypes.oneOf(['primary', 'secondary']), onClick: PropTypes.func, children: PropTypes.node.isRequired,};export default Button;9. 公布前的自动化脚本：须要编写自动化脚本来标准公布流程，确保公布的一致性和可靠性。// package.json{ "scripts": { "prepublish": "npm run lint && npm run test", "lint": "eslint .", "test": "jest" }}10. 公布后的解决：思考补丁降级、文档站点同步公布等问题，以便及时修复问题并提供最新的文档。11. 制订 Contributing 文档：制订 Contributing 文档能够升高开源社区奉献的门槛，并确保社区成员理解如何参加我的项目。解决 issues 和 PR 须要有专人负责。如何对一个组件库进行测试?首先须要明确，组件库的测试大抵能够分为两类：一类是针对组件自身的性能和性能的测试（例如，单元测试、性能测试），另一类是针对组件在集成环境下的行为和性能的测试（例如，集成测试、零碎测试）。1. 功能测试（单元测试）通常来说，组件的功能测试能够通过单元测试来实现。单元测试的目标是验证组件的单个性能是否依照预期工作。这通常能够通过编写测试用例来实现，每个测试用例针对一个特定的性能。 ...

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接linwu的算法笔记链接 Pinia 是 Vue.js 官网举荐的新一代状态治理库,它提供了十分简洁和直观的 API,能够极大地提高咱们治理利用状态的效率。本文将深刻介绍 Pinia 的各种高级用法,内容涵盖: Pinia 的劣势相比 Vuex,Pinia 有以下长处: 更贴合 Vue 3 的 Composition API 格调,学习老本更低不须要辨别 Mutation 和 Action,对立应用 Actions 操作状态反对 TypeScript,能够充分利用 TS 的动态类型零碎模块化治理 States,每个模块是一个 Store直观的 Devtools,能够看到每个 State 的变动创立 Pinia在 main.js 中导入 createPinia 并应用: import { createApp } from 'vue'import { createPinia } from 'pinia'const pinia = createPinia()const app = createApp(App)app.use(pinia)能够通过 app.config.globalProperties.$pinia 拜访 Pinia 实例。 Option Store与 Vue 的选项式 API 相似，咱们也能够传入一个带有 state、actions 与 getters 属性的 Option 对象（废除了Mutations）应用 defineStore API 定义 Store: ...

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接linwu的算法笔记链接引言原文 Anchor PositioningCSS 锚点定位是一项实验性的新 CSS 性能，容许你绝对于页面上的另一个元素定位一个元素。这是通过应用 anchor-position 属性来实现的。例如，以下代码会将元素定位到锚元素左侧 10px 处：.element { anchor-position: my-anchor left 10px; }CSS 锚点定位是一项弱小的新性能，可用于创立各种交互元素，例如工具提醒、模式和弹出窗口。它使工具提醒更加动静。这是一个小示例，展现了如何锚定定位以创立工具提醒： <div id="anchor">This is the anchor element</div> <div id="tooltip">This is the tooltip</div>#tooltip { position: absolute; display: none; } #anchor:hover #tooltip { display: block; } #tooltip { anchor-position: my-anchor top 10px; }当锚元素悬停在上方时，此代码将创立一个位于锚元素上方 10px 的工具提醒。 Developers.chrome.com 的另一个示例应用锚点定位来跟踪聚焦输出字段的视觉指示器。正如你所看到的，锚点能够解决多个地位和布局。jcode 未来，咱们将可能绝对于多个锚元素定位一个元素： .anchor1 { anchor-name: anchor1; } .anchor2 { anchor-name: anchor2; } .positioned { position: absolute; top: 0; left: 0; anchor: anchor1, anchor2; }上面是一个元素的多个处理程序的示例，其中工具提醒通过将其与图表的最大值和最小值相结合来锚定（起源：developers.chrome.com）。 ...

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接linwu的算法笔记链接nginx.conf配置找到Nginx的装置目录下的nginx.conf文件，该文件负责Nginx的根底性能配置。 配置文件概述Nginx的主配置文件(conf/nginx.conf)按以下构造组织： 配置块性能形容全局块与Nginx运行相干的全局设置events块与网络连接无关的设置http块代理、缓存、日志、虚拟主机等的配置server块虚拟主机的参数设置（一个http块可蕴含多个server块）location块定义申请路由及页面解决形式 配置文件示例一个比拟全的配置文件示例如下。 # 全局段配置# ------------------------------# 指定运行nginx的用户或用户组，默认为nobody。#user administrator administrators;# 设置工作过程数，通常设置为等于CPU外围数。#worker_processes 2;# 指定nginx过程的PID文件寄存地位。#pid /nginx/pid/nginx.pid;# 指定谬误日志的寄存门路和日志级别。error_log log/error.log debug;# events段配置信息# ------------------------------events { # 设置网络连接序列化，用于避免多个过程同时承受到新连贯的状况，这种状况称为"惊群"。 accept_mutex on; # 设置一个过程是否能够同时承受多个新连贯。 multi_accept on; # 设置工作过程的最大连接数。 worker_connections 1024;}# http配置段，用于配置HTTP服务器的参数。# ------------------------------http { # 蕴含文件扩展名与MIME类型的映射。 include mime.types; # 设置默认的MIME类型。 default_type application/octet-stream; # 定义日志格局。 log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; # 指定拜访日志的寄存门路和应用的格局。 access_log log/access.log myFormat; # 容许应用sendfile形式传输文件。 sendfile on; # 限度每次调用sendfile传输的数据量。 sendfile_max_chunk 100k; # 设置连贯的放弃工夫。 keepalive_timeout 65; # 定义一个上游服务器组。 upstream mysvr { server 127.0.0.1:7878; server 192.168.10.121:3333 backup; #此服务器为备份服务器。 } # 定义谬误页面的重定向地址。 error_page 404 https://www.baidu.com; # 定义一个虚拟主机。 server { # 设置单个连贯上的最大申请次数。 keepalive_requests 120; # 设置监听的端口和地址。 listen 4545; server_name 127.0.0.1; # 定义location块，用于匹配特定的申请URI。 location ~*^.+$ { # 设置申请的根目录。 #root path; # 设置默认页面。 #index vv.txt; # 将申请转发到上游服务器组。 proxy_pass http://mysvr; # 定义访问控制规定。 deny 127.0.0.1; allow 172.18.5.54; } }}location 门路映射详解格局：location [ = | ~ | ~* | !~ | !~* | ^~ | @ ] uri {...}各标识解释：=：准确匹配。如果匹配胜利，立刻进行搜寻并解决此申请。~：执行正则匹配，辨别大小写。~*：执行正则匹配，不辨别大小写。!~：正则匹配，辨别大小写不匹配。!~*：正则匹配，不辨别大小写不匹配。^~：前缀匹配。如果匹配胜利，不再匹配其余location，且不查问正则表达式。@：指定命名的location，次要用于外部重定向申请，如 error_page 和 try_files。uri：待匹配的申请字符串。能够是一般字符串或蕴含正则表达式。优先级及示例优先级程序：无特定标识 < ^~ < = < 正则匹配 (~, ~*, !~, !~*)示例： ...

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接linwu的算法笔记链接前言始终有逛v2ex的习惯，大略前2个星期看到上面v友的帖子，而后始终继续追更，颇有感触，借此记录一下，今日就不更技术文章了 问题其实这老哥出发点是好，而且从他的三连事件来看，其搭建的ChatGPT在公司也落地计划，也十分零碎，按产出来说也是十分高，所以过后看这个事件集体是比拟愤慨的(什么**公司)，然而这老哥也是有点一根筋，职场也有职场的规定，得去恪守，比方没有跟二老板指标对齐,越级汇报等 如何做好向上治理？向上治理,我从腾讯学到的一个名词，大略这里所有的嫡系都十分精通，尽管自己很排挤，然而国内主打的就是一个人之常情，会做人，有些货色不得不去扭转一下本人（让子弹多飞一会）和老板指标对齐认真填OKR，写的高大上OK（老板好汇报）在汇报给老板的频率上,要找到适合的均衡,防止过多或过少。我意识的一个技术比拟个别的共事，他有个好的习惯，就是每天早上定时独自找老板汇报工作。（把咱们整的有点无语，不过能够学习一下）用简洁和重点突出的形式与老板沟通。按我集体，都会把排期和人力更新到一份文档，贴到企微签名上，老板就不必每次专门找你在做啥选择性地汇报要害的好消息。又是我那个共事，他能把简略的性能优化在组会分享讲到天上去，次日老板拿着这份PPT去找大老板汇报对坏消息也采取诚恳审慎的态度进行汇报。还是我那个共事，生产呈现问题及时叫共事解决（甩锅）,汇报的时候娓娓而谈在表白异议时要分清场合,正当争执。不要回绝老板的要求好的组织和归档汇报资料,注明日期。多为老板想想汇报如何解决总结向上治理其实总结就是一句话为老板分担问题，除了做好本身工作以外,还要思考价值，如何做好向上治理，那就是少埋怨，多做事，年底等抵偿。

点击在线浏览，体验更好链接古代JavaScript高级小册链接深入浅出Dart链接古代TypeScript高级小册链接linwu的算法笔记链接前言上星期四，我像平常一样起床下班，地铁上收到了微信音讯 这时候就感觉到不对劲了，到了公司我登录了本人的github，发现被封了 毫无征兆，我的gmail也没有收到github邮箱。 因为这个github账号我始终用来寄存我的网站材料以及blog，所以很多issue都在外面，另外还有局部图床和博客示例,这个被封禁，所有材料都迁徙不了 原因网上查了一圈，发现github被封，很少能申述胜利的，所以我给官网发了一封邮件，想看看是什么起因导致的，防止后续再呈现相似的问题 给官网回了一个邮件后，过了半个小时我收到了回复 原来问题是这样，因为我之前找某宝开明了copilot学生认证，导致被github查到封禁了，至于之所以找某宝，是因为我没有visa卡领取起来麻烦，又想体验copilot，没方法才出此下策，所以copilot学生认证还是不要绑定本人的github账号吧 迁徙封都曾经封了，这时候就得统计损失了，尽量挽回 所幸我很多仓库本地都有备份，从新注册了一个github账号上传就行，为此我还专门写了些脚本备份star很多同学都会把star当做书签收集这时候能够通过拜访github api进行备份 https://api.github.com/users/[username]/starred 批量备份issue到本地const fs = require('fs');const axios = require('axios');const sanitize = require('sanitize-filename');const { githubRepoOwner, githubRepoName, githubAccessToken } = require('./config');async function getIssues() { let allIssues = []; let page = 1; let perPage = 300; // 每页返回100个issue，依据理论状况能够适当调整 try { while (true) { const response = await axios.get(`https://api.github.com/repos/${githubRepoOwner}/${githubRepoName}/issues`, { params: { page, per_page: perPage }, headers: { Authorization: `Bearer ${githubAccessToken}` } }); const issues = response.data; if (issues.length === 0) { break; // 退出循环，示意已获取所有issue数据 } allIssues = allIssues.concat(issues); page++; } return allIssues; } catch (error) { throw new Error(`Error fetching issues: ${error.message}`); }}async function saveIssueAsMarkdown(issue, directory) { const markdownContent = issue.body; const fileName = `${directory}/${sanitize(issue.title)}.md`; fs.writeFileSync(fileName, markdownContent);}async function main() { try { const issues = await getIssues(); // Create a directory for each label issues.forEach(issue => { issue.labels.forEach(label => { const directory = `./docs/${sanitize(label.name)}`; if (!fs.existsSync(directory)) { fs.mkdirSync(directory, { recursive: true }); } saveIssueAsMarkdown(issue, directory); }); }); console.log('Markdown files saved successfully!'); } catch (error) { console.error(error.message); }}main();批量更新issue题目const { Octokit } = require('@octokit/rest');// GitHub personal access tokenconst token = '';// GitHub repository informationconst owner = 'LQ-vic';const repo = 'code-interview';const labelToFilter = 'image'; // 请替换为你想筛选的标签const octokit = new Octokit({ auth: token });async function updateIssueTitlesByLabel() { try { // 依据标签获取仓库的所有 issues const issues = await octokit.issues.listForRepo({ owner, repo, state: 'open', // 只获取关上的 issues labels: labelToFilter, per_page: 100, // 每页获取 100 个 issues，你能够依据须要调整 }); for (const issue of issues.data) { if (issue.title.startsWith('xx：xx：')) { const newTitle = issue.title.replace('xx：xx：', 'xx：'); await octokit.issues.update({ owner, repo, issue_number: issue.number, title: newTitle, }); console.log(`Updated issue #${issue.number} title to: ${newTitle}`); } } } catch (error) { console.error('Error updating issue titles:', error.message); }}updateIssueTitlesByLabel();批量上传issueconst fs = require('fs');const path = require('path');const { Octokit } = require('@octokit/rest');// GitHub personal access tokenconst token = '';// GitHub repository informationconst owner = 'LQ-vic';const repo = 'code-interview';// Directory path of the docs folderconst docsDirectory = './docs/CSS3';// Labels to be added to each issueconst labelColors = [ { name: 'CSS3', color: '#FBCA033' }];const excludedDirectories = ['.vuepress', '.git', 'node_modules'];// File path to store the uploaded files recordconst recordFilePath = './uploaded_files.txt';// Initialize Octokitconst octokit = new Octokit({ auth: token });// Function to read all Markdown files in the given directoryasync function readMarkdownFiles(directory) { const files = fs.readdirSync(directory); for (const file of files) { // console.log('file',file) const filePath = path.join(directory, file); const stat = fs.statSync(filePath); if (stat.isDirectory() && !excludedDirectories.includes(file)) { await readMarkdownFiles(filePath); // Recursively read files in non-excluded subdirectories } else if (stat.isFile() && path.extname(file) === '.md') { const content = fs.readFileSync(filePath, 'utf8'); const title = extractTitleFromContent(content); if (!isFileUploaded(title)) { await createIssue(title, content, labelColors); addUploadedFile(title); } } }}// Function to create GitHub issueasync function createIssue(title, body, labels) { try { const response = await octokit.issues.create({ owner: owner, repo: repo, title: `${title}`, body: body, labels: labels }); console.log(`Successfully created issue: ${title}`); } catch (error) { console.log(`Failed to create issue: 面试官：${title}`); console.log(`Error: ${error.message}`); }}// Function to extract title from the content (first heading)function extractTitleFromContent(content) { const match = content.match(/^#\s*(.+)/); if (match) { return match[1]; } return '';}// Function to check if a file has been uploadedfunction isFileUploaded(filename) { if (fs.existsSync(recordFilePath)) { const uploadedFiles = fs.readFileSync(recordFilePath, 'utf8').split('\n'); return uploadedFiles.includes(filename); } return false;}// Function to add uploaded file to the recordfunction addUploadedFile(filename) { fs.appendFileSync(recordFilePath, filename + '\n', 'utf8');}// Read all Markdown files in the docs directory (excluding specified directories) and create issuesreadMarkdownFiles(docsDirectory) .then(() => { console.log('All issues created.'); }) .catch((error) => { console.log('Error:', error); });批量导出issue目录const axios = require('axios');const fs = require('fs');async function getGitHubIssues(owner, repo, labels, token) { const baseUrl = `https://api.github.com/repos/${owner}/${repo}/issues`; const headers = token ? { Authorization: `token ${token}` } : {}; const params = { state: 'all', per_page: 100 }; const issuesByLabel = {}; let nextPage = true; while (nextPage) { try { const response = await axios.get(baseUrl, { headers, params }); const data = response.data; if (!data.length) break; data.forEach((issue) => { if (!issue.pull_request) { issue.labels.forEach((label) => { if (labels.includes(label.name)) { if (!issuesByLabel[label.name]) { issuesByLabel[label.name] = []; } issuesByLabel[label.name].push(issue); } }); } }); if (response.headers.link) { const links = response.headers.link.split(', '); nextPage = links.some((link) => link.endsWith('rel="next"')); if (nextPage) { const nextPageNum = parseInt(links[links.length - 1].match(/&page=(\d+)/)[1], 10); params.page = nextPageNum; } } else { nextPage = false; } } catch (error) { throw new Error(`Failed to fetch issues. Error: ${error.message}`); } } return issuesByLabel;}// Output to Markdown filefunction writeIssuesToMarkdown(issues, outputPath) { let content = ''; Object.entries(issues).forEach(([label, issuesList]) => { content += `## ${label}\n\n`; issuesList.forEach((issue) => { content += `- [${issue.title}](${issue.html_url})\n`; }); content += '\n'; }); fs.writeFile(outputPath, content, (err) => { if (err) { console.error('Error writing the file:', err); } else { console.log('Markdown file generated successfully!'); } });}// 应用示例const owner = 'LQ-vic';const repo = 'code-interview';const labels = ['JavaScript', 'TypeScript','vue','vue3','react','HTTP','webpack','nodejs','Linux','git','CSS','CSS3','组件库','小程序'];const token = '';const outputPath = 'dirname.md';(async () => { try { const issues = await getGitHubIssues(owner, repo, labels, token); writeIssuesToMarkdown(issues, outputPath); } catch (error) { console.error(error.message); }})();

本文，咱们将一起学习，应用纯 CSS，实现如下所示的动画成果： 下面的动画成果，十分有意思，外围有两点： 小球随机做 X、Y 方向的直线运动，并且可能实现碰撞到边界的时候，实现反弹成果小球在碰撞边界的霎时，色彩产生随机的变动嗯？很有意思的成果。看上去，咱们如同应用 CSS 实现了碰撞检测。 然而，理论状况真的是这样吗？让咱们一起一探到底！ 实现 X 轴方向的静止这里其实咱们并没有实现碰撞检测，因为小球和小球之间接触时，并没有产生碰撞成果。 咱们只实现了，小球与边界之间的碰撞反馈。不过这里，也并非碰撞检测，咱们只须要设置好单个方向的静止动画，并且设置 animation-direction: alternate; 即可！ 上面，咱们一起来实现单个方向上的静止动画： <div></div>div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50%; background: #0cf; animation: horizontal 3s infinite linear alternate;}@keyframes horizontal { from { left: 0; } to { left: calc(100vw - 100px); }}简略解读一下： 元素设置为 position: absolute 相对定位，利用 left 进行 X 轴方向的静止咱们让元素 div 静止的间隔为 left: calc(100vw - 100px)，元素自身的高宽都是 100px，因而相当于静止到屏幕的最右侧动画设置了 alternate 也就是 animation-direction: alternate; 的简写，示意动画在每个循环中正反交替播放这样，咱们就奇妙的实现了，在视觉上，小球元素挪动到最右侧边界时，回弹的成果： ...

基于上次翻译的 一个炫酷的头像悬停成果 播种了不少同学的喜爱，原作者近期进行了优化降级。本文将降级后的外围实现过程进行梳理解说，如果没看过第一期的举荐先看看第一期的实现过程。降级后的成果如下图所示。 gif动画成果如下： 绝对于上次的成果次要减少了背景的变动，减少了默认的旋转动画以及背景花瓣的成果。外围实现技术点如下： 不须要额定的元素，仅应用<img>标签不应用伪元素应用future CSS，mask，@property，三角函数和大量的数学函数应用Sass和CSS变量优化代码量小圆的大小和数量可配置对于实现过程的相干三角函数及Sass相干函数不过多解析，有趣味的能够具体理解。 根底变量定义为了不便前面操作与更改配置，首先定义几个变量不便调整配置和后续代码援用。 背景圆中的小圆数量 $n： $n: 15;管制小圆半径和主体的尺寸大小： --r: 50px; 管制小圆放大比例基数，管制数值在1.2和2之间： --f: 2;主体背景色彩： --c: #E4844A;除此之外还通过 @property 定义了2个变量，管制旋转的角度及小圆之间的间距。 通过 @property 申明的变量能够定义其语法、继承性和初始值。这样做的益处是能够在文档中明确地申明变量，并指定其用处和限度条件。这种申明形式更适宜须要具体定义的场景，例如自定义属性。@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: true;}@property --i { syntax: "<length>"; initial-value: 0px; inherits: true;}背景绘制背景图形上有多个小圆组成，小圆的数量是可配置的，所以背景的小圆须要基于所配置的数量动静生成，这里须要用到几个Sass的函数。 因为小圆的数量$n反对配置，所以整个元素的大小会随之影响发生变化。通过设置aspect-ratio，咱们只须要管制width的变动即可。宽度的最终值基于小圆的半径和小圆的数量计算得出。 width: calc(var(--r)*(1 + 1/tan(180deg/#{$n})));aspect-ratio: 1;border-radius: 50%;接下来开始绘制从属在大圆下面的小圆。 $m: ();@for $i from 1 through ($n) { $m: append($m, radial-gradient(var(--c) 70%,#0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*#{$i/$n} + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*#{$i/$n} + var(--a,0deg)))/ var(--r) var(--r), comma); }首先，咱们定义一个变量 $m，并将其初始化为空。而后应用 @for 循环从 1 到 $n 小圆的数量进行遍历。 ...

1.一般传值传递一般值，间接父级 provide(/ 注入名 / 'message', / 值 / 'hello!')子级： const message = inject('message')2.通过axios异步获取数据后传值问题：在我的项目中个别是通过接口申请到数据后再传递给子级，provide和inject如果间接再调用接口的办法内传值会报正告，而且值也传递不过来。就是说provide()必须在setup根节点处能力应用，在办法外面用是不行的 然而，间接在setup根节点处传递，因为数据是异步获取的，间接传递时数据是还没有值的，传递过来的都是申明时的初始值。 解决：应用办法包装须要传递的值，而后provide()传递过来的是办法，inject()时通过办法调用获取值 父级： const provideData = () =>{ return { columns: columns.value,data: resourceData.value,pageNum: pageNum.value,total: total.value,pageSize: pageSize.value}}provide('provideData',provideData);子级获取： const provideData = inject('provideData');const columns = provideData().columns;const data = provideData().data;const total = provideData().total;const pageNum = provideData().pageNum;const pageSize = provideData().pageSize;3.父组件值更改后，子组件的值不具备响应性vue自身就是这样设计的，注入后子组件的值不具备响应性，然而咱们能够进行解决 3.1以办法模式传递值const provideData = () =>{ return { columns: ()=>columns.value,data: ()=>resourceData.value,pageNum: ()=>pageNum.value,total: ()=>total.value,pageSize: ()=>pageSize.value}}provide('provideData',provideData);子组件中再通过办法进行调用： const provideData = inject('provideData');const columns = computed(() => provideData().columns())const data = computed(() => provideData().data())const total = computed(() => provideData().total())const pageNum = computed(() => provideData().pageNum())const pageSize = computed(() => provideData().pageSize())3.2以对象模式传递值父组件： ...

前景提醒:在学习provide和inject是发现一个问题就是顶层组件应用功provide传递的值在基层组件中应用inject接管后不是响应式的,如下代码所示 //顶层组件代码 const count = ref(100); provide('count-key',count); const setCount = ()=>{ count.value = 99; } <template> <div>{{count}}</div>//99 </template> //底层组件 const count = inject('count-key'); const setCount = inject('set-count); onMounted(()=>{ setCount(); }) /*子组件的onMounted执行实现之后父组件的onMounted函数才执行实现,所以在子组件中显示的100,然而父组件中显示时曾经批改了count的值,所以父组件中显示的99,子组件中显示的100*/ <template> <div>{{count}}</div>//100 </template> 查找办法解决后 //顶层组件代码 const count = ref(100); provide('count-key',count); const setCount = ()=>{ count.value = 99; return { countNum:count.value } } provide('set-count',setcount) <template> <div>{{count}}</div>//99 </template> //底层组件 const count = inject('count-key'); const setCount = inject('set-count'); const countNum = setCount().countNum <template> <div>{{count}}--{{countNum}}</div>//100--99 </template> 在子组件中应用的count的值还是和下面一段代码的解释一样,然而父组件的count和子组件的countNum的值都是从新包装之后才显示所以是响应式扭转的这里感激 Jyann博主的文章给予的帮忙,在这里贴上链接,外面的内容更加的全面,大家有相干问题能够查阅http://t.csdn.cn/yeKls ...

咱们非常高兴地发表，2023年8月14日，OpenTiny Vue 公布了 v3.10.0 。 OpenTiny 每次大版本公布，都会给大家带来一些实用的新个性，上一个版本咱们推出了3个新组件，并且提供 SSR 反对。 OpenTiny Vue 3.9.0 版本公布：新增3个新组件、反对 SSR 本次 3.10.0 版本次要推出以下新个性： 新增 DialogSelect 弹窗抉择组件新增 FilterPanel 过滤面板组件新增 TagGroup 标签组组件新增 InfiniteScroll 有限滚动组件官网组件 Demo 反对 Composition api 写法组件 Demo 反对 Playground 代码演练场OpenTiny 新增了以下新的贡献者： @gimmyhehe@chenqifeng66@Zz-ZzzZ@lyx-jay感激你们对 OpenTiny Vue 的奉献 你能够更新 @opentiny/vue@3.10.0 进行体验！ 组件Demo反对Composition写法 OpenTiny Vue 基于无渲染组件设计架构，可同时反对 Vue2 和 Vue3，然而咱们的官网组件 Demo 在 3.10.0 版本之前只有 Options api 的写法，导致很多应用 Vue3 的开发者用起来很不不便，于是咱们优化了文档的出现，参考 Vue 官网，减少了 Options(选项式) 和 Composition(组合式) 两种写法的切换。 你能够在官网进行体验：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/bu... 提供Playground 在理论我的项目中，往往须要依据不同的品牌、格调、场景等需要来定制不同的主题，而组件库的主题标准往往是固定的，无奈满足这种需要。因而，提供主题标准自定义的性能，能够让用户依据本人的需要来定制主题，从而更好地满足我的项目需要。 8月初，xiaoy 同学给咱们奉献了 OpenTiny Vue Playground 我的项目： 《但因酷爱，愿迎万难，OpenTiny Vue Playground正式上线》 咱们将这个我的项目集成到了 OpenTiny 的官网，当初你能够在每个组件 Demo 的右上角点击“关上演练场”的按钮，在演练场中编辑这个 Demo，并实时查看批改后的组件成果，是不是十分不便。 ...

download：RN从0到1零碎精讲与小红书APP实战（2023版无密）Web开发是指使用HTML、CSS、JavaScript等技术来创建和保护网站或网络应用的过程。Web开发可能分为前端开发和后端开发，前者负责网站的外观和交互，后者负责网站的逻辑和数据。本文将介绍一些使用Web开发技术的示例代码，心愿能给你一些启发和帮助。使用HTML和CSS创建一个简略的个人主页HTML是用于构建网页内容并定义其结构和语义的标记语言。CSS是用于设置网页样式和布局的样式表语言。使用HTML和CSS，咱们可能创建一个简略的个人主页，介绍自己的基本信息、兴趣爱好、教育背景等。以下是一个使用HTML和CSS创建的个人主页的示例代码：html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的个人主页</title> <style> /* 设置全局样式 */* { box-sizing: border-box; margin: 0; padding: 0;}/* 设置字体 */body { font-family: Arial, sans-serif;}/* 设置页面布局 */.container { max-width: 800px; margin: 0 auto;}/* 设置导航栏样式 */.nav { display: flex; align-items: center; justify-content: space-between; background-color: #333; color: white; padding: 10px;}.nav a { color: white; text-decoration: none;}.nav a:hover { color: yellow;}/* 设置次要内容样式 */.main { display: flex; flex-wrap: wrap; margin-top: 20px;}/* 设置侧边栏样式 */.sidebar { width: 25%; padding: 10px;}.sidebar img { width: 100%; border-radius: 50%;}.sidebar h2 { text-align: center; margin-bottom: 10px;}.sidebar ul { list-style-type: none;}.sidebar li { margin-bottom: 5px;}/* 设置注释样式 */.content { width: 75%; padding: 10px;}.content h2 { margin-bottom: 10px;}.content p { text-indent: 2em; line-height: 1.5em; margin-bottom: 10px;}</style></head><body> <div class="container"> ...

指标: 继续输入！每日分享对于web前端常见常识、面试题、性能优化、新技术等方面的内容。篇幅不会过长，不便了解和记忆。 次要面向群体：前端开发工程师（初、中、高级）、应届、转行、培训等同学 Day2-今日话题想必大家常常会在面试中或者工作生存中听到跨站脚本攻打（XSS）相干的问题或者话题，那么明天我将从以下三个方面聊聊跨站脚本攻打： 跨站脚本攻打是什么？跨站脚本攻打有什么危害？如何进攻跨站脚本攻打？跨站脚本攻打是什么？跨站脚本攻打（Cross-Site Scripting，简称XSS）是一种网络安全破绽，攻击者通过在受害者的浏览器中注入歹意脚本，从而在受害者浏览器中执行恶意代码。这种攻打将让攻击者窃取用户敏感信息、劫持用户会话、篡改网页内容以及执行其余歹意行为。XSS攻打通常在用户与一个被攻打的网站进行交互时产生，攻击者利用网站未充沛过滤或验证用户输出的破绽，将歹意脚本嵌入到网页中，而后让受害者浏览器执行这些脚本。 XSS攻打能够分为三种次要类型： 存储型XSS（Stored XSS）： 攻击者将歹意脚本存储在网站服务器上，当其余用户拜访蕴含这些歹意脚本的页面时，歹意脚本从服务器加载并在受害者浏览器中执行。 反射型XSS（Reflected XSS）： 攻击者将歹意脚本作为参数注入到URL中，当用户点击蕴含歹意参数的链接时，服务器将参数的内容反射回浏览器并执行。 DOM型XSS（DOM-based XSS）： 攻击者通过批改页面的DOM构造来触发破绽，这种类型的XSS攻打不会将恶意代码传递给服务器。 跨站脚本攻打有什么危害？窃取敏感信息： 攻击者能够通过注入歹意脚本，窃取用户的敏感信息，如用户名、明码、Cookie等。这些信息能够用来假冒用户身份进行歹意操作。 劫持会话： 攻击者通过窃取用户的会话令牌或Cookie，可能劫持用户的会话，施行未经受权的操作，如批改账户信息、发表舆论等。 篡改网页内容： 攻击者能够通过注入歹意脚本，批改网页上的内容，向用户展现虚伪信息、欺骗性的广告、歹意链接等，影响用户的体验和信赖。 钓鱼攻打： 攻击者能够伪造非法网站，诱使用户输出敏感信息，如银行账户明码、信用卡信息等，从而施行钓鱼攻打。 歹意操作： 攻击者能够在用户浏览器中执行歹意脚本，例如发动DDoS攻打、扭转用户设置、执行未受权操作等，从而对用户和网站造成理论侵害。 信赖毁坏： 如果用户发现网站存在XSS破绽，可能会对该网站产生质疑并失去信赖，导致用户散失。 流传恶意代码： 攻击者能够利用XSS破绽流传恶意软件、病毒或歹意脚本，进一步扩充攻打范畴。 毁坏隐衷： 用户的隐衷可能会被泄露，从而导致集体、财务等方面的损失。 如何预防XSS输出验证和过滤： 对于所有用户输出的数据，包含表单提交、URL参数等，进行严格的验证和过滤。确保只容许非法和预期的输出通过。能够应用白名单过滤、正则表达式匹配等办法来避免不平安的输出。 输入本义： 在将用户输出数据插入到HTML页面时，应用适当的输入本义机制，将特殊字符转换为它们的HTML实体模式。这样能够避免浏览器将输出内容解释为代码。 应用平安的编码库： 应用平安的编码库来解决用户输出和输入，这些库会主动执行必要的输出验证、过滤和输入本义，从而缩小开发者的出错机会。 Content Security Policy（CSP）： CSP是一种安全策略，能够在HTTP头中设置，用于限度页面能够加载的资源和执行的脚本。通过设置适合的CSP规定，能够无效缩小XSS攻打的危险。 HttpOnly和Secure标记： 在设置Cookie时，应用HttpOnly标记确保Cookie不能被JavaScript拜访，应用Secure标记确保Cookie只在HTTPS连贯中传输。 应用框架和库： 应用风行的Web开发框架和库（如React、Angular、Vue.js等），这些框架通常有内置的平安机制，能够缩小XSS攻打的危险。 教育用户： 进步用户的网络安全意识，让他们理解XSS攻打的危险和如何防止受到攻打。 定期平安审计： 定期检查和审计代码，查找潜在的XSS破绽，及时修复。 最小化权限： 在数据库和服务器上应用最小权限准则，限度应用程序和用户的拜访权限，缩小攻击者可能获取的敏感信息。 防止内联脚本： 尽量避免应用内联脚本，而是应用内部JavaScript文件。这样能够帮忙隔离用户输出和执行的代码。 应用HTTPOnly Cookie： 应用HTTPOnly Cookie能够避免通过JavaScript拜访Cookie，从而缩小攻击者窃取会话令牌的可能性。 平安开发实际： 遵循平安的开发实际，编写平安的代码，不信赖用户输出，应用最新的破绽库和工具进行代码审查和破绽扫描。 拓展1. 存储型XSS存储型XSS攻打是一种利用网站破绽将歹意脚本存储在服务器上，而后在其余用户拜访蕴含歹意脚本的页面时执行的攻打。攻击者通常通过网站上的表单提交、评论区、用户上传的内容等形式将歹意脚本注入到服务器上。 以下是一些存储型XSS攻打的示例，以及如何进攻这些攻打： 评论区攻打：攻击者在网站的评论区提交歹意评论，其中蕴含歹意脚本。当其余用户查看评论时，歹意脚本会被加载并在其浏览器中执行。 进攻办法： 在显示用户提交的内容之前，对内容进行适当的本义，将特殊字符转换为HTML实体，从而避免歹意脚本的执行。 用户上传的文件攻打：攻击者上传一个蕴含歹意脚本的文件（如图像、文档等），而后其余用户下载或查看这些文件时，歹意脚本会被执行。 进攻办法： 对用户上传的文件进行严格的验证和过滤，确保只容许平安的文件类型和内容上传，并在文件展现时进行适当的本义。 ...

欢送关注我的公众号：前端侦探在原生 APP 中，咱们常常会看到那种丝滑又舒服的页面切换动画，比方这样的 Android 里个别称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）雷同的元素，起到前后过渡的成果，能够很分明的看到元素的变动过程，而并不是简略的隐没和呈现。 当初，web 中（chrome 111+）也迎来了这样一个个性，叫做视图转换动画 View Transitions，又称“转场动画”，也能很轻松的实现这类成果，一起理解一下吧 一、疾速意识 View Transitions先从一个简略的例子来认识一下。 比方，上面有一个网格列表 <div class="list" id="list"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div></div>简略润饰后如下 而后咱们实现一个简略交互，点击每个元素，元素就会被删除 list.addEventListener('click', function(ev){ if (ev.target.className === 'item') { ev.target.remove() }})能够失去这样的成果 性能失常，就是有点太过僵硬了 当初轮到 View Transitions 出场了！咱们只须要在扭转状态的中央增加document.startViewTransition，如下 list.addEventListener('click', function(ev){ if (ev.target.className === 'item') { document.startViewTransition(() => { // 开始视图变换 ev.target.remove() }); }})当然为了兼容不反对的浏览器，能够做一下判断 list.addEventListener('click', function(ev){ if (document.startViewTransition) { // 如果反对就视图变换 document.startViewTransition(() => { // 开始视图变换 ev.target.remove() }); } else { // 不反对就执行原来的逻辑 ev.target.remove() }})当初成果如下 ...

理解JVS低代码的小伙伴应该都晓得它能够通过API实现数据的入库，然而具体怎么操作的可能还不晓得，那明天给大家着重介绍具体的实现流程。 咱们以查问百度的天气查问接口，并把对应的数据插入到零碎数据模型中为例。先来看看最初配置实现的成果： 接下来咱们来看下如何配置实现的。 步骤一，配置列表页配置在线查问百度天气的列表页，如下图所示，创立所须要展现的列表页字段 再进入按钮配置界面进行按钮设置，如下图所示： ①：点击进入按钮配置界面，能够对按钮进行增减配置。②：点击增加按钮，零碎主动创立一行按钮③：自定义按钮名称，能够依据具体的按钮性能本人命名④：按钮地位能够抉择顶部按钮（表级按钮）和行内（行级按钮），顶部按钮个别对表做操作，比方新增数据、批量操作等，行级按钮时对行内的数据进行操作，例如批改与删除⑤：设置按钮触发性能，这里设置为触发表单，也就示意点击这个按钮，弹出一个表单⑥：点击设计，进入对应触发的功能设计，这里会进入表单的设计器中 步骤二，配置表单进入表单配置界面，如下图所示 ①：拖4个单行文本组件进入表单画布②：别离绑定4个组件的数据模型字段③：设置行政区编码为查问弹窗，关联相干的行政区编码模型，返回行政区编码④：设置通过行政区编码，将城市、所属市、所属省份通过数据联动 动静回显⑤：进入按钮设置界面进入表单按钮设置界面如图所示： ①：新增创立一个自定义按钮②：设置按钮的名称为“保留”③：点击配置，进入逻辑配置界面，示意点击保留按钮时触发这个逻辑。 步骤三，设置保留按钮触发的逻辑，通过逻辑获取内部API数据进入保留按钮的逻辑配置界面，如下图所示： ①：进入逻辑设计界面②：拖拽网络申请的组件进入画布，并且设置网络申请的属性 ③：将网络申请返回的数据进行解析 ④：将前一节点的后果二次解析 ⑤：将解析后果插入 数据模型中⑥：点击保留，实现逻辑的配置并且能够在界面上进行调试，如下图所示： ①：点击执行时，能够模仿执行②：执行后，界面上能够将各个环节的执行后果展现③：鼠标悬浮在执行后果的标记上时，能够预览该环节的过程数据④：能够查看历史执行的后果 在线demo：https://frame.bctools.cn/JVS根底框架开源地址：https://gitee.com/software-minister/jvs 往期干货回顾低代码、逻辑、规定、数据分析、协同工具汇合，解决企业不同需要低代码外围工具，jvs-logic逻辑引擎的背景及核心作用低代码开发重要工具：JVS低代码2.1.8新版本性能清单

这一部分首先咱们考虑一下，如果咱们是浏览器或者 Node 的开发者，咱们该如何应用 JavaScript 引擎。 当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。 然而，执行 JavaScript 并非一锤子买卖，宿主环境当遇到一些事件时，会持续把一段代码传递给 JavaScript 引擎去执行，此外，咱们可能还会提供 API 给 JavaScript 引擎，比方 setTimeout 这样的 API，它会容许 JavaScript 在特定的机会执行。 所以，咱们首先应该造成一个理性的认知：一个 JavaScript 引擎会常驻于内存中，它期待着咱们（宿主）把 JavaScript 代码或者函数传递给它执行。 在 ES3 和更早的版本中，JavaScript 自身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码间接依次执行了，这个工作也就是宿主发动的工作。 然而，在 ES5 之后，JavaScript 引入了 Promise，这样，不须要浏览器的安顿，JavaScript 引擎自身也能够发动工作了。 因为咱们这里次要讲 JavaScript 语言，那么驳回 JSC 引擎的术语，咱们把宿主发动的工作称为宏观工作，把 JavaScript 引擎发动的工作称为宏观工作。 宏观和宏观工作JavaScript 引擎期待宿主环境调配宏观工作，在操作系统中，通常期待的行为都是一个事件循环，所以在 Node 术语中，也会把这个局部称为事件循环。 不过，术语自身并非咱们须要重点探讨的内容，咱们在这里把重点放在事件循环的原理上。在底层的 C/C++ 代码中，这个事件循环是一个跑在独立线程中的循环，咱们用伪代码来示意，大略是这样的： while(TRUE) { r = wait(); execute(r);}咱们能够看到，整个循环做的事件基本上就是重复“期待 - 执行”。当然，理论的代码中并没有这么简略，还有要判断循环是否完结、宏观工作队列等逻辑，这里为了不便你了解，我就把这些都省略掉了。这里每次的执行过程，其实都是一个宏观工作。咱们能够大略了解：宏观工作的队列就相当于事件循环。在宏观工作中，JavaScript 的 Promise 还会产生异步代码，JavaScript 必须保障这些异步代码在一个宏观工作中实现，因而，每个宏观工作中又蕴含了一个宏观工作队列： ...

装置依赖pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem引入amfe-flexiblemain.js 引入 amfe-flexibleimport 'amfe-flexible'创立配置文件 postcss.config.cjs根目录创立postcss.config.cjs module.exports = { plugins: { autoprefixer: {}, // flexible配置 "postcss-pxtorem": { "rootValue": 192,// 设计稿宽度或者目前失常分辨率的1/10 selectorBlackList: [".ivu"],// 要疏忽的选择器并保留为px。 minPixelValue: 2,// 设置要替换的最小像素值。 "propList": [ "*" ]// 须要做转化解决的属性，如`hight`、`width`、`margin`等，`*`示意全副 } }}module.exports = { plugins: { // tailwindcss: {}, // 兼容浏览器，增加前缀 autoprefixer: {}, 'postcss-pxtorem': { rootValue: 192, // 后果为：设计稿元素尺寸/16，比方元素宽320px,最终页面会换算成 20rem 设计稿宽度或者目前失常分辨率的1/10 propList: ['*'], // 是一个存储哪些将被转换的属性列表，这里设置为['*']全副，假如须要仅对边框进行设置，能够写['*', '!border*'] unitPrecision: 5, // 保留rem小数点多少位 // selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组，比方你设置为['fs']，那例如fs-xl类名，外面无关px的款式将不被转换，这里也反对正则写法。 replace: true, // 这个真不知到干嘛用的。有晓得的通知我一下 mediaQuery: false, // 媒体查问( @media screen 之类的)中不失效 minPixelValue: 2 // px小于2的不会被转换 } }}

周刊同步发表于微信公众号“写代码的宝哥”，欢送各位小伙伴前来关注 ！ 快讯 Bun ——另一个（Deno 也算一个）用于取代 Node.js 的运行时，其创始人 Jarred Sumner 将在美国当地工夫 09.07 召开 1.0 产品发布会文章 How Dropbox Reduced the Size of Its JavaScript Bundles by 33% - Dropbox 的小伙伴最近对网站 JavaScript 打包产物做了一次优化，缩小了 33% 的体积。本文介绍他们是如何做的htmx is Part of the GitHub Accelerator - htmx 是一个存在已久的我的项目，最近才开始火。我的项目当初成为 GitHub 开源加速器打算的第一批搀扶我的项目，无望促使 htmx 2.0 版本的开发You Might Not Need Lodash or Underscore - 受到 You Might Not Need jQuery 我的项目启发。这个仓库列举了差不多 100 个如何应用原生 JS 代码实现的等同 Lodash/Underscore 办法。当然，理论我的项目中为了平安稳固，我还会持续应用 Lodash，而将这里列举的实现能够作为理解外部工作模式的一种形式 JSX Without React - Chris Coyier 体验了一个名为 NakedJSX 的 JS 库，能够让你在不须要 React 状况下应用 JSXYou’ve Got Options for Removing Event Listeners - 本文讲述移除监听事件的 4 种形式，包含间接移除和间接移除10 Web development trends in 2023 - 本文探讨 2023 年的 10 大开发趋势。包含 JavaScript 运行时以及 AI 驱动式开发Prepare Your Firefox Desktop Extension for the Upcoming Android Release - Android 设施上的 Firefox 浏览器开始反对桌面端扩大程序了，扩大程序开发者们须要留神为挪动端适配了 ...

写在后面已经想着在手机上看一些属性之类的兼容性，就用了 caniuse 这个网站的数据源做了一个简化版的小程序，不过使用率非常低，于是始终想着换成另外一个工具来玩。而后很偶合的事件是，在一次跟好友聚餐的时候聊到了一个打牌记分的话题，于是就有了当初这个小程序。 性能很简略，就是记录下每次的分数，最初结算，依据倍率算出最终的得分，就像这样的一个后果。 有了这个小工具，不论是在麻将桌上还是牌局上都能够不必去思考找笔和纸，或者找其余道具来代替记分了，只须要把每一局的分数记录下来。 而且还能够把以后的房间发给好友，或者扫码的形式退出一起记分，最简略的就是一个人本人记分，只须要手动输出名字就能够了。手动输出的形式因为没有头像，会取名字的第一个字符。 在第一个版本的时候，没有集体核心，而后被厌弃广告，于是就加了一个集体核心页面，再加了一个去广告的性能。广告也只是为了把云开发中波及到的费用给支撑住，不赚钱的玩意。 回归正题还是回到正题说说这次开发中遇到的一个坑吧，这个坑让我非常意外。 小程序陆陆续续写过好些个了，不过云开发模式这还是第一次。对于云开发的益处次要还是鉴权相干的解决以及不须要思考域名（要备案挺麻烦的）。 对于云函数、调用之类的，官网文档以及网络上有一大片的文章能够参考，这个没啥可说的。而要说的是，当我上传了小程序之后，通过 mp 后盾去提交审核时，忽然发现小程序开发工具中的数据都不见了。 是的，记分的时候是通过官网的一个 watch() 办法监听的，只有数据有更新就会同步，其实也就是 socket 而已。 然而为什么数据会不见了呢，而且如同只是不见了局部数据，连忙通过开发工具的云开发入口去看一下，后果发现 member 字段中的数组变成空了。 非常不解，幸好有导出备份，不然数据就失落了。失常的状况下，局部用户相干的数据会通过 member 字段来展现的。 刚开始认为是本人的代码上有问题，但回忆了一下，在数据失落之前，如同也没做什么操作，只有在 mp 后盾提交审核而已。难道是跟当初用户隐衷相干操作增强无关？不然怎么会只是失落 member 这个字段呢。 并且起初屡次尝试，每次都会必现这个 member 字段被清空的状况。 思前想后，问题就是在提审这个步骤上，于是问了一下度娘，后果发现了这么一个帖子。 这个 2020 年 1 月的帖子让我明确了，数据库的平安规定问题。因为这个记分的规定以及本人对数据库字段设计的不理解，当初只能想方法通过其余形式去解决一下。 批改数据库，从新调整每个字段的关联性；代码方面同时也要解决一下，在保障操作流程的根底上，增强用户权限方面的解决；啥也不改，每次提审的时候先导出数据，提审实现之后再从新导入数据，反正这个小工具批改发版次数很少；还是啥也不改，在提审之前把平安规定换一个默认的，严格点的，提审完之后再换回来；总之呢，问题本源是找到了，解决办法也有，但总感觉，权限放开一点，提审代码也不至于把某个字段所有都清空吧。简而言之，只能怪本人能力菜，要不然怎么回踩这个坑呢。 最初小程序整体曾经实现了，那么会有人用吗？

本文分享一下凌览最近看过的一本好书《兽性的弱点》，书中零碎的表白如何解决人际关系，如何取得一种较现实的人生，它给出了很好的倡议。 如何博得别人的青睐不要批评、谴责、埋怨，没有人违心被批评，违心被否定，哪怕是真的意识到本人做的不够好，然而也不想有人当众批评，指出谬误真诚地赞叹别人，如：你明天穿的裙子真难看、你明天衣服上的蝴蝶结把你烘托得更年老了真心地关怀别人，一个在生活中懂得关怀别人，对别人不感兴趣的人，他的生存必将受到重大的妨碍和艰难留下一个好的印象，Smile微笑，无论遇到谁，都露出一个发自内心的微笑牢记别人的名字，罗斯福有一个简略又很重要的取得别人好感的办法，那就是牢牢记住对方的名字，让对方感觉本人受到了他的器重聊天前先学会聆听，会听才会聊让对方主导聊天，聊对方感兴趣的话题让对方感觉本人很重要，如："我十分观赏你的见解和意见。每当我和你交换时，我总能从你那里失去新的启发和思考。你的想法对我来说十分重要，因为它们帮忙我造成更全面和深刻的观点"如何失去别人的反对、认同防止争执，即便你的观点是正确的，辩论会激发对方的好胜心，所以遇到杠精保持沉默尊重别人的意见，"你错了"、"你的意见不行"这样做是对别人智力、判断力、自信心及自尊心给予打击，绝不会对你心怀感谢错了就是错了，大胆抵赖友善待人让对方当配角，给对方发言的机会从对方角度看问题对别人的想法和主张，抱有了解和同情激发别人崇高的情操，如：你在我心里是一个诚实可靠的人包装观点，把你的想法用故事表白更有说服力激发别人的好胜心，对执著的人应用激励法如何做领导者先赞叹再批评，防止侧面的批评批评之前，先谈本人的谬误，如："嗨，[团队成员的名字]，我想和你谈谈最近我的项目中的一些问题。在咱们开始之前，我先要反思一下本人的谬误。我意识到，作为团队的经理，我可能没有给你足够的反对和领导，这可能导致你在我的项目中遇到困难。我抵赖这是我的忽略，我对此感到十分道歉。"倡议而不是下命令，没人喜爱被命令，如："我留神到在最近的我的项目中，咱们遇到了一些挑战。我想分享一些我认为可能有助于解决这些问题的想法，并听听你对此的认识"顾全别人体面收起PUA的那一套，不要吝惜赞美之词，激励、赞美更利于激发别人领有的后劲戴高帽子，如果你想让一个某些方面的毛病有所改善，你要让他晓得，他曾经在这个方面具备一些长处了。"即便有些美德你没有，也要假如你有"要假如他人有你想要称许的美德，让他带着好的声誉去致力给别人应有的荣誉，人类本能渴望被认可一直地激励，让犯错看上去是一件小事最初尽管不可能间接带来可变现的人际关系、社交圈，但能够让咱们分明在与人来往的时候本人应该怎么做。技巧尽管略显刻意，然而实质上并不会挫伤到任何人，而是本人致力营造单方亲密关系，是一种值得投诉的，可能体现本身智慧的行为。 正当应用，不要死板套用这些技巧，也要防止让本人陷入讨好型人格。 如果我的文章对你有帮忙，您的就是对我的最大反对^_^。 更多文章：http://linglan01.cn/about

作为一个H5游戏开发爱好者，最近写了一款十分乏味的小游戏，即《在线抓娃娃机》(在线体验)。在此总结分享一下开发教训，心愿可能对大家有所启发。 游戏创意与设计《在线抓娃娃机》是一款受欢迎的街机游戏的在线版本，它将经典的抓娃娃机玩法带入了手机屏幕。玩家能够通过点击按钮管制抓手的挪动和抓取动作，尝试抓取娃娃并将其胜利送到进口。游戏具备简略易懂的玩法，同时也融入了一些策略因素，减少了游戏的趣味性和挑战性。 在游戏设计方面，重视了以下几点： 可恶的娃娃角色：设计了各种各样可恶的娃娃角色，以吸引玩家的趣味和情感。实在物理模仿：游戏中的抓手动作和娃娃抓取过程都应用了物理模仿，让玩家感触到实在的操作和挑战。处分零碎：为了激发玩家的参与感，设计了处分零碎，例如抓到特定娃娃可取得金币或道具，从而减少了游戏的回放价值。开发过程开发《在线抓娃娃机》的过程中，次要采纳了HTML5、CSS3和JavaScript等前端技术。 页面布局与款式设计：首先设计了游戏的页面布局和款式，确保游戏界面好看、敌对。适应不同屏幕尺寸的响应式设计是不可漠视的一点。HTML 构造 <div id="game-container"> <div id="claw"></div> <div id="doll"></div></div>CSS 款式 #game-container { position: relative; width: 300px; height: 400px; border: 1px solid #000; overflow: hidden;}#claw { position: absolute; width: 50px; height: 50px; background-color: gray; bottom: 0; left: 125px;}#doll { position: absolute; width: 40px; height: 40px; background-color: pink; top: 360px; left: 130px;}物理模仿实现：为了实现实在的抓取动作，应用了物理引擎库，如Matter.js，来模仿抓手的挪动、碰撞和抓取等行为。局部源码 // 创立物理引擎实例const Engine = Matter.Engine;const Render = Matter.Render;const World = Matter.World;const Bodies = Matter.Bodies;const engine = Engine.create();// 创立抓手和娃娃的物体const claw = Bodies.rectangle(x, y, width, height);const doll = Bodies.circle(x, y, radius);// 增加物体到物理世界World.add(engine.world, [claw, doll]);// 更新物理引擎Engine.update(engine);交互逻辑编写：编写JavaScript代码解决游戏的交互逻辑，包含抓手管制、娃娃抓取断定、处分零碎等。const claw = document.getElementById('claw');const doll = document.getElementById('doll');const gameContainer = document.getElementById('game-container');claw.addEventListener('click', () => { // 管制抓手的挪动 claw.style.left = newPosition + 'px'; // 判断抓手是否与娃娃碰撞 if (checkCollision(claw, doll)) { // 抓取胜利的解决逻辑 doll.style.position = 'absolute'; doll.style.top = '0'; doll.style.left = '0'; gameContainer.appendChild(doll); }});function checkCollision(element1, element2) { // 检测两个元素是否碰撞 // 返回 true 或 false}数据存储与后端交互：为了记录玩家的得分、金币等信息，实现了简略的数据存储和与后端的交互。教训与教训在开发《在线抓娃娃机》的过程中，取得了一些贵重的教训和教训： ...

⭐️ 本文已收录到 AndroidFamily，技术和职场问题，请关注公众号 [彭旭锐] 和 BaguTree Pro 常识星球发问。 学习数据结构与算法的关键在于把握问题背地的算法思维框架，你的思考越形象，它能笼罩的问题域就越广，了解难度也更简单。在这个专栏里，小彭与你分享每场 LeetCode 周赛的解题报告，一起领会上分之旅。 本文是 LeetCode 上分之旅系列的第 40 篇文章，往期回顾请移步到文章开端\~ 双周赛 111T1. 统计和小于指标的下标对数目（Easy） 标签：模仿、排序、相向双指针T2. 循环增长使字符串子序列等于另一个字符串（Medium） 标签：排序、双指针T3. 将三个组排序（Medium） 标签：状态机 DP、LIS 问题、贪婪、二分查找T4. 范畴中漂亮整数的数目（Hard） 标签：数位 DP、记忆化T1. 统计和小于指标的下标对数目（Easy）https://leetcode.cn/problems/count-pairs-whose-sum-is-less-than-target/题解一（模仿）简略模拟题。 class Solution { fun countPairs(nums: List<Int>, target: Int): Int { var ret = 0 for (i in 0 until nums.size) { for (j in i + 1 until nums.size) { if (nums[i] + nums[j] < target) ret ++ } } return ret }}复杂度剖析： ...

前言本篇章次要讲述原型链相干知识点，为后续的函数篇章先铺垫肯定的前缀常识，也承接了援用类型篇章的常识。面试答复1.原型链：原型链次要有三局部形成：原型、构造函数、实例，实例能够通过new构造函数获取，构造函数能够通过实例的constructor或者原型的constructor获取，原型能够通过实例的__proto__或者构造函数的prototype获取。原型也能够通过__proto__获取父级元素的原型，直到最终拿到null。知识点1.原型链 图片为我对于原型链的了解，一起让咱们由易入难去了解，原型链中的三个主体：原型、构造函数、实例对象。 原型能够简略了解为贮存办法和属性的对象（JS万物皆可为对象） 构造函数只有被new过的函数就能够被称为构造函数，每个函数都有一个prototype属性，它指向该函数的原型，构造函数也是如此。构造函数里有两个非凡的存在：Object、Function，前者在所有的JS对象的原型链上，后者则是所有的构造函数（包含它本人）的都是Function的实例对象，所以 Function instanceof FunctionFunction.__proto__===Function.prototype //PS：这里的Function不是function Function(){}，而是自身内置的Function实例对象因为不同的创立形式有差别，因而从创立形式来了解，一个为字面量形式；一个为结构器形式；一个为Object.create形式。三者的差别在于不同的创立形式的原型不同。 字面量形式：let a={} ,原型为function Object的prototype，相当于new Object() 结构器形式：let p = new Person(),原型为Person函数的prototype Object.create()形式：let a={} let b=Object.create(a) ，原型为a 依照上述了解，能够构建出如下思维导图： 而后再梳理一下实例对象、构造函数、原型之间的转换: let A = function(){}; //构造函数let a = new A(); // 实例对象console.log(a.__proto__) // 原型A === a.constructorA === a.__proto__.constructora.__proto__ === A.prototype可得，如下思维导图： 因为__proto__是任何对象都有的属性，而JS中万物皆可为对象，因而能够通过__proto__一直连贯其父级原型对象，到了父级原型对象这一步，同样也会有新的原型圈（就是下图的闭环），最初会达到顶层Object.prototype，它的 __proto__指向null完结，这条链路就被称为原型链，同时JS引擎查找属性时也会依照原型链的方向逐层去查找直到找到为止。 依照上述了解，并添以简略代码加以了解，可得思维导图： 1.var A = function(){}; //构造函数2.var a = new A(); // 实例对象3.a.__proto__ // 原型4.a.__proto__.__proto__ // 原型的原型：Object.prototype5.a.__proto__.__proto__.__proto__ // 原型链的起点：null 当然，其中还有不明确的点，那么就须要本人去搜寻了解，搞明确每一个点所代表的意义和作用，给个原型链的经典图用以测验，从左至右的三列别离对应的是实例、构造函数、原型： ...

WebGPU 是一种全新的古代API，用于在 Web 应用程序中拜访 GPU 的性能。在 WebGPU 之前，有 一种WebGL技术，它提供了 WebGPU 性能的子集。 而WebGPU启用了新一类丰盛的网络内容，开发人员能够用它构建了令人惊叹的利用。其历史能够追溯到2007 年公布的 OpenGL ES 2.0 API，而该 API 又基于更旧的 OpenGL API。 WebGPU 将这些古代 API 的提高带到了 Web 平台。 它专一于以跨平台的形式启用 GPU 性能，同时提供一个在网络上感觉天然的 API，并且比它所构建的一些本机 API 更简洁。 GPU 通常与渲染疾速、具体的图形分割在一起，WebGPU 也不例外。 它具备反对当今桌面和挪动 GPU 上许多最风行的渲染技术所需的性能，并为将来随着硬件性能的一直倒退增加新性能提供了路径。除了渲染之外，WebGPU 还能够开释 GPU 执行通用、高度并行工作负载的后劲。 这些计算着色器能够独立应用，无需任何渲染组件，也能够作为渲染管道的严密集成局部。 一、初始化WebGPU如果你只想应用 WebGPU 进行计算，那么则无需在屏幕上显示任何内容就能够体验WebGPU。 然而，如果你想要再屏幕上渲染内容，就像咱们将在 Codelab 中所做的那样，你须要筹备一个画布。 1.1 从canvas开始首先，咱们创立一个新的 HTML 文档，而后筹备一个canvas元素，用于绘制具体的内容，代码如下： <!doctype html><html> <head> <meta charset="utf-8"> <title>WebGPU Life</title> </head> <body> <canvas width="512" height="512"></canvas> <script type="module"> const canvas = document.querySelector("canvas"); // Your WebGPU code will begin here! </script> </body></html>1.2 GPU设施因为WebGPU是一项新的技术，所以第一步是检查用户的浏览器是否能够运行WebGPU。要查看充当 WebGPU 入口点的 navigator.gpu 对象是否存在，请增加以下代码： ...

本文由 Deguang 发表于 码路-技术博客什么是ARTS打卡？Algorithm 算法67. 二进制求和通过循环从后向前计算，判断加和数值是否须要进位function addBinary(a: string, b: string): string { let i = a.length - 1; let j = b.length - 1; let overflow = 0; const res: number[] = []; while(i >= 0 || j >= 0) { let sum = overflow; if (i >= 0) { sum += Number(a[i]) i--; } if (j >= 0) { sum += Number(b[j]) j--; } res.unshift(sum & 1) overflow = sum >> 1 } if (overflow === 1) { res.unshift(overflow) } return res.join('');};69. x 的平方根依照二分查找，判断中值平方与目标值的大小，不超过目标值的最大值，即为答案function mySqrt(x: number): number { let i = 0; let j = x; let ans = -1; while (i <= j) { const mid = Math.floor((i + j) / 2); if (mid * mid <= x) { ans = mid i = mid + 1; } else { j = mid - 1; } } return ans;};Review 英文浏览Article: ...

LVGL 是一个灵便弱小的图形库，多用于嵌入式零碎。其中，文本标签（label）是咱们比拟罕用的一个组件，UI 个别会应用文本居中的设计，但我在实践中发现，LVGL 并没有使文本居中的接口供调用，这里就分享一种使 label 的文本居中的形式。 1 先看一段 label 相干的代码const char* content = "this is for test";// 在 root 上创立一个文本标签，并居中显示lv_obj_t* label = lv_label_create(root);lv_obj_center(label);// 这里将边框显示进去，不便咱们察看文字的地位lv_obj_set_style_border_width(label, 2, 0);lv_obj_set_style_border_color(label, lv_color_black(), 0);// 红色文字，应用默认字体lv_obj_set_style_text_color(label, lv_color_hex(0xFF0000), 0);// label 的 size 设置的偏大，不便察看文字在其中的绝对地位lv_obj_set_size(label, 200, 50);lv_label_set_text(label, content);下面这段代码跑进去是什么样的呢？如下图，因为 label 的高度（50）是远大于文本的高度的，文本的默认对齐地位是左上角，所以就出现了图中的成果。我找了一会，发现有个函数叫 lv_obj_set_style_text_align()，看起来像是设置文字对齐形式的，让咱们先试一下。 // 后面代码不变，省略了lv_obj_set_style_text_align(label, LV_ALIGN_CENTER, 0);lv_obj_set_size(label, 200, 50);lv_label_set_text(label, content);当初是什么样的成果呢？一点变动也没有，不必狐疑，我的确从新跑了一次代码，这也是新的后果。 2 如何让 label 中的文字居中呢？其实也很简略，咱们应用 pad 来调节文字的地位即可。如图所示，一个 label 的文本其实在两头，四边都是有 pad 存在的，咱们能够管制 pad 的高(宽)度，来间接管制文本内容在 label 中的绝对地位。 代码如下 // 后面代码不变，省略了lv_obj_set_size(label, 200, 50);lv_label_set_text(label, content);auto fontHeight = lv_font_get_line_height(LV_FONT_DEFAULT);auto verPad = (50 - fontHeight)/2;lv_obj_set_style_pad_top(label, verPpad, 0);auto textWidth = lv_txt_get_width(content, strlen(content), LV_FONT_DEFAULT, 0);auto horPad = (200 - textWidth)/2;lv_obj_set_style_pad_left(label, horPad, 0);咱们通过 lv_font_get_line_height 来计算出文本的理论高度，进而计算出高低 pad 的高度，程度方向也是同理。效果图如下，文本曾经居中了。 ...

本地老工程vue2.7.x+webpack4在降级webpack5的时候遇启动和打包报错:Syntax Error: SyntaxError: /xxxxx.vue Unexpected token, expected "," (1:8)> 1 | [object Promise] | ^ 2 | export { render, staticRenderFns } 最初才发现是prettier导致的。 举荐看看stackoverflow下面这个答复。Update Nodejs 14->18 — webpack have the same syntaxError: /.../xxx.vue: Unexpected token, expected "," (1:8) for ALL Vue 2 components in the project 导致起因：在prettier v3.0.0中，默认值从es5更改为all Default value changed from es5 to all in v3.0.0Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (A single-line array, for example, never gets trailing commas.)Valid options:"all" - Trailing commas wherever possible (including function parameters and calls). To run, JavaScript code formatted this way needs an engine that supports ES2017 (Node.js 8+ or a modern browser) or downlevel compilation. This also enables trailing commas in type parameters in TypeScript (supported since TypeScript 2.7 released in January 2018)."es5" - Trailing commas where valid in ES5 (objects, arrays, etc.). No trailing commas in type parameters in TypeScript."none" - No trailing commas.解决办法1prettier插件版本回退到v2.8.8 ...

随着金融市场日益简单和竞争加剧，私募机构逐步意识到了量化交易系统的重要性。量化交易是一种利用数学模型和统计分析办法进行投资决策的形式，通过大数据分析、算法优化等技术手段，实现自动化的交易操作。对于私募机构而言，量化交易系统不仅可能进步投资效率和危险控制能力，还可能为其带来更稳固且可继续的收益。guweng22346 首先，私募机构认为量化交易系统可能提供更准确和牢靠的投资决策。传统的人工操盘往往受限于集体教训和情绪影响，而量化交易系统则依附迷信算法和大数据分析，能够全面、精确地评估市场危险与机会。基于历史数据和模型回测，量化交易系统可能发现暗藏在市场中的法则和趋势，并据此制订相应的投资策略。这种基于数据驱动的决策形式使得私募机构可能更加主观地进行投资，升高了主观判断和随机性带来的危险。 其次，私募机构看好量化交易系统在危险管制方面的劣势。量化交易系统可能依据预设的危险管制指标和止损规定，主动执行交易操作，并及时平仓或调整仓位，防止因情绪稳定或错误判断而导致的巨额亏损。同时，量化交易系统还可能实时监测市场行情和投资组合的危险裸露度，提供实时报警和危险提醒，帮忙私募机构及时调整投资策略和仓位配置，从而最大限度地爱护投资者的利益。 另外，私募机构对将来量化交易的前景持乐观态度。随着科技进步和软件技术的一直变革，量化交易系统将进一步发展壮大。首先，在数据方面，随着云计算、大数据分析等技术的广泛应用，量化交易系统能够更加高效地解决海量数据，并从中提取出有价值的信息。其次，在算法方面，人工智能、机器学习等技术的倒退将使得量化交易系统具备更弱小的学习和适应能力，可能一直优化和调整投资策略，适应市场变动。此外，随着监管环境的改善和投资者对量化交易的认可度进步，私募机构在量化交易畛域将有更多的倒退机会。 综上所述，私募机构对量化交易系统持必定态度。他们认为量化交易系统可能提供准确牢靠的投资决策，并具备优良的危险控制能力。同时，他们对将来量化交易的前景充满信心，置信随着科技进步和软件技术的一直变革，量化交易系统将进一步发展壮大，并在金融市场中施展越来越重要的作用。

前言很多人都会认为，想要找到本人的人生目标是十分难的，次要有 2 个起因： 当初定的指标不肯定是正确的，可能过几年之后就变了，何必浪费时间呢不晓得怎么找到本人的人生目标你是不是也是这么认为的呢？ 以前的我也是这么感觉的，所以素来没有探索过：我的人生目标是什么？ 当初的我却不这么想。摸索本人的人生目标，是一件十分有意义，并应该定期去做的事件。因为： 一个明确的、有意义的指标，是产生内驱力的要害因素之一，这个在我的《驱动力》读后感文章中有介绍；有了人生目标之后，咱们对本人的成长就会有相应的布局，带着目标去成长是最快的。即便过了几年，随着人生经历的增长，咱们的人生目标产生了变动也没关系。因为在这个过程中，咱们的成长是显著的。而能力的可迁移性也能够帮忙本人更容易达成新的人生目标。摸索人生目标的过程，就是一次从新思考本人人生和将来的过程。即便确定不了最终的人生目标，但你可能会发现自己的一些问题和薄弱点，找到将来致力的方向。如果想通这点，妨碍你的第 1 个艰难点曾经解决了。接下来我介绍一个工具，帮忙你解决第 2 个艰难点。 意识 ikigai 人生四叶草这个工具叫 ikigai 人生四叶草模型，也称为 ikigai 幸福公式。它是日本人追求幸福和满足感的一个重要概念。 ikigai 是由两个词汇组合而成： "iki"意为生命、存在，"gai"意为价值、意义。ikigai 能够被了解为生存的意义或存在的价值。 让咱们先来看下 ikigai 人生四叶草的全貌： ikigai 强调了四个要害因素的均衡与交融，它们是： 你酷爱的事：指的是你对什么感兴趣、乐于投入并带来高兴的事物或流动。你善于的事：指的是你具备的技能、常识和特长，可能在某个畛域或事业中有所奉献。世界须要的：指的是你认为社会所须要的、可能为社会做出踊跃奉献的事物。你能够失去报酬的事：指的是你可能取得物质或非物质回报的事物，可能为你提供经济反对和满足。图中每个大圆圈代表 1 个要害因素。再看两个圆圈相交的局部： 激情：如果你在做本人酷爱并很善于的事件，那必定很有干劲。使命：如果你十分酷爱这个事业，并且认为这项事业是对世界有奉献的，那会充斥使命感。职责：社会(公司)须要你做事，并且会给你报酬，那就是打工仔的职责了。业余：如果你十分善于做某件事情，并且他人违心付钱请你做事，那阐明你是业余的。再看有 3 个圆圈相交的局部，它代表了短少了其中一个要害因素，那是不美满的： 如果短少报酬，那么你的经济是不富裕的，尽管你会感觉本人的工作高兴并空虚。如果做的是本人不善于的事件，有时候就会感觉很不确定，不晓得能不能胜利。如果短少酷爱，你就会感到充实，心里空荡荡的。如果你认为本人的工作十分琐碎，就会感觉本人是不被重用的。4 个圆圈重叠的局部就是 ikigai，它代表了 4 个要害因素的交融，也就是咱们的人生目标了。 ikigai 人生四叶草的用法寻找本人的人生目标ikigai 人生四叶草能够帮忙你寻找人生目标。为了让你更好地利用这个工具，我创立了 ikigai 人生四叶草画布工具，关注我的公众号，并回复【ikigai】即可获取这个画布工具。 能够依照以下步骤来应用这个工具： 依照程序，独自思考 4 个大圈的事项，尽量列举多一点。而后依照程序，思考 2 个大圈相交的事项。而后找到 ikigai。最初得出自我总结。这里最要害的就是 4 个大圈的事项，你须要留神几点： 青睐的事能够简略分类为消费型和生产型，比方读书是消费型，写作是生产型。善于的事除了以后的职业技能之外，还有一些能力上的。次要是思考本人的劣势项，如果你不能很好地评估本人劣势项的话，能够在网上找些在线测评，或者找四周不同角色的人给你评估。其实世界须要很多事件，咱们不可能把所有事件都列出来。所以，在思考世界须要你做的事件时，能够从以下角度思考： 以后你的身份带来的责任，比方父亲。以后你的工作。跟你酷爱的事项相关联的，世界可能须要你做的事。跟你善于的事项相关联的，世界可能须要你做的事。他人会付钱的事就是最初的过滤项，次要从世界须要你做的事项中去筛选出他人会付钱的事。最初的【自我总结】就是在摸索实现之后，梳理本人的感触总结以及将来致力的方向。 好了，画布的应用办法介绍完了，这个就是摸索本人的人生目标的办法。接下来我介绍一个虚构的例子。 你可能一眼就看进去了，这是一个前端开发技术宅的摸索后果。很多人一开始填这个画布的时候也会是这样子，非常简单，事项很少，因为真的不晓得本人酷爱的事件和善于的事件。 没关系，当咱们把以后的情况填好的时候，可能曾经有一些启发了。回到这个例子，能够参考【自我总结】局部： 从图中能够看出，小 A 在前端开发事项曾经 3 缺 1 了，如果把最初的酷爱补上的话，那不就是残缺的 ikigai 了吗？所以，小 A 很有必要思考一下：我喜爱编程吗？我是不是有必要在前端开发的其余畛域摸索一下本人的趣味？比方大数据可视化、h5 游戏、虚拟化？如果真的不喜爱编程，那也不能强求，那就须要从新寻找本人酷爱的事项了，因为酷爱是人生幸福的最外围前提。能够看到，小 A 当初列举的都是消费型酷爱事项，这些事项是不会同时满足世界须要+他人付钱的，所以小 A 须要思考：我还有其余的生产型的青睐吗？制订成长布局小 A 静下心来思考和感触，发现自己很喜爱尝试新的游戏和新的玩法，平时也很喜爱跟敌人分享好玩的游戏，并且把一些很有意思的游戏心得和游戏经验分享给敌人，大家听了小 A 的分享，也在游戏中取得了高兴，小 A 本人也感到很高兴。 ...

对于app开发者而言，没有什么路径比音讯推送更能间接、即时地涉及指标用户群体了。音讯推送与咱们的日常生活非亲非故，各种APP的状态和告诉都通过音讯推送来告知用户，引起用户的留神，吸引用户点开app。总而言之，推送服务是绝大部分app不可或缺的要害性能。   而且，推送服务如果经营得好，能够显著晋升app的用户粘性和活跃度！这放在获客老本如此昂扬的明天，对开发者无疑是另一种便当。   当初市面上有许多推送服务工具，MobPush在其中怀才不遇，被泛滥开发者青睐。   MobPush是一款智能化推送零碎，它是由MobTech推出的一款收费的推送服务工具，客户端SDK反对iOS和Android两大平台，集成不便简略快捷，且提供残缺的可视化数据和弱小的治理后盾。   那么，MobPush到底能提供什么性能呢？ A/B测试 在指标用户群体中随机抽取定量用户，最多分为6组，通过不同素材进行触达，测试素材点击率，以在正式推送时达到最优质的触达成果。 用户行为剖析 基于Mob大数据分析，统计用户沉闷时段、用户留存率、用户卸载状况、告诉权限开关等行为数据。 智能推送 反对多种款式推送；反对TCP通道和厂商反对反对蕴含全量播送、自定义标签、用户别名、分群等多种推送策略，实现千人千面的推送。 全链路统计 提供弱小推送数据统计性能，在整个推送链路的36个业务系节点提供了精准统计面板；同时反对API回调，为经营提供数据保障。 敏感词过滤 高效过滤色情、广告、涉政、暴恐等多类垃圾文字及敏感词，保障合规推送。 寰球推送 反对国内外音讯触达，反对寰球服务器推送。 MobPush的用途在购物节尤其能够浮现。 现在，购物节层出不穷，各式各样的优惠活动、商家促销应接不暇，有些优惠活动消费者并不能及时承受到，就会导致他们错过了优惠工夫，打消了他们购买商品的念头。而这么多的流动，要如何能力精准地推送给用户，激发他们的购物欲望呢？MobPush能够实现。   首先，MobPush能够依据用户的购买历史、浏览行为、兴趣爱好等数据，为用户举荐个性化的商品和优惠信息。在618、双十一等购物节期间，用户收到个性化的举荐后更有可能被吸引并进行购买，晋升购物节的转化率和销售额。   其次，MobPush可能即时将促销信息、限时优惠等告诉推送给用户，揭示用户购物节期间的各种优惠活动。购物节期间的优惠活动切实是太多了，“200-20”、“300-50”等等，每个流动的工夫都不一样，因而用户很容易错过优惠工夫而放弃购买。MobPush可能帮忙用户及时获取到优惠信息，更及时地参加购买，避免错过优惠，减少平台购物节期间的销售量和交易额。   除此之外，MobPush还能依据购物节期间的用户反馈和行为变动，收集和剖析用户行为数据，及时调整推送策略。如果用户对某些商品或促销信息兴趣不大，零碎能够学习并缩小对该类商品或信息的推送，进步推送的准确性和用户满意度。   因而，音讯推送对于减少用户参与度和购物节的胜利度具备重要作用。音讯推送是电商平台达到精细化经营的重要工具，MobPush基于MobTech多年来深厚的大数据技术积淀，助力App推送定位精准用户投放，实现新老用户的高效唤醒，是平台音讯推送的第一抉择。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="guest-item"> <div class="img-header"> <img alt="nanfeng" src="guest-img1.png"> <div class="header-bg"></div> </div> <div class="text"> <h3>南风</h3> <p>寰球产品与规范副总裁</p> </div> </div></body><style> .guest-item .img-header { margin: 0 auto; text-align: center; position: relative; width: 182px; height: 182px; cursor: pointer; } .guest-item .img-header img { display: inline-block; width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; z-index: 2; margin-top: -60px; margin-left: -60px; border-radius: 100%; transition: all 0.5s ease-out; } .guest-item .header-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url('guest-bg.png') no-repeat center top; -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; -ms-transition: -ms-transform 0.6s ease-out; } .guest-item:hover .header-bg { -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); transform: rotateZ(45deg); } .guest-item:hover .img-header img { transform: scale(1.1); } .text { text-align: center; }</style></html> ...

本文由TinyVue组件库核心成员郑志超分享，向咱们介绍了如何在OpenTiny Vue组件库中进行UX标准的定制批改。学会应用该办法后，开发者能够更精准地管制或批改用户体验标准的范畴，进步开发效率，同时升高保护老本和代码复杂度。 什么是前端组件库主题标准自定义前端组件库主题标准自定义是指在组件库中定义一套主题标准，包含色彩、字体、间距等款式属性，并提供一种自定义形式，使用户能够依据本人的需要批改主题标准，从而实现自定义主题的成果。 如何实现主题标准自定义在理论我的项目中，往往须要依据不同的品牌、格调、场景等需要来定制不同的主题，而组件库的主题标准往往是固定的，无奈满足这种需要。因而，提供主题标准自定义的性能，能够让用户依据本人的需要来定制主题，从而更好地满足我的项目需要。 那么，如何实现主题标准自定义呢？一般来说，能够通过以下几个步骤来实现： 1. 定义主题标准： 首先须要定义一套主题标准，包含色彩、字体、间距等款式属性，以及对应的变量名。 2. 提供自定义形式： 在组件库中提供一种自定义形式，让用户能够依据本人的需要来批改主题标准。一般来说，能够提供一个配置文件或者一个可视化的界面来进行主题标准的批改。 3. 利用主题标准： 在组件库中应用定义好的主题标准，通过变量名来援用对应的款式属性，从而实现主题标准的利用。 接下来让咱们一起来看看如何在 OpenTiny Vue 组件库中实现主题配置和UX交互标准自定义吧~ 实操演练演示代码仓： https://github.com/opentiny/cross-framework-component.git 第一步 自定义主题首先，通过主题配置零碎定义所需的主题标准，并按流程公布主题包。能够在现网环境地址（https://www.opentiny.design/designtheme/home**）实现这一步骤。 1、公布主题 配置完主题后点击公布，将用户的配置转换成代码。一键式主题公布以及版本治理，让治理更简略；装置后即可应用，让开发者更专一。 2、装置应用主题公布胜利后，须要在vue3子工程中引入该依赖。如下图所示： 3、而后从新在我的项目根目录下载依赖pnpm i4、在我的项目中应用在vue3子工程的main.js文件中导入主题款式文件 import '@opentiny/vue-zzc-theme/index.css'5、启动工程查看运行命令如下命令启动vue3自工程： pnpm dev:vue3展现成果如下： 二、自定义交互标准1、自定义组件交互标准 首先须要提供一份自定义的标准配置，这里自定义了button组件的点击事件行为，能够看到renderless函数返回的办法或者属性会笼罩本来组件的办法或者属性； 其次renderless函数的参数会将组件外部的状态包含：props、hoos、api、utils、extendOptions 传递进去，方便使用或者设置组件的外部状态或者调用组件的其余办法。 {      /**       *       * @param {object} props 传递给组件的属性       * @param {object} hooks vue或者composition-api的hooks       * @param {object} utils OpenTiny封装的工具对象       * @param {object} api 组件的状态state和办法的汇合       * @param {object} extendOptions 额定参数       */      renderless: (props, hooks, { emit }, api, { framework }) => {        return {          // 自定义笼罩button组件的点击事件行为          handleClick(event) {            console.log(              console.log(`${framework}框架代码已触发！！！！！！！！！`)            )            alert('自定义交互逻辑')            emit('click', event)          }        }      }    }2、通过ConfigProvider组件向外部所有组件传递自定义标准（能够实现部分组件的交互标准批改） 具体代码在vue3子工程的App.vue文件,如下图所示： 成果如下： 总结总体来说，通过实现主题标准自定义，能够达到以下几个成果： 1. 进步组件库的可定制性： 用户能够依据本人的需要来定制主题，从而更好地满足我的项目需要。 2. 进步组件库的可复用性： 通过定义一套主题标准，能够使组件库中的款式属性更加对立，从而进步组件库的可复用性。 3. 进步组件库的可维护性： 通过定义一套主题标准，能够使组件库中的款式属性更加清晰明了，从而进步组件库的可维护性。 当然TinyVue组件库不仅实现了UX主题标准自定义，同时是通过笼罩单个函数的形式，这样更加有利于进步用户体验标准的定制化水平，满足特定的业务需要和用户需要，同时进步开发效率和用户满意度，同时进步代码的可维护性。从而进步前端开发的效率和品质。 以上就是郑志超同学的分享，如果你也有更多前端技术想与咱们交换，欢送投稿。除此之外，也欢送你参加到 OpenTiny 开源中来，一起共建我的项目，研究前端技术。 对于 OpenTinyOpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 挪动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，领有主题配置零碎 / 中后盾模板 / CLI 命令行等效率晋升工具，可帮忙开发者高效开发 Web 利用。 ...

JVS低代码开发平台提供了大量的可配置组件和事后集成的性能，开发人员能够通过拖拽和设置属性的形式，疾速搭建应用程序的前端界面和交互逻辑。同时，低代码平台也提供了丰盛的后端服务和集成能力，能够轻松地与现有的零碎和第三方服务进行对接。低代码的轻利用通常实用于一些简略的业务场景，例如表单解决、数据展现、流程治理等。因为应用低代码平台进行开发，轻利用的开发工夫和老本都失去了较大的缩小，同时还具备肯定的可定制性和扩展性。 JVS轻利用的详情展现如下图所示，点击利用的名称，右侧展现出利用的根本详情 其中包含利用的根本信息、利用的权限信息、页面信息、业务流程、业务逻辑、数据模式、利用相干日志与自定义页面等信息。 根本信息如下图所示，包含利用的根本信息与基本操作 ①：利用的根本信息与logo②：利用的状态与快速访问的URL信息③：利用的凭证展现利用的外围秘钥信息④：利用的操作，对利用的公布与卸载，在待发布状态下，才能够删除利用 利用权限点击利用权限，零碎进入利用权限治理页面，提供对本利用的受权配置的操作 利用管理员有两类：利用主管与开发成员，利用主管受权后，用户能够对本利用进行配置编辑、公布；利用开发成本是受权后，能够在利用核心查看到此利用，能够对利用的卸载，公布到模板核心等操作，如下图所示 例如，如果须要两个人或者多人对轻利用进行批改，就能够在这里进行受权设置: 页面列表点击页面列表，展现的零碎中蕴含的配置生成的列表页与表单，这里能够对曾经配置的页面进行删除操作。 业务流程在业务流程界面展现了本利用 蕴含的所有的业务流程，同时这里能够创立流程。 流程页面 页面能够对创立流程、删除流程、对流程进行设计， 展现流程相干公布状态 逻辑编排列表点击集成自动化列表页，零碎展现了本利用中所有通过编排的可执行逻辑 逻辑页面其中，这里能够创立逻辑，这里创立的逻辑是能够反对独立自主运行的，能够设置主动启动的定时工作的。 数据模型数据模型是 轻利用存储数据的根底能力，相似一般的数据表，然而数据模型更多是具备柔性的能力，也就是依据列表页、表单配置的调整，零碎或动静调整数据模型的构造 点击详情，将展现该数据模型的具体表构造，能够点击具体字段增加索引。 备注：模型中如果没有字段的，零碎将不展现详情按钮，如下图所示 利用日志利用日志是记录本利用编辑操作的历史过程，其中记录了操作人员、操作工夫，操作的内容，如下图所示 自定义页面这里自定义页面次要解决自定义的前端页面须要接入轻利用是，须要具备同样的权限管制体系，能够通过申明权限的标识，由自定的页面本人实现界面的权限管制，由轻利用来配置权限调配。 点击新增，这弹出新增自定义页面的表单，输出页面地址与页面信息即可实现自定页根底信息的增加； 点击权限设置，这进入自定义权限治理的界面：如下图所示： ①：新增权限标识，就是申明一个对应权限的标识，在自定义页面中实现对这个标识 的权限管制，能够增加多个权限标识 ②：增加权限控制组，和其余页面、性能的权限管制相似，能够新增多个权限组，能够赋予多个人员、角色等 在线demo：https://frame.bctools.cn/JVS根底框架开源地址：https://gitee.com/software-minister/jvs 往期热点内容低代码开发工具：JVS轻利用之间如何实现数据的调用？低代码、逻辑、规定、数据分析、协同工具汇合，解决企业不同需要jvs-logic（逻辑引擎）的产生背景和应用场景作用jvs-flow （流程引擎）审批流程是如何配置的？

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。快来收费体验ChatGpt plus版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home 布局是中大型网站或利用的根底。 假如你正在创立一个网页利用，它包含主页、营销页面和利用页面： 心愿主页领有独特的布局心愿您的营销页面有侧边栏或其余任何货色心愿您的利用页面具备常见的元素，如正告音讯、谬误音讯、特定的题目、导航等等你不会想要为每一页反复所有的工作，对吧？ 与Nuxt不同，Vue 3并没有内置的布局零碎，然而别放心，这里将向你展现3种简略的办法来实现这一点。 1. 将布局导入为惯例组件以创立布局零碎这是创立布局零碎的最简略办法，但其灵活性较差。为了简化解释，咱们就用我下面的例子来阐明吧。 咱们有5页： 首页（将有特定的布局）对于和分割（将具备营销布局）Inside1和Inside2（将领有应用程序布局）咱们将创立一个名为“layouts”的文件夹，在其中咱们将创立蕴含插槽的三个布局组件。 而后，你只需像这样在每个页面组件中导入你须要的布局： 这种办法存在两个次要问题： 须要在每个页面中导入布局，当然，你能够将这些组件设为全局的，但你依然须要每次手动包装你的内容。每次路由更改时，布局都将被卸载并销毁，即便下一个路由应用雷同的布局。这会对性能产生一点影响，但真正的问题是，即便它们应用雷同的布局，你也无奈在一个路由到另一个路由之间放弃状态。 2. 利用Vue Router，路由的元属性，以及动静组件来创立布局零碎为了防止在每个页面中导入布局，咱们能够抉择在路由器中一次性导入，而后为每个路由调配其关联的布局。 如此处所示，咱们间接将每个布局组件对象与每个路由的元数据属性关联。咱们只导入了一次所有的布局。 为了防止布局被卸载和毁坏，咱们将把布局放在页面之上，而不是放在页面外部。 为了将布局置于页面之上，咱们在App.vue组件中创立了一个动静组件。 在模板中，咱们能够通过$route拜访以后的路由，并且在每个路由上，咱们都能够拜访其元属性，这意味着咱们能够拜访之前设置的布局组件对象。 如果路由在元对象上没有布局属性，咱们将回退到应用DIV标签的字符串。 咱们只需导入一次布局，无需在每个页面中导入或包装布局，当初，咱们不会有性能问题，而且在从具备雷同布局的两个路由导航时，咱们能够放弃状态。 所以，我的主页组件当初看起来像这样： 无需再包装任何货色；所有的事件都在App.vue中解决，围绕的<router-view> 每当路由扭转时的每个页面。 这种办法在大多数应用场景中都无效，但它存在一个问题 布局只有在 route 扭转时才会变动。 如果你须要在不扭转路由的状况下动静扭转布局，那么这种办法将不起作用。只有在多数状况下，你可能会想要动静地扭转布局，但这是有可能产生的。 例如： 在一段时间后显示一个锁定的页面为了显示一个离线页面为了显示谬误页面那些示例能够通过全屏 modal 零碎来实现，然而 modal 很容易通过控制台从DOM中删除。 3. 应用 ShallowRef，Provide，Inject 以及 Vue Router 的 afterEach钩子来创立布局零碎为了可能在任何中央更改布局，而不仅仅是在路由更改时，咱们须要在整个应用程序中共享布局的状态。 咱们能够应用 Vuex 或 Pina 来实现这个性能，但在这里咱们还是放弃简略吧。 咱们将应用Vue的原生响应性零碎，配合组合api。 以下是步骤： 在App.vue中，咱们将创立一个布局常量，该常量蕴含一个shallowRef以保留以后的布局组件。在一个独自的文件中，咱们将创立一个蕴含每个布局名称及其组件的键/值对的对象在App.vue或其余中央，咱们将应用路由器的afterEach钩子来监听每次路由变动，以动静地扭转以后的布局。在App.vue中，咱们将向其后辈提供布局常量，以便App.vue的树中的任何组件都能够注入布局常量来扭转其值。在路由中，咱们将把元数据上的每个布局属性更改为仅蕴含要抉择的布局名称的字符串。那么，这里是第二步，一个蕴含所有布局并作为对象展现的文件： 当初咱们也能够将路由中的元数据仅更改为字符串，因为它们将映射到上述对象： ...

记录一下空值合并操作符 ??(Nullish coalescing operator) 及 可选链操作符 ?. (Optional chaining) // 空值合并操作符 ?? (Nullish coalescing operator)// 只有当左侧为null和undefined时，才会返回右侧的数const foo001 = null ?? 'default string';console.log(foo001);// expected output: "default string" const foo002 = undefined ?? 'default string';console.log(foo002);// expected output: "default string" const foo003 = 0 ?? 42;console.log(foo003);// expected output: 0 /* 留神: ?? 运算符不能与 AND 或 OR 运算符共用 (来自 MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing)*/ // null || undefined ?? "foo"; // 抛出 SyntaxError// true || undefined ?? "foo"; // 抛出 SyntaxError ...