javascript
gaunjia
前端开发专家
python
wechat:guanroonjia
展开
-
mac 打开非安全模式的 chrome,方便进行跨域调试
mac 打开非安全模式的 chrome,方便进行跨域调试open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/guanrongjia/MyChromeDevUserData/注意,标红的是你自己的用户名原创 2020-09-29 13:32:14 · 1931 阅读 · 0 评论 -
正则3:正则表达式中的括号
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, `$..原创 2020-09-27 13:40:11 · 1023 阅读 · 0 评论 -
正则1:基础概念
1、横向匹配,量词{m, n} 前一个字符重复的次数 {m} = {m, m} 出现 m 次 {m,} 出现大于等于 m 次 ? {0,1} + {1,} * {0} 2、纵向匹配,范围 [abc], [a-c], [1,23],[1-3] ...原创 2020-09-27 13:38:46 · 197 阅读 · 1 评论 -
html2canvas + jsPDF 解决内容截断问题
在使用html2canvas + jsPDF 把网页转为 pdf 的时候,经常遇到文字图片被截断的情况,很常见。在处理这个问题之前,我也搜索了一些,很多人遇到,也没啥好的解决方案。我最终采用的方式,也是普通的方式,说白了,就是在接缝处插入空白 div,高度给了 10。然后循环处理,直到所有接缝处,都是插入的空白 div 未知。空白 div 给个特殊的 class 用来标识。具体代码如下: // 页面高度 A4纸高度: 1122px // 相对高度 referenceTop.原创 2020-09-09 14:06:32 · 5765 阅读 · 4 评论 -
react native 浮层 键盘遮挡
主要还是使用 KeyboardAvoidingView注意,1、安卓不需要处理,系统自动会把页面整体往上推。需要处理的就是 ios。2、KeyboardAvoidingView 包裹的元素记得不要使用绝对定位 <View style={styles.box}> {isAndroid ? ( contentComponent ) : (原创 2020-09-08 23:28:05 · 599 阅读 · 0 评论 -
H5 input 浮层 键盘遮挡
这个问题,其实在前端是个老生常谈的问题。在生产环境中,我们是嵌入到 app 中使用的 H5 降级页面,在去哪儿和携程的 app 中的 webview 容器,表现不一致携程的 app 表现比较正常,和一般浏览器表现类似,但是去哪儿,有点奇葩。键盘弹起来之后,页面高度依旧不变,着实费解。最终的解决方案其实是在携程中使用scrollIntoViewIfNeeded在比较奇葩的去哪儿使用监听 focus,在底部加 padding 的做法。之所以不使用定位,是因为,键盘高度我不确定。所以我给 ..原创 2020-09-08 23:06:37 · 541 阅读 · 0 评论 -
async await 的异常捕获
今天听一个同事答辩,问到async await 的异常捕获 问题,竟然答不上来,我给他写了个 demo 来演示:直接在 async 修饰的函数中,是可以直接使用 try / catch 的const test = flag => new Promise((resolve, reject) => { if (flag) { return resolve(flag) } else { return reject() }});.原创 2020-09-08 22:44:57 · 1859 阅读 · 0 评论 -
ant design upload 组件的扩展
这个项目是对 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-...原创 2020-09-08 19:59:26 · 606 阅读 · 0 评论 -
react + html2canvas + html转pdf
首先自行安装一下 html2canvas & jspdfimport html2canvas from 'html2canvas';import jsPDF from 'jspdf';export default ( target, pdfName = 'guanrongjia', successCallback = () => {}, errorC...原创 2020-04-14 23:51:19 · 1877 阅读 · 0 评论 -
and design pro 的 model 不生效,找不到 model
一般来说,发出一个 action,在 redux浏览器工具中,会有 action,action@@start,action@@end 三个记录。如果只出现 action 一条记录,不要怀疑,没有任何疑问,就是你的 model 不对。今天在使用and design pro的时候,自定义了一个页面,然后出现了发出去的 action 找不到对应的 reducer处理的情况。在...原创 2020-03-31 00:16:22 · 786 阅读 · 0 评论 -
Access-Control-Allow-Headers 跨域
使用 ant design pro 的时候,发现 umi-request 没有暴露token 的接口自己手动使用umi-request 提供的拦截器,自己在 header 中添加了拦截器,遇到了 Access-Control-Allow-Headers 跨域问题经过排查发现问题是,Authorization 写成了 token,手误害死人啊。。。正确的写法:header...原创 2020-03-29 15:29:57 · 8025 阅读 · 0 评论 -
jspdf + html2canvas 图片空白 & demo
在线demo, 点击底部takepicture即可生成这里涉及到2个问题1、不能直接双击打开html文件,要用web服务的方式请求。意思是,你的网页请求必须是http的请求。这个可以用python一条命令起一个本地的web服务:python2:python -m SimpleHTTPServer 8000python3python3 -m http.server...原创 2020-03-27 10:49:58 · 2817 阅读 · 0 评论 -
jsdoc + koroFileHeader 代码注释规范和插件使用介绍
安装插件+配置1、安装vscode插件koroFileHeader2、点击vscode左下角小齿轮=> settings=>搜索fileheader=>Edit in settings.json3、在文件中添加如下配置:"fileheader.customMade":{//在文件头部插入注释【快捷键ctrl+alt+i】【建议一个文件不超过...原创 2020-04-14 23:21:08 · 913 阅读 · 0 评论 -
从URL加载一个js文件,并运行 ( react require remote js )
从URL加载一个js文件,并运行,获取其计算结果,高级用法请移步http://nodejs.cn/api/vm.html此处主要是一个怎么从远程把代码拉下来的过程。所以只是打印了返回值 let locale = getLocale().toLowerCase(); const localeSrc = 'https://www.trip.com/m/i18n/100012631/...原创 2020-02-26 12:22:43 · 1387 阅读 · 0 评论 -
storybook 集成 dva redux
开发中使用到storybook作为组件仓库,然后dva是我们的基础架构。想使用storybook测试、开发组件。这时候发现无法集成dva进来。研究后方案如下。首先是storybook的一个节点:common.stories.jsimport React from 'react';import { storiesOf } from '@storybook/react';impo...原创 2020-01-09 12:54:40 · 519 阅读 · 0 评论 -
实现 flatten 扁平化对象和数组
/*** 对象扁平化* 说明:请实现 flatten(input) 函数,input 为一个 javascript 对象(Object 或者 Array),返回值为扁平化后的结果。* var input = {* a: 1,* b: [ 1, 2, { c: true }, [ 3 ] ],* d: { e: 2, f: 3 },* ...原创 2019-12-26 15:51:58 · 2460 阅读 · 1 评论 -
浏览器文件加载顺序
css 下载的时候是并行的, 1、css加载不会阻塞DOM树的解析 2、css加载会阻塞DOM树的渲染 3、css加载会阻塞后面js语句的执行 js 浏览器对于Javascript的运行有两大特性: 1、载入后马上执行 2、一定是按照书写的顺序执行 一、如果是外部js脚本 1、下...原创 2019-11-07 18:13:07 · 816 阅读 · 0 评论 -
javascript 模块化编程
1、es5模块化编程是分为 require和amd两部分2、主要知识点:立即执行函数 保存私有变量 放大模式 传入对象,添加属性,再抛出来 宽放大模式 比放大模式多了默认值{} 全局变量 全局变量也必须输入 3、为什么模块很重要?因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。...原创 2019-11-07 18:11:56 · 80 阅读 · 0 评论