浅谈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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
显示、隐藏密码
2006/07/01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Django 用户认证组件使用详解
2019/07/23 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
应届生财务管理求职信
2013/11/06 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
大学四年规划书范文
2013/12/27 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
厕所文明标语
2014/06/11 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
安全教育主题班会总结
2015/08/14 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Java无向树分析 实现最小高度树
2022/04/09 Javascript
Redis实现一个账号只能登录一个设备
2022/04/19 Redis