关于系统前端开发的那些事

引言：最近本人有幸参与公司3.0新版超市前端开发工作，开发工作中遇到一些问题，现将开发前端中遇到的一些问题和建议给大家伙做个分享^_^

总结的不是很多，还有待完善，欢迎补充……

问题1：开发前端有时会遇到<img>标签中的src属性值为空，或者src属性值存在，但是服务器端得图片被干掉了，这样就会导致2种影响页面执行的问题的诞生，

（1）、<img src='' >值为空的情况，导致了页面的重新加载，所有的请求被重新执行一次，大大降低页面加载速度；

（2）、<img src='XXX.jpg'>此图片因为服务器的误操作等原因导致了图片丢失，浏览器F12查看图片Url后显示图片Url加载失败，浏览器报错，严重的话直接阻塞了UI线程；

对于以上2种情况，个人的建议是在调用图片的地方加上空值判断和默认图展示，<img>标签可以加上onerror属性重新定位到加载失败后的默认图片，使用onerror的时候如果指定的默认图也丢失的话，

浏览器会循环查找指定路径的默认图，直到找到该默认图为止，可以使用以下代码段来阻止onerror属性的循环<img src='XX.jpg' οnerrοr='this.οnerrοr='';this.src='morentu.jpg''>,也可以JS设置this.onerror属性为null。

问题2：对于页面上的金钱符号处理，一般大多采用 ¥ 符号来做渲染，但是目前发现的问题是，采用¥符号，在一些低版本内核的浏览器中会出现兼容问题（显示不全、不显示），此情况出现的频率不是很高

建议对于页面上金钱符号的处理，可以采用字符编码或者特殊符号的形式展示,防止浏览器兼容带来的影响。

使用 &#65509 2.css设置字体属性 font-family:Arial; 或者在网页使用 &yen 符号, 个人还是推荐用第二种方式显示，为什么？请看看JD、taobao。

问题3：对于页面中事件的监听和绑定，一般都是采用html代码与Js代码分离的方式，但是也不排除在html标签中直接绑定事件的现象，这样的做法看似确实方便了许多，但是随之也会带来一些问题

 （1）、Js负责行为层，而html负责结构层，将2者混合在一块不符合前端架构设计思想；

 （2）、Js写在内部不利于后期的维护，增加维护成本，无法进行迭代开发和功能扩展；

 （3）、过多的Js操作写在Html结构中，会阻碍DOM树的加载，影响用户体验；

 （4）、外部Js更方便压缩，合并请求和减少带宽的占用（按照规范编写）。

相比Js写在html中，外部Js仅仅是需要建立多次Htpp连接，优化http首部困难，但是对于压缩后所带来性能上的提升是利大于弊的。

转载于:https://my.oschina.net/Jsonxu/blog/547454