前端日记

1. new的实现原理是什么？new 的实现原理: 创建一个空对象，构造函数中的this指向这个空对象 这个新对象被执行 [[原型]] 连接 执行构造函数方法，属性和方法被添加到this引用的对象中 如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。123456789101112131415function _new() { let target = {}; //创建的新对象 //第一个参数是构造函数 let [constructor, ...args] = [...arguments]; //执行[[原型]]连接;target 是 constructor 的实例 target.__proto__ = constructor.prototype; //执行构造函数，将属性或方法添加到创建的空对象上 let result = constructor.apply(target, args); if (result && (typeof (re ...

Vue 项目性能优化方案 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层面的优化； webpack 配置层面的优化； 基础的 Web 技术层面的优化。 一、代码层面的优化1.1、v-if 和 v-show 区分使用场景v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 displa ...

修改数组对象的属性（key）名方法一 12345678910111213141516171819var array = [ { id: 1, name: "小明" }, { id: 2, name: "小红" },];/**///旧key到新key的映射var keyMap = { id: "value", name: "label" };for (var i = 0; i < array.length; i++) { var obj = array[i]; for (var key in obj) { var newKey = keyMap[key]; if (newKey) { obj[newKey] = obj[key]; delete obj[key]; } }}console.log(array); 方法二 12345678 ...

脚手架vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。 脚手架的作用 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 可以根据交互动态生成项目结构和配置文件。 多人协作更为方便，不需要把文件传来传去。 实现的功能在开始之前，我们需要明确自己的脚手架需要哪些功能。vue init template-name project-name 、create-react-app project-name。我们这次编写的脚手架(eos-cli)具备以下能力(脚手架的名字爱叫啥叫啥，随便写): eos init template-name project-name 根据远程模板，初始化一个项目(远程模板可配置) eos config set 修改配置信息 eos config g ...

JS异步发展历程知其然知其所以然，首先了解三个概念： 1.什么是同步？ 所谓同步，就是在发出一个”调用”时，在没有得到结果之前，该“调用”就不返回。但是一旦调用返回，就得到返回值了。换句话说，就是由“调用者”主动等待这个“调用”的结果。此调用执行完之前，阻塞之后的代码执行。 2.什么是异步？ “调用”在发出之后，这个调用就直接返回了，所以没有返回结果。换句话说，当一个异步过程调用发出后，调用者不会立刻得到结果。而是在”调用”发出后，”被调用者”通过状态、通知来通知调用者，或通过回调函数处理这个调用。异步调用发出后，不影响后面代码的执行。 3.JavaScript 中为什么需要异步？ 首先我们知道JavaScript是单线程的(即使新增了webworker，但是本质上JS还是单线程)。同步代码意味着什么呢？意味着有可能会阻塞，当我们有一个任务需要时间较长时，如果使用同步方式，那么就会阻塞之后的代码执行。而异步则不会，我们不会等待异步代码的之后，继续执行异步任务之后的代码。 概念了解完了，我们就要进入今天的正题了。首先大家思考一下：平时在工作中，主要使用了哪些异步解决方案，这些异步方案有什 ...

进度条，是我们日常界面中使用的非常多的一种，下面我们来看看。到今天，我们可以如何实现进度条。 HTML 标签 – meter & progress这个可能是一些同学还不太清楚的，HTML5 原生提供了两个标签 <meter> 和 <progress> 来实现进度条。 <meter>：用来显示已知范围的标量值或者分数值 <progress>：用来显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条 我们分别来看看，首先是 <meter> 标签： 123456<p> <span>完成度：</span> <meter min="0" max="500" value="350"> 350 degrees </meter></p> 1234meter { width: 200px;} 样式如下： 其中，min、max、value 分别表示最大值 ...

GitHub Actions 定时运行代码：每天定时百度链接推送GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可用作代码运行环境。功能非常强大，能够玩出许多花样。 百度主动链接推送链接主动推送在百度站长中有介绍 具体使用方法就是创建一个文件urls.txt，文件内每行一条链接的格式写入提交的多个链接 运行命令 1curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=xxx.com&token=T5PEAzhG*****" 上面命令的地址和参数由百度站长提供。运行完命令会返回推送结果，不出意外的话就会把urls.txt内的所有链接一次性推送给百度。 这个方法虽然比嵌入网站头部的自动推送更高效，但是也有它的麻烦之处，就是得自己填入链接到urls.txt文件，然后手动运行命令。 自动生成urls.txt没关系，技术的本质就是让人”偷懒”的。于是，我写了一 ...

25 条示例代码让你的代码更简洁JavaScript 无处不在，从 PC 端到移动设备端，甚至是后端，都在使用 JavaScript。 在本文中，我将尝试一些可用来使代码看起来更简洁的实践方案。 1、使用默认参数代替短路或条件默认参数通常比短路更简洁。 1234567function SomeMethod(paramThatCanBeUndefined) { const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValue); // ...}SomeMethod(); // Default ValueSomeMethod("SomeValue"); // SomeValue 尝试以下方法： 123456function SomeMethod( console.log(paramThatCanBeUndefined) // ...}SomeMethod() // Default ValueSomeMet ...

wx 小程序中的全局数据共享方案 MonX什么是全局数据共享全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。 2. 小程序中的全局数据共享方案在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：mobx-miniprogram 用来创建 Store 实例对象mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用 在项目中运行如下的命令，安装 MobX 相关的包： 1npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 注意： MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm 。 创建 MobX 的 Store 实例在项目根目录下新建 store 文件夹，并且新建 store.js 文件 123456789 ...

面试官：说说你对算法的理解？应用场景？ 一、是什么算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制 也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出 如果一个算法有缺陷，或不适合于某个问题，执行这个算法将不会解决这个问题 一个程序=算法+数据结构，数据结构是算法实现的基础，算法总是要依赖于某种数据结构来实现的，两者不可分割 因此，算法的设计和选择要同时结合数据结构，简单地说数据结构的设计就是选择存储方式，如确定问题中的信息是用数组存储还是用普通的变量存储或其他更加复杂的数据结构 针对上述，可以得出一个总结：不同的算法可能用不同的时间、空间或效率来完成同样的任务 二、特性关于算法的五大特性，有如下： 有限性（Finiteness）：一个算法必须保证执行有限步之后结束 确切性（Definiteness）： 一个算法的每一步骤必须有确切的定义 输入（Input）：一个算法有零个或多个输入，以刻画运算对象的初始情况，所谓零个输入是指算法本身给定了初始条件 输出（Output）：一个算法有 ...