你的位置:首页 > 软件开发 > 网页设计 > 关于系统前端开发的那些事

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

发布时间:2015-12-17 16:00:22
引言:最近本人有幸参与公司3.0新版超市前端开发工作,开发工作中遇到一些问题,现将开发前端中遇到的一些问题和建议给大家伙做个分享^_^总结的不是很多,还有待完善,欢迎补充……问题1:开发前端有时会遇到<img>标签中的src ...

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

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

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

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

(1)、<img src='/images/loading.gif' data-original='' >值为空的情况,导致了页面的重新加载,所有的请求被重新执行一次,大大降低页面加载速度;

(2)、<img src='/images/loading.gif' data-original='XXX.jpg'>此图片因为服务器的误操作等原因导致了图片丢失,浏览器F12查看图片Url后显示图片Url加载失败,浏览器报错,严重的话直接阻塞了UI线程

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

浏览器会循环查找指定路径的默认图,直到找到该默认图为止,可以使用以下代码段来阻止onerror属性的循环<img src='/images/loading.gif' data-original='XX.jpg' onerror='this.onerror='';this.src='/images/loading.gif' data-original='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首部困难,但是对于压缩后所带来性能上的提升是利大于弊的。

------------------------------------------------------------------------------------------------------------------------------我是华丽的分割线-------------------------------------------------------------------------------------------------------------------------------------------------------

接下来在扯一扯webapi的那些事吧  ̄□ ̄||

最近在用webapi的时候,通过单元测试调试webapi后发现不少问题,现做以下汇总和解决方案分享:

1.webapi有4种资源调度方式分别对应着数据库的CURD,自动匹配所有的GetXXX或者PostXXX的函数

webapi调度         数据库操作

   GetAsync--------->select

   PostAsync-------->Insert

   PutAsync---------->Update

   DeleteAsync------->Delete

说下post和put区别吧:项目中用post和put方式调度,其实都能实现同样的功能,但是put后返回的结果是单条的,而post返回的结果是多条的,结合到数据库的执行update和add后

返回的受影响行数,应该就很容易理解了吧; 8-|

2.如果创建人的api项目是2.0的话,默认自带的一些高版本的dll版本(系列化等)会引发程序在Gload.cs的异常,版本匹配不上,

这个不多说,本人已遇到,解决方式就是更换低版本的dll引用,dll文件统一管理咯;

3.大家在做post提交请求的时候,遇到需要传参的时候,参数较多会封装成实体,那么参数较少的情况可能就会挨个传参(不走url),看似没有问题,建立连接后会出现未将对象引用问题,

经调试发现虽然api通道能走通,但是参数获取未nul,检查地址发现没问题后还是获取null,取网上找了下,发现官方建议在传参时在前面打上【Frombody】标记就可以了,这样就会告诉

api要从请求体重获取data数据(只能存在一个【Frombody】),加上后就可以继续玩耍了-。-;

Ps:[Frombody]如果按照键值的形式传参会获取不到值,所以清空data数据中的键只传value就可以啦(具体为什么还没想清楚,有了解的童鞋望告知*.*);

4.项目中post基本上可以代替增删改操作了,默认访问Put、Delete调度会出现状态值为405的异常,如果需要用到PutAsync、DeleteAsync的童鞋需要在配置文件中加上这一段:

<system.webServer> 

原标题:关于系统前端开发的那些事

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。