blog
blog copied to clipboard
wuxianqiang
博客系列
比如我们常用的菜单列表 ```js const data = [ { id: 56, parentId: 62 }, { id: 81, parentId: 80 }, { id: 74, parentId: null }, { id: 76, parentId: 80 },...
这里的意思是不在使用Vue-cli脚手架生成项目了，而是自己从零开始配置webpack打包，完成一个完整的项目。 首先说一下为什么不在使用脚手架，首先是脚手架一般不适合在公司作为项目开发的主力军，脚手架配置并不符合公司的业务场景，一般还要拓展一些额外的功能，在现有的脚手架中修改变得额外的麻烦，所以一般公司都是开发人员自己配置项目打包。 现在我们开始吧！ ### 配置ES6 为了支持ES6，你需要安装如下包 ``` babel-loader 在webpack中必须要loader才能处理代码，所以要安装loader @babel/core 这个是babel里面自己的方法 @babel/preset-env 这里是将现有已经支持的高级语法转换成低级语法 @babel/runtime-corejs3 这个是浏览器还没有的语法，也就是提案中的语法，浏览器没有，就自己实现，这个包就是实现的所有提案代码 @babel/runtime 如果每个代码都使用了提案的代码，那么每个代码都有一个实现的方法，这样就重复了，那么就要使用把他们放到一个单独的文件中，作为模块带引入 @babel/plugin-transform-runtime 具体怎么引入，需要生成一段代码import这样的添加到我们的代码中，之前是没有的，要用来生成插入到我们的代码中 @babel/plugin-proposal-class-properties 这次插件是支持一些类里面的写法，可以选择性的安装 ``` 我们开始安装把，主要是开发依赖还是生成依赖 ``` npm i @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader...
如果你使用过 Express 或者 Koa 等服务端框架, 那么应该对 middleware 的概念不会陌生。 在这类框架中，middleware 是指可以被嵌入在框架接收请求到产生响应过程之中的代码。例如，Express 或者 Koa 的 middleware 可以完成添加 CORS headers、记录日志、内容压缩等工作。middleware 最优秀的特性就是可以被链式组合。你可以在一个项目中使用多个独立的第三方 middleware。 相对于 Express 或者 Koa 的 middleware，Redux middleware 被用于解决不同的问题，但其中的概念是类似的。它提供的是位于 action 被发起之后，到达 reducer...
```js function shuffle(oldArray) { const array = [...oldArray]; for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]]...
```js function safelyGet(obj, path, fallback = undefined) { let needle = obj; const found = path.every(el => { if (needle[el] === undefined) return false; needle = needle[el]; return true; });...
```js function randomInt(min, max, exclude) { const nums = []; const excludeLookup = new Set(exclude); for (let i = min; i
```js const myObj = { a: "aKey", b: "bKey", c: "cKey" } const reversed = {}; for (key in myObj) { reversed[myObj[key]] = key; } ```
```js const arr1 = [1, 2, 3, 2, 4, 5, 6]; const arr2 = [2, 4, 6]; const arr2Set = new Set(arr2); const filtered = arr1.filter(el => arr2Set.has(el)); ```
JavaScript 和用户界面更新在同一个进程内运行，同一时刻只有其中一个可以运行。这意味着当JavaScript代码正在运行时，用户界面不能响应输入，反之亦然。有效地管理UI 线程就是要确保JavaScript 不能运行太长时间，以免影响用户体验。最后，请牢记如下几点： 1. JavaScript 运行时间不应该超过100 毫秒。过长的运行时间导致UI 更新出现可察觉的延迟，从而对整体用户体验产生负面影响。 2. JavaScript 运行期间，浏览器响应用户交互的行为存在差异。无论如何，JavaScript 长时间运行将导致用户体验混乱和脱节。 3. 定时器可用于安排代码推迟执行，它使得你可以将长运行脚本分解成一系列较小的任务。 4. 网页工人线程是新式浏览器才支持的特性，它允许你在UI 线程之外运行JavaScript 代码而避免锁定UI。 我们通常将一个任务分解成一系列子任务。如果一个函数运行时间太长，那么查看它是否可以分解成一系列能够短时间完成的较小的函数。可将一行代码简单地看作一个原子任务，多行代码组合在一起构成一个独立任务。某些函数可基于函数调用进行拆分。例如： ```js function timedProcessArray(items, process, callback) { var todo = item.concat()...
当浏览器下载完所有页面HTML 标记，JavaScript，CSS，图片之后，它解析文件并创建两个内部数据结构： 1. 一棵DOM 树：表示页面结构 2. 一棵渲染树：表示DOM 节点如何显示 一旦DOM 树和渲染树构造完毕，浏览器就可以显示（绘制）页面上的元素了。 当DOM 改变影响到元素的几何属性（宽和高）——例如改变了边框宽度或在段落中添加文字，将发生 一系列后续动作——浏览器需要重新计算元素的几何属性，而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效，然后重构渲染树。这个过程被称作重排版。重排版完成时，浏览器在一个重绘进程中重新绘制屏幕上受影响的部分。 不是所有的DOM 改变都会影响几何属性。例如，改变一个元素的背景颜色不会影响它的宽度或高度。在这种情况下，只需要重绘（不需要重排版），因为元素的布局没有改变。 重绘和重排版是负担很重的操作，可能导致网页应用的用户界面失去相应。所以，十分有必要尽可能减少这类事情的发生。 ### 重排版时会发生什么？ 正如前面所提到的，当布局和几何改变时需要重排版。在下述情况中会发生重排版： 1. 添加或删除可见的DOM 元素 2. 元素位置改变 3. 元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变） 4. 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代 5. 最初的页面渲染...