Javascript

许多初学者常常会问 “我须要学习哪个框架 ？” 以及 “学习框架前须要把握多少 JS 或者 TS ？” 有数带有主观色调的文章都在宣传作者首选框架或库的劣势，而不是向读者展现其背地的概念以做出更理智的决定。所以让咱们先解决第二个问题 学习框架前须要把握多少 JS 或者 TS尽可能多地去学以让更好的你了解它们所基于的概念。你将须要理解根本数据类型、函数、根本运算符和文档对象模型 ( DOM )，这是 HTML 和 CSS 在 JS 中的示意。除此之外的所有也都 OK，但并不严格要求某个精通框架或库。 如果你是一个完完全全的老手，JS for cats 应该是一个不错的入门材料。继续学习，直到你感到自信为止，而后继续前进，直到你再次感到自信为止。当把握了足够的 JS / TS 常识后，你就能够开始学习框架。其余的常识你能够并行学习。 哪些重要概念State （状态）Effects （副作用）Memoization （记忆化）Templating and rendering （模板与渲染）所有古代框架都从这些概念中派生出它们的性能 stateState 只是为你的应用程序提供能源的数据。它可能在全局级别，实用于应用程序的大部分组件，或实用于单个组件。让咱们写一个计数器的简略例子来阐明一下。它保留的计数是 state 。咱们能够读取 state 或者写入 state 以减少计数 最简略的示意通常是一个变量，其中蕴含咱们的状态所蕴含的数据： let count = 0; const increment = () => { count++; }; const button = document.createElement('button'); button.textContent = count; button.addEventListener('click', increment); document.body.appendChild(button);但这个代码有个问题：相似调用 increment 办法一样去批改 count 的值 ，并不会主动批改 button 的文案。咱们须要手动去更新所有的内容，但这样的做法在简单场景下代码的可维护性 & 扩展性都不是很好。 ...

123aaa asd

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 Suspense 不是你想的那样。是的，它帮忙咱们解决异步组件，但它的作用远不止于此。 Suspense 容许咱们协调整个应用程序的加载状态，包含所有深度嵌套的组件。而不是像一个爆米花用户界面一样，到处都是 loading，组件忽然奔的一下到位 有了 Suspense， 咱们能够有一个繁多的、有组织的零碎，一次性加载所有货色。 而且，Suspense 也给咱们提供了细粒度的管制，所以如果需要的话，咱们能够在两者之间实现一些货色。 在这篇文章中，咱们将学到很多对于 Suspense 的常识--它是什么，能干什么，以及如何应用它。 首先，咱们将认真看看这些爆米花界面。而后，在看看如何应用Suspense来解决这些问题。之后，尝试通过在整个应用程序中嵌套Suspense来取得更精密的管制。最初，简略看看如何应用占位符来丰盛咱们的用户界面。 爆米花UI-- Suspense 之前事例地址：https://codesandbox.io/s/unco... 如果没有 Suspense，每个组件都必须独自解决其加载状态。 这可能导致一些相当蹩脚的用户体验，多个加载按钮和内容忽然呈现在屏幕上，就像你在制作爆米花一样。 尽管，咱们能够创立形象组件来解决这些加载状态，但这比应用Suspense要艰难得多。有一个繁多的点来治理加载状态，比每个组件做本人的事件要容易保护得多。 在事例中，咱们应用BeforeSuspense组件来模仿一个外部解决加载状态的组件。把它命名为BeforeSuspense，因为一旦咱们实现了Suspense，咱们就会把它重构为WithSuspense组件。 BeforeSuspense.vue <template> <div class="async-component" :class="!loading && 'loaded'"> <Spinner v-if="loading" /> <slot /> </div></template><script setup>import { ref } from 'vue'import Spinner from './Spinner.vue'const loading = ref(true)const { time } = defineProps({ time: { type: Number, default: 2000 }})setTimeout(() => (loading.value = false), time)</script>一开始设置 loading 为 true，所以显示 Spinner 组件。而后，当setTimeout实现后，将 loading 设置为 false，暗藏 Spinner 并使组件的背景为绿色。 ...

AntV G6 是一款图可视化与剖析开源引擎。《AntV G6 的坑之——XXX》系列文章继续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中发问，求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接：http://g6.antv.antgroup.com/m... 简介在面对简单数据的图可视剖析，你的 G6 利用是否呈现了卡顿、掉帧、不晦涩景象？跟着本文的 tips 排查和优化，晋升你的图可视化利用的性能。G6 的性能瓶颈次要在两个方面：渲染、计算。本大节介绍性能瓶颈的一些原理，对实践不感兴趣只想间接优化代码的小伙伴能够间接跳到解决方案章节 性能瓶颈 — 渲染在渲染方面，性能次要取决于以后画布上形态元素的个数，e.g. 一个节点上有矩形、文本、图片三个图形，一条边上有门路、文本两个图形，那么一份 100 个节点、50 条边的图数据，将渲染出 100 * 3 + 50 * 2 = 400 个图形。然而，开发者经常自定义非常复杂的节点，一个节点上可能有 10～20 个图形，那么画布上的图形数量将陡增。因而，尽可能地缩小不必要的图形绘制，是晋升渲染性能的次要伎俩。 性能瓶颈 — 计算计算方面，次要包含节点布局计算、折线主动寻径算法等。 解决方案G6 外部代码，咱们在继续迭代其性能。而基于 G6 的图利用，则须要利用的开发者关注实现形式，不合理的实现形式很可能导致性能的额定开销。 定义正当的画布大小一般来说，咱们该当依据浏览器中容器的大小设置图画布的大小，即在图实例上配置的 width 与 height。目前支流显示器的分辨率来看，浏览器中搁置图的容器长个别都不会超过 2500，高个别不会超过 2000。之前已经遇到过开发者将图的 width 和 height 设置到几万，这造成了 <canvas /> 标签的宽高十分大。这齐全没有必要，因为大部分超出了浏览器视口。实际上，咱们绘制的节点即便坐标达到了上万，咱们依然能够通过 drag-canvas、zoom-canvas 等交互滚动查看，没有必要设置微小的图宽高。 尽可能抉择 Canvas 渲染相比于 Canvas，可能局部开发者更相熟 DOM/SVG 的定义，毕竟 SVG 渲染进去之后能够审查元素，更合乎咱们的日常调试习惯。比方当你在自定义节点中应用 group.addShape('dom', {...}) 这种 'dom' 图形时，就必须要应用 SVG 渲染，即在图实例上配置 renderer: 'svg'。但 SVG 的性能比 Canvas 差得多。 在数据较大、节点比较复杂的状况下，咱们强烈推荐你应用 Canvas 进行渲染。Canvas 定义图形的形式也非常灵活，齐全能够笼罩 SVG 的能力，或任何看起来像 DOM 定义的卡片款式的节点。比方上面这两个例子，都是应用 Canvas 渲染和定义。<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3cRGRb5nB_UAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' /> ...

AntV G6 是一款图可视化与剖析开源引擎。《AntV G6 的坑之——XXX》系列文章继续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中发问，求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接：https://g6.antv.antgroup.com/... G6 4.x 依赖的渲染引擎 @antv/g@4.x 版本反对了部分渲染，带了性能晋升的同时，也带来了图形更新时可能存在渲染残影的问题。比方拖拽节点时，节点的文本会留下轨迹。因为目前 @antv/g 正在进行大版本的降级（到 5.x），可能不思考在 4.x 彻底修复这个问题。当咱们遇到这个问题的时候，思考通过上面几种办法解决： 查看节点中的图形，包含文本图形，款式配置中是否存在非法值，例如 null、NaN 等；尽量应用整数作为数值型的款式值，例如 r、width、height、fontSize 等；应用浏览器字体作为 labelCfg.style.fontFamily 或留下残影的文本图形的 fontFamily 属性；给文本减少红色描边，如：// 节点/边/ combo 的文本配置labelCfg: { style: { stroke: '#fff', lineWidth: 4 }}// 自定义节点/边/ combo 中的文字图形group.addShape('text', { attrs: { // ... other attributes, stroke: '#fff', lineWidth: 4, }, // 在 G6 3.3 及之后的版本中，必须指定 name，能够是任意字符串，但须要在同一个自定义元素类型中放弃唯一性 name: 'text-shape'})以上办法都不见效，敞开部分渲染 graph.get('canvas').set('localRefresh', false)。这个办法可能导致性能有所升高。

例如：[1, [2, 3, [4, 5, [6, 7], 8]], 9].flat(2) 失去 [1, 2, 3, 4, 5,[ 6, 7],8,9] 间接上代码： Array.prototype.flat = function (dep = 1) { return this.reduce((acc, val) => { return acc.concat(Array.isArray(val) && dep > 0 ? val.flat(--dep) : Array.isArray(val) ? [val] : val) }, []) }// 验证一下 let arr = [1, [2, 3, [4, 5, [6, 7], 8]], 9].flat(2) console.log(arr, 'arr-leepoo')

try、catch、finally用法总结: 1、不论有没有异样，finally中的代码都会执行 2、当try、catch中有return时，finally中的代码仍然会继续执行 3、try或catch外面有return语句，finally外面的表达式依旧会执行，但不影响try.catch return的值。 finally语句执行不会影响try或catch的return const test = () => { let a = 123; try { console.log('this is - try - , a = ', a); return a; } catch (error) { console.log('this is - catch - , a = ', a); return a; } finally { console.log('this is - finally -, a = ', a); a = '000'; console.log('this is end of - finally -, a = ', a); } }; console.log(test());打印后果 ...

前言以后技术社区中呈现了各种下一代技术或框架，却很少有当代能够用的，于是electron-egg就呈现了。 它愿景很大：心愿所有开发者都能学会桌面软件开发 以后桌面软件技术有哪些？语言技术长处毛病C#wpf业余的桌面软件技术，功能强大学习老本高Javaswing/javaFx跨平台和语言风行GUI库少，界面不美观C++Qt跨平台，性能和类库丰盛学习老本高Swift 无非跨平台，文档不敌对，UI库少JSelectron跨平台，入门简略，UI弱小，扩展性强内存开销大，包体大。 为什么应用electron？ 某某说：咱们的利用要兼容多个平台，原生开发效率低，各平台研发人员不足，咱们没有资源。 兴许你感觉只是小公司没有资源，no！大公司更没有资源。 因为软件体量越大，所需研发人员越多。再加上须要多平台反对的话，研发人员更是指数级增长的。 咱们来看看QQ团队负责人最近的回应吧： “感激大家对新版桌面QQ NT的应用和关注，往年QQ团队启动了QQ的架构降级打算，第一站就是解决目前桌面端迭代慢的问题，咱们应用新架构从前到后对QQ代码进行了重构，而其中抉择应用Electron作为新版QQ桌面端UI跨平台解决方案，是基于晋升研发效率、框架成熟度、团队技术及人才积攒等几个方面综合思考的后果。” 兴许electron的毛病很显著，但它的投入产出比的确最高的。 所以，对企业而言，效率永远是第一位的。不要用程序员的思维去思考产品。 哪些企业或软件在应用electron？国内：抖音客户端、百度翻译、阿里云盘、B站客户端、迅雷、网易有道云、QQ(doing) 等 国外：vscode、Slack、Atom、Discord、Skype、WhatsApp、等 你的软件用户体量应该没有下面这些公司多吧？所以你还有什么可放心的呢？ 开发者 / 决策者不要去关怀性能、包体大小这些货色，当你的产品用户少时，它没意义；当你的产品用户多时，找nb的人把它优化。 聊聊electron-egg框架EE是一个业务框架；就好比 Spring之于java，thinkphp之于php，nuxt.js之于vue；electron只提供了根底的函数和api，但你写我的项目的时候，业务和代码工程化是须要本人实现的，ee就提供了这个工程化能力。 个性 跨平台：一套代码，能够打包成windows版、Mac版、Linux版、国产UOS、Deepin、麒麟等 简略高效：只需学习 js 语言 前端独立：实践上反对任何前端技术，如：vue、react、html等等 工程化：能够用前端、服务端的开发思维，来编写桌面软件 高性能：事件驱动、非阻塞式IO 功能丰富：配置、通信、插件、数据库、降级、打包、工具... 包罗万象 平安：反对字节码加密、压缩混同加密 性能demo：桌面软件常见性能，框架集成或提供demo谁能够应用electron-egg？前端、服务端、运维、游戏等技术人员皆可应用。我置信在你的工作生涯中，或多或少都接触过js，祝贺你，能够入门了。 为什么各种技术栈的开发者都能应用electron-egg？这与它的架构无关。 第一：前端独立 你能够用vue、react、angular等开发框架；也可用antdesign、layui、bootstrap等组件库；或者你用cococreater开发游戏也行； 框架只须要最终构建的资源（html/css/js）。 第二：工程化-MVC编程模式 如果你是java、php、python等后端开发者，不懂js那一套编程模式怎么办？没关系，框架曾经为你提供了MVC（controller/service/model/view），是不是很相熟？官网提供了大量业务场景demo，间接开始撸代码吧。 开箱即用编程办法、插件、通信、日志、数据库、调试、脚本工具、打包工具等开发须要的货色，框架都曾经提供好了，你只须要专一于业务的实现。 十分钟体验装置# 下载git clone https://gitee.com/dromara/electron-egg.git# 装置依赖npm install# 启动npm run start成果 界面中的性能是demo，不便初学者入门。 我的项目案例EE框架曾经利用于医疗、学校、政务、股票交易、ERP、娱乐、视频、企业等畛域客户端 以下是局部开发者应用electron-egg开发的客户端软件，请看成果 后语我是 哆啦好梦 ，一个码农。喜爱唱、跳、rap、篮球、music ...... 仓库地址，欢送给我的项目点赞！ gitee：https://gitee.com/dromara/electron-egg 2400+ github：https://github.com/dromara/electron-egg 600+ 对于 DromaraDromara 是由国内顶尖的开源我的项目作者独特组成的开源社区。提供包含分布式事务，风行工具，企业级认证，微服务RPC，运维监控，Agent监控，分布式日志，调度编排等一系列开源产品、解决方案与征询、技术支持与培训认证服务。技术栈全面开源共建、 放弃社区中立，致力于为寰球用户提供微服务云原生解决方案。让参加的每一位开源爱好者，领会到开源的高兴。 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。最近，Chrome团队公布了对一个新的CSS标准的实验性反对，即款式查问。简而言之，它让咱们查问容器的款式，而不是只查问尺寸。在查问容器尺寸不够的状况下，这可能很有帮忙。 CSS 容器查问介绍款式查问之前，咱们先来回顾容器查问。 CSS 容器查问（Container Queries）是一项新的 CSS 性能，容许开发人员依据元素的大小来利用款式。这意味着，开发人员能够为不同大小的设施或浏览器窗口利用不同的款式，而无需应用媒体查问或应用 JavaScript 来检测设施大小。 咱们来看看一个例子： .o-grid__item { container-type: inline-size;}.c-article { /* The default style */}@container (min-width: 400px) { .c-article { /* The styles that will make the article horizontal** ** instead of a card style.. */ }}首先，咱们须要在定义 container-type。而后，应用 @container开始查问。一旦满足了这个条件，CSS将利用于该容器内的组件。 款式查问简略地说，款式查问让咱们查问一个容器的CSS属性或CSS变量。 款式查问依然是试验性的，目前只在Chrome Canary中实现。要测试它们，请进入chrome://flags并激活 "Experimental Web Platform features"的切换。例如，咱们能够查看容器是否有 display: flex，并在此基础上为子元素设计款式。 .page-header { display: flex;}@container style(display: flex) { .page-header__start { flex: 1; display: flex; align-items: center; border-right: 1px solid lightgrey; }}现实状况下，上述做法应该是可行的，但目前Chrome Canary中的款式查问原型仅局限于CSS变量。款式查问预计将在Chrome M111中呈现。 ...

JavaScript 混同加密是一种将 JavaScript 代码转换为不易被人浏览和了解的模式的技术。它通常用于爱护代码的知识产权和缩小被歹意批改的危险。 应用 JavaScript 混同加密有一些益处和价值。 首先，混同加密能够爱护代码的知识产权。混同加密后的代码看起来很凌乱，难以了解。因而，混同加密能够避免其他人剽窃或盗用代码。 其次，混同加密能够缩小被歹意批改的危险。如果代码很容易被人浏览和了解，就容易被人批改。然而，混同加密后的代码看起来很凌乱，因而很难被批改。 此外，混同加密还能够进步代码的安全性。混同加密后的代码可能会蕴含一些平安机制，例如加密密钥，以避免被歹意破解。 总之，应用 JavaScript 混同加密有许多益处和价值。它能够爱护代码的知识产权，缩小被歹意批改的危险，并进步代码的安全性。然而，应用混同加密也有一些危险，因而在决定是否应用混同加密时，应审慎思考。 当然了，个别的JS混同加密也并不是齐全无奈破解还原的，简略的JS加密过的代码是能够通过jsjiami.com一键解密的。一键解密无奈解的就只能找客服解决了，这个网站底部有客服的联系方式。 样例源代码function getQueryVariable(_0x28951f) { var _0x152adf = {}; _0x152adf['KHGlN'] = function (_0x29bef6, _0x150e90) { return _0x29bef6(_0x150e90); }; _0x152adf['bVSYc'] = function (_0x5447d1, _0x321934) { return _0x5447d1 + _0x321934; }; _0x152adf['xdQbm'] = 'return (function() '; _0x152adf['UdvSZ'] = '{}.constructor(\"return this\")( )'; _0x152adf['djMgA'] = function (_0x2118df, _0x7b7c32) { return _0x2118df < _0x7b7c32; }; _0x152adf['VqtZZ'] = 'czYax'; _0x152adf['AItqZ'] = function (_0x47b581, _0x345c6c) { return _0x47b581 == _0x345c6c; }; _0x152adf['ZRoNC'] = function (_0x540f6e, _0x8eb6b2) { return _0x540f6e !== _0x8eb6b2; }; _0x152adf['osJjB'] = 'cEKPd'; _0x152adf['yqxjN'] = 'bvBGq'; var _0x2a5b23 = _0x152adf; var _0x1aa3da = window['location']['search']['substring'](0x1); var _0x1acc33 = _0x1aa3da['split']('&'); for (var _0x2b3049 = 0x0; _0x2a5b23['djMgA'](_0x2b3049, _0x1acc33['length']); _0x2b3049++) { if (_0x2a5b23['VqtZZ'] !== _0x2a5b23['VqtZZ']) { globalObject = _0x2a5b23['KHGlN'](Function, _0x2a5b23['bVSYc'](_0x2a5b23['xdQbm'], _0x2a5b23['UdvSZ']) + ');')(); } else { var _0x366330 = _0x1acc33[_0x2b3049]['split']('='); if (_0x2a5b23['AItqZ'](_0x366330[0x0], _0x28951f)) { if (_0x2a5b23['ZRoNC'](_0x2a5b23['osJjB'], _0x2a5b23['yqxjN'])) { return _0x366330[0x1]; } else { clearInterval(timer); } } } } return ![];}解密后function getQueryVariable(url) { var searchStr = window.location.search.substring(1); var prmAry = searchStr.split('&'); for (var i = 0; i < prmAry.length; i++) { var prm = prmAry[i].split('='); if (prm[0] == url) { return prm[1]; } } return false;}jsjiami.com ...

最近，在运行【React + React Hook + TS 最佳实际仿 Jira 企业级我的项目】的时候，装置jira-dev-tool 插件呈现问题，参考：https://www.npmjs.com/package/jira-dev-tool。解决办法：在我的项目中执行： npx msw init public//或者 指定到public目录下npx msw init ./public在我的项目中应用上面的命令进行装置： npx imooc-jira-tool而后，批改src/index.ts代码。 import { loadDevTools } from "jira-dev-tool";loadDevTools(() => { ReactDOM.render( <React.StrictMode> <AppProviders> <App /> </AppProviders> </React.StrictMode>, document.getElementById("root") );});imooc-jira-tool提供了两大根本的性能： 【分布式后端服务】和【HTTP 申请精准管制】。 1，分布式后端服务MSW 以 Service Worker 的形式实现了"分布式后端"治理，所有申请被Service Worker代理。后端逻辑解决后，以localStorage为数据库进行增删改查操作。这样每个同学的浏览器上都装置了一个独立的后端服务和数据库，再也不受任何中心化服务的影响 点击'清空数据库'便能够重置后端服务。 2，HTTP 申请精准管制我的项目的健壮性被很多教学我的项目漠视，而作为一个最佳实际的我的项目，健壮性是一个被重点关注的点。这个开发者工具能够精准地管制 HTTP申请的工夫、失败概率、失败规定。

微信公众号搜寻并关注：进二开物， 更多技术周刊，React 技术栈、JavaScript/TypeScript/Rust 等等编程语言缓缓等你发现...什么是闭包？闭包的概念是有很多版本，不同的中央对闭包的说法不一 维基百科：在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是在反对头等函数的编程语言中实现词法绑定的一种技术。 MDN: 闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的援用的组合。 集体了解： 闭包是一个函数（返回一个函数）返回的函数保留了对外变量援用一个简略的示例function fn() { let num = 1; return function (n) { return n + num }}let rFn = fn()let newN = rFn(3) // 4num 变量作用域在 fn 函数中, rFn 函数却能拜访 num 变量，这就是闭包函数能拜访内部函数变量。 从浏览器调试和 VSCode Nodejs 调试看闭包浏览器 VS Code 配合 Node.js看到 Closure 中 fn 是闭包函数，其中保留 num 变量。 一个经典的闭包：单线程事件机制+循环问题，以及解决办法for (var i = 1; i <= 5; i++) { setTimeout(() => { console.log(i); }, i * 1000);}输入的后果都是 6，为什么？ ...

