- 博客(55)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 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
516
原创 简单的 babel 介绍，一秒入门
@babel/preset-env用来转换高阶 es 语法。但是默认解析语法，默认不解析 api。api 就是高阶 es 里面的一些函数。@babel/polyfill 是用来解析 api 的，其中的配置 useBuildIns 有 entrance、usage，主要用 usage 就好了，这样只引入你工程中用到的新特性。但是每一个被转换的文件都有一些辅助函数，来帮助转义成 低阶语法，这些辅助函数经常重复，我们成为 helps，会增大文件体积。而且可能增加污染全局变量，可能会污染对象原型。@b.
2020-10-30 01:25:36
284
原创 scss 中的 url 路径问题
今天维护老项目的时候，意外发现所有的图片资源都不见了，分析后发现是scss中的 background: url() 找不到位置了，并且展示在浏览器中是 url([Object object]) 这种格式。这个应该就是相对路径，引入图片引起的问题，很简单一个库，就解决了https://github.com/bholloway/resolve-url-loader注意在...
2020-10-28 17:27:56
3620
原创 webpack + create-react-app 打包优化
今天运行打包代码的时候，瞄了一下我们的打包速度，一看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(); /.
2020-10-28 00:56:43
1514
原创 python3 文件夹下所有文件 字符串替换
替换文件夹下所有文件中的字符串。#coding=utf8from os import chdir, getcwd, listdir, pathimport codecsimport redef excuepath(folder_path, blacklist, extends): chdir(folder_path) cwd=getcwd() dirs=listdir(cwd) for tmp in dirs: # 排除blacklist.
2020-10-27 14:32:48
611
原创 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
1928
原创 css模块化：scss基础概念
变量声明$highlight-color: #F90;$basic-border: 1px solid black;注意{} 内的声明只能在{}内的声明后用默认变量值：通常来说，同一个变量，写在后面的会覆盖前面的值，如果想改变这种，只是给个默认值$fancybox-width: 400px !default;.fancybox {width: $fancybox-width;}混合器（@mixin @include）@mixin r...
2020-09-28 00:55:49
388
原创 常用的 html 语义化标签，以及作用
为什么要语义化代码结构:使页面没有css的情况下，也能够呈现出很好的内容结构 （主要靠title标签和meta中的keywords、description）有利于SEO 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。 便于团队开发和维护:语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。 方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。<he...
2020-09-27 20:11:26
1205
原创 正则4：正则表达式回溯原理
回溯主要是针对量词的。因为量词有不确定性，而默认匹配是贪婪的，所以，会匹配最大个数，这时候量词匹配完了，继续往后匹配，发现匹配不到，再把匹配的字符一个个的吐出来重新匹配，直到可以匹配到最大两次为止。这个过程就是回溯回溯其实就是深度优先搜索算法1、如果有多个贪婪量词，那么优先匹配最先的贪婪量词2、贪婪量词后面给？使用非贪婪模式，也就是惰性模式。但是惰性模式也可能发生回溯，因为尽管是尽量匹配少的量词，但是也需要保证能匹配上...
2020-09-27 13:41:31
317
原创 正则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
1021
原创 正则2： 正则表达式位置详解
正则中共有 6 个位置标示符号^、$、\b、\B、(?=p)、(?!p)注意，位置符号指的是字符之间的空隙，可以理解为”" ^ 标示开头 $ 标示结尾 \b 指的是单词边界 具体就是 \w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置 "[JS] Lesson_01.mp4".replace(/\b/...
2020-09-27 13:39:25
485
原创 正则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
195
1
原创 html2canvas + jsPDF 解决内容截断问题
在使用html2canvas + jsPDF 把网页转为 pdf 的时候，经常遇到文字图片被截断的情况，很常见。在处理这个问题之前，我也搜索了一些，很多人遇到，也没啥好的解决方案。我最终采用的方式，也是普通的方式，说白了，就是在接缝处插入空白 div，高度给了 10。然后循环处理，直到所有接缝处，都是插入的空白 div 未知。空白 div 给个特殊的 class 用来标识。具体代码如下： // 页面高度 A4纸高度： 1122px // 相对高度 referenceTop.
2020-09-09 14:06:32
5743
4
原创 react native 浮层 键盘遮挡
主要还是使用 KeyboardAvoidingView注意，1、安卓不需要处理，系统自动会把页面整体往上推。需要处理的就是 ios。2、KeyboardAvoidingView 包裹的元素记得不要使用绝对定位 <View style={styles.box}> {isAndroid ? ( contentComponent ) : (
2020-09-08 23:28:05
598
原创 H5 input 浮层 键盘遮挡
这个问题，其实在前端是个老生常谈的问题。在生产环境中，我们是嵌入到 app 中使用的 H5 降级页面，在去哪儿和携程的 app 中的 webview 容器，表现不一致携程的 app 表现比较正常，和一般浏览器表现类似，但是去哪儿，有点奇葩。键盘弹起来之后，页面高度依旧不变，着实费解。最终的解决方案其实是在携程中使用scrollIntoViewIfNeeded在比较奇葩的去哪儿使用监听 focus，在底部加 padding 的做法。之所以不使用定位，是因为，键盘高度我不确定。所以我给 ..
2020-09-08 23:06:37
536
原创 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
1858
原创 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
605
原创 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
1875
原创 jsdoc + koroFileHeader 代码注释规范和插件使用介绍
安装插件+配置1、安装vscode插件koroFileHeader2、点击vscode左下角小齿轮=> settings=>搜索fileheader=>Edit in settings.json3、在文件中添加如下配置："fileheader.customMade":{//在文件头部插入注释【快捷键ctrl+alt+i】【建议一个文件不超过...
2020-04-14 23:21:08
911
原创 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
783
原创 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
8022
原创 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
2809
原创 从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
1384
原创 实现 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
2456
1
原创 浏览器文件加载顺序
css 下载的时候是并行的， 1、css加载不会阻塞DOM树的解析 2、css加载会阻塞DOM树的渲染 3、css加载会阻塞后面js语句的执行 js 浏览器对于Javascript的运行有两大特性： 1、载入后马上执行 2、一定是按照书写的顺序执行 一、如果是外部js脚本 1、下...
2019-11-07 18:13:07
813
原创 javascript 模块化编程
1、es5模块化编程是分为 require和amd两部分2、主要知识点：立即执行函数 保存私有变量 放大模式 传入对象，添加属性，再抛出来 宽放大模式 比放大模式多了默认值｛｝ 全局变量 全局变量也必须输入 3、为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。...
2019-11-07 18:11:56
79
原创 各大浏览器引擎的前世今生
浏览器内核、页面渲染引擎、解释引擎、模板引擎其实都是同一个东西：网页浏览器的排版引擎（Layout Engine或Rendering Engine）1、Internet Explorer1994年夏天，为了和当时主流的浏览器 Netscape Navigator抗衡，微软开始做自己的浏览器，从Spyglass购买到源码，并在此基础上开发了ie渲染引擎 Trident，js...
2019-11-06 14:32:49
727
原创 python从多级字典中，获取给定key对应的值，获取给定key所在的路径
python从多级字典中，获取给定key对应的值，获取给定key所在的路径其实就是个多叉树遍历，并获取相应值的路径 # coding=utf8'''date: 2019/01/30powered by guanrongjiaall rights reservedability:this demo show you how to scan a dict to find...
2019-01-30 13:53:58
5247
原创 gansim教程2，副产品：简单的文本相似度分析
本文做的事情是1、帮助大家理解一下gansim的基础概念，比较通俗易懂2、这里的其实做了简单的文章比对工具，需要把比对的文件也加入语料库，这样数据比较准确3、这里只是个demo，真正实现这个功能，还需要，动态加载和主动学习，保扩效率等4、如果需要看其他的文本比对方法，或者需要下载完整的demo以及资源文件， 请关注我的git项目：https://github.com/guanrongji...
2018-12-17 00:17:44
299
原创 gansim教程，副产品：gansim单词权重实例
原文链接：https://github.com/guanrongjia/chinese-article-fast-compare如果你喜欢我的作品，请在git上为我点星，帮助更多人看到我的作品#coding=utf8‘’’gemsim是一个免费机器学习的python库，设计目的是，从文档中有效地自动抽取语义主题。gensim可以处理原始的，非结构化的文本（”plain text”）具体...
2018-12-16 01:42:59
330
原创 如何优雅的全屏
因为工作需要，我们的直播平台需要全屏模式，这个全屏不是video的全屏，是自己定制的全屏。那么这里就遇到了一系列的问题，因为F11 和ESC都可以取消全屏，而F11还可以进入全屏。但是此全屏和我们需要的全屏还不是同一种。反正很麻烦。 下面上代码，重点是实现的思路，而并不是代码，后面会讲思路全屏检测函数，是否支持全屏export function isFullScreen() ...
2018-07-26 14:41:27
200
原创 富文本中 移动光标到末尾
//把光标移到末尾 msgTextLastPos(obj) { // 解决浏览器的兼容问题，做如下条件判断 if (window.getSelection) { obj.focus(); let range = window.getSelection(); range.selectAllChildren(obj); range...
2018-07-13 16:18:16
3708
3
转载 IOS手机端页面在项目中遇到的一些问题及解决办法
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：(1) 看是否能把body和html的height: 100%去除掉。(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body {ov...
2018-06-07 12:41:53
4717
原创 仿照iPhone开关样式
.mwui-switch-btn:hover span{background:#ffffff;}.mwui-switch-btn{ display:block; padding:1px; overflow:hidden; margin-bottom:5px; border-radius:18px; cursor: pointer;}.btn_on{width:51px;height:2
2018-02-01 11:20:45
1108
原创 python 抓取pdf第一页为图片 (python get first page of pdf as image)
python 抓取pdf第一页为图片 (python get first page of pdf as image)
2017-09-14 12:56:04
2418
4
原创 安卓学习-（view 方法汇总）
View类是所有可视化控件的基类，主要提供了控件绘制和事务处理的方法。创建用户界面所使用的控件都继承自View，如EditText、TextView、Button等。View及其子类的相关属性，既可以在布局XML文件中进行相关设置，也可以通过成员方法在Java代码中动态设置。View类常用的属性及对应的方法属性名称对应方法描述
2017-09-02 16:33:22
445
原创 安卓学习-（数据存储（ORM框架 LitePal））
1、配置LitePaldependencies {compile fileTree(dir:'libs',include: ['*.jar'])testCompile'junit:junit:4.12'compile'com.android.support:appcompat-v7:24.2.1'compile'org.litepal.android:cor
2017-09-02 15:24:44
331
原创 安卓学习-（数据存储（数据库，原生sql，和原生安卓操作））
使用原生sql操作数据库新增数据：db.execSQL("insert into Book (name, author, pages, prices) values (?,?,?,?)", new String[] {"love", "guanjia", "520", "25.5"});更新数据：db.execSQL("update Book set price = ? where nam
2017-09-02 15:22:13
539
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人