管家 的博客

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

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

今天运行打包代码的时候，瞄了一下我们的打包速度，一看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(); /.

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

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

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

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

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

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

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

这个项目是对 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-...

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

在线demo, 点击底部takepicture即可生成这里涉及到2个问题1、不能直接双击打开html文件，要用web服务的方式请求。意思是，你的网页请求必须是http的请求。这个可以用python一条命令起一个本地的web服务：python2：python -m SimpleHTTPServer 8000python3python3 -m http.server...

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

从URL加载一个js文件，并运行，获取其计算结果，高级用法请移步http://nodejs.cn/api/vm.html此处主要是一个怎么从远程把代码拉下来的过程。所以只是打印了返回值 let locale = getLocale().toLowerCase(); const localeSrc = 'https://www.trip.com/m/i18n/100012631/...

/*** 对象扁平化* 说明：请实现 flatten(input) 函数，input 为一个 javascript 对象（Object 或者 Array），返回值为扁平化后的结果。* var input = {* a: 1,* b: [ 1, 2, { c: true }, [ 3 ] ],* d: { e: 2, f: 3 },* ...

1、es5模块化编程是分为 require和amd两部分2、主要知识点：立即执行函数 保存私有变量 放大模式 传入对象，添加属性，再抛出来 宽放大模式 比放大模式多了默认值｛｝ 全局变量 全局变量也必须输入 3、为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。...

浏览器内核、页面渲染引擎、解释引擎、模板引擎其实都是同一个东西：网页浏览器的排版引擎（Layout Engine或Rendering Engine）1、Internet Explorer1994年夏天，为了和当时主流的浏览器 Netscape Navigator抗衡，微软开始做自己的浏览器，从Spyglass购买到源码，并在此基础上开发了ie渲染引擎 Trident，js...

简单使用canvas 绘制总量图，饼图，折线图

给公司开发软件的时候，给用户编辑的对话框是自己开发的富文本插件，会自动给文本加上一些简单的p、div标签但是在用户粘贴文章进来的时候，就有问题了，因为复制网页上的东西，大部分都是带有格式的。而且各种恶心的自定义标签，加大了难度。话不多说，代码是生产环境的代码，应该是靠谱的，有啥问题，可以交流，重点是后端的python代码。1、前端获取粘贴之后的数据（因为环境不一样，安卓获取不到

因为是使用的webview开发，所以后端的代码要适应电脑，ios，安卓三个端。在搞ios的时候，发现中文死活不出来，研究了一下，Autocomplete 是绑定的键盘的keydown事件。ios的键盘是可以相应这个事件的。但是上面选词栏那一行是不支持的。所以最后我修改了源码的绑定事件那一块，绑定input控件，改成了如下代码：$input.bind(("input") + ".autocomplete", function(event)

.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

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：(1) 看是否能把body和html的height: 100%去除掉。(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body {ov...

//把光标移到末尾 msgTextLastPos(obj) { // 解决浏览器的兼容问题，做如下条件判断 if (window.getSelection) { obj.focus(); let range = window.getSelection(); range.selectAllChildren(obj); range...

因为工作需要，我们的直播平台需要全屏模式，这个全屏不是video的全屏，是自己定制的全屏。那么这里就遇到了一系列的问题，因为F11 和ESC都可以取消全屏，而F11还可以进入全屏。但是此全屏和我们需要的全屏还不是同一种。反正很麻烦。 下面上代码，重点是实现的思路，而并不是代码，后面会讲思路全屏检测函数，是否支持全屏export function isFullScreen() ...

原生js和canvas实现的 柱状图、饼状图、折线图