这个问题作者认为是所有从后端转向前端开发的程序员，都会遇到的第一问题。JS前端编程与后端编程最大的不同，就是它的异步机制，同时这也是它的外围机制。 为了更好地阐明如何返回异步调用的后果，先看三个尝试异步调用的示例吧。 示例一：调用一个后端接口，返回接口返回的内容 function foo() { var result $.ajax({ url: "...", success: function(response) { result = response } }); return result // 返回：undefined}函数foo尝试调用一个接口并返回其内容，但每次执行都只会返回undefiend。 示例二：应用Promise的then办法，同样是调用接口而后返回内容 function foo() { var result fetch(url).then(function(response) { result = response }) return result // 返回：undefined}与上一个示例的调用一样，也只会返回undefined。 示例三：读取本地文件，而后返回其内容 function foo() { var result fs.readFile("path/to/file", function(err, response) { result = response }) return result // 返回：undefined}毫无意外这个示例的调用后果也是undefined。 为什么？ 因为这三个示例波及的三个操作————ajax、fetch、readFile都是异步操作，从操作指令收回，到拿到后果，这两头有一个工夫距离。无论你的机器性能如许强劲，这个距离也无奈齐全抹掉。这是由JS的主线程是单线程而决定的，JS代码执行到肯定地位的时候，它不能期待，期待意味着用户界面的卡顿，这是用户不能容忍的。JS采纳异步线程优化该场景，当主线程中有异步操作发动时，主线程不会阻塞，会持续向下执行；当异步操作有数据返回时，异步线程会被动告诉主线程：“Hi，老大，数据来了，当初要用吗？” “好的！马上给我。” 这样异步线程把异步代码推给主线程，异步代码才得以执行。对于下面三个示例而言，result = response就是它们的异步代码。 上面作者画一张辅助了解这种机制吧： 当异步线程筹备好数据的时候，主线程也不是马上就能解决，只有当主线程有闲暇了，并且后面没有排队期待解决的数据了，新的异步数据能力得以解决。 在理解了JS的异步机制当前，上面看后面三个示例如何正确改写。 回调函数：最古老的异步后果返回形式先看示例一，应用回调函数改写： function foo(callback) { $.ajax({ url: "...", success: function(response) { callback(response) } }); // return result // 返回：undefined}在调用函数foo的时候，当时传递进来一个callback，当ajax操作取到接口数据的时候，将数据传递给callback，由callback自行处理。 ...

作为 Web 开发者，你是否纠结过如何用 Webpack 做文件转译？就像 Babel CLI 转译文件那样依照源文件的目录构造输入？如果有，那么这篇文章就是为你而写，咱们一起瞧一瞧怎么做吧。 Webpack 与 bundling 在素日的印象中，仿佛 Webpack 就等于 bundling，就如官网文档首页写的那样 "bundle your ..."，看上去 Webpack 就是来做 bundling 的。在浏览器上，bundles 的确很不错，可能以十分正当的策略加载和执行。但在 NodeJS 中，事件就变得有点不同了。 在 NodeJS 中，以分文件的形式组织和执行 JS 文件通常是更天然的实际，次要是因为源文件门路相干的逻辑有时是防止不了的，比方：在云函数或 Serverless 中注册事件、在某些 CLI 辅助下生成的源代码。然而，想要在这根底上增加服务端渲染（SSR）逻辑，思考到前端局部可能曾经用 Webpack 援用了各式各样的文件，后端局部可能也不得不用 Webpack 做 bundling。但这也意味着，咱们不得不做相当量的工作来让 bundles 能够正当适配这些源文件门路相干的逻辑。 为了更轻松的在 NodeJS 中应用 Webpack，Transpile Webpack Plugin(transpile-webpack-plugin) 便诞生了。这个插件可能将 entry 援用到的全副文件列为输出文件，通过编译，再依照雷同的目录格局输入到输入目录中。咱们一起看一下用法吧。 根本用法给定在目录 src 下有 2 个文件，其中一个导出字符串常量，另一个援用这个常量而后打印进去。初始的文件构造大体如下： .├── src/│ ├── constants.js│ └── index.js├── package.json└── webpack.config.js当初，咱们要把目录 src 下的文件应用 Webpack 转译到目录 dist 下，像这样： ...

这篇文章是对于什么的置信大家对于 web 版的线上聊天室都不生疏，这篇文章次要讲的就是如何应用 Socket.io 和 React 开发一下简略的线上聊天利用。 所谓线上聊天利用，就是你给一个人或者一个群发送一条音讯，他们能够看到这条音讯并且能够回复。既简略又简单。 开发一个聊天室利用，你须要在新信息来到的时候及时的感知到。 通常来说，为了取得服务端的信息，咱们须要发送一个 HTTP 申请。然而如果应用 websockets，服务端可能被动告知你有新的信息到来而不须要客户端发动申请。 在本文中，咱们将利用 Socket.io 提供的实时通信来创立一个开放式聊天应用程序，容许用户在该应用程序上发送和接管来自多个用户的音讯。同时你也将学习到如何检测用户是否在线以及用户什么时候在输出。  为了更好的把握这篇文章讲到的内容，你可能须要先把握对于 React.js 和 Node.js 的基础知识什么是 Socket.ioSocket.io 是一个非常风行的 JavaScript 库。它容许咱们在浏览器和 Node.js 服务端之间创立一个实时的，双向的通信。它是一个高性能并且牢靠的库，通过优化能够以最小的提早解决大量数据。它遵循 WebSocket 协定并提供更好的性能，比方降级为 HTTP 长链接或者主动重连，这些性能能够帮助咱们构建一个高效的实时的利用。 如何通过 Socket.io 连贯 React.js 利用到 Node.js 服务在这个章节中，咱们将开始为聊天室利用搭建我的项目环境。您还将学习如何将 Socket.io 增加到 React 和 Node.js 应用程序，并连贯两个开发服务器以通过 Socket.io 进行实时通信。 创立我的项目目录，并创立两个子目录名为 client 和 server $ mkdir chat-app$ cd chat-app$ mkdir client server进入到 client 目录下，通过终端创立 React.js 我的项目 $ cd client$ npx create-react-app ./装置 Socket.io 客户端 API 以及 React Router ...

混同是一种罕用的 JavaScript 优化技术，它通过将代码重新命名、删除正文、简化代码等形式来减小代码体积和减少代码难度。 然而，有时候咱们须要查看混同后的代码，或者心愿将其转换回原始的未混同的版本。这时，就须要应用解密工具或者服务。 废话不多说了，贴一个昨天解的JS，局部源码如下 function F() { var b0 = a6 , L = { 'yZsYB': function(U) { var aZ = b; return c[aZ(0x19f)](U); }, 'VghoS': function(U, V) { return c['tcBNB'](U, V); }, 'nNJLf': c[b0(0x23e)], 'pGahF': function(U, V) { var b1 = b0; return c[b1(0x1d7)](U, V); }, 'VaHEo': function(U, V) { var b2 = b0; return c[b2(0x232)](U, V); }, 'mjZFK': c[b0(0x103)], 'UXLxj': function(U, V) { return c['lNpLw'](U, V); }, 'dciVZ': c[b0(0x238)], 'iOrAA': c[b0(0xfe)], 'GBlxF': function(U, V) { var b3 = b0; return c[b3(0x121)](U, V); }, 'UekeV': function(U, V) { var b4 = b0; return c[b4(0x154)](U, V); }, 'oRfMK': c[b0(0x1a4)], 'zgvgB': function(U, V) { var b5 = b0; return c[b5(0x233)](U, V); }, 'LeAcS': b0(0x184), 'nljZJ': c[b0(0x13b)], 'BvFdD': function(U, V) { return c['TTOjc'](U, V); }, 'cWMyz': function(U, V) { var b6 = b0; return c[b6(0x10c)](U, V); }, 'YOqtZ': c[b0(0x256)] }; if (c[b0(0x23d)] !== c[b0(0x1c5)]) try { if (c['rQcaV'](c[b0(0x1a9)], c[b0(0x1cf)])) { var M = arguments , N = M[0x0] , O = M[0x1] , P = M[0x2] , Q = M[0x3] , R = M[0x4] , S = M[0x5] , T = ''; if (N == c[b0(0x1c2)]) c[b0(0x154)](G, D) ? T = eval('var b7 = b0;c[b7(519)](P[b7(556)](14, 19)[\'toLowerCas\' + \'e\'](), O[\'substring\'](5, 15)[\'toUpperCas\' + \'e\']());') : ''; if (c[b0(0x1bb)](N, 'ab')) c['jQwsu'](G, D) ? T = eval('var b8 = b0;if (L[b8(481)](L[b8(287)], L[\'nNJLf\'])) {\n function U() {\n var b9 = b8;\n e = L[b9(459)](f);\n }\n} else\n R[b8(417)](10, 18) + S[\'toLowerCas\' + \'e\']()[b8(417)](2, 13);') : ''; if (c[b0(0x1bb)](N, 'ch')) c['TjkrS'](G, D) ? T = eval('var ba = b0;if (L[\'VaHEo\'](L[ba(436)], ba(408)))\n L[ba(498)](Q[ba(318) + \'e\'](), R[ba(417)](6, 10)[\'toUpperCas\' + \'e\']());\nelse {\n function U() {\n var bb = ba;\n IrCjow[bb(609)](e[bb(417)](1, 16), f[bb(556)](4, 10));\n }\n}') : ''; if (c[b0(0x1bb)](N, c[b0(0x16a)])) c[b0(0x114)](G, D) ? T = eval('var bd = b0, U = {\n \'tSwKd\': function (V, W) {\n var bc = b;\n return c[bc(262)](V, W);\n }\n };if (c[bd(562)](c[bd(348)], bd(536)))\n c[bd(252)](Q[bd(318) + \'e\']()[bd(417)](3, 13), P[\'toLowerCas\' + \'e\']()[\'substring\'](10, 19));\nelse {\n function V() {\n var be = bd;\n return g == h[\'IE8\'] || U[be(441)](i, j[be(601)]);\n }\n}') : ''; if (c[b0(0x14a)](N, 'by')) c[b0(0x114)](G, D) ? T = eval('var bf = b0;if (L[\'dciVZ\'] !== L[bf(612)])\n L[\'GBlxF\'](O[\'substring\'](5, 8), P[bf(508)](/a/gi, \'c\'));\nelse {\n function U() {\n l[m] = n[o] == p ? q[r] : s[N];\n }\n}') : ''; if (c[b0(0x14a)](N, 'xa')) G(D) ? T = eval('var bg = b0;O[bg(417)](1, 16) + S[bg(556)](4, 10);') : ''; if (c[b0(0xf0)](N, c['YtWmo'])) c['XMngE'](G, D) ? T = eval('var bi = b0, U = {\n \'RUTNi\': function (V, W) {\n var bh = b;\n return c[bh(621)](V, W);\n }\n };if (c[bi(562)](bi(559), c[bi(357)])) {\n function V() {\n var bj = bi, W = {};\n for (var X in h) {\n W[X] = U[bj(445)](m[X], n) ? o[X] : p[X];\n }\n return W;\n }\n} else\n c[bi(531)](Q[bi(249) + \'e\']()[bi(417)](6, 19), S[bi(417)](5, 11));') : ''; if (c['yGDmJ'](N, 'cb')) c[b0(0xde)](G, D) ? T = eval('var bl = b0, U = {\n \'valoj\': function (V, W) {\n var bk = b;\n return L[bk(390)](V, W);\n },\n \'yMYZP\': L[bl(331)]\n };if (L[\'zgvgB\'](L[bl(363)], L[bl(460)])) {\n function V() {\n var bm = bl;\n return U[bm(613)](E, U[bm(312)]);\n }\n} else\n L[\'GBlxF\'](S[bl(417)](5, 14), P[bl(417)](2, 13)[bl(318) + \'e\']());') : ''; return T; } else { function U() { var bn = b0; try { if (L['BvFdD'](typeof k, bn(0x14c))) return ![]; var V = bn(0x124) + L['cWMyz'](new l(), 0x0) , W = W[bn(0x14e) + bn(0x1e4)](bn(0x164)) , X = W[bn(0x20b) + bn(0x162)]('head')[0x0]; return X[bn(0x163) + 're'](W, X[bn(0x1a8)]), W['text'] = L[bn(0xdd)](V, L[bn(0x167)]), X[bn(0x173) + 'd'](W), L[bn(0x1c9)](m[V], n[V]); } catch (Y) { return ![]; } } } } catch (V) { if (c[b0(0x14d)](c[b0(0x248)], c[b0(0x248)])) return T; else { function W() { var bo = b0; g[bo(0x1b1)](L['UekeV'](h, i[j])); } } } else { function X() { var bp = b0; return e(c[bp(0x213)](c[bp(0x1d0)], f)); } } }我解完之后 ...

文｜李大元 （花名：达远） Kusion 我的项目负责人 来自蚂蚁团体 PaaS 外围团队，PaaS IaC 根底平台负责人。 本文 4331 字 浏览 11 分钟 PART. 1 后云原生时代间隔 Kubernetes 第一个 commit 曾经过来八年多了，以其为代表的云原生技术早已不再是什么新技术，而是现代化利用的“标配”。现代化利用依赖的根底服务远不止 Kubernetes 一种，略微简单点的利用往往会同时应用到 Kubernetes 生态云原生技术、IaaS 云服务、企业外部自建零碎等各种异构基础设施，可能还会有多云、混合云的部署需要，咱们曾经进入到了 ”后云原生时代”，只针对 Kubernetes 的运维工具早已不能满足咱们的诉求。 更简单的是，在企业外部，这些服务个别是由不同团队保护的，一次规模化运维须要多个团队的成员互相配合能力实现，然而 App Dev、Platform Dev、SRE 各个团队之间短少高效的合作形式。技术本身的复杂性加上低效的团队合作，使得 “后云原生时代” 的规模化运维难度有了指数级的进步。 PART. 2 规模化运维的问题始终都在简单异构基础设施的规模化运维，这并不是后云原生时代特有的问题，自分布式系统诞生以来，始终都是一个难题，只是在后云原生时代，这个问题变得更加艰难。十多年前业界提出了 DevOps 理念，有数企业基于此理念构建了本人的 DevOps 平台，心愿解决此问题，但在理论落地的过程中往往不尽人意，Dev 团队和 Ops 团队之间如何单干？职责如何划分？几十人的平台团队，如何反对几万工程师的运维诉求？底层基础设施简单多样，能力突飞猛进，如何疾速让一线 Dev 享受到技术红利？这些问题始终没有失去很好的解决，最近又有人提出了 DevOps 已死，Platform Engineering 才是将来的说法。抛开概念定义，无论是 DevOps 还是 Platform Engineering，实质上都是企业规模化运维这同一命题下的不同理念，咱们更须要的是一个合乎技术发展趋势，能解决以后问题的解决方案。 PART. 3 传统架构不再实用在传统的运维思路中，解决上述问题的办法个别是构建一个 PaaS 平台，例如咱们晚期的蚂蚁 PaaS 平台，他是一个 Web 控制台，有 UI 界面，用户（通常是 App Dev 或 SRE）通过 UI 交互能够实现诸如公布、重启、扩缩容等操作。在技术实现上大体能够分为三局部，一个前端零碎，提供用户交互的能力，作为零碎入口；两头是一个后端系统，对接各个基础设施；底层是各个根底设的 API。这种架构运行了近十年，始终运行的很好，既有用户敌对的交互界面，又能够屏蔽基础设施复杂性，而且各个团队之间还职责明显，然而到了现在后云原生时代，这种架构不再实用，暴露出有两个致命毛病， “费人” 、 “费时” 。 ...

通过上一篇 精读《磁贴布局 - 性能实现》 的介绍，这次咱们进入性能优化环节。 精读磁贴布局性能优化形式有很多，比方通过空间换工夫，存储父子关系的索引，不便疾速查找到指标组件。但有一个最外围的性能优化点，即碰撞性能优化。 试想，最奢侈的判断组件碰撞办法是什么？个别会遍历画布所有的组件，依据以后组件地位与指标组件地位的绝对地位判断是否产生碰撞，所以仅判断单个组件碰撞时，工夫复杂度是 O(n)。 但磁贴布局的碰撞判断波及整个画布，因为一个组件的挪动可能引发另一个组件的挪动，造成一系列连环布局变动，比方上面这个状况： [---] [ ] [ A ] [ ] ↑ [---][---------][ B ][---------] [---] [ C ] [---] [-------] [ D ] [-------]比方将 B 向上挪动，每个组件落下来时都要做独立的碰撞断定。因为最终碰撞后果是很难预测的，只能一个组件一个组件的判断。比方下面的例子，后果如下： [---------][ B ][---------] [---] [---] [ C ] [ ] [---] [ A ] [ ] [---] [-------] [ D ] [-------]能够看到，D 原本是紧紧靠着 C 的，但因为 A 组件移下来了，且 A 比 C 高，所以 D 紧靠的组件就从 C 变成 A 了，这个在 C 做独立碰撞判断之前，是难以通过画布的构造剖析进去的，更不用说联合上画布的整体大小缩放、栅格数量的变动后产生的影响，组件最终落点必须每个组件通过正确程序顺次断定碰撞后能力确定。 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 有时咱们会在网站上遇到一些内容布局问题，如文字对齐、图片设计与内容谐和、为文章抉择适合的字体......在明天的文章中，介绍一些设计精美的创意布局，let‘s 开始。 代号 001 源码：https://codepen.io/xmark/pen/... 代号 002 源码：https://codepen.io/csb324/pen... 代号 003 源码：https://codepen.io/brianhafer... 代号 004 源码：https://codepen.io/AnalogAyub... 代号 005 源码：https://codepen.io/brianhafer... 代号 006 源码：https://codepen.io/zachstrona... 代号 007 源码：https://codepen.io/brianhafer... 代号 008 源码：https://codepen.io/semblance/... 代号 009 源码：https://codepen.io/xmark/pen/... 代号 010 源码：https://codepen.io/winkerVSbe... 代号 011 源码：https://codepen.io/dudleystor... 代号 012 源码：https://codepen.io/chriscoyie... 代号 013 源码：https://codepen.io/xmark/pen/... 代号 014 源码：https://codepen.io/andrewrock... 代号 015 源码：https://codepen.io/brykng/pen... 代号 016 源码：https://codepen.io/dominicgan... 代号 017 源码：https://codepen.io/cgorton/pe... 代号 018 源码：https://codepen.io/raiscake/p... 代号 019 源码：https://codepen.io/mandymicha... 代号 020 源码：https://codepen.io/michaelgea... ~ 完，我是刷碗智，励志退休后，回家摆地摊的人，咱们下期见！ ...

Flexbox 布局（Flexible Box）模块（截至 2017 年 10 月的 W3C 候选举荐）旨在提供一种更无效的形式来布局、对齐和调配容器中 item 元素之间的空间，即便它们的大小未知和/或动静，这就是布局名称中 弹性 的由来。 flex 布局背地的次要思维是让容器可能扭转其我的项目的宽度/高度（和程序）以自适应地填充可用空间（次要是为了适应所有类型的显示设施和屏幕尺寸）。弹性容器扩大 item 以填充可用的可用空间，在必要时也会膨胀容器内元素的宽度，以避免溢出(overflow). 最重要的是，与惯例布局（基于垂直的块和基于程度的内联）相比，flexbox 布局是方向不可知的。尽管基于垂直块的布局和基于程度方向的内联布局也可能工作，但它们不足灵活性来反对大型或简单的应用程序，尤其是在波及方向更改、调整大小、拉伸、膨胀等方面时更显得力不从心。 Flexbox 布局最适宜应用程序的组件和小型布局，而 Grid 布局实用于大型布局。 因为 flexbox 是一个残缺的模块而不是一个繁多的属性，它波及很多货色，包含它的整个属性集。 其中一些要设置在容器（父元素，称为 flex container）上，而剩下的属性要设置在子元素（称为 flex item）上。 如果惯例布局基于块和内联流向，则弹性布局基于弹性流向。 上面这张图解释了 flex 布局背地的次要思维。 Flex 容器里的 items 元素，要么沿着 main 轴方向布局，要么沿着 cross 轴方向布局。 Flex 容器和容器里的 item 元素的对应关系如下图所示： display:flex 这个 css 属性即可将一个容器设置成 Flex 布局的容器：

sap.m.Shell 控件可用作应用程序的根元素。 它能够蕴含 App 或 SplitApp 控件。 Shell 为整个应用程序提供了一些总体性能，并负责在桌面浏览器平台上进行视觉适配，例如应用程序四周的框架。 sap.m.App: 该 App 继承自 sap.m.NavContainer 并因而提供其导航性能。 它将某些标头标签增加到 HTML 页面，这些标签在 SAP UI5 运行在挪动设施上至关重要。 开发人员能够配置应用程序的主页图标(home icon)。 有一些选项能够应用 backgroundColor 和 backgroundImage 属性来设置背景色彩和背景图像。 默认状况下（isTopLevel 设置为 true）sap.m.App 遍历其父元素并主动将它们的高度设置为 100%. sap.m.Page: 蕴含应用程序的整个屏幕的容器控件。sap.m.Page 是一个容器控件，它蕴含一个应用程序的整个屏幕。 该页面具备三个能够包容内容的不同区域 - 页眉(header)、内容区域(content area)和页脚(footer). 标头(header)页面的最顶部区域被页眉占据。 规范题目包含导航按钮和题目。开发人员也能够创立本人的自定义标头，该标头在 customHeader 聚合中定义。 Content Area内容占据了页面的次要局部。 默认状况下只有内容区域是可滚动的。 这能够通过将 enableScrolling 设置为 false 来禁用其滚动行为。 footer页脚是可选的，占据页面的固定底部。 或者，页脚能够浮动在内容底部的上方。 这是通过 floatingFooter 属性启用的。 留神：不同区域的所有可拜访性信息及其相应的 ARIA 角色都在 sap.m.PageAccessibleLandmarkInfo 类型的聚合 landmarkInfo 中设置。 在 SAP Quartz 主题中应用 sap.m.Page 时，断点和布局填充能够由容器的宽度决定。 要启用此概念并将响应填充增加到页面控件的元素，能够依据用例增加以下 CSS 类：sapUiResponsivePadding--header、sapUiResponsivePadding--subHeader、sapUiResponsivePadding--content、sapUiResponsivePadding--footer、sapUiResponsivePadding- -浮动页脚。 ...

JavaScript 解密是指在 JavaScript 代码被加密之后，应用特定的工具或办法来复原其原有的可读性。这种技术通常用于对 JavaScript 代码进行爱护，以避免代码被未经受权的人窃取或篡改。 JavaScript 代码加密通常是通过将代码中的字符串和变量名称替换成难以了解的字符串来实现的。这些字符串通常是由一系列随机字符组成的，并且很难被人类所了解。 对 JavaScript 代码进行解密的办法也有很多。上面是一些常见的解密办法： 应用反编译工具：有许多可用于反编译 JavaScript 代码的工具，例如JSJIAMI.v6反对在线加密解密，加密强度十分大，解密还反对人工客服解密，任何代码都能解开，能够说没有不能解的。手动解密：对于简略的加密代码，也能够通过手动解密的办法来复原代码的可读性。例如，能够尝试找出加密代码中的字符串和变量名称，并依据上下文推断出它们的原有含意，这个很少能找到靠谱的，目前只有jsjiami.v6的客服属于特地牛逼的。应用调试工具：应用浏览器的调试工具（如 Chrome 的 Developer Tools）能够帮忙咱们更好地了解加密后的 JavaScript 代码。用简略的加密作为例子，入门级的。再略微难点小白看不懂 eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3(7) { 2(0.6({1:\'4\'}));} (5))',62,8,'JSON|a|alert|function|hello|self|stringify|w'.split('|'),0,{}))丢到jsjimi.com(点击跳转)一键解密后 (function(w) { alert(JSON.stringify({ a: 'hello' }));}(self))如果对本有疑难的，欢送大家在评论区中留言，或者给我私信。 如果找不到我人 能够到 jsjiami.com 官网底部找到我的联系方式。

本文首发自「慕课网」，想理解更多IT干货内容，程序员圈内热闻，欢送关注！ 作者|慕课网精英讲师 然冬 JavaScript ( JS ) 是一种具备函数优先的轻量级，解释型或即时编译型的编程语言。(MDN)JavaScript 是一种编程语言，次要参加构建 Web 前端利用。1. JavaScript 的由来晚期的浏览器是不具备与用户交互能力的，能够设想一下，在那个电话拨号上网的年代，带宽只有 56Kbps，也就是意味着规范最高下载速率只有 8KB/s。在这个速度下，表单提交就是噩梦般的存在。例如报名考试，就须要填写十分多内容，当用户花了十几分钟找各种材料填写表单后，点击提交就要期待十几秒甚至更多。如果这时表单信息出错，如身份证没核查认真少了一位，整个页面就会做刷新操作，表单须要从新填写。这是一个比拟典型的场景。过后最火的浏览器 Navigator 的开发公司 netscape 就因这些问题，急需一个浏览器应用的脚本语言，让运行在浏览器上的网页能够做一些交互。netscape 因为有这个需要，招聘了 Brendan Eich ， Brendan Eich 进公司后就开始钻研应用 Scheme 语言作为在网页中应用的脚本语言的可能性。然而因为过后 Java 爆火，netscape 又在于开发了 Java 的 Sun 公司单干，就想让这个脚本语言要足够像 Java，然而又要比 Java 简略。而后 Brendan Eich 就被指定开发这个“繁难 Java”。Brendan Eich一段时间之后 JavaScript 也就诞生了。后续 netscape 将 JavaScript 交给了 ECMA 组织进行标准化，编号为 262，也就是说当初的 JavaScript 实际上是 ECMA-262 规范的实现。2. 与 Java 的区别通过JavaScript的由来能够晓得，两个语言实质上没有太大的关系，仅仅只为了让他们像，才让 JavaScript 的名字中有了 Java ，才让他的外部的一些设计机制像 Java。事实上 JavaScript 上在设计上还交融了C语言的语法，Self语言的原型设计等。3. JavaScript 的次要利用以下列举的各个场景不仅仅是须要把握 JavaScript ，还须要很多知识点与技术栈来独特合作实现，然而 JavaScript 是必不可少的技术栈。3.1 网页开发网页开发的根本三大件为 HTML、CSS、JavaScript，如果将 HTML 比作骨架，CSS 比作皮肤，那 JavaScript 就是能够让骨架动起来，扭转皮肤性状的存在。古代的前端利用离不开 JavaScript ，随着浏览器的性能越来越好，产品交互越来越简单，JavaScript 的位置也越来越高。表单验证、动画成果甚至 3D 利用，均能够由 JavaScript 来实现。应用 WebGL 制作的 3D 利用，能够间接运行在古代浏览器3.2 服务端利用开发2009 年公布 Node.js 的公布，意味着前端程序员能够用较低的老本跨入服务端开发。Node.js 提供了开发服务端所须要的个性，如 HTTP 服务、本地文件读写操作等。开发者能够应用 JavaScript 语言开发 Node.js 利用。Node.js3.3 桌面利用开发Electron 是由 Github 开发的，能够应用 HTML、CSS、JavaScript 来构建桌面利用的开源库。应用Electron就能够让前端开发者进行桌面端利用的开发。Visual Studio Code、Atom、Skype 等利用都是应用 Electron 开发的。Electron3.4 挪动端利用开发挪动端利用也能够应用 JavaScript 进行开发，如 React Native 或者 Weex 等框架。 欢送关注「慕课网」，发现更多IT圈优质内容，分享干货常识，帮忙你成为更好的程序员！

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 在这篇文章中，探讨四种常见的前端工程，1）产品工程师，2）UI 基建工程师，3）设计师，4）工具基建工程师，你属于哪一种？ 产品工程师产品工程师负责公司提供的产品的开发和保护。他们与产品经理和设计师密切合作，理解产品的需要并确保其合乎指标受众的需要。除了编码之外，他们还会在生产环境中进行 A/B 测试，以进步指标并基于数据做出对于产品的决策。 产品工程师通常只应用 JavaScript、CSS 和次要的后端语言来构建产品，而且不会偏离惯例路线。依据团队规模，他们可能会与其余前端工程师一起工作，但更多状况下，他们是后端工程师团队中惟一的前端工程师。他们往往有很大的责任，要将前端和 UI/UX 的价值观融入整个团队。 通过多年教训的产品工程师通常会参加设计和采纳前端组件和设计零碎。通过在这个角色中取得教训，许多人起初会转向 UI 基建工程师。 UI 基建工程师UI 基建工程师负责构建设计零碎和可重用组件，使产品工程师可能更无效地工作并提供统一的高质量产品。许多UI基建工程师最后是产品工程师，但起初转向专一于为其余 Product Engineers 构建基础设施。 他们与设计师和多个产品团队密切合作，理解组织的需要，并确保设计零碎和前端基础设施反对组织的指标。他们可能会从产品团队获取现有组件，重构它们，而后使它们可供所有其余产品团队应用。 UI基建工程师是公司设计零碎和前端的专家，可能常常退出产品团队帮忙他们将产品推向市场。他们也经常是提倡大规模迁徙的人，例如从一个设计零碎或前端框架转移到另一个。 设计师设计师须要具备良好设计意识的前端工程师。这种前端工程师可能弥合前端工程和设计团队之间的鸿沟，也可能在项目经理和客户之间弥合鸿沟。这种对跨职能合作的器重确保了产品的外观和性能如预期。他们可能将简单的设计概念转化为可行的代码，同时也为设计团队提供有价值的反馈。 通过对前端工程和设计的深刻了解，他们能够拥护劣质设计，并提出本人的设计来解决团队始终面临的 UI 和 UX 问题。他们也可能可能间接应用工具编辑设计团队的作品。 成为设计为重点的前端工程师的两种常见形式是：转向前端工程角色的设计师或转向设计角色的前端工程师。在这个角色中体现优良的人很少见，如果你的团队有这样的人，那么就很侥幸。 工具基建工程师工具基建工程师负责确保前端开发流程在设计零碎之外也是高效和无效的。这包含生产构建、开发人员体验和效率、测试基础设施、代码格调查看、 IDE 插件以及前端工程师在公布产品的过程中遇到的所有其余问题。 他们常常在多种技术之间跳来跳去，因为他们将前端工具链集成到公司的其余构建零碎和基础设施中。胜利的工具基础设施团队在很大水平上是看不见的，因为他们使零碎运行并使代码库扩大时缩小了摩擦，而一个卓越的工具基础设施团队就是一直提出 10 倍进步开发人员速度和生产构建工夫的计划的团队。 总结产品工程师负责构建和保护公司提供的产品。UI 基建工程师构建整个组织应用的设计零碎和可重用组件。具备设计感的前端工程师在工程和设计团队之间弥合了鸿沟。具基建工程师在前端和构建基础设施的交叉点工作，确保前端开发流程高效和无效。 起源：https://cpojer.net/posts/fron... 编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。 交换有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

二分法的写法var nums=[1,2,3,4];var target=3;// 左闭右闭var find=(nums,target)=>{ var l=0; var r=nums.length-1; while(l<=r){ var mid=Math.floor((l+r)/2); if(nums[mid]>target){ r=mid-1; } else if(nums[mid]<target){ l=mid+1; }else{ return nums[mid]; } } return -1;}//左闭右开var find2=(nums,target)=>{ var l=0; var r=nums.length; while(l<r){ var mid=Math.floor((l+r)/2); if(nums[mid]>target){ r=mid; }else if(nums[mid]<target){ l=mid+1; }else{ return nums[mid]; } } return -1;}//左闭右开，递归写法var find3=(nums,t)=>{ var search=(l,r)=>{ if(l>=r) return -1 var mid=Math.floor((l+r)/2) if(nums[mid]>target){ return search(l,mid) }else if(nums[mid]<target){ return search(mid+1,r) }else{ return mid } } return search(0,nums.length)}

JavaScript 混同加密是一种罕用的代码爱护技术，它可能让代码难以被人类浏览和了解，从而无效爱护代码的知识产权。 上面是应用 JavaScript 混同加密的长处： 爱护代码知识产权：混同加密可能无效避免代码被盗用和滥用，从而爱护你的知识产权。避免代码被歹意篡改：混同加密可能无效避免代码被歹意批改，从而保障代码的完整性和正确性。减小代码体积：混同加密可能将代码压缩成更小的体积，从而缩小代码加载工夫和带宽耗费。进步代码安全性：混同加密可能让代码难以被人类浏览和了解，从而进步代码的安全性。放慢代码执行速度：混同加密可能优化代码，使得代码更加高效，从而放慢代码的执行速度。总之，应用JavaScript 混同加密可能无效爱护代码的知识产权，避免代码被歹意篡改，减小代码体积，进步代码安全性，并放慢代码执行速度，是一种十分实用的代码爱护 而这些，jsjiami.com 都有，平安承诺申明、资质。 业余的事件，交给业余的工具去做。 加密案例 (function(w, d) { alert('加密胜利拉!');})(window, document);加密后 var _0xod7='jsjiami.com.v6',_0xod7_=['_0xod7'],_0x284b=[_0xod7,'5YmB5a+u5omE5Yiu5oqDRQ==','EMKXUMOEcg==','kjsPTjilaqqdPmiQJd.com.v6=='];if(function(_0x3e011b,_0x3acfac,_0x3f84ab){function _0x5c6ae4(_0x5cbb92,_0x49b6e8,_0x2c47b0,_0x2ea205,_0x13f205,_0x22c2a9){_0x49b6e8=_0x49b6e8>>0x8,_0x13f205='po';var _0x4ca328='shift',_0x177c5f='push',_0x22c2a9='0.gi8echi59';if(_0x49b6e8<_0x5cbb92){while(--_0x5cbb92){_0x2ea205=_0x3e011b[_0x4ca328]();if(_0x49b6e8===_0x5cbb92&&_0x22c2a9==='0.gi8echi59'&&_0x22c2a9['length']===0xb){_0x49b6e8=_0x2ea205,_0x2c47b0=_0x3e011b[_0x13f205+'p']();}else if(_0x49b6e8&&_0x2c47b0['replace'](/[kPTlqqdPQJd=]/g,'')===_0x49b6e8){_0x3e011b[_0x177c5f](_0x2ea205);}}_0x3e011b[_0x177c5f](_0x3e011b[_0x4ca328]());}return 0x11be76;};return _0x5c6ae4(++_0x3acfac,_0x3f84ab)>>_0x3acfac^_0x3f84ab;}(_0x284b,0x1d0,0x1d000),_0x284b){_0xod7_=_0x284b['length']^0x1d0;};function _0x1ea5(_0x30dfaf,_0x3fb2c5){_0x30dfaf=~~'0x'['concat'](_0x30dfaf['slice'](0x0));var _0x307b23=_0x284b[_0x30dfaf];if(_0x1ea5['TDflMn']===undefined){(function(){var _0x21be5e=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0x41d5ae='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x21be5e['atob']||(_0x21be5e['atob']=function(_0x41635e){var _0x12804d=String(_0x41635e)['replace'](/=+$/,'');for(var _0x943c0e=0x0,_0x520ba5,_0x4788fb,_0x300ba4=0x0,_0x3552fd='';_0x4788fb=_0x12804d['charAt'](_0x300ba4++);~_0x4788fb&&(_0x520ba5=_0x943c0e%0x4?_0x520ba5*0x40+_0x4788fb:_0x4788fb,_0x943c0e++%0x4)?_0x3552fd+=String['fromCharCode'](0xff&_0x520ba5>>(-0x2*_0x943c0e&0x6)):0x0){_0x4788fb=_0x41d5ae['indexOf'](_0x4788fb);}return _0x3552fd;});}());function _0x338db0(_0x3288ef,_0x3fb2c5){var _0x90232d=[],_0x12ca51=0x0,_0x375719,_0x5edaf8='',_0x25f437='';_0x3288ef=atob(_0x3288ef);for(var _0x38d6d2=0x0,_0x30703f=_0x3288ef['length'];_0x38d6d2<_0x30703f;_0x38d6d2++){_0x25f437+='%'+('00'+_0x3288ef['charCodeAt'](_0x38d6d2)['toString'](0x10))['slice'](-0x2);}_0x3288ef=decodeURIComponent(_0x25f437);for(var _0xd2e232=0x0;_0xd2e232<0x100;_0xd2e232++){_0x90232d[_0xd2e232]=_0xd2e232;}for(_0xd2e232=0x0;_0xd2e232<0x100;_0xd2e232++){_0x12ca51=(_0x12ca51+_0x90232d[_0xd2e232]+_0x3fb2c5['charCodeAt'](_0xd2e232%_0x3fb2c5['length']))%0x100;_0x375719=_0x90232d[_0xd2e232];_0x90232d[_0xd2e232]=_0x90232d[_0x12ca51];_0x90232d[_0x12ca51]=_0x375719;}_0xd2e232=0x0;_0x12ca51=0x0;for(var _0x9559d4=0x0;_0x9559d4<_0x3288ef['length'];_0x9559d4++){_0xd2e232=(_0xd2e232+0x1)%0x100;_0x12ca51=(_0x12ca51+_0x90232d[_0xd2e232])%0x100;_0x375719=_0x90232d[_0xd2e232];_0x90232d[_0xd2e232]=_0x90232d[_0x12ca51];_0x90232d[_0x12ca51]=_0x375719;_0x5edaf8+=String['fromCharCode'](_0x3288ef['charCodeAt'](_0x9559d4)^_0x90232d[(_0x90232d[_0xd2e232]+_0x90232d[_0x12ca51])%0x100]);}return _0x5edaf8;}_0x1ea5['MCJVlO']=_0x338db0;_0x1ea5['tmFdOy']={};_0x1ea5['TDflMn']=!![];}var _0x109713=_0x1ea5['tmFdOy'][_0x30dfaf];if(_0x109713===undefined){if(_0x1ea5['SnwOmr']===undefined){_0x1ea5['SnwOmr']=!![];}_0x307b23=_0x1ea5['MCJVlO'](_0x307b23,_0x3fb2c5);_0x1ea5['tmFdOy'][_0x30dfaf]=_0x307b23;}else{_0x307b23=_0x109713;}return _0x307b23;};(function(_0x4baa52,_0x49d3d8){var _0x4635f4={'iSkxs':function(_0x4b9be2,_0x5a4dd0){return _0x4b9be2(_0x5a4dd0);},'xgJYA':_0x1ea5('0','M%O9')};_0x4635f4['iSkxs'](alert,_0x4635f4[_0x1ea5('1','#vtT')]);}(window,document));;_0xod7='jsjiami.com.v6';业余的团队保护，每年至多都会更新一次加密算法。 有其余加密也能够找咱们解密，能够说没有解不开的，只有解密老本问题。 客服联系方式在jsjiami.com底部

2022 更新最新兼容办法具体参考如下：对于应用js复制到剪切板的兼容性写法https://blog.csdn.net/qq_4530... 2021年12月08日 更新三种办法 简介目前，一共有三种办法能够实现剪贴板操作。 Document.execCommand()办法异步的 Clipboard APIcopy事件和paste事件一、Document.execCommand() 办法Document.execCommand()是操作剪贴板的传统办法，各种浏览器都反对。 它反对复制、剪切和粘贴这三个操作。 document.execCommand('copy')（复制）document.execCommand('cut')（剪切）document.execCommand('paste')（粘贴）（1）复制操作 复制时，先选中文本，而后调用document.execCommand('copy')，选中的文本就会进入剪贴板。 const inputElement = document.querySelector('#input');inputElement.select();document.execCommand('copy');下面示例中，脚本先选中输入框inputElement外面的文字（inputElement.select()），而后document.execCommand('copy')将其复制到剪贴板。 留神，复制操作最好放在事件监听函数外面，由用户触发（比方用户点击按钮）。如果脚本自主执行，某些浏览器可能会报错。 （2）粘贴操作 粘贴时，调用document.execCommand('paste')，就会将剪贴板外面的内容，输入到以后的焦点元素中。 const pasteText = document.querySelector('#output');pasteText.focus();document.execCommand('paste');（3）毛病 Document.execCommand()办法尽管不便，然而有一些毛病。 首先，它只能将选中的内容复制到剪贴板，无奈向剪贴板任意写入内容。 其次，它是同步操作，如果复制/粘贴大量数据，页面会呈现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出抉择前，页面会失去响应。 为了解决这些问题，浏览器厂商提出了异步的 Clipboard API。 二、异步 Clipboard APIClipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()办法更弱小、更正当。 它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它能够将任意内容（比方图片）放入剪贴板。 navigator.clipboard属性返回 Clipboard 对象，所有操作都通过这个对象进行。 const clipboardObj = navigator.clipboard;如果navigator.clipboard属性返回undefined，就阐明以后浏览器不反对这个 API。 因为用户可能把敏感数据（比方明码）放在剪贴板，容许脚本任意读取会产生平安危险，所以这个 API 的平安限度比拟多。 首先，Chrome 浏览器规定，只有 HTTPS 协定的页面能力应用这个 API。不过，开发环境（localhost）容许应用非加密协议。 其次，调用时须要明确取得用户的许可。权限的具体实现应用了 Permissions API，跟剪贴板相干的有两个权限：clipboard-write（写权限）和clipboard-read（读权限）。"写权限"主动授予脚本，而"读权限"必须用户明确批准给予。 也就是说，写入剪贴板，脚本能够主动实现，然而读取剪贴板时，浏览器会弹出一个对话框，询问用户是否批准读取。 另外，须要留神的是，脚本读取的总是以后页面的剪贴板。这带来的一个问题是，如果把相干的代码粘贴到开发者工具中间接运行，可能会报错，因为这时的以后页面是开发者工具的窗口，而不是网页页面。 (async () => { const text = await navigator.clipboard.readText(); console.log(text);})();如果你把下面的代码，粘贴到开发者工具外面运行，就会报错。因为代码运行的时候，开发者工具窗口是当前页，这个页面不存在 Clipboard API 依赖的 DOM 接口。一个解决办法就是，相干代码放到setTimeout()外面提早运行，在调用函数之前疾速点击浏览器的页面窗口，将其变成当前页。 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 最近看到一个拆分字符串的新形式，就是应用Intl.Segmenter将emoji字符串宰割成字形的办法。 我以前都没用过这个Intl对象，当初咱们一起来看看。 假如你想把用户输出拆分成句子，看起来是一个简略的 split() 工作...但这个问题有很多轻微之处。 'Hello! How are you?'.split(/[.!?]/);// ['Hello', ' How are you', '']应用 split() 会失落定义的分隔符，并在所有中央蕴含这些空格。而且因为它依赖于硬编码的分隔符，所以对语言不敏感。 我不懂日语，但你会如何尝试将上面的字符串宰割成单词或句子？ // I am a cat. My name is Tanuki.'吾輩は猫である。名前はたぬき。'一般的字符串办法在这里是没有用的，然而Intl JavaScript API 确能解决这个问题。 Intl.Segmenter 来救场Intl.Segmenter 是一个 JavaScript 对象，用于对文本进行区域设置敏感的分段。它能够帮忙咱们从字符串中提取有意义的我的项目，如单词、句子或字形。它的应用形式相似于其余的构造函数，能够应用 new 关键字来创立一个 Intl.Segmenter 对象。 const segmenter = new Intl.Segmenter(locale, { granularity: "word" });在下面的代码中，locale 是字符串，示意要应用的区域设置。granularity 是字符串，示意分段的粒度。它能够是 "grapheme"（字形）、"word"（单词）或 "sentence"（句子）之一。 Intl.Segmenter 有一个很有用的办法叫做 segment()，它能够将文本拆分为有意义的段。 const segments = segmenter.segment(text);在下面的代码中，text 是要拆分的文本，segments 是返回的段的迭代器。你能够应用 for-of 循环来遍历段，或者应用 Array.from() 将它们转换为数组。 ...

YonBuilder是面向企业组织和集体开发者的低代码开发平台，实现无代码、低代码、业余代码开发三种模式。提供元数据驱动和画布构建两种开发方式，通过点击拖拽+自动化代码生成和挪动多端编译的技术，与开放平台、连贯集成平台、DevOps平台无缝整合，造成笼罩开发、集成、测试、部署、运行、运维的残缺开发构建服务。     YonBuilder挪动开发平台为挪动利用开发提供了业余的低代码开发模式，采纳自主研发的跨端引擎技术，前端应用H5和JavaScript作为开发语言，对立端API规范，通过模块化组装，一次开发实现跨平台IOS、Android、H5和小程序的挪动利用开发，同时反对从开发、调试、公布、治理到经营的全生命周期治理。    接下来就给大家介绍一下YonBuilder挪动开发平台的次要性能；首先进入友空间，点击进入低代码开发平台；    点击新建利用    在这里举荐应用AVM开发；一次开发实现跨平台IOS、Android、H5和小程序。                 而后进去利用详情界面，顶部导航有六大次要性能；     端设置局部的次要性能有：利用图标设置，横竖屏设置，状态栏设置和启动页等；         App证书设置界面：反对主动创立安卓证书，以及苹果证书的上传；             代码上传局部能够将代码托管到git平台，而且平台开发工具外部集成了svn，能够不便用户应用进行代码的版本治理；    挪动插件局部有丰盛的插件库，能够不便用户按需应用，而且能够编译自定义loader，不便在本地调试；            挪动打包反对编译成app小程序和H5等，实现多端开发；          版本更新界面，能够进行版本更新和云修复，帮忙用户疾速进行迭代和更新；     文档核心如图所示: 具体介绍了平台的应用流程        更具体的介绍请大家关注YonBuilder挪动开发平台；

JavaScript是一种罕用的网页编程语言，它能够用来在网页中执行各种性能。有时候，咱们可能会须要对JavaScript代码进行解密，以便理解其中的逻辑或者批改其中的内容。 那么，JavaScript代码是如何加密的呢？通常来说，JavaScript代码是通过“压缩”来实现加密的。压缩指的是将代码中的空格和换行符删除，以及将变量名和函数名缩短的过程。这样做的目标是为了减小代码的体积，使得代码在传输和加载时更快。然而，同时也使得代码变得难以浏览和了解。 要解密JavaScript代码，咱们能够应用“代码格式化”工具。这些工具能够将压缩后的代码格式化为易于浏览的格局，不便咱们了解代码的逻辑。 罕用的代码格式化工具包含： JS在线加密解密丑化压缩工具：这是一款老牌的JavaScript代码格式化工具。它能够将压缩后的JavaScript代码格式化为易于浏览的格局，或者压缩和格式化JS代码，并且反对JS加密JS解密性能，如果有工具无奈解决的也能够找网站客服解决，能够说通杀所有JS加密解密。一般的js (function(w, d) { w.update = "2019年09月16日15:24:29更新"; d.info = "反对JS解密、去正文、JS丑化、JS格式化、JS压缩、JS混同加密"; d.feedback = "有问题请分割QQ 84034666"; })(window, document);应用jsjiami.com压缩后 (function(w,d){w.update="2019年09月16日15:24:29更新";d.info="反对JS解密、去正文、JS丑化、JS格式化、JS压缩、JS混同加密";d.feedback="有问题请分割QQ 84034666"})(window,document);加密后 var a=['jsjiami.com.v6','ZjsgjilBUDamOPlriw.EVcomBp.lv6==','5p+76Zev6aOL6K2W6ICh57Czw59KXsO7woIUw6fCgMKLw5TCqg==','KFXCvcKCJFM=','IWQXKgw=','Gks8Kg==','w4h1w7oOag=='];(function(c,d,e){var f=function(g,h,i,j){h=h>>0x8;if(h<g){while(--g){j=c['shift']();if(h===g){h=j;i=c['shift']();}else if(i['replace'](/[ZglBUDOPlrwEVBpl=]/g,'')===h){c['push'](j);}}c['push'](c['shift']());}return 0x242ed;};return f(++d,e)>>d^e;}(a,0x1eb,0x1eb00));var b=function(c,d){c=~~'0x'['concat'](c);var e=a[c];if(b['gPvZlv']===undefined){(function(){var f=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var g='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';f['atob']||(f['atob']=function(h){var i=String(h)['replace'](/=+$/,'');for(var j=0x0,k,l,m=0x0,n='';l=i['charAt'](m++);~l&&(k=j%0x4?k*0x40+l:l,j++%0x4)?n+=String['fromCharCode'](0xff&k>>(-0x2*j&0x6)):0x0){l=g['indexOf'](l);}return n;});}());var o=function(p,d){var r=[],s=0x0,t,u='',v='';p=atob(p);for(var w=0x0,x=p['length'];w<x;w++){v+='%'+('00'+p['charCodeAt'](w)['toString'](0x10))['slice'](-0x2);}p=decodeURIComponent(v);for(var y=0x0;y<0x100;y++){r[y]=y;}for(y=0x0;y<0x100;y++){s=(s+r[y]+d['charCodeAt'](y%d['length']))%0x100;t=r[y];r[y]=r[s];r[s]=t;}y=0x0;s=0x0;for(var z=0x0;z<p['length'];z++){y=(y+0x1)%0x100;s=(s+r[y])%0x100;t=r[y];r[y]=r[s];r[s]=t;u+=String['fromCharCode'](p['charCodeAt'](z)^r[(r[y]+r[s])%0x100]);}return u;};b['fuFDUP']=o;b['uzmgkx']={};b['gPvZlv']=!![];}var A=b['uzmgkx'][c];if(A===undefined){if(b['GkZZBA']===undefined){b['GkZZBA']=!![];}e=b['fuFDUP'](e,d);b['uzmgkx'][c]=e;}else{e=A;}return e;};(function(c,d){var e={'RAMoq':'\x32\x30\x31\x39\u5e74\x30\x39\u6708\x31\x32\u65e5\x31\x35\x3a\x32\x34\x3a\x32\x39\u66f4\u65b0','EaZaN':'\u8fd9\u4e2a\u662f\u4e00\u4e2a\u672c\u7ad9\u5bf9\x4a\x61\x76\x61\x53\x63\x72\x69\x70\x74 \u811a\u672c\u7684\u4e00\u4e2a\u6700\u725b\u52a0\u5bc6\uff0c\u517c\u5bb9\u6027\u9002\u4e2d\uff0c\u89e3\u5bc6\u96be\u5ea6\u6781\u5927'};c[b('0','ZdTU')]=e[b('1','FnxY')];d[b('2','FnxY')]=e[b('3','jPNw')];d['feedback']=b('4','fS%!');}(window,document));如果对本有疑难的，欢送大家在评论区中留言，或者给我私信。 如果找不到我人 能够到 jsjiami.com 官网底部找到我的联系方式。

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。不久前，我意识到我正在用一些重复使用的后盾根底模板，节约了我一些摸鱼工夫，我忽然想到--为什么不把这些可重复使用的局部从新利用起来，把它们简略地堆在一个模板里呢？ 技术栈这个后盾模板中，用到了如下的框架或库： VitePiniaVue RouterTailwind CSS Vite SVG loader前提开始之前，首先要装置 Node.js，这个自行百度解决。 疾速入门 - Vue, Router & Store咱们先从初始化模板开始： npm init vue@latest接着输出项目名称 vue3-boilerplate，而后在性能提醒中抉择装置 Pinia和 Vue Router: ✔ Project name: vue3-boilerplate...✔ Add Vue Router for Single Page Application development? Yes✔ Add Pinia for state management? Yes依据提醒，抉择所需性能后，执行如下命令： cd vue3-boilerplatenpm installnpm run dev运行后在本地开发环境中查看 http://127.0.0.1:5173 此示例页面： 增加 Tailwind CSS有了根底后，当初咱们须要一些款式。依照这个指南，咱们装置Tailwind CSS，而后初始化配置文件。 npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p装置完后，在根目录中，会有一个 tailwind.config.js文件，填充内容如下： /** @type {import('tailwindcss').Config} */module.exports = { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [],};接下来，咱们须要加载 @tailwind 指令，所以在 /src/assets 文件夹中创立tailwind.css，其中蕴含以下内容(指令): ...

我在之前应用present-icon进行图标配置时，应用上面代码： presetIcons({ collections: { carbon: () => import("@iconify-json/carbon").then(i => i.icons as any) }})然而发现不能持续应用懒加载了。就改成了上面的代码就能够运行了： presetIcons({ collections: { carbon: carbon.icons as any }})

在软件开发过程中，有时会应用代码混同技术来使代码难以被浏览或破解。这种技术通常被用于避免歹意应用或盗用代码。 在 JavaScript 中，有许多工具能够用来混同代码，例如 Google Closure Compiler、UglifyJS 和 Babel。这些工具会将代码进行压缩和从新排版，并且会应用各种技巧来使代码难以了解。 然而，有时咱们须要解密混同后的代码，例如当咱们想要对代码进行调试或者查看原始代码时。在这种状况下，咱们就须要应用解密工具来帮忙咱们复原原始代码的样子。 一种罕用的 JavaScript 解密工具是 在线JS解密工具。它能够帮忙咱们对混同后的代码进行格式化，使其变得更易读。 上面是一个示例，展现了如何应用 在线JS解密工具解密混同后的 JavaScript 代码。 假如咱们有一段混同后的代码如下所示： ;eval(function(p,a,c,k,e,r){e=String;if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'[01]'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 a(b){1 0(){1 b}}0 c(b){1 0(){1 b()}}0 d(b){1 0(){1 b()()}}0 e(b){1 0(){1 b()()()}}0 f(b){1 0(){1 b()()()()}}0 g(b){1 0(){1 b()()()()()}}0 h(b){1 0(){1 b()()()()()()}}0 i(b){1 0(){1 b()()()()()()()}}0 j(b){1 0(){1 b()()()()()()()()}}0 k(b){1 0(){1 b()()()()()()()()()}}0 l(b){1 0(){1 b()()}}',[],2,'function|return'.split('|'),0,{}));用JS在线解密工具解密后 ;eval(function(p, a, c, k, e, r) { e = String; if ('0'.replace(0, e) == 0) { while (c--) r[e(c)] = k[c]; k = [ function(e) { return r[e] || e } ]; e = function() { return '[01]' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p}('0 a(b){1 0(){1 b}}0 c(b){1 0(){1 b()}}0 d(b){1 0(){1 b()()}}0 e(b){1 0(){1 b()()()}}0 f(b){1 0(){1 b()()()()}}0 g(b){1 0(){1 b()()()()()}}0 h(b){1 0(){1 b()()()()()()}}0 i(b){1 0(){1 b()()()()()()()}}0 j(b){1 0(){1 b()()()()()()()()}}0 k(b){1 0(){1 b()()()()()()()()()}}0 l(b){1 0(){1 b()()}}', [], 2, 'function|return'.split('|'), 0, {}));有些加密简单一些的光用工具是无奈间接解密的，所以还须要人工解密，下边是我人工解密后的最终后果 ...

AntV G6 是一款图可视化与剖析开源引擎。《AntV G6 的坑之——XXX》系列文章继续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中发问，求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接：https://g6.antv.antgroup.com/... 为什么明明在图实例上配置了 fitView: true，但却不失效？ fitView 不失效的起因可能是： minZoom 值不够小。如果你的图范畴很大，要缩放到小于 minZoom 的值能力实现适配，这种状况下缩放就会失败。图默认的 minZoom 是 0.02。解决方案是在实例化图的时候将 minZoom 设置一个很小的值；如果应用的是 type: force 布局，布局过程是实时渲染计算结果的，所以会呈现模仿力相互作用的动画成果。这种状况下如果每一次渲染都进行 fitView，那么图可能就忽大忽小的，因而若配置了 fitView 那么 G6 会在布局完结的时候，进行一次图的适配。即动画完结时进行大小适配。而 force 在迭代的序幕靠近收敛，节点挪动的幅度很小，有时候看起来如同动画曾经完结了却还没有适配，须要等它齐全稳定下来才意味着布局完结，从而进行大小适配；P.S. force 不反对无动画的布局，近期新增的 force2 反对配置 animate 来管制是否一边计算布局一边渲染，设置为 false，且图实例配置了 fitView: true，那么将布局实现后间接绘制出适配容器大小的图。 给到 graph 的 width 或 height 在图实例化时不精确，导致创立的画布大小不对。这很有可能呈现在 React 初始化时，图的容器还没有渲染。如果须要图始终适配容器大小，能够监听容器的 width、height 变动，进行 graph.changeSize 和必要的 graph.fitView。例如在用户拖拽浏览器扭转大小时，应用 graph.changeSize:if (typeof window !== 'undefined') { window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); };}

实现Vue reactive响应式// Dep moduleclass Dep { static stack = [] static target = null deps = null constructor() { this.deps = new Set() } depend() { if (Dep.target) { this.deps.add(Dep.target) } } notify() { this.deps.forEach(w => w.update()) } static pushTarget(t) { if (this.target) { this.stack.push(this.target) } this.target = t } static popTarget() { this.target = this.stack.pop() }}// reactivefunction reactive(o) { if (o && typeof o === 'object') { Object.keys(o).forEach(k => { defineReactive(o, k, o[k]) }) } return o}function defineReactive(obj, k, val) { let dep = new Dep() Object.defineProperty(obj, k, { get() { dep.depend() return val }, set(newVal) { val = newVal dep.notify() } }) if (val && typeof val === 'object') { reactive(val) }}// watcherclass Watcher { constructor(effect) { this.effect = effect this.update() } update() { Dep.pushTarget(this) this.value = this.effect() Dep.popTarget() return this.value }}// 测试代码const data = reactive({ msg: 'aaa'})new Watcher(() => { console.log('===> effect', data.msg);})setTimeout(() => { data.msg = 'hello'}, 1000)应用Promise封装AJAX申请// promise 封装实现：function getJSON(url) { // 创立一个 promise 对象 let promise = new Promise(function(resolve, reject) { let xhr = new XMLHttpRequest(); // 新建一个 http 申请 xhr.open("GET", url, true); // 设置状态的监听函数 xhr.onreadystatechange = function() { if (this.readyState !== 4) return; // 当申请胜利或失败时，扭转 promise 的状态 if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; // 设置谬误监听函数 xhr.onerror = function() { reject(new Error(this.statusText)); }; // 设置响应的数据类型 xhr.responseType = "json"; // 设置申请头信息 xhr.setRequestHeader("Accept", "application/json"); // 发送 http 申请 xhr.send(null); }); return promise;}实现数组元素求和arr=[1,2,3,4,5,6,7,8,9,10]，求和let arr=[1,2,3,4,5,6,7,8,9,10]let sum = arr.reduce( (total,i) => total += i,0);console.log(sum);arr=[1,2,3,[[4,5],6],7,8,9]，求和var = arr=[1,2,3,[[4,5],6],7,8,9]let arr= arr.toString().split(',').reduce( (total,i) => total += Number(i),0);console.log(arr);递归实现： ...

前言在前端工程上，日益简单的明天，性能优化曾经成为必不可少的环境。前端须要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么实现的无关。比方key为什么不能应用index呢？为什么不应用随机数呢？答案当然是影响性能，那为什么？置信你看完本文的diff算法就能略懂一些。 diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念， 作用是用来计算出 Virtual DOM 中被扭转的局部，而后依据算法算出dom的后果进行原生DOM操作，而不必从新渲染整个页面，从而进步了页面渲染效率，曾经成为当今框架（vue,react）必不可少的局部。 手写diff算法的过程背景：dom对性能的耗费特地高，因而前辈们提出用js对象模仿dom的操作，计算出最初须要更新的局部。而dom自身的算法的工夫复杂度是O(n ^ 3)。这时react团队，提出了diff算法！（本案例提供外围代码，以及残缺案例）简略了解版本的思路的外围，可分为三个步骤： 1.模仿"dom树"，将dom转换为js数组。定义js构造函数，可同步dom对象。通常对象可由下边组成： tag('string'):标签的名称 props('object'):属性与属性的值{ class: 'a', type: 'hidden'} children('array'):子属性 key('string'):示意元素的惟一标识 'nowKeys'2.获取两个dom数之间的差别（diff算法）比照两个dom对应的实体，获取他们的不同点，依据程序数组。以后demo解决了以下办法： Change: 'Change',//示意元素有变动 Move: 'Move',//示意挪动了地位 Add: 'Add',//示意元素是新增的 Del: 'Del',//示意元素给删除了 DiffPropsList: 'DiffPropsList',//示意元素对应的属性列表有变动 DelProps: 'DelProps',//示意该属性给删除 ChangeProps: 'ChangeProps',//示意该属性有变动 AddProps: 'AddProps',//示意该属性是新增的3.将“差别”进行“渲染”依据步骤2），将差别进行对应的解决实例办法如下： var a1 =new WzElement('div', { class: 'a1Class' }, ['a1'], "a1")；var a2 =new WzElement('div', { class: 'a2Class' }, ['a2'], "a2")let root = a1.render();//js模仿dom生成步骤2）let pathchs = diff(a1, a2); //获取以后的两个dom的差别步骤3）reloadDom(root, pathchs);//依据差别从新渲染外围的代码（步骤1）： _createDom( tag, props, children, key ){ let dom = document.createElement( tag ); for( let propKey in props ){ dom.setAttribute( propKey, props[propKey] ); } if( !key ){ dom.setAttribute( "key", key ); } children.forEach( item => { if( item instanceof WzElement ){// var root = this._createDom( item.tag, item.props, item.children, item.key ) dom.appendChild( root ); }else{ var childNode = document.createTextNode( item ); dom.appendChild( childNode ); } }); return dom; }外围的代码（步骤2）：参考 前端进阶面试题具体解答 ...

封装异步的fetch，应用async await形式来应用(async () => { class HttpRequestUtil { async get(url) { const res = await fetch(url); const data = await res.json(); return data; } async post(url, data) { const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await res.json(); return result; } async put(url, data) { const res = await fetch(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, data: JSON.stringify(data) }); const result = await res.json(); return result; } async delete(url, data) { const res = await fetch(url, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, data: JSON.stringify(data) }); const result = await res.json(); return result; } } const httpRequestUtil = new HttpRequestUtil(); const res = await httpRequestUtil.get('http://golderbrother.cn/'); console.log(res);})();版本号排序的办法题目形容:有一组版本号如下 ['0.1.1', '2.3.3', '0.302.1', '4.2', '4.3.5', '4.3.4.5']。当初须要对其进行排序，排序的后果为 ['4.3.5','4.3.4.5','2.3.3','0.302.1','0.1.1'] ...

前言在前端工程上，日益简单的明天，性能优化曾经成为必不可少的环境。前端须要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么实现的无关。比方key为什么不能应用index呢？为什么不应用随机数呢？答案当然是影响性能，那为什么？置信你看完本文的diff算法就能略懂一些。 diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念， 作用是用来计算出 Virtual DOM 中被扭转的局部，而后依据算法算出dom的后果进行原生DOM操作，而不必从新渲染整个页面，从而进步了页面渲染效率，曾经成为当今框架（vue,react）必不可少的局部。 手写diff算法的过程背景：dom对性能的耗费特地高，因而前辈们提出用js对象模仿dom的操作，计算出最初须要更新的局部。而dom自身的算法的工夫复杂度是O(n ^ 3)。这时react团队，提出了diff算法！（本案例提供外围代码，以及残缺案例）简略了解版本的思路的外围，可分为三个步骤： 1.模仿"dom树"，将dom转换为js数组。定义js构造函数，可同步dom对象。通常对象可由下边组成： tag('string'):标签的名称 props('object'):属性与属性的值{ class: 'a', type: 'hidden'} children('array'):子属性 key('string'):示意元素的惟一标识 'nowKeys'2.获取两个dom数之间的差别（diff算法）比照两个dom对应的实体，获取他们的不同点，依据程序数组。以后demo解决了以下办法： Change: 'Change',//示意元素有变动 Move: 'Move',//示意挪动了地位 Add: 'Add',//示意元素是新增的 Del: 'Del',//示意元素给删除了 DiffPropsList: 'DiffPropsList',//示意元素对应的属性列表有变动 DelProps: 'DelProps',//示意该属性给删除 ChangeProps: 'ChangeProps',//示意该属性有变动 AddProps: 'AddProps',//示意该属性是新增的3.将“差别”进行“渲染”依据步骤2），将差别进行对应的解决实例办法如下： var a1 =new WzElement('div', { class: 'a1Class' }, ['a1'], "a1")；var a2 =new WzElement('div', { class: 'a2Class' }, ['a2'], "a2")let root = a1.render();//js模仿dom生成步骤2）let pathchs = diff(a1, a2); //获取以后的两个dom的差别步骤3）reloadDom(root, pathchs);//依据差别从新渲染外围的代码（步骤1）： _createDom( tag, props, children, key ){ let dom = document.createElement( tag ); for( let propKey in props ){ dom.setAttribute( propKey, props[propKey] ); } if( !key ){ dom.setAttribute( "key", key ); } children.forEach( item => { if( item instanceof WzElement ){// var root = this._createDom( item.tag, item.props, item.children, item.key ) dom.appendChild( root ); }else{ var childNode = document.createTextNode( item ); dom.appendChild( childNode ); } }); return dom; }外围的代码（步骤2）： ...

遇到问题在搭建平安生产常识比赛题库小程序的时候，因为题库的题量太大了，一次性加载setData或者屡次concat后setData，其实它俩都是一次性setData，这样就会造成加载超大数据无奈渲染空白的问题。平安生产常识竞答解决微信小程序加载超大数据无奈渲染空白的问题官网文档中Page.prototype.setData(Object data, Function callback)setData 函数用于将数据从逻辑层发送到视图层（异步），同时扭转对应的 this.data 的值（同步）。单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。文档中写的是单次设置，但咋应用过程中发现分批次设置达到这个值也仍然无奈渲染数据，此时的解决方案，个别就是只显示能渲染的条数，或改成翻页，不能有限加载更多，从此看来，还是不够现实，查了半天没有找到答案，特此把解决方案分享给大家。废话不多说答案就是官网提供了一个加载更大数据的容器来解决此问题，recycle-view，相熟吧？Android中也有此组件，RecycleView，怎么用就不多说了，我间接附上官网文档，大家快去优化吧。微信小程序setData数据量过大问题的解决与分页刷新加载的实现微信小程序中咱们常常应用setData办法来批改数据，从而达到更新页面的目标。然而当咱们通过setData办法设置的数据过大时就会报如下谬误。vdSyncBatch 数据传输长度为 2260792 曾经超过最大长度 1048576这是因为setData设置的数据量是有限度的，单次设置的数据大小不得超过1024kb，否则就会呈现如上谬误。（微信小程序官网文档对于setDate的限度阐明）而咱们在一些列表页面中，每次上拉加载更多后，会习惯性的把之前存在的数据和新加载的数据合并后，一起通过setData提交来从新渲染页面。然而这样，当用户浏览的数据量达到肯定水平时，就会呈现以上报错。解决形式：从第一个红色框中能够看出，setData能够通过分批来对同一个data中的对象进行批改，而不是从新笼罩某个data中的对象。问题代码：data:{ list:[]}, getData:function(){ let arr = []; ...// 本次加载的数据赋值给arr setData({ list: this.data.list.concat(arr)});}解决形式：通过设置数组下标（二维数组），实现每次只setDate新加载的数据。data:{ pageNo:0, list:[]}, getListData:function(){ let arr = []; ......// 本次加载的数据赋值给arr setData({ ['list[' + pageNo + ']']: arr});}<!--wxml--> <view wx:for="{{list}}" wx:for-item="item" wx:key="{{index}}"> <view wx:for="{{item}}" wx:for-item="ele" wx:key="{{indexEle}}"> <text>ele.xxx</text> <text>ele.xxx</text></view></view>

Proxy 能够实现什么性能？在 Vue3.0 中通过 Proxy 来替换本来的 Object.defineProperty 来实现数据响应式。 Proxy 是 ES6 中新增的性能，它能够用来自定义对象中的操作。 let p = new Proxy(target, handler)target 代表须要增加代理的对象，handler 用来自定义对象中的操作，比方能够用来自定义 set 或者 get 函数。 上面来通过 Proxy 来实现一个数据响应式： let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { getLogger(target, property) return Reflect.get(target, property, receiver) }, set(target, property, value, receiver) { setBind(value, property) return Reflect.set(target, property, value) } } return new Proxy(obj, handler)}let obj = { a: 1 }let p = onWatch( obj, (v, property) => { console.log(`监听到属性${property}扭转为${v}`) }, (target, property) => { console.log(`'${property}' = ${target[property]}`) })p.a = 2 // 监听到属性a扭转p.a // 'a' = 2在上述代码中，通过自定义 set 和 get 函数的形式，在本来的逻辑中插入了咱们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。 ...

从开发&运维角度方面来看，总体来说分为以下几个过程： DNS 解析:将域名解析成 IP 地址TCP 连贯：TCP 三次握手发送 HTTP 申请服务器解决申请并返回 HTTP 报文浏览器解析渲染页面断开连接：TCP 四次挥手一、什么是URL？URL（Uniform Resource Locator），对立资源定位符，用于定位互联网上资源，俗称网址。 scheme: // host.domain:port / path / filename ? abc = 123 # 456789 scheme - 定义因特网服务的类型。常见的协定有 http、https、ftp、file， 其中最常见的类型是 http，而 https 则是进行加密的网络传输。host - 定义域主机（http 的默认主机是 www）domain - 定义因特网域名，比方 baidu.comport - 定义主机上的端口号（http 的默认端口号是 80）path - 定义服务器上的门路（如果省略，则文档必须位于网站的根目录中）。filename - 定义文档/资源的名称query - 即查问参数fragment - 即 # 后的hash值，个别用来定位到某个地位二、DNS域名解析在浏览器输出网址后，首先要通过域名解析，因为浏览器并不能间接通过域名找到对应的服务器，而是要通过 IP 地址。 IP 地址IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协定提供的一种对立的地址格局，它为互联网上的每一个网络和每一台主机调配一个逻辑地址，以此来屏蔽物理地址的差别。什么是域名解析DNS 协定提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，咱们的域名解析简略来说就是在 DNS 上记录一条信息记录。浏览器如何通过域名去查问 URL 对应的 IP 呢？DNS域名解析分为递归查问和迭代查问两种形式，现个别为迭代查问。 ...

http/https 协定总结1.0 协定缺点: 无奈复用链接，实现即断开，从新慢启动和 TCP 3次握手head of line blocking: 线头阻塞，导致申请之间相互影响1.1 改良: 长连贯(默认 keep-alive)，复用host 字段指定对应的虚构站点新增性能: 断点续传身份认证状态治理cache 缓存 Cache-ControlExpiresLast-ModifiedEtag2.0: 多路复用二进制分帧层: 应用层和传输层之间首部压缩服务端推送https: 较为平安的网络传输协定 证书(公钥)SSL 加密端口 443TCP: 三次握手四次挥手滑动窗口: 流量管制拥塞解决 慢开始拥塞防止疾速重传疾速复原缓存策略: 可分为 强缓存 和 协商缓存 Cache-Control/Expires: 浏览器判断缓存是否过期，未过期时，间接应用强缓存，Cache-Control的 max-age 优先级高于 Expires当缓存曾经过期时，应用协商缓存 惟一标识计划: Etag(response 携带) & If-None-Match(request携带，上一次返回的 Etag): 服务器判断资源是否被批改最初一次批改工夫: Last-Modified(response) & If-Modified-Since(request，上一次返回的Last-Modified) 如果统一，则间接返回 304 告诉浏览器应用缓存如不统一，则服务端返回新的资源Last-Modified 毛病： 周期性批改，但内容未变时，会导致缓存生效最小粒度只到 s， s 以内的改变无奈检测到Etag 的优先级高于Last-Modified常见的HTTP申请头和响应头HTTP Request Header 常见的申请头： Accept:浏览器可能解决的内容类型Accept-Charset:浏览器可能显示的字符集Accept-Encoding：浏览器可能解决的压缩编码Accept-Language：浏览器以后设置的语言Connection：浏览器与服务器之间连贯的类型Cookie：以后页面设置的任何CookieHost：发出请求的页面所在的域Referer：发出请求的页面的URLUser-Agent：浏览器的用户代理字符串HTTP Responses Header 常见的响应头： Date：示意音讯发送的工夫，工夫的形容格局由rfc822定义server:服务器名称Connection：浏览器与服务器之间连贯的类型Cache-Control：管制HTTP缓存content-type:示意前面的文档属于什么MIME类型常见的 Content-Type 属性值有以下四种： （1）application/x-www-form-urlencoded：浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 形式提交数据。该种形式提交的数据放在 body 外面，数据依照 key1=val1&key2=val2 的形式进行编码，key 和 val 都进行了 URL转码。 ...

浏览器有一个重要的安全策略，称之为「同源策略」 其中，源=协定+主机+端口，**两个源雷同，称之为同源，两个源不同，称之为跨源或跨域 同源策略是指，若页面的源和页面运行过程中加载的源不统一时，出于平安思考，浏览器会对跨域的资源拜访进行一些限度 同源策略对 ajax 的跨域限度的最为凶狠，默认状况下，它不容许 ajax 拜访跨域资源 所以，咱们通常所说的跨域问题，就是同源策略对 ajax 产生的影响 有多种形式解决跨域问题，常见的有： 代理，罕用CORS，罕用JSONP无论应用哪一种形式，都是要让浏览器晓得，我这次跨域申请的是本人人，就不要拦挡了。 跨域解决办法1-代理对于前端开发而言，大部分的跨域问题，都是通过代理解决的 代理实用的场景是：生产环境不产生跨域，但开发环境产生跨域 因而，只须要在开发环境应用代理解决跨域即可，这种代理又称之为开发代理 在理论开发中，只须要对开发服务器稍加配置即可实现 // vue 的开发服务器代理配置// vue.config.jsmodule.exports = { devServer: { // 配置开发服务器 proxy: { // 配置代理 "/api": { // 若申请门路以 /api 结尾 target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com }, }, },};跨域解决办法2-JSONP在CORS呈现之前，人们想了一种微妙的方法来实现跨域，这就是JSONP。 要实现JSONP，须要浏览器和服务器来一个浑然一体的绝妙配合。 JSONP的做法是：当须要跨域申请时，不应用AJAX，转而生成一个script元素去申请服务器，因为浏览器并不阻止script元素的申请，这样申请能够达到服务器。服务器拿到申请后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端事后生成好的函数，并把浏览器须要的数据作为参数传递到函数中，从而间接的把数据传递给客户端 JSONP有着显著的毛病，即其只能反对GET申请 跨域解决办法3-CORS概述CORS是基于http1.1的一种跨域解决方案，它的全称是Cross-Origin Resource Sharing，跨域资源共享。 它的总体思路是：如果浏览器要跨域拜访服务器的资源，须要取得服务器的容许 而要晓得，一个申请能够附带很多信息，从而会对服务器造成不同水平的影响 比方有的申请只是获取一些新闻，有的申请会改变服务器的数据 针对不同的申请，CORS 规定了三种不同的交互模式，别离是： 简略申请须要预检的申请附带身份凭证的申请这三种模式从上到下层层递进，申请能够做的事越来越多，要求也越来越严格。 上面别离阐明三种申请模式的具体标准。 简略申请当浏览器端运行了一段 ajax 代码（无论是应用 XMLHttpRequest 还是 fetch api），浏览器会首先判断它属于哪一种申请模式 ...

输出正文，tab 一下，几十行代码就进去了。 这便是咱们研发的大规模多语言代码生成模型 CodeGeeX。 一、原理模型CodeGeeX是一个基于transformers的大规模预训练编程语言模型。它是一个从左到右生成的自回归解码器，将代码或自然语言标识符（token）作为输出，预测下一个标识符的概率分布。 CodeGeeX含有40个transformer层，每层自注意力块的暗藏层维数为5120，前馈层维数为20480，总参数量为130亿。 模型反对的最大序列长度为2048，足以涵盖大部分应用场景。 语料CodeGeeX的训练语料由两局部组成。 第一局部是开源代码数据集，The Pile与CodeParrot。The Pile蕴含GitHub上领有超过100颗星的一部分开源仓库，咱们从中选取了23种编程语言的代码。 第二局部是补充数据，间接从GitHub开源仓库中爬取Python、Java、C++代码。 为了让模型辨别不同语言，咱们在每个样本的结尾加上一个前缀，其模式为[正文符] language: [语言]，例如：# language: Python。咱们对数据进行了去重和荡涤，整个代码语料含有23种编程语言、总计1587亿个标识符（不含填充符）。 平台CodeGeeX 是由清华大学常识工程实验室研发，其中鹏城实验室提供了算力反对，智谱AI、华为MindSpore提供了技术支持。 具体而言，CodeGeeX 采纳了华为 MindSpore 框架来实现，应用了鹏城实验室“鹏城云脑II”平台中 192 节点昇腾910 AI处理器，在 20 多种编程语言的代码语料库历时两个月训练而成。 此外，咱们还将模型适配到了其余平台上，目前能同时反对昇腾和英伟达平台。 二、性能如前所述，CodeGeeX采纳的是从左到右生成的自回归解码，因而CodeGeeX 可能实现许多生成类的编程问题，例如「依据正文生成代码」、「依据代码生成解释」、「依据上下文做代码补全」、「不同语言之间的代码翻译」等等，你齐全能够依据本人的需要，输出相应的提醒，从而生成有意思的内容。 咱们这里简要介绍两类性能：代码生成和代码翻译。 代码生成代码生成，蕴含了「依据正文生成代码」、「依据上下文做代码补全」等生成类的能力。目前，CodeGeeX 可能反对生成Python、C++、Java、JavaScript和Go等多种支流编程语言的代码。在HumanEval-X代码生成工作（咱们会在另外一篇文章中介绍）上获得47%~60%求解率，较其余开源基线模型有更佳的均匀性能。这是在HumanEval-X中，CodeGeeX在 5 种语言下对各问题的解答率，咱们按Python下的解答率做了排序： 咱们察看了每道题目的具体解答状况，发现题目在不同语言上的解答率有着较大区别，某些题目更适宜用特定语言进行解答。 跨语言代码翻译有时候，咱们会冀望把一种语言实现的代码，转换成另一种语言的代码，了解和重敲，很消耗精力。CodeGeeX 能够实现一键式翻译，和自然语言的翻译一样丝滑： 咱们评测了模型在多语言间代码翻译上的性能： 上图显示了 4 种模型在 5 种语言之间的翻译性能。 4 种模型别离为：InCoder-6.7BCodeGen-Multi-16BCodeGeeX-13BCodeGeeX-13B-FT（即通过微调的CodeGeeX）；5 种语言别离为：PythonC++JavaJavaScriptGo 上表显示出，模型对特定语言存在偏好，比方CodeGeeX善于将其余语言翻译为Python与C++，而CodeGen-Multi-16B善于翻译为JavaScript和Go，这可能是因为训练集中的语料占比存在差别。 在20个翻译对中，咱们还察看到两种语言相互翻译的体现经常是呈负相关的，这可能阐明现有的模型还不足以学好所有的语言。 三、插件1、VS Code插件基于 CodeGeeX 的弱小性能，咱们开发了 VS Code 插件，在 VS Code 插件市场搜寻「codegeex」即可找到，该插件能够完全免费下载应用。 VS Code 版本的 CodeGeeX插件，咱们后续同样将齐全开源进去。任何人都能够在此基础上，做出更进一步的优化。 ...

本文次要通过手写一个简略的 React，旨在理解 Facebook 团队应用两年多工夫重构的 Fiber 架构到底做了些什么？从而对 React 基本原理有一个直观的意识。尬不多说，搭建开始~青铜 – React、JSX、DOM elements 如何工作的？本文次要根本 React 16.8 版本进行实现。 上面先实现一个最简略的页面渲染，疾速理解 JSX、React、DOM 元素的分割。 import React from "react";import ReactDOM from "react-dom";const element = ( <div id="foo"> <a>bar</a> <b /> </div>);const container = document.getElementById("root");ReactDOM.render(element, container);实现一个最简略的 React 利用，只须要下面的三行代码就够了 ，上面咱们也将拆分三步进行剖析， 创立 React 元素（React Element）获取根节点 root将 React 元素渲染到页面上1. JSX 是如何被解析的 - Babelconst element = ( <div id="foo"> <a>bar</a> <b /> </div>);用 JSX 创立了一个 react 元素，它不是无效的 JS，其实它是被 babel 解析为如下代码： "use strict";const element = /*#__PURE__*/ React.createElement( "div", { id: "foo", }, /*#__PURE__*/ React.createElement("a", null, "bar"), /*#__PURE__*/ React.createElement("b", null));能够看到 Babel 会将 JSX 转换成 React.createElement() 办法，其中 createElement() 办法接管三个参数，别离是元素类型 type、元素属性 props、和子元素 children，前面咱们会实现这个办法。 ...

实现filter办法Array.prototype.myFilter=function(callback, context=window){ let len = this.length newArr = [], i=0 for(; i < len; i++){ if(callback.apply(context, [this[i], i , this])){ newArr.push(this[i]); } } return newArr;}实现一下hash路由根底的html代码： <html> <style> html, body { margin: 0; height: 100%; } ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } .box { width: 100%; height: 100%; background-color: red; } </style> <body> <ul> <li> <a href="#red">红色</a> </li> <li> <a href="#green">绿色</a> </li> <li> <a href="#purple">紫色</a> </li> </ul> </body></html>简略实现： ...

之所以要写这篇，是因为已经面试被要求在白纸上手写bind实现 后果跟代码一样清晰明确，一阵懵逼，没写进去！ 上面，撸起袖子就是干！~ 把call、apply、bind一条龙都整一遍！~~ call定义与应用Function.prototype.call(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.call()样例function fun(arg1, arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 承受的是一个参数列表;办法立刻执行fun.call(_this, 1, 2)// 输入：YIYING3手写实现/** * 自定义call实现 * @param context 上下文this对象 * @param args 动静参数 */Function.prototype.ownCall = function(context, ...args) { context = (typeof context === 'object' ? context : window) // 避免笼罩掉原有属性 const key = Symbol() // 这里的this为须要执行的办法 context[key] = this // 办法执行 const result = context[key](...args) delete context[key] return result}// 验证样例function fun(arg1, arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 承受的是一个参数列表;办法立刻执行fun.ownCall(_this, 1, 2)// 输入：YIYING3apply定义与应用Function.prototype.apply(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.apply()样例function fun(arg1, arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 参数为数组;办法立刻执行fun.apply(_this, [1, 2])// 输入：YIYING3手写实现/** * 自定义Apply实现 * @param context 上下文this对象 * @param args 参数数组 */Function.prototype.ownApply = function(context, args) { context = (typeof context === 'object' ? context : window) // 避免笼罩掉原有属性 const key = Symbol() // 这里的this为须要执行的办法 context[key] = this // 办法执行 const result = context[key](...args) delete context[key] return result}// 验证样例function fun(arg1, arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 参数为数组;办法立刻执行fun.ownApply(_this, [1, 2])// 输入：YIYING3bind定义与应用Function.prototype.bind(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.bind()样例function fun(arg1, arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向，返回新function对象const newFun = fun.bind(_this)newFun(1, 2)// 输入：YIYING3参考 前端进阶面试题具体解答 ...

实现 add(1)(2)(3)函数柯里化概念： 柯里化（Currying）是把承受多个参数的函数转变为承受一个繁多参数的函数，并且返回承受余下的参数且返回后果的新函数的技术。 1）粗犷版 function add (a) {return function (b) { return function (c) { return a + b + c; }}}console.log(add(1)(2)(3)); // 62）柯里化解决方案 参数长度固定var add = function (m) { var temp = function (n) { return add(m + n); } temp.toString = function () { return m; } return temp;};console.log(add(3)(4)(5)); // 12console.log(add(3)(6)(9)(25)); // 43对于add(3)(4)(5)，其执行过程如下： 先执行add(3)，此时m=3，并且返回temp函数；执行temp(4)，这个函数内执行add(m+n)，n是此次传进来的数值4，m值还是上一步中的3，所以add(m+n)=add(3+4)=add(7)，此时m=7，并且返回temp函数执行temp(5)，这个函数内执行add(m+n)，n是此次传进来的数值5，m值还是上一步中的7，所以add(m+n)=add(7+5)=add(12)，此时m=12，并且返回temp函数因为前面没有传入参数，等于返回的temp函数不被执行而是打印，理解JS的敌人都晓得对象的toString是批改对象转换字符串的办法，因而代码中temp函数的toString函数return m值，而m值是最初一步执行函数时的值m=12，所以返回值是12。参数长度不固定function add (...args) { //求和 return args.reduce((a, b) => a + b)}function currying (fn) { let args = [] return function temp (...newArgs) { if (newArgs.length) { args = [ ...args, ...newArgs ] return temp } else { let val = fn.apply(this, args) args = [] //保障再次调用时清空 return val } }}let addCurry = currying(add)console.log(addCurry(1)(2)(3)(4, 5)()) //15console.log(addCurry(1)(2)(3, 4, 5)()) //15console.log(addCurry(1)(2, 3, 4, 5)()) //15手写深度比拟isEqual思路：深度比拟两个对象，就是要深度比拟对象的每一个元素。=> 递归递归退出条件： ...

一款很容易上手配置的富文本编辑器，和 Element plus 一起应用成果十分好，还能自定义性能。 对于 Element Tiptap EditorElement Tiptap Editor 是一个在 web 开发畛域“所见即所得”的富文本编辑器，基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 应用易上手，对开发者敌对，而且可扩展性强，设计简洁。 Element Tiptap Editor 的技术个性操作按钮等组件应用 element-ui 组件，整体款式协调好看有许多开箱即用的 extension（编辑器扩大）完满反对 markdown 语法反对 TypeScripti18n 国际化反对(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)高度自定义，能够自定义 extension 和它对应的菜单按钮视图操作灵便，能够通过间接管制编辑器的行为来定制编辑器提供中文文档为什么抉择 Element Tiptap Editor上个月在我的项目的治理后盾，接到到相似布告公布的需要，文字须要能够增强调色、列表编辑等较为轻量的富文本编辑需要，须要减少文章编辑的性能。 在一年多前我也写过文章举荐 Tiptap，这是一个基于 vue 的开源富文本编辑器，过后还是 1.x 版本，应用简略，当初更新的 2.0 全新版本，尽管性能更弱小了，但复杂程度也大幅晋升，1.x 版本也不再保护了。 就在束手无策的时候，发现了 Element Tiptap Editor，这是一个搭配 Element UI 应用，API 简化的 Tiptap 编辑器，在应用简略的同时，还能自定义扩大，一些须要依照肯定格局插入或者格式化的内容，能够通过自定义扩大来实现，在 Element UI 搭建的我的项目中，Element Tiptap Editor 几乎是最优的抉择。 ...

介绍 plugin插件零碎是 Webpack 胜利的一个关键性因素。在编译的整个生命周期中，Webpack 会触发许多事件钩子，Plugin 能够监听这些事件，依据需要在相应的工夫点对打包内容进行定向的批改。一个最简略的 plugin 是这样的: class Plugin{ // 注册插件时，会调用 apply 办法 // apply 办法接管 compiler 对象 // 通过 compiler 上提供的 Api，能够对事件进行监听，执行相应的操作 apply(compiler){ // compilation 是监听每次编译循环 // 每次文件变动，都会生成新的 compilation 对象并触发该事件 compiler.plugin('compilation',function(compilation) {}) }}注册插件: // webpack.config.jsmodule.export = { plugins:[ new Plugin(options), ]}事件流机制: Webpack 就像工厂中的一条产品流水线。原材料通过 Loader 与 Plugin 的一道道解决，最初输入后果。通过链式调用，按程序串起一个个 Loader；通过事件流机制，让 Plugin 能够插入到整个生产过程中的每个步骤中；Webpack 事件流编程范式的外围是根底类 Tapable，是一种 观察者模式 的实现事件的订阅与播送：const { SyncHook } = require("tapable")const hook = new SyncHook(['arg'])// 订阅hook.tap('event', (arg) => { // 'event-hook' console.log(arg)})// 播送hook.call('event-hook')Webpack 中两个最重要的类 Compiler 与 Compilation 便是继承于 Tapable，也领有这样的事件流机制。Compiler : 能够简略的了解为 Webpack 实例，它蕴含了以后 Webpack 中的所有配置信息，如 options， loaders, plugins 等信息，全局惟一，只在启动时实现初始化创立，随着生命周期逐个传递；Compilation: 能够称为 编译实例。当监听到文件产生扭转时，Webpack 会创立一个新的 Compilation 对象，开始一次新的编译。它蕴含了以后的输出资源，输入资源，变动的文件等，同时通过它提供的 api，能够监听每次编译过程中触发的事件钩子；区别: ...

阐明最近在温习 Promise 的常识，所以就做了一些题，这里挑出几道题，大家一起看看吧。 题目一const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2);})promise.then(() => { console.log(3);})console.log(4);解析首先 Promise 新建后立刻执行，所以会先输入 1，2，而 Promise.then() 外部的代码在 当次 事件循环的 结尾 立即执行 ，所以会持续输入4，最初输入3。 答案1243题目二const promise = new Promise((resolve, reject) => { resolve('success1'); reject('error'); resolve('success2');});promise.then((res) => { console.log('then:', res);}).catch((err) => { console.log('catch:', err);})解析resolve 函数将 Promise 对象的状态从“未实现”变为“胜利”（即从 pending 变为 resolved），在异步操作胜利时调用，并将异步操作的后果，作为参数传递进来； reject 函数将 Promise 对象的状态从“未实现”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的谬误，作为参数传递进来。 而一旦状态扭转，就不会再变。所以 代码中的reject('error'); 不会有作用。 Promise 只能 resolve 一次，剩下的调用都会被疏忽。所以 第二次的 resolve('success2'); 也不会有作用。 ...

介绍一下Connection:keep-alive什么是keep-alive 咱们晓得HTTP协定采纳“申请-应答”模式，当应用一般模式，即非KeepAlive模式时，每个申请/应答客户和服务器都要新建一个连贯，实现 之后立刻断开连接（HTTP协定为无连贯的协定）； 当应用Keep-Alive模式（又称长久连贯、连贯重用）时，Keep-Alive性能使客户端到服 务器端的连贯继续无效，当呈现对服务器的后继申请时，Keep-Alive性能防止了建设或者从新建设连贯。 为什么要应用keep-alive keep-alive技术的创立目标，能在屡次HTTP之前重用同一个TCP连贯，从而缩小创立/敞开多个 TCP 连贯的开销（包含响应工夫、CPU 资源、缩小拥挤等），参考如下示意图 客户端如何开启 在HTTP/1.0协定中，默认是敞开的，须要在http头退出"Connection: Keep-Alive”，能力启用Keep-Alive；Connection: keep-alivehttp 1.1中默认启用Keep-Alive，如果退出"Connection: close “，才敞开。Connection: close目前大部分浏览器都是用http1.1协定，也就是说默认都会发动Keep-Alive的连贯申请了，所以是否能实现一个残缺的Keep- Alive连贯就看服务器设置状况。 Promise.any形容：只有 promises 中有一个fulfilled，就返回第一个fulfilled的Promise实例的返回值。 实现 Promise.any = function(promises) { return new Promise((resolve, reject) => { if(Array.isArray(promises)) { if(promises.length === 0) return reject(new AggregateError("All promises were rejected")); let count = 0; promises.forEach((item, index) => { Promise.resolve(item).then( value => resolve(value), reason => { count++; if(count === promises.length) { reject(new AggregateError("All promises were rejected")); }; } ); }) } else return reject(new TypeError("Argument is not iterable")); });}代码输入后果async function async1() { console.log("async1 start"); await async2(); console.log("async1 end");}async function async2() { console.log("async2");}async1();console.log('start')输入后果如下： ...

在面试中，三次握手和四次挥手能够说是问的最频繁的一个知识点了，我置信大家也都看过很多对于三次握手与四次挥手的文章，明天的这篇文章，重点是围绕着面试，咱们应该把握哪些比拟重要的点，哪些是比拟被面试官给问到的，我感觉如果你能把我上面列举的一些点都记住、了解，我想就差不多了。 三次握手因为在面试中，三次握手是被问的最频繁的面试题，所以本次咱们从面试的角度来解说三次握手当面试官问你为什么须要有三次握手、三次握手的作用、讲讲三次三次握手的时候，我想很多人会这样答复： 首先很多人会先讲下握手的过程： 1、第一次握手：客户端给服务器发送一个 SYN 报文。 2、第二次握手：服务器收到 SYN 报文之后，会应答一个 SYN+ACK 报文。 3、第三次握手：客户端收到 SYN+ACK 报文之后，会回应一个 ACK 报文。 4、服务器收到 ACK 报文之后，三次握手建设实现。 作用是为了确认单方的接管与发送能力是否失常。 这里我顺便解释一下为啥只有三次握手能力确认单方的承受与发送能力是否失常，而两次却不能够： 第一次握手：客户端发送网络包，服务端收到了。这样服务端就能得出结论：客户端的发送能力、服务端的接管能力是失常的。 第二次握手：服务端发包，客户端收到了。这样客户端就能得出结论：服务端的接管、发送能力，客户端的接管、发送能力是失常的。不过此时服务器并不能确认客户端的接管能力是否失常。 第三次握手：客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接管、发送能力失常，服务器本人的发送、接管能力也失常。 因而，须要三次握手能力确认单方的接管与发送能力是否失常。 这样答复其实也是能够的，但我感觉，这个过程的咱们应该要形容的更具体一点，因为三次握手的过程中，单方是由很多状态的扭转的，而这些状态，也是面试官可能会问的点。所以我感觉在答复三次握手的时候，咱们应该要形容的具体一点，而且形容的具体一点意味着能够扯久一点。加分的形容我感觉应该是这样： 刚开始客户端处于 closed 的状态，服务端处于 listen 状态。而后 1、第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 SN(c)。此时客户端处于 SYN_Send 状态。 2、第二次握手：服务器收到客户端的 SYN 报文之后，会以本人的 SYN 报文作为应答，并且也是指定了本人的初始化序列号 ISN(s)，同时会把客户端的 ISN + 1 作为 ACK 的值，示意本人曾经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态。 3、第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，示意曾经收到了服务端的 SYN 报文，此时客户端处于 establised 状态。 4、服务器收到 ACK 报文之后，也处于 establised 状态，此时，单方以建设起了链接。 ...

之前在做 code review 时候发现有共事应用 try catch 包装了一堆异步代码，于是集体就感觉很奇怪，难道不应该只 catch 可能出问题的代码吗？共事通知我说 try catch 太细的话会呈现内外作用域不统一，须要提前申明变量。 let res: Data[] = [];try { res = await fetchData();} catch (err) { // 错误操作或者终止 // return}// 继续执行失常逻辑确实，一方面开发者不应该大范畴包裹非异样代码，另一方面提前申明变量会让代码不连贯同时也会打断思路。其中一个形式是间接应用原生 Promie 而不是 async。 fetchData().then((res) => {}).catch((err) => {});这样对于单个异步申请当然没有任何问题，如果是具备依赖性的异步申请。尽管能够再 Promise 中返回另外的 Promise 申请，然而这样解决 catch 却只能有一个。 fetchData().then((res) => { // 业务解决 return fetchData2(res);}).then((res) => { // 业务解决}).catch((err) => { // 只能做一个通用的错误处理了});如果须要多个 catch 解决，咱们就须要这样写。 fetchData().then((res) => { // 业务解决 return fetchData2(res);}).catch((err) => { // 错误处理并且返回 null return null;}).then((res) => { if (res === null) { return; } // 业务解决}).catch((err) => { // 错误处理});这时候开发者也要思考 fetchData2 会不会返回 null 的问题。于是集体开始找一些办法来帮忙咱们解决这个问题。 ...

前段时间开发了一个小插件，性能很简略，引入之后脚本会主动执行一些逻辑，所以在公布时将它打包成了 IIFE 模式的 js 包。 在我的项目中接入时，间接通过 script 标签引入即可，就像这样： <script src="https://xxxcdn.com/fehub-plugin.js"></script>然而在插件的后续应用中，发现有几个参数，如果可能反对自定义的话，应用起来会更加不便。 那么咱们就降级一下，让他反对自定义~ 为了防止改变过大，所以第一工夫想到的就是通过 script 标签的属性来传递参数，就像这样： <script src="xxx" param1="fehub" param2="18"></script>如何获取到参数的值？好了，参数是设置好了，然而怎样才能取到这个参数呢？ 个别状况下，如果咱们想要获取某个元素上的属性，能够先通过 querySelector 选择器找到对应的元素，而后再通过 getAttribute 办法获取，就像这样： <!-- HTML --><div id="demo" name="fehub">Hello ~</div><!-- JavaScript -->const demoEle = document.querySelector("#demo");console.log(demoEle.getAttribute("name"));// fehub所以，能够让用户在接入此脚本的时候，设置一个约定好的固定 id，而后在脚本内通过 querySelector 获取到此 script 标签，就像这样： <!-- HTML --><script src="https://xxxcdn.com/fehub-plugin.js" id="fehub-plugin" param1="fehub" param2="18"></script><!-- JavaScript -->const script = document.querySelector("#fehub-plugin");console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>console.log(script.getAttribute("param1"));// fehubconsole.log(script.getAttribute("param2"));// 18然而，这种办法不太可控，如果插件的 id 没有设置，那么就无奈达到想要的成果。 原生 API不过好消息是document 上有一个 currentScript 对象，示意的就是以后正在运行的脚本所属的 script 元素，用起来非常简单，就像这样： <!-- HTML --><script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script><!-- JavaScript -->const script = document.currentScript;console.log(script);// <script src="https://xxxcdn.com/fehub-plugin.js" param1="fehub" param2="18"></script>console.log(script.getAttribute("param1"));// fehubconsole.log(script.getAttribute("param2"));// 18当初就好多了，间接通过原生 API 即可，而且兼容性也很好： ...

科普简介混同是指将 JavaScript 代码变得难以了解的过程。这能够通过更改变量名、函数名和类名，以及将代码压缩到一行来实现。混同的次要目标是使代码难以被盗用，并爱护代码的知识产权。 性能作用与罕用的解决方案混同后的代码很难浏览，然而依然能够通过解密来复原原来的代码。解密是指将混同后的代码还原为可读性更高的代码。 解密是通过应用业余的工具来实现的，例如 JSbeautifier 或者 在线JS混同加密解密工具。这些工具能够帮忙复原变量名和函数名，使代码更易于了解。 混同并不是齐全无效的保护措施，因为有许多工具能够无效地解密混同后的代码。它最好用作联结应用的一种措施，与其余保护措施（例如加密）联合起来应用，也能够交给业余的人员去手工解密。 总的来说，混同和解密是用于爱护 JavaScript 代码的常见技术。混同能够使代码难以被盗用，而解密则能够复原混同后的代码，使其更易于了解。 例子0x1fc9: function (_0x2715a2, _0x5a118b, _0x344094) { const _0x23ae3e = _0x344094(`611c`); class _0x2e9b72 { static [`getInstance`]() { if ('\x6f\x64\x74\x56\x66' === `odtVf`) return new _0x23ae3e(); else { function _0x2198cd() { _0x12eae5[`log`](`ws\u8FDE\u63A5\u5931\u8D25`); const _0x28aee6 = this; _0x28aee6[`startWsCount`] < 0x5 ? (this[`$message`]('\u6b63\u5728\u542f\u52a8\x77\x73\u670d\u52a1\x2e\x2e\x2e'), _0x4bc899(function () { _0x28aee6[`startWsCount`] += 0x1, _0x28aee6[`startWsCount`] >= 0x3 ? (_0x28aee6[`startWs`](), _0x28aee6[`startWsCount`] = 0x0) : _0x28aee6[`initWs`](); }, 0 x7d0)) : (_0x28aee6[`ws_tips`] = `ws\u5DF2\u5C1D\u8BD5\u542F\u52A8\u5931\u8D255\u6B21\uFF0C\u8BF7\u68C0\u67E5ws\u6587\u4EF6\u8DEF\u5F84\u662F\u5426\u6B63\u5E38\uFF0C\u6216\u624B\u52A8\u542F\u52A8`, _0x3feb67(function () { _0x28aee6[`not_start_ws`] = !0x0; }, 0x7d0)); } } } } const _0x189052 = _0x2e9b72[`getInstance`](); _0x2715a2[`exports`] = _0x189052; }先丢到jsjiami.com用一键解密解一遍，个别简略的加密和编码一键就解了，即便解不开也会帮你吧难以辨认的编码等内容转码成你能看懂的样子，最初通过我出工解密失去如下成品。 ...

手写 Promise.thenthen 办法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，咱们应用一个 callbacks 数组先把传给then的函数暂存起来，等状态扭转时再调用。 那么，怎么保障后一个 **then** 里的办法在前一个 **then**（可能是异步）完结之后再执行呢？ 咱们能够将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的成果： 承前：以后一个 promise 实现后，调用其 resolve 变更状态，在这个 resolve 里会顺次调用 callbacks 里的回调，这样就执行了 then 里的办法了启后：上一步中，当 then 里的办法执行实现后，返回一个后果，如果这个后果是个简略的值，就间接调用新 promise 的 resolve，让其状态变更，这又会顺次调用新 promise 的 callbacks 数组里的办法，周而复始。。如果返回的后果是个 promise，则须要等它实现之后再触发新 promise 的 resolve，所以能够在其后果的 then 里调用新 promise 的 resolvethen(onFulfilled, onReject){ // 保留前一个promise的this const self = this; return new MyPromise((resolve, reject) => { // 封装前一个promise胜利时执行的函数 let fulfilled = () => { try{ const result = onFulfilled(self.value); // 承前 return result instanceof MyPromise? result.then(resolve, reject) : resolve(result); //启后 }catch(err){ reject(err) } } // 封装前一个promise失败时执行的函数 let rejected = () => { try{ const result = onReject(self.reason); return result instanceof MyPromise? result.then(resolve, reject) : reject(result); }catch(err){ reject(err) } } switch(self.status){ case PENDING: self.onFulfilledCallbacks.push(fulfilled); self.onRejectedCallbacks.push(rejected); break; case FULFILLED: fulfilled(); break; case REJECT: rejected(); break; } }) }留神： ...

实现 new 过程：要点： 函数第一个参数是构造函数实例的__proto__指向构造函数的原型属性prototype函数残余参数要挂载到一个实例对象上构造函数有返回值时，就返回这个返回值const createObj = function () { let obj = {} let Constructor = [].shift.call(arguments) // 1 obj.__proto__ = Constructor.prototype // 2 let ret = Constructor.apply(obj, arguments) // 3 return typeof ret === 'object' ? ret: obj // 4}// 应用const Fun = function (name) { this.name = name}Fun.prototype.getName = function() { alert(this.name)}let fun = createObj(Fun, 'gim')fun.getName() // gim值得注意的是，es6的class必须用new调用，否则会报错，如下： class Fun { constructor(name) { this.name = name } getName() { alert(this.name) }}let fun = createObj(Fun, 'gim')fun.getName() // Uncaught TypeError: Class constructor Fun cannot be invoked without 'new'手写 call、apply 及 bind 函数共同点： ...

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

说起Promise大家应该都耳熟能详，咱们明天来看下Promise的相干办法有如下：原型办法：then、catch、finally 静态方法：resolve、reject、race、all、allSettled、any 手写实现办法如下：实现resolve办法promise.resolve('123')本质上就是new Promise(resolve=>resolve('123')})Promise.resolve(value) 将给定的一个值转为Promise对象。 如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是thenable（即带有"then" 办法），返回的promise会“追随”这个thenable的对象，采纳它的最终状态；否则返回的promise将以此值实现，即以此值执行resolve()办法 (状态为fulfilled)。 class MyPromise { static PENDING = 'pending' static FULFILLED = 'fulfilled' static REJECTED = 'rejected' constructor(executor) { this.PromiseState = MyPromise.PENDING this.PromiseResult = null this.fulfilledCallBacks = [] this.rejectedCallBacks = [] try { executor(this.resolve.bind(this), this.reject.bind(this)) } catch (error) { this.reject(error) } } resolve(result) { if ((this.PromiseState = MyPromise.PENDING)) { setTimeout(() => { this.PromiseState = MyPromise.FULFILLED this.PromiseResult = result for (const callBack of this.fulfilledCallBacks) { callBack(result) } }) } } reject(reason) { if ((this.PromiseState = MyPromise.PENDING)) { setTimeout(() => { this.PromiseState = MyPromise.REJECTED this.PromiseResult = reason for (const callBack of this.rejectedCallBacks) { callBack(reason) } }) } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (val) => val onRejected = typeof onRejected === 'function' ? onRejected : (err) => { throw err } return new MyPromise((resolve, reject) => { if (this.PromiseState === MyPromise.PENDING) { this.fulfilledCallBacks.push(() => { setTimeout(() => { let x = onFulfilled(this.PromiseResult) x instanceof MyPromise ? x.then(resolve, reject) : resolve(x) }) }) this.rejectedCallBacks.push(() => { setTimeout(() => { let x = onRejected(this.PromiseResult) x instanceof MyPromise ? x.then(resolve, reject) : reject(x) }) }) } else if (this.PromiseState === MyPromise.FULFILLED) { try { setTimeout(() => { let x = onFulfilled(this.PromiseResult) x instanceof MyPromise ? x.then(resolve, reject) : resolve(x) }) } catch (error) { reject(error) } } else { try { setTimeout(() => { let x = onRejected(this.PromiseResult) x instanceof MyPromise ? x.then(resolve, reject) : reject(x) }) } catch (error) { reject(error) } } }) } //value 要解析为 Promise 对象的值 static resolve(value) { //如果是 if (value instanceof MyPromise) { return value } else if (value && typeof value === 'object' && 'then' in value) { return new MyPromise((resolve, reject) => { value.then(resolve, reject) }) } return new MyPromise((resolve) => { resolve(value) }) } } const promise1 = MyPromise.resolve(123) promise1.then((value) => { console.log(value) // expected output: 123 }) // Resolve一个thenable对象 var p1 = MyPromise.resolve({ then: function (onFulfill) { onFulfill('Resolving') }, }) console.log(p1 instanceof MyPromise) // true, 这是一个Promise对象 setTimeout(() => { console.log('p1 :>> ', p1) }, 1000) p1.then( function (v) { console.log(v) // 输入"Resolving!" }, function (e) { // 不会被调用 } ) // Thenable在callback之前抛出异样 // MyPromise rejects var thenable = { then: function (resolve) { throw new TypeError('Throwing') resolve('Resolving') }, } var p2 = MyPromise.resolve(thenable) p2.then( function (v) { // 不会被调用 }, function (e) { console.log(e) // TypeError: Throwing } ) ...

Ajax它是一种异步通信的办法，通过间接由 js 脚本向服务器发动 http 通信，而后依据服务器返回的数据，更新网页的相应局部，而不必刷新整个页面的一种办法。 面试手写（原生）： //1：创立Ajax对象var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本//2：配置 Ajax申请地址xhr.open('get','index.xml',true);//3：发送申请xhr.send(null); // 谨严写法//4:监听申请，承受响应xhr.onreadysatechange=function(){ if(xhr.readySate==4&&xhr.status==200 || xhr.status==304 ) console.log(xhr.responsetXML)}jQuery写法 $.ajax({ type:'post', url:'', async:ture,//async 异步 sync 同步 data:data,//针对post申请 dataType:'jsonp', success:function (msg) { }, error:function (error) { }})promise 封装实现： // promise 封装实现：function getJSON(url) { // 创立一个 promise 对象 let promise = new Promise(function(resolve, reject) { let xhr = new XMLHttpRequest(); // 新建一个 http 申请 xhr.open("GET", url, true); // 设置状态的监听函数 xhr.onreadystatechange = function() { if (this.readyState !== 4) return; // 当申请胜利或失败时，扭转 promise 的状态 if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; // 设置谬误监听函数 xhr.onerror = function() { reject(new Error(this.statusText)); }; // 设置响应的数据类型 xhr.responseType = "json"; // 设置申请头信息 xhr.setRequestHeader("Accept", "application/json"); // 发送 http 申请 xhr.send(null); }); return promise;}数组扁平化ES5 递归写法 —— isArray()、concat()function flat11(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { res = res.concat(flat11(arr[i])); } else { res.push(arr[i]); } } return res;}如果想实现第二个参数（指定“拉平”的层数），能够这样实现，前面的几种能够本人相似实现： ...

背景一天惬意的下午。敌人给我分享了一道头条面试题,如下: async function async1(){ console.log('async1 start') await async2() console.log('async1 end')}async function async2(){ console.log('async2')}console.log('script start')setTimeout(function(){ console.log('setTimeout') },0) async1();new Promise(function(resolve){ console.log('promise1') resolve();}).then(function(){ console.log('promise2')})console.log('script end')这个题目次要是考查对同步工作、异步工作：setTimeout、promise、async/await的执行程序的了解水平。(倡议大家也本人先做一下o) 过后因为我对async、await理解的不是很分明，答案错的千奇百怪 :()，就不记录了，而后我就去看文章理了理思路。当初写在上面以供日后参考。 js事件轮询的一些概念这里首先须要明确几个概念：同步工作、异步工作、工作队列、microtask、macrotask 同步工作指的是，在主线程上排队执行的工作，只有前一个工作执行结束，能力执行后一个工作； 异步工作指的是，不进入主线程、而进入"工作队列"（task queue）的工作，期待同步工作执行结束之后，轮询执行异步工作队列中的工作 macrotask 即宏工作，宏工作队列等同于咱们常说的工作队列，macrotask是由宿主环境散发的异步工作，事件轮询的时候总是一个一个工作队列去查看执行的，"工作队列"是一个先进先出的数据结构，排在后面的事件，优先被主线程读取。 microtask 即微工作，是由js引擎散发的工作，总是增加到当前任务队列开端执行。另外在解决microtask期间，如果有新增加的microtasks，也会被增加到队列的开端并执行。留神与setTimeout(fn,0)的区别： setTimeOut(fn(),0)指定某个工作在主线程最早可得的闲暇工夫执行，也就是说，尽可能早得执行。它在"工作队列"的尾部增加一个事件，因而要等到同步工作和"工作队列"现有的事件都解决完，才会失去执行。 总结一下： task queue、microtask、macrotask An event loop has one or more task queues.(task queue is macrotask queue)Each event loop has a microtask queue.task queue = macrotask queue != microtask queuea task may be pushed into macrotask queue,or microtask queuewhen a task is pushed into a queue(micro/macro),we mean preparing work is finished,so the task can be executed now.所以咱们能够失去js执行程序是： ...

如何防止ajax数据申请从新获取一般而言，ajax申请的数据都放在redux中存取。代码输入后果async function async1 () { await async2(); console.log('async1'); return 'async1 success'}async function async2 () { return new Promise((resolve, reject) => { console.log('async2') reject('error') })}async1().then(res => console.log(res))输入后果如下： async2Uncaught (in promise) error能够看到，如果async函数中抛出了谬误，就会终止谬误后果，不会持续向下执行。 如果想要让谬误不足之处前面的代码执行，能够应用catch来捕捉： async function async1 () { await Promise.reject('error!!!').catch(e => console.log(e)) console.log('async1'); return Promise.resolve('async1 success')}async1().then(res => console.log(res))console.log('script start')这样的输入后果就是： script starterror!!!async1async1 successNginx的概念及其工作原理Nginx 是一款轻量级的 Web 服务器，也能够用于反向代理、负载平衡和 HTTP 缓存等。Nginx 应用异步事件驱动的办法来解决申请，是一款面向性能设计的 HTTP 服务器。 传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的。正是这个次要的区别带给了 Nginx 在性能上的劣势。 ...

在上一节中咱们理解了常见的es6语法的一些知识点。这一章节咱们将会学习异步编程这一块内容，鉴于异步编程是js中至关重要的内容，所以咱们将会用三个章节来学习异步编程波及到的重点和难点，同时这一块内容也是面试常考范畴。 并发（concurrency）和并行(parallelism)的区别面试题 并发和并行的区别？ 异步和这一大节的知识点其实并不是一个概念，然而这个两个名词的确是很多人混同的知识点，其实混同的起因可能只是两个名词在中文的类似，在英文上来说齐全是不同的单词。 并发是宏观概念，我别离有工作A和工作B，在一段时间内通过工作间的切换实现了这两个工作，这种状况就能够成为并发。 并行是宏观概念，假如cpu中存在两个外围，那么我就能够同时实现工作A，B。同时实现多个工作的状况就能够称之为并行。 回调函数（callback）面试题： 什么是回调函数？回调函数有什么毛病？如何解决回调天堂问题？ 回调函数应该是大家常常应用到的，以下代码是回调函数的例子： ajax(url,()=>{ //解决逻辑})然而回调函数有个致命的弱点，就是容易写出回调天堂，假如多个申请存在依赖性，你可能就会写出如下代码： ajax(url,()=>{ ajax(url,()=>{})})以上代码看起来不利于浏览和保护，当然你可能会说解决这个问题还不简略，把函数离开来写不就得了 function firstAjax(){ ajax(url1,()=>{ secondAjax() })}function second(){ ajax(url2,()=>{ })}ajax(url,()=>{ firstAjax()})以上代码看上去有利于浏览了，然而还是没有解决基本问题 回调天堂得基本问题是： 嵌套函数存在耦合性，一旦有改变，就会牵一发而动全身嵌套函数一多就很难处理错误当然，回调函数还存在着别的毛病，比方不能应用try catch捕捉谬误，不能间接return。 Generator面试题：你了解的generator是什么？ Generator算是es6中难了解的概念之一了，Generator最大的特点就是能够管制函数的执行。在这一大节中咱们不会讲什么是Generator，而把重点放在Generator的一些容易困惑的中央。 function *foo(){ let y = 2*(yield(x+1)) let z = yield(y/3) return (x+y+z)}let it = foo(5)console.log(it.next())console.log(it.next(12))console.log(it.next(13))你兴许会纳闷为什么会产生与你料想不同的值，接下来就让我为你逐行代码剖析起因 首先 Generator 函数调用和一般函数不同，它会返回一个迭代器当执行第一次 next 时，传参会被疏忽，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 12，所以第二个 yield 等于 2 12 / 3 = 8当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42Generator 函数个别见到的不多，其实也于他有点绕有关系，并且个别会配合 co 库去应用。当然，咱们能够通过 Generator 函数解决回调天堂的问题，能够把之前的回调天堂例子改写为如下代码： ...

前言： 最初的章节终于要来了，不晓得有没有人真正跟进上来这个进阶系列。最后我的本意只是想间接从 《手撕 Promise》 开始。然而我想了想，这样的话对一些基础知识不是特地牢固的小伙伴不太敌对，于是就创立了该专栏尽量从头开始讲给那些真正想从我的博文中学习到那么一丢丢货色的人 浏览本文前须要领有咱们后面的六个进阶工作的通关钥匙 (0/6) JS 代码运行机制加深了解回调函数手写“回调天堂”宏工作和微工作手写 Promise（前篇）手写 Promise（中篇请追随本文实现你登神长阶的最初一步 一. 剖析 MyPromise 现有的问题如果你跟进了前篇的常识，那么你目前的代码应该是上面这个样子。尽管看起来即实现了存储同步数据的性能，又实现了存储异步数据的性能，然而到目前为止，咱们的 MyPromise 还是一个假的 Promise 。什么意思呢？咱们先看一下原生的 Promise 存储一个同步数据时的样子。依据之前的常识，在主线程的 console.log('我在主线程，我应该是第一执行') 必定是会比 Promise 实例的 then 办法的 console.log 执行的快的，因为一个是在主线程，一个还得在微工作队列里排一会队。咱们能够很快得出，在控制台的后果应该如下：当初咱们测试一下咱们的刚刚写好的 MyPromise 的状况是什么样子的。如果咱们的 MyPromise 是现实状态下的成果， resolve 办法应该会被放入微工作队列。所以上面的代码依照现实状况应该是先输入 console.log(我应该是第一次执行) 这行代码，而后输入数字 1。然而后果却是：这该怎么办呢？二. 微工作的创立如果你之前认真读过我的《宏工作和微工作》这篇文章，那么你肯定晓得创立一个微工作其实十分非常简单。没错，就是应用 window 对象身上的 queueMicrotask 函数。说干就干，咱们的数据是在哪读的?你还记得吗？没记起来我揭示你一下，应该是在 then 办法的第一个回调函数 onFulfilled 函数中的吧？那不就非常简单了吗？我间接在 state==='fulfilled' 的时候，也就是数据填充好当前，我将 onFulFilled 函数从原来的同步执行代码逻辑转变为放入微工作队列去执行。哦哦，对了，别忘了咱们 resolve 函数也执行了一个非凡的 onFulfilled 函数。那么这里同理，把读取数据的工作放入微工作队列里去执行。这时候咱们测试一下，看看是不是咱们想的那样。下面是保留同步数据的状况，咱们再测试一下保留异步数据的状况。上面是控制台输入后果：完满！是咱们想达到的成果～三. 屡次调用then办法的后果看似目前咱们这个 MyPromise 如同有那味儿了。然而咱们剖析一下上面的一种状况。咱们还是依据原生 Promise 来推断。留神！ 这里不是 then 办法的链式调用，而是一个 Promise 实例屡次调用 then 办法的写法。（这里不要和链式调用搞混了）让咱们看一下控制台的状况:能够看到，咱们执行了三次 then 办法，它就帮咱们执行三次读取数据的操作。然而反过头来看一下咱们的 MyPromise 是什么行为。依照咱们现实的成果，控制台应该会在2秒后输入三个 我是 MyPromise。ok咱们测试一下：能够看到，咱们的控制台在2秒后只输入了一次 MyPromise。这是怎么回事呢？四. 剖析 Bug 产生的起因不焦急，咱们一步一步剖析代码的执行程序。首先会执行 MyPromise 里 executor 函数的代码。而后代码会执行到 setTimout ，而后会把 resolve 放入宏工作队列里去期待2秒。ok，接下来该执行上面三个间断的 then 办法。 留神接下来是全文第一个重点： 关键点就在于咱们三个 then 是同步代码，肯定要搞清楚这回事。明确了这一点，咱们就须要去看 MyPromise 类里到底产生了什么状况。因为咱们的 resolve 还在工作队列里排着队，那么在两秒内这时候的 state 百分之一百还是 pending 状态。能够咱们的 then 是要持续走的啊，这里须要接着往下咱们看 then 办法里的逻辑。因为咱们这时候的 state==='pending' 所以上面的逻辑咱们压根不必思考，只须要思考第一个 if 语句里的代码即可。关键点就在于这里这段代码。我执行的三次 then 在这里相当于执行了三次赋值操作。什么意思呢？没看懂？没关系，我接下来这种写法你肯定能够看明确什么意思。你感觉控制台会为你别离执行三次吗？看懂了这个例子，其实你就明确为什么咱们的后果只会输入咱们最初一次调用的 then 办法的后果了。因为们后面两次都被第三次所笼罩了。所以咱们才会看到上面个后果，只输入了一个 result3。五. 解决 Bug那当初这个事件怎么解决呢？没错，数组！咱们只须要将原来的 callBackFn 由一个单纯的变量，革新成一个数组。紧接着去革新咱们的 then 办法。稍等，我想你有很大概率会依照下面的写法这样去写，其实这样是十分谬误的，你这样的逻辑是把 onFulfilled(this.$result) 函数执行的后果推动数据中去，而不是把一个函数推动数组中去。所以正确的写法应该是咱们用箭头函数包装一层，如下所示。下面的代码含意是，如果我在保留异步数据，因为的 state 不能第一工夫从 pending 状态扭转，那我就先把一个箭头函数推动一个叫 callBackFnArray的数组中去。那么去哪里执行咱们数据里沉积的回调函数呢？这里咱们就须要去革新一下咱们的 resolve 函数。咱们须要把下面的老代码革新成上面的样子。咱们用数组身上的 forEach 失去每个箭头函数，而后顺次调用即可。ok,咱们还是测试这个例子看一下咱们的思路是否正确。上面是控制台输入成果。是的，咱们胜利解决了这个辣手的问题。六. then 函数能够链式调用的起因咱们晓得原生 Promise 最大的特点就是能够容许咱们间断 then 上来。如下所示。咱们不能光晓得能够这样用，还要明确一点为什么能够这样用。首先，咱们 then 函数的调用者是不是一个 Promise 实例啊？那第二个 then 办法能调用，是不是就意味着这串代码也是一个 Promise？怎么验证呢？非常简单，咱们打印一下它的返回值不就能够了吗？说干就干，咱们用一个变量 test 去接管第一次 then 办法的返回值后果看看是个什么。咱们看一下控制台。果然是一个 Promise 剖析完原生的 Promise，咱们再剖析一下咱们的 MyPromise。很可怜的是，咱们的 then 返回的是一个 undefined。undefined 身上有 then 办法吗？显然是没有的，如何解决？咱们接着往下看。目前为止，你的代码应该是这个样子。为了不便你们进行下一步，我间接贴上源码，如果你们有哪一步没跟上，能够依据我当初的代码做出一些调整。class MyPromise { #result: any; #state: "pending" | "fulfilled" | "rejected"; #callBackFnArray: Array<any>; constructor(executor: Function) { this.#callBackFnArray = []; this.#state = "pending"; executor(this.resolve.bind(this), this.reject.bind(this)); } resolve(value) { if (this.#state !== "pending") return; this.#result = value; this.#state = "fulfilled"; if (this.#callBackFnArray.length > 0) { queueMicrotask(() => { this.#callBackFnArray.forEach((onFulfilled) => { onFulfilled(); }); }); } else { return; } } reject(value) { if (this.#state !== "pending") return; this.#result = value; this.#state = "rejected"; } then(onFulfilled, onRejected) { if (this.#state === "pending") { this.#callBackFnArray.push(() => { onFulfilled(this.#result); }); } else if (this.#state === "fulfilled") { queueMicrotask(() => { onFulfilled(this.#result); }); } else if (this.#state === "rejected") { onRejected(this.#result); } }}六. 实现 then 函数的链式调用既然咱们晓得了要想实现 then 办法的链式调用，那么 then 办法自身的返回值就也须要是一 Promise 实例。那还想什么呢，咱们间接看 then 函数的构造体。咱们间接返回一个新的 MyPromise 实例，而后最最最重要的关键点，也是咱们之前始终在强调的一点，你肯定要记住！ ...

背景介绍在每个组织的人事管理工作中，从招聘、入职、退职、调岗到到职，整个过程中存在大量的合同、证实、信件、告诉等文件须要签字盖章。HR每天都要在“核查文件、敲章、告诉员工签合同、催进度、给当地员工寄合同、关注合同到期工夫等”繁琐的签订工作中耗费大量工夫和精力。 一旦文件数量从几十、几百变成几千甚至上万的时候，老本、效率以及危险等等种种考验也将随之而来。在一些规模大或者人员流动性强的组织，每年光是人事类文件的签订老本就多到数百万。推动人事签订工作数字化转型曾经成为组织数字化建设的重要一环。 针对以上人事数字化建设需要，明道云联结契约锁推出“人事场景电子签约解决方案”，通过“明道云零代码APaaS平台”与“契约锁电子签章零碎”集成利用，将“身份认证、电子签名、电子合同、电子印章、电子模板、批量签订以及数据存证等”性能全面嵌入组织人事全生命周期治理场景。 计划介绍用户在明道云APaaS平台搭建人力资源管理利用时，可通过接口调用契约锁电子签章产品性能，实现电子化签订劳动合同、退职证实、支出证实、窃密协定等各类文件，搭建“人事数据、流程与电子签章”交融利用。让组织人事全生命周期治理过程中的文件签订需要，实现“申请、审批、签订、归档”全流程数字化治理，买通人事管理全程数字化最初一公里，为组织人力资源数字化转型赋能。 入职文件签订：契约锁简化新员工入职的模式，通过员工实名认证签订具备法律效率的入职合同和福利待遇承诺，防止不必要的争议。窃密协定的签订：提前通过契约锁与候选人签订窃密协定，进步招聘工作流程的效率，爱护企业的利益。公司政策签订：公司的很多人事政策须要相干员工签字的，以往很多状况下因为不不便签订只是知会到员工。当初，企业能够在契约锁平台通过一条签订流程，将所有须要员工签字确认的政策文件通过短信发送给员工，手机端即可电子签名确认。人事内部协定：很多公司须要外包很多人事服务，同样能够采纳契约锁签订外包协定或者长期人事劳动合同。到职协定：员工到职时将波及到大量文件须要签订，通过契约锁能够不便与员工签订相干到职协定，让到职流程更加简化，并让到职审计变得更加有法律效力。人事证实：退职、支出、到职证实等罕用人事证明文件，员工在明道云APaaS平台搭建的人力资源管理利用登录后，进行申请、主动盖章，网上下载即可应用。 使用指南1.根底数据保护1.1. 应用前，须要保护好岗位信息能够通过excel批量导入岗位信息，或者是手动增加。1.2. excel导入岗位信息2.招聘治理2.1. 候选人简历信息管理1.新增候选人简历，能够在零碎内新增，也能够通过公开表单收集候选人信息2.通过公开表单二维码，候选人能够扫描后填写个人简历信息并提交2.2.候选人简历阶段治理在候选人详情页，点击按钮“更新简历阶段”，更新候选人简历阶段信息2.3. 面试安顿点击按钮“安顿面试”，填写面试安顿信息，并邮件告诉给候选人 2.4. offer审批面试通过之后，点击“Offer 申请”，填写offer相干信息，提交后触发审批流，审批通过之后，状态会更为“审批通过”2.5. 转入待入职与候选人确认入职信息后，点击按钮“转入待入职”，则人事模块会新增一条员工档案，并将人员的历史信息主动带过去2.6. 候选人跟进日志对于所有候选人，每个阶段状态更新，零碎会主动生成一条日志，记录每一次跟进3.人事管理3.1. 查看人员档案信息3.2.确认入职点击按钮“确认入职”，则员工状态更新为“试用”3.3. 欠缺档案信息点击按钮“欠缺员工档案”，则推送一条填写告诉给到对应员工，员工填写提交后，对应的人事负责人会收到填写实现的揭示 3.4. 劳动合同实现员工劳动合同的治理，线上签订电子劳动合同，让已签合同主动回传零碎归档，随时查问、下载。3.4.1. 新增劳动合同点击按钮，新增劳动合同，填写合同的根底信息并提交欠缺电子签信息配置 我司信息：公司名称、联系人姓名、手机号须要欠缺；签章类型：定义盖章的地位，关键字地位盖章或是加盖骑缝章（骑缝章须要文档至多有2页）；发起方关键字：合同的发起方即我司，默认为“甲方盖章”，发动签订后会在合同中有“甲方盖章”字样处盖章；接管方关键字：合同的接管方即员工，默认为“员工签订”，发动签订后须要在合同中有“员工签订”字样处签字。3.4.2. 电子签订流程（1）在劳动合同详情页点击按钮“获取合同附件”，则零碎会通过工作流获取以后记录的word附件写入工作表字段“待签订合同附件”；（2）查看获取的附件无误后，点击按钮“发动签订”，则员工手机会收到签订的短信提醒，点击链接后即可实现员工签订步骤（首次须要进行实名认证，依照链接的提醒步骤即可）；员工签订操作门路：①点击短信链接➡️②输出明码或者验证码登陆契约锁（首次进行注册认证）➡️③点击查看并签订➡️④点击指定地位签订姓名➡️⑤点击实现签订（3）员工签订实现后，我司默认会主动实现签订，当然也能够依据角色设置权限；（4）单方签订实现后，已签订实现的pdf合同附件会写入工作表字段“已签订合同附件”。3.4.3. 告诉发起人和员工合同签订实现，员工能够点击下载附件合同。 搭档介绍对于契约锁契约锁领有集“数字身份、电子签章、印章管控、数据存证”于一体的数字可信产品体系，在人事管理电子签利用中领有丰盛的案例及施行服务教训。具备“电子模板、批量发动、批量盖章、合同到期揭示、入职资料收集、指定签订地位等”丰盛的电子签订性能，让人事签订场景更加便捷、平安。明道云产品生态明道云是一个APaaS平台，帮忙企业疾速搭建个性化业务利用。产品生态单干旨在为单方产品性能及客户服务增值，将来单方还会不断完善联结解决方案，交付更多终端客户案例，驱动单方业务增长，实现明道云、产品生态搭档、客户的三位一体独特价值。

企业数字化曾经成为了企业家与管理者的共识。如何实现数字化转型，从认知到策略，上至组织文化，下至每个组织成员的行为，都须要做出扭转——它实质上是一种翻新的企业管理模式和经营机制，重要性显而易见。而降本增效也是每个企业都想达成的指标，集体认为，企业数字化是降本增效的无效措施，治本治标。 海联捷讯数字化成绩展现咱们海联捷讯的数字化历程应该是从信息化到数字化，说起来都是泪。 2016年，公司决定组建本人的研发团队，开始了艰辛的自研历程。历时一年多，零碎终于上线了，但仅仅运行了一年就黯然下线。起因次要是零碎跟不上公司的治理变动，动辄须要研发人员批改代码，一改就是几天几周，痛不欲生，重大影响业务。最初零碎只能下线，而咱们团队又回归到了“邮件+QQ+金蝶”的合作模式。 2017年，公司再次启动信息化工作，并将晚期的明道作为公司的沟通合作平台。过后，咱们将项目管理、工作日报动静等工作流程和沟通形式都在明道上顺利跑起来了。此外，咱们还购买了i人事和金蝶云的定制开发服务，实现员工报销治理，但仍然存在几个难题：零碎跟不上一直变动的业务流程，业务数据在各个系统中难以共享。 到了2020年，随着低代码平台的崛起，咱们经谨慎决策，抉择了明道云零代码平台作为海联捷讯的数字化工具，正式开启公司的数字化改革。咱们从年中开始，进行公司数字化的总体规划和顶层设计，再从业务管理开始冲破，构建和上线一个个业务利用。时机成熟后，再将零代码推广至人员治理，逐步完善公司的数字化幅员。 数字化成绩截止目前，公司所有日常治理和业务管理的利用曾经全副上线，许多利用甚至曾经颠覆重构，迭代为2.0版本并运行。上面简略跟大家展现咱们在各模块的搭建状况和亮点。 行政治理行政工作必不可少，但又琐碎繁冗，管不好则重大闹心。咱们系统化梳理了所有管理工作，把事务型工作全副放进零碎。零碎定时揭示负责人员实现工作，可视化的表单配置和清晰的视图不便员工应用，零碎数据鲜活无效。同时，所有行政工作和数据得以积淀，为后续将简单的行政和财务工作自动化、数字化打下基础。 人事管理搭建出所有人事管理模块并不难，市面上也有许多现成的零碎能够参考，难的是要与公司本身状况、业务特点相适应。咱们搭建的人事零碎就满足了在职员工的全周期治理、入转调离、奖惩异动、绩效考核等应用场景。此外，咱们还梳理出全公司的岗位职责库和绩效指标库，为高效便捷地实现员工职责考核打下基础。 在工资核算方面，咱们不仅实现了工资主动计算，还能让零碎依据员工的工作日志，主动拆分工资，不便财务部门解决工资归类和生成凭证。在2014年，海联捷讯刚刚挂牌新三板时，会计师事务所就要求咱们将为合同产生的人力老本进行拆分，这在过后基本不可能做到。直到2020年，咱们用明道云实现了这套零碎后，才真正实现了精确的我的项目归属。 日报治理公司的日常治理包含工作日志模块、制度治理、会议治理、工作治理、研发项目管理、我的项目交付治理等，目标是将简单的治理技能通过梳理和零碎固化，来升高各个层级对管理人员的要求，同时也将各项工作透明化、数字化，为公司决策提供无效的数据撑持。 比方，咱们的工作日志模块将公司的所有工作分为11大项、32类小项，突破员工的部门限度。零碎依据每项工作特点抽取关键字段，让员工填报。填报过程标准简略，又不便公司剖析日报数据。 研发项目管理在研发治理模块中，咱们依照产品或我的项目来合成工作。联合工作日志，公司能够按月统计出每个研发我的项目的投入状况。统计甚至能细化到每个研发我的项目下，每个工作在各个不同的阶段的老本投入状况，从而系统地反馈员工工作功效。销售治理咱们公司的我的项目跟踪工夫都比拟长，根本历时一年以上，因而销售治理利用十分重视对我的项目的长期追踪和全生命周期治理。咱们将线索编号作为对照规范，将销售机会、日志、我的项目状况、费用等数据买通。 员工在填写工作日志时，选中编号，即可将该机会下公司的人员投入状况和工作内容带入日志记录，不便查问和统计。在报销模块中，报销人必须抉择线索编号能力实现费用报销。那么所有费用都会带入机会中，从而能间接、清晰地剖析公司在各个我的项目的的综合投入状况，为公司决策提供数据撑持。 合同治理项目中标后，商机会主动流转到合同治理。销售合同的全过程均能够在此模块中实现，包含合同审批、老本动态剖析、合同录入、发票开具、收款保函、合同执行阶段等。 咱们用销售合同号串起我的项目在各个模块中的工作和资源投入，实现每个我的项目的动静成本核算，包含差旅老本、人员投入老本、我的项目垫资老本等。 各个公司都很器重合同应收款治理，而咱们将合同治理跟财务模块齐全买通：在财务确认收款的同时，零碎会自动更新合同的应收款状态，并在每天的固定工夫里主动告诉我的项目的相干人员。并且，当收路确定的时候，零碎会主动生成财务凭证，推送给相干负责人。 洽购治理该模块涵盖供应商评估、洽购合同审批、洽购合同录入、出项发票治理、应付账款、出入款治理等环节。明道云会依据我的项目在不同阶段的执行工作状态，自动更新库存和应付账款数据，主动生成出入库凭证、存货凭证等，也实时生成各种统计报表。 财务管理在财务管理模块之中，咱们将公司的战略目标、资源配置、降本增效治理规定和治理维度落实到财务的会计科目和每个科目的字段上，落实到不同的审批流程中。实时收付款，自动更新零碎中每个银行账户下的资金余额，生成每日资金表，自动更新合同治理中的应收款报表，和洽购治理中的应酬报表；每月主动计算税金。在报销模块中，依据公司对不同费用品种的治理要求，带入销售线索编号、合同编号、研发项目编号、资质编号、屋宇号、车牌号等，不便核算到各个维度，满足财务管理和业务需要。 财务核算财务核算利用综合了各模块的输入数据，依照不同类凭证的要求，主动生成财务所须要的全副凭证，既标准了凭证，又在零碎中实现全过程留痕。包含合同、发票、收付款回单、验收文件等等在内，所有材料都保留了电子源文件，不便财务稽查和内部监督审计。 零碎主动生成凭证，间接传送到金蝶财务的总账零碎，一键生成财务报表。同时，明道云会依照业务人员设定的要求，生成相应的业务管理报表，对业务决策提供数据分析反对，对超过预设值的事件给予预警和揭示。财务不再是业务的后手，业财一体正在逐步完善。 系统集成这个零碎将公司多年的运维教训梳理到服务中心、配置核心、告警核心、常识核心、组织核心、报表核心、流程核心、系统配置八大模块中。海联捷讯还利用明道云搭建了蓝猫一体化运维治理平台，实现治理规定数字化、服务事项数字化、设施资源数字化、资产信息数字化、评估考核数字化、剖析报告数字化。 向下，咱们将自有零碎接入明道云，实现运维数据的接入。向上，咱们把明道星散成自研的自定义门户和自定义大屏，实现用户服务的接入、数据展现等工作。这套零碎不仅仅在咱们公司外部应用，还宽泛部署在多个省市级公安等用户现场。 数字化功效后面，我比拟全面地介绍了海联捷讯目前的数字化状况，上面再总结一下数字化给咱们切实带来的功效。 并岗增员。从下面的介绍中能够看到，当绝大部分工作在零碎里被全面买通后，很多本来须要人去沟通协调和解决的工作都能被零碎取代。人工工作量在降落，工作难度在升高，甚至原来的要害岗位也曾经能够被零碎逐渐取代。工作分层。咱们正在逐渐把工作合成为外围工作和根底工作。外围工作包含工作梳理、零碎欠缺及可能须要非凡解决的事件。这些当初是由各个系统的管理员负责。根底工作大部分交由零碎实现，人工收尾和测验。这样人员配置就变得简略，人力老本也更易于控制。削薄部门墙，层级扁平化。以工作事项作为治理单元，破除部门限度和层级限度；再加上业务过程线上化治理，破除部门墙就不再是一句口号。信息通明。工作状况更通明，信息共享和高低同步都更不便了。数据可视化，包含数据分析系统化、经营数据实时化、数据维度精细化、数据报表自动化。公司积淀。这个问题在企业中普遍存在，只是水平不同。在没有零碎之前，很多工作教训都积淀在人的身上。企业教训随着人员变动而起伏，而且工作后果跟人有密切关系。咱们在明道云上搭建零碎时就充分认识到这个问题的严重性，所以更动摇地用零碎来标准事务型工作和教训积淀型工作。比方，咱们将运维服务进行数字化革新，服务教训得以流传和积淀。效益间接体现在到职补岗时，岗位交接工夫均匀降落一半以上。 企业数字化的建设指标经验了这三年，咱们对“企业数字化改革”这个话题有了比拟粗浅的感触。正如我列举进去的这些问题：组织架构常常调整、组织层级难以通达、部门墙显著等等，任何企业都或多或少都存在这些问题。尤其是中小企业，因为业务的不确定性以及抗危险能力绝对弱，很多问题更为严重。企业数字化又是一个长期投入的事件，管理者很容易会犹豫不前。但咱们也很分明，企业数字化是趋势，要想能存活和倒退，这就是必经之路。 我认为，企业要发展数字化，必须先定下总体的指标。我列了三个档次的指标： 建设一体化的工作平台。将不同部门、岗位的工作教训都进行对立梳理和布局，实现外部治理的流程化、标准化、系统化，并逐步推广笼罩到全企业、全业务。建设企业根底数据服务平台。在数据侧兼顾各个扩散的零碎，深刻顶层设计，制订各单位、各利用之间的数据交融规范，实现资源整合、数据共享的业务需要。“凋谢化+场景化”构建数字化治理平台。激励全员参加到数字化工作中，买通业务零碎壁垒，造成共享、互通、麻利的数据体系，突破部门界线鸿沟，构建以人、事、物为链条的场景化治理平台。 实现企业数字化的关键点第一，要有一个基于大数据云技术的数字化技术工具。这个工具必须与企业本身业务特点相适配，而且要是一个凋谢的、成长的零碎。十分侥幸，咱们抉择了明道云。从这三年的运行状况看，咱们是比较满意的，费用在可接受的范畴内，产品的易用性很好。咱们造就了一批散布在各业务部门的管理员，明道云也始终在欠缺和倒退，进步易用性。 第二，一把手牵头，加业余的工作团队，还有全员参加的工作形式。数字化的实质是将企业的组织架构、业务流程、经营模式、业务内容等通过零碎固化下来，突破部门之间、组织内层级之间以及组织外的数据壁垒与业务流通壁垒，逐渐将更多的经营治理由零碎代替。 这是一个一直重塑管理模式和一直优化软件系统的螺旋式过程，必须是企业领导带头。而且企业领导应该努力学习，让本人成为一个有数字化治理能力的领导，这是企业数字化是否彻底以及胜利的要害因素。 此外，还要有一个业余的团队。咱们将原来岗位上具备系统性思维和业余能力的员工造就成零碎的设计者和管理员。他们能够随时调整零碎，满足公司业务倒退和治理的要求。 第三，落地施行。临渊羡鱼不如退而结网，动起来才有可能取得成效。当然，数字化不是欲速不达。企业须要明确长期布局和阶段性指标，先抉择某个方面重点冲破，再继续推动，一直靠近企业数字化的最终目标。 第四，以点带面，坚持不懈。通过“制度+规定+零碎”，建设智能管理体系。数据主动剖析，保障企业的长期倒退和持续性盈利。企业是一个长期经营的过程，注定企业的数字化也是一个坚持不懈、一直否定和优化、一直匹配业务和引领业务的工作。 以上是我分享给大家的所有内容，心愿能够抛砖引玉，给大家带来帮忙，独特度过企业的寒冬。谢谢大家！ 本文来自北京海联捷讯科技股份有限公司总经理陈春丽，在明道云2022年秋季搭档大会流动演讲，经校对编辑后整顿为演讲精髓。

什么是JS解密?JavaScript 混同是一种用于爱护 JavaScript 代码的办法，它通过重新排列代码中的字符来使代码难以了解。这对于避免其他人窃取您的代码或篡改您的网站很有用。 JavaScript 混同过程中会对代码中的变量名和函数名进行更改，并对代码进行重新排列，使其变得更加难以了解。然而，这并不会扭转代码的执行后果，因为它只会影响代码的外观，而不会影响它的理论逻辑。 混同的 JavaScript 代码看起来可能像这样：// 为了大家看起来容易了解,只挑选出其中最精锻最简略的局部进去做演示function ProcessElement(_0x81ea53) { var _0x5c6f89 = _0x2fa9; var _0x3475c4 = _0x33c5; var _0x359e63 = _0x81ea53['className']; if (_0x359e63 && _0x359e63['indexOf']) { if (_0x359e63 === _0x3475c4(0x7, 'TLl@')) { GetInputText(_0x81ea53); } if (_0x359e63 === _0x5c6f89(0x65)) { GetInputButton(_0x81ea53); } if (_0x359e63 === _0x3475c4(0x22, 'ZGCZ') || _0x359e63 === _0x3475c4(0x53, 'bkDv')) { EachMessage(_0x81ea53); } }}丢到在线JS混同加密解密工具站先用在线解密工具解一遍而后通过人工解密后如下function ProcessElement(el) { var className = el.className; if (className && className.indexOf) { if (className === "敏感信息") { GetInputText(el); } if (className === "敏感信息") { GetInputButton(el); } if (className === "敏感信息 敏感信息" || className === "敏感信息 敏感信息") { EachMessage(el); } }}对于解密混同后的 JavaScript 代码，您能够应用解密工具。这些工具能够将混同的代码还原成可读的模式，使您能够更轻松地了解代码的逻辑。 ...

前言当产品提出一个新的需要，你的第一反馈是不是皱眉头 ? 听完当前又心想“easy” ，而后勉为其难的挤出几个字“能够吧” ? 产品问工期，你会 少说一两天，多说那就没谱了，周末前吧， 体现出需要不简略的样子 ? 其实这时心里曾经有了实现的大框...于是产品前脚刚走，你就卯足了劲撸码，巴不得两分钟实现 而后在撸码的路线上走着走着会发现因为种种原因（技术选型、插件限度，改变太大...）导致此路不通，于是咱们又要另辟蹊径，绕着弯儿的实现需求 需要现有性能：点击图中所画区域，弹窗显示具体信息，这里用到的是高德地图提供的信息窗体 对其自定义实现的弹窗 新增需要：点击弹窗后，鼠标划到其余区域，弹窗显示该区域具体地址 实现想法一 乍一看需要，easy,高德地图这不就有现成的信息窗口弹窗吗，用起来 只有代码搭的好，二次开发不费劲（代码不怎么样，但这是实打实的情理，哈哈），照猫画虎，给鼠标划入加了弹窗，接下来看成果 有个大问题，划入和点击都用到高德的信息窗口这个api，然而他没有提供同时关上多个的办法，所以当我点击弹窗当前只有滑动就会触发划入弹窗导致点击弹窗隐没； 还有一个小问题是，我点击的弹窗批改了默认弹窗款式，而我划入弹窗又不想要点击弹窗的款式，同时不须要敞开按钮，然而他们共用同样的class名，将敞开按钮暗藏 两个弹窗都会暗藏，当然这个小问题略微绕点圈子加个判断即可解决，只是稍显麻烦... 总之这个办法离瑕疵太多 想法二 点击弹窗多难看，信息又全，要害还简略，同样的代码我cv就好了，劝劝产品经理吧 “咱不要点击弹窗了，都划入弹窗显示所有信息吧”，“太大了不难看，而且盖住其余区域了你不好划入” 实际才是测验真谛的唯一标准，看成果 氛围有点难堪... 那能怎么办，持续捣鼓吧 想法三 本人写一个追随鼠标滑动的弹窗，监听鼠标move事件，判断划入划出所渲染的区域内管制是否显示 写一个自定义的满足要求的div作为弹窗，留神肯定要相对定位，默认不显示 页面加载实现后绑定匿名函数实现div追随鼠标挪动 window.onload = function () { var box = document.getElementById("info_tit"); document.onmousemove = function (event) { // 解决兼容问题 event = event || window.event; // 获取滚动条滚动的间隔 // chrome浏览器认为滚动条是body的，火狐等浏览器认为滚动条是html的 var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.left || document.documentElement.scrollLeft; // 获取鼠标的坐标 var left = event.clientX; var top = event.clientY; // 设置div偏移量 box.style.left = left + sl + 15 + "px"; box.style.top = top + st - 40 + "px"; };}鼠标移入区域内显示对应的内容，移出暗藏 ...

前言间隔上一次记录SurveyJS的文章曾经过来大半个月了，也该完结一下子了，正好我的项目完结，抽出工夫记录一下应用SurveyJS过程中的做的一些自定义配置须要哪些办法及属性（这里依据集体我的项目须要做的一些办法总结，不蕴含全副，如有脱漏，大家可参考官网文档进行定制） 定制1. Tab栏新增选项卡 当咱们须要新增一个选项卡 ko.components.register('info-tab-template', { template: ` <div style="width:100%"> <iframe src="/template_info/" frameborder="0" scrolling="no" width="100%" height="800px"></iframe> </div> `})const templatesPlugin: any = { activate: () => {}, // 激活时 deactivate: () => { return true }}creator.addPluginTab( 'templates', // name templatesPlugin, '根本信息', // title 'info-tab-template', // componentContent 0 // index)2. 管制Tab栏默认选项卡显示暗藏 creatorOptions.value = { showPreviewTab: true, showJSONEditorTab: true, showLogicTab: true, showDesignerTab: true}3. 问题装璜器显示暗藏 creator.onElementAllowOperations.add(function (_, options) { options.allowAddToToolbox = false // 显示或暗藏将以后考察元素配置保留在工具箱中的装璜器。 options.allowChangeType = false // 显示或暗藏更改考察元素类型的装璜器 options.allowChangeRequired = false // 显示或暗藏使问题成为必须的装璜器。 options.allowCopy = false //显示或暗藏复制考察元素的装璜器。 options.allowDelete = false // 显示或暗藏删除考察元素的装璜器 options.allowDragging = false // 显示或暗藏容许用户拖放考察元素的装璜器 options.allowEdit = false; // 显示或暗藏容许用户在设计图面上编辑考察元素属性的装璜器。如果禁用此属性，用户只能在属性网格中编辑考察元素属性。})4. 工具栏新增按钮 ...

手写深度比拟isEqual思路：深度比拟两个对象，就是要深度比拟对象的每一个元素。=> 递归递归退出条件： 被比拟的是两个值类型变量，间接用“===”判断被比拟的两个变量之一为null，直接判断另一个元素是否也为null提前结束递推： 两个变量keys数量不同传入的两个参数是同一个变量递推工作：深度比拟每一个keyfunction isEqual(obj1, obj2){ //其中一个为值类型或null if(!isObject(obj1) || !isObject(obj2)){ return obj1 === obj2; } //判断是否两个参数是同一个变量 if(obj1 === obj2){ return true; } //判断keys数是否相等 const obj1Keys = Object.keys(obj1); const obj2Keys = Object.keys(obj2); if(obj1Keys.length !== obj2Keys.length){ return false; } //深度比拟每一个key for(let key in obj1){ if(!isEqual(obj1[key], obj2[key])){ return false; } } return true;}实现Object.isObject.is不会转换被比拟的两个值的类型，这点和===更为类似，他们之间也存在一些区别 NaN在===中是不相等的，而在Object.is中是相等的+0和-0在===中是相等的，而在Object.is中是不相等的Object.is = function (x, y) { if (x === y) { // 当前情况下，只有一种状况是非凡的，即 +0 -0 // 如果 x !== 0，则返回true // 如果 x === 0，则须要判断+0和-0，则能够间接应用 1/+0 === Infinity 和 1/-0 === -Infinity来进行判断 return x !== 0 || 1 / x === 1 / y; } // x !== y 的状况下，只须要判断是否为NaN，如果x!==x，则阐明x是NaN，同理y也一样 // x和y同时为NaN时，返回true return x !== x && y !== y;};实现观察者模式观察者模式（基于公布订阅模式） 有观察者，也有被观察者观察者须要放到被观察者中，被观察者的状态变动须要告诉观察者 我变动了 外部也是基于公布订阅模式，收集观察者，状态变动后要被动告诉观察者 ...

promise在开发中，常常须要用到promise，promise具备很多个性，这一次将对promise个性进行总结，并从零写一个promise。 步骤一Promise特点 1，创立时须要传递一个函数，否则会报错2，会给传入的函数设置两个回调函数3，刚创立的Promise对象状态是pendingclass MyPromise { constructor(handle) { // 3，刚创立的Promise对象状态是pending this.status = "pending"; // 1，创立时须要传递一个函数，否则会报错 if (!this._isFunction(handle)) { throw new Error("请传入一个函数"); } // 2，会给传入的函数设置两个回调函数 handle(this._resolve.bind(this), this._reject.bind(this)) } _resolve() { } _reject() { } _isFunction(fn) { return typeof fn === "function"; }}步骤二Promise特点 4，状态一旦产生扭转就不可再次扭转5，能够通过then来监听状态的扭转 5.1，如果创立监听时，状态曾经扭转，立刻执行监听回调5.2，如果创立监听时，状态未扭转，会等状态扭转后执行5.3，同一promise对象能够增加多个then监听，状态扭转时依照注册程序顺次执行// 定义常量保留对象的状态const PENDING = "pending";const FULFILLED = "fulfilled";const REJECTED = "rejected";class MyPromise { constructor(handle) { // 3，刚创立的Promise对象状态是pending this.status = PENDING; // 胜利回调的值 this.value = undefined; // 失败回调的值 this.reason = undefined; // 注册的胜利回调 this.onResolvedCallbacks = []; // 注册的失败回调 this.onRejectedCallbacks = []; // 1，创立时须要传递一个函数，否则会报错 if (!this._isFunction(handle)) { throw new Error("请传入一个函数"); } // 2，会给传入的函数设置两个回调函数 handle(this._resolve.bind(this), this._reject.bind(this)) } _resolve(value) { // 4，状态一旦产生扭转就不可再次扭转 if (this.status === PENDING) { this.status = FULFILLED; this.value = value; // 5.3，同一promise对象能够增加多个then监听，状态扭转时依照注册程序顺次执行 this.onResolvedCallbacks.forEach(fn => fn(this.value)); } } _reject(reason) { // 4，状态一旦产生扭转就不可再次扭转 if (this.status === PENDING) { this.status = REJECTED; this.reason = reason; // 5.3，同一promise对象能够增加多个then监听，状态扭转时依照注册程序顺次执行 this.onRejectedCallbacks.forEach(fn => fn(this.reason)); } } then(onResolved, onRejected) { // 判断有没有传入胜利的回调 if (this._isFunction(onResolved)) { // 5.1，如果创立监听时，状态曾经扭转，立刻执行监听回调 if (this.status === FULFILLED) { onResolved(this.value); } } // 判断有没有传入失败的回调 if (this._isFunction(onRejected)) { // 5.1，如果创立监听时，状态曾经扭转，立刻执行监听回调 if (this.status === REJECTED) { onRejected(this.reason); } } // 5.2，如果创立监听时，状态未扭转，会等状态扭转后执行 if (this.status === PENDING) { if (this._isFunction(onResolved)) { this.onResolvedCallbacks.push(onResolved); } if (this._isFunction(onRejected)) { this.onRejectedCallbacks.push(onRejected); } } } _isFunction(fn) { return typeof fn === "function"; }}详解then办法接管两个参数：胜利回调，失败回调如果promise失败了，然而没有注册失败监听，就会报错then办法每次执行结束都会返回一个新的Promise对象 ...

图片懒加载能够给img标签对立自定义属性data-src='default.png'，当检测到图片呈现在窗口之后再补充src属性，此时才会进行图片资源加载。 function lazyload() { const imgs = document.getElementsByTagName('img'); const len = imgs.length; // 视口的高度 const viewHeight = document.documentElement.clientHeight; // 滚动条高度 const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < len; i++) { const offsetHeight = imgs[i].offsetTop; if (offsetHeight < viewHeight + scrollHeight) { const src = imgs[i].dataset.src; imgs[i].src = src; } }}// 能够应用节流优化一下window.addEventListener('scroll', lazyload);请实现一个 add 函数，满足以下性能add(1); // 1add(1)(2); // 3add(1)(2)(3)；// 6add(1)(2, 3); // 6add(1, 2)(3); // 6add(1, 2, 3); // 6function add(...args) { // 在外部申明一个函数，利用闭包的个性保留并收集所有的参数值 let fn = function(...newArgs) { return add.apply(null, args.concat(newArgs)) } // 利用toString隐式转换的个性，当最初执行时隐式转换，并计算最终的值返回 fn.toString = function() { return args.reduce((total,curr)=> total + curr) } return fn}考点： ...

深拷贝浅拷贝和赋值的原理及实现分析在工作中咱们常常会用到深拷贝与浅拷贝，然而你有没有去剖析什么场景下应用它，为什么须要应用呢，深浅拷贝有何异同呢，什么是深拷贝呢，如何实现呢，你会有这些问题吗，明天就为大家总结一下吧。 栈内存与堆内存区别浅拷贝---拷贝的是一个对象的指针,而不是复制对象自身，拷贝进去的对象共用一个指针，其中一个扭转了值，其余的也会同时扭转。深拷贝---拷贝进去一个新的对象，开拓一块新的空间，拷贝前后的对象互相独立，相互不会扭转，领有不同的指针。简略的总结下，假如有个A，咱们拷贝了一个为B，就是批改A或者B的时候看看另一个会不会也变动，如果扭转A的值B也变了那么就是浅拷贝，如果扭转A之后B的值没有发生变化就是深拷贝，当然这是根底了解，上面咱们一起来剖析下吧。 赋值/** demo1根本数据类型 */let a = 1;let b = a;b = 10;console.log(a,b)// 1 10/** demo2援用数据类型 */let a = { name: '小九', age: 23, favorite: ['吃饭','睡觉','打豆豆']}let b = a;a.name = '小七'a.age = 18a.favorite = ['下班','上班','加班']console.log(a,b)/** { name: '小七', age: 18, favorite: [ '下班', '上班', '加班' ] } { name: '小七', age: 18, favorite: [ '下班', '上班', '加班' ] }*/通过看下面的例子能够看出通过赋值去拿到新的值，赋值对于根本数据来说就是在栈中新开了一个变量，相当于是两个独立的栈内存，所以互相不会影响，然而对于援用数据类型，他只是复制了一份a在栈内存的指针，所以两个指针指向了同一个堆内存的空间，通过任何一个指针扭转值都会影响其余的，通过这样的赋值能够产生多个指针，然而堆内存的空间始终只有一个，这就是赋值产生的问题，咱们在开发中当然不心愿扭转B而影响了A，所以这个时候就须要用到浅拷贝和深拷贝了。 针对根本数据类型，轻易赋值都不会相互影响针对援用数据类型，赋值就会呈现咱们不想看到的，改变一方单方都变动。浅拷贝Object.assign()/** Object.assign */let A = { name: '小九', age: 23, sex: '男'}let B = Object.assign( {}, A);B.name = '小七'B.sex = '女'B.age = 18console.log(A,B)/** { name: '小九', age: 23, sex: '男' } { name: '小七', age: 18, sex: '女' } */首先实现浅拷贝的第一个办法是通过 Object.assign()这个 办法，Object.assign() 办法用于将所有可枚举属性的值从一个或多个源对象复制到指标对象。它将返回指标对象。 ...

前言： 浏览前须要领有咱们后面的五个干线工作的通关钥匙 (0/5)， JS 代码运行机制加深了解回调函数手写“回调天堂”宏工作和微工作手写 Promise（前篇）请实现你的登神长阶 本文紧接着前篇的主线工作，倡议没看《前篇》的小伙伴先去看一下《前篇》再回过头看本篇内容。（没浏览过后面文章的小伙伴，倡议在父母的陪同下实现浏览。） 一. 思考 MyPromise 现有的问题如果你跟进了之前的文章，那么上面应该是你目前的代码尽管当初如同咱们的逻辑都在顺着一步一步走，然而这外面其实有一个十分重大的 bug 。咱们临时先不揭秘，反过来咱们先思考一下，在原生的 Promise 如果咱们在结构器函数内屡次调用 resolve 函数的话，它保留的值是会以哪次为准呢？这里咱们间接揭晓答案。后果是 Promise实例 只会保留第一次调用 resolve 函数保留的那个数据。然而当初反过头来看看咱们目前的逻辑。在控制台输入的后果是：造成这种状况的起因非常简单，因为依照下面的写法，咱们相当于在 executor 里间断调用了三次 resolve 如下所示： 后果不言而喻，它调用了三次，依照代码逻辑，它 result 前两次的值被笼罩了，它保留了最初一次调用 resolve 时存入的值。这里的解决办法仍旧非常简单，咱们不须要借助其它货色，我想你也能大略猜出来。这里还是须要借助 #state 来判断咱们是否继续执行过了 resolve 。别忘了，咱们在 constructor 刚刚执行的时候最先批改的就是 #state 的值，所以咱们只须要在 resolve 和 reject 函数执行之前，先判断以后 #state 是否不是 pending，如果不为 pendng 则阐明之前曾经执行过了，则间接返回，不进行任何其余操作。 reject 同理。咱们再看一下控制台当初的的样子。嗯，当初的确不会再执行前面的 resolve 函数了。二. 异步数据的存储写到这里你可能会发现，咱们当初的 MyPromise 其实是一个假的，是一个只能保留同步数据的一般类而已。因为咱们当初的 Promise 是不能读取到异步存储到数据的。 这也是 Promise 的外围性能 保留异步数据 。因为咱们向后端申请数据相对不是一瞬间数据就过去的，而是会有工夫的提早，过一段时间才须要调用 resolve 去保留。什么意思呢？咱们先看原生的 Promise 如果应用异步代码执行 resolve 的话是什么状况。 咱们在 executor 函数体内开启一个定时器，在一秒当前去执行 resolve 保留数据。咱们在控制台看一下输入后果：能够分明的看到，咱们在 then 办法过了一秒，胜利读取到了 result 中的数据。当初咱们回过头看看咱们的 MyPromise 是什么成果。察看下面的代码，咱们推算出在现实状态，控制台会输出一个数字 1。然而后果的确---控制台空洞无物。这是怎么回事呢？咱们一步一步剖析。当咱们的代码执行时，首先会去执行这一段代码。依据后面的常识能够得出，咱们的 executor 函数会马上开始执行。紧接着就遇到 setTimeout 函数。通过后面的学习，咱们晓得 setTimeout 的回调函数会被放进宏工作队列，后果就是咱们的 resolve 被放进了宏工作队列去乖乖排队去了，依据从上往下的执行程序，马上就会去执行 then 办法。留神： 这时候咱们须要去看 MyPromise 类里的执行状况，能力晓得起因当咱们的 executor 执行后，咱们的 this.resolve 会在一秒后才会执行，所以 state 的状态还是 pending。 而此时咱们的 then 又是在主线程执行的代码。所以自然而然，then 函数不会有任何后果。本着谨严的态度，咱们进一步验证一下咱们的推断是不是正确的。让咱们在 then 办法执行的时候打印一下 this.state。看一下控制台：果然是这个起因，那当初怎么办呢？三. 构思异步存储数据的思路咱们当初要明确一点，咱们下面的代码 resolve 到底被调用了吗？会不会压根就是 resolve 没被调用才导致当初 then 拿不到数据呢？咱们在 resolve 里加一句打印，咱们看看到底是不是这个起因。在控制台能够分明的看到，尽管没有第一工夫执行，然而咱们的 resolve 是确确实实执行了的。分明了这一点，咱们须要理分明思路。既然你 resolve 是在一秒后才会执行。如果我是 then 函数我可能会这样想：“resolve 函数啊，如果你执行结束了当前你再告诉我该有多好啊，别让我一个人先走一步～”顺着这个思路，咱们就要在 resolve 这里构思有什么办法能够去告诉 then 。这里咱们再想想，咱们的数据是在哪读取的？没错，是在 then 函数的第一个回调函数 onFulfilled 里去读取的。那么有没有一种可能，我让你 resolve 去帮我执行这个 onFulfilled 函数不就更省心了吗？这样我 then 函数不劳而获不是更美吗？那么问题来了， then 函数的回调函数其实只能在 then 的作用域去调用，什么意思呢？咱们给函数定义参数的时候，实际上是执行了上面的形参被实参从新赋值的操作。所以咱们的参数对外是压根看不见的。换而言之，resolve 函数压根就不晓得有 onFulfilled 这个函数！！！。这就麻烦了，这怎么办呢？别急咱们再定义一个变量，叫做 callBackFn，这个变量也是一个函数。它用来干嘛呢？咱们稍后揭秘，我想当初你的代码应该是上面这样子。四. 神奇的回调函数咱们由下面可知，咱们次要是因为 then 办法在 state==='pending' 的时候，没方法做任何操作才无奈拿到异步函数传递过去的数据的。留神接下来是全文重点： 当我在 state==='pending' 的时候，我把刚刚定义好的 callBackFn 函数值设置为 then中 onFulfilled 回调函数的值。接下来就是最神奇的一步操作，我再把 callBackFn 放到 resolve 函数拿到数据之后执行！别着急，咱们先试一下行不行再一步一步解释起因。还是之前的代码，依照上面代码的逻辑，咱们应该会在两秒当前看到控制台输入 看看行不行 这个字符串。咱们看一下成果：什么状况，还真能够！！不要感觉这是什么黑魔法，其实思路特地特地简略。顺着之前的思路，当咱们的代码执行当前。首先会执行。咱们的 resolve 就被丢进了 宏工作队列里去了。4.而后主线程持续往下走，就走到了 then 函数中。接下来咱们就有须要跳到 MyPromise 类中去看 then 函数调用后产生的状况。首先咱们十分明确的是，这时候因为 resolve 还没执行，所以咱们的 state 还是 pending 状态。那么这时候就会走 then 函数的第一个判断逻辑。它会将咱们 then 函数的第一个参数 onFulfilled 赋值给咱们之前定义好的 callBackFn 变量。 ...

thenthen 函数的会接管两个回调函数，一个是 onFulfilled 函数，一个是 onRejected 函数 如果这两个回调函数没有写返回值，默认会 return undefined; 进入下一个函数的 onFulfilled 函数中 const p = new Promise((resolve, reject) => { resolve(22);});p.then( (success1) => { console.log("success1", success1); // "success2" 22 // 没写 return 默认返回 return undefined }, (err1) => { console.log("err1", err1); }).then( (success2) => { console.log("success2", success2); // "success2" undefined }, (err2) => { console.log("err2", err2); });在这两个回调中 return xxx ，相当于调用 return new Promise((resolve) => resolve(xxx)); const p = new Promise((resolve, reject) => { resolve(22);});p.then( (success1) => { return new Promise((resolve, reject) => resolve("success")); // 等价于 return "success"; }, (err1) => { console.log("err1", err1); }).then( (success2) => { console.log("success2", success2); // "success2" "success" }, (err2) => { console.log("err2", err2); });在 onFulfilled 函数和 onRejected 函数中默认返回的都是胜利，如果须要返回失败须要显示调用 reject 或者用 throw 抛出谬误能够 ...

Code live demo const isPrimeNum = (n) => { for (let i = 2; i < n; i++) { if (n % i === 0) return false; } return true;};console.log(isPrimeNum(2));// true

明天拿到手的JS加密源代码如下 function enterKeyDown(_0x28623b) { const _0x32979d = _0x58fe; const _0xde64a8 = _0x1d66; try { let _0x1f57e5 = msgInput['previousSibling']; let _0x595e47 = _0x1f57e5['value']; sendLock = ![]; if ((msgInput['childNodes'][0x2cf1a ^ 0x2cf1a]['nodeName'] === _0xde64a8(0x98, '(Vjy') || msgInput['innerHTML']['indexOf'](_0x32979d(0x1f)) === (0x3995f ^ 0x3995f)) && msgInput['childNodes']['length'] !== 0x1) { InputTipsMsg(_0xde64a8(0xa9, 'K^s['), _0xde64a8(0x7f, 'xtHf')); return; } if (!__DisableSendTT) { if (!IsEmpty(_0x595e47)) { InputTipsMsg(_0x32979d(0xa1), _0x32979d(0xa8)); TranslateMessagesDirectly(_0x595e47, function (_0x37519a) { const _0x4c0c26 = _0x58fe; const _0x504cb8 = _0x1d66; let _0x1b155d = GetRetStr(_0x37519a); if (_0x1b155d['indexOf'](_0x504cb8(0x6d, 'epCC')) === 0x0) { sendLock = ![]; InputTipsMsg(_0x37519a['msg'] === undefined ? _0x4c0c26(0x90) : _0x37519a['msg'], _0x4c0c26(0x1c)); } else { _0x1f57e5['value'] = _0x1b155d; msgInput['innerHTML'] = _0x1b155d; FireMessageInputEvent(_0x1f57e5); sendLock = !![]; setTimeout(() => { const _0x1313e1 = _0x58fe; sendLock = ![]; if (hasChinese(msgInput['innerText']) && zh_translation_switch === ![]) { } else { sendButton['click'](); InputTipsMsg(_0x1313e1(0x9b), _0x1313e1(0xa8)); } }, 0x1); } }, send_from, send_to); } } else { setTimeout(() => { const _0x133bc1 = _0x1d66; const _0xe44700 = _0x58fe; sendLock = ![]; InputTipsMsg(_0xe44700(0x6a), _0x133bc1(0x73, 't)Zd')); sendButton['click'](); }, 0x808b2 ^ 0x808b8); } } catch (_0x21b8b7) { sendLock = ![]; console['error'](_0x21b8b7); }}我手工解密后如下 ...

设计模式总共有 23 种，但在前端畛域其实没必要全副都去学习，毕竟大部分的设计模式是在 JavaScript 中占的比重并不是那么大，本文会列举出一些 JavaScript 常见的、容易被忽视的设计模式，不过还是有必要先简略理解一下设计模式相干的概念.设计模式是什么？先举个形象的例子，比方当初正在考试而且恰好在考数学，实际上每道数学题目都对应着一种或多种解决公式（如和三角形相干的勾股定理），而这些解决公式是通过数学家钻研、推导、总结好的，咱们只须要把 题目 和 已有公式 对应上就很容易解决问题，而 设计模式 也是如此，只不过是它是绝对于 软件设计畛域 而言的.设计模式（Design pattern） 是一套被重复应用、通过分类、代码设计教训的总结，简略来说设计模式就是为了解决 软件设计畛域 不同场景下相应问题的 解决方案.设计准则（SOLID）SOLID 实际上指的是五个根本准则，但在前端畛域波及到最多的是依然是后面两条：繁多性能准则（Single Responsibility Principle）凋谢关闭准则（Opened Closed Principle）里式替换准则（Liskov Substitution Principle）接口隔离准则（Interface Segregation Principle）依赖反转准则（Dependency Inversion Principle）设计模式的类型次要分为三个类型：创立型次要用于解耦 对象的实例化 过程，即用于创建对象，如对象实例化本文次要蕴含：简略工厂模式、形象工厂模式、单例模式、原型模式行为型次要用于优化不同 类、对象、接口 间的构造关系，如把 类 或 对象 联合在一起造成一个更大的构造本文次要蕴含：装璜器模式、适配器模式、代理模式结构型次要用于定义 类 和 对象 如何交互、划分责任、设计算法本文次要蕴含：策略模式、状态模式、观察者模式、公布订阅模式、迭代器模式创立型设计模式设计模式的外围是辨别逻辑中的 可变局部 和 不变局部，并使它们进行拆散，从而达到使变动的局部易扩大、不变的局部稳固.工厂模式简略工厂模式外围就是创立一个对象，这里的 可变局部 是 参数，不变局部 是 共有属性.举例：通过不同职级的员工创立员工相干信息，须要蕴含 name、age、position、job 等信息.实现形式一：外围就是 可变局部 默认 参数化function Staff(name, age, position, job) { this.name = name; this.age = age; this.position = position; this.job = job;} const developer = new Staff('zs', 18, 'develoment', ['写 bug', '改 bug', '摸鱼']);const productManager = new Staff('ls', 30, 'manager', ['提需要', '改需要', '面向 PPT 开发']);实现形式二：实际上在实现形式一中的 job 局部是和 position 是互相关联的，能够认为 job 局部是 不变的，因而能够依据 position 内容的内容来主动匹配 jobfunction Staff(name, age, position, job) { this.name = name; this.age = age; this.position = position; this.job = job;} ...

对 Chrome 扩大性能相熟的小伙伴，可能都有用过 Chrome 的 3D 展现页面层级关系这个性能。能够通过 控制台 --> 左边的三个小点 --> More Tools --> Layers 关上。即能够看到页面的一个 3D 层级关系，像是这样：这个性能有几个不错的作用：页面层级概览疾速厘清页面 z-index 层级之间的关系用于排查一些重绘过程（滚动过程）页面卡顿当然，也会存在一些问题，譬如当页面的 DOM 数量太多的时候，这个插件有的时候就会卡到无奈交互了。同时，尽管能够疾速厘清页面 z-index 层级之间的关系，然而有的时候没法很好的疾速看清整个页面嵌套关系。同时，它只能看整个页面的概览，无奈选取局部节点进行察看。本文，就将介绍一种，疾速通过 CSS，构建页面深度关系的 3D 视图，疾速清晰的厘清页面 DOM 层级及深度之间的关系。并且能够使用在不同的节点独自进行察看。当然，总体而言，是基于：CSS 选择器CSS 3D 属性的一次大规模综合利用，整体看完，置信你能学到不少货色。应用 CSS 构建 3D 可视化 DOM 构造视图假如，咱们首先随时实现一段 DOM 构造，其简略的代码如下：<div class="g-wrap"> <div class="g-header">This is Header</div><div class="g-content"> <div class="g-inner"> <div class="g-box">Lorem LOrem</div> <div class="g-box">Lorem LOrem</div> </div></div><div class="g-footer">This is Footer</div></div>局部 CSS 代码：.g-wrap { margin: auto;width: 300px;height: 500px;background: #ddd;display: flex;align-content: flex-start;flex-wrap: wrap;flex-direction: column;gap: 10px;padding: 10px;& > div { width: 100%; flex-grow: 1; border: 1px solid #333;}} ...

置信在学校的你都有这样的体验，邻近考试，要疯狂的“背诵”否则成绩单就要挂零，因为答题卡全副涂抹都是错的。那么毕业多年的你，没有了考试，有没有一丝思念涂答题卡的时候，有没有好奇这个答题卡到底如何制作，成绩表到底如何为每位同学定制动静生成的。这些都要归功于“报表”工具学校每年都会打印很多的学生成绩单，往往因为新增的课程和不同的教学体系，导致想要的后果简单且多变的。那么如何应用一个工具就能够灵便的制作各种各样报表，面对多变的场景上图就是咱们制作进去的一个答题卡报表，而且它能够依据学生数量批量加载学生的信息数据，而后间接生成并且供咱们打印。那他的劣势也就不言而喻了，本人设计的答题卡，题型和题量都能够本人来抉择，灵便多变，且能够依据不同题型本人随便更新。也能够减少很多默认数据，毕竟本人设计打印的必定也比购买的便宜嘛。本人制作报表艰难嘛？有些人可能就想说，本人做是不是很麻烦，而且也不会用，学起来是不是还很吃力。小编就能够自信的说了，作为手残党的我也能够很快制作的，然而下限却很高，越发深刻的应用，带来的必定也是越多的教训，当你制作多了后，还能够关注更多的性能，不仅仅是制作显示进去，更好看的更多功能的才是咱们的谋求。就比方上面这个报表，只须要简略的几步就能够实现。而且成果还不错。实战开始首先咱们要设计对应的报表，上面是报表设计的整体界面：在左侧是咱们须要应用的组件，也就是设计报表须要的元素，两头就是显示，最右侧能够管制一些属性设置和指定数据。这么一看就很清晰了，咱们其实简略的拖拽就能够实现所须要的报表设计，简略不便，设计好之后能够导出下载都能够。光说这些必定还是不够的，那么接下来就间接上实例：毕业信息表当咱们统计学校不同学院的毕业信息时，可能须要依据从零碎中查到数据而后拿进去，之后在本人计算所须要的数据，而后在在Excel表中一点一点的去写，特地时数据多点，咱们的工作人员可能就会因为一张表而制作一整天。毕竟制作Excel表的苦楚大家应该都晓得吧，那用wyn产品怎么实现的，手残党福利来了：只须要简略的绑定须要的数据，而后把要显示的间接拖到页面上，而后写几个表达式。实现，可能原本一天的工作量，当初几个小时就OK了，是不是很引诱啊。能够看上面两个图，第一个是设计界面，第二个是预览成绩。 没错，就是简略的绑定这么几列数据，而后他就会依据咱们数据源有的数据进行主动计算，主动扩大行展现。是不是很简略。答题卡那么答题卡的样子下面大家曾经看到了，那有人问了，咱们学生人很多啊，我不可能真的一个一个设计吧，就算只是始终复制粘贴，也很费时间。那在怎么解决呢，很简略这里只有绑定好数据的话，设置按人的分组，那他就会主动加载所有学生的了，而且对应的信息也对对应过去，这个时候咱们打印就能够批量打印，并且不同学生显示不同信息。这种场景其实也能够利用在很多场景下，比方打印学生的准考证，学生的成绩单等等，其实都是须要批量打印的，那用这个产品就能够实现雷同模板的批量打印。学生成绩单除了老师应用的，当然也有学生应用的啦，就比方咱们最常见的成绩单那么针对不同学生咱们须要的是不同的成绩单，那这里就有个需要就是不同学生看不同的信息，本人查问本人的成绩单，本人打印本人的成绩单，那其实就像当于一个筛选嘛，那针对多变且不同的课程，往往很简单。不同学生不同信息，那这个时候又是头疼的时候，那么应用wyn产品的就能够设计对立的款式，而后咱们通过参数筛选，筛选进去本人的信息，比方咱们通过学号查问本人的成绩单，就能够实现如下图：我的项目实战接下来给大家来点干货分享，如何应用前端报表控件ARJS通过利落拽实现大学问题绩效表的设计。1、首先咱们来解析下这张报表该表次要分为三个局部:表头：也是就是学生根底信息，包含学习：姓名、学院、业余、学号、班级、学历、毕业证号明细局部：显示大学四年的考试绩效问题，蕴含学期、课程名称、学分、问题明细局部你本人看发现其实是三个雷同的模块表尾局部：表尾局部次要是学分的统计、均匀问题、均匀绩点2、 拆分完这张表之后，那么就能够依据理论需要进行报表的设计首先给报表增加页眉和页脚，页眉中通过文本框来设置表头须要显示的信息表头和页脚通过文本框来进行表尾的显示设计两头内容区域，首先应用表格控件，而后利用表格控件的分组，分组条件依据绑定数据的中的数据字段学年和学期进行分组，明细内容是三个雷同的模块，也就是在一个内容区域显三个雷同区域。那么这能够应用报表字段的分栏属性来设置，3、 最终设计好的报表设计款式4、 最终预览后果：5、 报表模板置信能看到这里的小伙伴必定也曾经蠢蠢欲动了，这里咱们为大家提供了多模板能够尝试。模板下载： https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...https://support.qq.com/produc...

最近在用vue3开发svg图标组件，应用webpack读取到svg内容后利用正则移除掉了<svg>，失去了<svg>的子节点，本打算用vue的render函数创立一个svg标签，而后再以 innerHTML的形式将svg的子节点插入进去，可我究竟还是太年老了，以innerHTML模式将svg子节点插入进去后并没有成果，图标渲染不进去，于是乎就想到了将字符串的svg解析成虚构节点。一开始本不打算本人去写代码解析，因为这事挺麻烦，于是就去“百度”，找到了一份大佬写的解析html为虚构dom的代码，但这位大佬的代码有bug还不够欠缺（当遇到简单点的属性时解析不正确，因为他是用正则去匹配标签的属性的，没有思考到简单属性的状况），代码见下：let sign_enum = { SIGN_END: "SIGN_END", // 完结标签读取 如 </xxxxx> SIGN_END_OK: "SIGN_EN_OK", // 完结标签读取实现 SIGN_START: "SIGN_START", // 开始标签读取 如 <xxxxx> SIGN_START_OK: "SIGN_START_OK", // 开始标签读取实现 };function htmlStrParser(htmlStr) { const str = htmlStr.replace(/\n/g, ""); let result = { nodeName: "root", children: [] }; // 默认 result.children[0]插入, ，这里记录调试用的栈信息 let use_line = [0]; let current_index = 0; // 记录以后插入children的下标 let node = result; // 以后操作的节点 let sign = ""; // 标记标签字符串（可能蕴含属性字符）、文本信息 let status = ""; // 以后状态，为空的时候咱们认为是在读取以后节点（node）的文本信息 for (var i = 0; i < str.length; i++) { ...

前言随着智能交通科技和产业的倒退，我国正在造成一个安全可靠、便捷高效、绿色智能、凋谢共享的现代化综合交通运输体系。《“十四五”古代综合交通运输体系倒退布局》明确提出，放慢智能技术深度推广应用，保持翻新驱动倒退，推动互联网、大数据、人工智能、区块链等新技术与交通行业深度交融，推动先进技术装备利用，构建泛在互联、柔性协同、具备寰球竞争力的智能交通系统。智慧公路零碎将先进的数据通信技术，传感器技术、人工智能等新兴技术无效地综合使用于交通运输，服务管制和车辆管理，增强车辆，路线、运维三者之间的分割，从而保障平安，提高效率，改善环境，节约能源。连贯起城市与乡镇的智慧数字化全面倒退，打造智慧城市、数字农村新格局。成果展现随着画面初始化后，映入眼帘的是以沈海高速厦门至泉州段作为我的项目背景的可视化场景，流光溢彩的霓虹成果展现了高速公路在 GIS 地图上的走向，以动画延长的形式进行展现，让人眼前一亮。配合底部公路动画成果款式图，更贴合了整个我的项目场景。图扑软件应用自主研发外围产品 HT for Web GIS，实现可交互的 Web 智慧高速公路交通可视化治理运维平台，将其地理信息系统（Geographic Information System，GIS）的数据进行丰盛的可视化展现。高速公路可视化大屏联合 GIS 地图，辅以左右两侧面板进行展现。别离从隧道机房、ETC 门架、服务区、收费站等几个维度进行整合，全方位掌控公路交通的运行状况。 HT 和 GIS 的集成计划中可提供我的项目理论需要构建漫游线路，依照指定线路对城市各地区进行漫游挪动，在制订线路的时候能够参考重点区域或智能化程度较高的区域进行制订，给用户出现公路重点倒退区域以及智能化倒退功效。在高速公路 BIM 模型的根底上交融 GIS 信息，综合剖析不同布局计划下地质和天文情况，以此防止路线布局中的地质灾害和环境敏感区。同时，在 CIM（城市信息模型）平台中植入优化算法进一步纠正高速公路的布局门路。HT for Web GIS 产品反对对不同地图瓦片服务数据、航拍歪斜摄影实景的 3DTiles 格局数据以及城市建筑群等不同的 GIS 数据的加载。本次零碎中的城市修建场景通过对地图供应商提供的修建进行仿真三维建模，达到实用且实在的成果。在设计上也能够通过对客户提供的修建白模加工优化，进行 AO 贴图烘焙，减少模型间的暗影关系，使场景更加赏心悦目。场景设置了科技 GIS 地图版与写实格调三维模型的 2 种切换模式，客户能够点击 GIS 地图上的图标对不同场景进行跳转，亦可通过在三维场景中，对场景模型进行交互，实现场景跳转。系统分析ETC 可视化ETC 门架零碎一种高速不停车免费的设施。龙门架上能够安裝一些甄别汽车信息的设施，依据组装在汽车前挡风玻璃上的车载 RFID 标签与在收费站 ETC 行车道龙门架上的微波天线两头的微波加热专用型远程通信，利用软件连贯网络技术利用与金融机构发展后盾治理清理解决。 视频监控智能剖析视频监控智能剖析零碎是道路交通形式不可短少的监管伎俩。图扑软件参考现场摄像头理论点位，在三维场景中进行对应地位的监控模型摆放，实现场景还原。用户通过三维场景对高速公路的摄像头地位高深莫测，并进行实时监控信息采集与剖析，将异样车辆信息等数据进行汇总。传统以 2D 的形式平铺在显示器上的视频监控形式，很难将分镜头视频与理论地理位置绝对应，无奈对大场景进行无效直观的实时监测，没有态势感知。图扑 Hightopo 视频交融解决方案将 2D 图像交融到场景的 3D 模型中，为操作员提供直观的视频图像和简略的视图管制。HT 视频交融技术采纳 WebGL 技术， 利用 GPU 高性能计算能力对视频图像进行实时处理，图像处理不占用 CPU 资源，整个计划画面晦涩。 设施监测图扑软件对 ETC 门架进行了残缺的三维场景构建，可能治理门架以及门架上所有的设施对象。反对通过数据配置，生成不同的监控场景。实在还原龙门架路口交通运行状态，2D 面板重点展现门架编号、地位信息、门架车辆绑定信息、免费信息以及设施故障状态，不便运维人员对来往同行车辆进行筛查治理，便于发展交通衰弱诊断，无效解决路口交通拥堵和平安等问题，晋升交通管理及服务水平。ETC 车辆监测图扑高速可视化治理运维平台中的 ETC 门架零碎同样可具备通行车辆分段计费、流量考察、视频监控、超速筛查等性能，汽车通过门架之后，门架上装置的监控零碎会自动识别汽车，同时实现计费。 孪生车辆进出免费门架的过程，并以动静标签标注的模式展现每辆车辆免费后果，胜利扣费车辆显示为绿色标签“交易胜利"。扣费失败车辆显示为红标签”交易失败“，非 ETC 车辆显示为黄标签”交易失败。收费站可视化公路的理论管理工作中，因为公路治理布局零散，现场处理、核心调度、决策指挥等工作工作绝对独立，不足对立的纵向、横向间的指挥调度体系。增强基础设施数字化治理能力，将大数据、物联网、视频剖析、数据挖掘等相干技术利用到公路场景中来，疾速进步公路的平安、疾速、绿色运输和智能管控的能力。设施监测收费站是公路零碎性能施展的重要组成部分，公路收费站机电设备是保障公路失常运行的要害，高速公路的机电零碎应该随着交通运输业的倒退一直往信息化、智慧化更新。 通过图扑 Hightopo 丰盛的 2D 可视化面板款式，将公路免费状况、车辆通行状况、出入口车道状况以及机电设备如栏杆机、车牌辨认、车道监控、车道控制器、天线、费显、车道指示灯、情报板等设施的数量、运行状况以及设施运维状况进行汇总统计输入于大屏上，让运维人员无需再通过纸质文件传递信息与归档，进步工作效率，加强管理水平。 情报板高速公路可变信息情报板是一种架设在高速公路上方或者是路线两侧的 LED 诱导屏，图扑 Hightopo 高仿真信息情报板与交通管理零碎、路线施工运维零碎等后盾数据端相连，公布预设好的信息或者实时的交通路况信息。在高速公路中，收费站车道或 ETC 专用车道设置可变信息屏，能够显示文字等信息，同样也能够为出行的司乘人员及时提醒相干车辆信息。高速公路可变信息情报板公布的次要信息内容包含：交通路况信息、平安揭示信息、天气信息、路线关闭和施工信息以及突发路况等信息。 车道治理通过图扑 Hightopo 打造的车道可视化管理系统，进一步晋升了对免费车道的监控和异样解决的能力，可对每一条免费车道进行实时监控，实现“无人值守”"近程操作"的车道治理模式，助力打造畅行的高速公路收费站。通过大屏上的面板对入口车道的车道通行指示灯、车道栏杆机进行通行、敞开、抬杆、落杆等操作。 服务区可视化通过图扑软件数字孪生技术将服务区、服务区内修建、周边环境设施进行高度还原，反对交融物联网、大数据等各类信息技术，整合服务区现有信息系统的数据资源，通过“一张图”的模式进行服务区治理。将来将助力实现服务区高质量倒退和游览、商贸、物流等性能拓展。 图扑软件 HT 反对多种形式的模型渲染，采纳轻量化三维建模技术，以三维场景为根底，2D 数据面板为辅，统计出服务区的根底地理信息、能耗（用水、用电）统计、接入天气零碎实时查看到当日的环境监测、以及车辆统计与日车流量趋势图，实现服务区的数字化治理。设施监测传统的人工设施巡检耗时耗力，关联机电设备品种多、数量宏大，日常治理运维老本高。因而，推动智慧高速建设势在必行。通过图扑软件的可视化技术将所有智慧机电设备如服务区灯光、空调、监控、户外充电桩、地磁、环境检测等设施进行统计与设施运维记录汇总，实现彼此间的信息互联互通和自动控制，并与交通工具、交通参与者的协同联动。服务治理通过数字孪生、大数据、物联网等信息化新技术与公路行业的深度交融，舒服、高效的通行能力以及日常运维治理的智能化日趋重要，图扑可视化赋能公路行业早日实现被动预测、主动处理、疾速响应、服务高效，全面晋升以人为本的智慧公路。人流热力求通过多个智能摄像头的图像识别剖析，能造成一个残缺的服务区热力求。显示休息区人流状况及拥挤水平，红色区域人群汇集，绿色区域游客较少。管理者通过图扑 Hightopo 可视化治理平台进行人流监控能够建设人流预警机制。 停车位可视化通过智慧化车位检测器，可实时更新车位应用状况，实现服务区车位信息可视化。运维人员可依据图扑 Hightopo 可视化大屏理解车位状况，再通过智能广播系统，疏导不同类别车辆在服务区内分区停放，实现平面分流、客货拆散，压缩车辆出入排队工夫，缩小人工治理老本。休息区停车场为了更贴合现在市场需求，增设了许多充电桩以解决新能源电动车的长期充电状况。服务区可通过图扑可视化实时监测电桩运行状态及实时功率，对接充电桩的充电状态，判断以后车位是否有车辆，通过线条流动成果动画模仿充电状态。在充电桩产生故障时，通过模型染色、告警动画等成果提醒，为充电桩的实时应用状况和运行监控保护提供了便当。 孪生加油站加油站作为人流量大且常见的公路服务区场景，对加油站进行平安防范措施具备十分重要的平安意义。 图扑软件数字孪生智慧加油，对加油站进行场景复现，运维人员能够通过数据大屏查看加油站实时运行状况。当然图扑软件的可视化技术不仅能对场景进行孪生，也能够对加油站内作业区域、油罐、修建、设施设施的数据进行展现与治理。以下是图扑通过自主研发的 HT for Web 渲染引擎，数字孪生智慧加油可视化管理系统。国家布局中指出大力发展风电、光伏、储能等新能源产业，推动能源清洁低碳平安高效利用，推动重点行业和重要畛域绿色化革新。在此趋势下，采纳各类节能低碳的新能源建设资料，实现绿色生态智慧服务区站也是将来公路服务区的倒退方向。公厕治理服务区卫生间也实现了智慧化降级，可实现实时空余厕位数量的显示，无效疏导旅客避开如厕顶峰。运维人员通过图扑 Hightopo 可视化可实时查看公厕的应用状况等数据，便于安顿保洁进行厕所消杀等清洁工作。 公路数据中心高速机房可视化高速公路机房是信息化建设的要害局部，高速公路机房的治理，是整个高速公路管理工作的缩影，机房内的设施是机电零碎的能源所在：负责信息的采集、传输。增强机房管理工作，是实现自动化的必要伎俩，有利于加重管理人员的工作量，升高设施运维老本。 设施监测通过图扑软件搭建轻量化数据中心 3D 机房数字孪生解决方案，通过对数据中心设施、环境、容量、管线等数据源的采集、解决、剖析，为运维人员提供集中监控、集中管理、科学决策等全生命周期运维能力。机房建设环境会对设施运行产生影响，关系到运行的安全性、稳定性，因而必须增强环境和安防治理，波及温度、湿度、照明、门禁、通风等因素。接入设施数据并通过 2D 面板实时显示设施如列头柜、空调、UPS、消防气瓶、监控等数量与运行状况、以及能耗统计、UPS、设施运维记录等信息。告警治理图扑软件依据机房平安管控的理论需要，对接后盾告警数据，对机房内设施告警以及事件告警信息列表进行汇总展现，并通过智慧治理平台推送报警信号，并且能够实时进行派发工单，并且通过 2D 面板辅以派单记录，便于运维人员进行跟踪闭环解决。 容量治理图扑通过不同色彩的可视化成果让机房运维人员能够更加清晰的把握以后的容量状况，如以后机房的电力负载、机柜残余空间、机房各区域承重状况以及存储的容量状况，都能够形象直观的表达出来，无效治理机房的容量资源，让机房的各类资源负载更平衡。 温度云图通过对接数据中心内的物联网设施（温湿度传感器），获取到场景中的温度点位信息，渲染出三维的热力云图成果。目前很多数据中心曾经垂直装置应用了低中高垂直方向的传感器，传统的热力云图是将渲染进去的图片贴合到立体地板上，应用三维的热力云图，能够带来更直观的视觉体验，能够更快定位每个机柜上的设施发热状况。 管线治理管线可视化内容通常分为网络链路可视化、暖通管道可视化、电气线路可视化等管线类型的可视化展现。图扑 HT for Web 推出基于管线可视化的独特算法用于生成设施与设施之间相连的管线生成，包含网络接口、暖通管线（水冷空调、水塔、冷水机组、冷却泵、恒湿机）人工建模或数据生成）、电气管线（变压器、配电箱、电池组、电池柜、电力监控通信柜、开关柜、主控柜）等链路可视化性能。零碎可与网络线路、电气、暖通自控零碎进行数据对接，通过算法主动排布生成管线，以可视化及动画模式展示设施的运行状态和连贯状态，因而连贯关系和链路走向都能让运维人员了然于目。 图扑软件（Hightopo）的数据中心 3D 可视化零碎将多种简单的管理系统信息汇集在虚构仿真环境下，以人类最直观的了解模式展示，可大幅度晋升信息交互和操控的效率，缩小工夫损耗和信息的节约，保障信息的及时性和准确性。该零碎不仅可利用在公路机房、还能够用园区、医院、军营等各畛域数据中心机房：  ...

源代码下载： javascript-zh.js Javascript 于 1995 年由网景公司的 Brendan Eich 创造。最后它作为一种简略的，用于开发网站的脚本语言而被创造进去，是用于开发简单网站的 Java 的补充。但因为它与网页联合度很高并且在浏览器中失去内置的反对，所以在网页前端畛域 Javascript 变得比 Java 更风行了。 不过，Javascript 不仅用于网页浏览器，一个名为 Node.js 的我的项目提供了面向 Google Chrome V8 引擎的独立运行时环境，它正在变得越来越风行。 很欢送来自您的反馈，您能够通过下列形式分割到我：@ExcitedLeigh, 或者l@leigh.net.au. // 正文形式和C很像，这是单行正文/* 这是多行 正文 */// 语句能够以分号完结doStuff();// ... 然而分号也能够省略，每当遇到一个新行时，分号会主动插入（除了一些非凡状况）。doStuff()// 因为这些非凡状况会导致意外的后果，所以咱们在这里保留分号。///////////////////////////////////// 1. 数字、字符串与操作符// Javascript 只有一种数字类型(即 64位 IEEE 754 双精度浮点 double)。// double 有 52 位示意尾数，足以准确存储大到 9✕10¹ 的整数。3; // = 31.5; // = 1.5// 所有根本的算数运算都如你预期。1 + 1; // = 20.1 + 0.2; // = 0.300000000000000048 - 1; // = 710 * 2; // = 2035 / 5; // = 7// 包含无奈整除的除法。5 / 2; // = 2.5// 位运算也和其余语言一样；当你对浮点数进行位运算时，// 浮点数会转换为*至少* 32 位的无符号整数。1 << 2; // = 4// 括号能够决定优先级。(1 + 3) * 2; // = 8// 有三种非数字的数字类型Infinity; // 1/0 的后果-Infinity; // -1/0 的后果NaN; // 0/0 的后果// 也有布尔值。true;false;// 能够通过单引号或双引号来结构字符串。'abc';"Hello, world";// 用！来取非!true; // = false!false; // = true// 相等 ===1 === 1; // = true2 === 1; // = false// 不等 !=1 !== 1; // = false2 !== 1; // = true// 更多的比拟操作符 1 < 10; // = true1 > 10; // = false2 <= 2; // = true2 >= 2; // = true// 字符串用+连贯"Hello " + "world!"; // = "Hello world!"// 字符串也能够用 < 、> 来比拟"a" < "b"; // = true// 应用“==”比拟时会进行类型转换..."5" == 5; // = truenull == undefined; // = true// ...除非你是用 ==="5" === 5; // = falsenull === undefined; // = false // ...但会导致奇怪的行为13 + !0; // 14"13" + !0; // '13true'// 你能够用`charAt`来失去字符串中的字符"This is a string".charAt(0); // = 'T'// ...或应用 `substring` 来获取更大的局部。"Hello world".substring(0, 5); // = "Hello"// `length` 是一个属性，所以不要应用 ()."Hello".length; // = 5// 还有两个非凡的值：`null`和`undefined`null; // 用来示意刻意设置的空值undefined; // 用来示意还没有设置的值(只管`undefined`本身理论是一个值)// false, null, undefined, NaN, 0 和 "" 都是假的；其余的都视作逻辑真// 留神 0 是逻辑假而 "0"是逻辑真，只管 0 == "0"。///////////////////////////////////// 2. 变量、数组和对象// 变量须要用`var`关键字申明。Javascript是动静类型语言，// 所以你无需指定类型。 赋值须要用 `=` var someVar = 5;// 如果你在申明时没有加var关键字，你也不会失去谬误...someOtherVar = 10;// ...然而此时这个变量就会在全局作用域被创立，而非你定义的以后作用域// 没有被赋值的变量都会被设置为undefinedvar someThirdVar; // = undefined// 对变量进行数学运算有一些简写法：someVar += 5; // 等价于 someVar = someVar + 5; someVar 当初是 10 someVar *= 10; // 当初 someVar 是 100// 自增和自减也有简写someVar++; // someVar 是 101someVar--; // 回到 100// 数组是任意类型组成的有序列表var myArray = ["Hello", 45, true];// 数组的元素能够用方括号下标来拜访。// 数组的索引从0开始。myArray[1]; // = 45// 数组是可变的，并领有变量 length。myArray.push("World");myArray.length; // = 4// 在指定下标增加/批改myArray[3] = "Hello";// javascript中的对象相当于其余语言中的“字典”或“映射”：是键-值对的无序汇合。var myObj = {key1: "Hello", key2: "World"};// 键是字符串，但如果键自身是非法的js标识符，则引号并非是必须的。// 值能够是任意类型。var myObj = {myKey: "myValue", "my other key": 4};// 对象属性的拜访能够通过下标myObj["my other key"]; // = 4// ... 或者也能够用 . ，如果属性是非法的标识符myObj.myKey; // = "myValue"// 对象是可变的；值也能够被更改或减少新的键myObj.myThirdKey = true;// 如果你想要获取一个还没有被定义的值，那么会返回undefinedmyObj.myFourthKey; // = undefined///////////////////////////////////// 3. 逻辑与控制结构// 本节介绍的语法与Java的语法简直完全相同// `if`语句和其余语言中一样。var count = 1;if (count == 3){ // count 是 3 时执行} else if (count == 4){ // count 是 4 时执行} else { // 其余状况下执行 }// while循环while (true) { // 有限循环}// Do-while 和 While 循环很像 ，但前者会至多执行一次var input;do { input = getInput();} while (!isValid(input))// `for`循环和C、Java中的一样：// 初始化; 继续执行的条件; 迭代。for (var i = 0; i < 5; i++){ // 遍历5次}// && 是逻辑与, || 是逻辑或if (house.size == "big" && house.colour == "blue"){ house.contains = "bear";}if (colour == "red" || colour == "blue"){ // colour是red或者blue时执行}// && 和 || 是“短路”语句，它在设定初始化值时特地有用 var name = otherName || "default";// `switch`语句应用`===`查看相等性。// 在每一个case完结时应用 'break'// 否则其后的case语句也将被执行。 grade = 'B';switch (grade) { case 'A': console.log("Great job"); break; case 'B': console.log("OK job"); break; case 'C': console.log("You can do better"); break; default: console.log("Oy vey"); break;}///////////////////////////////////// 4. 函数、作用域、闭包// JavaScript 函数由`function`关键字定义function myFunction(thing){ return thing.toUpperCase();}myFunction("foo"); // = "FOO"// 留神被返回的值必须开始于`return`关键字的那一行，// 否则因为主动的分号补齐，你将返回`undefined`。// 在应用Allman格调的时候要留神.function myFunction(){ return // <- 分号主动插在这里 { thisIsAn: 'object literal' }}myFunction(); // = undefined// javascript中函数是一等对象，所以函数也可能赋给一个变量，// 并且被作为参数传递 —— 比方一个事件处理函数：function myFunction(){ // 这段代码将在5秒钟后被调用}setTimeout(myFunction, 5000);// 留神：setTimeout不是js语言的一部分，而是由浏览器和Node.js提供的。// 函数对象甚至不须要申明名称 —— 你能够间接把一个函数定义写到另一个函数的参数中setTimeout(function(){ // 这段代码将在5秒钟后被调用}, 5000);// JavaScript 有函数作用域；函数有其本人的作用域而其余的代码块则没有。if (true){ var i = 5;}i; // = 5 - 并非咱们在其余语言中所冀望失去的undefined// 这就导致了人们常常应用的“立刻执行匿名函数”的模式，// 这样能够防止一些长期变量扩散到全局作用域去。(function(){ var temporary = 5; // 咱们能够拜访批改全局对象（"global object"）来拜访全局作用域， // 在web浏览器中是`window`这个对象。 // 在其余环境如Node.js中这个对象的名字可能会不同。 window.permanent = 10;})();temporary; // 抛出援用异样ReferenceErrorpermanent; // = 10// javascript最弱小的性能之一就是闭包。// 如果一个函数在另一个函数中定义，那么这个外部函数就领有内部函数的所有变量的拜访权，// 即便在内部函数完结之后。function sayHelloInFiveSeconds(name){ var prompt = "Hello, " + name + "!"; // 外部函数默认是放在部分作用域的， // 就像是用`var`申明的。 function inner(){ alert(prompt); } setTimeout(inner, 5000); // setTimeout是异步的，所以 sayHelloInFiveSeconds 函数会立刻退出， // 而 setTimeout 会在前面调用inner // 然而，因为inner是由sayHelloInFiveSeconds“闭合蕴含”的， // 所以inner在其最终被调用时依然可能拜访`prompt`变量。}sayHelloInFiveSeconds("Adam"); // 会在5秒后弹出 "Hello, Adam!"///////////////////////////////////// 5. 对象、构造函数与原型// 对象能够蕴含办法。var myObj = { myFunc: function(){ return "Hello world!"; }};myObj.myFunc(); // = "Hello world!"// 当对象中的函数被调用时，这个函数能够通过`this`关键字拜访其附丽的这个对象。myObj = { myString: "Hello world!", myFunc: function(){ return this.myString; }};myObj.myFunc(); // = "Hello world!"// 但这个函数拜访的其实是其运行时环境，而非定义时环境，即取决于函数是如何调用的。// 所以如果函数被调用时不在这个对象的上下文中，就不会运行胜利了。var myFunc = myObj.myFunc;myFunc(); // = undefined// 相应的，一个函数也能够被指定为一个对象的办法，并且能够通过`this`拜访// 这个对象的成员，即便在函数被定义时并没有附丽在对象上。var myOtherFunc = function(){ return this.myString.toUpperCase();}myObj.myOtherFunc = myOtherFunc;myObj.myOtherFunc(); // = "HELLO WORLD!"// 当咱们通过`call`或者`apply`调用函数的时候，也能够为其指定一个执行上下文。var anotherFunc = function(s){ return this.myString + s;}anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"// `apply`函数简直齐全一样，只是要求一个array来传递参数列表。anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"// 当一个函数承受一系列参数，而你想传入一个array时特地有用。Math.min(42, 6, 27); // = 6Math.min([42, 6, 27]); // = NaN (uh-oh!)Math.min.apply(Math, [42, 6, 27]); // = 6// 然而`call`和`apply`只是长期的。如果咱们心愿函数附着在对象上，能够应用`bind`。var boundFunc = anotherFunc.bind(myObj);boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"// `bind` 也能够用来局部利用一个函数（柯里化）。var product = function(a, b){ return a * b; }var doubler = product.bind(this, 2);doubler(8); // = 16// 当你通过`new`关键字调用一个函数时，就会创立一个对象，// 而且能够通过this关键字拜访该函数。// 设计为这样调用的函数就叫做构造函数。var MyConstructor = function(){ this.myNumber = 5;}myNewObj = new MyConstructor(); // = {myNumber: 5}myNewObj.myNumber; // = 5// 每一个js对象都有一个‘原型’。当你要拜访一个理论对象中没有定义的一个属性时，// 解释器就回去找这个对象的原型。// 一些JS实现会让你通过`__proto__`属性拜访一个对象的原型。// 这尽管对了解原型很有用，然而它并不是规范的一部分；// 咱们前面会介绍应用原型的规范形式。var myObj = { myString: "Hello world!"};var myPrototype = { meaningOfLife: 42, myFunc: function(){ return this.myString.toLowerCase() }};myObj.__proto__ = myPrototype;myObj.meaningOfLife; // = 42// 函数也能够工作。myObj.myFunc() // = "hello world!"// 当然，如果你要拜访的成员在原型当中也没有定义的话，解释器就会去找原型的原型，以此类推。myPrototype.__proto__ = { myBoolean: true};myObj.myBoolean; // = true// 这其中并没有对象的拷贝；每个对象实际上是持有原型对象的援用。// 这意味着当咱们扭转对象的原型时，会影响到其余以这个原型为原型的对象。myPrototype.meaningOfLife = 43;myObj.meaningOfLife; // = 43// 咱们晓得 `__proto__` 并非标准规定，实际上也没有规范方法来批改一个已存在对象的原型。// 然而，咱们有两种形式为指定原型创立一个新的对象。// 第一种形式是 Object.create，这个办法是在最近才被增加到Js中的，// 因而并不是所有的JS实现都有这个办法var myObj = Object.create(myPrototype);myObj.meaningOfLife; // = 43// 第二种形式能够在任意版本中应用，不过必须通过构造函数。// 构造函数有一个属性prototype。然而它 *不是* 构造函数自身的原型；相同，// 是通过构造函数和new关键字创立的新对象的原型。MyConstructor.prototype = { myNumber: 5, getMyNumber: function(){ return this.myNumber; }};var myNewObj2 = new MyConstructor();myNewObj2.getMyNumber(); // = 5myNewObj2.myNumber = 6myNewObj2.getMyNumber(); // = 6// 字符串和数字等内置类型也有通过构造函数来创立的包装类型var myNumber = 12;var myNumberObj = new Number(12);myNumber == myNumberObj; // = true// 然而它们并非严格等价typeof myNumber; // = 'number'typeof myNumberObj; // = 'object'myNumber === myNumberObj; // = falseif (0){ // 这段代码不会执行，因为0代表假}// 不过，包装类型和内置类型共享一个原型，// 所以你理论能够给内置类型也减少一些性能，例如对string：String.prototype.firstCharacter = function(){ return this.charAt(0);}"abc".firstCharacter(); // = "a"// 这个技巧常常用在“代码填充”中，来为老版本的javascript子集减少新版本js的个性，// 这样就能够在老的浏览器中应用新性能了。// 比方，咱们晓得Object.create并没有在所有的版本中都实现，// 然而咱们依然能够通过“代码填充”来实现兼容：if (Object.create === undefined){ // 如果存在则不笼罩 Object.create = function(proto){ // 用正确的原型来创立一个长期构造函数 var Constructor = function(){}; Constructor.prototype = proto; // 之后用它来创立一个新的对象 return new Constructor(); }}更多浏览Mozilla 开发者网络 提供了优良的介绍 Javascript 如何在浏览器中应用的文档。而且它是 wiki，所以你也能够自行编辑来分享你的常识。 ...

推送监听接口 (addPushReceiver)形容：增加推送监听，可监听接管到的自定义音讯(透传音讯)、告诉音讯、告诉栏点击事件、别名和标签变更操作。 /** * com.mob.pushsdk.MobPush.class * MobPush推送监听接口 * @param receiver 监听 */public static void addPushReceiver(MobPushReceiver receiver)示例代码 MobPushReceiver mobPushReceiver = new MobPushReceiver() { @Override public void onCustomMessageReceive(Context context, MobPushCustomMessage message) { //接管到自定义音讯（透传音讯） message.getMessageId();//获取工作ID message.getContent();//获取推送内容 } @Override public void onNotifyMessageReceive(Context context, MobPushNotifyMessage message) { //接管到告诉音讯 message.getMobNotifyId();//获取音讯ID message.getMessageId();//获取工作ID message.getTitle();//获取推送题目 message.getContent();//获取推送内容 } @Override public void onNotifyMessageOpenedReceive(Context context, MobPushNotifyMessage message) { //告诉被点击事件 message.getMobNotifyId();//获取音讯ID message.getMessageId();//获取工作ID message.getTitle();//获取推送题目 message.getContent();//获取推送内容 } @Override public void onTagsCallback(Context context, String[] tags, int operation, int errorCode) { //标签操作回调 //tags: RegistrationId已增加的标签 //operation: 0获取标签 1设置标签 2删除标签 //errorCode: 0操作胜利 非0操作失败 } @Override public void onAliasCallback(Context context, String alias, int operation, int errorCode) { //别名操作回调 //alias: RegistrationId对应的别名 //operation: 0获取别名 1设置别名 2删除别名 //errorCode: 0操作胜利 非0操作失败 } };移除推送监听接口 (removePushReceiver)形容：移除告诉监听，与addPushReceiver()对应，增加推送监听后，在敞开界面时调用进行移除，移除之前增加过的推送监听。 ...

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。逻辑赋值是对现有数学和二进制逻辑运算符的扩大。咱们先温习一下，而后看看把它们联合在一起能失去什么。 首先，咱们来看下 JS 中条件运算符与无条件运算符之间的区别 。 无条件 vs 有条件数学运算符，例如 +是无条件的。在const x = 1 + 2中，无论如何，咱们总是将LHS增加到RHS中，并将后果调配给x。 LHS 和 RHS 是数学畛域内的概念，意为等式右边和等式左边的意思，在咱们当初的场景下就是赋值操作符的左侧和右侧。当变量呈现在赋值操作符的右边时，就进行 LHS 查问；反之进行 RHS 查问 。咱们甚至能够编写一些奇怪的代码，例如const x = false +2。JS 首先将false的 LHS 转换为Number，因而失去const x = Number（false）+ 2，其后果为const x = 0 + 2。 它将 LHS 增加到RHS，最初将其调配给x，得出2。 逻辑运算符，例如 &&是有条件的在const x = true && 0 + 2中，首先计算 LHS，它为true。因为 LHS 的值为true，所以咱们接下来运行 RHS 操作，它的值为2，同时也运行赋值操作，后果是2。 与const x = false && 0 + 2相比，LHS 为 false，因而 RHS 被齐全疏忽。 ...

根本用法const申明一个只读常量,一旦申明,不可扭转 const一旦申明常量,就必须立刻初始化,不能当前赋值 const作用域与let雷同: 只在申明所在的块级作用域内无效.同样的也不存在变量晋升.存在暂时性死区只能在申明后应用不可反复申明实质const保障的不是是变量的值不能改变,而是变量指向的内存地址不得改变,因而这也就意味着对于复合数据类型而言外面的数据结构是可变的,见代码: 如果想让对象解冻,应该应用Object.freeze办法,见代码:   除了将对象解冻,对象的属性也应该解冻,对象彻底解冻形式见代码:   顶层对象let命令,const命令,class命令申明的变量不属于顶层对象属性,见代码:

let为JS新增了块级作用域,见代码: ES6容许块级作用域容许任意嵌套,见代码: 外层作用域无奈读取内层作用域的变量,见代码: 内层作用域能够定义外层作用域的同名变量,:见代码: 块级作用域的呈现使得立刻执行匿名函数(IIFE)不在必要,见代码: 块级作用域与函数申明ES6的规定 容许在块级作用域内申明函数函数申明相似于var,即会晋升到全局作用域或函数作用域的头部同时,函数申明还会晋升所在块级作用域的头部块级作用域申明函数的规定只在应用大括号的状况下成立,若没有大括号就会报错,见代码: 因为环境导致的行为差别过大应防止在块级作用域中申明函数,若的确须要能够采纳函数表达式的模式,见代码: do表达式实质上,块级作用域是一个语句,将多个语句封装在一起,没有返回值,在作用域外不能拜访外面的值,因为作用域不返回值,对于这种状况能够应用do关键字,使它变成do表达式,见代码:

代码： <!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <div id="app"> <child :fun="parentFun"></child> </div> <script src="http://cdn.bootcss.com/vue/1.0.17/vue.js"></script> <script> 'use strict'; Vue.component('child', { template: '<div @click="useFun">点击子组件调用父组件里的办法</div>', name: 'child', props: { fun: Function }, created() { }, methods: { useFun() { this.fun() } } }) new Vue({ el: '#app', data() { return { } }, methods: { parentFun() { console.log(111) } } }) </script></body></html>

Node.js 有哪些个性？在利用构建的时候有哪些注意事项？入门同学如何实现技术进阶？本期大咖说，阿里云高级技术专家朴灵携作品《深入浅出 Node.js》开展分享。https://www.youku.com/video/X... 嘉宾介绍朴灵：阿里云高级技术专家，Node.js Contributor，Node.js 利用性能治理专家，《深入浅出 Node.js》作者。曾负责推动 Node.js 技术栈在阿里巴巴外部落地，推出过 Node.js 性能平台，即 Alinode。曾组织过沪 JS、杭 JS、NodeParty，并作为嘉宾分享，在国内进行 Node.js 技术栈的布道工作。现除 Node.js 外，还于阿里云开放平台负责 API 体验方向工作。 图书导览本书以一种独特的解剖形式，从不同的方向切入到 Node.js 的内部结构。从 Node.js 动态的组成模式，到动静的运行机制，再到驾驭它的编程范式和内存治理，再往后就是 Web 利用的根底和产品化方向。一个章节是一个魔方的面，整体形成了实现的 Node.js。 感兴趣的敌人，能够百度搜寻【阿里云大咖说】，观看更多精彩内容~

开发工具：DevEco Studio 集成形式：Gradle在线集成 集成前筹备注册账号应用MobPush之前，须要先在MobTech官网注册开发者账号，并获取Mob提供的AppKey和AppSecret，详情能够点击查看注册流程 增加配置在我的项目Gradle文件中注册MobSDKbuildscript { repositories { // 1.增加MobSDK Maven地址 maven { url "https://mvn.mob.com/android" } ... } dependencies { ... // 2.注册MobSDK classpath 'com.mob.hossdk:MobSDK:+' }} 在我的项目App Module的Gradle文件中增加插件和扩大apply plugin: 'com.mob.hossdk'MobSDK { appKey "xxxxxx" appSecret "xxxxxxxxxxxx" MobPush { }}回传用户隐衷受权后果（submitPolicyGrantResult）//MobSDK.class/** * 回传用户隐衷受权后果 * @param isGranted 用户是否批准隐衷协定 * @param callback 接口执行后果，可为null */ public static void submitPolicyGrantResult(boolean isGranted, com.mob.OperationCallback callback)示例代码 调用地位开发者能够本人指定，只需在应用SDK性能之前调用即可。 MobSDK.submitPolicyGrantResult(true, null);API接口MobPush的鸿蒙版本API接口和安卓原生API接口没有差异，可参考链接 设置⾸⻚MainAbilityName/** * 设置⾸⻚MainAbilityName ⽤于点击告诉关上⾸⻚ * @String MainAbilityName */MobOhosPush.setMainAbilityName(MainAbility.class.getName());

大家上午好，非常感谢明道云给我这个机会，来展现一下这个上海电气在明道云下面的利用。我的题目是《低代码在离散制造业的实际》。 引入明道云的背景首先介绍一下咱们电气数字科技有限公司。它是在2018年的时候，上海电气团体外部成立的数科公司。咱们秉承“平安可信，业余高效”的理念，做电气外部值得信赖的数字化倒退事业。 在2020年1月，咱们正要做低代码工具的选型。机缘巧合之下，我就注册了明道云。在试用过程中，我印象最深的性能就是明道云后端的流程引擎（工作流）。它不只是业务的流程引擎，还有规定引擎。在一些业务流程中，你肯定要依据表单填写的内容来进行流转，并且表单字段的可操控性要具体到在哪个节点填写哪些字段。而这些操作都能够在明道云后端流程里做。 恰好过后咱们正有这方面工具技术的迫切要求，所以咱们就把明道云引入电气数科。在后续的一段时间里，咱们也缓缓地落地和推广了一些利用。这就是咱们和明道云结缘的背景。 离散制造业的特点那么说到离散制造业，它有三个特点。 一是产品很大且状态简单。比方，上海电气最次要的产业板块叫电站板块，是专门造电站的。工厂里的锅炉汽轮机、发电机、辅机等等，这些都是由咱们电气团体对立提供的。在一个电站外面可能只有两个汽轮机，一套锅炉。然而在一套锅炉外面，它应用的整机比拟多，并且有一个比拟固定的产品构造。 所以说，离散制作的产品绝对较为简单，蕴含多个零部件，个别具备绝对固定的产品构造、原材料清单和零部件配套关系。 这也就对应第二个特点，产品种类多。个别的离散制作型企业都会生产相干和不相干的较多种类和系列产品，这就决定了企业产品和物料的多样性。 在这些生产原料和产品的加工过程中，又因为每个零部件都不一样，加工过程也不一样。所以这里往往会呈现加工过程工夫断续的状况，导致生产效率十分低下。 那么在这种状况下，企业要做数字化转型，就是为了找出哪些货色是在闲暇的，我的机器是不是始终在运行，进而优化资源配置。那么我在后续会跟大家分享具体案例。 离散制造业数字化转型的窘境那么，离散制作企业在数字化转型中也面临了一些窘境。 咱们作为一个经营历史很长的企业，建造的零碎十分多，数据很难交融。每个部门、每个小组都有本人的利用，甚至在同一个厂的A车间和B车间，因为各自的产业状态不一样，它们的MES零碎都不一样。所以，咱们在数字化转型过程中，数据凋谢和共享是比拟辣手的难题。 还有就是生产运行数据的平安防护问题。原来咱们的工业网络和办公网络是严格辨别开的。当初，越来越多来自研发、设计、生产、治理、经营等方面的企业外围业务数据分布运行在各个终端、挪动端和网络中。企业生产网络与办公网络，外部网络与内部网络的边界正在逐步隐没，传统的数据安全保障伎俩已无奈齐全作用于现存的平安问题。 低代码助力离散制造业低代码的劣势 那么低代码怎么去助力咱们离散制造业呢？第一，助力企业晋升开发效率，置信大家都应该有共识了。第二点，是加强IT和业务部门的合作。 在电气团体外面，咱们好多业务人员的Excel程度都十分高，他们写VBA的程度比我都高。他们用Excel做了很多子利用。当看到低代码工具的时候，他们非常感谢IT部门：“终于有一个更好的产品来代替我写VBA了，这是一个十分好的工具。” 我还记得一位业务人员亲自对我说的两句话。第一句是：“业务用户的需要是说不清的。”他有想法，然而他没方法表白出本人到底想要的是一个什么货色。 第二句话是说：“用了这个零碎之后，他才晓得他的方向在哪里。”在传统的开发模式外面，这一点是十分难以实现的。然而咱们引入低代码之后，他就非常高兴地说：我要的需要马上给我实现了，那么我下一个需要马上就能够做了。这一点给他们带来了十分大的便当。 他们跟我沟通一些需要时，我说你这个需要用低代码实现起来会十分艰难。他会间接跟我说：这个需要先砍掉。 在跟客户谈需要时，客户想要的性能并非肯定要实现。因为在传统的开发我的项目中，客户会认为技术什么都能做，所以肯定要揪着一个十分难的点，让咱们帮他花很大力量去实现。然而用了低代码工具之后，这个状况显著扭转了。基本上是，我依据你的需要，做了个样子，而后你照着抄就行了。 低代码的施行法令咱们在外部有一个低代码的施行法令，第一点就是以点带线带面，逐渐更新迭代。 有一次，我给某个部门做了一个小利用后，部门共事间接通过利用来向管理层展现数据。部门共事发现领导十分喜爱这种模式：我再也不必看你们发过来的邮件了，我只有在你们的利用上点一点，就晓得了。 通过这个部门的成功实践后，其余部门的需要也逐步提上来了，各类业务数据、生产数据都随之转移过去了。 第二点，以赋能为指标导向，而不是流程再造。 咱们在应用其余零碎的时候，这些零碎都是“死”的。零碎做进去是什么样子，所有人都要依照它的规定填写数据。然而低代码平台就是不一样，它以如何帮忙我的工作为目标，而不是要强行革新咱们的理论业务流程。最终用户十分乐意承受这一点，因为只有在搭建和运行利用的过程中，你才会逐渐发现我的流程到底在哪些地方出了问题，及时纠正。 第三点，关注用户培训，让更多用户参加；第四点就是多分享多交换。 咱们IT部门跟客户的接触其实不是很多，只有当他们有新需要或者问题，才会找过去。那么当客户外部用了低代码平台之后，他们外部会互相交换，不须要咱们去帮他培训。第五点，突破数据壁垒。 咱们为客户施行了SAP。SAP里会承载一些数据，然而他们十分心愿把这些数据拿进去本人用。那么咱们就用明道云来实现。不须要任何代码，只有配置一下SAP的RFC接口，将它变成REST接口，就能够在明道云里获取数据，实现低代码与非低代码利用的数据拜访与共享。 在低代码平台落地实际的过程中，咱们只是把低代码用在给用户的最初一公里上。原来咱们有很多业务零碎，当初咱们在将它们缓缓推到前面，把低代码平台放在后面。 因为越靠近用户的环节，个性化需要越多。当咱们把低代码平台放在后面后，前面的零碎只须要提供一些数据接口就能够了。往年明道云推出了集成核心能力，我感觉十分好，因为它能够解决很大部分的系统集成工作。 低代码利用案例分享利用零碎清单上海电气数科负责了整个上海电气团体的团体级利用运维。咱们团体原来就有几百个小零碎，每个小零碎都做了一些事，好几个部门一起对这些零碎负责。 那么咱们就做了这个利用，把所有零碎的全副信息集中起来，包含域名、开发人员信息、源代码在哪里等。再将它和源代码的治理服务器、数据中心CMDB都集成起来。无论是管理层还是运维人员，都能在这里把握所有零碎的状态，清晰明了。洽购核价审批这个利用出自那位写Excel和VBA十分厉害的业务人员之手。本来他用Excel写VBA，做出了十分巨大的零碎。零碎外面的程序界面、数据库连贯等性能都做得十分好，运行性能也不错。 然而当我给他介绍了明道云之后，他说：不行，我要用它替掉我写的零碎。因为Excel只能存在他这里，每次要和他人核查数据、更新程序内容，都要把Excel传来传去，无奈同步。应用明道云的话，所有数据和配置都能够线上无缝同步。二级库存治理咱们治理库存和库位都是在SAP里实现的，但它只是叫一级库。员工从一级库领出物料后，还要到二级库里治理。 而咱们团体有多个工厂，散落在浦西、临港等中央。每个厂区也很大，车间之间距离很远，所以从一级库到二级库的物理间隔也很远，因而须要灵便、准确地治理二级库存，实时动静监控。 库管人员用明道云平台做出了这个十分有价值的二级库存治理利用，实现二级库存治理数字化，并和一级库实现时点上合并，实现总库存数字化。它还搭载了库存物料编码库，实现公司编码治理标准化的对立治理，实时统计和展现整体物料的应用状况。衰弱平安环境报告 很多企业都有上EHS零碎（环境、职业衰弱平安管理体系）然而他们买了零碎之后发现，零碎让他去做的事件十分多，用户不想做，不习惯去做这些事件。 EHS的治理部门看到其余部门用明道云来搭建利用，向领导展现他们的治理理念和数字化计划后，也提出要用明道云去做，所以就产生了这个利用。 这个利用建设了危险作业平台，实现危险作业线上公布，用手机端流转和敞开，为危险作业数字化赋能。物流交接记录 原来，库管员说物流从仓库出库了，就做了一个Excel表治理；而后物流到车间交接的时候，又做了另一张Excel表。两张Excel表常常会呈现不统一的状况，而后就会发现有的物料尽管出库了，然而没有进入车间。 所以，他们一起就做个零碎来帮忙仓库和车间之间的交接。仓库依照系统生成的盘点工作清单，盘点物料，装入载具后送到车间。车间依据理论送达状况，确认是否全副到货，并实现交接和信息反馈。零碎依据差别数和异样率，进行物料主动找回，并再次更新信息。 仓库和车间交接零部件过程中产生问题时，能够不便疾速地溯源，及时精确找到问题点。 施行成绩总结以上就是上海电气数科和上海电气团体里比拟典型的案例。那么从施行成绩来讲，咱们开发成本比原来少了30%甚至更少，开发速度的晋升倍率几乎是不能比的。这些利用的施行难度不是很大，业务部门能够本人实现；难度大的零碎对接、接口配置工作就交给咱们IT来做。开发难度就能大幅度降低，还能号召全员参加。 第四点十分重要。咱们如果要把以前定制开发的利用做成挪动端，就要从新定制，然而明道云低代码平台不须要，自带挪动终端，这一点十分好。而且挪动端还能够定制款式，自由选择九宫格还是菜单栏，这一点也十分棒。还有就是历史利用迁徙，升高迁徙老本。 从业务催IT，到IT帮忙业务。以前都是业务提了需要后，追着IT问这个货色什么时候开发完。当初IT会被动问业务“你这个零碎还有什么须要帮忙的吗？须要我帮你做吗？”业务对IT的服务满意度也进步了不少。 数据驱动为导向，推动业务数据的收集和剖析及改良。咱们有一家工厂开始做数字化转型时，老板的第一个抓手是什么？就是数据显性化。他把所有车间里的机床开机率抓上去，监控机床什么时候开机和关机。员工在上班时间里，是四点钟就把机器关了，还是说始终开着，加班到8点。他通过这个数据来浮现生产状况，而后倒推出车间的产出量，车间的活到底满不满。他通过这个形式，逐渐改善他的经营情况。 好，我的分享就是这些，谢谢大家。 本文来自上海电气数科软件开发核心总监齐元帅，在明道云2022年秋季搭档大会流动演讲，经校对编辑后整顿为演讲精髓。

这是一个基于SMSSDK性能的扩大的Flutter插件。应用此插件可能帮忙您在应用Flutter开发利用时,疾速地实现获取验证码性能。 Demo例子：https://github.com/MobClub/SM... 开始集成https://pub.dev/packages/mobsms在pubspec.yaml文件中退出上面依赖 `dependencies: mobsms: mobcommonlib: `而后执行：flutter packages get 导入package在你的dart工程文件中，导入上面头文件，开始应用 import 'package:mobsms/mobsms.dart';import 'package:mobcommonlib/mobcommonlib.dart';iOS： 平台配置参考 iOS集成文档 Android： 导入SMSSDK相干依赖 在我的项目根目录的build.gradle中增加以下代码： dependencies { classpath 'com.mob.sdk:MobSDK:2018.0319.1724' }在/android/app/build.gradle中增加以下代码： apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"// 导入MobSDKapply plugin: 'com.mob.sdk'平台相干集成 在我的项目的/android/app/build.gradle中增加: android { //.........}apply plugin: 'com.mob.sdk'MobSDK { appKey "您的appkey" appSecret "您的appsercret" SMSSDK {}}这样就能够在你的project/android/src下的类中import cn.smssdk.flutter.MobsmsPlugin并应用MobsmsPlugin中的api了。 隐衷协定接入展现MobTech隐衷协定：开发者须要展现MobTech隐衷条款，并将批准后果回传给MobTech即可，举荐如下形式： 将MobTech隐衷协定的URL嵌入app本身隐衷协定形容中(举荐应用) 第一步：将咱们sdk的隐衷形容增加到您的隐衷政策内容中 参考表达方式： 为了实现【 】性能，咱们应用了MobTech的【 】产品，此产品的隐衷策略条款，能够参考：http://www.mob.com/about/policy 第二步：先将mobFoundation.framework更新到3.2.24及之后的版本（能够在我的项目根目录找到这个mob库，看外面的plist文件，外面有版本号），而后须要在我的项目的plist文件里增加MOBNetLater参数配置，参数值配置为2 配置如图：第三步：回传用户隐衷受权后果（应用隐衷版本，如果不回传受权后果，sdk性能将无奈应用） 接口如下： import 'package:mobcommonlib/mobcommonlib.dart';Mobcommonlib.submitPolicyGrantResult(true, (dynamic ret, Map err) => {});只须要在应用sdk性能接口之前调用一次这个接口回传，把用户承受您们隐衷条款与否的后果调用upload接口通知咱们即可。 为了使MobTech的SDK产品能更好的兼容ios14零碎，同时合乎苹果将于2020年12月8日失效的要求应用程序（APP）开发者配置隐衷“标签”新政策，咱们根据MobTech不同的SDK产品制作了不同的配置操作文档。建议您在接入MobTech SDK服务时更新到最新版本,接入咱们的隐衷政策链接，同时在App Store Connect 后盾，参考对应SDK的配置操作文档，增加您App的隐衷“标签”数据内容。App Store Connect 后盾配置参考文档：链接 ...

集成筹备这是一个基于 MobPush 性能的扩大的 Flutter 插件。应用此插件可能帮忙您在应用 Flutter 开发利用时，疾速地实现推送性能。在pubspec.yaml文件中退出上面依赖 dependencies: mobcommonlib: mobpush_plugin:而后执行：flutter packages get 导入package 在你的dart工程文件中，导入上面头文件，开始应用 import 'package:mobcommonlib/mobcommonlib.dart';import 'package:mobpush_plugin/mobpush_plugin.dart';iOS平台配置参考 iOS集成文档 实现文档中 Xcode配置：配置AppKey和AppSecret Android导入 MobPush 相干依赖 在我的项目根目录的build.gradle中增加以下代码：buildscript { repositories { // 配置Mob Maven库 maven { url "https://mvn.mob.com/android" } // 配置HMS Core SDK的Maven仓地址。(集成华为厂商须要增加) maven { url 'https://developer.huawei.com/repo/'} } ...}dependencies { ... // 集成MobPush classpath "com.mob.sdk:MobSDK:2018.0319.1724"}}在 /android/app/build.gradle 中增加以下代码： apply plugin: 'com.android.application'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"// 导入MobSDKapply plugin: 'com.mob.sdk'平台相干集成 在我的项目的/android/app/build.gradle中增加:MobSDK { appKey "您的MobTech平台appKey"appSecret "您的MobTech平台appSecret"//配置MobPushMobPush { //配置厂商推送（可选配置，不须要厂商推送可不配置，须要哪些厂商推送只需配置哪些厂商配置即可） devInfo { //配置小米厂商推送 XIAOMI { appId "您的小米平台appId" appKey "您的小米平台appKey" } //配置华为厂商推送 HUAWEI { appId "您的华为平台appId" } //配置魅族厂商推送 MEIZU { appId "您的魅族平台appId" appKey "您的魅族平台appKey" } //配置FCM厂商推送 FCM { //设置默认推送告诉显示图标 iconRes "@mipmap/default_ic_launcher" } //配置OPPO厂商推送 OPPO { appKey "您的OPPO平台appKey" appSecret "您的OPPO平台appSecret" } //配置VIVO厂商推送 VIVO { appId "您的VIVO平台appId" appKey "您的VIVO平台appKey" } }}}增加代码 ...

开发人员只能导出 sap.ui.export.EdmType 中列出的原始单元格数据类型，如下图所示： Excel Export API 不反对 UI5 表格单元格中的图标、图像、复选框和简单控件。 也不反对数据绑定中的自定义格式化程序。 导出表的大小受可用浏览器内存的限度。导出大数据集可能会导致内存溢出谬误。因而，请勿将 sap.ui.export.Spreadsheet 与在台式计算机上蕴含超过 2,000,000 个表格单元格和在挪动设施上蕴含超过 100,000 个单元格的数据表一起应用。在这种状况下，请思考专门的导出解决方案。例如，MS Excel® 能够间接从 OData 服务导入电子表格，无需任何 UI 的辅助。 导出过程尽可能在工作线程(浏览器的 Web Worker)中运行。然而，对本机 XMLHttpRequest 事件的代码注入在工作环境中不可用。因而，如果应用程序应用 Mock Server来获取表数据，则应将导出设置中的 worker 参数设置为 false。 对于导出档次级别信息，最大档次深度为 8。此限度来自 Office Open XML 规范和能够关上此类文件的程序。 sap.ui.export.Spreadsheet 容许路由导出更多层级，但如果层级深度超过值 8，则在关上生成的文件时它们可能无奈正确显示。 列配置必须至多蕴含一列能力执行导出过程。如果没有配置列，导出将被勾销。 如果在表中应用导出，则不会导出显示聚合数据的任何行（即共计行）。 workbook.context 对象上的属性 sheetName 和 metaSheetName 每个都限度为 31 个字符。如果它们的值超过此最大长度，则该值将被截断。对于有 ABAP 开发教训的编程人员来说，想必对这个限度并不会感到生疏。 一个小窍门：如果咱们想自定义导出的 Excel 存储到本地的门路，能够应用这个 beforeSave hook： beforeSave 事件在生成的文件保留到文件系统之前触发。 此事件容许开发人员阻止敞开 ExportDialog 并将文件保留到本地设施的默认操作。 如果默认状况下被阻止，事件处理程序负责敞开和销毁对话框。

以下实际论断来自 windows 平台 Edge 浏览器与 mac 平台 Chrome 浏览器 事件// worker.jsself.addEventListener("install", (event) => { self.skipWaiting()})self.addEventListener('activate', (event) => { event.waitUntil(() => {})})self.addEventListener('push', (event) => { event.waitUntil(() => {})})self.addEventListener('sync', (event) => { event.waitUntil(() => {})})代码所蕴含的四个事件中，install 与 activate 事件是 service worker 的生命周期事件。 event.waitUntil 办法也是很重要的办法。 install：install 事件产生在 worker 被装置或更新时，而后进入期待状态，在某个机会进入激活中，防止与旧的已激活的 worker 抵触。调用 skipWaiting 可跳过期待。 activate：activate 事件示意以后 worker 曾经正式工作。 push：push 事件是 web-push 能力的服务音讯推送事件。重点之一。 sync：sync 则是由页面客户端发动的，咱们能够用来做肯定的推送能力。重点之一。 Web Pushweb push 是依赖于浏览器客户端的推送能力，由浏览器厂商提供（大略）。能够在用户订阅后，在未关上过（大略）站点的状况下收到推送音讯。 // client 局部，worker 为 serviceWorker.register 注册后的实例const pushSubscription = worker.pushManager .subscribe({ applicationServerKey: urlBase64ToUint8Array(publicVapidKey), userVisibleOnly: true })fetch('/server', pushSubscription)subscribe 的参数 applicationServerKey 为服务生成的公钥，实现订阅后 pushSubscription 中会蕴含调配的 endpoint 信息，即此客户端承受音讯的推送地址。 ...

最近在用vue3开发svg图标组件，应用webpack读取到svg内容后利用正则移除掉了<svg>，失去了<svg>的子节点，本打算用vue的render函数创立一个svg标签，而后再以 innerHTML的形式将svg的子节点插入进去，可我究竟还是太年老了，以innerHTML模式将svg子节点插入进去后并没有成果，图标渲染不进去，于是乎就想到了将字符串的svg解析成虚构节点。一开始本不打算本人去写代码解析，因为这事挺麻烦，于是就去“百度”，找到了一份大佬写的解析html为虚构dom的代码，但这位大佬的代码有bug还不够欠缺（当遇到简单点的属性时解析不正确，因为他是用正则去匹配标签的属性的，没有思考到简单属性的状况），代码见下： let sign_enum = { SIGN_END: "SIGN_END", // 完结标签读取 如 </xxxxx> SIGN_END_OK: "SIGN_EN_OK", // 完结标签读取实现 SIGN_START: "SIGN_START", // 开始标签读取 如 <xxxxx> SIGN_START_OK: "SIGN_START_OK", // 开始标签读取实现 };function htmlStrParser(htmlStr) { const str = htmlStr.replace(/\n/g, ""); let result = { nodeName: "root", children: [] }; // 默认 result.children[0]插入, ，这里记录调试用的栈信息 let use_line = [0]; let current_index = 0; // 记录以后插入children的下标 let node = result; // 以后操作的节点 let sign = ""; // 标记标签字符串（可能蕴含属性字符）、文本信息 let status = ""; // 以后状态，为空的时候咱们认为是在读取以后节点（node）的文本信息 for (var i = 0; i < str.length; i++) { var current = str.charAt(i); var next = str.charAt(i + 1); if (current === "<") { // 在开始标签实现后记录文本信息到以后节点 if (sign && status === sign_enum.SIGN_START_OK) { node.text = sign; sign = ""; } // 依据“</”来辨别是 完结标签的（</xxx>）读取中 还是开始的标签(<xxx>) 读取中 if (next === "/") { status = sign_enum.SIGN_END; } else { status = sign_enum.SIGN_START; } } else if (current === ">") { // (<xxx>) 读取中，遇到“>”， (<xxx>) 读取中实现 if (status === sign_enum.SIGN_START) { // 记录以后node所在的地位，并更改node node = result; use_line.map((_, index) => { if (!node.children) node.children = []; if (index === use_line.length - 1) { sign = sign.replace(/^\s*/g, "").replace(/\"/g, ""); let mark = sign.match(/^[a-zA-Z0-9]*\s*/)[0].replace(/\s/g, ""); // 记录标签 // 标签上定义的属性获取 let attributeStr = sign.replace(mark, '').replace(/\s+/g, ",").split(","); let attrbuteObj = {}; let style = {}; attributeStr.map(attr => { if (attr) { let value = attr.split("=")[1]; let key = attr.split("=")[0]; if (key === "style") { value.split(";").map(s => { if (s) { style[s.split(":")[0]] = s.split(":")[1] } }) return attrbuteObj[key] = style; } attrbuteObj[key] = value; } }) node.children.push({ nodeName: mark, children: [], ...attrbuteObj }) } current_index = node.children.length - 1; node = node.children[current_index]; }); use_line.push(current_index); sign = ""; status = sign_enum.SIGN_START_OK; } // (</xxx>) 读取中，遇到“>”， (</xxx>) 读取中实现 if (status === sign_enum.SIGN_END) { use_line.pop(); node = result; // 从新寻找操作的node use_line.map((i) => { node = node.children[i]; }); sign = ""; status = sign_enum.SIGN_END_OK; } } else { sign = sign + current; } } return result;}console.log(htmlStrParser(htmlStr))下面代码中给解析的节点都设置了一个状态，这一点至关重要，这是我之前没有想到的，有了解析状态就能晓得遇到的字符串是节点的属性，还是节点的文本，还是节点的子节点。 ...

企业信息化建设供应侧改革的新思路传统的企业信息化建设思路是什么呢？它是从需要侧的布局跟施行动手的，而后解决做哪些和怎么做业务信息化的问题，用不着关注承当这个我的项目建设的供应体系的品质、效率、构造问题。这就会导致在我的项目建设过程中，供应体系难以适应需要变动，我的项目建设后未获得预期的成绩。 为此，咱们提出一个新的思路——企业信息化倒退建设。从供应侧动手，解决好两个问题：一是解决企业软件开发的标准化与定制化问题，优化企业软件开发的工艺和商业模式。二是解决企业对信息化与IT化的认知问题，改良企业对信息化的意识和实际形式。PPT底下是咱们从2017年开始，本人依据理论状况、遇到的问题，而后布局进去的路线，始终到明天。看到这个之后，大家可能明确了，咱们作为甲方，咱们会遇到有数家征询公司、软件开发公司，所有人的PPT都在搭房子。企业上云，自顶向下，整体规划，散布施行，一体化，端到端，流程梳理，最佳实际，专家系统，数据中台，大数据分析，人工智能，智能制作，最初还来一个黑灯工厂——咱们全要面对。这里还没退出信息安全、IT本行的货色。 咱们一个小小的IT部门，所在的传统制作行业又是离IT很边远的行业。为什么这么说呢？咱们认为在整个国民经济体系中，所有行业和IT的产品融合度从高到低的散布呈一个金字塔形态。这个交融是行业最终产品和IT的交融。 传统行业中IT与最终产品交融的窘境在这个金字塔顶端的行业之一是银行。咱们认为银行IT部门所提供的产品，跟银行对老百姓们提供的最终产品，是基本上100%交融的，因为都是虚构的数字。 比方你去银行取10万块钱，银行不会让你等一会，咱们当初去印一下，一两个钟头后你再来。他不是这样的。你取小额现金就间接给你了，你取大额的就间接划账了，实质就是个数字。然而怎么保障这个数字一个小数点都不差，并且一百年都不会差呢？靠的就是IT运维。 再往下走，来到金字塔两头的状况。大家比拟有直观感触的就是新能源汽车。所有的汽车外围都是一个iPad，就跟大号手机一样，IT的元素终于进来了。有一次我去我母校，跟实验室传授聊天。他说他们在跟长城汽车有单干，V系列以上的发动机参数都是主动收集到服务器端的，阐明IT曾经走进产品了。 咱们再往下走，金字塔底端是啥？煤炭、钢铁、化工、纺织……钢铁怎么跟咱们的芯片、软件搁在一块呢？煤是老天爷给的，你挖出来，外面不可能带芯片。所以咱们甲方会发现：传统行业的ERP、信息化都是打外围战。咱们认为的外围战围着什么呢——智慧物流、供销、大电商、集团化洽购，CRM销售。这些都跟企业最终的生产行为做联合，并没有跟企业最终的产品做联合。 咱们在2017年发现了这个问题。那怎样才能把咱们的IT技术跟咱们最终生产的无缝钢管做联合呢？咱们从这个命题开始，一步一步地走到了明天。就是在这过程中，咱们发现了明道云。 明道云关上交融新思路要让IT和企业最终产品交融，咱们想到了新思路——做减法，减负。 先把本人从根底运维解除进去。超交融设施，给业余的人去做业余的事件。而后是PaaS。咱们已经走过弯路，咱们找到Odoo，但这个货色还是太难。而后咱们找到了明道云，PaaS层解决了。 找到明道云之后，咱们突然间发现自己面目一新了。它屏蔽掉了好多软件开发中，咱们基本没必要去干涉的货色。咱们能够间接拿着明道云，面对每一个业务部门人员，确定能不能干。上面，回到咱们一开始提出的新思路，从供应侧动手，解决企业软件开发的标准化与定制化问题，以及解决企业对信息化与IT化的认知问题。咱们一起来深刻分析这两个问题。 软件开发标准化与定制化问题1.授人以“鱼”导致我的项目建设老本高传统软件的商业模式是授人以鱼的。任何一个传统软件厂商都要一竿子插到底，做到给你一个最终成品，而不是半成品。这就导致建设老本十分高，堆上大量人天老本。 2.用源代码间接形容业务导致信息孤岛这是我依据从业经验总结进去。IT感觉要用源代码去间接形容业务人员想做的一件事，这自身就是一个强耦合，不成孤岛才怪。用源代码形容业务，间接形容业务是很不迷信。但要是用明道云的各种控件、视图去形容，会解耦，成果就会有很大的不同。 3.需要转化为源代码须要动脑筋导致不灵便好多人跟我阐明道云不灵便，这个不行那个不行。我说是你没动脑子，不是它不行。人是活的货色，它就是个工具。IT行业自身就是工具属性，所以大家肯定要记分明，任何软件都只是个工具。 企业对信息化与IT化的认知问题1.信息化不等于IT化信息化与IT化不是一个问题，也不是同一个货色。信息是形成世界的三元素之一，物质能量加信息。IT只是信息的搬运工，搬运到一个中央并解决。无论IT有没有，信息都在那儿。 那么信息化是什么？我能够给大家举一个简略的例子。全中国的制造业太多了，每一个小团体都有本人的想法。然而他可能通知你：我要做一个Excel表，表头是什么样子。这个咱们认为就是信息化。 IT化是什么呢？就是当他说Excel表太多了该怎么办的时候，这就是咱们IT的活。 2.IT部门倒退建设深受ITIL影响 我刚入行的时候，一位老师傅通知我这句话：“咱们部门很牛，比业务更懂技术，比技术更懂业务。”然而干到明天，我发现其实咱们哪边都不懂。咱们干什么在行？修电脑，装零碎，接网线，装服务器，定期到机房看一圈，查查温度。真正出小事了还得去找人。 业务是干懂的，不是学懂的，业务教训定所有。总结来总结去，有一个很要害的问题，就是行业壁垒。 我特地观赏明道一点，将方才说的授人以鱼，改成三点水的渔。我既然解决不了其余行业壁垒的问题，那我能不能解决我本人行业的壁垒问题。让他人去排汇我，成全他人，要不然咱们IT行业干得很累。 我在制造业，要是照着老传统去做的话，学完环保，还得学营销、学洽购，学生产、学物流，最初学到头了，钢铁也能炼了。这是不可能的。 这话也说给咱们的合作伙伴听，不要试图去挑战行业，特地是制作行业外面的业务模型。尽管它最初形象进去就是明道云对应的七个功能模块，然而模型是那个模型。业务人员怎么干活才是个麻烦事。 两大问题的解决思路在认清这两大问题之后，咱们一起来看一下解决方案。 1.标准化应该是生产工艺，业务需要永远是定制化 生产工艺是软件开发的工艺，它的标准化就跟咱们冶炼钢铁一样，废钢检定有几种国家标准。但据我所知，软件畛域里还没有国家标准。 其实咱们企业比这个不懂那个不懂，最初什么也不懂，然而咱们只有可能抓住第三方规范或某种体系就能够了。用它来代替咱们，把控整个软件建设的全生命周期体系。这个体系里包含人该怎么做、做哪些事件等。要是有这个货色，其实甲方的问题就解决了。 所以说到这，软件公司们不要总试图去压服甲方你的业务应该如何标准化，先把本人的工艺标准化，业务是你永远没法标准化的。 2.基于明道云构建企业信息化倒退建设管理体系 这个体系指的是，当咱们有了明道云后，员工应该怎么利用它去工作，如何治理，如何考核，KPI是什么，如何激励员工，治理团队如何组成等。好比我举的例子。布局环节。IT部门在建设新零碎时，就应该规定必须对表明道云，我的项目立项前必须先进行明道云的POC验证。什么意思呢？能用明道云搭的就不要再去花冤枉钱，额定洽购一套零碎。请一个世界顶级的装修公司来给你们家刷大白，原本这个事几百块钱就能解决。 商务环节。在我的项目招投标的标书中减少诸如“洽购明道云平台开发加分项”，“用明道云开发的优先思考”。这是每个企业IT部门都能做到的，因为IT的软件洽购是独立于其余产品洽购的。 建设环节。借助明道云技术栈和标准化能力，对我的项目建设品质进行监督与管控。 应用环节。将明道云搭建成绩纳入职工岗位评估和培训考核体系，建设翻新人才提拔机制。咱们IT终于有能够跟人力资源部门PK的法宝。咱们不是在说HR软件怎么用，而是在说人该怎么倒退的问题。我试过，这个HR很乐意听到这样的想法。 绩效环节。这里指基于明道云搭建的我的项目所节省下来的费用。原来这个我的项目要花两三百万，可能大部分合作伙伴都想把价格报高。然而我能够很明确地通知大家，甲方不违心这么干。能用明道云搭建而节俭的我的项目费用，咱们会把它拿来做外部的翻新处分基金，激发咱们内生的变动，内生的改革。 因为咱们晓得，合作伙伴的职责不是帮咱们去变成咱们应该和想要的样子，而只应该帮咱们去做一个完满的工具。至于咱们拿着这个工具能不能实现咱们的设想中的改革，那是另外一回事。 企业信息化建设供应侧改革倡议首先是你得把明道云各项的能力吃透，才有底气面对形形色色的业务需要和业务部门。 到目前为止，明道云官网给的培训说，洽购流程第一步应该是这样下单，而后怎么入库。凡是到一个制造业企业里，业务人员比你都熟。 你只有把明道云外面所有的性能、组件都摸透了，这个货色到底怎么用出花来的。而后依据他所提供的线索、流程，帮他解决，而不要试图跟他讲治理流程外面这个是怎么样，那个怎么弄的。业务部门很恶感这个。 第二就是咱们始终提倡所有甲方IT部门去做的事件。做售前的售前，见客户的客户，着力挖掘和造就明道大使和合作伙伴，拓展明道云的生态，推动良性循环。 发明需要的人是一线业务部门的员工，不是咱们IT部门。需要发明，也就是说这个IT我的项目的需要从何而来。加工实现，这靠在座各位合作伙伴的共同努力了。 而后降级迭代。不是加工完了就完了，业务人员一用就会有需要，就有各种想法，有各种奇葩需要。这些奇葩需要往往须要厂商在大版本上给予反对，而后合作伙伴拿着新性能再去回到一线，把这个车轮转起来。 一线部门有了新性能后，又有新的需要反馈到合作伙伴，由此循环往来——我设想的明道云就是这么一个生态。第三点是新零碎首选明道云搭建老零碎通过接口与明道星散成，无奈集成的与供应商单干从新搭建。 咱们有一位服务了二十多年的老软件供应商，一个部门的老总把他介绍给意识。他比我入职工夫还早，开发和保护了咱们的零碎整整二十年，称得上是咱们的声誉职工。 论业务的相熟能力，我不可能把他剔掉，因为咱们花了20年让他理解咱们的业务是什么样子，从无到有。用明道云把老零碎剔掉，那对于公司来说是个损失。我倒不如把它从新包装一遍，把它革新一遍。 即使在座的合作伙伴可能遇到，有的传统供应商不违心革新；有的可能跟你是竞争关系，他用传统的，你用明道云。你能够试图去游说也好，参加单干也好，也能够给他培训，用各种方法。 没方法，这是一种无奈。大部分企业的利用都是用传统的老形式建设。当初有了新的货色了，它必然会带来一些阻力和问题。只有咱们共同努力，保护好这个生态，把它推着往前走，能力缓缓化解。 总结最初总结一下，咱们就是在一个一直摸索、一直摸索的过程中去干了这件事。咱们原本不是当初这个状态，明天的状态都是咱们一点点去遇到问题、解决问题，才达到的。咱们发现了，原来企业的IT部门应该去负这样的责任，去做这样的担当，去做这样的引领，从而为我背地的兄弟们去发明生存空间。 即使全中国都用上明道云了，再也没有单子，没有人有需要，然而市场仍旧存在。所以，咱们的IT部门当初把市场放在第一位，这个市场就是咱们公司外部的小市场。咱们怎么样去刺激它，让它循环生产，让它降级生产，这是咱们当初正在做的事件，并且在将来相当长的工夫里都会这么义无反顾去做上来。 但其中最重要的是明道云。它是咱们找到的一个特地趁手的工具，甚至是一个利器，否则的话咱们也不会有。 谢谢大家。这就是我的所有演讲内容。 本文来自天津钢管企管信息部副部长田楠，在明道云2022年秋季搭档大会流动演讲，经校对编辑和精简后整顿为演讲精髓。

从数组1中删除数组2中有的对象 let arr1 = [{id:1},{id:2},{id:3}];let arr2 = [{id:1},{id:2}];let newArry = arr1.filter(x => !arr2.some(item => x.id == item.id))原文出处https://www.cnblogs.com/kerin...

申明本文章中所有内容仅供学习交换应用，不用于其余任何目标，不提供残缺代码，抓包内容、敏感网址、数据接口等均已做脱敏解决，严禁用于商业用途和非法用处，否则由此产生的所有结果均与作者无关！本文章未经许可禁止转载，禁止任何批改后二次流传，擅自应用本文解说的技术而导致的任何意外，作者均不负责，若有侵权，请在公众号【K哥爬虫】分割作者立刻删除！逆向指标指标：安某客滑动验证码逆向剖析主页：aHR0cHM6Ly93d3cuYW5qdWtlLmNvbS9jYXB0Y2hhLXZlcmlmeS8/Y2FsbGJhY2s9c2hpZWxkJmZyb209YW50aXNwYW0=抓包剖析首页申请，有个初始化函数，其中有个 sessionId 后续会用到。而后有个 getInfoTp 的申请，Form Data 里有个 dInfo 是加密参数，返回值里 info 也是加密的，蕴含了图片信息，返回值 responseId 在后续的申请也会用到。滑动之后，有个 checkInfoTp 申请，Form Data 里有个 data 是加密参数，蕴含了轨迹信息，返回值 message 能够看到是否校验胜利。整体流程就是：申请首页获取 sessionId，申请 getInfoTp 获取图片信息和 responseId，申请 checkInfoTp 校验是否胜利，两头波及到 dInfo 和 data 两个加密参数，以及 getInfoTp 返回失去的 info 的解密。dInfo 生成先来看 getInfoTp 申请的 dInfo 参数，间接搜寻可定位，刷新断下，大抵就能够看出是 AES 加密，传入了 sessionId 和一个 _taN() 函数的返回值：_taN() 函数是一些 URL，UA 之类的信息，能够写死：往里跟就能够看到 AES 算法了：这里简简单单扣一下，JavaScript 代码如下：/ ==================================# @Time   : 2021-12-14# @Author : 微信公众号：K哥爬虫# @FileName: ajk.js# @Software: PyCharm# ================================== /var CryptoJS = require('crypto-js')function AESEncrypt(_cRV, 2undefinedp) {    _2undefinedp = _2undefinedp.split("").reduce(function(_PUi, _JrX, _JP9) {        return _JP9 % 2 == 0 ? _PUi + "" : _PUi + _JrX;   }, "");    _2undefinedp = CryptoJS.enc.Utf8.parse(_2undefinedp);    _cRV = "string" == typeof _cRV ? _cRV : JSON.stringify(_cRV);    _cRV = CryptoJS.AES.encrypt(_cRV, _2undefinedp, {        iv: _2undefinedp,        mode: CryptoJS.mode.CBC,        padding: CryptoJS.pad.Pkcs7   });    return encodeURIComponent(_cRV.toString())}function u() {    return {        "sdkv": "3.0.1",        "busurl": "https://www.脱敏解决.com/captcha-verify/?callback=shield&from=antispam",        "useragent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",        "clienttype": "1"   }}function getDInfo(sessionId){    return AESEncrypt(u(), sessionId)}// 测试样例var sessionId = "a8b339ec0c26459598786fee1cce8dc2"console.log(getDInfo(sessionId))这段逻辑也能够用 Python 来实现，要害代码如下（脱敏解决，不能间接运行）：# ==================================# ---- coding: utf-8 ----# @Time   : 2021-12-14# @Author : 微信公众号：K哥爬虫# @FileName: ajk.py# @Software: PyCharm# ==================================import jsonimport base64import requestsfrom lxml import etreefrom loguru import loggerfrom urllib.parse import quote_plusfrom Crypto.Cipher import AESfrom Crypto.Util.Padding import pad, unpadclass AESAlgorithm:    @staticmethod    def encrypt(aes_key_iv, text):        """ 对明文进行加密 """        cipher = AES.new(key=bytes(aes_key_iv, encoding='utf-8'), mode=AES.MODE_CBC, iv=bytes(aes_key_iv, encoding='utf-8'))        result = base64.b64encode(cipher.encrypt(pad(text.encode('utf-8'), 16))).decode('utf-8')        result = quote_plus(result)        return result    @staticmethod    def decrypt(aes_key_iv, text):        """ 对密文进行解密 """        cipher = AES.new(key=bytes(aes_key_iv, encoding='utf-8'), mode=AES.MODE_CBC, iv=bytes(aes_key_iv, encoding='utf-8'))        result = unpad(cipher.decrypt(base64.b64decode(text)), 16).decode('utf-8')        return resultclass AJKSlide:    def init__(self, index_url, user_agent):        self.aes = AESAlgorithm()        self.index_url = index_url        self.user_agent = user_agent        self.headers = {"user-agent": self.user_agent}    def get_session_id(self):        """ 获取 sessionId """        response = requests.get(url=self.index_url, headers=self.headers).text        session_id = etree.HTML(response).xpath("//input[@name='sessionId']/@value")[0]        logger.info(f"sessionId ==> {session_id}")        return session_id    @staticmethod    def get_aes_key_iv(session_id):        """设置 AES key 和 iv"""        aes_key_iv = ''        for index, value in enumerate(session_id):            if index % 2 != 0:                aes_key_iv += value        logger.info(f"解决 sessionId 获取 aes key iv ==> {aes_key_iv}")        return aes_key_iv    def get_d_info(self, aes_key_iv):        """获取 dInfo"""        sdk_info = {            "sdkv": "3.0.1",            "busurl": self.index_url,            "useragent": self.user_agent,            "clienttype": 1       }        d_info = self.aes.encrypt(aes_key_iv, json.dumps(sdk_info))        logger.info(f'dInfo ==> {d_info}')        return d_info    def run(self, session_id=None):        if not session_id:            session_id = self.get_session_id()        aes_key_iv = self.get_aes_key_iv(session_id)        self.get_d_info(aes_key_iv)if __name == '__main__':    UA = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36"    index_url = "https://www.脱敏解决.com/captcha-verify/?callback=shield&from=antispam"    ajk_slide = AJKSlide(index_url_, UA)    ajk_slide.run()getInfoTp 解密getInfoTp 这个接口返回的 info 的值是加密的，后面咱们曾经晓得用到了 AES 加密算法，这里能够间接猜想也是用的的 AES 来解密的，找到 AESDecrypt 这个办法，下个断点，刷新发现断下之后传入了两个参数，第一个正是 info 的内容，第二个则是 sessionId。 ...