18-11-19

背景纹理资源站

www.toptal.com/designers/s…

---

css中可以直接引入svg文本，而不必转为base64

www.zhangxinxu.com/wordpress/2…

//base64
.icon-arrow-down {
    width: 20px; height: 20px;
    background: url(data:image/svg+xml;base64,PHN2ZyB2...) no-repeat center/100%;
}

//直接引入
.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path.../></svg>') no-repeat center;
    background-size: 100%;
}
复制代码

---

更快的async函数

segmentfault.com/a/119000001…

---

three 全景漫游

blog.csdn.net/fen74704279…

---

图片黑白滤镜filter:grayscale(100%);

---

汉字转拼音库

pinyin4js
使用: import 'pinyin4js';

---

记一次与php解决跨域失败，如何定位错误发生地？

1. php在接口中间件请求头中设置了可跨域
2. 本地chrome(已经解除了跨域限制)可以正常访问接口，得到正确的返回值，但是微信开发者工具，手机都会被限制跨域拦截
3. 【通过观察network，发现response的header中并没有包含任何允许跨域的信息，所以定位错误发生在服务器端，最后php从全局中间件设置允许跨域后，解决了bug】
4. 跨域限制发生在两个时间点，第一，在请求到达服务器时由服务器发起限制，第二，在返回值到达浏览器时由浏览器发起限制，而允许跨域请求，就是在服务器响应请求后，将允许的标志

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Origin, Content-Type, Cookie,X-CSRF-TOKEN, Accept,Authorization
Access-Control-Allow-Methods:GET, POST, PATCH, PUT, OPTIONS
Access-Control-Allow-Origin:http://csregister.17lvju.com
Access-Control-Expose-Headers:Authorization,authenticated
复制代码

放在response的headers中，当浏览器得到服务器的响应后，查看到跨域限制解除的标志，才正常的返回数据给异步请求

移动端line-height=height垂直居中失效，用padding-top代替

dom.addEventListener与dom.removeEventListener

//匿名函数形式，会导致解绑失败
document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
},false);
document.body.removeEventListener('touchmove', function (event) {
    event.preventDefault();
},false);

//正确用例
let func= function(){...};
document.body.addEventListener('touchmove', func, false);
document.body.removeEventListener('touchmove', func, false);
复制代码

restful接口设计文档

www.runoob.com/w3cnote/res…

深拷贝

lodash.clonedeep.cloneDeep

前端年终总结

You-Need-to-Know-CSS lhammer.cn/You-need-to…

可隐藏的滚动条

//html 给元素的overflow绑定响应
:style="{height: HEIGHT, overflow: IN_SCROLL_STATE?'auto': 'hidden'}"

//mounted 中写法
this.$refs.contaier.addEventListener('wheel', this.wheelFunc)

//methods 中写法，只有在wheelFunc中绑定this，才能让在debounce中得到vm实例
//否则会得到vue文件中的vm原型
wheelFunc(){
  this.IN_SCROLL_STATE= true;
  this.resetScrollStateFunc.bind(this)();
},
resetScrollStateFunc: debounce(function(){
  this.IN_SCROLL_STATE= false;
}, 500, false)
复制代码

记一次vue中莫名其妙引入不了子组件，找不到子组件export

export 'managerShow' was not found in './components/manager-show.vue'
复制代码

1. 首先分析，并不是路径有误找不到.vue文件，因为找不到文件会报红错，而这里是黄色提示
2. 其次查看子组件name与父组件中是否一致，结果是一致
3. 报错是export的目标找不到，但是.vue文件都是用模板来创建的，不存在export出错的可能(用另一个正常工作的子组件内容覆盖这里，依旧无效侧面也证明了，export这个点是没出错的)
4. 那么紧接着export的就是import了，查看import命令发现了问题

//false
import { managerShow } from './components/manager-show.vue'
//true
import managerShow from './components/manager-show.vue'
复制代码

5. 多了一对大括号，false中import的翻译是‘找到导出对象中的managerShow属性’，而true语句的翻译是‘将导出的对象赋值给managerShow’，可以看到是截然不同的，还是基础知识掌握不牢

转载于:https://juejin.im/post/5bf264906fb9a049d37eb22c