一些前端问题解决方案整理

Sanchi 收录于类别前端

2018-06-16 2018-06-16 约 2839 字预计阅读 6 分钟

一些前端问题解决方案整理。

使用 HTML5 开发离线应用
在浏览器的标签页显示网站标志图标（或指定图标）的方法，通过js动态创建favicon
各种恶心居中问题集锦

发现使用弹性盒子完全由父控件控制子控件居中展示的完美代码：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）横轴对齐。align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。flex布局的一些讲解文章
- 水平垂直居中
  1 2 3 4 5
  
  .parent { display: flex; align-items: center; justify-content: center; }
- 水平居中
  1 2 3 4
  
  .parent { display: flex; justify-content: center; }
- 垂直居中
  1 2 3 4
  
  .parent { display: flex; align-items: center; }
img标签的object-fit适应属性

鼠标滑过切换图片。以上链接中提供了三种方式，但经过场景选择，发现改变透明度的方式最为适合

1
2
3


.rightNav .icon{width: 25px;height: 25px;object-fit: scale-down;object-position: center;}
.rightNav .displayImg{position:absolute;left:12.5px;z-index:3;text-align:center;}
.rightNav label:hover .displayImg{opacity:0}

如上代码，两张图片叠放，上面那张通过absolute设置固定位置（displayImg），通过绑定hover事件让鼠标滑过时上面的图片透明度变为0。

css将元素的边框也算进元素的高度与宽度内，也就将边框放到元素内部：box-sizing:border-box;
jQuery 利用 FormData 上传文件
web前端之跨域的几种方式
1. JSONP：JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。
2. CORS：实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。
3. WebSocket：Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。
4. postMessage：如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
如何优雅处理前端异常，对js的各种错误进行拦截处理
1. 可疑区域添加Try-Catch
2. 全局监控js异常：window.onerror
3. 全局监控静态资源异常：window.addEventListener
4. 捕获没有catch的Promise异常：unhandledrejection
5. Vue errorHandler和React componentDidCatch
6. 监控网页崩溃：window对象的load和beforeunload
7. 跨域CORS解决(Cross-Origin Resource Sharing)
前端文件及api国际语义化版本控制规范
UI大全：前端UI框架集合（持续更新）
如何隐藏CNZZ统计图标
解决provisional headers are shown的过程
node环境安装
1. 管理 node 版本，选择 nvm 还是 n？
2. Mac中安装nvm
3. node版本管理工具nvm-Mac下安装及使用
4. nvm node npm webpack vue-cli 安装流程
5. vue-cli（vue脚手架）超详细教程
6. Intellij IDEA搭建vue-cli项目
7. idea 整合 vue 启动
网站加载速度优化改进
为了方便使用，让美术做了一批svg的图标，使得在使用的时候可以手动替换颜色等，不用再次切图。基于如何制作svg格式的图标字体这篇文章的内容，制作了一份字体文件出来，使用效果非常满意！
ES6支持问题

一个html页面在百度android手机浏览器数据加载不出来，其他所有浏览器都是正常的。数据请求是写在js里面的html，抓包发现js是加载了的，但是js里面的方法就是死活不执行，调试了好久，最后搜到这篇博客，恍然大悟，百度这个垃圾都没有支持ES6，写了let变量不识别。最后把所有的let变量改成var变量搞定

通过for循环动态创建元素的时候发现无法找到指定的对象，且怎么调试都不对，困惑了好久。问题详情见下面描述☟，解决办法见这篇文章。

错误的代码1，报错Uncaught ReferenceError: tmInfo is not defined：

1
2
3
4
5
6


var tmInfo = shareData;
var tmStr = '';
for (var i = 0, len = tmInfo.length; i < len; i++) {
    tmStr += '<li value="' + tmInfo[i].id + '"><span class="removeTm" onclick="removeShareItem($(this),tmInfo[i])"><img src="img/redclose.png" alt=""></span>'
        + '<img src="' + tmInfo[i].url + '"></li>';
}

后来发现问题所在，onclick中的tmInfo[i]这个元素被包裹到了语句中，错误的代码2：onclick="removeShareItem($(this),' + tmInfo[i]+ ')"。
这时候又报错Uncaught SyntaxError: Unexpected identifier，然后又试了错误代码3：JSON.stringify(tmInfo[i])，这种写法还是报同样的错误。
折腾好久最后找到如上的文章，改成了JSON.stringify(tmInfo[i]).replace(/\"/g, "'")正常了。究其原因，是转成json之后json的双引号与onclick的那个冲突了，导致程序在第一个双引号的时候判断语句已经结束了，后面的一看不是个html语法，直接就报错，所以转义一下就正常了。灵异事件解决。

angular ng-repeat的数据集变化了，但是页面没有变化
部分国产浏览器在极速模式下，页面设置overflow:hidden+hoveroverflow:visiable的元素在hover事件之后元素出现错位切割现象，找了一天没有找到原因，不过通过这篇文章设置gpu渲染之后就恢复正常了，引用的StackOverflow文章。问题是解决了，但依然有点困惑。

Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.
出现一个奇怪的情况，360浏览器input输入框会记住上次录入并默认填充，对于一个不是频繁输入同一个值的输入框来说，这是一个很恶心的操作，到浏览器设置里面查看的话没有找到对应的设置选项，搜索之后发现是需要代码支持，骗一骗这些沙雕浏览器才能关掉这个恶心的特性。最后找到这篇文章，里面提到了为input设置autocomplete="new-password"属性，到MDN官方文档查看发现也提到了使用这个属性来关闭自动填充，设置之后恢复正常。
开发前端网页的时候遇到这样一个问题：父布局和子布局分别绑定了点击事件，在chrome上测试正常，在不同的dom上点击触发各自的点击事件，但是在firefox上测试的时候发现点击子布局的dom时同时触发了父子布局的点击事件，我想这个应该跟Android有类似的事件传递机制，查询之后找到这篇文章，提到有一个stopPropagation event事件，可以将时间在当前节点消费，阻止事件向其他节点传递。不过除此之外还有其他的几个dom事件，如event.preventDefault();和event.stopImmediatePropagation();，这篇文章进行了详细的对比。发现需要补习一下dom层级和事件相关的知识了

目录

一些前端问题解决方案整理