常见基础&原理问题记录

2018-03-17

一、js

1.JS引擎
2.本地储存和离线缓存
3.Javascript实现几种常用的排序算法
4.v8sort排序
5.闭包,继承,es6,异步

二、css

1.垂直居中方法
2.盒模型
3.什么是BFC

三、git

理解merge/rebase的区别
分支合并有冲突的情况与解决方法

四、vue

1.双向绑定原理
2.虚拟dom原理
3.Vue的SSR原理(nuxt)
4.webpack异步原理/代码分割

五、算法

1.实现一个JSON.stringify方法
2.数组去重/复杂度

展开全文 >>

hexo yilia添加相册

2018-03-04

最终效果：https://er567.cn/photos

参考连接：http://lawlite.me/

有什么问题可以在下面留言评论或者左边的联系方式问我

下面大概说一下实现步骤

1.创建图床

你可以用你自己的服务器搭一个，也可以使用七牛云，最方便当然还是直接在git上建一个仓库用来存放图片，缺点就是一次性添加图片过多的时候上传会有点慢。

2.压缩图片并整理图片信息

这一步需要读取文件，你可以用nodejs,python,php等等都行。主题的作者是用的nodejs,我参考使用的是python。大概实现的功能就是读取原图，压缩图片，将原图和压缩过的图片的信息都整理好存到一个json文件中以便于hexo 主题模板渲染页面使用。

3.在blog目录中渲染相册页面

拿到了图片信息json文件后需要编辑相册页面模板，你也可以自定义一些样式。在source目录中创建photos文件夹，在里面编辑ejs,js,css

4.部署

以上这些都弄完没问题之后就可以部署上去了(每次更新图片需要跑一下脚本更新json)

展开全文 >>

不要随便监听改变浏览记录！

2018-01-30

最近在项目中遇到的坑，已填平=-=
以后还是尽量别手动强跳页面打乱浏览器访问记录，尽量用原生的返回，性能体验比较好(返回后有缓存除外。

监听浏览器返回事件

window.history.pushState(null, null, null);//兼容
window.addEventListener("popstate", function(e) {
    //do something  
},false);

注意：ios8会有bug，页面加载的时候会直接执行监听的内容。

原因：浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。

var obj = {
    params:{isRun: false},
    backTo:{
        //图一代码段
    },
    initBack:{
       var self = this;
       self.param.isRun = false;  
       setTimeout(function () { self.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
       self.backTo();
    }
}

浏览器缓存问题

1.如是跳转页面可以加时间戳

1 2	//调用 timestamp(getReferrer())

展开全文 >>

小程序嵌h5

2018-01-26

小程序嵌h5

<web-view src="https://www.xxx.com?parmes=data&token=token"></web-view>

在内嵌的h5页面中通过
if(window.__wxjs_environment === ‘miniprogram’){}
判断当前环境是在h5还是小程序//需要引用JSSDK 1.3.1 以上版本
然后在进行相关的逻辑操作，最后带参数返回小程序

通过url传参

wx.miniProgram.navigateTo({url:'https:xxx.com?parmes=1&key=2'})

onLoad: function (options) {
    console.log(options);//{parmes=1,key=2}
}

当前小程序不支持h5支付流程，只好调相关支付小程序或其他方法
目前往里跳转的页面路径最多只能十层
待续

展开全文 >>

移动端动画

2018-01-20

一丶jq/zepto animate()方法

可以细化操作，回调方法，但是在移动端（安卓）卡顿

二丶css3 animation

可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。

三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿

使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。
使用transform:translateY/X来移动元素 scale()缩放元素
加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速
[参考链接]http://blog.csdn.net/majun0007/article/details/70049070

四丶RequestAnimationFrame

如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。
参考链接代码

五丶遇到的坑

元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;
过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。

解决办法：使用延时器，延迟一点css3动画的执行。

展开全文 >>