风烟

经过研究，原来这个第三方包使用的是commonjs2的规范，commonjs2就是这种module.exports = entry_return形式，而commonjs2是commonjs: exports[‘MyLibrary’] = entry_return这种形式。接下来就是排查下，怎么让ts支持一下这种模块的导入，直接搜索搜不到这类答案，直接导入*发现是有个default属性，无法使用，default上面的也是原始组件，不是想要的导出的方式。然后根据这个就去看第三方包的编译产出是什么形式，

这里顺便说一句，es2015其实就是es6，因为es2015年开始，每年都要更新一个版本，但是之前又不是，2015年这个版本恰好是es6版本，所以既叫es6又叫es2015。并且env还支持babel-polyfill，对于一些新的api，比如promise，浏览器原生不支持，需要去模拟。我们使用新的es6的语法，但是因为浏览器兼容性，所以有了babel工具，把原来浏览器不支持的语法支持上了，一开始是。corejs是JavaScript polyfill的标准依赖库。模块化，只引你想要的。

直接使用canvas生成代码是不行的，生成的图片是透明的。需要使用pixijs本身提供的canvas方法去生成。核心代码const app = new PIXI.Application(config);const stage = app.stage;const renderer = app.renderer;return renderer.plugins.extract.canvas(stage).toDataURL();...

