简单的 babel 介绍，一秒入门

u013302113 — Fri, 30 Oct 2020 01:25:36 +0800

@babel/preset-env用来转换高阶 es 语法。但是默认解析语法，默认不解析 api。api 就是高阶 es 里面的一些函数。 @babel/polyfill 是用来解析 api 的，其中的配置 useBuildIns 有 entrance、usage，主要用 usage 就好了，这样只引入你工程中用到的新特性。但是每一个被转换的文件都有一些辅助函数，来帮助转义成低阶语法，这些辅助函数经常重复，我们成为 helps，会增大文件体积。而且可能增加污染全局变量，可能会污染对象原型。 @b.

scss 中的 url 路径问题

u013302113 — Wed, 28 Oct 2020 17:27:56 +0800

今天维护老项目的时候，意外发现所有的图片资源都不见了，分析后发现是scss中的 background: url() 找不到位置了，并且展示在浏览器中是 url([Object object]) 这种格式。这个应该就是相对路径，引入图片引起的问题，很简单一个库，就解决了 https://github.com/bholloway/resolve-url-loader 注意在 ...

webpack + create-react-app 打包优化

u013302113 — Wed, 28 Oct 2020 00:56:43 +0800

今天运行打包代码的时候，瞄了一下我们的打包速度，一看28.38 s 感觉有点长了，于是想优化一下。 1、首先使用speed-measure-webpack-plugin 这个神奇，包裹一下我们的 webpack 配置，具体在create-react-app是build.js const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const smp = new SpeedMeasurePlugin(); /.

python3 文件夹下所有文件字符串替换

u013302113 — Tue, 27 Oct 2020 14:32:48 +0800

替换文件夹下所有文件中的字符串。 #coding=utf8 from os import chdir, getcwd, listdir, path import codecs import re def excuepath(folder_path, blacklist, extends): chdir(folder_path) cwd=getcwd() dirs=listdir(cwd) for tmp in dirs: # 排除blacklist.

mac 打开非安全模式的 chrome，方便进行跨域调试

u013302113 — Tue, 29 Sep 2020 13:32:14 +0800

mac 打开非安全模式的 chrome，方便进行跨域调试 open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/guanrongjia/MyChromeDevUserData/ 注意，标红的是你自己的用户名

css模块化：scss基础概念

u013302113 — Mon, 28 Sep 2020 00:55:49 +0800

变量声明 $highlight-color: #F90; $basic-border: 1px solid black; 注意{} 内的声明只能在{}内的声明后用默认变量值：通常来说，同一个变量，写在后面的会覆盖前面的值，如果想改变这种，只是给个默认值 $fancybox-width: 400px !default; .fancybox { width: $fancybox-width; } 混合器（@mixin @include） @mixin r...

常用的 html 语义化标签，以及作用

u013302113 — Sun, 27 Sep 2020 20:11:26 +0800

为什么要语义化代码结构:使页面没有css的情况下，也能够呈现出很好的内容结构（主要靠title标签和meta中的keywords、description）有利于SEO 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。便于团队开发和维护:语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

正则4：正则表达式回溯原理

u013302113 — Sun, 27 Sep 2020 13:41:31 +0800

回溯主要是针对量词的。因为量词有不确定性，而默认匹配是贪婪的，所以，会匹配最大个数，这时候量词匹配完了，继续往后匹配，发现匹配不到，再把匹配的字符一个个的吐出来重新匹配，直到可以匹配到最大两次为止。这个过程就是回溯回溯其实就是深度优先搜索算法 1、如果有多个贪婪量词，那么优先匹配最先的贪婪量词 2、贪婪量词后面给？使用非贪婪模式，也就是惰性模式。但是惰性模式也可能发生回溯，因为尽管是尽量匹配少的量词，但是也需要保证能匹配上 ...

正则3：正则表达式中的括号

u013302113 — Sun, 27 Sep 2020 13:40:11 +0800

