图片的原始尺寸，就是图片原始的拍摄或者生成出来的大小naturalWidth,原始宽度naturalHeight,原始高度样式尺寸img标签上的width，height缩放倍率，受浏览器缩放影响大小，跟操作系统设置也有关系，反正最后就是个值window.devicePixelRatio清晰度高满足如下公式原始尺寸 = 样式尺寸 * 缩放倍率画一个canvas来试试 {代码....

pwa离线应用缓存使用APP在实际应用中很多会用到重要插件：workbox-webpack-plugin下载安装在webpack.config.js文件配置引入使用plugins中添加 {代码...} 使用，在入口文件引入service-worker {代码...} service-worker需要运行在服务器端serve插件serve -s (目录)暴露目录文件，并创建一个服务，访问项目

1、由 React 控制的事件处理程序，以及生命周期函数调用 setState 不会同步更新 state 。2、React 控制之外的事件中调用 setState 是同步更新的。比如原生 js 绑定的事件，setTimeout/setInterval 等。

{代码...} Promise > MutationObserver > setImmediate > setTimeoutMutationObserver能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等 {代码...} 熟悉任务执行机制就能了解

理解：错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式：getDerivedStateFromError 配合 componentDidCatch {代码...} 示例： {代码...}

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

react中模拟vue的slot插槽：使用children props: 通过组件标签体传入结构使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

最近从vue使用转到react使用，之前研究过vue的diff算法，闲来看了看react的diff源码，写一点自己的见解1.vue的diff算法diff算法发生在虚拟dom上判断是否同一个节点：selector和key都要一样diff规则：只比较同层的节点，不同层不做比较。删除原节点，并且新建插入更新节点（实际开发中很少遇到）新旧节点是同层节点，但不...

项目技术栈：umi3+react17+antd pro5项目需要打印功能，需要能自定义打印模版，极短的时间找到了一个叫hiprint的插件官方地址：hiprint插件该插件基于Jquery，所以在react项目中需要引入jquery，好难受哇先从官网下载对应的文件，得到hiprint文件包。官方示例看源代码可以用鼠标右键->查看源码踩坑从引入插件开始，首...

因为useState不能像setState那样进行合并更新，当使用useState第二个参数进行数据更新的时候，必须传入一个完整的结构，而不仅仅只是改变的那一部分。

可以看到新版的生命周期中 componentWillMount, componentWillReceiveProps, componentWillUpdate 三个生命周期被干掉了，其实还没被干掉，使用时会报警告：（componentWillReceiveProps也一样的警告）

vue3.x已经发布了这么久，相关的生态也慢慢起来了，包括vite这个新的打包工具，在vue3.0学习过程中有一些实用性的api对比，希望能在开发中给大家做个示范，准确的使用对应的api去完成我们的项目开发

前端小伙伴儿应该都听过reduce这个数组的方法，总结一下我在开发过程中遇到的reduce的一些好玩儿的用法老规矩，上MDN：reduce-MDN简单介绍一下一些重要的点定义：reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。示例： {代码...} reducer 函数接收4个参数: {代...

代码的复杂度是评估一个项目的重要标准之一。较低的复杂度既能减少项目的维护成本，又能避免一些不可控问题的出现。然而在日常的开发中却没有一个明确的标准去衡量代码结构的复杂程度，大家只能凭着经验去评估代码结构的复杂程度，比如，代码的程度、结构分支的多寡等等。当前代码的复杂度到底是个什么水平？什么时候就...

【vue.js】bin/vue.js利用commander来定义命令选项create，将create命令匹配到create方法(lib/create.js)，执行该方法;

谷歌浏览器内嵌了性能测试工具Lighthouse，F12打开能看到，使用参考： Lighthouse工具前端性能监控，设置监控超时的任务，回传到服务器完整代码如下 {代码...} 为了监测工具不占用主线程的 JavaScript 解析时间。因此，最好在页面触发 onload 事件后，采用异步加载的方式： {代码...}

商城项目中，有鼠标移入图片放大的功能，研究一下实现 {代码...} 具体效果复制下去打开看看

在代码精简优化过程中，我们总会想着要去简练我们的代码，尽量做到用最少的代码完成最好的功能下面介绍4个JS开发优化的高级运算符使用1、(param ? res1 : res2)三元运算符三元运算符，又叫条件运算符接受三个运算数：条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式基本示例： {代码...} 三元运算符用于变...

一、引入并创建nuxt项目确认已经安装 npx ( npx 依附于 npm 5.2.0 安装引入) {代码...} 或者在 npm v6.1版本后 可以这样创建: {代码...} 或者用： yarn: {代码...} 二、引入axios库1、使用nuxt自带模块 {代码...} 1) 、在 nuxt.config.js 中引入 {代码...} 2) 、页面内使用 $axios 获取数据，并用 $config 获取 API 接口...

