YolkPie

设计师在画页面的时候，需要充分考虑输入输出（反馈）的状态，保证输入无障碍、反馈清晰易懂，使整个交互视觉体验流畅。之前做了一些表单的优化工作，整个优化过程中就疏忽了很多细节体验，今天做个复盘，以表单举例来聊聊设计时应该如何拆解完善细节体验。 输入前输入前的页面重点是传达需要做什么、一般达成传达的目的有两种形式，一种是通过标题文字+辅助文字来说明，比如：需要输入文字、数字、需要点击、需要上传图片…；另一种是直接将输入控件直接采用特定的控件，比如：邮箱输入框、电话输入框…，这类控件一看就知道要填入什么信息。 辅助说明更多是为了帮助用户提前了解，减少出错率，如：需要上传 png 格式图片 帮助用户做决策，如：微信红包的群人数就是为了帮助用户输入红包个数，避免用户需要确认人数而返回看群人数，也算是一种提醒信息； 输入输入部分除了常见的快捷输入、输入联想、自动识别等方式帮助用户快速输入外，在涉及输入数字的时候，需要关注数字键盘上的输入行为可能会有哪些情况，而这些情况同时也需要和我们的输入项字段要求有关。举个例子： 例 1：微信红包个数字段与总金额字段对应的键盘设计不同，因为个数不会有小数点； ...

Webpack5简单介绍Webpack 5 发布于 2020年10月10日，Webpack 5 对Node.js 的版本要求至少是10.13.0 (LTS)。有以下特点： 尝试用持久性缓存来提高构建性能。 尝试用更好的算法和默认值来改进长期缓存。 尝试用更好的 Tree Shaking 和代码生成来改善包大小。 尝试改善与网络平台的兼容性。 尝试在不引入任何破坏性变化的情况下，清理那些在实现 v4 功能时处于奇怪状态的内部结构。 持久化缓存是 webpack5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘，二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程，从而大大提升编译构建的效率。 实践基础配置接下来一起配置一个的 Webpack5示例项目。将支持以下功能： 分离开发环境、生产环境配置； 模块化开发； sourceMap 定位警告和错误； 动态生成引入 bundle.js 的 HTML5 文件； 实时编译； 封装编译、打包命令。 开始新建123456789/ ...

栈内存和堆内存的优缺点在JS中，基本数据类型变量大小固定，并且操作简单容易，所以把它们放入栈中存储。引用类型变量大小不固定，所以把它们分配给堆中，让他们申请空间的时候自己确定大小，这样把它们分开存储能够使得程序运行起来占用的内存最小。 栈内存由于它的特点，所以它的系统效率较高。堆内存需要分配空间和地址，还要把地址存到栈中，所以效率低于栈。 浏览器垃圾回收机制 内存生命周期js中内存生命周期分3个步骤1、内存分配：当我们声明变量、函数、对象时，系统会自动为他们分配内存2、内存使用：即读写内存，也就是使用变量、函数等3、内存回收：使用完毕，由垃圾回收机制自动回收不再使用的内存 js内存分配为了不让程序员费心分配内存，JavaScript 在定义变量时就自动完成了内存分配。 12345678910111213141516171819var n = 123; // 给数值变量分配内存 var s = "azerty"; // 给字符串分配内存var o = { a: 1, b: null}; // 给对象及其包含的值分配内存// 给数组及其包含 ...

背景js精度问题在前端很常见，经常页面遇见一些计算的展示，我们需要考虑js精度，但是为什么会有精度问题，我们应该怎样解决，今天带大家一起学习一下。 什么是精度问题 JavaScript 中的数字按照 IEEE 754 的标准，使用 64 位双精度浮点型来表示。其中符号位 S，指数位 E，尾数位M分别占了 1，11，52 位，并且在 ES5 规范 中指出了指数位E的取值范围是 [-1074, 971]。 浮点数精度问题，比如 0.1 + 0.2 !== 0.3大数精度问题，比如 9999 9999 9999 9999 == 1000 0000 0000 0000 1toFixed 四舍五入结果不准确，比如 1.335.toFixed(2) == 1.33 浮点数精度和 toFixed 其实属于同一类问题，都是由于浮点数无法精确表示引起的，如下： 12(1.335).toPrecision(20); // "1.3349999999999999645" 关于大数精度问题，我们可以先看下面这个代码片段： 12345678910// 能精确表示的整数范围上限 ...

