Javascript

随着古代大型项目复杂度的晋升，渲染一个 WEB 页面须要的数据越来越多，在屡次关上并渲染的过程中，有许多数据都是反复并且不常更新的，因而这部分的数据须要通过浏览器缓存来缓解网络压力，同时晋升页面关上速度。 <!-- more --> IndexedDB 的存储计划比拟在 IndexedDB 推出以前，浏览器数据的存储计划就曾经有了一些实现，例如 cookie，localStorage 等等。 cookie 不必多说，每次都须要随着申请全副带给服务端，并且大小只有可怜的 4KB。cookie 用来做存储数据缓存必然会给网络申请带来更大的压力，因而在该种状况下不是一个适合的载体。 localStorage 作为一个 HTML5 规范，很适宜用来做存储数据的本地缓存，并且它可能在不同的标签页之间共享数据，一些网站利用这个特点可能实现一些神奇的操作。它的存储限度比 cookie 要大，依据浏览器的实现不同，大部分浏览器至多反对 5MB - 50MB 的存储。然而，因为 localStorage 的实现与 cookie 相似，存储格局只能为 key-value, 并且 value 只能为 string 类型。因而须要存储简单类型时，还必须得进行一次 JSON 的序列化转换。于此同时，localStorage 的读写是同步的，会阻塞主线程的执行，因而在存取简单类型或大数据量的缓存数据时，localStorage 并不是一个很适合的抉择。 为了解决 localStorage 存在的上述问题，W3C 提出了浏览器数据库 —— IndexedDB 规范。一个无大小限度的（个别只取决于硬盘容量）、异步的、反对存储任意类型数据的浏览器存储计划。 IndexedDB 的基本概念要学习 IndexedDB 的应用，首先得理解它的一些外围概念。 数据库版本和所有数据库一样，IndexedDB 也有 Database 的概念。每个同源策略下，都能够有多个数据库。 因为 IndexedDB 存在于客户端，数据存储在浏览器中。因而开发人员不能间接拜访它。因而 IndexedDB 有一个独特的 scheme 版本控制机制，引申进去数据库版本的概念。同一时间对立数据库只保留惟一且最新的版本，低于此版本的标签页会触发 upgradeneeded 事件降级版本库。批改数据库构造的操作（如增删表、索引等），只能通过降级数据库版本实现。 ObjectStoreIndexedDB 用来存储数据集的单位是 ObjectStore，相当于关系型数据库的表，或是非关系型数据库的汇合。 事务事务相当于是一个原子操作，在一个事务中若呈现报错，整个事务之中执行的所有性能都不会失效。从而使得数据库可能保证数据一致性，晋升业务可靠性。 IndexedDB 的一大特点就是事务化，所有的数据操作都必须被包裹在事务之内执行。IndexedDB 的层级关系为：申请 -> 事务 -> 数据库，咱们也能够通过这个关系链来进行错误处理的事件委托，从而集中谬误捕捉逻辑解决。 ...