在vuecli中构建使用vue-awesome-swiper组件没有任何问题，但是加上ssr就一直会报错，原生组件的切换上一个下一个的按钮不显示，即便是显示了点击也不会生效，后面排查也不知道是不是电脑硬件的问题，我们使用要求切换按钮需要自定义（包括按钮行为）

秉持低耦合的观念，拆分各个功能函数，做到清晰控制，数据单向流转定义中间件对象 {代码...} 使用 {代码...} 配合API接口数据返回后的操作函数 {代码...} 通过中间件以此注册 {代码...}

这样在页面中只要调用那个定义的方法，然后传参(参数可以用对象的形式传过去，自己改一下就行了)过去就能实现弹窗，不用再每个页面去引入组件，data定义一个变量去保存message，components注册组件，再调用加载绑定

大型项目中，不管首页需不需要那么多变量，vuex都会一次性打包进去，vuex会很大，因为都是一次性加载的需求：按需异步加载vuex解决方案如下第一步： 把.vue文件对应的vuex拆分出来，第二步：在xxx.vue文件里面添加 name 和 isNeedVuex 属性注意：为了保证引入store下的文件名字跟组件命名一样，请自行选择合理的命名方式...

这是一篇教程，从创建项目到改造项目vue-cli创建一个项目在放你做demo的地方，创建一个项目 {代码...} 经过漫长的等待，下载好文件开始我们的改造之路文件目录进入vue-ssr文件夹，使用命令 {代码...} 把vue-router装上先安装几个依赖插件 {代码...} 修改package.json文件 {代码...} 根目录下创建vue.config.js {代码...}...

Web 开发者们一直以来想在 Web 中使用音频和视频，但早些时候，传统的 Web 技术不能够在 Web 中嵌入音频和视频，所以一些像 Flash、Silverlight 的专利技术在处理这些内容上变得很受欢迎。

平常在写业务的时候常常会用的到的是 GET, POST请求去请求接口，GET 相关的接口会比较容易基本不会出错，而对于 POST中常用的 表单提交，JSON提交也比较容易，但是对于文件上传呢？大家可能对这个步骤会比较害怕，因为可能大家对它并不是怎么熟悉，而浏览器Network对它也没有详细的进行记录，因此它成为了我们心中的一根...

第一步是结合项目背景，调研比较优化的解决方案。文件上传失败是老生常谈的问题，常用方案是将一个大文件切片成多个小文件，并行请求接口进行上传，所有请求得到响应后，在服务器端合并所有的分片文件。当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分，减少用户的等待时间，缓解服务器压力。这就是分...

下面列举的图片处理库拥有模糊、压缩、裁剪、旋转、合成、比对等技能。能满足我们基本使用图片的操作。你将学习到：如何区分图片的类型（非文件后缀名）；如何获取图片的尺寸（非右键查看图片信息）；如何预览本地图片（非图片阅读器）；如何实现图片压缩（非图片压缩工具）；如何操作位图像素数据（非 PS 等图片处理软...

{代码...} async/await基于generator的语法糖：async函数返回一个promise对象 {代码...}

2、 运行 npm install（一般还是用cnpm i）3、 在 resume/ 目录中自定义编辑简历，诸如将图片换成个人证件照4、 用npm run dev进行预览，在浏览器中打开（http:// localhost:8080/home）。该页面将显示一些简历预览。5、 用 npm run export 导出简历，所有简历将导出至/pdf文件内。