简单实现版本class Promise { callbacks = []; state = 'pending'; value = null; constructor(fn) { fn(this._resolve.bind(this)) } then(onFulfilled) { if (state === 'pending') { this.callbacks.push(onFulfilled);

问题背景有时候我们需要获取一个div的实际宽度，但是里面的是文字，比如文字只占了一半，但是这个div的宽度是100%，这样就没法获取这个div的实际宽度了解决方案使用canvas的这个api去获取CanvasRenderingContext2D.measureText()CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。他就能把被测量文本的实际宽度测量出来。var canvas = do

问题背景我们遍历html所有节点的时候，我们需要找到叶子结点比如这种，下面只有一个文本的时候没有别的节点的时候，这个节点就是我们要找的叶子结点。如何判断举上面的例子的时候我们看a标签他的nodeType为1，并且他也有childNodes节点。和他的父节点的值是一样的，所以没法通过这个来判断。我们观察，a标签的childNodes节点中有nodeType为3的...

问题背景想使用本地模块调试的时候，执行npm link的时候报了下面的错误，使用sudo也不行。报错原因> fsevents@1.2.13 install /Users/sufubo/code/fe-sdk-test/bridge-sdk/node_modules/fsevents> node install.jsgyp ERR! configure errorgyp ERR! stack Error: EACCES: permission denied, mkdir '/User

问题背景第一眼看到这个问题，猜想就是获取宽度的时候元素还未完全渲染。导致拿到的是0.this.rightWidth是0可是我是在mounted里面才去获取宽度，可能是keep-alive有关，导致没有渲染就触发了mounted事件，然后那边就更新了。我需要在后面在拿一次高度设置。一开始想到了用activated取重新设置宽度，但是发现页面会闪一下。也就是说activated是在页面绘制之后才触发的。这个时候已经慢了。我们要在绘制之前就要拿到宽度。或者是渲染的时候立即拿到宽度，重新设置，触发

lodash和underscoreLodash 作为 Underscore 的后继者，除了对 Underscore 现有 API 功能使用上进行扩充外，更是添加了不少令人难忘的 API，在性能上也更为出彩，而且还能根据需要构建自己的子集方法。所以他两推荐用lodashlodash和Ramdavar _ = require("lodash");var R = require("ramda");var companies = [ { name: "tw", since: 1993 }, {

安装jest 模块 "babel-jest": "^21.0.2","jest": "^22.0.4","jest-serializer-vue": "^0.3.0", "vue-jest": "^1.0.2",在项目根目录下面新建tests文件夹里面jest.config.js文件，我配置的内容是这个，因为我跑单测使用node跑，所以testEnvironment为node。module.exports = { verbose: true, testEnviro.

循环展开提升性能的原理：cpu对于顺序执行的语句可以靠预测就能知道，执行。没有问题。但是对于根据条件判断的就不清楚了所以循环展开可以提升程序性能。

核心代码JSON.stringify(XXX_JSON, null, 4)JSON.stringify是可以进行格式化输出内容的。JSON.stringify定义JSON.stringify(value[, replacer [, space]])参数value 将要序列化成 一个 JSON 字符串的值replacer 可选如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最

原因是node版本比较低我这边是node8版本，需要把jest将到26版本以下，或者升级node版本9以上解决方案"jest": "^25.5.4"

BOS上传文件核心代码const config = { credentials: { ak: '', sk: '' }};let bucket = '';let client = new BosClient(config);let key = req.file.originalname;client.putObjectFromFile(bucket, key, req.file.path, { 'Content-Type': req.fil

在mac电脑上的chrome浏览器获取页面scrollTopdocument.documentElement.scrollTop使用这样的写法，无论是chrome还是safari获取到的都是一样的值，并且是有效的不为0.但是在安卓手机上则正好相反document.body.scrollTop这样写才能争取获取到top值。所以正确是兼容性写法是let scrollTop = document.documentElement.scrollTop || document.body.scrollT

在使用mintui这个组件的时候，下拉加载更多的时候，一开始滚动会触发系统默认滚动动画，只有等系统默认动画结束之后，再下来才会触发下拉加载动画。不能直接下拉拉到头直接就触发下拉加载动画禁止系统默认弹皮筋效果 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理...

箭头函数不仅在语法上比传统函数简洁的区别之外，还有很多不一样的地方。他比较适合那些使用匿名函数表达式的地方不能作为构造函数，用new去创建。不然会报错let test = () => ({a: 1});new test();index.html:27 Uncaught TypeError: test is not a constructor at index.html...

bug描述input单选框在iphone6手机系统ios10选择bug。手机在选择的时候竟然可以同时选择多个。代码如下<label class="label" v-for="(item, index) in values" :key="index"> <input class="input-radio" :value="item.sex" ...

Promise对象表示一个异步操作最终是否完成，及其结果值。方法Promise.all(iterable)这个方法返回一个新的promise对象，该promise对象在iterable里面所有promise对象都成功的时候才会触发成功，一旦有一个失败就会返回失败，成功之后会返回一个包含每次promise对象成功的返回值作为数据。顺序和iterable顺序一致。Promise.rece(it...

axios.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 if (err.response.status === 401) { } ...

使用vuex，也适用了splice来改数据，修改了评论的数据，但是视图没有更新。state.tabContainer.splice(index, 1, { info: info });查看dom元素里面数据明明更新了，但是网页没有更新，解决办法在vue中我子组件watch父组件一个值，然后数据更新的时候修改这个值，设置元素宽度强制重排， this.$refs.infoC...

ios输入框的maxlength限制200字符，但是实际可以输入超过200bug，这个but我在vue中改为使用watch检测input值改变，用js判断字符串长度来限制输入长度，解决。 watch: { inputText(value) { this.limitMaxLength(); } }, limitMa...

使用了fastclick之后，在输入框上绑定click事件，然后自动focus就可以了。<textarea class="input-content" @click="focus" :placeholder="placeholderText" v-model="inputText" :maxlength="maxInputTexLength"></textarea&g...

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。可以获取height:100width:100bottom:108left:13right:113top:8这些属性除了width和height都是相对于窗口左上角计算的。由于是当前窗口的属性值，要想获取相对于整个网页的左上角定位值，要给top和left属性加上当前滚动的位置，（...

问题在一开始做实时滚动条顶部滚动对时候然后使用,在tabContainerDom滚动到距离顶部一段距离的时候显示headerFixed<div ref="headerFixed" class="header-fixed" :class="{'show': showFixedBlock}"></div>.header-fixed { opacity: 0;...

在页面中需要加个音频文件进行模仿。在vue项目中，先定义好audio标签<audio :src="guideVoice" ref="guideVoice"></audio>然后设置guideVoice，值之后，监听canplaythrough事件，看是否可以播放，然后控制播放this.$refs.guideVoice.addEventListener("canpl...

vue中export const stopBodyScroll = value => { let body = document.body; if (value) { body.style.position = 'fixed'; body.style.width = '100%'; body.style.height = '1...

https://github.com/lmk123/blog/issues/28

移动端做图片上传功能，大体上要经历以下几个步骤。利用fileReader，读取blob对象或者file对象，将图片转为data uri的形式利用canvas，在页面上新建一个画布，利用canvas提供的api，将图片画入到这个画布中利用canvas.toDataUrl(),进行图片的压缩，得到图片的data url值上传文件步骤一当中，在进行图片压缩的时候，我们要先进性判断文件的大小...

npm run build的时候报错Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)解决方案Had to do...

核心代码使用contenteditable=&quot;true&quot;属性&amp;lt;div data-v-b0c64392=&quot;&quot; contenteditable=&quot;true&quot; spellcheck=&quot;false&quot; placeholder=&quot;输入评论...&quot; c

以前说过闭包就是把函数当作返回值，和把函数当作参数，这两种清况就是闭包，那么为什么要把函数当作返回值呢？先看个例子：function f1(){ var n = 99; } console.log(n); 结果是： n is not defined但是如果写成下面这种形式：function f1(){ v

经过dom层层注释缩小反馈终于找到问题所在。问题经过我在弹起弹窗的时候，设置了popupVisible为true然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法...

(node:82942) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56parseQuery() will be replaced with...

他的思路就是在我们本地mock数据的时候，我们定义json数据规则，然后mockjs根据规则，生成对应的数据，然后使用这个数据，作为你对应的响应进行返回就可以了。读取mock配置文件生成mock数据层const fs = require('fs');const path = require('path');const Mock = require('mockjs')module.exp...

发现是自己引入的node_modules js库，没有进行es6到es5的转换，导致低端机型不支持，{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')], options: { ...

查了网上的解决办法，有两种第一种：fastclick引起的焦点聚焦冲突第二种：设置user-select: auto但是使用这两种方法发现都不起作用，最后想到，既然和fastclick事件冲突了，但是click事件他肯定会触发，所以就直接在click事件里面直接强制focus就可以了。focus(e) { e.target.focus();}...

网易云音乐app歌单详情页的交互效果特别好看，h5也要自己实现一下。实现步骤首先一个背景，背景图高斯模糊，然后加上遮罩然后titlebar上面留出位置下面一个div为了让他自适应高度，我们设置为绝对定位，然后top一个titlebar的高度，bottom为0，这样就占满整个屏幕然后播放全部设为粘性布局position: sticky; top: 0;然后他们父盒子元素设置...

当qa报出一个h5页面当bug的时候，当页面完全不依赖native的时候就是在浏览器也可以正常运行的时候就估计就是h5的问题，这个时候排查问题就很简单，我们通过chrome浏览器直接电脑上看，network看后端请求数据是否有问题。如果没有问题就是h5自身的问题。页面依赖native的时候安卓和ios都有我们问下qa是否这个问题安卓和ios都有，如果都有就大概率就是h5问题，这个...

报错信息{ Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client这是自己在我的linux机器上，安装了mysql Ver 8.0.12 for Linux on x86_6...