1、分组 var regex = /(ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // => ["abab", "ab", "ababab"] 1.1 数据分组提取替换 var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; console.log(string.replace(regex, `$..

正则2：正则表达式位置详解

u013302113 — Sun, 27 Sep 2020 13:39:25 +0800

正则中共有 6 个位置标示符号 ^、$、\b、\B、(?=p)、(?!p) 注意，位置符号指的是字符之间的空隙，可以理解为”" ^ 标示开头 $ 标示结尾 \b 指的是单词边界具体就是 \w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置 "[JS] Lesson_01.mp4".replace(/\b/...

正则1：基础概念

u013302113 — Sun, 27 Sep 2020 13:38:46 +0800

1、横向匹配，量词 {m, n} 前一个字符重复的次数 {m} = {m, m} 出现 m 次 {m,} 出现大于等于 m 次 ? {0,1} + {1,} * {0} 2、纵向匹配，范围 [abc], [a-c], [1,23],[1-3] ...

html2canvas + jsPDF 解决内容截断问题

u013302113 — Wed, 09 Sep 2020 14:06:32 +0800

在使用html2canvas + jsPDF 把网页转为 pdf 的时候，经常遇到文字图片被截断的情况，很常见。在处理这个问题之前，我也搜索了一些，很多人遇到，也没啥好的解决方案。我最终采用的方式，也是普通的方式，说白了，就是在接缝处插入空白 div，高度给了 10。然后循环处理，直到所有接缝处，都是插入的空白 div 未知。空白 div 给个特殊的 class 用来标识。具体代码如下： // 页面高度 A4纸高度： 1122px // 相对高度 referenceTop.

react native 浮层键盘遮挡

u013302113 — Tue, 08 Sep 2020 23:28:05 +0800

主要还是使用 KeyboardAvoidingView 注意， 1、安卓不需要处理，系统自动会把页面整体往上推。需要处理的就是 ios。 2、KeyboardAvoidingView 包裹的元素记得不要使用绝对定位 {isAndroid ? ( contentComponent ) : (

H5 input 浮层键盘遮挡

u013302113 — Tue, 08 Sep 2020 23:06:37 +0800

这个问题，其实在前端是个老生常谈的问题。在生产环境中，我们是嵌入到 app 中使用的 H5 降级页面，在去哪儿和携程的 app 中的 webview 容器，表现不一致携程的 app 表现比较正常，和一般浏览器表现类似，但是去哪儿，有点奇葩。键盘弹起来之后，页面高度依旧不变，着实费解。最终的解决方案其实是在携程中使用scrollIntoViewIfNeeded 在比较奇葩的去哪儿使用监听 focus，在底部加 padding 的做法。之所以不使用定位，是因为，键盘高度我不确定。所以我给 ..

async await 的异常捕获

u013302113 — Tue, 08 Sep 2020 22:44:57 +0800

今天听一个同事答辩，问到async await 的异常捕获问题，竟然答不上来，我给他写了个 demo 来演示：直接在 async 修饰的函数中，是可以直接使用 try / catch 的 const test = flag => new Promise((resolve, reject) => { if (flag) { return resolve(flag) } else { return reject() } });.

ant design upload 组件的扩展

u013302113 — Tue, 08 Sep 2020 19:59:26 +0800

这个项目是对 ant design upload 组件的扩展，专用于 oss 前端直传！支持以下文件的直传，预览，直接下载。 image/*,.pdf,.xls,.xlsx,.ppt,.pptx,.doc,.docx 注意： oss的key_id 和 oss的secret 需要填写自己的信息~ git地址：https://github.com/guanrongjia/ant-design-upload-extend 安装： yarn add ant-design-upload-...

react + html2canvas + html转pdf

u013302113 — Tue, 14 Apr 2020 23:51:19 +0800

首先自行安装一下 html2canvas & jspdf import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; export default ( target, pdfName = 'guanrongjia', successCallback = () => {}, errorC...

jsdoc + koroFileHeader 代码注释规范和插件使用介绍

u013302113 — Tue, 14 Apr 2020 23:21:08 +0800

安装插件+配置 1、安装vscode插件koroFileHeader 2、点击vscode左下角小齿轮=> settings=>搜索fileheader=>Edit in settings.json 3、在文件中添加如下配置： "fileheader.customMade":{//在文件头部插入注释【快捷键ctrl+alt+i】【建议一个文件不超过...

and design pro 的 model 不生效，找不到 model

u013302113 — Tue, 31 Mar 2020 00:16:22 +0800

一般来说，发出一个 action，在 redux浏览器工具中，会有 action，action@@start,action@@end 三个记录。如果只出现 action 一条记录，不要怀疑，没有任何疑问，就是你的 model 不对。今天在使用and design pro的时候，自定义了一个页面，然后出现了发出去的 action 找不到对应的 reducer处理的情况。在...

Access-Control-Allow-Headers 跨域

u013302113 — Sun, 29 Mar 2020 15:29:57 +0800

使用 ant design pro 的时候，发现 umi-request 没有暴露token 的接口自己手动使用umi-request 提供的拦截器，自己在 header 中添加了拦截器，遇到了 Access-Control-Allow-Headers 跨域问题经过排查发现问题是，Authorization 写成了 token，手误害死人啊。。。正确的写法： header...

管家 的博客