浅谈javascript的调试


Posted in Javascript onJanuary 28, 2015

最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块。

这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算。

我们还知道,项目做大了,复杂化了,SOA化了之后,很多问题就来了,就像web中的一个理论,所有前端的数据都是不可信的,那对方团队的接口数据又何尝不是,以前项目小的时候,不会那么不自信,也只会在Logic error的时候会记录下日志,正常的业务流程一般很少记录,毕竟info日志看着不美观,而且还会消耗服务器带宽,也还会拖累web的性能。

但是项目大了,当你某天在项目中遇到了奇怪的bug时,你靠着残缺不全的日志,好不容易用肉眼逐行追溯到了接口,但是参数太多,无法准确的还原接口的参数数据,但是你又100%的自信认定肯定就是接口的返回问题,但是又拿不出完整的报文,这时候你又没法找接口提供方,当时那个无奈呀,多想最好每行都有日志该多好啊。

有了教训后,记流程日志的趋势越来越盛行,最终也酿造了一个年初的大事件,稀里糊涂的说了一大堆,web后端如此,那现在的重前端不也一样要记录日志么?我们知道既然是公共的js模块,那这个模块肯定自己封装了一些方法,肯定是绝对不可以让第三方程序去操作它自己的文本结点,比如下面这样:

<!--third  module -->

公司:<input type="text" id="company" value="xxx有限公司" />

员工姓名:<input type="text" id="username" value="张三" />

<!-- -->

<script type="text/javascript">

    //成本中心

    var costCenter = (function () {

         var company = (document.getElementById("company") || "") && document.getElementById("company").value;

         var username = (document.getElementById("username") || "") && document.getElementById("username").value;

         var result = {

             getInfo: function () {

                 return { company: company, username: username };

             },

             validation: function () {

                 return Boolean(company && username);

             }

         };

         return result;

     })();

 </script>

为了简化操作,第三方UI提供了公司名和员工姓名的UI结点,并且封装了一个costcenter类来提供读取方法,可以看到,我的预定程序只需读取costCenter.getInfo就好了,也起到了一个封装的作用。

但是问题就出现在这里,项目实战中会因为各种原因导致在costcenter中取不到值,当然也可能是common ui的bug。

但是当时你又不能非常确定是否真的取到了值,但是在逻辑上就算取不到值,原则上你也不能阻止订单提交,所以为了彻底追踪bug,就写了个logCenter单例类来记录日志。通常用js来记录log有这种方法。

<1> ajax

这种方式很容易想到,但是你使用原生的xmlhttprequest的话,还需要考虑浏览器兼容,但不用原生的话,就要借助于第三方框架,比如jquery,但是毕竟还是有很多公司是不使用jquery的,所以这个要根据实际的需要来使用了。

    //日志中心

    var logCenter = (function () {

        var result = {

            info: function (title, message) {

                //ajax操作

                $.get("http://xxx.com", { "title": title, "message": message }, function () {

                }, "post");

             }

         };

         return result;

     })();

<2>image

我们的dom中有一个叫做image的对象,所以可以通过动态给它的src赋值来达到请求后台url的目的,同时在url中加上我们需要传递 title和message信息,这种动态给image.src的方式是不需要考虑浏览器兼容性的问题,非常不错。

    //日志中心

    var logCenter = (function () {

        var result = {

            info: function (title, message) {

                //ajax操作

                $.get("http://xxx.com", { "title": title, "message": message }, function () {

                }, "post");

             },

             info_image: function (title, message) {

                 //image

                 var img = new Image();

                 img.src = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.random() * 100000);

             }

         };

         return result;

     })();

以上就是本文的主要内容了,后续我们将继续深入探讨

Javascript 相关文章推荐
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 #Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 #Javascript
Jquery 实现grid绑定模板
Jan 28 #Javascript
Javascript控制input输入时间格式的方法
Jan 28 #Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 #Javascript
js封装可使用的构造函数继承用法分析
Jan 28 #Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 #Javascript
You might like
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
js实现五星评价功能
2017/03/08 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
使用python存储网页上的图片实例
2018/05/22 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python内置函数property()如何使用
2020/09/01 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
医院护士的求职信
2014/01/03 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
销售员岗位职责
2014/06/09 职场文书
电子工程求职信
2014/07/17 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL