YolkPie

前端缓存一、什么是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: ...

前言在当下的前端环境里，各种框架和工具层出不穷，比如 React、Vue、Angular 等，极大的提高了我们的开发效率，但是，他们都有一个共同点：源代码无法直接运行，必须经过转换之后才可执行。Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的构建工具，是现代 Web 开发必须掌握的技能之一。 Webpack 的基本概念Webpack 是使用 NodeJs 开发出来的一个构建工具，本质上，它是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 构建工具的常规作用： 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合 ...

本文会首先介绍下使用 iView 组件前需要了解的简单的样式问题，之后会根据实际工作中的使用场景介绍下 iView 的使用。这里的列举的是在后台系统中经常用到的组件或者组件的组合（示例采用 CDN 引入的方式）。 CSS 基础知识CSS 盒模型CSS 盒模型本质上是一个盒子，盒子包裹着 DOM 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin。 1234567891011<style> .box { width: 100px; height: 100px; padding: 20px; border: 10px solid lightblue; margin: 30px; background: lightgray; }</style><div class="box"></div> 在浏览器中，我们可以通过下面方式插件 DO ...

iView 是什么 iView 是基于 Vue 的 UI 组件库。 iView 其实和 View UI 是同一个组件库，从 4.0.0 的版本改名为 View UI 。 iView 2.x 已停止维护，新项目建议大家使用新版本。 重点： iView 只是一个 UI 组件库，必须依赖 Vue 框架。 本文介绍的是 iView 4.x 的使用方式，不同版本的使用方式大同小异，组件的使用和参数请参照各自版本的官方文档： iView 2.x 版本 最新版本 如何搭建一个 iView 项目iView 项目是什么iView 项目其实就是在 Vue 项目的基础上引入 iView 组件库，利用 iView 组件原有的样式，可以很快搭建视觉风格统一的页面。 因为 iView 必须依赖 Vue， 所以 iView 项目的搭建方式和 Vue 的搭建方式是密不可分的。和 Vue 项目一样，我们可以通过两种方式来搭建 iView 的项目，一种是 CDN 引入的方式，一种是 npm 安装的方式。 CDN 引入方式使用 CDN 引入的方式时，直接在 html 页面中引入 css 和 js 文件就 ...

周期性更新 生效条件：用户七天内使用过的小程序 周期性更新能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性。 使用流程1. 配置数据下载地址登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据周期性更新，点击开启，填写数据下载地址。 配置前： 配置后： 1.每次修改都需要管理员扫码 2.只能配置一个 3.是一个整个带参数的请求地址 2. 设置 TOKEN第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性。 示例： 1234567App({ onLaunch() { wx.setBackgroundFetchToken({ token: 'xxx' }) }}) 3. 微信客户端定期拉取数据微信客户端会在一定的网 ...

React component code smells一、多个 porps 传递到单个组件表明该组件应该拆分；遇到或者想在这个列表再添加一个组件时 1、该组件能做多少事？要确认是否可以将组件拆分为多个较小的组件 2、可否合并？compose components 组成组件，而不只处理一个组件内的所有逻辑 12345678<ApplicationForm user={userData} organization={organizationData} categories={categoriesData} locations={locationsData} onSubmit={handleSubmit} onCancel={handleCancel}/> 处理后： 123456<ApplicationForm onSubmit={handleSubmit} onCancel={handleCancel} ...

对于初入职场的我们，最重要的就是学习如何写出高质量的 js 代码。学习的途径也很简单，多看，多写，多总结： 多看：看大佬们写的代码，学习他们智慧的结晶多写：纸上得来终觉浅，不停的敲代码才能发现自己的问题，提升自己多总结：我一直以来奉行的学习方法有两种——问题驱动学习和输出倒闭输入。只有自己认真的思考总结过，才能发现很多问题的细节，真正的去掌握知识。 0 什么是代码健壮性？在学校看论文时就经常遇到，在公司学习时经常听到其他人提到代码的健壮性，所以每每听到周会大佬们讨论时都会莫名觉厉。健壮性，顾名思义，健康强壮。拿这个词来形容人，就是说明这个人身体健康强壮，在遇到小感冒，跌打损伤，不会让他卧床不起。拿这个词来形容代码，道理也一样，在代码遇到各种个样的异常问题，如读取一个值不是预期类型、查询不到指定的路径等，代码不会轻易的挂掉，而是有它自己的一套措施。 1 函数一、函数默认参数妙用场景：假设我们又如下的初始化工作需要进行，在代码的最开始我们需要对config对象进行初始化工作function initConfig(config) { config.map((item) => { ...

首先来看一道常见的面试题 12345678910111213141516171819202122232425262728293031323334353637383940async 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'); reso ...