背景前端开发经常遇见很多富文本，接口返回富文本代码片，代码片里面夹杂着各种行内样式，按照常理我们只需要渲染即可。可是奈何这个代码片参差不齐，如果不加限制，可能导致富文本内容无法正常预览。今天我们简单聊聊富文本的样式书写，应该做怎样的限制。 1. 基础样式基础样式是指我们引入的base.css文件中，对于字体、背景颜色、li、ul等的基本限制影响我们的富文本样式，所以需要对富文本中所有元素，再来一次重置（即normal-默认）处理。 常见问题： 特殊DOM的样式需要重置为默认值；因为如果富文本中默认使用了i标签做倾斜展示，而我们的基本样式限制倾斜后，页面展示就和原本要的效果有出入。 例如ul、li的list-style-type属性；strong标签的font-weight属性；i标签的倾斜属性等； 解决方式： 检查项目的base.css中有那些继承属性被重置，然后在富文本中做相应调整 123456789101112131415161718/* 重置reset的样式 */.parent-container ul,.parent-container ul li  ...

ES5原型的几种常用继承方式原型链继承（子类原型指向父类实例）1234567891011121314function SuperType() { this.colors = ['red', 'blue', 'green'];}function SubType() {}SubType.prototype = new SuperType();let instance1 = new SubType();instance1.colors.push('black');console.log(instance1.colors);let instance2 = new SubType();console.log(instance2.colors); 缺点： - 属于引用类型传值，某一个副本实例属性的修改会引起其他副本实例属性的变化 - 不能向父类构造函数传递参数，不够灵活 借用构造函数继承（执行子类构造函数、各得到一份父类实例副本）1234567891011121 ...

1. 一键重新发起请求在与后端接口联调或排查线上BUG时，你是不是也经常听到他们说这句话：你再发起一次请求试试，我这边看下为啥出错了！重发请求，这有一种简单到发指的方式。 选中Network点击Fetch/XHR选择要重新发送的请求右键选择Replay XHR 不用刷新页面，不用走页面交互。 2. 在控制台快速发起请求还是联调或修BUG的场景，针对同样的请求，有时候需要修改入参重新发起，有啥快捷方式？ 选中Network点击Fetch/XHR选择Copy as fetch控制台粘贴代码修改参数，回车搞定 3. 复制JavaScript变量假如你的代码经过计算会输出一个复杂的对象，且需要被复制下来发送给其他人，怎么办？ 使用copy函数，将对象作为入参执行即可 4. 控制台获取Elements面板选中的元素调试网页时通过Elements面板选中元素后，如果想通过JS知道它的一些属性，如宽、高、位置等怎么办呢？ 通过Elements选择要调试的元素控制台直接用$0访问 5. 截取一张全屏的网页偶尔咱们也会有对网页截屏的需求，一屏还好，系统自带的截屏或者微信截图等都可以办到，但 ...

前端缓存一、什么是http缓存http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。 常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。 http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。 http缓存的分类：根据是否需要重新向服务器发起请求来分类，可分为(强制缓存，协商缓存) 根据是否可以被单个或者多个用户使用来分类，可分为(私有缓存，共享缓存) 强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互。下面是强制缓存和协商缓存的一些对比 1.1、强制缓存强制缓存在缓存数据未失效的情况下（即Cache-Contro ...

前言目前，各类通过设计稿直接生成前端代码工具层出不穷，目的就是大大的节省前端开发时间，甚至于取代前端。这是一个美好且可能在不久的将来会实现的梦想。不知道各位前端人士有没有感觉到危机（哈哈哈），目前来看危机不存在，福利倒是不少，因为目前至少好几款设计软件已经生成了大部分的css,这已经为我们节省了不少的开发量。但是前端的主要工作量不是在css上，所以大家尽可能的放心，我们一时半会是不会被机器取代的。最近学习了一款这样的工具，它可以生成好几端代码，也包括js。希望和大家分享，了解一下这些个代码生成工具干了什么，是什么底气给了它们想要取代前端的野心。 什么是DecoDeco 是 Design 和 Code 的两个词的合并，代表 Design To Code，即从设计稿生成代码。 Deco 利用人工智能，结合各类自动化、工程化等手段，将 Sketch、PS、图片类的设计稿转换生成还原度高、可维护强的代码，致力于突破业务生产力瓶颈，为前端大规模、高效率生产提供赋能。 Deco 通过标准化的设计物料输入及楼层页面输出，帮助沉淀设计规范和统一开发标准，推进流程的标准化建设，降低人力成本和流程损耗，进 ...

左右对齐text-align可以通过 text-align 设置文字的左右对齐方式。 123<p style="text-align: left;">文字左对齐</p><p style="text-align: center;">文字居中对齐</p><p style="text-align: right;">文字右对齐</p> text-algin 设置的对齐方式可以适用于所有 display 为 inline 或 inline-blcok 的元素，比如图片、按钮等。比如在搜索的时候，可以设置两个按钮左右居中： 123456789101112<div style="text-align: left;"> <button>搜索</button> <button>重置</button></div><div style="text-align: ...