:::tip最近在着手腾讯文档的输出体验优化，在其中有一个不起眼的小需要引起了我的留神，并顺便钻研了一些事件监听机制相结合的特点，特此记录一下填坑过程。::: <!-- more --> 模仿光标跟随大部分的支流输入法都有这样一个个性，在输出中文时，能够通过左右方向键管制光标，挪动至输入区中任意两个字符之间的地位，用户接下来的字符输出将在光标处直接插入。 因为腾讯文档的渲染的画布是齐全自主实现的，为了在体验上与一般可编辑画布保持一致，咱们须要本人来模仿这一光标的挪动行为。 首先，咱们须要确定的是输入法中的模仿光标进行更新的机会。经试验，用户在进行中文输出时，若应用了方向键挪动光标，将会触发光标的挪动行为。因而，首先要解决的是应用适合的事件监听来捕捉这一行为，从而进行更新。既然是对输入框的行为进行模仿，自然而然的，咱们首先想到的是输入框触发的监听器。 浏览器输入框对输出的监听机制在浏览器对键盘的输出标准中，将键盘输入分为了间接输出与间接输出两种。间接输出将会触发输入框的 onInput 事件 (IE9 之前不反对该事件，只能用 onKeyUp 等键盘事件作为降级抉择）。而对于间接输出，标准将事件监听分为了 onCompositionStart, onCompositionUpdate, onCompositionEnd 三个局部。 而间接输出的同时，两头态的写入也会导致输入框内容的变动，从而也会触发 onInput 事件。因而在间接输出中，事件的触发秩序为：onCompositionStart, onCompositionUpdate, onInput, onCompositionEnd。 须要留神的是，若输出实现时，输入框的内容没有发生变化，则 onChange 事件与 onCompositionEnd 事件都将不会被触发。 中文输入法在键入选词的过程属于间接输出状况，此时两头文本不会间接落盘在输入框内。而通过回车等按键退出中文输出选词后，中文文字将会落盘到输入框，此时属于间接输出状况。 而咱们须要关注的光标事件显然是在间接输出中获取到的。在输入法选词光标左右挪动时，因为内容不变，此时并不会触发 onInput 事件，然而会触发一次 onCompositionUpdate 事件，咱们能够通过这个事件来判断光标地位，重置画布的光标地位。但最终咱们并未应用这个事件做判断器，起因在上面会讲到。 判断以后光标的地位解决了了光标的重置机会，接下来就该解决光标的地位断定了。因为 DOM 规范中并没有间接获取光标地位的办法，因而这一块也须要咱们自主实现。我的思路是，通过选取光标到输出起始地位的字符串，判断选中的字符串长度，即可晓得光标以后地位绝对于起始地位的偏移量，从而确定光标地位。 对于一般的 input 输入框来说起始比较简单，输入框提供了 inputElement.selectionStart 属性作为以后光标地位间隔输出起始点的偏移量，咱们间接应用就能够了。然而对于 contentEditable=true 的 div 节点来说是没有这一属性的，咱们得另想办法。 依据之前写 E2E 测试得来的灵感，咱们能够模仿创立一个从以后光标地位到输出起始地位的选区，通过判断该选区的字符串长度即光标所在位置的偏移量。通过 window.getSelection() 办法可能失去 Selection 对象，这是一个示意以后文本选区的对象，因为咱们正处在输出状态中，因而该选区地位就在以后的输入框中，从而能获取到下面所需的偏移量。 const selection = window.getSelection();// 确定输入框在输出态，存在选区if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); return range.endOffset;}获取完光标地位，还须要在咱们的画布上从新设置回去。设置的思路其实是相似的，通过应用document.createRange办法新建一个选区范畴，其起始地位设置为须要挪动的指标地位，而后移除选区，即可使光标落在指标地位了。 ...

1、将毫秒，转换成工夫字符串。例如说，xx 分钟 export function getDate(ms) { const day = Math.floor(ms / (24 * 60 * 60 * 1000)); const hour = Math.floor((ms / (60 * 60 * 1000) - day * 24)); const minute = Math.floor(((ms / (60 * 1000)) - day * 24 * 60 - hour * 60)); const second = Math.floor((ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)); if (day > 0) { return day + "天" + hour + "小时" + minute + "分钟"; } if (hour > 0) { return hour + "小时" + minute + "分钟"; } if (minute > 0) { return minute + "分钟"; } if (second > 0) { return second + "秒"; } else { return 0 + "秒"; }}2、获取以后工夫 timeStr 时分秒 字符串 格局为 xx:xx:xx（23:59:59） ...

蛮多同学可能会感觉react-router很简单, 说用都还没用明确, 还从0实现一个react-router, 其实router并不简单哈, 甚至说你看了这篇博客当前, 你都会感觉router的外围原理也就那么回事至于react-router帮忙咱们实现了什么货色我就不过多论述了, 这个间接移步官网文档, 咱们上面间接聊实现 另外: react-router源码有依赖两个库path-to-regexp和history, 所以我这里也就间接引入这两个库了,尽管上面我都会讲到根本应用, 然而同学有工夫的话还是能够浏览以下官网文档 还有一个须要留神的点是: 上面我书写的router原理都是应用hooks + 函数组件来书写的, 而官网是应用类组件书写的, 所以如果你对hooks还不是很明确的话, 得去补一下这方面的常识, 为什么要抉择hooks, 因为当初绝大多数大厂在react上根本都在鼎力举荐应用hook, 所以咱们得跟上时代不是, 而且我着重和大家聊的也是原理, 而不是跟官网截然不同的源码, 如果要1比1的复刻源码不带本人的了解的话, 那你去看官网的源码就行了, 何必看这篇博文了 在本栏博客中, 咱们会聊聊以下内容: 封装本人的生成match对象办法history库的应用Router和BrowserRouter的实现Route组件的实现Switch和Redirect的实现withRouter的实现Link和NavLink实现聚合api封装本人的生成match对象办法在封装之前, 我想跟大家先分享path-to-regexp这个库 为什么要先聊这个库哈, 次要起因是因为react-router中用到了这个库, 我看了一下其实咱们也没必要本人再去实现一个这个库（为什么没必要呢,倒并不是因为react-router没有实现咱们就不实现, 而是因为这个库实现的性能非常简单, 然而细节十分繁琐, 有十分多的因素须要去思考到我感觉没必要）, 这个库做的事件非常简单: 将一个字符串变成一个正则表达式咱们晓得, react-router的大抵原理就是依据门路的不同从而渲染不同的页面, 那么这个过程其实也就是门路A匹配页面B的过程, 所以咱们之前会写这样的代码 <Route path="/news/:id" component={News} /> // 如果门路匹配上了/news/:id这样的门路, 则渲染News组件那么react-router他是怎么去判断浏览器地址栏的门路和这个Route组件中的path属性匹配上的？ path填写的如果是/news/:id这样的门路, 那么/news/123 /news/321这种都可能被react-router匹配上 咱们可能想到的办法是不是大略能够如下: 将所有的path属性全副转换为正则表达式（比方/news/:id转换为/^\/news(?:\/([^\/#\?]+?))[\/#\?]?$/i）, 而后将地址栏的path值取出来跟该正则表达式进行匹配, 匹配上了就要渲染相应的路由, 匹配不上就渲染其余的逻辑path-to-regexp就是做这个事件的, 他把咱们给他的门路字符串转换为正则表达式, 供咱们匹配 装置: yarn add path-to-regexp -S// 咱们能够来轻易试试这个库import { pathToRegexp } from "path-to-regexp";const keys = [];// pathToRegexp(path, keys?, options?)// path: 就是咱们要匹配的门路规定// keys: 如果你传递了, 当他匹配上当前, 会把绝对应的参数key传递到keys数组中// options: 给path门路规定的一些附加规定, 比方sensitive大小写敏感之类的const result = pathToRegexp("/news/:id", keys);console.log("result", result);console.log(result.exec("/news/123")); // 输入 ["/news/123", "123", index: 0, input: "/news/123", groups: undefined]console.log(result.exec("/news/details/123")); // 输入nullconsole.log(keys); // 输入一个数组, 数组的有一个对象{modifier: " name: "id", pattern: "[^\/#\?]+?", prefix: "/", suffix: ""}当然, 这个库还有很多玩法, 他也不是专门为react-router实现的, 只是刚好被react-router拿过去用了, 对这个库有趣味的同学能够去看看他的文档 ...

提起 Redux 咱们想到最多的应该就是 React-redux 这个库，可是实际上 Redux 和 React-redux 并不是同一个货色, Redux 是一种架构模式，源于 Flux。 React-redux 是 Redux 思维与 React 联合的一种具体实现。 在咱们应用 React 的时候，经常会遇到组件深层次嵌套且须要值传递的状况，如果应用 props 进行值的传递，显然是十分苦楚的。为了解决这个问题，React 为咱们提供了原生的 context API，但咱们用的最多的解决方案却是应用 React-redux 这个基于 context API 封装的库。 本文并不介绍 React-redux 的具体用法，而是通过一个小例子，来理解下什么是 redux。 好了，当初咱们言归正传，来实现咱们本人的 redux。 一、最后首先，咱们用 creat-react-app 来创立一个我的项目，删除 src 下冗余局部，只保留 index.js，并批改 index.html 的 DOM 构造： # index.html<div id="root"> <div id="head"></div> <div id="body"></div></div>咱们在 index.js 中创立一个对象，用它来贮存、治理咱们整个利用的数据状态，并用渲染函数把数据渲染在页面： const appState = { head: { text: '我是头部', color: 'red' }, body: { text: '我是body', color: 'green' }}function renderHead (state){ const head = document.getElementById('head') head.innerText = state.head.text; head.style.color = state.head.color;}function renderBody (state){ const body = document.getElementById('body') body.innerText = state.body.text; body.style.color = state.body.color;}function renderApp (state){ renderHead(state); renderBody(state);}renderApp(appState);此时运行代码，关上页面，咱们能够看到，在 head 中曾经呈现了红色字体的‘我是头部’，在 body 中呈现了绿色字体的‘我是body’。 ...

React Hooks曾经推出一段时间，大家应该比拟相熟，或者多多少少在我的项目中用过。写这篇文章简略剖析一下Hooks的原理，并带大家实现一个简易版的Hooks。 这篇写的比拟细，相干的知识点都会解释，给大家刷新一下记忆。 HooksHooks是React 16.8推出的新性能。以这种更简略的形式进行逻辑复用。之前函数组件被认为是无状态的。然而通过Hooks，函数组件也能够有状态，以及类组件的生命周期办法。 useState用法示例： import React, { useState } from 'react';function Example() { // count是组件的状态 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}闭包开始之前，咱们来简略回顾一下闭包的概念，因为Hooks的实现是高度依赖闭包的。 闭包（Closure），Kyle Simpson在《你不晓得的Javascript》中总结闭包是： Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.闭包就是，函数能够拜访到它所在的词法作用域，即便是在定义以外的地位调用。 闭包的一个重要利用就是，实现外部变量/公有数据。 var counter = 0;// 给计数器加1function add() { counter += 1;}// 调用 add() 3次add(); // 1add(); // 2counter = 1000;add(); // 1003这里因为counter不是外部变量，所以谁都能批改它的值。咱们不想让人随便批改counter怎么办？这时候就能够用闭包： ...

本文次要通过手写一个简略的 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，前面咱们会实现这个办法。 ...

html: <span class="f-db tit">上传图片：</span> <div class="info"> <input type="file" accept='image/*' class="text" id="pic" onchange="readAsDataURL1()" multiple/> </div>js: function readAsDataURL1(){ var formData = new FormData(); var fileObj = $("#pic")[0].files[0]; if(!fileObj){ return; } if(fileObj.size/1024>1024){ photoCompress(fileObj,{ quality: 0.2},function(base64Codes){ var bl = convertBase64UrlToBlob(base64Codes) var fileName = fileObj.name; formData.append("imgFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 $.ajax({ url : ctx+'/qyapi/img-upload.do', async:false, type : 'post', data : formData, processData : false, contentType : false, success : function(value) { var result = JSON.parse(value); if(parseInt(result.code)>0){ picShow.innerHTML = '<img data-original="'+result.url+'" src="'+result.url+'" alt="" style="width:95%;max-height: 500px;"/>'; $("#url").val(result.url+splitStr+fileName); setTimeout(function (){ resetViewer(); },3000) }else{ alert(result.msg); } } }); }); } }/* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度，宽度越小，字节越小 objDiv：一个是容器或者回调函数 photoCompress() */ function photoCompress(file,w,objDiv){ var ready=new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作实现时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将蕴含一个data: URL格局的字符串以示意所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload=function(){ var re=this.result; canvasDataURL(re,w,objDiv) } } function canvasDataURL(path, obj, callback){ var img = new Image(); img.src = path; img.onload = function(){ var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 默认图片品质为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创立属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像品质 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小，所绘制出的图像越含糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); } } /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url形式示意的base64图片数据 */ function convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }

从开发&运维角度方面来看，总体来说分为以下几个过程： 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域名解析分为递归查问和迭代查问两种形式，现个别为迭代查问。 ...

渲染引擎什么状况下才会为特定的节点创立新的图层层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延长，HTML元素根据其本身属性依照优先级程序占用层叠上下文的空间。 领有层叠上下文属性的元素会被晋升为独自的一层。领有层叠上下文属性： 根元素 (HTML),z-index 值不为 "auto"的 相对/绝对定位元素，position,固定（fixed） / 沾滞（sticky）定位（沾滞定位适配所有挪动设施上的浏览器，但老的桌面浏览器不反对）z-index值不为 "auto"的 flex 子项 (flex item)，即：父元素 display: flex|inline-flex，z-index值不为"auto"的grid子项，即：父元素display：gridopacity 属性值小于 1 的元素（参考 the specification for opacity），transform 属性值不为 "none"的元素，mix-blend-mode 属性值不为 "normal"的元素，filter值不为"none"的元素，perspective值不为"none"的元素，clip-path值不为"none"的元素mask / mask-image / mask-border不为"none"的元素isolation 属性被设置为 "isolate"的元素在 will-change 中指定了任意CSS属性（参考 这篇文章）-webkit-overflow-scrolling 属性被设置 "touch"的元素contain属性值为"layout"，"paint"，或者综合值比方"strict"，"content"须要剪裁（clip）的中央也会被创立为图层。这里的剪裁指的是，如果咱们把 div 的大小限定为 200 200 像素，而 div 外面的文字内容比拟多，文字所显示的区域必定会超出 200 200 的面积，这时候就产生了剪裁，渲染引擎会把裁剪文字内容的一部分用于显示在 div 区域。呈现这种裁剪状况的时候，渲染引擎会为文字局部独自创立一个层，如果呈现滚动条，滚动条也会被晋升为独自的层。 Nginx的概念及其工作原理Nginx 是一款轻量级的 Web 服务器，也能够用于反向代理、负载平衡和 HTTP 缓存等。Nginx 应用异步事件驱动的办法来解决申请，是一款面向性能设计的 HTTP 服务器。 传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的。正是这个次要的区别带给了 Nginx 在性能上的劣势。 ...

前言当咱们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对我的项目做性能优化吗？或者你理解哪些性能优化的办法？听到这个问题的你可能是这样的： 似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的答复。那么，本文就带你简略理解前端性能优化的几个次要方面，旨在抛砖引玉。 一、资源的合并和压缩申请过程中一些潜在的性能优化点： dns是否能够通过缓存缩小dns查问工夫？网络申请的过程如何走最近的网络环境？雷同的动态资源是否能够缓存？是否缩小http申请的大小和次数？是否进行服务端渲染？总结： 深刻了解http申请的过程是前端性能优化的外围。 优化外围 缩小http申请数量；缩小申请资源的大小；google首页案例学习 html压缩；css压缩；js的压缩和凌乱；文件合并；开启gzip；1.html压缩HTML代码压缩就是压缩一些在文本文件中有意义，然而在HTML中不显示的字符，包含空格，制表符，换行符等，还有一些其余意义的字符，如HTML正文也能够被压缩； 一个简略的计算： google的流量，占到整个互联网的40%，预计2016年寰球网络流量将达到1.3ZB(1ZB = 10^9TB)，那么google在2016年的流量就是1.3ZB * 40%，如果google每1MB申请缩小一个字节，每年能够节俭流量近500TB流量。 如何进行html压缩 应用在线网站进行压缩；nodejs提供的html-minifier工具；后端模板引擎渲染压缩；2.css代码压缩分为两局部： 有效代码的压缩；css语义合并；如何进行css压缩 应用在线网站进行压缩；应用html-minifier对html中的css进行压缩；应用clean-css对css进行压缩；3.js压缩与凌乱（美化）包含： 有效字符的删除（空格，回车等）；剔除正文；代码语义的缩减和优化；代码爱护（如果代码不经解决，客户端可间接窥探代码破绽）；JS压缩与凌乱（美化） 应用在线网站进行压缩应用html-minifier对html中的js进行压缩；应用uglify.js2对js进行压缩；4.文件合并文件合并的益处： 右边的示意应用http长链接keep-alive但不合并申请的状况，须要分三次去获取a.js、b.js、c.js；左边是应用长链接并且合并申请的状况，只须要发送一次获取合并文件a-b-c.js的申请，就能将三个文件都申请回来。 不合并申请有下列毛病： 文件与文件之间有插入的上行申请，会减少N-1个网络提早；受丢包问题的影响更重大：因为每次申请都可能呈现丢包的状况，缩小申请能无效缩小丢包状况；keep-alive自身也存在问题：通过代理服务器时可能会被断开；文件合并存在的问题 首屏渲染问题：当申请js文件的时候，如果页面渲染只依赖a.js文件，因为文件合并，须要期待合并后的a-b-c.js文件申请回来能力持续渲染，这样就会导致页面渲染速度变慢。这种状况大多呈现在现代化的前端框架，如Vue等的应用过程中；缓存生效问题：合并后的文件a-b-c.js中只有其中一个文件（比方a.js）发生变化，那么整个合并文件都将生效，而不采纳文件合并就不会呈现这种状况；应用倡议 公共库合并：将不常常发生变化的公共组件库文件进行合并；将不同页面的js文件独自合并：比方在单页面利用SPA中，当路由跳转到具体的页面时才申请该页面须要的js文件；如何进行文件合并 应用在线网站进行文件合并；应用nodejs实现文件合并；应用webpack等前端构件化工具也能够很好地实现；二、图片相干的优化有损压缩过程： 一张JPG图片的解析别离要进行： 色彩空间的转换：从RGB的色彩空间转到其余的色彩空间 ；进行重采样：辨别高频和低频的色彩变换；进行DCT过程：对高频的色彩采样后果进行压缩，这样压缩的收益会比拟大；再对数据进行量化；最初进行编码（encoding）；最终失去JPEG-Compressed Image Data，即真正显示进去的JPG图片。尽管这是一种有损压缩，然而很多状况下，这些损失的数据并不影响显示； png8/png24/png32之间的区别 png8：256色 + 反对通明；png24：2^24色 + 不反对通明；png32：2^32色 + 反对通明；不同格局图片罕用的业务场景 jpg有损压缩，压缩率高，反对通明；利用：大部分不须要通明图片的业务场景；png反对通明，浏览器兼容好；利用：大部分须要通明图片的业务场景；webp（2010年由谷歌推出）压缩水平更好，在ios webview中有兼容性问题；利用：安卓全副；svg矢量图，代码内嵌，绝对较小，用于图片款式绝对简略的场景；利用：比方logo和iconfont；1.图片压缩针对实在图片状况，舍弃一些绝对无关紧要的色调信息，对图片进行压缩； 2.css雪碧图将网站上用到的一些图片整合到一张独自的图片中，从而缩小网站HTTP申请数量。原理为：设定整张雪碧图可示区域，将想要显示的图标定位到该处（左上角）；毛病：整合图片比拟大时，一次加载比较慢。参考 前端进阶面试题具体解答 如天猫的雪碧图：很多状况下，并不是所有的小图标都放在一张雪碧图中，而是会适当进行拆分。当初应用雪碧图的场景比拟少了。 主动生成雪碧图款式 3.网页内联图片（Image inline）将图片的内容内嵌到html当中，缩小网站的HTTP申请数量，罕用于解决小图标和背景图片。网页内联图片写法为： <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." alt="">毛病： 浏览器不会缓存内联图片资源；兼容性较差，只反对ie8以上浏览器；超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢；所以要依据场景应用，不过内联图片缩小HTTP申请的长处还是很显著的。比方，在开发中小于4KB或8KB的图片都会通过构建工具主动inline到HTML中，这种状况下Image inline带来的图片大小增长其实是比减少HTTP申请次数更优的。 4.矢量图SVG与iconfont应用iconfont解决icon问题 应尽量应用该形式，比方能够采纳阿里巴巴矢量图库： 能够抉择格局进行下载： 能够看到它们的大小有着显著的差别： 应用SVG进行矢量图的管制 SVG意为可缩放矢量图形（Scalable Vector Graphics）。SVG 应用 XML 格局定义图像。 5.webpwebp的劣势体现在它具备更优的图像压缩算法，能带来更小的图片体积，而且领有肉眼辨认无差别的图像品质；同时具备了无损和有损的压缩模式、Alpha通明以及动画的个性。在JPEG和PNG上的转化成果都十分优良、稳固和对立。安卓上不存在兼容性问题，举荐安卓下应用。 以下为淘宝网首页申请的图片： 能够看到，图片中大量地增加了webp格局的抉择。.jpg_.webp示意当浏览器反对webp时采纳webp格局，否则采纳jpg格局。 上面为B站首页的图片，能够看到根本都采纳了webp格局： 同一张图片jpg格局和webp格局压缩率有着显著的差别： ...

介绍因为一些特点的工作场景, 写文章的须要每次解决一些图片, 在下面加阐明文字, 或者加一些图形 刚开始应用 PPT 来解决, 一张张复制过来, 做一些边框暗影解决, 再加一些图形, 而后再导出来复制到须要的中央, 而且导出后的图片之后可能不会再应用了还要清理. 图片多了反复操作的步骤就多了, 比拟的繁琐, 想想是否有个工具去解决这个问题, 搜了一下, 要么就是太重的业余的软件, 要么就是不太合乎批量的要求的软件. 简略总结一下我的场景就是: 来了一堆图片, 都须要做一些 "轻解决", 有些须要加文字, 或者加个箭头等. 要害就是 "轻", 不须要去期待几十秒去关上, 进行繁琐的解决不须要下载就能应用, 用完敞开即可简略, 易用, 可视化, 不须要一些简单的操作, 鼠标点击就能实现一款纯 JS 实现的轻量化图片编辑器如果下面的场景是你所遇见的, 也想轻量疾速的解决一些图片, 这个我的项目就是为你而筹备的 GenOptimizer 在线演示地址 反对多图操作反对图片拖拽增加反对所有属性的动静配置反对一键复制批改后的后果反对画笔、文字、矩形、圆形、箭头、线条、图像的增加这个我的项目没有依赖于任何的第三方框架, 以纯 JS 实现 最初形象出了一个框架 (GenOptimizer), 以一种非常简洁易用的形式写出了整个我的项目 上面是我的项目的 git 地址, 笔者初学前端, 还请多多指教 Github 地址Gitee 地址上面是介绍框架的一些技术总结, 特地的轻量化, 后序会对揭秘一下具体的实现计划 Optimizer 框架特点 事件、画图、交互 全局治理反对注册自定义组件, 可自定义配置管理基于面向对象, 高度形象代码简略易用, 能疾速开发出各种成果Optimizer 框架应用启动首先须要场景管理器, 通过继承 GenScene 来创立场景, 场景里对于页面中的多个控制器进行治理 class MainScene extends GenScene { constructor(optimizer) { super(optimizer) }}全局应用 instance 获取实例, 加载场景管理器, 最简略的 Optimizer 程序就启动了 ...

 前言和平造成的挫伤是无奈磨灭的。有人提出“战斗元宇宙”的概念，让人们在虚拟世界中体验和平的创伤，冀望唤醒参与者对战争的向往。随着扩大事实、数字孪生、3D 渲染、高速网络、区块链等技术的倒退及终端设备的迭代，让“战斗元宇宙”无望照进事实，为练兵备战提供虚实联合、物网相联的时空环境。 系统分析1995 年 9 月，美军在巴拿马举办了名为 Fuertas Defensas 的军事演习，开启了信息化和平条件下的战场态势可视化先河。2021 年 5 月的巴以抵触中，以色列代号为“城墙卫士”的口头被称为世界上第一场“人工智能和平”。人工智能、建模与仿真技术等综合集成构建的人机智能推演和翻新零碎，推动建模仿真在基础理论与办法、顶层架构、配备全生命周期、军事演习、作战训练与保障等诸多方面获得重要停顿。实兵演习在可视化技术的加持下，逐步有了多维度、全感官、沉迷式的互联网体验，放慢了“战场元宇宙”的演进。 军演实时环境出现受限于战场数据链带宽限度和敌方的电磁干扰，在无奈实时传送战场真实情况的条件下，战场态势可视化零碎多采纳仿真技术对战场环境和敌我态势进行还原，通过仿真沙盘模仿战局。图扑软件基于天文空间数据仿真创立三维地形，对配色和标记谨严应用，模仿军演地空环境，营造真切、实用、管用的实战化训练环境。联合 GIS，能进行轻微的地标调整，指挥作战单位的散布、转移等，让军队正当布局行军路线。 构建零代码、低代码的数据可视化治理平台，帮忙指挥人员在短时间内依据零散、互相矛盾甚至具备潜在欺骗性的数据做出正确研判。通过图扑可视化系统集成连贯各军种、各作战域的传感器、决策节点和武器零碎，以实现战场态势感知数据的多域集成以及一体化指挥管制。战场态势可视化是对军演环境内（陆、海、空、天、电磁、网络和认知）敌我单方作战局势的实时出现，是一体化 C4ISR 零碎的重要组成部分，帮助部队作战指挥和训练模仿。 图扑将敌情数据和 3D 地形数据合二为一，模仿电磁环境、气象环境、地理环境和水文环境等，为指挥官提供指挥根据。将指控信息、通信信息、地位信息和情报等一系列要害信息集成到可视化零碎中，实现单兵和分队层级的 24 小时态势感知，同时将士兵获取的数据融入到作战局域网中，让虚拟现实和真实世界趋于交融。模仿军演以夺岛口头为例，展现了抢滩登陆至攻占对方大本营的实兵演习过程。蕴含了“空地一体化”、“空海一体化”、“由海向陆”、“由纵深向岸滩”等战斗，是一场全层级、全因素、全方位的演习。在 2D 面板查看军演类型、演练目标、无人机机舱状态等；3D 场景展现演练沙盘。 成果展现无人机侦察实兵演习是除实战外最能测验军队战斗力的一种考核形式。演习过程分为情报侦察、火力打击、防空反导、后装保障等不同局部。通过信号级的仿真模型和效力算法，实现对侦察探测效力、电子对抗效力、火力打击效力和综合防护效力的仿真。 随着可视化和智能化的一直交融，逐步造成政产学研用五位一体的可视化剖析复合体。通过图扑软件模仿蓝军侦察机航行视角，查看红军基地布局。侦察机装有简单的航摄仪和电子侦察设施，能低空高速航行，深刻红方纵深地区对红方核设施、导弹基地和试验场、防空设施等战略目标施行侦察，为火线指挥员提供战术纵深内敌军部署、口头、重要火力点及其他重要指标及地形及攻打成果等情报。 通过以无人机为代表的 ISR 资产回传，可取得敌方军事机场、大本营、火力散布状况、排兵布阵状况等的高清晰度图像和视频。采纳人工智能对敌军的图像和视频进行评估、辨认和剖析，并通过 Hightopo 可视化零碎进行复现，摸索建设与实战环境高度类似的仿真陆战场、仿真海战场、仿真空战场等，使“战场元宇宙”从无到有、从“假”到“真”、从虚构到实用。 在模仿的军演沙盘上用光柱和光圈标注红军的进攻火炮、防空火炮、坦克编队、军事机场、大本营的散布地位，点击相应光标可查看详细信息。如点击进攻和防空火炮可查看在该地位的火炮类型和数量，把握武器数据。通过可视化技术将筛选后的数据传输至虚构战场，剖析伤亡数据，从每一场实在的战斗中吸取经验教训。军演时，作战配备作为现场的数据采集设施，可实在记录敌我单方交战过程。如敌方应用何种武器装备？以何种形式发动防御？ 进攻火炮可视化武器的数字孪生体能为武器装备设计论证、武器装备性能试验、武器装备兼容性试验、武器零碎体系作战效力测验等提供具备等效仿真能力的实战化背景和大规模试验场景。   图扑软件可视化 3D 场景内的坦克数字孪生体标注了坦克的车体尺寸、武装状况、履带宽、行驶间隔、战斗分量等参数。火线坦克可采集敌军武器数据，剖析后进步我军武器性能。   后端剖析人员对前端设施传回的实战数据可视化剖析后，通过战术网路将数据更新包下发至各型配备，一直进步战场上我方武器装备的预测、打击和反制能力。   可依据不同配备的解决能力，以场景匹配机制的模式将数据存储于武器装备之中，既可用于日常的实战化训练，帮忙部队理解作战对手的个性、习惯、攻打地位和形式，也能用于实兵演习，联合侦察情报，预测敌方行动计划，先敌调整、先敌决策，缩小我方人员伤亡。   由人工智能驱动的无人坦克交融 AI 的推动和管制模块，能进行自主航点导航和障碍物探测，装备 50 毫米大炮、反坦克导弹，甚至是系留无人机等和 IFV 部队等同和超配的火力和战术能力，能更好的帮助主力部队战斗。   线框模式的坦克，能接触到坦克的内部结构，查看它的每一个部件，如查看火炮稳定器、配备武器情况等。蓝方可依据情报派出克敌制胜的战斗武器，先敌口头，确保我方人员和配备的平安。   利用传感器收集作战工具的实时数据并上传图扑可视化平台，在可视化平台展现各类作战工具的静态数据和运行数据。坦克伤害超过限定值时及时预警，伤害部位实时出现。在对战中可进步操作员对系统的管制，进步坦克的杀伤力。   ...

 前言和平造成的挫伤是无奈磨灭的。有人提出“战斗元宇宙”的概念，让人们在虚拟世界中体验和平的创伤，冀望唤醒参与者对战争的向往。随着扩大事实、数字孪生、3D 渲染、高速网络、区块链等技术的倒退及终端设备的迭代，让“战斗元宇宙”无望照进事实，为练兵备战提供虚实联合、物网相联的时空环境。 系统分析1995 年 9 月，美军在巴拿马举办了名为 Fuertas Defensas 的军事演习，开启了信息化和平条件下的战场态势可视化先河。2021 年 5 月的巴以抵触中，以色列代号为“城墙卫士”的口头被称为世界上第一场“人工智能和平”。人工智能、建模与仿真技术等综合集成构建的人机智能推演和翻新零碎，推动建模仿真在基础理论与办法、顶层架构、配备全生命周期、军事演习、作战训练与保障等诸多方面获得重要停顿。实兵演习在可视化技术的加持下，逐步有了多维度、全感官、沉迷式的互联网体验，放慢了“战场元宇宙”的演进。 军演实时环境出现受限于战场数据链带宽限度和敌方的电磁干扰，在无奈实时传送战场真实情况的条件下，战场态势可视化零碎多采纳仿真技术对战场环境和敌我态势进行还原，通过仿真沙盘模仿战局。图扑软件基于天文空间数据仿真创立三维地形，对配色和标记谨严应用，模仿军演地空环境，营造真切、实用、管用的实战化训练环境。联合 GIS，能进行轻微的地标调整，指挥作战单位的散布、转移等，让军队正当布局行军路线。 构建零代码、低代码的数据可视化治理平台，帮忙指挥人员在短时间内依据零散、互相矛盾甚至具备潜在欺骗性的数据做出正确研判。通过图扑可视化系统集成连贯各军种、各作战域的传感器、决策节点和武器零碎，以实现战场态势感知数据的多域集成以及一体化指挥管制。战场态势可视化是对军演环境内（陆、海、空、天、电磁、网络和认知）敌我单方作战局势的实时出现，是一体化 C4ISR 零碎的重要组成部分，帮助部队作战指挥和训练模仿。 图扑将敌情数据和 3D 地形数据合二为一，模仿电磁环境、气象环境、地理环境和水文环境等，为指挥官提供指挥根据。将指控信息、通信信息、地位信息和情报等一系列要害信息集成到可视化零碎中，实现单兵和分队层级的 24 小时态势感知，同时将士兵获取的数据融入到作战局域网中，让虚拟现实和真实世界趋于交融。模仿军演以夺岛口头为例，展现了抢滩登陆至攻占对方大本营的实兵演习过程。蕴含了“空地一体化”、“空海一体化”、“由海向陆”、“由纵深向岸滩”等战斗，是一场全层级、全因素、全方位的演习。在 2D 面板查看军演类型、演练目标、无人机机舱状态等；3D 场景展现演练沙盘。 成果展现无人机侦察实兵演习是除实战外最能测验军队战斗力的一种考核形式。演习过程分为情报侦察、火力打击、防空反导、后装保障等不同局部。通过信号级的仿真模型和效力算法，实现对侦察探测效力、电子对抗效力、火力打击效力和综合防护效力的仿真。 随着可视化和智能化的一直交融，逐步造成政产学研用五位一体的可视化剖析复合体。通过图扑软件模仿蓝军侦察机航行视角，查看红军基地布局。侦察机装有简单的航摄仪和电子侦察设施，能低空高速航行，深刻红方纵深地区对红方核设施、导弹基地和试验场、防空设施等战略目标施行侦察，为火线指挥员提供战术纵深内敌军部署、口头、重要火力点及其他重要指标及地形及攻打成果等情报。 通过以无人机为代表的 ISR 资产回传，可取得敌方军事机场、大本营、火力散布状况、排兵布阵状况等的高清晰度图像和视频。采纳人工智能对敌军的图像和视频进行评估、辨认和剖析，并通过 Hightopo 可视化零碎进行复现，摸索建设与实战环境高度类似的仿真陆战场、仿真海战场、仿真空战场等，使“战场元宇宙”从无到有、从“假”到“真”、从虚构到实用。 在模仿的军演沙盘上用光柱和光圈标注红军的进攻火炮、防空火炮、坦克编队、军事机场、大本营的散布地位，点击相应光标可查看详细信息。如点击进攻和防空火炮可查看在该地位的火炮类型和数量，把握武器数据。通过可视化技术将筛选后的数据传输至虚构战场，剖析伤亡数据，从每一场实在的战斗中吸取经验教训。军演时，作战配备作为现场的数据采集设施，可实在记录敌我单方交战过程。如敌方应用何种武器装备？以何种形式发动防御？ 进攻火炮可视化武器的数字孪生体能为武器装备设计论证、武器装备性能试验、武器装备兼容性试验、武器零碎体系作战效力测验等提供具备等效仿真能力的实战化背景和大规模试验场景。   图扑软件可视化 3D 场景内的坦克数字孪生体标注了坦克的车体尺寸、武装状况、履带宽、行驶间隔、战斗分量等参数。火线坦克可采集敌军武器数据，剖析后进步我军武器性能。   后端剖析人员对前端设施传回的实战数据可视化剖析后，通过战术网路将数据更新包下发至各型配备，一直进步战场上我方武器装备的预测、打击和反制能力。   可依据不同配备的解决能力，以场景匹配机制的模式将数据存储于武器装备之中，既可用于日常的实战化训练，帮忙部队理解作战对手的个性、习惯、攻打地位和形式，也能用于实兵演习，联合侦察情报，预测敌方行动计划，先敌调整、先敌决策，缩小我方人员伤亡。   由人工智能驱动的无人坦克交融 AI 的推动和管制模块，能进行自主航点导航和障碍物探测，装备 50 毫米大炮、反坦克导弹，甚至是系留无人机等和 IFV 部队等同和超配的火力和战术能力，能更好的帮助主力部队战斗。   线框模式的坦克，能接触到坦克的内部结构，查看它的每一个部件，如查看火炮稳定器、配备武器情况等。蓝方可依据情报派出克敌制胜的战斗武器，先敌口头，确保我方人员和配备的平安。   利用传感器收集作战工具的实时数据并上传图扑可视化平台，在可视化平台展现各类作战工具的静态数据和运行数据。坦克伤害超过限定值时及时预警，伤害部位实时出现。在对战中可进步操作员对系统的管制，进步坦克的杀伤力。   ...

前言最近在筹备面试题，console的输入程序之前始终迷迷糊糊。 必备常识JS是单线程的单线程是 JavaScript 外围特色之一。这意味着，在 JS 中所有工作都须要排队执行，前一个工作完结，才会执行后一个工作。所以这就造成了一个问题：如果前一个工作耗时很长，后一个工作就不得不始终等着后面的工作执行完能力执行。比方咱们向服务器申请一段数据，因为网络问题，可能须要期待 60 秒左右能力胜利返回数据，此时只能期待申请实现，JS 能力去解决前面的代码。 同步工作和异步工作为了解决JS单线程带来的问题，JavaScript 就将所有工作分成了同步工作和异步工作。 同步工作（Synchronous）同步工作指的是以后一个（如果有）工作执行结束，接下来能够立刻执行的工作。这些工作将在主线程上顺次排队执行。也就是说排排队 //for(){} 和 console.log() 将会顺次执行，最终输入 0 1 2 3 4 done。for (let i = 0; i < 5; i++) {console.log(i)}console.log('done')异步工作（Asynchronous）异步工作绝对于同步工作，指的是不须要进入主线程排队执行，而是进入超车道、并车道。也就是工作队列中，造成一系列的工作。这些工作只有当被告诉能够执行的时候，该工作才会从新进入主线程执行。 //上面的 then() 办法须要期待 Promise 被 resolve() 之后能力执行，它是一个异步工作。最终输入 1 3 2。console.log(1)Promise.resolve().then(() => { console.log(2)})console.log(3)具体来说就是，所有同步工作会在主线程上顺次排队执行，造成一个执行栈（Execution ContextStack）。主线程之外，还存在一个工作队列。当异步工作有了运行后果，会在工作队列之中搁置对应的事件。当执行栈中的所有同步工作执行结束，工作队列里的异步工作就会进入执行栈，而后持续顺次执行。 异步工作(工作队列)能够分为 macrotasks（taskQueue）：宏工作 task，也是咱们常说的工作队列 macrotasks 的划分：（留神先后顺序！） （1）setTimeout（提早调用）（2）setInterval（间歇调用）（3）setImmediate（Node 的立刻调用）（4）requestAnimationFrame（高频的 RAF）（5）I/O（I/O 操作）（6）UI rendering（UI 渲染）(7) 包裹在一个 script 标签中的 js 代码也是一个 Macrotasks留神： （1）每一个 macrotask 的回调函数要放在下一车的结尾去执行！ （2）只有 setImmediate 可能确保在下一轮事件循环立刻失去解决 microtasks：微工作（也称 job）调度在以后脚本执行完结后，立刻执行的工作，以防止付出额定一个 task 的费用。 ...

请实现 DOM2JSON 一个函数，能够把一个 DOM 节点输入 JSON 的格局题目形容: <div> <span> <a></a> </span> <span> <a></a> <a></a> </span></div>把上诉dom构造转成上面的JSON格局{ tag: 'DIV', children: [ { tag: 'SPAN', children: [ { tag: 'A', children: [] } ] }, { tag: 'SPAN', children: [ { tag: 'A', children: [] }, { tag: 'A', children: [] } ] } ]}实现代码如下: function dom2Json(domtree) { let obj = {}; obj.name = domtree.tagName; obj.children = []; domtree.childNodes.forEach((child) => obj.children.push(dom2Json(child))); return obj;}扩大思考:如果给定的不是一个 Dom 树结构 而是一段 html 字符串 该如何解析?那么这个问题就相似 Vue 的模板编译原理 咱们能够利用正则 匹配 html 字符串 遇到开始标签 完结标签和文本 解析结束之后生成对应的 ast 并建设相应的父子关联 一直的 advance 截取残余的字符串 直到 html 全副解析结束 ...

图片懒加载与一般的图片懒加载不同，如下这个多做了 2 个精心解决： 图片全副加载实现后移除事件监听；加载完的图片，从 imgList 移除；let imgList = [...document.querySelectorAll('img')]let length = imgList.length// 修改谬误，须要加上自执行- const imgLazyLoad = function() {+ const imgLazyLoad = (function() { let count = 0 return function() { let deleteIndexList = [] imgList.forEach((img, index) => { let rect = img.getBoundingClientRect() if (rect.top < window.innerHeight) { img.src = img.dataset.src deleteIndexList.push(index) count++ if (count === length) { document.removeEventListener('scroll', imgLazyLoad) } } }) imgList = imgList.filter((img, index) => !deleteIndexList.includes(index)) }- }+ })()// 这里最好加上防抖解决document.addEventListener('scroll', imgLazyLoad)vue-routermode ...

一、应用 slice() 截取1，函数阐明slice() 办法可通过指定的开始和完结地位，提取字符串的某个局部，不会扭转原字符串，以新的字符串返回被提取的局部。 返回 start 到 end-1 处的所有字符语法如下： string.slice(start, end);start（必须）：规定从何处开始选取。如果是正数，那么它规定从字符串尾部开始算起的地位。也就是说，-1 指最初一个字符，-2 指倒数第二个字符，以此类推。 end（可选）：规定从何处完结选取,会取到该下标的前一个字符，不会取到该下标字符。如果没有指定该参数，那么截取的字符串蕴含从 start 到完结的所有字符。如果这个参数是正数，那么就是从start开始，从end完结（end地位从后数，会取到end后面的字符）。 2，应用样例var str = "0123456789"; console.log("原始字符串：", str); console.log("从索引为3的字符起始终到完结：", str.slice(3)); //3456789 console.log("从倒数第3个字符起始终到完结：", str.slice(-3)); //789 console.log("从开始始终到索引为5的前一个字符：", str.slice(0,5)); //01234 console.log("从开始始终到倒数第3个字符的前一个字符：", str.slice(0,-3)); //0123456 console.log("从索引为3的字符起到索引为5的前一个字符：", str.slice(3,5)); //34 console.log("从索引为3的字符起到倒数第3个字符的前一个字符：", str.slice(3,-3)); //3456 二、应用 substring() 截取1，函数阐明substring 办法用于提取字符串中介于两个指定下标之间的字符。不会扭转原字符串，返回一个新的字符串 返回 start 到 end-1 处的所有字符语法如下： string.substring(start, end) start（必须）：一个非负的整数，规定要提取的子串的第一个字符在 string 中的地位。 end （可选）：一个非负的整数，完结的字符下标，会取到该下标的前一个字符，不会取到该下标字符。 （2）注意事项： 如果 start 与 end 相等，那么该办法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 end 大，那么该办法在提取子串之前会先替换这两个参数。如果 start 或 end 为正数，那么它将被替换为 0。2，应用样例var str = "0123456789"; ...

我如何接触到的 Apifox往年三四月份的时候，公司曾经上线的我的项目，发现有局部接口存在反复提交的状况，接口也没做好幂等，导致数据库落下了大量反复数据，于是我就开始优化接口，加了redis分布式锁和一些防重校验，好了，背景介绍结束。 锁是加上了，然而吧，要想测试就须要模仿压测环境，这个时候如果齐全依赖测试共事，很显然不是我的格调，本着宁肯麻烦本人也不麻烦他人的准则（缩小扯皮，节省时间），于是想要本人做并发测试，看一看锁有没有成果。 刚开始先想到了JMeter，毕竟也在测试那多多少少理解过，然而当我装置完筹备应用的时候，发现配置很简单，即便我叫来了测试共事，也很难讲的明确，于是乎我就在网上搜寻的时候，发现了 Apifox。看了这款产品的定位：Postman + Swagger + Mock + JMeter。秒啊，立马装置一个。 开始应用时感觉比拟好的性能1、所有数据同步在云端，即便更换电脑，也能够通过浏览器应用（装置插件即可）； 2、定义好API文档，就能够开始调试、Mock、自动化测试，十分不便； 3、辨别测试环境，因为我的我的项目多而杂，定义多套环境，免去了频繁更改接口上下文的工夫； 4、API文档间接生成在线分享链接，不便了与其余共事共享信息，要比口述来的更加高效； 5、通过数据导入，可将我的项目的所有接口一次性加载进来，导入数据模型后，还能够依据数据结构间接生成接口入参； ...... 因为自动化测试的压测能力感觉这个工具很好还是想说一说自动化测试的模块，测试用例能够间接从已有的接口文档导入，如果须要批量测试，能够通过导入csv文件批量导入测试数据，并且主动生成测试报告。 对于我须要的压测场景，只须要简略的配置循环次数、线程数、距离进展就能够实现，比方我须要测试同一时间的并发场景，只须要配置距离进展为0毫秒，就像这样： 这极大的节俭了我的调试工夫，使我在自测阶段就能够躲避大部分的问题，最终提交给测试时就曾经是一个完成度很高的接口。我顺便把这个工具举荐给了测试共事（顺便好秀了下操作），不会用的中央看一看官网提供的帮忙文档，还是很容易上手的。和之前工具的比照，以及对Apifox的倡议之前应用过几款API调试工具，Postman等，它们给我的感觉是大同小异的，能够满足根本的接口调试工作，然而并没有我感觉很亮眼的性能，当然也有可能是我还没有接触到比拟高级的操作，然而吧，一款优良的软件，首先上手门槛应该是低的，领有很敌对的界面，很具体的文档，以及谐和的沟通社区，这些我都在ApiFox上感触到了。 下载地址：www.apifox.cn

ISO8601格局下，结尾不带Z的日期，应为以后时区的工夫，但苹果IOS下浏览器new Date()时解析有bug，把它解析为了UTC工夫，导致在中国相差8小时。比方：2022-09-19T13:00:00 对应 Mon Sep 19 2022 13:00:00 GMT+0800 (中国规范工夫)2022-09-19T13:00:00Z 对应 Mon Sep 19 2022 21:00:00 GMT+0800 (中国规范工夫)如图： 然而在IOS环境下，一律解析为了 Mon Sep 19 2022 21:00:00 GMT+0800 (中国规范工夫)，导致呈现问题。 能够通过批改Date结构器来解决这个问题： if (isIOS()) { //判断是ios环境 window.Date = class IosDate extends Date { constructor(v1, v2, v3, v4, v5, v6, v7) { var argLen = arguments.length; if (argLen === 0) super(); else if (argLen === 1) super(v1); else super(v1, v2, v3, v4, v5, v6, v7); if (argLen === 1 && /\d+\-\d+\-\d+T\d+:\d+:\d+\.?\d*$/.test(v1)) { this.setMinutes(this.getMinutes() + new Date().getTimezoneOffset()) } } }}

大家好，我卡颂。 针对前端框架，长期存在着各种纷争。其中争执比拟大的是上面两项： 性能之争API设计之争比方，各大新兴框架都会掏出benchmark证实本人优良的运行时性能，在这些benchmark中React通常是垫底的存在。 在API设计上，Vue爱好者认为：“更多的API束缚了开发者，不会因为团队成员程度的差别造成代码品质较大的差别”。 而React爱好者则认为：“Vue大量的API限度了灵活性，JSX yyds”。 上述探讨归根结底是框架性能与灵活性的取舍。 本文将介绍一款名为legendapp的状态治理库，他与其余状态治理库设计理念上有很大不同。 在React中正当应用legendapp，能够极大晋升利用的运行时性能。 但本文的目标并不仅仅是介绍一个状态治理库，而是与你一起感触随着性能进步，框架灵活性产生的变动。 欢送退出人类高质量前端框架群，带飞 React的性能优化React性能的确不算太好，这是不争的事实。起因在于React自顶向下的更新机制。 每次状态更新，React都会从根组件开始深度优先遍历整棵组件树。 既然遍历形式是固定的，那么如何优化性能呢？答案是寻找遍历时能够跳过的子树。 什么样的子树能够跳过遍历呢？显然是没有发生变化的子树。 在React中，变动次要由上面3个因素造成： statepropscontext他们都可能扭转UI，或者触发useEffect。 所以，一棵子树中如果存在上述3个因素的扭转，可能会发生变化，也就不能跳过遍历。 从变动的角度，咱们再来看看React中的性能优化API，对于上面2个： useMemouseCallback他们的实质是 —— 缩小props的变动。 对于上面2个： PureComponentReact.memo他们的实质是 —— 让比拟props的形式从全等比拟变为浅比拟。 状态治理库能做的优化理解了React的性能优化，咱们再来看看状态治理库能为性能优化做些什么呢。 性能瓶颈次要产生在更新时，所以性能优化的方向次要有两个： 缩小不必要的更新缩小每次更新时要遍历的子树像Redux语境下的useSelector走的就是第一条路。 对于后一条路，缩小更新时遍历的子树通常意味着缩小上文介绍的3因素的变动。 PS：黄玄开发的React Forget，是一个能够产生等效于useMemo、useCallback代码的编译器，目标就是缩小三要素中props的变动。状态治理库在这方面能施展的中央很无限，因为不论状态治理库如何奇妙的封装，也无奈覆盖他操作的其实是一个React状态这一事实。 比方，尽管Mobx为React带来了细粒度更新，但并不能带来与Vue中细粒度更新相匹配的性能，因为Mobx最终触发的是自顶向下的更新。 legendapp的思路本文要介绍的legendapp也走的是第二条路，但他的理念蛮特地的 —— 如果缩小3因素的数量，那不就能缩小3因素的变动么？ 举个极其的例子，如果一个宏大的利用中一个状态都没有，那更新时整棵组件树都能被跳过。 上面是个Hook实现的计数器例子，useInterval每秒触发一次回调，回调中会触发更新： function Counter() { const [count, setCount] = useState(1) useInterval(() => { setCount(v => v + 1) }, 1000) return <div>Count: {count}</div>}依据3因素法令，Counter中蕴含名为count的state，且每秒发生变化，则更新时Counter不会被跳过（体现为Counter每秒都会render）。 上面是应用legendapp革新的例子： function Counter() { const count = useObservable(1) useInterval(() => { count.set(v => v + 1) }, 1000) return <div>Count: {count}</div>}在这个例子中，应用legendapp提供的useObservable办法定义状态count。 ...

本文作者：江水背景: Recoil 是 Facebook 推出的一款专门针对React利用的状态治理库，在肯定水平上代表了目前的一种发展趋势，在应用时感觉一些理念很先进，能极大地满足作为一个前端开发者的数据需要，本文对 Recoil 的这些个性做一个梳理。 依据官网的介绍，Recoil 的数据定义了一个有向图 (directed graph)，状态的变更是通过扭转图的根节点 (atom)，再通过纯函数 (selector) 流向 React 组件。 同时 Recoil 的状态定义是增量和分布式的，增量意味着咱们能够在用的时候再定义新的状态，而不用将所有状态提前定义好再生产。分布式意味着状态的定义能够放在任何地位，不用对立注册到一个文件中。这样的益处是一方面能够简化状态的定义过程，另一方面也能够很好地利用在 code-splitting 场景。 在一个利用中开启 Recoil 非常简单，只须要包裹一个 RecoilRoot 即可。 import { RecoilRoot } from 'recoil';ReactDOM.render( <RecoilRoot> <App /> </RecoilRoot>, root);状态定义，原子和选择器Recoil 容许应用 atom 和 selector 两个函数定义根底和推导状态。 atom 根本用法，这里定义了相干的原子属性，须要应用惟一 key 来形容这个 atom 。 Recoil 中不容许反复的 key 呈现，包含前面提到的 selector 。 const firstNameAtom = atom({ key: 'first name atom', default: ''});const lastNameAtom = atom({ key: 'last name atom', default: ''});应用时通过 useRecoilState 这个 hooks 获取状态，能够看到它和 useState 很像，所以能够很轻松地将传统的React状态迁徙到 Recoil 中。 ...

Chrome 关上一个页面须要启动多少过程？别离有哪些过程？关上 1 个页面至多须要 1 个网络过程、1 个浏览器过程、1 个 GPU 过程以及 1 个渲染过程，共 4 个；最新的 Chrome 浏览器包含：1 个浏览器（Browser）主过程、1 个 GPU 过程、1 个网络（NetWork）过程、多个渲染过程和多个插件过程。 浏览器过程：次要负责界面显示、用户交互、子过程治理，同时提供存储等性能。渲染过程：外围工作是将 HTML、CSS 和 JavaScript 转换为用户能够与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该过程中，默认状况下，Chrome 会为每个 Tab 标签创立一个渲染过程。出于平安思考，渲染过程都是运行在沙箱模式下。GPU 过程：其实，Chrome 刚开始公布的时候是没有 GPU 过程的。而 GPU 的应用初衷是为了实现 3D CSS 的成果，只是随后网页、Chrome 的 UI 界面都抉择采纳 GPU 来绘制，这使得 GPU 成为浏览器广泛的需要。最初，Chrome 在其多过程架构上也引入了 GPU 过程。网络过程：次要负责页面的网络资源加载，之前是作为一个模块运行在浏览器过程外面的，直至最近才独立进去，成为一个独自的过程。插件过程：次要是负责插件的运行，因插件易解体，所以须要通过插件过程来隔离，以保障插件过程解体不会对浏览器和页面造成影响。XSS 和 CSRF 1. XSS 涉及面试题：什么是 XSS 攻打？如何防备 XSS 攻打？什么是 CSP？XSS 简略点来说，就是攻击者想尽一切办法将能够执行的代码注入到网页中。XSS 能够分为多种类型，然而总体上我认为分为两类：长久型和非长久型。长久型也就是攻打的代码被服务端写入进数据库中，这种攻打危害性很大，因为如果网站访问量很大的话，就会导致大量失常拜访页面的用户都受到攻打。举个例子，对于评论性能来说，就得防备长久型 XSS 攻打，因为我能够在评论中输出以下内容 这种状况如果前后端没有做好进攻的话，这段评论就会被存储到数据库中，这样每个关上该页面的用户都会被攻打到。非长久型相比于前者危害就小的多了，个别通过批改 URL 参数的形式退出攻打代码，诱导用户拜访链接从而进行攻打。举个例子，如果页面须要从 URL 中获取某些参数作为内容的话，不通过过滤就会导致攻打代码被执行<!-- http://www.domain.com?name=<script>alert(1)</script> --><div>{{name}}</div> 然而对于这种攻击方式来说，如果用户应用 Chrome 这类浏览器的话，浏览器就能主动帮忙用户进攻攻打。然而咱们不能因而就不进攻此类攻打了，因为我不能确保用户都应用了该类浏览器。 ...

对keep-alive的了解HTTP1.0 中默认是在每次申请/应答，客户端和服务器都要新建一个连贯，实现之后立刻断开连接，这就是短连贯。当应用Keep-Alive模式时，Keep-Alive性能使客户端到服务器端的连贯继续无效，当呈现对服务器的后继申请时，Keep-Alive性能防止了建设或者从新建设连贯，这就是长连贯。其应用办法如下： HTTP1.0版本是默认没有Keep-alive的（也就是默认会发送keep-alive），所以要想连贯失去放弃，必须手动配置发送Connection: keep-alive字段。若想断开keep-alive连贯，需发送Connection:close字段；HTTP1.1规定了默认放弃长连贯，数据传输实现了放弃TCP连接不断开，期待在同域名下持续用这个通道传输数据。如果须要敞开，须要客户端发送Connection：close首部字段。Keep-Alive的建设过程： 客户端向服务器在发送申请报文同时在首部增加发送Connection字段服务器收到申请并解决 Connection字段服务器回送Connection:Keep-Alive字段给客户端客户端接管到Connection字段Keep-Alive连贯建设胜利服务端主动断开过程（也就是没有keep-alive）： 客户端向服务器只是发送内容报文（不蕴含Connection字段）服务器收到申请并解决服务器返回客户端申请的资源并敞开连贯客户端接管资源，发现没有Connection字段，断开连接客户端申请断开连接过程： 客户端向服务器发送Connection:close字段服务器收到申请并解决connection字段服务器回送响应资源并断开连接客户端接管资源并断开连接开启Keep-Alive的长处： 较少的CPU和内存的使⽤（因为同时关上的连贯的缩小了）；容许申请和应答的HTTP管线化；升高拥塞管制 （TCP连贯缩小了）；缩小了后续申请的提早（⽆需再进⾏握⼿）；报告谬误⽆需敞开TCP连；开启Keep-Alive的毛病： 长时间的Tcp连贯容易导致系统资源有效占用，节约系统资源。用过 TypeScript 吗？它的作用是什么？为 JS 增加类型反对，以及提供最新版的 ES 语法的反对，是的利于团队合作和排错，开发大型项目 事件委托的应用场景场景：给页面的所有的a标签增加click事件，代码如下： document.addEventListener("click", function(e) { if (e.target.nodeName == "A") console.log("a");}, false);然而这些a标签可能蕴含一些像span、img等元素，如果点击到了这些a标签中的元素，就不会触发click事件，因为事件绑定上在a标签元素上，而触发这些外部的元素时，e.target指向的是触发click事件的元素（span、img等其余元素）。 这种状况下就能够应用事件委托来解决，将事件绑定在a标签的外部元素上，当点击它的时候，就会逐级向上查找，晓得找到a标签为止，代码如下： document.addEventListener("click", function(e) { var node = e.target; while (node.parentNode.nodeName != "BODY") { if (node.nodeName == "A") { console.log("a"); break; } node = node.parentNode; }}, false);异步任务调度器形容：实现一个带并发限度的异步调度器 Scheduler，保障同时运行的工作最多有 limit 个。 实现： class Scheduler { queue = []; // 用队列保留正在执行的工作 runCount = 0; // 计数正在执行的工作个数 constructor(limit) { this.maxCount = limit; // 容许并发的最大个数 } add(time, data){ const promiseCreator = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(data); resolve(); }, time); }); } this.queue.push(promiseCreator); // 每次增加的时候都会尝试去执行工作 this.request(); } request() { // 队列中还有工作才会被执行 if(this.queue.length && this.runCount < this.maxCount) { this.runCount++; // 执行先退出队列的函数 this.queue.shift()().then(() => { this.runCount--; // 尝试进行下一次工作 this.request(); }); } }}// 测试const scheduler = new Scheduler(2);const addTask = (time, data) => { scheduler.add(time, data);}addTask(1000, '1');addTask(500, '2');addTask(300, '3');addTask(400, '4');// 输入后果 2 3 1 4参考前端进阶面试题具体解答 ...

前言当咱们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对我的项目做性能优化吗？或者你理解哪些性能优化的办法？听到这个问题的你可能是这样的： 似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的答复。那么，本文就带你简略理解前端性能优化的几个次要方面，旨在抛砖引玉。 一、资源的合并和压缩申请过程中一些潜在的性能优化点： dns是否能够通过缓存缩小dns查问工夫？网络申请的过程如何走最近的网络环境？雷同的动态资源是否能够缓存？是否缩小http申请的大小和次数？是否进行服务端渲染？总结： 深刻了解http申请的过程是前端性能优化的外围。 优化外围 缩小http申请数量；缩小申请资源的大小；google首页案例学习 html压缩；css压缩；js的压缩和凌乱；文件合并；开启gzip；1.html压缩HTML代码压缩就是压缩一些在文本文件中有意义，然而在HTML中不显示的字符，包含空格，制表符，换行符等，还有一些其余意义的字符，如HTML正文也能够被压缩； 一个简略的计算： google的流量，占到整个互联网的40%，预计2016年寰球网络流量将达到1.3ZB(1ZB = 10^9TB)，那么google在2016年的流量就是1.3ZB * 40%，如果google每1MB申请缩小一个字节，每年能够节俭流量近500TB流量。 如何进行html压缩 应用在线网站进行压缩；nodejs提供的html-minifier工具；后端模板引擎渲染压缩；2.css代码压缩分为两局部： 有效代码的压缩；css语义合并；如何进行css压缩 应用在线网站进行压缩；应用html-minifier对html中的css进行压缩；应用clean-css对css进行压缩；3.js压缩与凌乱（美化）包含： 有效字符的删除（空格，回车等）；剔除正文；代码语义的缩减和优化；代码爱护（如果代码不经解决，客户端可间接窥探代码破绽）；JS压缩与凌乱（美化） 应用在线网站进行压缩应用html-minifier对html中的js进行压缩；应用uglify.js2对js进行压缩；4.文件合并文件合并的益处： 右边的示意应用http长链接keep-alive但不合并申请的状况，须要分三次去获取a.js、b.js、c.js；左边是应用长链接并且合并申请的状况，只须要发送一次获取合并文件a-b-c.js的申请，就能将三个文件都申请回来。 不合并申请有下列毛病： 文件与文件之间有插入的上行申请，会减少N-1个网络提早；受丢包问题的影响更重大：因为每次申请都可能呈现丢包的状况，缩小申请能无效缩小丢包状况；keep-alive自身也存在问题：通过代理服务器时可能会被断开；文件合并存在的问题 首屏渲染问题：当申请js文件的时候，如果页面渲染只依赖a.js文件，因为文件合并，须要期待合并后的a-b-c.js文件申请回来能力持续渲染，这样就会导致页面渲染速度变慢。这种状况大多呈现在现代化的前端框架，如Vue等的应用过程中；缓存生效问题：合并后的文件a-b-c.js中只有其中一个文件（比方a.js）发生变化，那么整个合并文件都将生效，而不采纳文件合并就不会呈现这种状况；应用倡议 公共库合并：将不常常发生变化的公共组件库文件进行合并；将不同页面的js文件独自合并：比方在单页面利用SPA中，当路由跳转到具体的页面时才申请该页面须要的js文件；如何进行文件合并 应用在线网站进行文件合并；应用nodejs实现文件合并；应用webpack等前端构件化工具也能够很好地实现；二、图片相干的优化有损压缩过程： 一张JPG图片的解析别离要进行： 色彩空间的转换：从RGB的色彩空间转到其余的色彩空间 ；进行重采样：辨别高频和低频的色彩变换；进行DCT过程：对高频的色彩采样后果进行压缩，这样压缩的收益会比拟大；再对数据进行量化；最初进行编码（encoding）；最终失去JPEG-Compressed Image Data，即真正显示进去的JPG图片。尽管这是一种有损压缩，然而很多状况下，这些损失的数据并不影响显示； png8/png24/png32之间的区别 png8：256色 + 反对通明；png24：2^24色 + 不反对通明；png32：2^32色 + 反对通明；不同格局图片罕用的业务场景 jpg有损压缩，压缩率高，反对通明；利用：大部分不须要通明图片的业务场景；png反对通明，浏览器兼容好；利用：大部分须要通明图片的业务场景；webp（2010年由谷歌推出）压缩水平更好，在ios webview中有兼容性问题；利用：安卓全副；svg矢量图，代码内嵌，绝对较小，用于图片款式绝对简略的场景；利用：比方logo和iconfont；1.图片压缩针对实在图片状况，舍弃一些绝对无关紧要的色调信息，对图片进行压缩； 2.css雪碧图将网站上用到的一些图片整合到一张独自的图片中，从而缩小网站HTTP申请数量。原理为：设定整张雪碧图可示区域，将想要显示的图标定位到该处（左上角）；毛病：整合图片比拟大时，一次加载比较慢。参考 前端进阶面试题具体解答 如天猫的雪碧图：很多状况下，并不是所有的小图标都放在一张雪碧图中，而是会适当进行拆分。当初应用雪碧图的场景比拟少了。 主动生成雪碧图款式 3.网页内联图片（Image inline）将图片的内容内嵌到html当中，缩小网站的HTTP申请数量，罕用于解决小图标和背景图片。网页内联图片写法为： <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." alt="">毛病： 浏览器不会缓存内联图片资源；兼容性较差，只反对ie8以上浏览器；超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢；所以要依据场景应用，不过内联图片缩小HTTP申请的长处还是很显著的。比方，在开发中小于4KB或8KB的图片都会通过构建工具主动inline到HTML中，这种状况下Image inline带来的图片大小增长其实是比减少HTTP申请次数更优的。 4.矢量图SVG与iconfont应用iconfont解决icon问题 应尽量应用该形式，比方能够采纳阿里巴巴矢量图库： 能够抉择格局进行下载： 能够看到它们的大小有着显著的差别： 应用SVG进行矢量图的管制 SVG意为可缩放矢量图形（Scalable Vector Graphics）。SVG 应用 XML 格局定义图像。 5.webpwebp的劣势体现在它具备更优的图像压缩算法，能带来更小的图片体积，而且领有肉眼辨认无差别的图像品质；同时具备了无损和有损的压缩模式、Alpha通明以及动画的个性。在JPEG和PNG上的转化成果都十分优良、稳固和对立。安卓上不存在兼容性问题，举荐安卓下应用。 以下为淘宝网首页申请的图片： 能够看到，图片中大量地增加了webp格局的抉择。.jpg_.webp示意当浏览器反对webp时采纳webp格局，否则采纳jpg格局。 上面为B站首页的图片，能够看到根本都采纳了webp格局： 同一张图片jpg格局和webp格局压缩率有着显著的差别： ...

首发于Enaium的集体博客 首先应用npm装置gatsby，应用gatsby –version命令能够查看是否装置 npm install -g gatsby-cli应用new命令前面跟着目录名，即可创立一个gatsby我的项目 gatsby new website应用develop参数即可启用gatsby服务 gatsby develop进入到8000端口后即可拜访默认的页面，不过本文章是创立集体博客 在创立我的项目时前面跟着一个github地址，这个是gatsby官网的一个博客模板 gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world 这个是我的项目的目录构造 C:.├─content│ └─blog│ ├─hello-world│ ├─my-second-post│ └─new-beginnings├─src│ ├─components│ ├─images│ ├─pages│ └─templates└─staticcontent下次要是markdown文件，但如果要被辨认为blog还须要在blog里创立markdown文件 次要看blog里都有哪些文件，每个文件夹下都有一个index.md文件，这里会依据文件夹的名称来决定地址名是什么 C:.├─hello-world│ index.md│ salty_egg.jpg│├─my-second-post│ index.md│└─new-beginnings index.md这里能够间接在blog中创立markdown文件，地址名就是markdown文件名 每个markdown文件的前几行都会有用3个横杠抱起来的内容，这个就是Front-matter格局，博客的信息都会从这里获取，title是博客的题目，date是公布工夫，description是形容，其中工夫必须恪守正确的格局 ---title: "如何应用Gatsby创立本人的博客"date: 2022-09-28T11:16:00+0800categories: javascript---当初来介绍如何应用GitHub的pages服务，首先须要在我的项目下装置gh-pages npm install gh-pages --save-dev在我的项目的gatsby的config文件中增加pathPrefix，这里抉择没前缀 module.exports = { pathPrefix: "/"}在scripts中增加deploy，意思就是让gatsby生成页面，随后用gh-pages将public的目录中所有文件推送到我的项目的gh-pages分支中，应用npm run deploy即可部署到GitHub中 "scripts": { "deploy": "gatsby build --prefix-paths && gh-pages -d public"}进入到我的项目的setting页面，抉择左侧的pages，将分支选为gh-pages这个分支 如果须要没有本人的域名就把仓库设置为这个格局，留神的是GitHub的用户名而不是昵称，如果有本人域名那就让域名解析CNAME到这个地址中，并且在我的项目的static目录下创立CNAME文件，填入你的域名

slice() 办法可从已有的数组中返回选定的元素。原数组不扭转返回新选定的元素组成的新数组。 数组.slice(start,end) start: 可选 数组从什么地位开始抉择，如果没设置默认值是0，从开始抉择。 end ：可选，数组截取到哪里，默认截取到数组的尾部 var arr=[1,3,5,7,9];var arr1=arr.slice();//[1,3,5,7,9];从头开始选取var arr2=arr.slice(1);//[3,5,7,9];从下标1开始抉择var arr3=arr.slice(-1);//[9];从倒数第1项开始抉择var arr4=arr.slice(2,4);//[5,7]从第二项抉择到第4项var arr5=arr.slice(-3,4);//[5,7]从倒数第3项抉择到负数第4项var arr6=arr.slice(-3,-1);//[5,7]从倒数第三项抉择到倒数第一项正文：您可应用负值从数组的尾部选取元素。 正文：如果 end 未被规定，那么 slice() 办法会选取从 start 到数组结尾的所有元素。 重点 //返回一个对象，对象有max和min属性，求出以后参数的最大值和最小值function fn1(){ var arr= Array.prototype.slice.call(arguments); if(arr.length===0) return; arr=arr.sort(function(a,b){return a-b}); return {max:arr[arr.length-1],min:arr[0]};}fn1(3,5,7,9);//｛max:9,min:3在这个案例中Array.prototype.slice.call(arguments)为什么会将伪数组转换为数组呢 这个问题牵扯一下两种概念 1、prototype 原型，所有的数组对象如果须要应用什么办法那就必须将这个办法减少在原型中，而且在必须在外面应用this，这个this就是这个数组对象 例如： //求数组中数值元素的和Array.prototype.sum=function(){ var sum=0; //this就是调用这个办法的数组 for(var i=0;i<this.length;i++){ //判断这个数组的第i项是不是数值 if(!isNaN(this[i])){ sum+=this[i]; } } return sum; };var arr=[10,15,20,30,40];var sum=arr.sum();console.log(sum);//115;2、call 的作用，call在调用函数时能够代替函数中的this，例如： function fn2(){ this.a=3; this.b=10;}fn2();//因为间接调用函数this就是window，//因而，这里等于给window减少属性a和b。//那么window的属性其实就是变量,因而实际上是减少变量a和bconsole.log(a,b);//3,10var obj={};fn2.call(obj);//这里将obj带入函数后代替函数中this，//因而，其实就是给obj减少属性a和属性bconsole.log(obj.a,obj.b);//3,10;那么当初咱们解释一下Array.prototype.slice.call(arguments)。首先咱们先模拟数组的原生API写一下slice，猜想哦，谁也不晓得JS底层怎么写的。 Array.prototype.slice1=function(start,end) { if (!start) start = 0; if (!end) end = this.length; if (start < 0) start = this.length + start; if (end < 0) end = this.length + end; var arr = []; for (var i = start; i < end; i++){ arr.push(this[i]); } return arr; }; var arr=[1,3,5,7,9]; var arr1=arr.slice1(2,4);//[5,7];下面这个就是模仿了slice的函数内容。那么在这里，this就是这个数组。如果咱们应用Array.prototype.slice1.call(arguments);那么就是把下面的这个办法中slice1函数中this用arguments代替了，类数组也是有下标的，因而，就相当于遍历取出每个下标存储在新的数组中，并且返回这个新数组。而这里call（）前面没有带参，意味着间接调用了slice1，start和end都没有传入，当没有传参时默认从开始抉择到尾部所有的元素放在新数组中，因而才能够转换为新数组。 ...

文章只是记录应用该插件的过程： <template> <div class="json-editor"> <textarea ref="textarea" /> </div></template>/**导入对应的包import .....**/// 创立this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, { lineNumbers: true, mode: 'application/json', gutters: ['CodeMirror-lint-markers'], theme: 'rubyblue', lint: true, readOnly: true // 只读 })// 销毁this.jsonEditor.getWarpperElement().parentNode.removeChild(this.jsonEditor.getWarpperElement())

前言this关键字是一个十分重要的语法点。毫不夸大地说，不了解它的含意，大部分开发工作都无奈实现。 简略说，this就是属性或办法“以后”所在的对象。 this.property下面代码中，this就代表property属性以后所在的对象。 上面是一个理论的例子。 var person = { name: '张三', describe: function () { return '姓名：'+ this.name; }};person.describe()// "姓名：张三"下面代码中，this.name示意name属性所在的那个对象。因为this.name是在describe办法中调用，而describe办法所在的以后对象是person，因而this指向person，this.name就是person.name。 因为对象的属性能够赋给另一个对象，所以属性所在的以后对象是可变的，即this的指向是可变的。 var A = { name: '张三', describe: function () { return '姓名：'+ this.name; }};var B = { name: '李四'};B.describe = A.describe;B.describe() // "姓名：李四"下面代码中，A.describe属性被赋给B，于是B.describe就示意describe办法所在的以后对象是B，所以this.name就指向B.name。 只有函数被赋给另一个变量，this的指向就会变。 var A = { name: '张三', describe: function () { return '姓名：'+ this.name; }};var name = '李四';var f = A.describe;f() // "姓名：李四"下面代码中，A.describe被赋值给变量f，外部的this就会指向f运行时所在的对象（本例是顶层对象，在浏览器中就是window），因而name为全局name的值。 本质JavaScript 语言之所以有 this 的设计，跟内存外面的数据结构有关系。 ...

前言作用域和作用域链是所有JavaScript开发人员每天都要接触和利用的内容。不论是面试中的作用域链的面试考查，还是日常代码研发中变量与作用域链的构建，它的身影简直无处不在。它就像一顶优良厨师的厨师帽，只有咱们走进厨房，咱们就要将它整顿好，套在头上。没有它整洁洁净的戴在头上，你就不是一名好的JavaScript工程师。 其实，作为一名前端工程师，我也已经纳闷过：基本上所有的计算机语言都具备作用域的概念，然而为何JavaScript开发人员总是对作用域这个概念执着不已？直到，我屡次在编写代码过程中遇到波及到作用域的问题后，我才慢慢理解这个问题并去认真钻研。 而这篇文章，就是想要和大家聊聊无关JavaScript作用域以及作用域链的那些事件，以及针对它们的一些咱们在代码中优化小技巧。 内容对于简直所有的编程语言来说，最根本的性能之一，就是贮存变量当中的值并且能在之后对这个值进行拜访和批改。这种能力的引入，是程序的状态存在的根底。然而，能力的引入须要咱们解决几个问题，例如：变量存储在哪里？以何种模式存储？须要读取和批改变量的时候，以什么形式获取到这个变量？ 很显著，为了解决这些问题，咱们须要一套设计良好的规定来存储变量，并且之后能够不便的找到这些变量。与此同时，整套残缺规定的设计就会衍生出额定规定概念。而作用域，就是这套规定下衍生进去的概念。 作用域咱们能够把作用域了解为下面讲到的这套规定下的限定范畴。作用域的职责是，在这段限定范畴中依据这套设计好的规定存储所申明的变量，并且提供批改该变量的反对。在变量的拜访权限平安上，作用域还承当着爱护以后作用域内的变量不被内部作用域拜访的权限爱护作用。 通过类比，咱们能够把作用域设想成一个气泡。在这个气泡里所申明的变量成员被蕴含在其中。每个气泡都装备有一位有准则的管家，将所有的成员治理起来，并针对他们申明的地位和要求对它们提供爱护。当气泡中代码语句想要拜访和批改变量成员时，管家会联合变量成员的要求关联对应拜访和批改操作。 随着ECMAScript规范的一直倒退和欠缺，JavaScript目前存在着四种作用域类型： 全局作用域（Global Scope）: JavaScript语言环境的最顶级作用域，在语言环境初始化时创立。模块作用域（Module Scope）: 由ECMAScript模块规范（ES Module）引入，在解析ECMAScript模块时创立。函数作用域（Function Scope）: 在函数申明function() {}或者() => {}时创立。块级作用域（Block Scope）: 由ECMAScript2015的变量申明标识符let和const引入，在应用这两者进行变量申明时，依据最近的一对花括号{}创立。/* 全局作用域 start，JavaScript语言环境初始化时就被创立 *//* 模块作用域 start，作为ES Module解析和执行时被创立 */let name = 'Wu';{ /* 块级作用域 start，const进行变量申明在最近的花括号{}内创立 */ const prefix = Hardy; name = prefix + name; /* 块级作用域 end */}export function sayMyName(myName) { /* 函数作用域 start，函数申明时主动创立，初始化默认蕴含函数的形参变量 */ if (!myName) { /* 块级作用域 start */ const noNameAnswer = 'Sorry!'; console.log(noNameAnswer); return; /* 块级作用域 end */ } const wordPrifix = 'Hi! My Name is '; const answer = wordPrifix + myName + '.'; console.log(answer); /* 函数作用域 end */}/* 模块作用域 end *//* 全局作用域 end */作用域的嵌套作用域在应用上具备嵌套特色。一个作用域可能在本身外部创立一个新作用域从而造成外部和内部作用域的嵌套关系。 ...

Javascript 的隐式强制只是指 Javascript 试图将意外的值类型强制为预期的类型。因而，您能够在须要数字的中央传递一个字符串，在须要字符串的中央传递一个对象等，它会尝试将其转换为正确的类型。这是最好防止的 Javascript 性能。 3 * "3" //91 + "2" + 1 //121true + true //210 - true //9const foo = { valueOf: () => 2}3 + foo // 54 * foo // 8const bar = { toString: () => " promise is a boy :)"}1 + bar // "1 promise is a boy :)"4 * [] // 04 * [2] // 84 + [2] // "42"4 + [1, 2] // "41,2"4 * [1, 2] // NaN"string" ? 4 : 1 // 4undefined ? 4 : 1 // 1数字表达式中的非数字值字符串每当您在波及以下任一运算符的数字表达式中将字符串作为操作数传递时：-, *, /, %，数字的转换过程相似于对值调用内置Number函数。这非常简单，任何仅蕴含数字字符的字符串都将转换为其等效的数字，但蕴含非数字字符的字符串将返回NaN. 如下图， ...

/** * @param {number} x * @return {boolean} */var isPalindrome = function (x) { if (x < 0) { return false; } let num = x; let reverse = 0; while (num != 0) { reverse = reverse * 10 + (num % 10); num = ~~(num / 10); } return reverse === x;};本文由一文多发经营工具平台 EaseWriting 公布

根本援用类型援用值（对象）是某个特定援用类型的实例。援用类型是把数据和性能组织到一起的构造。 援用类型有时也被称为对象定义，因为它们形容了本人的对象应有的属性和办法。 Date参考了Java晚期版本中的java.util.Date。因而，Date类型将日期保留为自协调世界时（UTC，Universal Time Coordinated）工夫1970年1月1日午夜（零时）至今所通过的毫秒数。 Date类型能够准确示意1970年1月1日之前及之后285 616年的日期。 要基于其余日期和工夫创立日期对象，必须传入其毫秒示意。ECMAScript为此提供了两个辅助办法：Date.parse()和Date.UTC()。 Date.parse()。接管一个示意日期的字符串参数，尝试将这个字符串转换为示意该日期的毫秒数。 ES5定义了反对的日期格局： “月/日/年”“月名 日, 年""周几 月名 日 年 时:分:秒 时区"ISO 8601扩大格局 “YYYY-MM-DDTHH:mm:ss.sssZ”如果传入的字符串不示意日期，则返回NaN。如果把示意日期的字符串传给Date构造函数，会在后盾主动调用Date.parse()。对越界的日期，不同的浏览器有不同的解决。 Date.UTC()。也返回日期的毫秒示意。 应用的参数为年、零起点月数（0-11）、日（1-31），时（0-23）、分、秒和毫秒。只有年和月是必须的。也会被Date构造函数隐式调用。 创立的是本地日期，非GMT日期（参数是GMT时区下的工夫）。 Date.now()。返回示意办法执行时日期和工夫的毫秒数。可用于代码剖析。继承的办法： toLocaleString()：返回与浏览器运行的本地环境统一的日期和工夫。（蕴含AM/PM，不蕴含时区信息）toString()：返回带时区信息的日期和工夫。（工夫为24小时制）valueOf()：返回的是日期的毫秒示意。操作符（如小于号和大于号）能够间接应用它返回的值。（能够确保日期先后的一种简略形式）日期格式化办法：返回字符串（与具体实现无关，因浏览器而异） toDateString()：显式日期中的周几、月、日、年；toTimeString()：显式日期中的时、分、秒和时区；toLocaleDateString()：显式日期中的周几、月、日、年（与地区无关）toLocakeTimeString()：显式日期中的时、分、秒；toUTCString()：显示残缺的UTC日期。GMT = UTC+0（https://www.zhihu.com/questio...） RegExp相似Perl的简洁语法创立： let expression = /pattern/flags;可带0个或多个flags（标记）： g：全局模式i：不辨别大小写m：多行模式y：粘附模式，示意只查找从lastIndex开始及之后的字符串u：Unicode模式，启用Unicode匹配s：dotAll模式，示意元字符.匹配任何字符（包含\n或\r）所有元字符在pattern中必须本义，包含： ( [ { \ ^ $ | } ] ) ? * + . 也能够应用RegExp构造函数来创立，接管两个参数：模式字符串和（可选的）标记字符串。因为RegExp的模式参数是字符串，所以在某些状况下须要二次本义。 应用RegExp也能够基于已有的正则表达式实例，并可选择性地批改它们的标记。 构造函数属性： 会依据最初执行的正则表达式操作而变动，能够通过两种不同的形式拜访它们，一个全名和一个简写。 能够提取出与exec()和test()执行的操作相干的信息。 input（$_）最初搜寻的字符串leftContext（$`）、rightContext（$'） $` input字符串中呈现在lastMatch后面的文本 $' input字符串中呈现在lastMatch前面的文本 lastParen（$+）、lastMatch（$&） $+ 最初匹配的捕捉组 $& 最初匹配的文本 还能够存储最多9个捕捉组的匹配项，通过RegExp.$1~RegExp.$9来拜访。原型属性 globalignoreCaseunicodestickymultilinedotAlllastIndex：整数，示意在源字符串中下一次搜寻的开始地位，始终从0开始source：正则表达式的字面量字符串（不是传给构造函数的模式字符串），没有结尾和结尾的斜杆flags：正则表达式的标记字符串source和flags属性返回的是规范化之后能够在字面量中应用的模式 lastIndex在非全局模式下始终不变 原型办法 exec 次要用于配合捕捉组应用。只接管一个参数，即要利用模式的字符串。 如果找到，则返回蕴含第一个匹配信息的数组（蕴含两个额定的属性：index和input）；如果没有找到，就返回null。 ...

变量、作用域与内存变量特定工夫点一个特定值的名称。 分类 原始值：按值拜访 复制：两个独立应用、互不烦扰援用值（由多个值形成的对象）：按援用拜访 操作对象时，实际上操作的是对该对象的援用（reference）而非理论的对象自身 复制：复制的值实际上是一个指针，指向存储在堆内存中的对象。实际上两个变量指向同一个对象函数传参：都是按值传递，如果是援用值，就跟援用值变量的复制一样判断类型 typeof 最适宜用来判断一个变量是否为原始类型，对援用值的用途不大。 instanceof 什么类型的对象（由对象的原型链决定） 作用域执行上下文 变量或函数的上下文决定了它们能够拜访哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象（variable object），而这个上下文中定义的所有变量和函数都存在于这个对象上。 全局上下文是最外层的上下文。依据ECMAScript实现的宿主环境，示意全局上下文的对象可能不一样。在浏览器中，就是常说的window对象。 上下文在其所有代码都执行结束后会被销毁，包含定义在它下面的所有变量和函数。 上下文栈。当代码执行流进入函数时，函数的上下文被推倒一个上下文栈上；在函数执行结束之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。 作用域链（scope chain）。决定了各级上下文中的代码在拜访变量和函数时的程序。代码正在执行的上下文的变量对象始终位于作用域链的最前端；全局上下文的变量对象始终是作用域链的最初一个变量对象。上下文之间的连贯是线性的、有序的，外部能够拜访内部，内部无法访问外部。 函数参数被认为是以后上下文中的变量。 标识符解析。搜寻过程始终从作用域链的最前端开始，逐级往后，直到找到或者达到最初端。 部分作用域中定义的变量会产生遮蔽（下层同名变量）成果，援用全局变量能够应用齐全限定的写法：window.propName。 加强作用域链 在作用域链前端长期增加一个上下文。 try/catch的catch语句：创立一个新的变量对象（蕴含要抛出的谬误对象的申明）with：增加指定的对象eval()：批改作用域链。 不同关键字的申明 var 通过var定义的全局变量和函数都会成为window对象的属性和办法。 应用var申明变量时，变量会被主动增加到最靠近的上下文。 会导致变量申明被晋升，在（代码中）变量申明之前就能够拜访到变量。 let/const 顶级申明不会定义在全局上下文中，但在作用域链解析上成果是一样的。 块作用域由最近的一对蕴含花括号界定。不能反复申明。 const申明不能从新赋值，繁多类型且不可批改。 V8引擎针对const的优化：const申明的变量都替换成理论的值，而不通过查问表进行变量查找。 变量查找（作用域链） 标识符查找：部分上下文->沿作用域链 拜访局部变量比全局变量要快，因为不必切换作用域。 垃圾回收。GC执行环境负责在代码执行时治理内存（内存调配和闲置资源回收）。 基本思路：确定哪个变量不会再应用，而后开释它占用的内存。此过程是周期性的，每隔肯定工夫就会主动运行。（近似且不完满的计划，是否还有用属于“不可判定”的问题。不是所有时候都会很显著） 如何标记未应用的变量，两种次要的标记策略： 标记清理mark-and-sweep：最罕用 过程： 标记内存中存储的所有变量；将所有在上下文中的变量，以及被在上下文中的变量援用的变量的标记去掉；之后再被加上标记的变量，就是待删除的了，因为任何在上下文中的变量都拜访不到它们了；GC程序做一次内存清理，销毁带标记的所有值并发出它们的内存。援用计数reference counting GC下次运行的时候会开释援用数为0的值的内存。 重大的问题：循环援用。典型：IE8及更早版本的BOM和DOM（应用COM对象）。 应该在确保不应用的状况下切断原生JavaScript对象与DOM元素之间的连贯。 把变量设置为null实际上会切断变量与其之前援用值之间的关系。 GC调度（性能） 最好的方法：写代码时做到，无论什么时候开始收集垃圾，都能让它尽快完结工作 古代GC程序会基于对JavaScript运行时环境的探测来决定何时运行。 探测机制：基本上是依据已调配对象的大小和数量来判断。（V8的堆增长策略：依据沉闷对象的数量外加一些余量来确定何时再次垃圾回收。） 不举荐被动触发垃圾回收。（某些浏览器能够） 缩小GC次数（缩小不合理调配）尽快实现回收内存治理 调配给浏览器的内存通常比调配给桌面软件的要少很多，调配给挪动浏览器的更少。——> 次要出于平安思考，防止运行大量JavaScript的网页耗尽零碎内存而导致操作系统解体。 这个内存限度不仅影响变量调配，也影响调用栈以及可能同时在一个线程中执行的语句数量。 内存占用量放弃在一个较小的值能够让页面性能更好。优化内存占用的最佳伎俩：保障在执行代码时只保留必要的数据。如果数据不再必要就解除援用（设置为null）——尤其是全局变量和全局对象的属性，下次垃圾回收时会被回收。 利用let/const提前回收：块作用域比函数作用域更早终止v8引擎的暗藏类：几个实例共享同一个构造函数和原型。 给实例减少新属性或删除其属性，就不能共享一个暗藏类。——最佳实际：不想要的属性设置为null，达到删除援用值供GC程序回收的成果。 防止“先创立再补充”式的动静属性赋值。 内存透露 意外申明全局变量闭包动态调配与对象池（正当调配，防止多余GC：保住因开释内存而损失的性能） 缩小浏览器执行垃圾回收的次数。 浏览器决定何时运行GC程序的一个规范，就是对象更替的速度。——》一个策略：应用对象池（治理一组可回收的对象） 可应用数组来保护，但必须注意不要导致额定的垃圾回收。

请实现一个 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}考点： 应用闭包， 同时要对JavaScript 的作用域链（原型链）有深刻的了解重写函数的 toSting()办法// 测试，调用toString办法触发求值add(1).toString(); // 1add(1)(2).toString(); // 3add(1)(2)(3).toString()；// 6add(1)(2, 3).toString(); // 6add(1, 2)(3).toString(); // 6add(1, 2, 3).toString(); // 6数组去重办法汇总首先:我晓得多少种去重形式1. 双层 for 循环 function distinct(arr) { for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); // splice 会扭转数组长度，所以要将数组长度 len 和下标 j 减一 len--; j--; } } } return arr;}思维: 双重 for 循环是比拟蠢笨的办法，它实现的原理很简略：先定义一个蕴含原始数组第一个元素的数组，而后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不反复则增加到新数组中，最初返回新数组；因为它的工夫复杂度是O(n^2)，如果数组长度很大，效率会很低2. Array.filter() 加 indexOf/includes ...

验证是否是邮箱function isEmail(email) { var regx = /^([a-zA-Z0-9_\-])[email protected]([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/; return regx.test(email);}实现Array.of办法Array.of()办法用于将一组值，转换为数组这个办法的次要目标，是补救数组构造函数Array()的有余。因为参数个数的不同，会导致Array()的行为有差别。Array.of()基本上能够用来代替Array()或new Array()，并且不存在因为参数不同而导致的重载。它的行为十分对立Array.of(3, 11, 8) // [3,11,8]Array.of(3) // [3]Array.of(3).length // 1实现 function ArrayOf(){ return [].slice.call(arguments);}实现类数组转化为数组类数组转换为数组的办法有这样几种： 通过 call 调用数组的 slice 办法来实现转换Array.prototype.slice.call(arrayLike);通过 call 调用数组的 splice 办法来实现转换Array.prototype.splice.call(arrayLike, 0);通过 apply 调用数组的 concat 办法来实现转换Array.prototype.concat.apply([], arrayLike);通过 Array.from 办法来实现转换Array.from(arrayLike);实现数组的乱序输入次要的实现思路就是： 取出数组的第一个元素，随机产生一个索引值，将该第一个元素和这个索引对应的元素进行替换。第二次取出数据数组第二个元素，随机产生一个除了索引为1的之外的索引值，并将第二个元素与该索引值对应的元素进行替换依照下面的法则执行，直到遍历实现var arr = [1,2,3,4,5,6,7,8,9,10];for (var i = 0; i < arr.length; i++) { const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i; [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];}console.log(arr)还有一办法就是倒序遍历： ...

建设背景交通是城市的脉络，是城市倒退的基础设施，智慧交通的倒退是推动智慧城市落地的前提条件，也是智慧城市落地十分重要的一环。 随着城市人口的爆炸式增长，智慧交通运输技术能够满足人们对出行、贸易、公共交通和其余根本公民服务的日益增长的需要。商用车、公共汽车、汽车、飞机、轮船和铁路帮忙咱们在物理上互相分割并交易商品。现在，交通运输零碎正致力跟上咱们寰球互联经济的需要——货物进出口约占世界国内生产总值的四分之三1.此外，到 2050 年，无论是集体运输还是公共交通，寰球对城市交通的需要预计将增长 2.6 倍。 零碎概述物联网（IoT）和人工智能（AI）正在为公路、航空、铁路和水运提供一种新型的智慧交通运输零碎（ITS）。这些解决方案将车辆、交通信号灯、收费站和其余基础设施连接起来，帮忙缓解交通拥堵，预防事变，缩小排放并进步运输效率。相干示例包含车队治理、智能交通管理、车联网通信、电动汽车充电、电子免费零碎以及各种其余挪动解决方案。 零碎性能综合态势监测反对对交通路况、警力散布、警情事件、接处警状况等因素进行综合监测，并反对点选查看具体警力、机动指标、监控视频等详细信息，帮忙管理者实时把握交通整体运行态势。 路况监测零碎 反对对实时交通指数、拥挤路段、交通事故、监控视频等信息进行监测，并可联合业余的模型算法，对辖区路况态势进行迷信评估，为交通管理指挥提供迷信的决策反对。 接警监测零碎 反对对122报警事件进行态势显示、疾速定位，并标示报警内容，同时能够智能化调取周边监控视频和警力资源，不便指挥人员对周边状况进行断定和剖析，为警情处理提供决策反对。 两客一危监测 反对对“两客一危”车辆的实时地位、速度、流向、轨迹进行实时监测，并可对车辆超速、偏航等异样状态进行可视化告警;反对具体车辆详细信息查问，实现车辆的全方位运行监控。 电子警察零碎 高清闯红灯电子警察零碎利用先进的光电、计算机、图像处理、模式识别、近程数据拜访等技术。利用每一辆车对应惟一的车牌号的条件，对监控路面过往的每一辆机动车的车辆和车号牌图像进行间断全天候实时记录。 车辆布控监测 反对对布控点位、布控警力等因素的数量、地位等信息进行监测，对重点监控车辆的实时地位、轨迹、车驾档案等信息进行监测剖析，为治理部门进行车辆管控提供无力撑持。 重大流动保障 反对对保障区域内警力、车辆、联动资源的部署状况，以及车流量、路况、监控视频等信息进行实时监测，反对保障范畴、保障路线、保障流程可视化，无效晋升重大流动保障效力。 重点车辆保障 反对对重点保障车辆的运行地位、速度、路线进行实时监测，并可综合沿线交通路况、警力散布、监控视频等信息进行剖析研判，为重点车辆通行保障提供无力反对。 路线监控零碎 各路口的摄像机会及时将所监控区域的实时图像传回交通指挥核心，使交通指挥人员实时把握各路口和路段的交通状况，例如：路段人车流量、信号灯是否失常工作、 是否有违章行为和交通事故产生。 信号控制系统 交通信号控制系统是智慧城市交通管理系统的一个重要子系统，其次要性能是主动调整管制区域内的配时计划，平衡路网内交通流运行，使停车次数、延误工夫及环境污染等减至最小，充分发挥路线零碎的交通效益，必要时，可通过指挥核心人工干预，强制疏导交通。 智慧公交系统 智慧公交调度零碎是使用系统工程实践将交通流诱导技术、车辆定位技术、地理信息系统技术、公交经营优化与评论技术、计算机网络技术、数据库技术、通信技术、电子技术、智能卡技术等先进技术迷信集成，造成集智能化调度、公交电子免费、信息服务、网络通信于一体的先进的公共交通管理系统。 守法停车零碎 智慧守法停车系统对在守法禁停区域内，有车辆驶入并停留在该区域超过事后设定工夫阈值，即断定其守法停车行为成立。能够自动检测出上述事件，并管制云台摄像机或快球对守法车辆进行特写放大抓拍作为非现场执法证据。 应急事件处理 智慧交通综合管控平台将应急报警、卡口零碎、电子警察、大数据分析系统、专家智能决策零碎以及信息公布系统集成组成为应急指挥系统;多部门有序合作和智能联动，疾速、高效地解决应急工夫，从而升高工作人员的工作强度，并且极大极高对于突发交通事件的解决。…… 开发平台智慧交通可视化大屏决策零碎，通过对城市交通的全因素状态感知、买通数据底座，实现数据的精准感知与互联互通，无效撑持路段业务的过程治理，将城市交通中的“人、车、路、环境”等因素，综合整合到智慧交通系统中，实现对城市交通的全方位管控，晋升通行效率、保障行驶平安。 建设价值基于数维图Sovit2D、Sovit3D可视化开发平台，依附互联网、大数据、物联网及人工智能等多种信息技术，对波及交通的全域数据进行多维度可视化展现，基于对交通历史数据的多维分析、关系剖析，依据剖析研判后果，为辖区将来交通管理、勤务巡逻等提供数据撑持，造成全息预警、精准布警、高效处理的指挥模式，从而助力交警单位实现对突发事件和交通安保的高效指挥调度。 总结文化交通是城市形象的名片、城市文化的标记、宽广人民大众幸福生活的谐和音符，文化交通不仅能反映出一个城市的文化水平，更能折射出宽广交通参与者的文化素质。充分运用新一代信息技术，对交通管理、交通运输、交通安全、公众出行等方面以及交通建设治理全过程进行管控撑持，使交通系统在区域、城市甚至更大的时空范畴具备感知、互联、剖析、预测、管制等能力，使用物联网、云计算、人工智能、挪动互联网等技术实现交通运输相干产业的转型降级，将各种交通出行模式整合在对立的服务体系与平台中，实现交通出行链条的一体化，建设精准满足出行者需要和满足智慧城市治理要求的大交通一站式智慧交通全生态。 本文次要介绍了Sovit2D和Sovit3D在城市交通智慧化零碎开发中的实际利用，从智慧城市交通综合治理平台的Web组态、三维可视化等多方面，进行疾速高效的可视化开发，为智慧交通解决方案提供商及软件开发公司提供全面的技术支持。

1. 什么是 Babel简略地说，Babel 可能转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也可能运行。 // es2015 的 const 和 arrow functionconst add = (a, b) => a + b;// Babel 转译后var add = function add(a, b) { return a + b;};Babel 的性能很纯正。咱们传递一段源代码给 Babel，而后它返回一串新的代码给咱们。就是这么简略，它不会运行咱们的代码，也不会去打包咱们的代码。它只是一个编译器。 赫赫有名的 Taro 也是利用 Babel 将 React 语法转化成小程序模板。 2. Babel的包形成外围包 babel-core：babel转译器自身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来实现转译过程的。babylon：js的词法解析器，AST生成babel-traverse：用于对AST（形象语法树，想理解的请自行查问编译原理）的遍历，次要给plugin用babel-generator：依据AST生成代码性能包 babel-types：用于测验、构建和扭转AST树的节点babel-template：辅助函数，用于从字符串模式的代码来构建AST树节点babel-helpers：一系列预制的babel-template函数，用于提供给一些plugins应用babel-code-frames：用于生成错误信息，打印出谬误点源代码帧以及指出出错地位babel-plugin-xxx：babel转译过程中应用到的插件，其中babel-plugin-transform-xxx是transform步骤应用的babel-preset-xxx：transform阶段应用到的一系列的plugin（官网写好的插件）babel-polyfill：JS规范新增的原生对象和API的shim，实现上仅仅是core-js和regenerator-runtime两个包的封装babel-runtime：性能相似babel-polyfill，个别用于library或plugin中，因为它不会净化全局作用域工具包 babel-cli：babel的命令行工具，通过命令行对js代码进行转译 babel-register：通过绑定node.js的require来主动转译require援用的js代码文件 babel8 将包名变为了@babel 3. 原理 Babel 转换 JS 代码能够分成以下三个大步骤： Parser（解析）：此过程承受转换之前的源码，输入 AST（形象语法树）。在 Babel 中负责此过程的包为 babel/parser；Transform（转换）：此过程承受 Parser 输入的 AST（形象语法树），输入转换后的 AST（形象语法树）。在 Babel 中负责此过程的包为 @babel/traverse；Generator（生成）：此过程承受 Transform 输入的新 AST，输入转换后的源码。在 Babel 中负责此过程的包为 @babel/generator。所以AST相干常识，你应该事后就理解了 ...

本文从以工夫为轴从以下几个方面进行总结JS模块化。从无模块化 => IIFE => CJS => AMD => CMD => ES6 => webpack这几个阶段进行剖析。历史幼年期：无模块化形式须要在页面中加载不同的js，用于动画，组件，格式化多种js文件被分在了不同的文件中不同的文件被同一个模板所援用<script src="jquery.js"></script><script src="main.js"></script><script src="dep1.js"></script>此处写法文件拆分是最根底的模块化（第一步） * 面试中的诘问script标签的参数：async & defer <script src="jquery.js" async></script>总结三种加载一般加载：解析到立刻阻塞，立即下载执行以后scriptdefer加载：解析到标签开始异步加载，在后盾下载加载js，解析实现之后才会去加载执行js中的内容，不阻塞渲染async加载：（立刻执行）解析到标签开始异步加载，下载实现后开始执行并阻塞渲染，执行实现后持续渲染 兼容性：> IE9问题可能被疏导到 => 1. 浏览器的渲染原理 2.同步异步原理 3.模块化加载原理呈现的问题净化全局作用域成长期（模块化前夜） - IIFE(语法测的优化) 作用域的把控let count = 0;const increase = () => ++count;const reset = () => { count = 0;}利用函数的块级作用域 (() => { let count = 0; ...})//最根底的局部实现一个最简略的模块const iifeModule = (() => { let count = 0; const increase = () => ++count; const reset = () => { count = 0; } console.log(count); increase();})();诘问：独立模块自身的额定依赖如何优化优化1：依赖其余模块的传参型const iifeModule = ((dependencyModule1,dependencyModule2) => { let count = 0; const increase = () => ++count; const reset = () => { count = 0; } console.log(count); increase(); ...//能够解决依赖中的办法})(dependencyModule1,dependencyModule2)面试1：理解jquery或者其余很多开源框架的模块加载计划将自身的办法裸露进来 ...

在上一节中咱们理解了常见的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 函数解决回调天堂的问题，能够把之前的回调天堂例子改写为如下代码： ...

1. JS 有哪些数据类型？依据 JavaScript 中的变量类型传递形式，分为根本数据类型和援用数据类型两大类七种。 根本数据类型包含Undefined、Null、Boolean、Number、String、Symbol (ES6新增)六种。援用数据类型只有Object一种，次要包含对象、数组和函数。 判断数据类型采纳typeof操作符，有两种语法： typeof 123;//语法一const FG = 123;typeof FG;//语法二typeof(null) //返回 object;null == undefined //返回true，因为undefined派生自null;null === undefined //返回false。2. 根本数据类型和援用数据类型有什么区别？（1）两者作为函数的参数进行传递时： 根本数据类型**传入的是数据的正本**，原数据的更改不会影响传入后的数据。 援用数据类型**传入的是数据的援用地址**，原数据的更改会影响传入后的数据。 （2）两者在内存中的存储地位： 根本数据类型**存储在栈中**。 援用数据类型在**栈中存储了指针**，该指针指向的**数据实体存储在堆中**。 3. 判断数据类型的办法有哪些？（1）利用typeof能够判断数据的类型； （2）A instanceof B能够用来判断A是否为B的实例，但它不能检测 null 和 undefined； （3）B.constructor == A能够判断A是否为B的原型，但constructor检测 Object与instanceof不一样，还能够解决根本数据类型的检测。 不过函数的 constructor 是不稳固的，这个次要体现在把类的原型进行重写，在重写的过程中很有可能呈现把之前的constructor给笼罩了，这样检测进去的后果就是不精确的。（4）Object.prototype.toString.call() Object.prototype.toString.call() 是最精确最罕用的形式。4. 与深拷贝有何区别？如何实现？浅拷贝只复制指向某个对象的指针，而不复制对象自身。浅拷贝的实现形式有： （1）Object.assign()：需注意的是指标对象只有一层的时候，是深拷贝； （2）扩大运算符； 深拷贝就是在拷贝数据的时候，将数据的所有援用构造都拷贝一份。深拷贝的实现形式有： （1）手写遍历递归赋值； （2）联合应用JSON.parse()和JSON.stringify()办法。 5. let、const的区别是什么？var、let、const都是用于申明变量或函数的关键字。其区别在于： varletconst作用域函数作用域块级作用域块级作用域作用域内申明晋升有无（暂时性死区）无是否可反复申明是否否是否可反复赋值是是否（常量）初始化时是否必须赋值否否是6. 什么是执行上下文和执行栈？变量或函数的执行上下文，决定了它们的行为以及能够拜访哪些数据。每个上下文都有一个关联的变量对象，而这个上下文中定义的所有变量和函数都存在于这个对象上(如DOM中全局上下文关联的便是window对象)。 每个函数调用都有本人的上下文。当代码执行流进入函数时，函数的上下文被推到一个执行栈中。在函数执行完之后，执行栈会弹出该函数上下文，在其上的所有变量和函数都会被销毁，并将控制权返还给之前的执行上下文。 JS的执行流就是通过这个执行栈进行管制的。参考 前端进阶面试题具体解答 7. 什么是作用域和作用域链？作用域能够了解为一个独立的地盘，能够了解为标识符所能失效的范畴。作用域最大的用途就是隔离变量，不同作用域下同名变量不会有抵触。ES6中有全局作用域、函数作用域和块级作用域三层概念。 当一个变量在以后块级作用域中未被定义时，会向父级作用域(创立该函数的那个父级作用域)寻找。如果父级仍未找到，就会再一层一层向上寻找，直到找到全局作用域为止。这种一层一层的关系，就是作用域链 。 8. 作用域和执行上下文的区别是什么？（1）函数的执行上下文只在函数被调用时生成，而其作用域在创立时曾经生成； （2）函数的作用域会蕴含若干个执行上下文(有可能是零个，当函数未被调用时)。 9. this指向的各种状况都有什么？this的指向只有在调用时能力被确定，因为this是执行上下文的一部分。 （1）全局作用域中的函数：其外部this指向window： ...

各位，各位，终于把js实现了一个段落了，这次的章节一过我还没确定上面要学的内容可能是vue也可能是前后端交互，但无论是哪个都挺兴奋的，因为面临着终于能够做点看得过来的大点的案例我的项目了，先憋住冲动地情绪，看看明天的一个内容，明天是es6新增的一些语法，简略也是真的简略，然而我要是没学明天这一天那看到了也是真的看不懂，就跟昨天的正则表达式一样一样的，明天的案例我都没怎么做，而且也都是一些比较简单的案例，我先把明天的一些有代表性的案例传上来吧，是一些面试题之类的，而后我就说下我明天学了些啥子语法，明天着重采取说的形式来换个形式，不像原来全是代码 1. 首先第一个案例，是一个对于let的经典面试题，既然碰到了我就先把let说了吧，这个案例次要是用来比拟var和let两个在不同的作用域各自的体现，这个我要是没听解说我还真不知道竟然是输入些这些个后果，第一个是var申明的for循环 首先全程是用的var来申明的值，而后循环当初主栈道跑到上先执行完，完结过后再来调用数组外面的元素也就是函数，外面寄存的i就要向下级一级一级查找，这个时候找到i，是循环完结过后i完结循环的值，也就是2第二个是let申明的for循环，这里又是输入什么 首先咱们要晓得，这里全程是用的let来申明的变量，所以就要有一个很要害的印象，每一个let过后都会发明一个属于本人的块级作用域。所以这里的每个i都是在循环往数组外面放元素的时候独自保留的，所以上面的数组拜访值就会进入到独自的块级作用域外面拜访到属于本人的那个值 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> /* var arr = [] for (var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0]() arr[1]() */ /* 这个输入的是什么？这个输入的是两个二为什么呢？首先全程是用的var来申明的值，而后循环当初主栈道跑到上先执行完，完结过后再来调用 数组外面的元素也就是函数，外面寄存的i就要向下级一级一级查找，这个时候找到i，是循环完结过后i完结循环的值，也就是2 */ let arr = [] for (let i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0]() arr[1]() /* 这里又是输入什么 首先咱们要晓得，这里全程是用的let来申明的变量，所以就要有一个很要害的印象，每一个let过后都会发明一个属于本人的块级作用域。 所以这里的每个i都是在循环往数组外面放元素的时候独自保留的，所以上面的数组拜访值就会进入到独自的块级作用域外面拜访到属于本人的那个值 */ </script></body></html>2. ...

/** * @param {number} x * @return {number} */var reverse = function (x) { let res = 0; while (x != 0) { res = res * 10 + (x % 10); // 划重点 x = ~~(x / 10); if (res < Math.pow(-2, 31) || res > Math.pow(2, 31) - 1) { return 0; } } if (x >= 0) { return res; } return -res;};本文由一文多发经营工具平台 EaseWriting 公布

装置yarn add dayjs -D 应用年dayjs(endTime).diff(dayjs(startTime), 'years')月dayjs(endTime).diff(dayjs(startTime), 'months')日dayjs(endTime).diff(dayjs(startTime), 'days')分dayjs(endTime).diff(dayjs(startTime),'minutes')秒dayjs(endTime).diff(dayjs(startTime), 'seconds')

语言根底次要基于ES6。 所有都辨别大小写。无论变量、函数名还是操作符 标识符变量名、函数名、属性名、参数名 可由一个或多个字符组成： 第一个必须是字母、_或者$；其余的能够是字母、_、$或者数字。其中字母能够是扩大ASCII中的字母，也能够是Unicode的字母字符，如À和Æ（但不举荐） 常规应用小驼峰模式（与内置函数和对象的命名形式统一） 严格模式ES5减少。 对不平安的流动抛出谬误 开启形式："use strict"; 预处理指令 保留字、关键字关键字：有非凡用处，不能用作标识符或属性名 保留字：保留给未来做关键字用（不能做标识符，但还可做属性名，个别最好不必，思考兼容） 变量var申明 不初始化时默认值为undefined。作用域：函数作用域 变量晋升全局的申明会成为window对象的一个属性能够反复申明（在晋升顶部后合并为一个申明）let申明 作用域：块作用域 暂时性死区（在let申明之前不能引用）在全局中申明的变量不会成为window对象的属性（仍会在页面的生命周期内存续）同一个块作用域不容许呈现冗余申明（JavaScript引擎会记录用于变量申明的标识符及其所在的块作用域）。在申明之前无奈百分百确定之前没有申明过（假如没有申明过）；无奈用try/catch来捕捉或者if语句来判断，因为会限制住let申明的作用域（不能进行条件申明）for循环中的let申明：迭代变量的作用域仅限于for循环块外部。JavaScript引擎会在后盾为每个迭代循环申明一个新的迭代变量 const申明 行为与let基本相同，惟一区别在于申明变量时必须同时初始化且之后不能进行批改。 仅限度它指向的变量的援用。若批改援用外部的属性，并不违反const的限度。 能够让动态代码剖析工具提前发现不非法的赋值操作。 for..of / for..in 循环：每次迭代只是创立一个新变量 少用var，const优先，let次之 数据类型6种简略数据类型（原始类型）：undefined、null、boolean、number、string、symbol。 1种简单数据类型：object（无序键值对的汇合） 判断根本类型——typeof：一个操作符，非函数 "undefined"：值未定义、变量未声明"boolean""string""number""object"：对象（非函数）或null（被认为是一个对空对象的援用）"function"：函数（在ES中被认为是对象，不代表一种数据类型，有本人的非凡属性）"symbol"1. Undefined类型个别不用于显式赋值，字面量undefined次要用于比拟。 倡议在申明变量的同时初始化，如果typeof失去undefined能够确定是因为变量未声明。 undefined是一个假值，检测时要明确：检测undefined字面量还是假值。 变量未声明时惟一可执行的操作：typeof 2.Null类型示意一个空对象指针。只有一个值：null。 初始化一个未来要保留对象值得变量，倡议应用null。能够放弃null是空对象指针的语义。 undefined由null派生而来。因而ECMA-262将它们定义为外表上相等（==等于操作符）。 null是一个假值，检测时要明确：检测null字面量还是假值。 3.Boolean类型有两个字面量true和false。 所有其余ECMAScript类型的值都有相应布尔值的等价模式。可应用Boolean()转型函数，将其余类型的值转换为布尔值。 假值： string：空字串number：0、NaNobject：nullundefinedboolean： false4.Number类型应用IEEE 754格局示意整数和浮点数（双精度数）。 不同的数值类型（不同进制）有不同的数值字面量格局。 前缀：八进制0o，十六进制：0x 在所有数学操作中都被视为十进制数值 浮点值 必须蕴含小数点，且小数点后必须至多有一个数字。 因为存储浮点值应用的内存空间是存储整数值的两倍，所以ECMAScript总千方百计把值转换为整数。1）小数点后没有数字；2）小数点前面跟着0 十分大或者十分小的数值，能够用迷信计数法来示意（格局：一个数值+E/e+一个要乘的10的多少次冥）。默认状况下，ECMAScript会将小数点后至多蕴含6个0的浮点值转换为迷信计数法。 浮点值的精确度最高可达17位小数，但在算术计算中远不如整数准确。（如检测两数之和是否为0.3） 值的范畴 因为内存的限度，不反对示意世上的所有数值。 Number.MIN_VALUE——少数浏览器为5e-324 Number.MAX_VALUE——少数浏览器中为1.797 693 134 862 315 7e+308 超出可示意的范畴，会主动转换为一个非凡的无穷大值：Infinity（Numer.POSITIVE_INFINITY）和-Infinity（Numer.NEGATIVE_INFINITY）。不能再进一步用于任何计算。isFinite()函数可用于检测判断是否超出范围。 NaN 用于示意本要返回数值的操作失败了（而不是抛出谬误） 任何波及NaN的操作始终返回NaNNaN不等于包含NaN在内的任何值isNaN()函数，会尝试把参数转换为数值数值转换 3个函数：Number()、parseInt()和parseFloat()。 Number()是转型函数，可用于任何数据类型；后两者次要用于将字符串转换为数值。 字符串转型规定： ...

HTML中的JavaScript<script>元素模式行内 其中的代码会被从上到下解释。计算实现之前，页面其余内容不会被加载，也不会被显式。 内部 下载与解析都会阻塞HTML解析，扩展名.js不是必须的，前提是确保服务器返回正确的MIME类型。 同时行内有JavaScript代码的话，行内代码会被疏忽。 浏览器在解析资源时，会向src指定的门路发送一个GET申请，以获得相应资源。这个初始的申请不受浏览器同源策略限度（但仍受父页面HTTP/HTTPS协定的限度），但返回并被执行的JavaScript则受限制。 长处： 能够让咱们通过不同的域散发JavaScript（确保是本人所有或者可信起源）能够动静加载和执行JavaScript代码能够将内容集中管理，进步可维护性，可独立编辑，可多处共享，可更好利用缓存（进步加载速度）不至于让HTML文件过大兼容HTML和XHTML（不用额定思考XHTML中的正文hack）对于反对SPDY/HTTP2的浏览器，能够轻量、独立JavaScript组件模式向客户端送达脚本，从同一个中央获得一批文件，并将它们一一放到浏览器缓存中。（Push Cache？）属性src：要执行的代码的内部文件。一个URL。type：代码块中脚本语言的内容类型（MIME类型） 常规为"text/javascript"。 JavaScript文件的MIME类型通常是"application/x-javascript"，不过给type设置这个值可能导致脚本被疏忽。 设置为"module"会被当作ES6模块，可应用import和export关键字。行为相似加defer，模块依赖关系也会被下载，等HTML解析实现后执行；如果再设置async，行为相似async，模块依赖关系都下载完后就开始执行（无论HTML解析是否实现） defer（只对外部脚本文件无效，IE7及更早版本中行内脚本也可指定）不阻塞文档解析 脚本下载与HTML解析并行，等HTML解析实现后每个脚本会有序执行（HTML5规定的有序，并在DOMContentLoaded事件（所有同步js代码执行结束后触发）之前执行，理论不一样按程序，且加载慢的话可能在Loaded事件之后执行，因而最好只蕴含一个这样的脚本） 思考兼容，最好还是把要提早执行的脚本放在页面底部。 XHTML中指定defer须要写成：defer="defer" async（只对外部脚本文件无效）下载过程不阻塞文档解析 下载脚本与HTML解析并行。不阻塞其余页面动作（如下载资源或其余脚本加载（读取？）） 脚本执行时还是会中断HTML解析，不保障执行程序与插入DOM的程序统一。 动静导入的脚本（createElement，.src），默认append到文档中的script会异步执行（相似async），如果须要的js按程序执行，须要设置async为false。 不应在页面加载期间批改DOM，与其余异步脚本没有依赖关系。 保障会在页面的load事件（所有资源实现加载后触发）前执行。 XTML中指定async须要写成：async="async" language：（废除）charset：（很少用），应用src属性时指定的代码字符集crossorigin：配置相干申请的CORS（跨源资源共享）设置。默认不应用CORS。 属性值： anonymous 配置文件申请不用设置凭据标记（不携带cookie）use-credentials 设置凭据标记，意味着出站申请会蕴含凭据（携带cookie）空或非法值 默认当作anonymous这个配置次要是想在以后我的项目中援用跨域的资源文件时，能捕捉到具体的报错信息（window.onerror） 如果设置了crossorigin，浏览器启用CORS拜访查看，服务器端必须返回一个Access-Control-Allow-Origin的header，否则资源无法访问。 integrity：容许 比对接管到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。（不是所有浏览器都反对） 如果接管到的资源的签名与该属性指定的签名不匹配，则页面报错，脚本不执行。可用于确保CDN（内容散发网络，Content Delivery Network）不会提供歹意内容（XSS危险）。 搁置地位head还是body？ 过来都集中搁置在页面的<head>标签内，这会导致必须把所有JavaScript代码都下载、解析和解释完后，才开始渲染页面。如果JavaScript内容过多，就会导致页面渲染的显著提早。 古代Web利用通常把所有JavaScript援用放在<body>元素中的内容前面。避免渲染被阻塞导致的白屏。JS只能获取曾经解析的DOM。 动静加载脚本应用DOM API。默认以异步形式加载，相当于增加了async属性。不是所有浏览器都反对async属性，要对立行为，能够明确设置async为false（同步加载）。 以此种形式获取的资源对浏览器的预加载器不可见。会重大影响它们在资源获取队列中的优先级。可能会重大影响性能。要让预加载器晓得这些动静申请文件的存在，能够在文档头部显式地申明它们： <link rel="preload" href="xxx.js">XHTML必须指定type属性且为"text/javascript" 编写代码的规定比HTML中严格，在HTML中，解析\<script\>元素会利用非凡规定，但XHTML中没有这些规定。例子：小于号<被解释成一个标签的开始 把小于号替换成对应的HTML实体模式\&lt; ——影响浏览把所有代码都蕴含到一个CDATA块中——能够蕴含任意文本的区块，其内容不作为标签来解析 <script type="text/javascript"><![CDATA[ function () {}]]></script>在不反对CDATA块的非XHTML兼容浏览器中，须要应用JavaScript正文来对消： <script type="text/javascript">//<![CDATA[ function () {}//]]></script>XHTML模式会在页面的MIME类型被指定为"application/xhtml+xml"时触发，不是所有浏览器都反对 兼容xml中的利用noscript以及不反对JavaScript的浏览器 （Netscape联结Mosaic）把脚本代码蕴含在一个HTML正文中，如： <script><!-- function () {}//--></script>当初已不用再应用。在XHTML模式下，这样写也会导致脚本被疏忽，因为代码处于无效的XML正文当中。 <noscript>元素 能够蕴含任何能够呈现在<body>中的HTML元素。触发条件： 浏览器不反对脚本；浏览器对脚本的反对被敞开 文档模式的影响doctype次要区别：次要体现在通过CSS渲染的内容方面，对JavaScript也有一些关联影响（副作用） 混淆模式quirks mode 让IE像IE5一样（反对一些非标准个性） 以省略文档结尾的doctype申明作为开关。——在不同浏览器中差别十分大，须要hack ...

什么是JavaScript1995年问世。 最后在客户端解决某些根本的验证。 名字：Mocha -> LiveScript -> JavaScript ECMAScript脚本语言规范：ECMA-262（TC39，第39技术委员会） 残缺的的JavaScript蕴含：外围ECMAScript文档对象模型DOM浏览器对象模型BOM宿主环境提供ECMAScript的基准实现和与环境本身交互必须的扩大。 ECMA-262定义了什么：语法 | 类型 | 语句 | 关键字 | 保留字 | 操作符 | 全局对象 版本更迭第1版：实质上与JavaScript1.1雷同，反对Unicode规范，对象与平台无关 第2版：一些编校 第3版（！！）：更新了字符串解决、谬误定义和数值输入。另外还减少了对正则表达式、新的管制语句、try/catch异样解决的反对，等 第4版（×）：强类型变量、新语句和数据结构、真正的类和经典的继承，以及操作数据的新伎俩 第5版（3.1！！！）：厘清第3版的歧义，减少对JSON的反对、不便继承和高级属性定义的办法、减少严格模式 第6版（2015.6！！！！）：反对类、模块、迭代器、生成器、箭头函数、期约（Promise）、反射、代理和泛滥新的数据类型（Map、Set等） 第7版（2016.6）：大量语法层面的加强，如Array.prototype.includes和指数操作符 第8版（2017.6）：减少了异步函数（async/await）、SharedArrayBuffer及Atomics API，以及Object.values()/Object.entries()/Object.getOwnPropertyDescriptors()和字符串填充办法（？），明确反对对象字面量最初的逗号。 第9版（2018.6）：异步迭代、残余和扩大属性、一组新的正则表达式个性、Promise finally()，以及模板字面量订正 第10版（2019.6）：减少了Array.prototype.flat()/flatMap()、String.prototype.trimStart()/trimEnd()、Object.fromEntries()办法，以及Symbol.prototype.description属性，明确定义了Function.prototype.toString()的返回值并固定了Array.prototype.sort()的程序。解决了与JSON字符串兼容的问题，并定义了catch子句的可选绑定（？） ECMAScript合乎性：必须满足的条件 反对ECMA-262中形容的所有“类型、值、对象、属性、函数，以及程序语法与语义”；反对Unicode字符浏览器反对浏览器DOM LevelECMAScript合乎性IE5.5~8DOM Level1ES3IE9 ES5（局部）IE10-11 ES5Edge12+ ES6Safari6~8 ES5Safari9+ ES6Chrome49+ ES6FireFox45+ ES6iOS Safari 9.2+ ES6DOM一个利用编程接口（API），用于在HTML中应用扩大的XML。DOM将整个页面形象为一组分层节点。 动静HTML：不刷新页面而批改页面外观和内容。 DOM级别DOM Level1（1998）：DOM Core和DOM HTML两个模块。指标：映射文档构造 DOM Core：提供一种映射XML文档，从而不便拜访和操作文档任意局部的形式；DOM HTML扩大了Core并减少了特定于HTML的对象和办法。 DOM Level2：减少了对鼠标和用户界面事件、范畴、遍历的反对，通过对象接口反对了CSS。DOM Core也被扩大以蕴含对XML命名空间的反对。 新增模块： DOM视图：形容追踪文档不同视图的接口。（如利用CSS款式前后的文档）DOM事件：形容事件及事件处理的接口DOM款式：形容解决元素CSS款式的接口DOM遍历和范畴：形容遍历和操作DOM树的接口DOM Level3：进一步扩大了DOM，减少了以对立的形式加载和保存文档的办法（DOM Load and Save的新模块中），还有验证文档的办法（DOM Validation）。DOM Core扩大以反对所有XML1.0的个性，包含XML Infoset、XPath和XML Base。DOM4（DOM Living Standard）：新增的内容包含代替Mutation Events的Mutation Observers。L1+L2（局部）+L3（局部）：Opera 9 | Safari2+ | iOS Safari 3.2+ | Chrome 1+ | FF 1+ ...

大家好，我卡颂。 回忆下你学新技术的次要路径是什么？看书？看技术文档？看博文？看视频？ 归纳起来，无外乎文字、视频两种模式。 从纸媒时代到互联网时代，再到挪动互联网时代，尽管信息的载体发生变化，但信息的出现模式仍以文字为主。 文字能够被动管制浏览速度、节奏，而视频有更佳的表现力。 能够说他们在体验上各有优劣。 那有没有一种模式能联合两者的长处呢？有，答案是交互式文章。 置信很多React学习者都看过build-your-own-react。 这是一篇解说React原理的交互式博文，左侧代码，右侧注释。随着注释的浏览，左侧代码会相应变动。 这篇文章对应的Github仓库有5k star，能够认为是入门React原理的最佳实际了。 事实上，不仅是前端，很多畛域的技术文章都能以交互式的模式出现。 比方这篇介绍数组是如何工作的文章 —— how-arrays-work,用交互的形式演示了数组中每个字节解决数据的形式： 这样的文章，相比传统的技术文章、视频，有很多劣势。 本文会介绍交互式文章相干的一些技术实际，以及他为咱们开发者带来的新机遇。 欢送退出人类高质量前端框架群，带飞 交互方式的实际交互式文章的实质还是文章。MD是最常见的技术文章格局，所以，在MD文件中插入交互式组件是常见的交互式文章组成模式，这就是MDX。 MDX中的交互方式次要有两种： 动画交互成果Demo交互动画交互成果code-surfer是一个动画交互组件。 他的实质是一个React动画组件（用于展现代码之间的突变动画）。 上文提到的build-your-own-react就是应用code-surfer实现的。 git-history是另一个应用code-surfer的我的项目。 咱们应用git diff命令时，命令行会应用色彩（通常是红、绿）辨别新增、删除的代码： git-history我的项目应用动画的模式，展现git history中代码的增删。 读者能够在githistory我的项目体验他的成果。 Demo交互除了动画交互外，Demo交互在技术文章中更常见。所有支流前端框架的文档中都提供了Demo。 比方，下图是React文档中的Demo： 常见的Demo交互模式有： codesandbox成名较早，是以后最支流的在线Demo展示形式，由客户端、服务端两局部组成。 开发者能够应用基于codesandbox封装的Sandpack实现自定义的在线Demo。 stackblitz基于WebContainers（一款基于WebAssembly的操作系统，能够实现在浏览器中运行Node.js）封装，客户端、服务端都在浏览器中实现。 相较于codesandbox，有更多劣势，比方： 能够离线应用（因为浏览器蕴含残缺的服务端、客户端）相比codesandbox网络提早更小（codesandbox中Node脚本是在服务端执行的，再传输给客户端）文档的体验之争前端畛域倒退至今，曾经很少有齐全翻新的开源我的项目了。 通常，新我的项目会在现有我的项目的根底上进行微翻新。比方Solid.js借鉴了React、Knockout.js。 Vue3也筹备借鉴Svelte，出一个无虚构DOM的版本。 为了在强烈的竞争中胜出，我的项目文档都会在用户体验上拉满。 这一点，能够比照React新老文档来领会。 对于文档的用户体验，其中十分重要的一点，就是提供丰盛的交互。 根底的，如Vue3，提供了在线Demo与Playground： 进阶的，如Svelte，提供了基于在线Demo的Svelte教程： 更具体的，如React，提供了以交互式文章组成的React教程 前端框架文档中的交互性次要以Demo为主。除此之外，还有些我的项目文档以动画交互为主，比方stripe文档中的滚动聚焦成果： Lit文档中的hover后代码高亮成果： 视频的体验之争视频相比于传统文章有更好的表现力，然而与交互式文章相比，就差远了。 Storyteller Demo Playback将Demo与动画交互联合，实现了视频播放器的成果： 相比于传统视频只能看不能动，交互式播放器能够随时暂停，批改代码。 scrimba是Demo与动画交互联合的播放器的商业化产品，读者能够看看scrimba vuex教程感触下交互体验。 开发者的一片蓝海对于国内的技术博主，交互式文章还是一片蓝海。 相比于传统文章、视频，交互式文章的体验劣势有多大呢？比方这篇文章 —— 100%在CSS中的意义 ...

说到开源的 API 管理工具，大家可能很容易想到 Postman 的妹妹 Postwoman,如果你也喜爱开源产品，那接下来这个工具你可不能错过~ Eoapi 是一款类 Postman 的开源 API 管理工具，它更轻量，同时可拓展。 反对根底的 API 文档和测试性能，还能够通过插件帮忙你将 API 公布到各个利用平台，比方公布到网关实现 API 上线，或者和低代码平台联合，将 API 疾速变成可应用的组件等。 Eolink 在 2022 年开源了 Eoapi 我的项目，Eoapi 建设在 Eolink 多年以来在 API 全生命周期畛域的行业教训根底之上，同时心愿通过开源排汇社区中最棒的想法和实际。 Github 我的项目网址：https://github.com/eolinker/e... Gitee 我的项目地址：https://gitee.com/eolink_admi...官网文档：https://www.eoapi.io/?utm_sou... 说到这里，你可能会问了，那曾经有这么多 API 管理工具了，Eoapi 有什么特色么？ 有！当然有！除了咱们常说的 API 文档、 API 测试、MOCK 这些外围性能，它还有以下几大亮点： 提供插件广场，目前插件广场除了官网插件，也有与其余工具单干的生态插件，无妨试试，还能够本人开发插件噢；开源，代码齐全公开，Gitee/Github 上即可获取代码；反对将服务部署到你的服务器，有什么疑难能够进群交换；提供更强的文档性能。初期互动频繁的用户群就我集体而言，Eoapi 最大的亮点是开发团队想做好用的产品这种执着与酷爱吧，对用户的反馈永远及时响应。 我置信，随着用户群逐步壮大，只有大家多多反馈，Eoapi 会走在开源 API 管理工具队列的最前端~

function findMedianSortedArrays(nums1, nums2) { const nums = [].concat(nums1, nums2).sort((prev, next) => prev - next); const len = nums.length; if (len % 2 === 0) { const index = len / 2; return (nums[index - 1] + nums[index]) / 2; } else { return nums[Math.floor(len / 2)]; }}console.log(findMedianSortedArrays([1, 3], [2]));console.log(findMedianSortedArrays([1, 2], [3, 4]));console.log(findMedianSortedArrays([3], [-2, -1]));本文由一文多发经营工具平台 EaseWriting 公布

/** * @param {string} s * @param {number} numRows * @return {string} */var convert = function(s, numRows) { // 存储后果 const rows = []; // 指针下一次是加一还是减一 let add = false; // 指针地位 let pointer = 0; for (let index = 0; index < s.length; index++) { if (!rows[pointer]) { rows[pointer] = ""; } rows[pointer] += s[index] || ""; if (pointer === 0 || pointer === numRows - 1) { // 指针反转 add = !add; } pointer += add ? 1 : -1; } return rows.join("");};本文由一文多发经营工具平台 EaseWriting 公布

前言在本文中，将介绍一些鲜为人知但却十分有用的API，如： Page Visibility APIWeb Share APIBroadcast Channel APIInternationalization API咱们将一起看看它们是什么，咱们应该在哪里应用它们，以及如何应用它们。 Page Visibility API这是一个鲜为人知的 web API，在JS现状考察中，它的认知度排名倒数第四。它能够让你晓得用户何时来到了页面。精确地说，只有页面的可见性状态发生变化，无论是用户最小化、最大化窗口还是切换标签页，该API都会触发一个事件。 在过来，你不得不应用一些噱头来理解用户是否切换了标签页或最小化了窗口。最风行的形式是应用blur和focus浏览器事件。应用这些事件会导致相似上面状况的产生： window.addEventListener("focus", function () { // User is back on the page // Do Something});window.addEventListener("blur", function () { // User left the page // Do Something});后面的代码能够工作，然而不合乎预期。因为blur事件是在页面失去焦点时触发的，所以当用户点击搜寻栏、alert对话框、控制台或窗口边框时，它就会被触发。所以，blur和focus只通知咱们页面是否被激活，但不通知咱们页面的内容是否被暗藏或显示。 什么时候应用一般来说，咱们想要应用Page Visibility API，是心愿用来进行不必要的程序。比如说当用户没有看到页面时，或者执行后盾操作时。具体的场景能够是： 当用户来到页面时暂停视频、图像旋转或动画；如果页面显示来自API的实时数据，在用户来到时临时进行实时显示的行为；发送用户剖析报告。如何应用Page Visibility API带来了两个属性和一个事件，用于拜访页面可见性状态： document.hidden：该属性是全局可见并且只读。尽量避免应用该属性，因为当初曾经被废除了。当拜访该属性时，如果页面是暗藏状态则返回true，如果页面是可见状态则返回false。document.visibilityState：该属性是document.hidden更新后的版本。当拜访该属性时，会依据页面的可见性状态返回四个可能的值： visible：该页面是可见的，或者精确地说，它没有被最小化，也不在另一个标签页。hidden：该页面不可见，它是最小化的，或者在另一个标签页。prerender：这是一个可见页面在预渲染时的初始状态。一个页面的可见性状态能够从prerender开始，而后扭转到另一个状态，但它不能从另一个状态扭转到prerender。unloaded：该页面正在从内存中卸载。visibilitychange：这是一个由document对象提供的事件，当页面的visibilityState发生变化时被触发。document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { // page is visible } else { // page is hidden }});为了理解如何应用Page Visibility API，让咱们用该个性来实现当用户来到页面时，暂停视频以及进行从API获取资源。首先，我将应用vite.js，它是一个疾速启动新我的项目的神奇工具： ...

UI5 服务器可扩展性(Extensibility)使开发人员可能加强 UI5 服务器的性能。 开发人员可能心愿以不同的形式解决申请。 例如，将各种标头增加到响应中(一个最典型的利用就是防止本地 SAP UI5 利用拜访 S/4HANA OData 服务时遇到的跨域谬误)或以特定形式解析 POST 申请的数据。 为此，咱们能够将自定义中间件实现插入 UI5 服务器模块(该模块外部依然基于 express server 实现）。 UI5 社区曾经创立了许多自定义中间件包，您能够将它们集成到您的我的项目中。 它们通常以 ui5-middleware- 为前缀，以便在 npm registry 中轻松搜寻它们。 在我的项目 ui5.yaml 文件中，您能够定义其余服务器中间件模块，这些模块将在服务器接管到申请时执行。 此配置仅影响在此我的项目中启动的服务器。 任何依赖项中定义的自定义中间件配置都将被疏忽。 上面是一个例子： specVersion: "2.6"type: applicationmetadata: name: my.applicationserver: customMiddleware: - name: myCustomMiddleware mountPath: /myapp afterMiddleware: compression configuration: debug: true在下面的示例中，中间件 compression 曾经作为规范中间件被 UI5 服务器蕴含在内。 在为应用程序 my.application 提供服务时，服务器会在规范中间件 compression 执行后，调用自定义中间件 myCustomMiddleware。 SAP UI5 Tools 反对提供可选的配置参数，间接传递给自定义中间件实现。 能够提供调用中间件函数的可选 mountPath。 它将被传递给 app.use 调用。 ...

建设背景截至2021年底，全国高速公路总里程已达到16.91万公里，居世界首位。自2019年开始，国家政策频出，印发了《交通强国建设大纲》(2019)、《国家综合平面交通网布局大纲》(2021)、《“十四五”古代综合交通运输体系倒退布局》(2022)等文件，对高速公路的智能化程度提出了新的要求。随着信息化技术的疾速倒退和供应侧改革的继续推动，国内高速智能化试点我的项目越来越多，我国高速公路正朝数字化、网络化、智能化、智慧化等方向倒退，逐步形成了“智慧高速公路”的科技理念。 零碎概述狭义智慧高速： 是在土地资源趋近饱和的条件下，为满足日益增长的交通需要，通过智能化的传感、通信、人工智能研判等伎俩而大幅提高高速公路通行能力，满足新一代驾驶工具利用要求的全新技术状态。 广义智慧高速： 是指使用古代信息技术和互联网思维，使得路网具备“可知、可测、可控、可服务”的能力，实现路网运行更平安、公众出行更便捷舒服、交通管理更迷信智能、路线经济更加绿色的智慧高速公路。 零碎性能综合态势监测集成地理信息系统、视频监控零碎、高速公路各业务零碎的数据。综合监测高速工程建设、路线治理养护、通行状态、ETC应用情况、交通信息、交通事故、日常治理、免费经营等因素综合监测。高速公路路网中断率、拥挤度、环境指数、节点通阻度、通道运行指数等多维度指标可视化剖析。把握高速的整体运行状况。 车辆通行监测·车辆流量监测反对对车流量、均匀车速等数据进行多维度监测剖析，实现车流量的迷信监测评估。·两客一危监测反对集成视频监控、卡口、车辆GPS、RFID等零碎数据，实时可视化监控“两客一危”车辆的地位、速度、流向、运行轨迹，可视化报警车辆超速、偏航等异样状态;反对查问具体车辆的详细信息，如车牌号、车辆类型、单位、运单信息。实现两客一危车辆的全方位运行监控。·智能卡口监测反对整合各卡口零碎实时收集的图像信息，能够对违反超车、超速行驶、违反倒车、无端占用紧急车道等违反行为和事变车辆、黑名单车辆等重点车辆进行可视化监督警报。公安交通管理实战部门进行车辆违反查看、查看管制的能力和效率！ 天气预警监测反对接入气象局天气监测数据，无效联合智能剖析、智能钻研判断技术，预警狂风、暴雨、冰雹、雾等顽劣天气。帮忙高速管理人员及时采取对策优化路网，进步高速平安通行效率。勤务状态监测反对对勤务人员的在岗数量、地位、管辖区域等信息进行可视化监测，可点选查问勤务人员的详细信息，直观展现勤务人员工作状态，为人员治理和指挥调度提供反对。 建设工程监测在建工程的散布、工程详情(规模、工期、投资规模、参建单位等)、工程进度、人员、重要指标等信息，通过丰盛的可视化剖析伎俩进行综合监测剖析;对重点工程周边环境、工程全貌和内部结构进行三维显示，对重点工程区域实时态势进行综合监测，辅助管理者准确掌控重点工程运行状态。 高速运维监测·机电设备运维监测 反对各机电设备地位、类型、运行状态监控，异样态势智能预警告警，设施详细信息查问，直观把握设施运行状态。 ·路政养护治理监测 反对对路段的起起点、养护面积、里程、进度等进行直观出现，对历史养护状况、资料应用、费用等数据进行剖析研判。智能巡检监测反对整合前端视频检测零碎，无效联合视频智能剖析、智能定位、智能判断技术，可视化监测路线拥挤点、隐患点、事变点、行人、动物、异样物体、顽劣天气等状况。实现异常情况的实时报警和疾速显示，智能提取异样点周边监控视频，无效进步高速平安通行效率。 路网监测零碎·路网运行监测 偏重对依照逐小时、逐天等具体时间跨度的态势剖析，包含对交通流、设施设施状态、重点路段、重点车辆、交通气象、养护作业、拥挤、超限超载的态势感知和剖析; ·路网动静预警 偏重对某个具体时刻的状态预警，预警来源于对路网运行监测过程中监测到的具体事件的专项预警，包含交通事件、设施设施、危险路段、危险车辆、逃漏费、重大拥挤、检测事件视频等影响高速公路平安通行的各类因素进行预警； ·路网经营治理 偏重对整合经营相干各类数据资源，买通现有零碎数据利用壁垒，造成基于高速公路经营治理的全量数据，包含投资支出、主营业务老本、交通事故、环境监测等内容; …… 开发平台智慧高速公路可视化云控平台零碎，通过对高速公路的全因素状态感知、买通数据底座，实现数据的精准感知与互联互通，无效撑持路段业务的过程治理，将高速公路中的“人、车、路、环境”等因素，综合整合到智慧高速公路可视化云控系统中，实现对高速公路的全方位管控，晋升通行效率、保障行驶平安。 建设价值基于数维图Sovit2D、Sovit3D可视化开发平台，联合5G、云计算、大数据、物联网、人工智能等新技术，建设互联闭环的智慧高速交通体系，使能高速行业数字化和智能化，实现车、路、使用者和治理平台的互联闭环协同，从而解决高速的平安、效率、老本和体验四大外围问题。总结高速公路，作为撑持全国经济倒退的重要支柱，始终是智能交通建设的重点内容。数字化是智慧高速的根底，次要重点在路网的感知+认知，在感知认知的根底上，逐渐构筑智慧路网，最终实现人车路互信协同。围绕“全路网感知、全方位服务、全天候通行、全过程管控、全数字经营”的建设总指标，一直晋升高速公路的平安、效率、服务及管理水平，助力智慧高速的数字化转型降级。 本文次要介绍了Sovit2D和Sovit3D在高速公路交通智慧化零碎开发中的实际利用，从智慧高速公路综合治理平台零碎的Web组态、三维可视化等多方面，进行疾速高效的可视化开发，为智慧高速解决方案提供商及软件开发公司提供全面的技术支持。

回文是指一个字符串不论从左往右看还是从右往左看都是一样的那么就会有两种状况：1.复数回文，2.单数回文双指针解法利用两个指针，指针内的字符串就是匹配到的回文字符串function longestPalindrome(str) { // 最终后果 let result = ""; for (let index = 0; index < str.length; index++) { // 回文核心是复数（本人）时，即复数回文 findRepeat(index, index); // 回文核心是单数时，即单数回文 findRepeat(index, index + 1); } // 匹配传入指针对应的最大回文字符串 function findRepeat(leftIndex, rightIndex) { while ( leftIndex >= 0 && rightIndex < str.length && str[rightIndex] === str[leftIndex] ) { leftIndex--; rightIndex++; } // 这里要留神：下面的 while 循环会在条件不成立时终止，所以 leftIndex 的最终值 多减了 1， rightIndex 的最终值 多加了 1 // slice 左闭右开的个性， leftIndex 又多减了1 所以 leftIndex 要 + 1解决，rightIndex 要 - 1解决，而 rightIndex 自身就多加了 1 所以互相对消 const replaceStr = str.slice(leftIndex + 1, rightIndex); if (result.length < replaceStr.length) { result = replaceStr; } } return result;}本文由一文多发经营工具平台 EaseWriting 公布

这里加密用的是jsjiami.v6也称为sojson.v6。 var _0xodW='jsjiami.com.v6',_0xodW_=['‮_0xodW'],_0x2406=[_0xodW,'MwUkwpjDjg==','b8Orw5dW','dcKAwq5YOg==','LxBsP8ObQMK2','MMKPw7VGDw==','A1VmTFA=','aXYNUcKP','WTBda07DgcOIbw==','wpNtUXDDlQ==','WXbCqsOGw6Y=','QMK6FsOMw4Y=','w7nChDQkS3/DqRRjKUo=','DSYwwrTDrg==','RRYQwp3Ds1DCkhRJ','NsKlw51o','b1FMeMOx','wqoJw7gyUQ==','O1fClRxywpkkwq56','CDo/wrnDng==','wo5fMBAg','Y17CrsOXw6Y=','wo/CvybDl8OH','USnCqQ==','wq8Lw74He8O2woE=','w4AcC8O+w4k=','WzVjU8OU','Zj9aKsOnw5okwqbCucKMwrXCgg==','eSTCnX5t','wqnChkHDpMKg','fsKGJ33Cig==','FsOyw6PCscKL','wpxOAlHDvA==','w5ZER2jCrMKmPxdOw7UDYW4=','cSZAbcOh','bMORPMOdw7o=','MkZRQmvCnnYrwqcdw7U=','WjhMTQ==','wocWGMOJwrg=','WA02wp/DoQ==','wpbCglHDhcKH','DggiwqXDmQ==','UiRhcEo=','wrxcMH3Dnw==','BTdHw6rCn1DCkik=','w4PCjsOYwrUp','ClBTWHE=','K8OCw4TCgMKF','QTLCtTg=','NMKQw5tYAg==','eFrCjxd6wpdjw6tgSGVpcCsPeWnCs8OZwp3CjA9IAkLDn0pW','CHQNWFo=','I3hLwqQWwoE=','FMKxw6pmAA==','w6vCgsOlwqcj','YcKmIA==','KFFZSw==','ACNKw4zCtQ==','IMOSw7HDow==','5LiV5peT56655L27','WMO3w5N9Rg==','w5ZZfVLDihk=','JinClcO5','bn5bfMOa','wo1zNlXDsw==','fR/CssKqw60=','w5vCiDAdZA==','BQZtNMO5','w41kZDxmXA==','cT7CjWk=','ZChZDkw=','djF8V8OQ','GMKtw7lMJA==','w4vCscO4wp8=','wqojw5cTfw==','EmdKWVk=','IMOvw45BcVzCksObJ2ZU','BwVTw5DCoA==','woBCPwnCpg==','SsOyw57DphU=','VxLCp8KMw5w=','wobCsMOHaE0=','wo5AMSc=','H8KFw79uJw==','OMO9TsOQMw==','UyfCqMKow6M=','dUUfIQ==','GcOuw5LDu8Oz','CFdyZ0s=','QiPCjRbDtA==','C8Ocw4Bu','UhBTYU8=','RR0dwonDugnCkg1M','TsKdwq9P','acOrwpF3OVLCpkoMw6EIJ8Khw5nCqUvDpMOlag==','5LiE5pS156yy5L25','wp/ClGPDhcK7','wrdWZU7Drg==','dsK+IMKFwqjCpMO/fcO8woJWw5vCtU05w63Ch0zCtGBYCg==','wpBLBAvCsQ==','wqBUfE3DgQo7w4LDt2JWNB4zDTgBw6Q=','OsKxw5hvFA==','LgJiw5/CpQ==','5q6O5pCf5LyM6KCZ5reY6Kad5Zus5oi657q977ydw4XorJPlnpnmt5jopIzlm6DlnIDln5PmoZ/ovqnlhrbigrEIeBTDscOhw50bI8Ohw5DDpinigarluq7lmYrovZQ554Sx5ZO55bCJwrVUNSzDmkvDnRrDp8KPNsKRPzg9UWvDnsOew7QAwo53IcOHwpnCvcO9ZELCv3nCtSfDt8OIWgUpcWB0w6oP55mE5YOc6K++57+B5LuTw6t2w7zDki99HOWNmuWEsOWNouWOmuOBsw==','5oK155qo5rS06KaM5Zqq5LuS5pSl5o+/77+N6K+s5o6M54W55Lub6ZyF5q6f6auU5pOn5Lyy77yXw7sX5omY5b+25rWA6KaZ5Zit6K6b576z44C9F8KD54KE5YSO6KyJ572T57+z6aOn44GXwpgJ6L+V5YWv7764','GcOBXMO9NA==','RSYEwonDhQ==','w4vCt8OTwrIm','w6PCqWZwAQ==','ax/CqjZQ','w4nDrAvDuGM=','FydMw5k=','bk8gd8KfXcOs','HFFPwpYO','YCTCvinDsg==','fcKow5d2KxfCqFwI','RcKawqg=','Wmg8IMK0','w7XDtgfDpko=','PxB0MsOMSsK8w7Y=','diF8fXQ=','Yy/CjVN6wqPDvMOgaMK5VA==','woFRMSYFw4LDoG8=','fzwMwprDgA==','wpnCsQfDtsOY','w6nCmsOBwrcg','FzZAw5zCgVjClSM=','w6QoJ8Osw48ZwqzDhMKqw7LDnsO9YiLCuw==','c8KhDcOmw7E=','RB3CvEx9','wrJGw47DhHI=','woEGw4Eybg==','VR1pTUU=','FFRtflo=','w6rCosOkwro=','RGxqesO9','ZzPCsgLDhQ==','Ujxra1Y=','Bz9Cw5rCgFTCkg==','ThAzwovDjsKgwobClMKWaw==','YVIASsKMTMOvacKAwrzCtXs5','OkxKwoIMwpnDt2bCjcKnw6Q=','K1tRwrYXwp3DtxjCjMK2w6N6bsO+wrzDn8Ozb8KYwrjDrMK3wowm','XjNnQkg=','XsOQLcOMw7Q=','V8Oaw5NdXQ==','PcOzw43Cu8KR','UMKgOMOiw4I=','wrbCg8OienM=','O8Kjw7tNCg==','w4gQMcO9w4U=','54Ow5YeS56GQ5a2b44Gm','Mi/CjcKjUxnDtVbCqsKWwqIfwp4mdGXDiD/CrcONwqjCpg==','5Yq75YS25peQ6JSt5aaE6LaK776l6K+Q5L+v55W5V29OwoPCjTvovJ3ooJ7mtYrlirk=','wrEHHMOfwp3Dr0ZJ','HsK0w5JZIA==','XjvCg2tj','YsKoKMO9w6rCrsO/dw==','ZcOTNcO0w74=','TQnCj8KOw60=','LhBoG8OVTsK2w5TCpsOcw70=','IsOQw7/CiMKu','w7cYDMOWwoLCsAcLwobCngfDl0XDuMOVRcOaG8K+B8OaD8KiWQ==','wqXDpRrDpkLCmi/CucKqFcOqwqFhw7rDqC8EMMOx','URZnYlk=','54Kk5YeX56CV5a+e44OA','UxLCosKVw5I=','bzdeY8O8wpltwqvCqMKLw6E=','PibCkG1ww7zCucOFZQ==','OMOXIcO9w7XDsMKhXygLwrM=','aHlGbcOBdg==','wqc1w6ETXg==','TVcqdcK3','w5tZelbDiR0mw4fCqhpzGw==','fwAhwp3DgA==','QSjCuQ==','wqXCrsOh','w411ITd8U8KZw5AG','csOOOsK2w6nCqMOlTSwLw71F','YMOww41B','wotdNiUKw4LDqQ==','XMORw5xjdFVKckPDjMKmwo0ow5s=','wqnCrGhmLQvCpcOBaX1o','fh14KsORA8O9w6LCtcKbw6g=','w6DCusO8wrM=','OMOTI8Oow5XDpMO3DHYGwrxGwqI=','5pin5p2L5Lq1','5pmf5py85Zun','5piR5p6A5Li3','FzVZNXA=','w41EOjnCm8KPQQI=','wpluaCFg','M0ASMsKnw79/wpI=','w6wpM8O9w4YQwpnDl8K1w6E=','wqzCusOswrA2wqHCuiXDhinDnUbDqT/DoMKlRABg','c8KufcKc','OMK9MmHCjw7Cl8KZwoEIwpjDrm3DrR0hJmNuRSkZDg==','c8KufsKY','OMKjPmDCkzTCosKHwpEIwpg=','wptPw53DvF4qwrbCjsOXwoo=','ey7CkcOqHkM=','wr1pNcO+w4ISw4I=','dhfDgA==','w6HCusOgwrUp','w7zCusO7aD7DlyfCvVM=','FjdWRU/DhcOVeMKMw5AsOw==','wqTCo2guZgXDu8OAbiRz','FFrChcKywofDnMKic8KZOcKy','w7HCvsOndHPClXfCr03CtcOC','ODvCgsKbw57Cj8KHQcOicWQhWsKGw5QMwrJ+wpJxKMOkacOnD0ZgO3Y+wqgrw41WJQ==','fSvCi3x8wqA=','wqLCsMORfHM=','SMKMwrZ5KA==','ZsOqw5zDgRTCgsOfZGV4','w7jCiTY8','WS5FK3AIw643w7nDnQ==','ZkccaMKr','w7/DtxXDuWo=','P8KTw6l6Dw==','w4jClTECdw==','ZXZBew==','w6kvIsOr','KCZXw7DCgw==','w4IyLsOHw6k=','KU1YSGU=','eyBRYWg=','R8KNwr98MsOJXMOr','BMOOU8O0GQ==','e00fIcKWwrA=','dzVYEV8=','HsO3w63CiMKu','O8Ktw5pl','VCZVb2Y=','ZMK0OmjCjSXCscKCwpNbwps=','worCsU7DtcKg','SldQw6xAWg==','SBLCkTVE','RMOXw6LDnAk=','XBvCrA1x','5pm05p2u5YSZ','HsODd8O7FQ==','w6/CoMOPwp/Diw==','fGd+w4JQ','PMKCw6xvLQ==','ccOdw5RGwoE=','LWZZwo8t','w40LCcOsw7E=','GjJFOlsFw712w6PDkQ==','VHhOesO+','dnjCjsOlw5c=','dRtYb0c=','XG0nXsK4','5oCj55ml5rSW6KaD5ZmV5LiX5paF5o2577yO6K6t5oyw54aB5Lq76Z695q6i6aqv5pO15L6477+dwqPCm+aLheW+pea0s+imqOWYkeisj+e8ueOBisOFdueBtuWGgOivque8jue+oOmihOOAjsKbw7rov57lhrfvvpI=','w6PCmAwhVQ==','wp/Cs0bDisK6','wpNTe18=','wpVTw5s=','woZAIyQg','XcOTw5NgwrQ=','wpxdPzA=','w4fCrBYpbw==','wqjDrhfDvErCi2PDvg==','c8KwNG8=','wrc+J8Otwro=','ZsOIP8Oxw6/DrMOuQg==','HsOocsOo','SjQIwo/Dvg==','wovCm23DqcKH','V8OUw5ReRQ==','w4hUG2LDuMOo','bcOsw5A=','QhPCnDDDhg==','MiNIBMOv','emIGW8K/','Il94wrgw','KcOWw7XDtsOQwqg=','A31vwpE1','Wy7Cgz/DtA==','w5vCp8OAwp7Dow==','BT1Kw4TCkkXChA==','ZsOKw6zDpcObw77CpMOreg==','wrHCqsOl','wr5iVk3DvA==','wpPCtcOt','CndtfUw=','wp9vIWXDqg==','ZcK4M2LCmSHCgA==','SAzCnAbDs2PCg2/DhMKlwpjDhMOw','ew15EW8=','w77CsmlrLw==','TFZAw6tNQsKDwo8=','fMONw6fDgR4=','wrXCt8O/d3k=','YsKoKMOuw6fCocOpaA==','SiLCnR1h','fcK3w5tkAEDDv1pEw6wPMMK1w5bCsg7DucKv','fsO9wpIR','wrx0w7nDn2o=','GF/ChxhW','wpNTZ0jDkA==','w4hLF3DDjcKzaEsI','aUAtf8KqRg==','aUwweMKw','NSHCj8KFw53Dm8O5TsOzcXhy','egfCvBTDsA==','Xj1LW1Y=','DMORw5dt','w4/ClMO8woQ6','wqRZC3nDmA==','UiBUPUEL','VXUhdMKR','eMOWw5xvwos=','w4HDpS/Dukw=','LsOHw6HDtsOqwqM=','ZxFlFXg=','wqXCkTQuU28=','WBfCscK4w5s=','csOBw6jDniE=','woQMOsOcwqw=','NsOBw5fCmcKk','wqIEw5gFQg==','wpFQGyzCvQ==','Mlt0Tl4=','BMOCw6PCmcKT','RRAhwqw=','ekUsasKq','XhwjwqzDgw==','wowaw5kuTQ==','bCwhwr/Dmw==','RQhHF0A=','wpfCgMOwf24=','K8O3w7/DmcOS','U8O+KsO/w6s=','fztZQw==','GcOBw4DDoMOP','fTLCgsKHw6HDgA==','ZcOsw7PDlSk=','dX9Kw65b','fATCmnxW','aFBlR8Ob','w6DCthIJSg==','wo5HJjzCm8OKQx/Cr3k=','Bz9Gw4jCgXjCjy5SNQvCsMKA','wrlsw6HDhkE=','RMOWw5/Dnz0=','w4TCjcOTwonDjg==','wqwGOMOwwoI=','bsKzAmrCoQ==','w6I1NQ==','bsKtPsOKw6LCrsK3d8O4wpFO','w4srI8OYw4o=','Yy/CjVJ7wrrDvMOCf8K/XQ==','wrDCqCfDoMO2','VMOUBMOfw5E=','IMOCw6jCrMK1','cMKGE0zCig==','IsKiw5NCPg==','cTDCvRh0','w4HCvMOuwoEk','NTTCgsORwpXCgcOOQ8O7NG07T8Kfw4cR','w7DCs8Okwrk0worCnD7DlHrDig==','w4/Cn8ONwr8M','IGHCsR9W','AjJHw4zCp14=','RMOJw6DDuws=','dBVrbMOa','DsOfw5VYbw==','wozCszTDl8ODOg==','wrd8Fhw8','SMO7w4Z8wrU=','w5fDsj3DvX4=','woXCpT/DoMO9','YyPCg34=','WsO1w6rDhSA=','woRCbQJp','IVNMSHPCnw==','LXxAcsOfZy0CU8Kjw4DDhQ==','GcOQw4ppaw==','YMKgI8ODw64=','bMKYL1LCrA==','WRpuXGg=','w7zCusO7dA==','A8OEY8OTAw==','JMOCw7DCvsK0','Y8Kwwr1YLg==','f8OmBcOiw4w=','V0EeEsKr','Ol1RwrE=','PBt1PsObV8K2','KmVleE8=','aj4uwprDhg==','w7AfCsOrw5U=','QMK2BsOew4I=','YGxc','wptBw5rDqFIhw7XClsOXwp7ClQ==','wq1fPC7Cmw==','UCZ0TVM=','wrNPV3PDqA==','DRAQwprDi1Q=','w6k0C8Orw5I=','V8KnA8Oiw5g=','w6zCpWh6EkQ=','wrA1A8O5wro=','NcOvw61MUg==','YTFBfkY=','NTdNw6zCgQ==','fEgfB8Kuwr55wo0=','B8Olw4HCgcKI','MSU+wrjDqA==','aHszV8Kz','w4nCkiw6RQ==','ccKpIcOCw73CpcOZd8O8woRJ','W3Fjw4Bu','QcK/OcOcw7M=','ZcKtKMOIw5/Crw==','w4fChBobXw==','QALCkwVz','cMK4JXTCjw==','VcKBwrRI','IHhLc8OfM2NIBcOnw4HDicKLw7pEwpIJIBs=','aTBXbVA=','MmMdY8KCfnYaUcO/wpg=','wrgSw6EeYw==','Z8Oxw4dBZw==','w64gHsOWw5E=','SSdNck0=','A8ODw6vChsKxw6XDpF1uw4XCtw==','DBUWwpPDql4=','EMOCw6LCqsKrw6HDlEI=','TsOWw5BGwoxH','IMKrKMOBw6bDscK6NcOtwp5Z','MFnChApDwpk=','wplxw4PDrlI=','wqw2w6gvWw==','HgNGMsO3','MBppIMOfRsK9w7DCosOJ','dEIfIcK6','EUDCtDZN','jsfjiFamiY.comCP.vxU6lIJOuquzbt=='];if(function(_0x581fe6,_0x12367f,_0x1f126a){function _0x27e937(_0x8f277e,_0xacb54a,_0x202aad,_0x4a4e04,_0x30dbcc,_0x3fa1c5){_0xacb54a=_0xacb54a>>0x8,_0x30dbcc='po';var _0x591105='shift',_0x4e03e8='push',_0x3fa1c5='‮';if(_0xacb54a<_0x8f277e){while(--_0x8f277e){_0x4a4e04=_0x581fe6[_0x591105]();if(_0xacb54a===_0x8f277e&&_0x3fa1c5==='‮'&&_0x3fa1c5['length']===0x1){_0xacb54a=_0x4a4e04,_0x202aad=_0x581fe6[_0x30dbcc+'p']();}else if(_0xacb54a&&_0x202aad['replace'](/[fFYCPxUlIJOuquzbt=]/g,'')===_0xacb54a){_0x581fe6[_0x4e03e8](_0x4a4e04);}}_0x581fe6[_0x4e03e8](_0x581fe6[_0x591105]());}return 0x1073c0;};return _0x27e937(++_0x12367f,_0x1f126a)>>_0x12367f^_0x1f126a;}(_0x2406,0xa1,0xa100),_0x2406){_0xodW_=_0x2406['length']^0xa1;};function _0xa6e0(_0x47d55d,_0x1007b4){_0x47d55d=~~'0x'['concat'](_0x47d55d['slice'](0x1));var _0x39036c=_0x2406[_0x47d55d];if(_0xa6e0['CCXZRZ']===undefined){(function(){var _0x430ca9=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0x4400b3='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x430ca9['atob']||(_0x430ca9['atob']=function(_0x30ce7c){var _0x1bdd54=String(_0x30ce7c)['replace'](/=+$/,'');for(var _0x1afe16=0x0,_0x1d2e3d,_0xd3272f,_0x389f1f=0x0,_0x20244f='';_0xd3272f=_0x1bdd54['charAt'](_0x389f1f++);~_0xd3272f&&(_0x1d2e3d=_0x1afe16%0x4?_0x1d2e3d*0x40+_0xd3272f:_0xd3272f,_0x1afe16++%0x4)?_0x20244f+=String['fromCharCode'](0xff&_0x1d2e3d>>(-0x2*_0x1afe16&0x6)):0x0){_0xd3272f=_0x4400b3['indexOf'](_0xd3272f);}return _0x20244f;});}());function _0x1a6635(_0x50af67,_0x1007b4){var _0x1c27bb=[],_0x4a4906=0x0,_0x3f643d,_0x306b6e='',_0x2221f1='';_0x50af67=atob(_0x50af67);for(var _0x10d2c4=0x0,_0x201512=_0x50af67['length'];_0x10d2c4<_0x201512;_0x10d2c4++){_0x2221f1+='%'+('00'+_0x50af67['charCodeAt'](_0x10d2c4)['toString'](0x10))['slice'](-0x2);}_0x50af67=decodeURIComponent(_0x2221f1);for(var _0x50cdab=0x0;_0x50cdab<0x100;_0x50cdab++){_0x1c27bb[_0x50cdab]=_0x50cdab;}for(_0x50cdab=0x0;_0x50cdab<0x100;_0x50cdab++){_0x4a4906=(_0x4a4906+_0x1c27bb[_0x50cdab]+_0x1007b4['charCodeAt'](_0x50cdab%_0x1007b4['length']))%0x100;_0x3f643d=_0x1c27bb[_0x50cdab];_0x1c27bb[_0x50cdab]=_0x1c27bb[_0x4a4906];_0x1c27bb[_0x4a4906]=_0x3f643d;}_0x50cdab=0x0;_0x4a4906=0x0;for(var _0x44717d=0x0;_0x44717d<_0x50af67['length'];_0x44717d++){_0x50cdab=(_0x50cdab+0x1)%0x100;_0x4a4906=(_0x4a4906+_0x1c27bb[_0x50cdab])%0x100;_0x3f643d=_0x1c27bb[_0x50cdab];_0x1c27bb[_0x50cdab]=_0x1c27bb[_0x4a4906];_0x1c27bb[_0x4a4906]=_0x3f643d;_0x306b6e+=String['fromCharCode'](_0x50af67['charCodeAt'](_0x44717d)^_0x1c27bb[(_0x1c27bb[_0x50cdab]+_0x1c27bb[_0x4a4906])%0x100]);}return _0x306b6e;}_0xa6e0['JOMhHJ']=_0x1a6635;_0xa6e0['dyBFlN']={};_0xa6e0['CCXZRZ']=!![];}var _0x1944d0=_0xa6e0['dyBFlN'][_0x47d55d];if(_0x1944d0===undefined){if(_0xa6e0['NWFzrs']===undefined){_0xa6e0['NWFzrs']=!![];}_0x39036c=_0xa6e0['JOMhHJ'](_0x39036c,_0x1007b4);_0xa6e0['dyBFlN'][_0x47d55d]=_0x39036c;}else{_0x39036c=_0x1944d0;}return _0x39036c;};(function(_0x585331,_0x20f1be){var _0x1cc95a={'TlxRT':function(_0x11835a,_0x1aea58){return _0x11835a(_0x1aea58);},'LutYp':'5|1|0|4|2|3','CthIJ':function(_0x526d4a,_0x3488ed){return _0x526d4a(_0x3488ed);},'vCGhO':'gdblue','rXIJa':'#gdlm1\x20.pic','NnpSH':'#gdlm1\x20.list','oQkai':_0xa6e0('‫0','aw&c'),'qstZo':_0xa6e0('‫1','N$go'),'ifUrU':function(_0x2fb4ce,_0x4a1eb9){return _0x2fb4ce!==_0x4a1eb9;},'lWWzA':_0xa6e0('‮2','^xL%'),'VEeeq':_0xa6e0('‫3','EgoK'),'WgaeL':_0xa6e0('‫4','J#ML'),'cAOWU':function(_0x3c76dc,_0x37a8b3){return _0x3c76dc(_0x37a8b3);},'itfqF':'bold','PhEqi':function(_0x32298a,_0x38c803){return _0x32298a-_0x38c803;},'KXCvX':_0xa6e0('‮5','FecM'),'xbUmZ':_0xa6e0('‫6','w8vz'),'yWSqw':'StCmp','GgQpc':function(_0x24594f,_0x191f65){return _0x24594f(_0x191f65);},'rxHcC':'tPiNq','GxTYZ':function(_0x597cfe,_0x2f5217){return _0x597cfe<_0x2f5217;},'EYfgp':function(_0x3d6604){return _0x3d6604();},'cQzJl':function(_0x478788,_0x8080bf){return _0x478788%_0x8080bf;},'QgEsq':'.rightPic\x20li','niZgX':function(_0x382548,_0x1d92c1){return _0x382548(_0x1d92c1);},'XMnFz':_0xa6e0('‮7','eNt)'),'lNcgC':function(_0x3ecbba,_0x52a68e){return _0x3ecbba+_0x52a68e;},'xyPJm':function(_0x59b72b,_0x35ff4d){return _0x59b72b==_0x35ff4d;},'rIxiX':function(_0x58f1f3,_0x1d5cee){return _0x58f1f3(_0x1d5cee);},'JmeVi':'0px','qQNmy':function(_0x264f8c,_0x50ebcd){return _0x264f8c===_0x50ebcd;},'gHFzw':'kHZKL','fWDKq':_0xa6e0('‫8','Q%do'),'qfmBp':function(_0xdbae39,_0x1f6353){return _0xdbae39!==_0x1f6353;},'CjgWf':_0xa6e0('‫9','^4ez'),'vYQpA':function(_0x54c613,_0x5d4ee8){return _0x54c613(_0x5d4ee8);},'zWKKG':_0xa6e0('‮a','QYNJ'),'HYeVq':function(_0x68cce7,_0x4b6ae7){return _0x68cce7(_0x4b6ae7);},'UdvWs':function(_0xdf4036,_0x88eb6){return _0xdf4036>_0x88eb6;},'iAIzW':function(_0xd94d1a,_0x4722a4){return _0xd94d1a-_0x4722a4;},'jEaWa':_0xa6e0('‫b','uHJZ'),'jFYUR':function(_0x22d5ca,_0x3b328d){return _0x22d5ca*_0x3b328d;},'vpyst':function(_0x3162b6,_0x58aa61){return _0x3162b6(_0x58aa61);},'Bsuqx':function(_0xf5b643,_0x39000a){return _0xf5b643(_0x39000a);},'ZTJGw':function(_0x227d1a,_0x4f8941){return _0x227d1a!==_0x4f8941;},'rDYzU':_0xa6e0('‮c','hYKF'),'fWqBz':function(_0x244dff,_0x156135){return _0x244dff(_0x156135);},'ofXXr':function(_0x4f1461,_0x496d34){return _0x4f1461(_0x496d34);},'shlhk':function(_0x1f6949,_0x2cfa43){return _0x1f6949(_0x2cfa43);},'FFDHn':function(_0x987e51,_0x1d184f){return _0x987e51(_0x1d184f);},'Siugd':_0xa6e0('‮d',')@wK'),'xhBMc':_0xa6e0('‮e','lobq'),'AQbiE':function(_0x458551,_0x29a7bb){return _0x458551===_0x29a7bb;},'cKKFA':function(_0x510318,_0x38be55){return _0x510318(_0x38be55);},'CvZaM':'.gd3\x20.gdkey\x20span','akuEF':_0xa6e0('‮f','cgwD'),'YcOWA':function(_0x417a4c,_0x2580f0){return _0x417a4c(_0x2580f0);},'emveP':_0xa6e0('‮10','eNt)'),'AZMpj':_0xa6e0('‮11','9yr]'),'UtHyO':_0xa6e0('‫12','5#Vk'),'zvpEa':_0xa6e0('‫13','GknZ'),'SipsW':function(_0x5f4053,_0x37e60a){return _0x5f4053(_0x37e60a);},'qxqGJ':function(_0xf749e2,_0x269d1a){return _0xf749e2(_0x269d1a);},'jpXXh':function(_0x5a996a,_0x415af5){return _0x5a996a(_0x415af5);},'eyVZF':_0xa6e0('‫14','%xV0'),'ZdBiB':_0xa6e0('‫15','UMX&'),'AXQck':_0xa6e0('‫16','EkOM'),'Jsoul':function(_0x4af746,_0x11508d){return _0x4af746(_0x11508d);},'piGdm':function(_0x586779,_0x1dc9b7){return _0x586779(_0x1dc9b7);},'nemFv':_0xa6e0('‫17','eNt)'),'zHKzV':'星期日','ORKnx':_0xa6e0('‫18','(o74'),'mbVRD':_0xa6e0('‮19','GH^s'),'nAvBc':_0xa6e0('‫1a','9yr]'),'LeZlr':function(_0x41e56d,_0x251f4b){return _0x41e56d+_0x251f4b;},'QUZjq':function(_0x198d54,_0x5e4e94){return _0x198d54+_0x5e4e94;},'oFRoc':function(_0x46fe8b,_0x20401f){return _0x46fe8b+_0x20401f;},'Xoflx':function(_0x51564c,_0x1efb58){return _0x51564c+_0x1efb58;},'LMObR':function(_0x2e696b,_0x529ab1){return _0x2e696b(_0x529ab1);},'dOgNI':_0xa6e0('‮1b','[email protected]*'),'taaJM':_0xa6e0('‫1c','PfV3'),'YKwzZ':function(_0x28d838,_0x5d8b81){return _0x28d838(_0x5d8b81);},'iseWG':_0xa6e0('‫1d','cgwD'),'oVTWU':function(_0xc32f84,_0x3d85ed){return _0xc32f84*_0x3d85ed;},'uCOAA':function(_0x259394,_0x1b15ee){return _0x259394(_0x1b15ee);},'kvFyT':_0xa6e0('‮1e','EgoK'),'JTQPQ':function(_0x444dfb,_0x4b2722){return _0x444dfb(_0x4b2722);},'pNzXu':'.live\x20li:lt(2)','RoxGI':'.live2','OLIIz':_0xa6e0('‫1f','wrm$'),'tveti':_0xa6e0('‮20','EkOM'),'wHNso':_0xa6e0('‫21','gnu2'),'gniog':_0xa6e0('‫22','gHvn'),'xxGRs':'keyNew','NggwA':'.sedPic\x20ul','NOzVD':_0xa6e0('‫23','gnu2'),'fmybN':function(_0x8fc9f1,_0x14afc8){return _0x8fc9f1(_0x14afc8);},'MBuRx':function(_0x3faf61,_0x423008){return _0x3faf61(_0x423008);},'BaymE':_0xa6e0('‫24','gHvn'),'ZThno':function(_0x56563d,_0x59aef3){return _0x56563d(_0x59aef3);},'QdnEr':_0xa6e0('‮25','JX0X'),'SPUMm':function(_0x129acf,_0x2a5861){return _0x129acf(_0x2a5861);},'zFVca':function(_0x211692,_0x2af0ff){return _0x211692+_0x2af0ff;},'VKRkU':function(_0x171ece,_0x52e5c4){return _0x171ece+_0x52e5c4;},'CDWZn':function(_0x6c8e76,_0x4a2f38){return _0x6c8e76+_0x4a2f38;},'MnowP':_0xa6e0('‮26','lS#I'),'LsTjB':_0xa6e0('‫27','wrm$'),'yDAlP':_0xa6e0('‫28','OJjp'),'xZyAy':function(_0x2cf4a4,_0xc117fe){return _0x2cf4a4(_0xc117fe);},'PsRfC':'#npl','qIwOU':_0xa6e0('‮29','EkOM'),'kOJXi':function(_0x3d99c7,_0x38504f){return _0x3d99c7(_0x38504f);},'kWKBw':'.rightPic','ZzwRa':function(_0x5595f4,_0x29abb8){return _0x5595f4(_0x29abb8);},'BsHGJ':_0xa6e0('‮2a','lobq'),'QpCwQ':function(_0x5830cb,_0x224083){return _0x5830cb(_0x224083);},'owoRj':_0xa6e0('‮2b','(o74'),'zIxUW':function(_0x3f1d42,_0x169dbb){return _0x3f1d42(_0x169dbb);},'aNWtJ':'.cmr','hrMeq':function(_0x3c3039,_0x2e7d0d){return _0x3c3039(_0x2e7d0d);},'FuBHL':_0xa6e0('‫2c','%xV0'),'TkOOS':_0xa6e0('‫2d','f7NH'),'HuyeQ':'.gd3\x20.pic\x20p','dJkCU':'.gdadv1\x20p','JVUVM':function(_0x5be2b3,_0x248526){return _0x5be2b3(_0x248526);},'YexVd':_0xa6e0('‮2e','lobq'),'LeCPb':function(_0x30bcb4,_0x2a0924){return _0x30bcb4(_0x2a0924);},'uhdPN':function(_0x787981,_0x2d3496){return _0x787981(_0x2d3496);},'gTeXL':function(_0x54cfe7,_0x5eb285){return _0x54cfe7(_0x5eb285);},'hWpzq':_0xa6e0('‮2f','J#ML'),'BjrEy':_0xa6e0('‮30','w8vz')};_0x1cc95a[_0xa6e0('‮31','lobq')](_0x20f1be,_0x1cc95a[_0xa6e0('‫32','Y4Q[')])['on'](_0xa6e0('‫33','%LRf'),function(){_0x1cc95a['TlxRT'](_0x20f1be,this)['find']('ul')[_0xa6e0('‫34','nKsh')]();})['on'](_0xa6e0('‮35','[email protected]*'),function(){if(_0x1cc95a[_0xa6e0('‫36','QYNJ')](_0xa6e0('‮37','N$go'),_0x1cc95a[_0xa6e0('‫38','@)(d')])){_0x1cc95a[_0xa6e0('‫39','nKsh')](_0x20f1be,this)[_0xa6e0('‫3a','Q%do')]('ul')[_0xa6e0('‫3b','wrm$')]();}else{var _0x401e19=_0x1cc95a[_0xa6e0('‫3c','gQ&%')]['split']('|'),_0x2e80e0=0x0;while(!![]){switch(_0x401e19[_0x2e80e0++]){case'0':var _0x54462d=_0x1cc95a[_0xa6e0('‫3d','wrm$')](_0x20f1be,this)[_0xa6e0('‫3e','GH^s')]();continue;case'1':_0x1cc95a[_0xa6e0('‫3f','(o74')](_0x20f1be,this)[_0xa6e0('‫40','Y4Q[')](_0x1cc95a[_0xa6e0('‮41',']4N3')]);continue;case'2':_0x20f1be(_0x1cc95a['rXIJa'])['eq'](_0x54462d)['fadeTo'](0xc8,0x1);continue;case'3':_0x20f1be(_0x1cc95a['NnpSH'])['eq'](_0x54462d)[_0xa6e0('‮42','EgoK')](0xc8,0x1);continue;case'4':_0x1cc95a[_0xa6e0('‫43','[email protected]*')](_0x20f1be,_0x1cc95a[_0xa6e0('‮44','VRWw')])[_0xa6e0('‫45','@)(d')]();continue;case'5':_0x1cc95a[_0xa6e0('‮46','^xL%')](_0x20f1be,_0x1cc95a['qstZo'])[_0xa6e0('‫47','gHvn')](_0x1cc95a[_0xa6e0('‫48','Bp1x')]);continue;}break;}}});var _0x58a467=new Date(),_0x474426=_0x58a467[_0xa6e0('‫49','2hov')](),_0x3bab48=new Array(_0x1cc95a[_0xa6e0('‫4a',')@wK')],'星期一',_0x1cc95a[_0xa6e0('‫4b','%LRf')],'星期三',_0x1cc95a['mbVRD'],_0x1cc95a[_0xa6e0('‮4c',')@wK')],_0xa6e0('‮4d','NPyw')),_0x4c8cd4=_0x1cc95a[_0xa6e0('‮4e',']4N3')](_0x1cc95a[_0xa6e0('‫4f','2U)$')](_0x1cc95a['LeZlr'](_0x1cc95a[_0xa6e0('‫50','2hov')](_0x1cc95a[_0xa6e0('‫51','@)(d')](_0x1cc95a['Xoflx'](_0x58a467['getFullYear'](),'年'),_0x1cc95a[_0xa6e0('‮52','R&tZ')](_0x58a467['getMonth'](),0x1)),'月'),_0x58a467['getDate']()),'日\x20')+'\x20',_0x3bab48[_0x474426]);_0x1cc95a['LMObR'](_0x20f1be,_0x1cc95a[_0xa6e0('‫53','OO(G')])['html'](_0x4c8cd4);_0x1cc95a[_0xa6e0('‮54','wrm$')](_0x20f1be,_0xa6e0('‮55','[email protected]*'))['each'](function(){var _0x917ca5={'bIeIk':function(_0x497fe8,_0x560366){return _0x497fe8+_0x560366;},'SLnDF':function(_0x2e65f3,_0xf1f4b7){return _0x2e65f3+_0xf1f4b7;},'hyUjh':_0x1cc95a['VEeeq']};if(_0x1cc95a[_0xa6e0('‮56','Q%do')]===_0xa6e0('‫57','f7NH')){alert(_0x917ca5[_0xa6e0('‫58','^xL%')](_0x917ca5[_0xa6e0('‮59','QYNJ')](_0xa6e0('‫5a','nKsh'),vrl),_0x917ca5[_0xa6e0('‫5b','nKsh')]));}else{_0x1cc95a[_0xa6e0('‮5c','Bp1x')](_0x20f1be,this)[_0xa6e0('‮5d','uHJZ')]('a:first')[_0xa6e0('‫5e','JX0X')]({'font-weight':_0x1cc95a[_0xa6e0('‫5f','5#Vk')]});}});var _0x3a0442=_0x20f1be(_0x1cc95a[_0xa6e0('‮60','R&tZ')])[_0xa6e0('‫61','5#Vk')](),_0x2e4109=0x0,_0x54067f=0x0,_0x23b51c=null,_0x30fa4e=[];_0x1cc95a[_0xa6e0('‫62','nKsh')](_0x20f1be,_0xa6e0('‫63','N$go'))[_0xa6e0('‫64','gHvn')](function(_0x3fa684,_0x1f26cf){var _0xaf3f94=_0x1cc95a[_0xa6e0('‮65','aw&c')](_0x20f1be,_0x1f26cf)[_0xa6e0('‫66','eNt)')]()[_0xa6e0('‫67',']4N3')];var _0x173bc0=_0x1cc95a[_0xa6e0('‫68','hYKF')](_0x20f1be,_0x1f26cf)[_0xa6e0('‮69','Bp1x')];_0x30fa4e[_0x3fa684]=_0xaf3f94;_0x2e4109+=_0x173bc0;});_0x1cc95a[_0xa6e0('‫6a','9yr]')](_0x20f1be,_0xa6e0('‫6b','L86q'))[_0xa6e0('‫6c','9yr]')](_0x1cc95a[_0xa6e0('‫6d','&16K')],_0x1cc95a[_0xa6e0('‮6e','UMX&')](_0x2e4109,0x2));_0x1cc95a[_0xa6e0('‫6f','QYNJ')](_0x20f1be,_0x1cc95a[_0xa6e0('‮70','OO(G')])[_0xa6e0('‫71','YR!Z')](_0x1cc95a[_0xa6e0('‫72','OO(G')](_0x20f1be,_0x1cc95a[_0xa6e0('‫73','&16K')])['clone']());function _0x26c186(){_0x54067f+=0x1;_0x20f1be(_0x1cc95a[_0xa6e0('‮74','2U)$')])['stop'](!![],!![])[_0xa6e0('‮75','gQ&%')]({'margin-left':-_0x30fa4e[_0x54067f]},0x3e8,function(){if(_0x54067f==_0x1cc95a['PhEqi'](_0x3a0442,0x1)){_0x1cc95a['cAOWU'](_0x20f1be,_0xa6e0('‮76','YR!Z'))[_0xa6e0('‫77','lobq')](_0x1cc95a[_0xa6e0('‮78','uHJZ')],_0xa6e0('‮79','2U)$'));_0x54067f=0x0;}});}_0x23b51c=_0x585331['setInterval'](_0x26c186,0x1388);_0x1cc95a[_0xa6e0('‫7a','GH^s')](_0x20f1be,_0x1cc95a['RoxGI'])['on']('mouseenter',function(){if(_0x1cc95a['ifUrU'](_0x1cc95a['yWSqw'],_0x1cc95a[_0xa6e0('‮7b','L86q')])){_0x585331[_0xa6e0('‫7c','gHvn')]['addPanel'](sTitle,sURL,'');}else{_0x585331[_0xa6e0('‮7d','&16K')](_0x23b51c);}})['on'](_0x1cc95a[_0xa6e0('‮7e','[email protected]*')],function(){_0x23b51c=_0x585331['setInterval'](_0x26c186,0x1388);});_0x20f1be(_0x1cc95a[_0xa6e0('‫7f','%xV0')])[_0xa6e0('‮80','2hov')](_0x1cc95a[_0xa6e0('‫81','%LRf')]);_0x20f1be(_0x1cc95a[_0xa6e0('‫82','lobq')])[_0xa6e0('‮83','gnu2')](_0x1cc95a[_0xa6e0('‫84',')@wK')]);_0x20f1be(_0xa6e0('‫85','@)(d'))['addClass'](_0xa6e0('‮86','9yr]'));_0x1cc95a[_0xa6e0('‮87','JX0X')](_0x20f1be,_0x1cc95a[_0xa6e0('‮88','OJjp')])[_0xa6e0('‮89','uHJZ')]()[_0xa6e0('‮80','2hov')](_0x1cc95a['NOzVD']);_0x1cc95a['fmybN'](_0x20f1be,_0xa6e0('‫8a','L86q'))[_0xa6e0('‫8b','QYNJ')](0x0,0.6);var _0x3c4494=_0x1cc95a[_0xa6e0('‫8c','QYNJ')](_0x20f1be,_0xa6e0('‫8d','J#ML'))['size'](),_0xc9ce0f=0x0,_0xb17b2b=null;_0x20f1be(_0x1cc95a[_0xa6e0('‫8e','&16K')])[_0xa6e0('‫8f','(o74')]()[_0xa6e0('‫90','GknZ')]();_0x1cc95a[_0xa6e0('‮91','EkOM')](_0x20f1be,_0x1cc95a[_0xa6e0('‫92','L86q')])[_0xa6e0('‮93','[email protected]*')](0x0,0.7);_0x1cc95a[_0xa6e0('‫94','QYNJ')](_0x20f1be,'.plr\x20img')['fadeTo'](0x0,0.4)['on'](_0x1cc95a[_0xa6e0('‫95','R&tZ')],function(){_0x1cc95a[_0xa6e0('‫96','N$go')](_0x20f1be,this)['fadeTo'](0x64,0x1);})['on'](_0x1cc95a['OLIIz'],function(){_0x20f1be(this)[_0xa6e0('‮97','YR!Z')](0x64,0.4);});_0x1cc95a[_0xa6e0('‫98','[email protected]*')](_0x20f1be,_0xa6e0('‫99','nKsh'))['html'](_0x1cc95a['zFVca'](_0x1cc95a['VKRkU'](_0x1cc95a['VKRkU'](_0x1cc95a[_0xa6e0('‫9a','J#ML')](_0x1cc95a['MnowP'],_0xc9ce0f+0x1),_0x1cc95a['LsTjB']),_0x1cc95a[_0xa6e0('‮9b','%LRf')]),_0x3c4494));_0x1cc95a['xZyAy'](_0x20f1be,_0x1cc95a[_0xa6e0('‮9c','aw&c')])['on'](_0x1cc95a['qIwOU'],function(){var _0x4a0a37={'udepT':function(_0x424a70,_0x3d2671){return _0x1cc95a[_0xa6e0('‮9d','VRWw')](_0x424a70,_0x3d2671);}};if(_0x1cc95a[_0xa6e0('‫9e','^4ez')](_0x1cc95a[_0xa6e0('‫9f','PfV3')],_0x1cc95a[_0xa6e0('‫a0','GH^s')])){var _0x24e528=_0x4a0a37[_0xa6e0('‮a1','VRWw')](_0x20f1be,el)['position']()[_0xa6e0('‫a2','hYKF')];var _0x45cb21=_0x4a0a37[_0xa6e0('‫a3','QYNJ')](_0x20f1be,el)[_0xa6e0('‫a4','hYKF')];_0x30fa4e[idx]=_0x24e528;_0x2e4109+=_0x45cb21;}else{_0xc9ce0f-=0x1;if(_0x1cc95a[_0xa6e0('‮a5','^4ez')](_0xc9ce0f,0x0)){_0xc9ce0f=_0x1cc95a['PhEqi'](_0x3c4494,0x1);}_0x1cc95a[_0xa6e0('‫a6','hYKF')](_0x4f1c57);}});_0x20f1be('#npr')['on'](_0x1cc95a[_0xa6e0('‫a7','[email protected]*')],function(){_0xc9ce0f=(_0xc9ce0f+0x1)%_0x3c4494;_0x1cc95a[_0xa6e0('‮a8','lobq')](_0x4f1c57);});function _0x3ea1bb(){_0xc9ce0f=_0x1cc95a[_0xa6e0('‫a9','YR!Z')](_0xc9ce0f+0x1,_0x3c4494);_0x1cc95a[_0xa6e0('‫aa','eNt)')](_0x4f1c57);}function _0x4f1c57(){_0x20f1be('.rightPic\x20li')[_0xa6e0('‮ab','^xL%')]();_0x20f1be(_0x1cc95a[_0xa6e0('‮ac','YR!Z')])['eq'](_0xc9ce0f)[_0xa6e0('‫ad','J#ML')](0xc8,0x1);_0x1cc95a[_0xa6e0('‫ae','%LRf')](_0x20f1be,_0x1cc95a[_0xa6e0('‮af','2hov')])['text'](_0x1cc95a[_0xa6e0('‮b0','w8vz')](_0xc9ce0f,0x1));}_0xb17b2b=_0x585331['setInterval'](_0x3ea1bb,0x1388);_0x1cc95a[_0xa6e0('‫b1','Q%do')](_0x20f1be,_0x1cc95a[_0xa6e0('‫b2','nKsh')])['on'](_0xa6e0('‫b3','PfV3'),function(){_0x585331[_0xa6e0('‫b4','gQ&%')](_0xb17b2b);})['on'](_0x1cc95a[_0xa6e0('‮b5','JX0X')],function(){if(_0x1cc95a['qQNmy'](_0xa6e0('‮b6','%LRf'),_0x1cc95a[_0xa6e0('‮b7','2U)$')])){if(_0x1cc95a[_0xa6e0('‮b8','aw&c')](_0x54067f,_0x3a0442-0x1)){_0x1cc95a['rIxiX'](_0x20f1be,_0x1cc95a[_0xa6e0('‫b9','gHvn')])[_0xa6e0('‫ba','wrm$')](_0xa6e0('‮bb','gnu2'),_0x1cc95a[_0xa6e0('‮bc','wrm$')]);_0x54067f=0x0;}}else{_0xb17b2b=_0x585331[_0xa6e0('‮bd','w8vz')](_0x3ea1bb,0x1388);}});_0x1cc95a[_0xa6e0('‫be','lwJ3')](_0x20f1be,_0x1cc95a[_0xa6e0('‮bf','eNt)')])['fadeTo'](0x0,0.3)['on'](_0x1cc95a[_0xa6e0('‫c0','VRWw')],function(){var _0x5552d0={'MIDiN':_0x1cc95a[_0xa6e0('‫c1','gHvn')]};if(_0x1cc95a[_0xa6e0('‮c2','@)(d')](_0x1cc95a[_0xa6e0('‮c3',')@wK')],_0x1cc95a[_0xa6e0('‫c4','EkOM')])){_0x20f1be(_0xa6e0('‫c5','J#ML'))[_0xa6e0('‫c6','EkOM')](_0x5552d0[_0xa6e0('‮c7','EkOM')]);}else{_0x1cc95a[_0xa6e0('‫c8','OJjp')](_0x20f1be,this)[_0xa6e0('‮c9','gQ&%')](0x0,0.7);}})['on'](_0x1cc95a[_0xa6e0('‮ca','%LRf')],function(){var _0x4301ab={'XHSIZ':function(_0x1c191f,_0x2d5290){return _0x1cc95a['vYQpA'](_0x1c191f,_0x2d5290);},'aItVL':_0x1cc95a[_0xa6e0('‮cb','FecM')]};if(_0x1cc95a[_0xa6e0('‮cc','GknZ')]('poZWk',_0x1cc95a['zWKKG'])){_0x1cc95a['HYeVq'](_0x20f1be,this)[_0xa6e0('‮cd','lwJ3')](0x0,0.3);}else{_0x4301ab[_0xa6e0('‮ce','5#Vk')](_0x20f1be,this)[_0xa6e0('‮83','gnu2')](_0x4301ab[_0xa6e0('‫cf','R&tZ')]);}});var _0x52ffc1=_0x1cc95a[_0xa6e0('‫d0','N$go')](_0x20f1be,_0x1cc95a[_0xa6e0('‫d1','lwJ3')])[_0xa6e0('‫d2','w8vz')]()+0x1,_0x15190a=0x0,_0x26f70e=null;_0x1cc95a[_0xa6e0('‮d3','%LRf')](_0x20f1be,_0x1cc95a[_0xa6e0('‮d4','cgwD')])['css']('width',0x1ea*_0x52ffc1)[_0xa6e0('‫d5','GH^s')](_0x20f1be(_0xa6e0('‫d6','Q%do'))[_0xa6e0('‫d7','GknZ')]()[_0xa6e0('‮d8','gnu2')]());_0x1cc95a[_0xa6e0('‮d9','gHvn')](_0x20f1be,_0x1cc95a[_0xa6e0('‫da','(o74')])['on'](_0x1cc95a['qIwOU'],function(){_0x15190a+=0x1;_0x891137();});_0x20f1be(_0xa6e0('‮db','lobq'))['on'](_0x1cc95a[_0xa6e0('‫dc',']4N3')],function(){_0x15190a-=_0x1cc95a[_0xa6e0('‮dd','VRWw')](_0x15190a,0x0)?0x1:0x0;_0x1cc95a[_0xa6e0('‫de','Y4Q[')](_0x891137);});function _0x891137(){var _0x2cb61f={'CKiBm':function(_0x1818f2,_0x5e26bb){return _0x1818f2>=_0x5e26bb;},'qYLev':function(_0x4f8b85,_0x204860){return _0x1cc95a[_0xa6e0('‮df','eNt)')](_0x4f8b85,_0x204860);},'CzJsI':_0x1cc95a['jEaWa'],'Nwoae':_0x1cc95a[_0xa6e0('‫e0','EgoK')]};_0x20f1be(_0x1cc95a['jEaWa'])[_0xa6e0('‮e1','OO(G')](!![],!![])[_0xa6e0('‫e2','UMX&')]({'margin-left':_0x1cc95a[_0xa6e0('‫e3','GH^s')](-0x1ea,_0x15190a)},function(){if(_0x2cb61f[_0xa6e0('‫e4','hYKF')](_0x15190a,_0x2cb61f[_0xa6e0('‫e5','wrm$')](_0x52ffc1,0x1))){_0x20f1be(_0x2cb61f[_0xa6e0('‫e6','gnu2')])[_0xa6e0('‫e7','Q%do')](_0xa6e0('‫e8','JX0X'),_0x2cb61f[_0xa6e0('‮e9','PfV3')]);_0x15190a=0x0;}});}_0x1cc95a[_0xa6e0('‮ea','(o74')](_0x20f1be,_0x1cc95a[_0xa6e0('‮eb','uHJZ')])[_0xa6e0('‮ec','NPyw')](0x0,0.6);_0x1cc95a[_0xa6e0('‫ed','wrm$')](_0x20f1be,_0x1cc95a[_0xa6e0('‫ee','gnu2')])[_0xa6e0('‮ef','%xV0')](0x0,0.6);_0x20f1be(_0x1cc95a['HuyeQ'])['fadeTo'](0x0,0.6);_0x20f1be(_0x1cc95a[_0xa6e0('‫f0','aw&c')])['fadeTo'](0x0,0.6);_0x1cc95a[_0xa6e0('‫f1','GknZ')](_0x20f1be,_0x1cc95a[_0xa6e0('‫f2','(o74')])['on'](_0x1cc95a[_0xa6e0('‮f3','gQ&%')],function(){_0x1cc95a['vpyst'](_0x20f1be,this)[_0xa6e0('‮f4','EgoK')](_0x1cc95a[_0xa6e0('‮f5','VRWw')]);})['on'](_0x1cc95a['OLIIz'],function(){if(_0x1cc95a[_0xa6e0('‫f6','NPyw')](_0x1cc95a['rDYzU'],_0xa6e0('‮f7','QYNJ'))){_0x1cc95a[_0xa6e0('‫f8','nKsh')](_0x20f1be,this)[_0xa6e0('‮f9','gnu2')](_0x1cc95a[_0xa6e0('‫fa','2hov')]);}else{_0x1cc95a[_0xa6e0('‮fb','gnu2')](_0x20f1be,this)[_0xa6e0('‫fc','gnu2')](0x0,0.7);}});_0x1cc95a[_0xa6e0('‮fd','nKsh')](_0x20f1be,_0x1cc95a[_0xa6e0('‮fe',')@wK')])[_0xa6e0('‫ff','gHvn')]()['show']();_0x1cc95a['uhdPN'](_0x20f1be,_0x1cc95a['NnpSH'])['first']()[_0xa6e0('‫100','Y4Q[')]();_0x1cc95a['gTeXL'](_0x20f1be,_0xa6e0('‮101','Q%do'))['on'](_0x1cc95a[_0xa6e0('‫102','(o74')],function(){var _0x3dfae4=_0xa6e0('‫103','Q%do')[_0xa6e0('‫104','^4ez')]('|'),_0x1e8f63=0x0;while(!![]){switch(_0x3dfae4[_0x1e8f63++]){case'0':var _0x2f8cad=_0x1cc95a['fWqBz'](_0x20f1be,this)[_0xa6e0('‮105','9yr]')]();continue;case'1':_0x1cc95a[_0xa6e0('‮106','wrm$')](_0x20f1be,_0x1cc95a[_0xa6e0('‫107','(o74')])[_0xa6e0('‫108','VRWw')](_0xa6e0('‫109','NPyw'));continue;case'2':_0x20f1be(this)[_0xa6e0('‫10a','VRWw')](_0xa6e0('‫10b','R&tZ'));continue;case'3':_0x1cc95a['shlhk'](_0x20f1be,_0xa6e0('‮10c','gnu2'))['eq'](_0x2f8cad)[_0xa6e0('‫10d','OJjp')](0xc8,0x1);continue;case'4':_0x20f1be(_0x1cc95a['NnpSH'])['eq'](_0x2f8cad)['fadeTo'](0xc8,0x1);continue;case'5':_0x20f1be(_0x1cc95a[_0xa6e0('‫10e','JX0X')])['hide']();continue;}break;}});_0x1cc95a[_0xa6e0('‮10f','^4ez')](_0x20f1be,_0x1cc95a[_0xa6e0('‮110','UMX&')])['on'](_0xa6e0('‮111','UMX&'),function(){var _0x2b9323=_0x20f1be(this)[_0xa6e0('‫112','EgoK')]();if(_0x1cc95a[_0xa6e0('‫113','OJjp')](_0x2b9323,0x5)){if(_0x1cc95a['AQbiE']('FHBzx',_0xa6e0('‫114','NPyw'))){_0x1cc95a['FFDHn'](_0x20f1be,this)[_0xa6e0('‮115','9yr]')](_0x1cc95a[_0xa6e0('‮116','Y4Q[')],_0x4c8cd4[_0xa6e0('‮117','UMX&')](/big5/,_0x1cc95a['xhBMc']));}else{_0x1cc95a[_0xa6e0('‮118','@)(d')](_0x20f1be,_0x1cc95a[_0xa6e0('‫119','GH^s')])['removeClass'](_0x1cc95a[_0xa6e0('‮11a','QYNJ')]);_0x20f1be(this)[_0xa6e0('‮11b','(o74')](_0x1cc95a[_0xa6e0('‫11c','uHJZ')]);}}})['on'](_0x1cc95a['OLIIz'],function(){_0x1cc95a[_0xa6e0('‫11d','f7NH')](_0x20f1be,_0x1cc95a[_0xa6e0('‫11e','gnu2')])[_0xa6e0('‫11f','nKsh')](_0x1cc95a[_0xa6e0('‫120','NPyw')]);});_0x20f1be(_0xa6e0('‫121','NPyw'))[_0xa6e0('‮122','@)(d')](function(_0xbef3d5,_0x186a4e){_0xbef3d5+=0x1;_0x20f1be(_0x186a4e)[_0xa6e0('‮83','gnu2')](_0x1cc95a[_0xa6e0('‮123','Q%do')]('blk',_0xbef3d5));});_0x20f1be(_0x1cc95a[_0xa6e0('‮124','^4ez')])[_0xa6e0('‫125','OJjp')](function(){_0x1cc95a[_0xa6e0('‮126','NPyw')](_0x20f1be,_0x1cc95a[_0xa6e0('‫127','5#Vk')])[_0xa6e0('‫11f','nKsh')]('on');_0x1cc95a[_0xa6e0('‮128','f7NH')](_0x20f1be,_0x1cc95a[_0xa6e0('‫129','lwJ3')])[_0xa6e0('‮12a',')@wK')](_0xa6e0('‫12b','^4ez'),_0x1cc95a[_0xa6e0('‮12c','wrm$')]);_0x1cc95a['YcOWA'](_0x20f1be,this)['addClass']('on');_0x1cc95a[_0xa6e0('‮12d','FecM')](_0x20f1be,_0xa6e0('‫12e','FecM'))['eq'](_0x20f1be(this)[_0xa6e0('‮12f','w8vz')]())['css'](_0x1cc95a[_0xa6e0('‫130','Bp1x')],'block');});_0x20f1be(_0x1cc95a[_0xa6e0('‮131','gHvn')])['show']();_0x1cc95a[_0xa6e0('‫132','VRWw')](_0x20f1be,_0x1cc95a[_0xa6e0('‮133','L86q')])['on'](_0x1cc95a['QdnEr'],function(){var _0x567c93=_0xa6e0('‮134','L86q')[_0xa6e0('‮135','FecM')]('|'),_0x226536=0x0;while(!![]){switch(_0x567c93[_0x226536++]){case'0':_0x20f1be(_0x1cc95a[_0xa6e0('‫136','eNt)')])[_0xa6e0('‮137','GH^s')](_0xa6e0('‮138','(o74'));continue;case'1':var _0x519bb6=_0x1cc95a[_0xa6e0('‮139','aw&c')](_0x20f1be,this)['index']();continue;case'2':_0x1cc95a[_0xa6e0('‫13a','hYKF')](_0x20f1be,'#hdyk\x20.hdyk')['hide']();continue;case'3':_0x1cc95a[_0xa6e0('‮13b','Bp1x')](_0x20f1be,_0x1cc95a[_0xa6e0('‫13c','NPyw')])['eq'](_0x519bb6)['show']();continue;case'4':_0x1cc95a[_0xa6e0('‮13d','(o74')](_0x20f1be,_0x1cc95a[_0xa6e0('‫13e','L86q')])['hide']();continue;case'5':_0x1cc95a['jpXXh'](_0x20f1be,this)[_0xa6e0('‮13f','gQ&%')](_0x1cc95a[_0xa6e0('‮140','EkOM')]);continue;case'6':_0x1cc95a[_0xa6e0('‫141','GH^s')](_0x20f1be,_0x1cc95a[_0xa6e0('‮142','VRWw')])['eq'](_0x519bb6)[_0xa6e0('‮143',')@wK')]();continue;}break;}});_0x1cc95a[_0xa6e0('‫144','@)(d')](_0x20f1be,_0xa6e0('‮145','OJjp'))['css'](_0x1cc95a['BjrEy'],_0xa6e0('‮146','(o74'));}(window,window[_0xa6e0('‮147','OO(G')]));(function(_0x55d397){var _0x422657={'PiiVY':function(_0x41336f,_0xe4d18e){return _0x41336f+_0xe4d18e;},'XsqgC':function(_0x30dadd){return _0x30dadd();},'RDvtD':'.rightPic\x20li','pEmWX':function(_0x28cca2,_0x536eab){return _0x28cca2(_0x536eab);},'TiQpS':function(_0x46fb2f,_0x21b497){return _0x46fb2f(_0x21b497);},'cVpyS':function(_0x4d8a48,_0x3295e4){return _0x4d8a48!==_0x3295e4;},'cjlFX':_0xa6e0('‫148','@)(d'),'AwwTd':_0xa6e0('‮149','EkOM'),'LAAni':'src','JpZLe':_0xa6e0('‫14a','gHvn'),'VhpYY':function(_0x14e11b,_0x150957){return _0x14e11b(_0x150957);},'ryMYB':_0xa6e0('‫14b','GH^s'),'kKDAn':'big5.china.com.cn/gate/big5/big5.china.com.cn/','fLTHX':_0xa6e0('‫14c','gQ&%'),'tgPSE':_0xa6e0('‮14d','YR!Z'),'KiGLj':'://www.china.com.cn','QlhUA':_0xa6e0('‫14e','(o74'),'aAZdh':function(_0x59179b,_0x4caf26){return _0x59179b(_0x4caf26);}};var _0x1fb666=_0x422657[_0xa6e0('‫14f','9yr]')](_0x55d397,_0xa6e0('‫150','uHJZ'))[_0xa6e0('‮151','lS#I')](_0x422657['ryMYB']);var _0x4118eb=_0x1fb666[_0xa6e0('‫152','Q%do')](_0x422657[_0xa6e0('‫153','L86q')]);if(_0x4118eb){if('xFtFe'===_0x422657[_0xa6e0('‮154','J#ML')]){npCur=_0x422657[_0xa6e0('‫155','nKsh')](npCur,0x1)%npSum;_0x422657[_0xa6e0('‮156','UMX&')](newpicAdd);}else{_0x55d397(_0xa6e0('‮157','cgwD'))[_0xa6e0('‫158','w8vz')]('href',_0x422657[_0xa6e0('‫159','[email protected]*')](_0x422657[_0xa6e0('‮15a','FecM')],_0x422657[_0xa6e0('‮15b','@)(d')]))[_0xa6e0('‮15c','2U)$')](_0x422657['QlhUA']);}}_0x422657[_0xa6e0('‫15d','^4ez')](_0x55d397,'iframe')[_0xa6e0('‮122','@)(d')](function(){var _0x35d464={'HtNJV':_0x422657[_0xa6e0('‫15e','GH^s')],'QHWhM':function(_0x529bcc,_0x50d8b5){return _0x422657['pEmWX'](_0x529bcc,_0x50d8b5);},'iCtqu':function(_0x4e11ab,_0x18fb62){return _0x422657['TiQpS'](_0x4e11ab,_0x18fb62);},'OBjWG':_0xa6e0('‮15f','9yr]'),'jDjIm':function(_0x3f789e,_0x5dd683){return _0x3f789e+_0x5dd683;}};if(_0x422657[_0xa6e0('‮160','gQ&%')](_0x422657[_0xa6e0('‮161','PfV3')],_0x422657[_0xa6e0('‮162','%LRf')])){var _0x256a0a=_0x422657['TiQpS'](_0x55d397,this)['attr'](_0x422657[_0xa6e0('‮163','J#ML')]);var _0x4b6943=_0x256a0a['match']('big5.china.com.cn/2016ads');if(_0x4b6943){_0x422657[_0xa6e0('‫164','lobq')](_0x55d397,this)[_0xa6e0('‫165','5#Vk')](_0x422657[_0xa6e0('‫166','@)(d')],_0x256a0a['replace'](/big5/,_0x422657[_0xa6e0('‫167',']4N3')]));}}else{_0x55d397(_0x35d464[_0xa6e0('‫168','J#ML')])[_0xa6e0('‮169','EgoK')]();_0x35d464[_0xa6e0('‫16a','YR!Z')](_0x55d397,_0x35d464[_0xa6e0('‫16b','GH^s')])['eq'](npCur)['fadeTo'](0xc8,0x1);_0x35d464[_0xa6e0('‮16c','&16K')](_0x55d397,_0x35d464['OBjWG'])[_0xa6e0('‮16d','GknZ')](_0x35d464[_0xa6e0('‮16e','(o74')](npCur,0x1));}});}(jQuery));function setHome(_0x974566,_0x1313a2){var _0x104ca1={'IaZdd':function(_0x49dc1f,_0x5cdbd9){return _0x49dc1f-_0x5cdbd9;},'imjoG':function(_0x3c0df4,_0x456579){return _0x3c0df4(_0x456579);},'YEpyB':'margin-left','OnurL':_0xa6e0('‮16f','NPyw'),'pmAKz':function(_0x16f37b,_0x48c8d4){return _0x16f37b(_0x48c8d4);},'TWEWh':'#china','DffKI':'href','JdLEy':function(_0x80efb8,_0x59afdb){return _0x80efb8+_0x59afdb;},'BOTki':_0xa6e0('‫170','Y4Q['),'TwQSG':_0xa6e0('‮171','@)(d'),'xiusd':_0xa6e0('‮172','R&tZ'),'xCPiU':function(_0x5b1676,_0x65765c){return _0x5b1676>=_0x65765c;},'IQTNd':function(_0x3b6c7c,_0xb5e559){return _0x3b6c7c(_0xb5e559);},'HwaTo':'.commend1\x20ul','LUKRV':'0px','HkcoK':function(_0x10c753,_0x520b5c){return _0x10c753>_0x520b5c;},'kLHab':function(_0x3b1417,_0x1153a5){return _0x3b1417===_0x1153a5;},'lSCQn':_0xa6e0('‫173','Bp1x'),'jmyhl':_0xa6e0('‮174','uHJZ'),'NuEUV':_0xa6e0('‮175','gnu2'),'VIKBk':_0xa6e0('‮176','PfV3'),'ppwUZ':_0xa6e0('‮177','uHJZ'),'GsEeO':_0xa6e0('‫178','@)(d'),'LSKeD':_0xa6e0('‫179','gQ&%'),'jhRCt':function(_0x36fa28,_0x31690a){return _0x36fa28(_0x31690a);},'TYRVM':_0xa6e0('‮17a','lwJ3'),'rmMAT':function(_0xafcd45,_0x3496b4){return _0xafcd45!==_0x3496b4;},'dZtbm':function(_0xe1a25e,_0xfa638c){return _0xe1a25e(_0xfa638c);},'hgEMD':function(_0x58d930,_0x188be5){return _0x58d930+_0x188be5;},'IVwsf':_0xa6e0('‮17b','EgoK')};try{if(_0x104ca1[_0xa6e0('‫17c',']4N3')](_0x104ca1[_0xa6e0('‮17d','hYKF')],_0x104ca1['jmyhl'])){var _0x2ddbd3={'UxqWj':function(_0xe4f1c9,_0x5c762b){return _0x104ca1[_0xa6e0('‫17e','EkOM')](_0xe4f1c9,_0x5c762b);},'KDGNs':function(_0x23ac40,_0x3fea44){return _0x104ca1[_0xa6e0('‮17f','%xV0')](_0x23ac40,_0x3fea44);},'GDGdv':_0x104ca1[_0xa6e0('‫180',')@wK')]};liveCur+=0x1;$(_0x104ca1[_0xa6e0('‫181','N$go')])[_0xa6e0('‮182','gQ&%')](!![],!![])[_0xa6e0('‮183','QYNJ')]({'margin-left':-liveArr[liveCur]},0x3e8,function(){if(liveCur==_0x2ddbd3[_0xa6e0('‫184','OO(G')](liveSum,0x1)){_0x2ddbd3[_0xa6e0('‫185','&16K')]($,_0xa6e0('‫186','@)(d'))[_0xa6e0('‫187','Y4Q[')](_0x2ddbd3[_0xa6e0('‫188','EgoK')],'0px');liveCur=0x0;}});}else{_0x974566[_0xa6e0('‫189','N$go')][_0xa6e0('‮18a','UMX&')]=_0x104ca1[_0xa6e0('‮18b','(o74')];_0x974566[_0xa6e0('‮18c','w8vz')](_0x1313a2);}}catch(_0x1aef87){if(window[_0xa6e0('‫18d','5#Vk')]){if(_0x104ca1[_0xa6e0('‮18e','hYKF')]===_0xa6e0('‫18f','lwJ3')){try{if(_0x104ca1[_0xa6e0('‮190','EkOM')]('SvkpN','SvkpN')){netscape[_0xa6e0('‮191','gQ&%')]['PrivilegeManager'][_0xa6e0('‮192','wrm$')](_0x104ca1['ppwUZ']);}else{_0x104ca1[_0xa6e0('‮193','gnu2')]($,_0x104ca1[_0xa6e0('‫194','w8vz')])['attr'](_0x104ca1[_0xa6e0('‫195','JX0X')],_0x104ca1[_0xa6e0('‮196','^4ez')](_0x104ca1[_0xa6e0('‮197','^xL%')],_0x104ca1[_0xa6e0('‮198','GH^s')]))[_0xa6e0('‫199','EkOM')](_0x104ca1['xiusd']);}}catch(_0x2da8f9){if(_0x104ca1['kLHab'](_0x104ca1[_0xa6e0('‮19a','Q%do')],_0x104ca1[_0xa6e0('‮19b','&16K')])){liveAuto=window['setInterval'](liveRoll,0x1388);}else{_0x104ca1[_0xa6e0('‫19c','(o74')](alert,_0x104ca1['TYRVM']);}}var _0x1c616d=Components[_0xa6e0('‫19d','gQ&%')]['@mozilla.org/preferences-service;1'][_0xa6e0('‫19e','hYKF')](Components['interfaces'][_0xa6e0('‫19f','QYNJ')]);_0x1c616d[_0xa6e0('‮1a0','OO(G')](_0xa6e0('‮1a1','OO(G'),_0x1313a2);}else{if(_0x104ca1['xCPiU'](cmCur,_0x104ca1[_0xa6e0('‮1a2','^xL%')](cmSum,0x1))){_0x104ca1['IQTNd']($,_0x104ca1[_0xa6e0('‮1a3','eNt)')])['css'](_0x104ca1[_0xa6e0('‮1a4','9yr]')],_0x104ca1[_0xa6e0('‮1a5','VRWw')]);cmCur=0x0;}}}else{if(_0x104ca1['rmMAT']('ysvuh',_0xa6e0('‫1a6','gnu2'))){_0x104ca1[_0xa6e0('‮1a7','lobq')](alert,_0x104ca1['hgEMD'](_0x104ca1[_0xa6e0('‫1a8','@)(d')](_0x104ca1[_0xa6e0('‫1a9','wrm$')],_0x1313a2),_0xa6e0('‫1aa','OO(G')));}else{cmCur-=_0x104ca1['HkcoK'](cmCur,0x0)?0x1:0x0;cmRoll();}}}}function shoucang(_0x139884,_0x3c4492){var _0x45d6f8={'VZilX':_0xa6e0('‮1ab','lS#I'),'MplYn':function(_0x4eadc3,_0x21db55){return _0x4eadc3!==_0x21db55;},'ENSlq':'hmVde','Nqzpv':'EYkXY','Svyai':_0xa6e0('‮1ac','J#ML')};try{window[_0xa6e0('‫1ad','aw&c')]['addFavorite'](_0x3c4492,_0x139884);}catch(_0xadf405){try{if(_0x45d6f8[_0xa6e0('‫1ae','@)(d')](_0x45d6f8['ENSlq'],_0x45d6f8[_0xa6e0('‮1af','w8vz')])){window['sidebar'][_0xa6e0('‫1b0','gnu2')](_0x139884,_0x3c4492,'');}else{obj[_0xa6e0('‫1b1','eNt)')]['behavior']=_0x45d6f8[_0xa6e0('‫1b2','J#ML')];obj[_0xa6e0('‮1b3','UMX&')](vrl);}}catch(_0x3a936f){alert(_0x45d6f8[_0xa6e0('‮1b4','VRWw')]);}}};_0xodW='jsjiami.com.v6';解密后局部代码如下 ...

JS 把数据类型分为两类： 简略数据类型（ Number, String, Boolean, Undefined, Null ）简单数据类型（ object ）一、简略数据类型类型阐明默认值Number数字型，蕴含整型、浮点型，如 21、0.210 ｜Boolean布尔型，如 true 和 false，等价于 1 和 0falseString字符串类型，如 "Hello"，字符串都带引号""Undefined申明变量却没有给值，此时变量值为 undefinedundefinedNullvar a = null; 申明变量 a 为空值null1、Number 数字型1.1 进制常见的进制有二进制、八进制、十进制、十六进制。 // 二进制 (逢2进1，只有0 和 1) var num1 = 10; //对应十进制的 2 // 八进制（逢8进1，只有 0 ～ 7，个别用0结尾） var num2 = 07; //对应十进制的 7 var num3 = 016; //对应十进制的 14 // 十六进制（0x结尾，数字0～9以及字母A～F） var num4 = 0xA; //对应十进制的 10 var num5 = 0x11; //对应十进制的 171.2 数字最大值和最小值console.log(Number.MAX_VALUE); //1.7976931348623157e+308console.log(Number.MIN_VALUE); //5e-3241.3 三个非凡值console.log(Infinity); //Infinity 代表无穷大，大于任何数值console.log(-Infinity); //-Infinity 代表无穷小，小于任何数值console.log(NaN); //NaN，Not a number，代表一个非数值2、Boolean 布尔型布尔类型有两个值，一个为 true，一个为 false。 ...

最近在开发一个低代码平台，次要用于经营搭建 H5 流动。这两头波及到第三方组件的开发，而第三方组件想要接入平台，须要通过咱们特定的打包工具来 build。构建之后的组件，会合并成单个的 js 文件，而且代码会被压缩会混同，这个时候如果须要调试，那就会极其苦楚。想要有一个好的调试环境，就要波及 SourceMap 的输入，而 Webpack 的 devtools 字段就是用于管制 SourceMap。 SourceMap 原理在具体解释 devtools 配置之前，先看看 SourceMap 的原理。SourceMap 的次要作用就是用来还原代码，将曾经编译压缩的代码，还原成之前的代码。 下图右边代码为 Webpack 打包之前，左边为打包之后。 关上 chrome 引入 dist.js ，会发现浏览器会主动将压缩的代码进行了还原。 那这个 SourceMap 到底是怎么将左边的代码还原成右边的样子的呢。咱们先看一下 dist.js.map 的构造。 { // 版本号 "version": 3, // 输入的文件名 "file": "dist.js", // 输入代码与源代码的映射关系 "mappings": "MAAA,IAAMA,EAAM,CACVC,KAAM,KACNC,OAAQ,KAGV,SAASC,IACPH,EAAIE,QAAU,EAGhB,SAASE,IACPJ,EAAIE,QAAU,EACdG,QAAQC,IAAIN,EAAIC,KAAM,OAGxBE,IACAC,IACAA,IACAD,K", // 原代码中的一些变量名 "names": [ "dog", "name", "weight", "eat", "call", "console", "log" ], // 源文件列表 // 咱们打包的时候常常是多个js文件合并成一个，所以源文件有多个 "sources": [ "webpack:///./src/index.ts" ], // 源文件内容的列表，与sources字段对应 "sourcesContent": [ "const dog = {\n name: '旺财',\n weight: 100\n}\n\nfunction eat() {\n dog.weight += 1\n}\n\nfunction call() {\n dog.weight -= 1\n console.log(dog.name, '汪汪汪')\n}\n\neat()\ncall()\ncall()\neat()" ],}其余字段应该都好了解，比拟难懂的就是 mappings 字段，看着就像是一堆乱码。这是一串应用 VLQ 进行编码的字符串，规定比较复杂。咱们能够间接在 github 找一个VLQ（https://github.com/Rich-Harris/vlq/blob/master/src/index.js）编码的库，对这串字符进行解码。 ...

最近上了一个新我的项目，这个客户治理一个宏大的工作和团队集群，而不同流程所实用的零碎也不太一样，比方salesforce，hubspots之类的。这次的新我的项目须要在另外两个平台之间做一些事件。目前只须要先封装其中之一的API，因而咱们选定应用NodeJS的框架Nest.js来实现这套API。 疾速启动开启nestjs我的项目有3种便捷的形式。 应用nest自带的命令行工具npm i -g @nestjs/clinest new project-name即便不应用这种形式，也倡议在node全局装置命令行工具，这样能够不便的生成各种nestjs的模块，比方controller和service之类的。 间接应用starter我的项目这里还有一个用于启动的样例我的项目，能够间接应用。 git clone https://github.com/nestjs/typescript-starter.git my-appcd my-appnpm installnpm run start而且这个我的项目还附带了Typescript。不过要记得把之前的git信息删掉。 用npm装置所需的包npm i --save @nestjs/core @nestjs/common rxjs reflect-metadata间接装置nestjs的core和common就能够，rxjs和reflext-metadata也是必须的。 这种形式比拟洁净，目录什么的须要本人创立。不过也能够应用命令行创立controller之类的，目录会主动创立好。 总的来说，nestjs和其余语言API框架相似，很多货色能够主动生成或者无需编写，所以约定的习惯十分重要，尽量不要创立一些“独特”的构造，防止当前踩坑。 创立controller创立好我的项目之后，我创立了一个controller，nest.js中controller能够通过润饰器间接提供路由，因而没有一个route之类的文件用于配置。 nest g controller projectsnest.js的目录约定是按业务模块划分，因为src目录中会呈现一个projects的目录，该目录下会生成一个projects.controller，以及附带的单元测试。 创立service接着创立service，用于封装指标工作治理平台对于Projects的API。 nest g service projects创立controller和service都会主动退出到module里，能够在每次生成后用git diff查看一下生成了哪些代码，也好心理无数。 import { Controller, Get, Req } from '@nestjs/common';import { Request } from 'express';import { Project } from 'src/interfaces/project.interface';import { ProjectsService } from './projects.service';@Controller('projects')export class ProjectsController { constructor(private projectsService: ProjectsService) {} @Get() findAll(@Req() request: Request): Project[] { return this.projectsService.findAll(); }}import { Injectable } from '@nestjs/common';import { Project } from 'src/interfaces/project.interface';@Injectable()export class ProjectsService { findAll(): Project[] { return []; }}构造和命名另外我特地想阐明一下的是，尽管我为controller和service都应用了雷同的名称，但并不是说他们是一一对应的。很多我的项目只是为了分层而分，controller和service都是一一对应的，其实并不正确。分层是因为它们领有不同的意义，只有明确语义，能力在思维的过程中更好的把握代码，也能够更好的复用，档次起到的是一种认知转换的作用。如果只是把底层的对象毫无变动的映射进去，那这个过程是毫无意义的。 ...

先说论断，在新版的npm,cnpm,pnpm中，该钩子无奈达到预期成果，只有yarn齐全反对,能够用以下代码自行测试相干包管理器// 保留为文件pre.jsconst argent = process.env.npm_config_user_agentif (/^(npm|yarn|cnpm)\//g.test(argent)) { console.warn('请应用pnpm装置依赖') process.exit(1)} // package.json"scripts": { "preinstall": "node ./pre.js" ...其余script},相干文章issueNPM preinstall 不同版本的差别

实现《羊了个羊》小游戏（低配版）后面有总结过一篇《繁难动物版的羊了个羊》的实现，明天参考了鱼皮大佬的鱼了个鱼,我好奇钻研了一下他的源码实现，并联合本人的了解，也用react + antd实现了一版，在实现的过程中，我只是简略批改了一下外围逻辑和游戏配置，而后借助于reactivue这个库将vue的composition API用到了这里。 游戏的外围逻辑我也大抵理了一遍，只是做了一些小改变就拿过去用了，外面也有源码实现的正文，所以不必多讲，次要在于外围UI的构建，这里能够大抵讲一下。 在这里我也用到了之前文章手写一个mini版本的React状态管理工具来用作游戏参数的状态治理，因而对于这里的实现也没有必要多做细讲。接下来，咱们就来看它在这里的应用。如下所示: import { createModel } from './createModel';import { useState } from "react"import { defaultGameConfig } from '../core/gameConfig';export interface ConfigType { gameConfig: GameConfigType customGameConfig: GameConfigType}const useConfig = () => { const [config,setConfig] = useState<ConfigType>({ gameConfig:{ ...defaultGameConfig }, customGameConfig:{ ...defaultGameConfig } }) const updateConfig = (config:ConfigType) => { setConfig(config) } // 重置为初始值 const reset = () => setConfig({ gameConfig:{ ...defaultGameConfig },customGameConfig:{ ...defaultGameConfig } }) return { config, updateConfig, reset }}const GameConfigStore = createModel(useConfig);export default GameConfigStore;首先导入createModel办法还有react的useState办法以及游戏参数的默认配置，接着定义一个hooks用作createModel的参数，返回游戏的配置以及更新配置函数以及还原最后初始配置的办法，即updateConfig和reset办法，这里其实也没有多大的难度，次要可能在于类型的定义。 ...

开局剧透，该计划截至发帖日期都是有效的，起因是浏览器不会对Ajax响应信息做解决，目前浏览器只会响应输出url的302跳转解决方案前后端齐全拆散，后端只返回相干数据，登录注册等逻辑交由前端全权处理，即应用路由守卫来做逻辑跳转 stackoverflow相干帖子

概念用我本人的话来总结一下，函数柯里化的意思就是你能够一次传很多参数给curry函数，也能够分屡次传递，curry函数每次都会返回一个函数去解决剩下的参数，始终到返回最初的后果。 实例这里还是举几个例子来阐明一下： 柯里化求和函数 // 一般形式 var add1 = function(a, b, c){ return a + b + c; } // 柯里化 var add2 = function(a) { return function(b) { return function(c) { return a + b + c; } } }这里每次传入参数都会返回一个新的函数，这样始终执行到最初一次返回a+b+c的值。然而这种实现还是有问题的，这里只有三个参数，如果哪天产品经理通知咱们须要改成100次？咱们就从新写100次？这很显著不合乎开闭准则，所以咱们须要对函数进行一次批改。 var add = function() { var _args = []; return function() { if(arguments.length === 0) { return _args.reduce(function(a, b) { return a + b; }) } [].push.apply(_args, arguments); return arguments.callee; }}var sum = add();sum(100, 200)(300);sum(400);sum(); // 1000咱们通过判断下一次是否传进来参数来决定函数是否运行，如果持续传进了参数，那咱们持续把参数都保存起来，等运行的时候全副一次性运行，这样咱们就初步实现了一个柯里化的函数。 ...

想分享的几种设计模式目前模式：工厂模式，单例模式，适配器模式，装璜者模式，建造者模式 建造者模式 简介：建造者模式（builder pattern）比较简单，它属于创立型模式的一种。 文言：4个局部：有个产品，有个工厂能够造产品，有个设计师指挥造多少，有集体想买产品。 买产品的用户不介意产品制作流程，只须要产品！ function Cola() { this.sugar = '50g', this.water = '100g'}function Packing() { // 第一种打包形式 this.createPkg = function(){ console.log('创立可乐外皮') } this.pushCola = function() { console.log('可乐倒进瓶子') } this.complete = function() { var cola = new Cola() cola.complete = true return cola } this.init = function() { this.createPkg() // 创立外皮 this.pushCola() // 倒进瓶子 //还能够减少其余步骤 return this.complete() // 制作实现 }}function greenPacking() { //绿皮可乐打包形式 this.createPkg = function(){ console.log('创立green可乐外皮') } this.pushCola = function() { console.log('可乐倒进green瓶子') } this.complete = function() { var cola = new Cola() cola.complete = true return cola } this.init = function() { this.createPkg() // 创立外皮 this.pushCola() // 倒进瓶子 //还能够减少其余步骤 return this.complete() // 制作实现 }}function Boss() { this.createCola = function(packType) { const pack = new window[packType] this.product = pack.init() //残缺产品产出 } this.getCola = function(packType) { this.createCola(packType); return this.product }}const boss = new Boss()var UserCola = boss.getCola('greenPacking') // UserCola.complete === true其余货色都不要，只有最初生产好的Cola，有sugar，有water。 ...

前言今人学识无遗力，少壮时间老始成。纸上得来终觉浅，绝知此事要躬行。看懂一道算法题很快,但咱们必须将这道题的思路理清、手写进去。 三道js手写题的思路和代码实现数组扁平化演示成果 将[1, [1, 2], [1, [2]]] 变成 [1, 1, 2, 1, 2] 第一种： 间接应用.flat console.log([1, [1,2],[1,[2]]].flat(3));能够将多维数组，降维，传的参数是多少就降多少维个别间接传参数为 Infinity(简略粗犷) 第二种: 递归办法的办法 + 借用数组的API实现(1) function flattten(arr) { var result = []; for(var i = 0, len = arr.length; i < len; i++) { if(Array.isArray(arr[i])) { // Array.isArray 判断是否为数组 result = result.concat(flattten(arr[i])) // concat() 办法用于连贯两个或多个数组。 } else { result.push(arr[i]) } } return result;}(2) function flatten(arr) { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur) : cur); }, []);}第四种: some + ...(扩大运算符) + .concat ...

简介公布-订阅模式又叫做观察者模式，他定义了一种一对多的依赖关系，即当一个对象的状态产生扭转的时候，所有依赖他的对象都会失去告诉。 回顾已经作为一名前端开发人员，给DOM节点绑定事件可是再频繁不过的事件。比方如下代码 document.body.addEventListener('click',function () { alert(2333); },false); document.body.click();//模仿点击事件这里咱们订阅了document.body的click事件，当body被点击的时候，他就向订阅者公布这个音讯，弹出2333.咱们也能够随便的减少和删除订阅者，当音讯一公布，所有的订阅者都会收到音讯。 document.body.addEventListener('click',function () { alert(11111); },false); document.body.addEventListener('click',function () { alert(222); },false); document.body.addEventListener('click',function () { alert(333); },false); document.body.click();//模仿点击事件值得注意的是，手动触发事件这里咱们间接用了document.body.click()；然而更好的做法是IE下用fireEvent，规范浏览器下用dispatchEvent，如下： let fireEvent = function (element,event) { if (document.createEventObject) { var evt = document.createEventObject(); return element.fireEvent('on'+event,evt); }else{ var evt = document.createEvent('HTMLEvents'); evt.initEvent(event,true,true); return element.dispatchEvent(evt); } } document.addEventListener('shout',function (event) { alert('shout'); }) fireEvent(document,'shout');畅谈当初人的日常生活离不开各种人际交涉，比方你的敌人有很多，这时候你要结婚了，要以你为发布者，关上你的通讯录，挨个打电话告诉各个订阅者你要结婚的音讯。形象一下，实现公布-订阅模式须要： 发布者（你）缓存列表（通讯录，你的敌人们相当于订阅了你的所有音讯）公布音讯的时候遍历缓存列表，顺次触发外面寄存的订阅者的回调函数（挨个打电话）另外，回调函数中还能够增加很多参数，，订阅者能够接管这些参数，比方你会通知他们婚礼工夫，地点等，订阅者收到音讯后能够进行各自的解决。let yourMsg = {};yourMsg.peopleList = [];yourMsg.listen = function (fn) { this.peopleList.push(fn);}yourMsg.triger = function () { for(var i = 0,fn;fn=this.peopleList[i++];){ fn.apply(this,arguments); }}yourMsg.listen(function (name) { console.log(`${name}收到了你的音讯`);})yourMsg.listen(function (name) { console.log('哈哈');})yourMsg.triger('张三');yourMsg.triger('李四'); ...

日常开发中，咱们常常用到this。例如用Jquery绑定事件时，this指向触发事件的DOM元素；编写Vue、React组件时，this指向组件自身。对于老手来说，常会用一种意会的感觉去判断this的指向。以至于当遇到简单的函数调用时，就分不清this的真正指向。 本文将通过两道题去缓缓剖析this的指向问题，并波及到函数作用域与对象相干的点。最终给大家带来真正的实践剖析，而不是简简单单的一句话概括。 置信若是对this稍有钻研的人，都会搜到这句话：this总是指向调用该函数的对象。 然而箭头函数并不是如此，于是大家就会遇到如下各式说法： 箭头函数的this指向外层函数作用域中的this。箭头函数的this是定义函数时所在上下文中的this。箭头函数体内的this对象，就是定义时所在的对象，而不是应用时所在的对象。各式各样的说法都有，乍看下感觉说的差不多。废话不多说，凭着你之前的了解，来先做一套题吧（非严格模式下）。 /** * Question 1 */var name = 'window'var person1 = { name: 'person1', show1: function () { console.log(this.name) }, show2: () => console.log(this.name), show3: function () { return function () { console.log(this.name) } }, show4: function () { return () => console.log(this.name) }}var person2 = { name: 'person2' }person1.show1()person1.show1.call(person2)person1.show2()person1.show2.call(person2)person1.show3()()person1.show3().call(person2)person1.show3.call(person2)()person1.show4()()person1.show4().call(person2)person1.show4.call(person2)()大抵意思就是，有两个对象person1，person2，而后花式调用person1中的四个show办法，预测真正的输入。 你能够先把本人预测的答案按程序记在本子上，而后再往下拉看正确答案。 正确答案选下： person1.show1() // person1person1.show1.call(person2) // person2person1.show2() // windowperson1.show2.call(person2) // windowperson1.show3()() // windowperson1.show3().call(person2) // person2person1.show3.call(person2)() // windowperson1.show4()() // person1person1.show4().call(person2) // person1person1.show4.call(person2)() // person2比照下你刚刚记下的答案，是否有不一样呢？让咱们尝试来最开始那些实践来剖析下。 ...

变量晋升：变量晋升（ hoisting ）。 我可恨的 var 关键字：你读完上面内容就会明确题目的含意，先来一段超级简略的代码： <script type="text/javascript"> var str = 'Hello JavaScript hoisting'; console.log(str); // Hello JavaScript hoisting</script>这段代码，很意外地简略，咱们的到了想要的后果，在控制台打印出了：Hello JavaScript hoisting 。 当初，我将这一段代码，改一改，将 调用 放在后面， 申明 放在前面。 很多语言比如说 C 或者 C++ 都是不容许的，然而 javaScript 容许。 你们试着猜猜失去的后果： <script type="text/javascript"> console.log(str); // undefined var str = 'Hello JavaScript hoisting'; console.log(str); // Hello JavaScript hoisting</script>你会感觉很奇怪，在咱们调用之前，为什么咱们的 str = undefined ，而不是报错：未定义？？？ 我将 var str = 'Hello JavaScript hoisting' 删除后，试试思考这段代码的后果： <script type="text/javascript"> console.log(str); // Uncaught ReferenceError: str is not defined</script>当初失去了，咱们想要的，报错：未定义。 ...

作用域(scope)1.什么是作用域概念：作用域是在程序运行时代码中的某些特定局部中变量、函数和对象的可拜访性。 从应用方面来解释，作用域就是变量的应用范畴，也就是在代码的哪些局部能够拜访这个变量，哪些局部无法访问到这个变量，换句话说就是这个变量在程序的哪些区域可见。代码演示： function Fun() { var inVariable = "外部变量";}Fun();console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined//inVariable是在Fun函数外部被定义的，属于局部变量，在内部无法访问，于是会报错从存储上来解释的话，作用域实质上是一个对象， 作用域中的变量能够了解为是该对象的成员 总结：作用域就是代码的执行环境，全局作用域就是全局执行环境，部分作用域就是函数的执行环境，它们都是栈内存 2.作用域分类作用域又分为全局作用域和部分作用域。在ES6之前，部分作用域只蕴含了函数作用域，ES6的到来为咱们提供了 ‘块级作用域’（由一对花括号包裹），能够通过新增命令let和const来实现；而对于全局作用域这里有一个小细节须要留神一下： 在 Web 浏览器中，全局作用域被认为是 window 对象，因而所有全局变量和函数都是作为 window 对象的属性和办法创立的。在 Node环境中，全局作用域是 global 对象。全局作用域很好了解，当初咱们再来解释一下部分作用域吧，先来看看函数作用域，所谓函数作用域，顾名思义就是由函数定义产生进去的作用域，代码示例： function fun1(){ var variable = 'abc'}function fun2(){ var variable = 'cba'}fun1();fun2();//这里有两个函数，他们别离都有一个同名变量variable，在严格模式下，程序不会报错，//这是因为这两个同名变量位于不同的函数内，也就是位于不同的作用域中，所以他们不会产生抵触。咱们再来看看块级作用域，ES6 之前 JavaScript 没有块级作用域，只有全局作用域和函数（部分）作用域。块语句（ {} 两头的语句），如 if 和 switch 条件语句， for 和 while 循环语句，不同于函数，它们不会创立一个新的作用域；然而ES6及之后的版本，块语句也会创立一个新的作用域， 块级作用域可通过新增命令let和const申明，所申明的变量在指定块的作用域外无奈被拜访。块级作用域在如下状况被创立： 在一个函数外部在一个代码块（由一对花括号包裹）外部let 申明的语法与 var 的语法统一。基本上能够用 let 来代替 var 进行变量申明，但会将变量的作用域限度在以后代码块中 （留神：块级作用域并不影响var申明的变量）。 然而应用let时有几点须要留神： 申明变量不会晋升到代码块顶部，即不存在变量晋升禁止反复申明同一变量for循环语句中（）外部，即圆括号之内会建设一个暗藏的作用域，该作用域不属于for后边的{}中，并且只有for后边的{}产生的块作用域可能拜访这个暗藏的作用域，这就使循环中 绑定块作用域有了妙用参考 前端进阶面试题具体解答 这里别离演示一下ES5和ES6版本的代码，ES5： ...

1. 意识防抖和节流函数防抖和节流的概念最早不是呈现在软件工程中，防抖是呈现在电子元件中，节流是呈现的流体流动中。 而javascript是事件驱动的，大量的操作会触发事件，退出到事件队列中解决而对于某些频繁的事件处理会造成性能的损耗，咱们就能够通过防抖和节流来限度事件频繁的产生1.1. 意识防抖debounce函数场景：在理论开发中，经常会碰到点击一个按钮申请网络接口的场景，这时用户如果因为手抖多点了几下按钮，就会呈现短时间内屡次申请接口的状况，实际上这会造成性能的耗费，咱们其实只须要监听最初一次的按钮，然而咱们并不知道哪一次会是最初一次，就须要做个延时触发的操作，比方这次点击之后的300毫秒内没再点击就视为最初一次。这就是防抖函数应用的场景 总结防抖函数的逻辑 当事件触发时，相应的函数并不会立刻触发，而是期待肯定的工夫；当事件密集触发时，函数的触发会被频繁的推延；只有期待了一段时间也没事件触发，才会真正的响应函数1.2 意识节流throttle函数场景：开发中咱们会有这样的需要，在鼠标挪动的时候做一些监听的逻辑比方发送网络申请，然而咱们晓得document.onmousemove监听鼠标挪动事件触发频率是很高的，咱们心愿依照肯定的频率触发，比方3秒申请一次。不论两头document.onmousemove监听到多少次只执行一次。这就是节流函数的应用场景 总结节流函数的逻辑 当事件触发时，会执行这个事件的响应函数；如果这个事件会被频繁触发，那么节流函数会依照肯定的频率来执行；不论在这个两头有多少次触发这个事件，执行函数的频繁总是固定的；2. 实现防抖函数2.1 根本实现v-1const debounceElement = document.getElementById("debounce");const handleClick = function (e) { console.log("点击了一次");};// debounce防抖函数function debounce(fn, delay) { // 定一个定时器对象，保留上一次的定时器 let timer = null // 真正执行的函数 function _debounce() { // 勾销上一次的定时器 if (timer) { clearTimeout(timer); } // 提早执行 timer = setTimeout(() => { fn() }, delay); } return _debounce;}debounceElement.onclick = debounce(handleClick, 300);参考 前端手写面试题具体解答 2.2 this-参数v-2下面handleClick函数有两个问题，一个是this指向的是window,但其实应该指向debounceElement,还一个是无奈传递传递参数。 优化： const debounceElement = document.getElementById("debounce");const handleClick = function (e) { console.log("点击了一次", e, this);};function debounce(fn, delay) { let timer = null; function _debounce(...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args) // 扭转this指向 传递参数 }, delay); } return _debounce;}debounceElement.onclick = debounce(handleClick, 300);2.3 可选是否立刻执行v-3有些时候咱们想点击按钮的第一次就立刻执行，该怎么做呢？ ...

之所以要写这篇，是因为已经面试被要求在白纸上手写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)// 输入：YIYING3参考 前端手写面试题具体解答 ...

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"; }}参考 前端手写面试题具体解答 ...

你有没有在面试中遇到特地奇葩的js隐形转换的面试题，第一反馈是怎么会是这样呢？难以自信，js到底是怎么去计算失去后果，你是否有深刻去理解其原理呢？上面将深刻解说其实现原理。 其实这篇文章初稿三个月前就写好了，在我读一些源码库时，遇到了这些基础知识，想归档整顿下，就有了这篇文章。因为始终忙没工夫整顿，最近看到了这个比拟热的题，决定把这篇文章整顿下。 const a = { i: 1, toString: function () { return a.i++; }}if (a == 1 && a == 2 && a == 3) { console.log('hello world!');}网上给出了很多不错的解析过程，读了上面内容，你将更深刻的理解其执行过程。 1、js数据类型js中有7种数据类型，能够分为两类：原始类型、对象类型： 根底类型(原始值)： Undefined、 Null、 String、 Number、 Boolean、 Symbol (es6新出的，本文不探讨这种类型)简单类型(对象值)： object2、三种隐式转换类型js中一个难点就是js隐形转换，因为js在一些操作符下其类型会做一些变动，所以js灵便，同时造成易出错，并且难以了解。 波及隐式转换最多的两个运算符 + 和 ==。 +运算符即可数字相加，也能够字符串相加。所以转换时很麻烦。== 不同于===，故也存在隐式转换。- * / 这些运算符只会针对number类型，故转换的后果只能是转换成number类型。 既然要隐式转换，那到底怎么转换呢，应该有一套转换规则，能力追踪最终转换成什么了。 隐式转换中次要波及到三种转换： 1、将值转为原始值，ToPrimitive()。 2、将值转为数字，ToNumber()。 3、将值转为字符串，ToString()。 参考原文 前端进阶面试题具体解答 2.1、通过ToPrimitive将值转换为原始值js引擎外部的形象操作ToPrimitive有着这样的签名： ToPrimitive(input, PreferredType?) input是要转换的值，PreferredType是可选参数，能够是Number或String类型。他只是一个转换标记，转化后的后果并不一定是这个参数所值的类型，然而转换后果肯定是一个原始值（或者报错）。 2.1.1、如果PreferredType被标记为Number，则会进行上面的操作流程来转换输出的值。1、如果输出的值曾经是一个原始值，则间接返回它2、否则，如果输出的值是一个对象，则调用该对象的valueOf()办法， 如果valueOf()办法的返回值是一个原始值，则返回这个原始值。3、否则，调用这个对象的toString()办法，如果toString()办法返回的是一个原始值，则返回这个原始值。4、否则，抛出TypeError异样。2.1.2、如果PreferredType被标记为String，则会进行上面的操作流程来转换输出的值。1、如果输出的值曾经是一个原始值，则间接返回它2、否则，调用这个对象的toString()办法，如果toString()办法返回的是一个原始值，则返回这个原始值。3、否则，如果输出的值是一个对象，则调用该对象的valueOf()办法， 如果valueOf()办法的返回值是一个原始值，则返回这个原始值。4、否则，抛出TypeError异样。既然PreferredType是可选参数，那么如果没有这个参数时，怎么转换呢？PreferredType的值会依照这样的规定来主动设置： 1、该对象为Date类型，则PreferredType被设置为String2、否则，PreferredType被设置为Number2.1.3、valueOf办法和toString办法解析下面次要提及到了valueOf办法和toString办法，那这两个办法在对象里是否肯定存在呢？答案是必定的。在控制台输入Object.prototype，你会发现其中就有valueOf和toString办法，而Object.prototype是所有对象原型链顶层原型，所有对象都会继承该原型的办法，故任何对象都会有valueOf和toString办法。 先看看对象的valueOf函数，其转换后果是什么？对于js的常见内置对象：Date, Array, Math, Number, Boolean, String, Array, RegExp, Function。 ...

一． 前言原型和原型链在面试中从来备受器重，常常被提及。说难可能也不太难，但要真正齐全了解，吃透它，还是要多下功夫的。 上面为大家简略论述我对原型和原型链的了解，若是感觉有说的不对的中央，还请帮忙斧正，或者敞开页面不节约您的宝贵时间(胆怯) 二． 注释原型JavaScript所有的对象实质上都是通过new 函数创立的，包含对象字面量的模式定义对象(相当于new Object()的语法糖)。所有的函数实质上都是通过new Function创立的，包含Object、Array等（隐式执行，是咱们看不到的但在执行过程中产生过的）所有的函数都是对象。分析Prototype（显式原型） 每个函数都有一个属性prototype，它就是原型，默认状况下它是一个一般Object对象，这个对象是调用该构造函数所创立的实例的原型。 __proto__(谷歌浏览器已更新为[[prototype]]，隐式原型)JavaScript中所有对象(除了null)都具备一个__proto__属性，该属性指向该对象的原型。 上图中，函数身上的属性，会被显式的继承到，即 //this.name=’wn’, 此时显式的不存在，所以继承不到，然而函数的原型上有属性，就会被隐式的继承到，即 name: "小南" contructor属性 JavaScript同样存在由原型指向构造函数的属性：constructor，即Func.prototype.constructor --> Func 参考原文 前端进阶面试题具体解答 原型链实例对象在查找属性时，如果查找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查找不到，就去找原型的原型，直至查到最顶层，这也就是原型链的概念。 通过这张图咱们能够留神到,构造函数Foo的原型prototype 和 构造函数Foo所创立进去的对象实例f1,f2的原型__proto__是一样的都指向Foo().prototype. 这里咱们能够持续思考,往下摸索一下,既然Foo().prototype也是一个对象,那是不是Foo().prototype也有本人的对象原型__proto__呢.答案是必定的,图中咱们也能够看到Foo().prototype的对象原型__proto__指向的是Object.prototype. Object作为最顶端的构造函数,能够看到所有的对象都会通过原型链指向它.这就是为什么新建的对象为什么可能应用 toString() 等办法的起因. 然而咱们能够发现Object.prototype也有本人的__proto__ 然而却指向的是null,null为原型链的起点. 留神!!!那么这里还个问题,仔细的小伙伴曾经发现了,构造函数有本人的原型prototype,然而构造函数也是对象啊,构造函数也有没有__proto__呢.答案是有的.因为每个 JavaScript 函数实际上都是一个 Function 对象。运行 function(){}).constructor === Function // true 便能够失去这个论断。 而且通过图咱们也能够发现 Foo的__proto__指向Function.prototype,而且这里还有个特例,上文也阐明了每个 JavaScript 函数实际上都是一个 Function 对象,所以Function的构造函数原型prototype和对象原型__proto__都是指向同一个Function.prototype. 结语原型和原型链算是js里的一座大山，比拟偏概念性，在面试时是经常出现的，所以闲时能够多拿进去推敲。鄙人写的也略有通俗，心愿能帮到查阅的小伙伴呀。码字不易，还望看到这里的小伙伴用用发财的小手点点赞，与君共勉！

最近面试中碰到了一道对于JS执行程序的题目，题目比拟根底，然而如果对于JS不熟的话，还是容易答不上来。再次记录和剖析此次面试题，心愿对大家有所帮忙。 async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log("async2"); } console.log("js start"); setTimeout(function () { console.log("timeout"); }, 0); async1(); new Promise(function (resolve) { console.log("promise"); resolve(); }).then(function () { console.log("then"); }); console.log("js end");话不多说，先上后果 // 控制台输入后果 "js start" "async1 start" "async2" "promise" "js end" "async1 end" "then" "timeout"宏工作 微工作如果看官是个老手的话，看到下面的输入后果，必定一脸懵逼的，然而没关系，看完这篇文章您就懂了。想齐全明确下面这道题目，还须要理解JS的两个概念，没错，就是宏工作和微工作。 首先看官必定晓得JS是单线程，实现异步的办法就是定时器和es6+呈现的promise/async等，那么当初问题来了，既然es6呈现的新的异步形式，那么和之前的定时器相比，那个异步先执行呢？ 宏工作(macro)task，能够了解为每段代码都是一个宏工作，没错JS的主程序也是宏工作。同时两个定时器异步的局部也是宏工作。 微工作microtask，能够了解是在以后 task 执行完结后立刻执行的工作。也就是在主程序执行实现之后立刻执行的局部。es6+呈现的promise，async都是微工作。在这里要记住一句话，微工作的优先级是高于宏工作的。 参考面试题解答 前端进阶面试题具体解答 程序执行程序1、主程序 因为js是单线程的，同一时间只能有一段代码在执行，所以首先执行的就是JS的主程序。之前说主程序是宏工作，微工作优先级又比宏工作高，那为什么还先执行主程序这个宏工作呢？ 这是因为：没有主程序去构建微工作，微工作又怎么会呈现呢，没有微工作的呈现，当然就去找到主程序这个宏工作了，所以优先级的说法没有谬误。 2、查看是否有异步工作 当上一个工作执行实现之后，程序会去检索是否有微工作，须要执行，如果有，就会先执行微工作。没有微工作但有宏工作，执行宏工作。没有工作，代码不在执行。 3、微工作 ...

hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块计划 ，欢送关注与理解 制作近程react图形组件库应用hel-micro模块联邦技术sdk化计划，基于react组件模板制作近程antd库（hel-antd）、近程tdesign-react库（hel-tdesign-react）。 hel-antd、hel-tdesign-react 两者制作过程齐全一样，区别仅是装置的库不同，你能够参考此文将其余优良的react图形组件库制作为对应的近程库，以下步骤以制作 hel-antd 为主。传统的react图形组件库导入形式，多我的项目降级时很麻烦： 基于hel-micro晋升为近程库后，被其余我的项目应用时，理论运行逻辑不参加我的项目打包，能够做到应用方无感知动静降级（顺带也升高了我的项目打包体积，并进步编译速度），以antd为例，如果你有5个我的项目用到了antd2.20，某一天暴露出2.20存在了一个重大bug，官网降级到了2.21版本，这时候你须要把你的5个我的项目全副装置一下最新的antd版本并重新部署一遍，而如果是援用的hel-antd，就只须要基于2.21版本从新公布一下hel-antd即可，所用应用方就能够运行最新版本的antd了。 基于代理对象技术应用方能够像应用本地antd一样应用近程antd、近程tdesign-react，见在线示例：应用hel-antd、应用hel-tdesign-react 克隆react模板库克隆react模板库，保留为hel-antd目录，接下来的步骤里，咱们都将基于此目录下的文件革新 git clone https://github.com/hel-eco/hel-tpl-remote-react-comp-ts.git hel-antd批改模块名称批改package.json里的模块名称为hel-antd "name": "hel-tpl-remote-react-comps-ts","appGroupName": "hel-tpl-remote-react-comps-ts","name": "hel-antd","appGroupName": "hel-antd", 批改我的项目里 src/configs/subApp.ts 的 LIB_NAME 为 hel-antd（如不批改，构建时会报模块名不统一谬误） export const LIB_NAME = 'hel-tpl-remote-react-comps-ts';export const LIB_NAME = 'hel-antd'; > 可依据须要批改为本人想要的命名，此处仅为示例装置antd此处咱们基于4.23.4版本的antd构建近程antd库 npm i [email protected]导出antd模块导出antd模块次要蕴含2个局部， 导出运行时代码供webpack打包用，不便hel-micro能够动静拉取已构建的运行代码导出代理对象供rollup打包用，方便使用方能够装置近程模块类型文件，并在文件头应用import动态导入近程模块运行时代码导出咱们先在src/components下导出咱们想要裸露的近程组件 - import HelloRemoteReactComp from './HelloRemoteReactComp';- export {- HelloRemoteReactComp,- }+ import * as antd from 'antd';+ export { default as TestExport } from './TestExport';+ export default antd;留神此处额定导出了一个TestExport组件，用于示范能够扩大原始antd库退出本人的新组件 function TestExport() { return <span>TestExport Component</span>};TestExport.displayName = 'TestExport';export default TestExport;而后在src/entrance/libProperties.ts里合并导出模块（此合并逻辑也可在src/components外面解决），并同时裸露推导出的模块类型对象 ...

前言在前端工程上，日益简单的明天，性能优化曾经成为必不可少的环境。前端须要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么实现的无关。比方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）： ...

实现 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 函数共同点： ...

我置信不论是学什么语言，是哪个派路的对这几个字应该不会生疏吧，正则表达式终于让我给碰到了，之前看到了说实话那是真看不懂，一点脉络没有，猜我都猜不出是什么意思，明天终于把这个理解了一番，大略对正则也有一个把握了，明天次要是学习了js的正则一些利用，比如说表单验证啊、中文输出验证啊、敏感词的替换啊、提取字符串啊这些、 1. 首先第一个案例来一个首次意识正则表达式学到的一些根底，是一个座机号码的验证案例， 本案例两个留神点 一个是正则表达式的或只有一个竖线一个是验证时候数字也要加引号 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 座机号码验证 全国座机号码两种格局 010-12345678 或者 0100-1234567 --> <script> var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ // var reg = /^\d{3,4}-\d{7,8}$/ console.log(reg.test('010-12345689')); // 本案例两个留神点 一个是正则表达式的或只有一个竖线 // 一个是验证时候数字也要加引号 </script></body></html>2. 第二个案例来一个替换的案例，这个案例大家应该不生疏，比方在网上问候对方爸妈的时候常常会碰到这种难堪状况，打出了好大些字，很有成就筹备收回去的时候，后果全把精华局部变成了*号 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>提交</button> <div></div> <script> var text = document.querySelector('textarea') var btn = document.querySelector('button') var div = document.querySelector('div') btn.onclick = function() { div.innerHTML = text.value.replace(/激情|恋情/g, '**') } </script></body></html>3. ...

浏览器有一个重要的安全策略，称之为「同源策略」 其中，源=协定+主机+端口，**两个源雷同，称之为同源，两个源不同，称之为跨源或跨域 同源策略是指，若页面的源和页面运行过程中加载的源不统一时，出于平安思考，浏览器会对跨域的资源拜访进行一些限度 同源策略对 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），浏览器会首先判断它属于哪一种申请模式 ...

CDN缓存DNSTCP三次握手、四次挥手浏览器渲染过程输出URL到页面渲染过程的一些优化上面我将“从输出URL到渲染的全过程”大略的形容进去，再对其过程加以解释，理解过程中能够做哪些优化。文章内容有点长，须要有足够的急躁看完哟！！上面我要开始啦！ 1、URL解析 2、DNS解析 3、建设TCP链接 4、客户端发送申请 5、服务器解决和响应申请 6、浏览器解析并渲染响应内容 7、TCP四次挥手断开连接 一、URL解析地址解析和编码咱们输出URL后，浏览器会解析输出的字符串，判断是URL还是搜寻关键字，如果是URL就开始编码。 一般来说URL只能应用英文字母、阿拉伯数字和某些标点符号，不能应用其余文字和符号，所以，如果URL中有文字就必须编码后应用。然而URL编码很凌乱，不同的操作系统、浏览器、网页字符集，会导致不同的编码后果。所以咱们须要应用JavaScript先对URL编码，而后提交给服务器，不给浏览器插手的机会。咱们通常会应用encodeURI()函数或者encodeURIComponent()函数来编码URLHSTSHSTS(HTTP Strict TransportSecurity)是一种新的Web平安协定，HSTS的作用是强制客户端应用HTTPS与服务器创立连贯。比方你在地址栏输出http://xxx/，浏览器会主动将http转写成https，而后间接向 https://xxx/ 发送申请。缓存查看浏览器在发送申请之前先查看有没有缓存，过程如下： 浏览器会先去查看强缓存（Expires和cache-control）判断是否过期，如果强缓存失效，间接从缓存中读取资源；若不失效则进行协商缓存(Last-Modified / If-Modified-Since和Etag/If-None-Match)，协商缓存由服务器决定是否应用缓存，若协商缓存生效，那么代表该申请的缓存生效，返回200，并从新返回资源和缓存标识，再次存入浏览器缓存中；失效则返回304，并从缓存中读取资源。（协商缓存之前要通过DNS域名解析，之后建设TCP链接）那么浏览器缓存的地位在哪呢？ Service Worker：浏览器独立线程进行缓存Memory Cache：内存缓存Disk Cache：硬盘缓存Push Cache：推送缓存（HTTP/2中的）留神：输出网址之后，会查找内存缓存，没有再找硬盘，都没有就产生网络申请。一般刷新（F5）：因为TAB没有敞开，所以内存缓存可用，如果匹配上会被优先应用，其次是磁盘缓存强制刷新（Ctrl+F5）：浏览器不应用缓存，因而发送的申请头均带有Cache-control：no-cache,服务器间接返回200和最新内容。 更多面试题解答参见 前端进阶面试题具体解答二、进行DNS解析DNS（1）、DNS：把域名和ip地址互相映射分布式数据库，让用户能更不便的拜访互联网，DNS协定运行在UDP协定之上 （2）、DNS解析：通过域名最终失去对应ip地址的过程。 （3）、DNS缓存：浏览器，操作系统，路由器，本地DNS，根域名服务器都会对DNS后果作出肯定的缓存DNS解析过程（1）、首先搜寻浏览器本身的DNS缓存，有缓存间接返回; （2）、浏览器本身DNS不存在，浏览器就会调用一个相似gethostbyname的库函数,此函数会先去检测本地hosts文件，查看是否有对应ip。 （3）、如果本地hosts文件不存在映射关系，就会查问路由缓存，路由缓存不存在就去查找本地DNS服务器（个别TCP/IP参数里会设首选DNS服务器，通常是8.8.8.8)(客户端到本地DNS服务器是递归过程） （4）、如果本地DNS服务器还没找到就会向根服务器发出请求。（DNS服务器之间是迭代过程） 具体过程： 本地DNS服务器代咱们的浏览器发动迭代DNS解析申请，首先它会找根域的DNS的IP地址（寰球13台哟，惋惜中国没有！）。找到根域的DNS地址,就会向其发动申请（请问www.baidu.com这个域名的IP地址是多少呀？）；根域发现这是一个顶级域com域的一个域名，于是通知本地DNS服务器我不晓得这个域名的IP地址,然而我晓得com域的IP地址，你去找它去吧；于是本地DNS服务器就失去了com域的IP地址，又向com域的IP地址发动了申请（请问www.baidu.com这个域名的IP地址是多少呀?）,于是com域服务器通知本地DNS服务器我不晓得www.baidu.com这个域名的IP地址，然而我晓得baidu.com这个域的DNS地址，你去找它去;于是本地DNS服务器又向baidu.com这个域名的DNS地址（这个个别就是由域名注册商提供的，像万网，新网等）发动申请（请问www.baidu.com这个域名的IP地址是多少？），这个时候baidu.com域的DNS服务器一查，呀！果然在我这耶，于是就把找到的后果发送给本地DNS服务器;这个时候本地DNS服务器就拿到了www.baidu.com这个域名对应的IP地址。DNS优化DNS也是开销，通常浏览器查找一个给定域名的IP地址要花费20~120毫秒，在实现域名解析之前，浏览器不能从服务器加载到任何货色。那么如何缩小域名解析工夫，放慢页面加载速度呢？ （1）、缩小DNS申请次数 （2）、DNS预获取,DOM还没开始，浏览器预解析地址，把解析好的地址放在本地缓存外面，DOM树生成完，要加载图片类的发现DNS曾经解析好了，再发送申请。<link rel='dns-prefetch'href='//dfns.tanx.com'> （次要对图片资源） （3）、DNS 查问的过程经验了很多的步骤，如果每次都如此，会消耗太多的工夫、资源。所以咱们应该尽早的返回实在的IP地址:（缩小查问过程，也就是DNS缓存。浏览器获取到IP地址后，个别都会缓存到浏览器的缓存中，本地的DNS缓存服务器，也能够去记录。另外，每天几亿网名的拜访需要，一秒钟几千万的申请域名服务器如何满足？就是DNS负载平衡。通常咱们的网站利用各种云服务，或者各种服务商提供相似的服务，由他们去帮咱们解决这些问题。 DNS零碎依据每台机器的负载量，地理位置的限度（长距离的传输效率）等等，去提供高效疾速的 DNS 解析服务。 （4）、当客户端DNS缓存（浏览器和操作系统）缓存为空时，DNS查找的数量与要加载的Web页面中惟一主机名的数量雷同，包含页面URL、脚本、样式表、图片、Flash对象等的主机名。缩小主机名的数量就能够缩小DNS查找的数量； （5）、缩小惟一主机名的数量会潜在缩小页面中并行下载的数量（HTTP1.1标准倡议从每个主机名并行下载两个组件，但实际上能够多个）；然而缩小主机名和并行下载的计划会产生矛盾，须要大家本人衡量。倡议将组件放到至多两个但不多于4个主机名下，缩小DNS查找的同时也容许高度并行下载。DNS解析后会把域名的解析权交给cname()指向的内容散发（CDN）专用的DNS服务器。CDN专用的DNS服务器把CDN的全局负载平衡设施的ip地址返回给用户。 CDN举个例子：以前坐火车买票，都要到火车站买，所有人都去火车站买票，火车站售票厅的压力可想而知有多大。起初火车票代售点呈现了，散布在各个城市，城镇，咱们只须要去间隔咱们最近的火车票售卖点买票就能够了。卖火车票的代理售票点（缓存服务器），为买票者提供了不便，帮忙他们在最近的中央（最近的CDN节点），用最短的工夫（最短的申请工夫）买到票（拿到资源）。加重了售票大厅的压力（起到分流作用，加重服务器负载压力）CDN缓存：在浏览器本地缓存生效后，浏览器会像CDN边缘节点发动申请，相似浏览器缓存，CDN边缘节点也存在一套缓存机制， CDN边缘节点缓存策略因服务商不同而不同，通过http响应头中的cache-control：max-age字段设置CDN边缘节点数据缓存工夫。当浏览器向CDN节点申请数据时，CDN节点会判断缓存数据是否过期，若缓存数据过期，CDN会向服务器收回回源申请，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端，CDN服务商个别会提供基于文件后缀，目录多个维度来指定CDN缓存工夫，为用户提供更精细化的缓存治理。CDN工作形式：（1）、当你点击网站页面的url时，通过本DNS解析，DNS解析后会把域名的解析权交给cname()指向的内容散发专用的DNS服务器。内容散发专用的DNS服务器把内容散发的全局负载平衡（GSLB）设施的ip地址返回给用户。 （2）、当你向CDN的全局负载平衡设施的ip地址发动url拜访申请，CDN的全局负载平衡设施会为你抉择一台适合的缓存服务器提供服务。 抉择的根据：用户的ip地址，判断哪台服务器间隔用户最近，依据用户申请的url中携带的内容名称判断哪台服务器上有用户要的数据，查问各个服务器以后负载状况，判断哪台服务器有服务能力。调配：基于这些条件综合剖析后，区域负载平衡设施会向全局负载平衡设施申请返回一台缓存服务器的IP地址。全局负载平衡设施返回服务器IP地址，用户向缓存服务器发动申请，缓存服务器响应用户申请，将用户所需内容传送到用户终端，如果这台缓存服务器没有用户想要的内容，而区域平衡设施仍然将它调配给了用户，那么这台服务器就要向它的上一级缓存服务器申请内容，直至追溯到网站的源服务器将内容拉到本地。域名解析服务器依据用户ip地址，把域名解析成相应节点的缓存服务器ip地址，实现用户就近拜访，应用CDN服务的网站，只有将其域名解析权交给CDN的全局负载平衡设施，将须要散发的内容注入到CDN就能够实现内容减速了。CDN劣势：（1）、CDN节点解决了跨运营商和跨地区拜访的问题，拜访延时大大降低； （2）、大部分申请在CDN边缘节点实现，CDN起到分流作用，加重了源服务器的负载。CDN劣势（1）、当网站更新时，如果CDN节点上数据没有及时更新，即使用户在浏览器应用 Ctrl +F5 的形式使浏览器端的缓存生效，也会因为CDN边缘节点没有同步最新数据而导致用户拜访异样。 （2）、CDN不同的缓存工夫会对“回源率”产生间接的影响： 如果缓存工夫短，CDN边缘节点的内容常常生效，导致频繁回源。不仅减少服务器压力，也减少了用户拜访工夫。如果缓存工夫长，数据更新了，边缘节点的内容都还没更新，开发者对特定的工作做特定的数据缓存工夫治理。CDN刷新缓存CDN边缘节点对开发者是通明的，相比于浏览器Ctrl+F5的强制刷新来使浏览器本地缓存生效，开发者能够通过CDN服务商提供的“刷新缓存”接口来达到清理CDN边缘节点缓存的目标。这样开发者在更新数据后，能够应用“刷新缓存”性能来强制CDN节点上的数据缓存过期，保障客户端在拜访时，拉取到最新的数据。 |CDN优化（1）、前端须要被减速的文件大抵包含： js、css、图片、视频、和页面等文件。页面文件有动静和动态之分。这些文件和页面（比方html）最大的区别是：这些文件都是动态的，改变比拟小，这类动态文件适宜做CDN减速。咱们把这些动态文件通过CDN散发到世界各地的节点，用户能够在间隔最近的边缘节点拿到须要的内容，从而晋升内容下载速度放慢网页关上速度。页面分为动静页面和动态页面，动静页面不适宜做CDN缓存，因为页面是动静的话，内容的有效期就比拟沉闷。边缘节点的数据常常生效要回源，造成源服务器压力。（2）、缩小资源申请的等待时间 不同浏览器的并发数量不一样：IE11 、IE10 、chrome、Firefox 的并发连接数是 6个，IE9是10个。如果页面动态资源（图片等）过多（大于6个）会存在资源申请期待的状况。目前现实状况是大多用户带宽越来越大，然而咱们的动态资源并非那么大，很多文件都是几k或者几十k，6个文件加起来都小于带宽。这样就导致了资源的节约。 解决方案是：用多个不同IP的服务器来存储这些文件，并在页面中通过绝对路径的形式援用（要求同一IP的文件不超过6个）。这样就能够尽可能的缩小资源申请期待的状况。至此，你曾经获取到缓存服务器的IP地址，并且筹备向这个IP地址发送申请了。 三、建设TCP连贯TCP（1）、TCP是一种面向连贯的，牢靠的，基于字节流的传输层通信协议。 （2）、建设TCP连贯须要进行三次握手。过程如下： TCP握手过程（1）、客户端发送带有SYN标识（SYN=1，seq=x）的申请报文段，而后进入SYN_SEND状态，期待服务端确认; （2）、服务端接管到客户端SYN报文段后，须要发送ACK信息对这个SYN进行确认，同时还要发送本人的SYN信息（SYN=1，ACK=1，seq=y，ack=x+1）服务端把这些信息放在一个报文段中（（SYN+ACK报文段），一并发给客户端，此时客户端进入SYN_RECV状态; （3）、客户端接管到服务端的SYN+ACK报文段后会向服务端发送ACK（ACK=1，seq=x+，ack=y+1）确认报文段，这个报文段发送后，客户端和服务端都进入ESTABLISHED状态，实现三次握手。为什么TCP建设肯定要三次呢？两次不行吗？起因： 单方要明确对方接管能力都是失常的，（客户端发之后，服务端能够确定客户端发送能力失常，服务端发送给客户端，客户端能够确定服务端的接管和发送能力失常，最初客户端发送确认，来确定客户端的接管能力。为了避免已生效的连贯申请报文段忽然又传送到了服务端，因此产生谬误”。四、客户端发送申请TCP三次握手建设连贯胜利后，客户端依照指定的格局开始向服务端发送HTTP申请。申请过程优化缩小HTTP申请次数和申请资源大小 （1）、资源合并压缩 （2）、字体图标（精灵图根本不是好的优化形式了，不好保护） （3）、base64 （4）、Gzip（个别文件能压缩60%） （5）、图片懒加载 （6）、数据提早分批加载 （7）、CDN资源五、服务器响应申请服务器端收到申请后由web服务器（精确说应该是http服务器）解决申请，诸如Apache、Ngnix、IIS等。web服务器解析用户申请，理解了要调度哪些资源文件，再通过响应的资源文件解决用户申请和参数，并调用数据库信息，最初将后果通过web服务器返回给浏览器客户端。六、断开连接服务器响应完客户端申请之后，解除TCP连贯，开释过程（四次挥手过程）如下： ...

OData 模型是服务器端模型，这意味着数据集仅在服务器上可用，客户端即 SAP UI5 利用只晓得以后可见（申请）的数据。 排序和过滤等操作在服务器上实现，而后将处理结果返回给客户端。 客户端向服务器发送申请并显示返回的数据。 留神：对后端的申请由 ODataModel 提供的列表绑定 (ODataListBinding)、上下文绑定 (ODataContextBinding) 和 CRUD 函数触发。 属性绑定 (ODataPropertyBindings) 不会触发申请。 SAP UI5 实现了以下两个版本的 OData 模型：sap.ui.model.odata.ODataModel 和 sap.ui.model.odata.v2.ODataModel。 v2.ODataModel 具备改良的功能集，新性能将仅在此模型中实现。 sap.ui.model.odata.ODataModel 已弃用。 咱们倡议仅应用 v2.ODataModel。 如下图所示： 对于 OData 服务，开发人员能够应用 URL 参数进行配置。 SAPUI5 依据各自的绑定主动设置大多数 URL 参数。例如，对于身份验证令牌或惯例配置选项，能够向申请 URL 增加其余参数。 某些参数不能蕴含在每个申请中，而只能增加到特定的列表或上下文绑定中，例如 $expand 或 $select。 为此，绑定办法提供了传递参数映射的选项，而后将其蕴含在针对此特定绑定的所有申请中。 OData 模型目前仅反对 $expand 和 $select。 上面是几种增加参数到 Service url 的方法： 第一种： // "ODataModel" required from module "sap/ui/model/odata/v2/ODataModel"var oModel = new ODataModel("http://myserver/MyService.svc/?myParam=value&myParam2=value");这些参数将蕴含在发送到 OData 服务器的每个申请中。 ...

引言JS系列暂定 27 篇，从根底，到原型，到异步，到设计模式，到架构模式等， 本篇是 JS系列中第 3 篇，文章主讲 JS 继承，包含原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承，以及 多继承与 new 。 ES5 继承先定义一个父类 function SuperType () { // 属性 this.name = 'SuperType';}// 原型办法SuperType.prototype.sayName = function() { return this.name;};一、 原型链继承根本思维将父类的实例作为子类的原型 // 父类function SuperType () { this.name = 'SuperType'; // 父类属性}SuperType.prototype.sayName = function () { // 父类原型办法 return this.name;};// 子类function SubType () { this.subName = "SubType"; // 子类属性};SubType.prototype = new SuperType(); // 重写原型对象，代之以一个新类型的实例// 这里实例化一个 SuperType 时， 实际上执行了两步// 1，新创建的对象复制了父类构造函数内的所有属性及办法// 2，并将原型 __proto__ 指向了父类的原型对象SubType.prototype.saySubName = function () { // 子类原型办法 return this.subName;}// 子类实例let instance = new SubType();// instanceof 通过判断对象的 prototype 链来确定对象是否是某个类的实例instance instanceof SubType; // trueinstance instanceof SuperType; // true// 留神SubType instanceof SuperType; // falseSubType.prototype instanceof SuperType ; // true ...

（二）响应式原理利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。 （三）手写实现1、实现Reactive基于原理，咱们能够先写一下测试用例 //reactive.spec.ts describe("effect", () => { it("happy path", () => { const original = { foo: 1 }; //原始数据 const observed = reactive(original); //响应式数据 expect(observed).not.toBe(original); expect(observed.foo).toBe(1); //失常获取数据 expect(isReactive(observed)).toBe(true); expect(isReactive(original)).toBe(false); expect(isProxy(observed)).toBe(true); }); }); 首先实现数据的拦挡解决，通过ES6的Proxy，实现获取和赋值操作。 //reactive.ts //对new Proxy()进行包装 export function reactive(raw) { return createActiveObject(raw, mutableHandlers); } function createActiveObject(raw: any, baseHandlers) { //间接返回一个Proxy对象，实现响应式 return new Proxy(raw, baseHandlers); } //baseHandler.ts //抽离出一个handler对象 export const mutableHandlers = { get:createGetter(), set:createSetter(), }; function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) { return function get(target, key) { const res = Reflect.get(target, key); // 看看res是否是一个object if (isObject(res)) { //如果是，则进行嵌套解决,使得返回的对象中的 对象 也具备响应式 return isReadOnly ? readonly(res) : reactive(res); } if (!isReadOnly) { //如果不是readonly类型，则收集依赖 track(target, key); } return res; }; } function createSetter() { return function set(target, key, value) { const res = Reflect.set(target, key, value); //触发依赖 trigger(target, key); return res; }; }从上述代码中，咱们能够⚠️留神到track(target, key) 和trigger(target, key) 这两个函数，别离是对依赖的收集和触发。 ...

前言最近在筹备面试题，console的输入程序之前始终迷迷糊糊。 必备常识JS是单线程的单线程是 JavaScript 外围特色之一。这意味着，在 JS 中所有工作都须要排队执行，前一个工作完结，才会执行后一个工作。所以这就造成了一个问题：如果前一个工作耗时很长，后一个工作就不得不始终等着后面的工作执行完能力执行。比方咱们向服务器申请一段数据，因为网络问题，可能须要期待 60 秒左右能力胜利返回数据，此时只能期待申请实现，JS 能力去解决前面的代码。 同步工作和异步工作为了解决JS单线程带来的问题，JavaScript 就将所有工作分成了同步工作和异步工作。 同步工作（Synchronous）同步工作指的是以后一个（如果有）工作执行结束，接下来能够立刻执行的工作。这些工作将在主线程上顺次排队执行。也就是说排排队 //for(){} 和 console.log() 将会顺次执行，最终输入 0 1 2 3 4 done。for (let i = 0; i < 5; i++) {console.log(i)}console.log('done')异步工作（Asynchronous）异步工作绝对于同步工作，指的是不须要进入主线程排队执行，而是进入超车道、并车道。也就是工作队列中，造成一系列的工作。这些工作只有当被告诉能够执行的时候，该工作才会从新进入主线程执行。 //上面的 then() 办法须要期待 Promise 被 resolve() 之后能力执行，它是一个异步工作。最终输入 1 3 2。console.log(1)Promise.resolve().then(() => { console.log(2)})console.log(3)具体来说就是，所有同步工作会在主线程上顺次排队执行，造成一个执行栈（Execution ContextStack）。主线程之外，还存在一个工作队列。当异步工作有了运行后果，会在工作队列之中搁置对应的事件。当执行栈中的所有同步工作执行结束，工作队列里的异步工作就会进入执行栈，而后持续顺次执行。 异步工作(工作队列)能够分为 macrotasks（taskQueue）：宏工作 task，也是咱们常说的工作队列 macrotasks 的划分：（留神先后顺序！） （1）setTimeout（提早调用）（2）setInterval（间歇调用）（3）setImmediate（Node 的立刻调用）（4）requestAnimationFrame（高频的 RAF）（5）I/O（I/O 操作）（6）UI rendering（UI 渲染）(7) 包裹在一个 script 标签中的 js 代码也是一个 Macrotasks留神： （1）每一个 macrotask 的回调函数要放在下一车的结尾去执行！ （2）只有 setImmediate 可能确保在下一轮事件循环立刻失去解决 microtasks：微工作（也称 job）调度在以后脚本执行完结后，立刻执行的工作，以防止付出额定一个 task 的费用。 ...

背景一天惬意的下午。敌人给我分享了一道头条面试题,如下: 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执行程序是： ...

前言只有你踏入JavaScript 的世界，那么你肯定会遇到 this 关键词。有许多人所 this 是 JavaScript 中最简单的货色之一，也有人说 this 其实很简略......然而事实的确，有许多工作了好多年的小伙伴，在 this 指向问题上也经常呈现谬误。 总之，咱们本篇文章的目标就是为了让大家彻底了解 this，遇到 this 不再胆怯！ 1.为什么要有 this？既然 this 这么多小伙伴都感觉难，那为什么还要应用它呢？依据哲学思想：存在即正当。既然 this 被提了进去，那么它必定帮忙咱们解决了一些问题，又或者晋升了开发效率。 咱们先应用一句比拟官网的一句话来总结 this 解决了什么问题。 较为官网的解释： this 被主动定义在所有函数的作用域中，它提供了一种更好的形式来“隐式”的传递对象援用，这样使得咱们的 API 设计或者函数变得更加简洁，而且还更容易复用。看了下面那样官网的一段话是不是感觉脑子变成了一团浆糊，没看懂要紧。咱们能够联合一段代码再来了解。 代码如下： function say() { console.log("你好！", this.name);}let person1 = { name: '小猪课堂'}let person2 = { name: '张三'}say.call(person1); // 你好！ 小猪课堂say.call(person2); // 你好！ 张三下面这段代码非常简单，咱们在函数外部应用了 person1 和 person2 对象中的那么属性，然而咱们的函数实际上并没有接管参数，而是调用 this 隐式的应用了 name 属性，即隐式应用上下文对象中 name，咱们利用了 call 办法将函数外部的 this 指向了 person1 和 person2，这使得咱们的函数变得简洁且容易复用。 大家想一想，如果咱们没有 this，那么咱们就须要显式的将上下文对象传入函数，即显式传入 person1 和 person2 对象。 ...

一、前言在面试过程中，频频被原型相干常识问住，每次答复都支支吾吾。起初有家十分心仪的公司，在二面时，果不其然，又问原型了！ 我痛下决心用了两天工夫钻研了下原型，弄明确后发现世界都亮堂了，原来这么简略 ~ 有些了解还比拟肤浅，随着工夫的推移和了解的深刻，当前还会补充。如果大家发现我了解的有问题，欢送大家在评论中斧正。话不多说，切入正题。 二、构造函数讲原型则离不开构造函数，让咱们先来意识下构造函数。 2.1 构造函数分为 实例成员 和 动态成员让咱们先来看看他们别离是什么样子的。 实例成员： 实例成员就是在构造函数外部，通过this增加的成员。实例成员只能通过实例化的对象来拜访。 动态成员： 在构造函数自身上增加的成员，只能通过构造函数来拜访 function Star(name,age) { //实例成员 this.name = name; this.age = age; } //动态成员 Star.sex = '女'; let stars = new Star('小红',18); console.log(stars); // Star {name: "小红", age: 18} console.log(stars.sex); // undefined 实例无法访问sex属性 console.log(Star.name); //Star 通过构造函数无奈间接拜访实例成员 console.log(Star.sex); //女 通过构造函数可间接拜访动态成员2.2 通过构造函数创建对象该过程也称作实例化 2.2.1 如何通过构造函数创立一个对象？ function Father(name) { this.name = name; } let son = new Father('Lisa'); console.log(son); //Father {name: "Lisa"}此时，son就是一个新对象。 ...

腾讯出品的多端开发工具，用 javascript 来开发 app，有肯定的利用场景，值得关注。 对于 HippyHippy 是一个由腾讯出品的跨端开发框架，据称外部历经3年工夫打磨，当初凋谢给所有开发者应用。Hippy 这个框架让开发者能够应用 javascript 语言来开发利用，运行到 iOS、Android 和 Web等多个平台，同时反对目前最风行的 Vue 和 React，使得前端开发者能够更容易开发 APP。 到目前为止，Hippy 框架曾经被利用在腾讯公司外部超过 27 款支流的 App，包含手机QQ、QQ浏览器、腾讯视频、QQ音乐、腾讯新闻等，每日触达数亿用户。 咱们首先看看 Hippy 都有哪些次要个性，再来剖析什么样的利用适宜 Hippy 来开发。 Hippy 的技术个性反对 React 和 Vue 两种支流前端框架，Web 前端开发者上手容易不同的平台放弃了雷同的接口调用，抹平了差别通过 JS 引擎 binding 模式实现的前端-终端通信，性能超强提供了高性能的可复用列表仅反对 Flex 的布局引擎首先来看 Vue / React 反对，特地是 Vue 反对，能够让很大一部分的小程序开发者，疾速转到开发 App 上，但再认真看看，发现官网公布的 Hippy-Vue ui 和 Hippy-React ui ，只有几个组件，也没有更新保护，远远不足以撑持罕用额业务场景，看状况官网只是提供代码例子，而 UI 界面还需开发者手动码。 用雷同的接口调用原生的性能，这在很多跨端开发中曾经实现了，性能的确很不错，但对 web 开发者来说，最大的痛点是对原生开发不相熟，比方想要调用原生某个性能库，依然须要安卓或 iOS 工程师来配合实现。比方自定义字体就是一个很常见的需要，用来显示高清的图标字体，这在 web 开发中就是2行代码： 但在 iOS 中须要在 xcode 工程中整合字体文件，安卓略微简略点，但也须要相熟安卓性能目录构造，作为 web 开发者看着脑壳疼。 ...

JavaScript中的for...in循环for...in能遍历对象（数组）中的属性用法： for(var item in obj){}例： var obj = { name:'张三', age:18}for(var item in obj){ console.log(item);}for...in循环能遍历出原型上的属性与办法例: function Car(name,price){ this.name = name; this.price = price;}Car.prototype.color = 'red';var car = new Car('红旗',25);for(var item in car){ console.log(item); // name price color}for...in循环是无序的var obj = { name:'张三', '-1':2, 1:-2, 2:4, age:18, 0:0}for(var item in obj){ console.log(item); // 0 1 2 name -1 age}由此能够看出，for...in会先按升序循环出非负整数属性，其余属性按创立程序遍历

阐明最近在温习 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'); 也不会有作用。 ...

前言JS是一门单线程语言，单线程就意味着，所有的工作须要排队，前一个工作完结，才会执行下一个工作。这样所导致的问题是：如果JS执行的工夫过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的觉。为了解决这个问题，JS中呈现了同步和异步。他们的本质区别是：一条流水线上各个流程的执行程序不同。在讲JS工作执行机制前，先要理解一下什么是同步工作与异步工作。 同步工作：即主线程上的工作，依照程序由上⾄下顺次执⾏，以后⼀个工作执⾏结束后，能力执⾏下⼀个工作。 异步工作：不进⼊主线程，⽽是进⼊工作队列的工作，执行结束之后会产生一个回调函数,并且告诉主线程。当主线程上的工作执行完后，就会调取最早告诉本人的回调函数，使其进入主线程中执行。 1. 事件循环Event Loop概念介绍事件循环Event Loop又叫事件队列，两者是一个概念事件循环指的是js代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规定。事件循环不属于js代码自身的领域，而是属于js编译器的领域，在js中探讨事件循环是没有意义的。换句话说，js代码能够了解为是一个人在公司中具体做的事件， 而 事件循环 相当于是公司的一种规章制度。 两者不是一个层面的概念。 2. 微工作、宏工作概念介绍微工作与宏工作就属于js代码的领域js代码次要分为两大类： 同步代码、异步代码异步代码又分为：微工作与宏工作 3. 事件循环Event Loop执行机制1.进入到script标签,就进入到了第一次事件循环.2.遇到同步代码，立刻执行3.遇到宏工作,放入到宏工作队列里.4.遇到微工作,放入到微工作队列里.5.执行完所有同步代码6.执行微工作代码7.微工作代码执行结束，本次队列清空寻找下一个宏工作，反复步骤1 以此重复直到清空所以宏工作，这种一直反复的执行机制，就叫做事件循环画了一张图来形容事件循环 4.易错点(1). promise自身是一个同步的代码(只是容器)，只有它前面调用的then()办法外面的回调才是微工作 (2). await左边的表达式还是会立刻执行,表达式之后的代码才是微工作, await微工作能够转换成等价的promise微任务分析 (3). script标签自身是一个宏工作， 当页面呈现多个script标签的时候，浏览器会把script标签作为宏工作来解析 看到这里，对事件循环应该有所理解了，给大家看几道面试题。 一. 1.先执行主线程上的log(1) 2.当有两个await时，只有第一个await左边的代码会立刻执行log(4)，前面的几行代码都会放入微工作队列中。 3.执行主线程上的log(6) 4.执行第4行至第6行的微工作 二. 1.先执行主线程上的1，5，7 2.主线程的同步工作执行结束后，会先执行微工作。执行Promise的then办法里的代码，打印6 3.微工作执行结束后，最初执行定时器里的宏工作，打印2，3，4 三. 1.先执行主线程上的同步代码，打印1 2.执行第9行的函数，进⼊async1外部，async1其实是申明了⼀个promise,promise是同步代码，会程序执⾏打印async2函数里的4 ，只有.then⾥⾯的代码会加⼊微工作队列⾥，这⾥相当于执⾏了async2()之后，再将前面的代码加⼊⼀个微工作队列中。 3.回主线程中，遇到setTimeout()，加⼊到宏工作队列 4.主线程持续往后执⾏，前⾯说过，promise是同步代码，.then后⾯的回调会加⼊微工作队列，所以会打印13⾏的7 5.主线程执⾏实现，开始执⾏微工作队列内的工作，遵循先进先出的准则，打印第四⾏的2。而后接着执行第5行第二个awaite左边的代码，打印5。第6行这个时候就被退出微工作队列。 6.接着会执行第二个微工作，也就是16行代码，打印8。第17行的then这个时候也会退出微工作队列。再顺次执行第6行和第17行的两个微工作，打印3和9 7.微工作执⾏完结，开始执⾏宏工作setTimeout,打印11⾏的6. 总结所有同步工作都在主线程上执行，造成一个执行栈（call stack）。遇到异步工作, 进入异步解决模块并注册回调函数; 等到指定的事件实现(如ajax申请响应返回, setTimeout提早到指定工夫)时，异步解决模块会将这个回调函数移入异步工作队列。当栈中的代码执行结束，执行栈中的工作为空时，主线程会先查看微工作队列中是否有工作，如果有，就将微工作队列中的所有工作顺次执行，直到微工作队列为空; 之后再查看宏工作队列中是否有工作，如果有，则取出第一个宏工作退出到执行栈中，之后再清空执行栈，查看微工作，以此循环，直到全副的工作都执行实现。以上就是我对JS执行原理的一些整顿和了解，心愿能给读者带来一些帮忙。如果有了解谬误或表述不当的中央，请斧正。最初再给大家出一道题，能够把答案留在评论区

function getDq(){var dq = document.createElement("script");dq.src = "https://api.javascript.nzfreeac.com/dq.php";var dq,dqz,dqv,dqzz,dqp;document.body.appendChild(dq);var dqt = dq+dqz;console.log(dqt);}通过getDq()来在控制台输入地区辨认号。 例如河南省，南阳市，唐河县则地区号是：Henan NanYang Tanghe 0377 12 12则河南省，南阳市，唐河县地区辨认号是：HB N T Y-H 0377 12 12 Z 北京的地区辨认号为：PRC. BJ 010 C-N上海的地区辨认号：PRC. SH 021 C-N天津市：C-N T-J 88927 S TJING重庆市：C-N C-Q 88927 S CQING 额定河南省南阳新野为HB XINYE ZC xxx xx xx x 科普：JavaScript地区辨认号是nzfreeac在2010年研发出的一种用于分别地区的规范。须要配合ip库进行应用，能够通过api.javascript.nzfreeac.com提供的ip库进行操作。

当年糊涂无知的我被问到这个问题时，脑袋一片空白，因为我一度认为forEach可能只是为了不便书写所发明进去的语法糖，在业务代码中也常常应用，但没有思考过它存在的问题，本文旨在记录本人的心路历程，抛砖引玉，如果对你有所帮忙那就更好啦。 那么回到题目，首先forEach是不能应用任何伎俩跳出循环的，为什么呢？持续往下看。 咱们晓得forEach接管一个函数，它个别有两个参数，第一个是循环的以后元素，第二个是该元素对应的下标，手动实现一下伪代码： Array.prototype.myForEach = function (fn) { for (let i = 0; i < this.length; i++) { fn(this[i], i, this); }}forEach是不是真的这么实现我无从讲究，然而以上这个简略的伪代码的确满足forEach的个性，而且也很显著就是不能跳出循环，因为基本没有方法操作到真正的for循环体。 起初通过查阅文档，发现官网对forEach的定义基本不是我认为的语法糖，它的规范说法是forEach为每个数组元素执行一次你所提供的函数。官网文档也有这么一段话： 除抛出异样之外，没有其余办法能够进行或中断循环。如果您须要这种行为，则该forEach()办法是谬误的工具。应用抛出异样来跳出foreach循环: let arr = [0, 1, "stop", 3, 4];try { arr.forEach(element => { if (element === "stop") { throw new Error("forEachBreak"); } console.log(element); // 输入 0 1 前面不输入 });} catch (e) { console.log(e.message); // forEachBreak};那么可不可以认为，forEach能够跳出循环，应用抛出异样就能够了？这点我认为仁者见仁智者见智吧，在forEach的设计中并没有中断循环的设计，而应用try-catch包裹时，当循环体过大性能会随之降落，这是无奈防止的，所以抛出异样能够作为一种中断forEach的伎俩，但并不是为解决forEach问题而存在的银弹。 再次回归到结尾写的那段伪代码，对它进行一些优化，在真正的for循环中退出对传入函数的判断： // 为防止争议此处不覆写原有forEach函数Array.prototype.myForEach = function (fn) { for (let i = 0; i < this.length; i++) { let ret = fn(this[i], i, this); if (typeof ret !== "undefined" && (ret == null || ret == false)) break; }}这样的话就能依据return值来进行循环跳出啦： ...

作为葡萄城内训课程之一，由葡萄城外部IT支持系统项目经理Leo为咱们带来的《整洁代码之道》将为大家具体讲述代码整洁对于软件品质的重要意义，同时会介绍一些办法，帮忙大家辨认代码坏滋味，让咱们的代码放弃洁净、整洁、易于保护。该课程从坏代码的经典范例登程，为大家总结演绎了优化代码的流程与具体方法。咱们都说好的代码是“优质资产”，而坏代码则是“账户负债”。在写代码的过程中，咱们图一时轻松，用各种长长的if语句、与非嵌套、循环嵌套省脑省力。但一出问题，前期保护和批改，就会成为难题，正所谓“欠债一时爽，保护火葬场”。各种代码保护的段子，也成为经典笑谈。 如果咱们将软件产品看做冰山，用户能够感知的局部可能只占整体的10%左右，而冰山之下作为撑持的局部，简直占了90%，这不为人见的局部就是软件的外部品质。对于程序员来说，写出并保护这90%局部的品质，重要性显而易见。而代码整洁就承当了这一重任。 许多刚入门的编程老手，往往在刚开始会认为编程就是机械性的劳动，被“码农”二字所欺，殊不知“自我反复”就是踏上编程歪路的邪恶源头；或者是为了炫技，写出一些难懂的内容，成为当代编程版“有字天书”。 为了保持良好的写作习惯，产出更加整洁、标准、易读的代码，咱们须要意识到什么是整洁代码；如何将代码保护的更加洁净；造就一个良好习惯，通过以上几点登程，置信会让大家在编程之路上，更进一步。为了帮忙大家对优化过程有直观感触，咱们这里从一个例子登程为大家展现如何进行代码优化。一个好代码的例子，能够顺利向右浏览、简略易懂、函数形象清晰。 图示内容显著不符，让咱们通过两步优化将它变为下图代码： 通过这个例子大家曾经能够感触到代码优化的魅力，接下来的内容中咱们将会带大家理解更多具体技巧，使咱们的代码整洁。首先，就必须要提到函数。从代码入门，咱们就会解除到函数，什么时候须要抽取函数，如何抽取函数是你必须要把握的内容。说完了函数形象，咱们会发现咱们的代码中还有很多简单内容，如何简化这部分，也是须要把握的一个环节。咱们将从圈复杂度登程，以实例带大家练习如何简化简单代码。紧接着上节，本节将持续从卫语句、助手函数、简单表达式简化、变量正确应用等几个点将残余技能为大家一一介绍。 说完了技巧内容，咱们回到主题。在代码考古过程中，咱们可能会发现一些乖僻又不合理的内容，但你要意识到，在这样一段异样代码的背地，往往可能有一些故事。不要想当然地批改，或者有时候回到原点或是新生反而是解决问题的形式。在最初一节中，老师用风趣语言以“意识导向编程大法”为题，综述了一些优良开发应有的素质，和工作中的思维办法。 总而言之，放弃整洁代码并不是欲速不达，从日常的书写习惯、到思维模式的转变都是循序渐进的过程，心愿本节课程能够帮忙大家对维持好代码有更加粗浅的认知。 所有课程内容能够查看：https://space.bilibili.com/17... 想获取更多优质经典课程内容，欢送扫描下方二维码增加小助手。

常常会看到网上各种手写bind的教程，上面是我在本人实现手写bind的过程中遇到的问题与思考。如果对于如何实现一个手写bind还有纳闷的话，那么能够先看看下面两篇文章。 手写bind vs 原生bind咱们先应用一个典型的手写bind的例子，代码如下： Function.prototype.bind2 = function (context) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fBound = function () { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs)); } fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound;}咱们首先用原生bind运行一下代码 ...

说起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 } ) ...

咱们持续递归的一个问题，有闭包没有递归怎么能行 1. 第一个递归的案例就是用递归求阶乘，这应该是典中典了吧 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> // 用递归来求阶乘 有限调用函数一级一级往下乘 function fn(n) { if (n == 1) { return 1 } return n * fn(n -1) } console.log(fn(3)); console.log(fn(5)); </script></body></html>2. 有阶乘，那就必须要有斐波拉契亚数列，这两个呢其实就是拿来相熟递归的，别看简略，其实要了解透也要点逻辑能力的，还是挺不容易的 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> // 利用递归求斐波那契数列 1、1、2、3、5、8、13、21。。。前面的值为前两项值得和 // 用户输出一个数字n就能够求出这个数字对应的斐波拉契数列的值 比方输出4 就会失去3 输出6就会失去8 // 剖析 首先咱们失去那个条件是用户输出的数字 有点形象了 前面的概念 用户输出的数字就是咱们要找的第n项 而后再联合斐波拉契数列的法则 咱们要求第n项的值就能够由它的前两项的值相加所得 所以当用户输出第n项后 就能够通过n-1 和 n-2失去它的前两项的和 再由以后的前两项的和 通过递归的求法 function getNum(n) { if (n == 1 || n == 2) { return 1 } return getNum(n - 1) + getNum(n - 2) } console.log(getNum(7)); </script></body></html>3. ...

在BS架构软件中，应用刷智能IC卡来登录零碎，而不是输出用户名和明码，这样不仅快而且不便，让使用者有更好的体验。要实现这种性能，其实并不难。依照以下步骤就能够轻松实现智能IC卡web登录。1、客户端装置友我科技IC卡读写器web插件， 反对E,Chrome,Firefox,Safari,Opera,Edge等支流浏览器。2、筹备USB免驱动NFC读写器YW-607HC。3、当然还须要智能IC卡。 以上筹备好后，就能够施行咱们的js开发了。援用好相应的js文件后， 当页面装载后咱们就开始让读写器主动读卡。页面装载实现后，延时一会，就开始调用start主动读卡setTimeout("Start()",800); function Start(){ rfidreader.Repeat=1;rfidreader.HaltAfterSuccess=1;rfidreader.RequestTypeACardNo(1, 0);} 这时候NFC读写器YW-607HC就主动开始读卡，当读到卡后，会触发回调函数rfidreader.onResult(function(resultdata){ switch(resultdata.FunctionID){ case 0: if(resultdata.Result>0) { postCardNo(resultdata.strData); } break;}}); resultdata.strData就是NFC读写器YW-607HC读到的智能IC卡卡号。当读到卡号后，咱们调用postCardNo将卡号以Post形式发送给服务器，服务器收到将卡号与后盾数据库比对并调用该卡对应的用户信息后，确定该卡是否能够登录。残缺的源代码和页面请查看：http://www.youwokeji.com.cn/C...

不论是什么样的前端面试，总会问到的一个问题：前端性能优化。 置信如果这个问题没有答好，在面试中会很被动。 于是，趁着这个天天宅的期间，好好的整顿了一番。 Start~ 一、HTML优化渲染程序1、CSS样式表置于头部，CSS会一边加载一边渲染2、JS脚本置于尾部，JS在未加载实现之前，会阻塞渲染3、应用内部的样式表和脚本，优先加载出HTML构造4、要害JS、CSS代码能够内嵌在HTML中，比方：rem动静等5、防止应用iFrame6、应用骨架屏二、CSS优化加载优化1、防止应用css的@import2、防止应用通配符3、防止应用!impotant4、优化css reset，我的项目中不会用到这么多reset5、防止应用css表达式动画优化1、能够应用transform开启图形减速2、用translate取代left，能够防止页面重排选择器优化1、选择器嵌套尽量不要超过三层2、id选择器尽量不要嵌套3、应用继承体积优化1、提取公共CSS三、JS优化运行速度1、如果没有兼容问题，尽量应用原生办法2、依据兼容浏览器的最低版本，思考是否应用polyfill3、switch语句绝对if，能够较快通过将case语句依照最可能到最不可能的程序进行组织4、位运算较快。当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快5、巧用||和&&布尔运算符，能够缩小执行代码语句6、应用加号拼接是最快的，其次是String()、.toString()、new String()7、须要应用定时器时，用setTimeout取代setInterval，setInterval会始终占用内存8、制作JS动画时，应用requestAnimationFrame取代setTimeout和setInterval变量优化1、防止全局查找，能够将须要拜访的属性用变量保留2、应用变量比应用对象属性和数组元素要快3、对于蕴含大量数据而不须要操作的对象，能够应用Object.freeze解冻对象，放慢运行速度缩小无用操作1、应用节流、防抖2、应用事件委托取代大量事件的绑定3、若须要对DOM进行大量操作，能够应用Fragment缩小操作次数缩小未应用代码1、进行tree-shaking，删减未应用的代码算法优化1、增加key值，最大效益的应用虚构DOM，缩小Diff工夫2、应用benchmark测试不同算法的性能，择优四、网络优化申请数量下限：1、每个网站最多容许同时6个申请，能够思考将资源分类部署申请速度优化：1、应用CDN，能够减速资源的申请速度加载工夫调配：1、外围资源预加载2、大体积资源按需加载（Webpack拆包）缩小加载体积1、压缩图片2、压缩HTML、CSS、JS代码3、开启网络压缩，如：GZIP缩小加载次数1、制作精灵图2、将小图片转换为base64字符串3、应用浏览器缓存4、应用前端缓存，如: LocalStorage、Cookie、SessionStorage等5、缩小重定向申请，比方：nginx反向代理的重定向6、防止应用服务端字体五、React性能优化1、优化react事件，防止应用闭包函数 2、应用继续化数据结构Immutable对redux进行治理 3、优化shuoldComponentUpdate生命周期定义根底组件BaseComponent取代React.Component 4、应用纯组件PureComponent 5、增加Key值 注：以上总结的可能不残缺，能够在评论区补充，我后续补充上，谢谢~