浅谈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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
详解jquery选择器的原理
Aug 01 jQuery
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
vue 自动化路由实现代码
Sep 03 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
晶体管来复再生式二管收音机
2021/03/02 无线电
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
javascript实现简单留言板案例
2021/02/09 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
应聘自荐信
2013/12/14 职场文书
海飞丝广告词
2014/03/20 职场文书
五年级学生评语
2014/04/22 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2015年端午节活动方案
2015/05/05 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL