Javascript——说说js的调试
最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块。
这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算。
我们还知道,项目做大了,复杂化了,SOA化了之后,很多问题就来了,就像web中的一个理论,所有前端的数据都是不可信的,那对方团队的接口数据又何尝不是,以前项目小的时候,不会那么不自信,也只会在Logic error的时候会记录下日志,正常的业务流程一般很少记录,毕竟info日志看着不美观,而且还会消耗服务器带宽,也还会拖累web的性能。
但是项目大了,当你某天在项目中遇到了奇怪的bug时,你靠着残缺不全的日志,好不容易用肉眼逐行追溯到了接口,但是参数太多,无法准确的还原接口的参数数据,但是你又100%的自信认定肯定就是接口的返回问题,但是又拿不出完整的报文,这时候你又没法找接口提供方,当时那个无奈呀,多想最好每行都有日志该多好啊。
有了教训后,记流程日志的趋势越来越盛行,最终也酿造了一个年初的大事件,稀里糊涂的说了一大堆,web后端如此,那现在的重前端不也一样要记录日志么?我们知道既然是公共的js模块,那这个模块肯定自己封装了一些方法,肯定是绝对不可以让第三方程序去操作它自己的文本结点,比如下面这样:
1 <!--third module -->
2 公司:<input type="text" id="company" value="xxx有限公司" />
3 员工姓名:<input type="text" id="username" value="张三" />
4 <!-- -->
5
6 <script type="text/javascript">
7
8 //成本中心
9 var costCenter = (function () {
10 var company = (document.getElementById("company") || "") && document.getElementById("company").value;
11 var username = (document.getElementById("username") || "") && document.getElementById("username").value;
12
13 var result = {
14 getInfo: function () {
15 return { company: company, username: username };
16 },
17 validation: function () {
18 return Boolean(company && username);
19 }
20 };
21
22 return result;
23
24 })();
25
26 </script>
为了简化操作,第三方UI提供了公司名和员工姓名的UI结点,并且封装了一个costcenter类来提供读取方法,可以看到,我的预定程序只需读取costCenter.getInfo就好了,也起到了一个封装的作用。
但是问题就出现在这里,项目实战中会因为各种原因导致在costcenter中取不到值,当然也可能是common ui的bug。
但是当时你又不能非常确定是否真的取到了值,但是在逻辑上就算取不到值,原则上你也不能阻止订单提交,所以为了彻底追踪bug,就写了个logCenter单例类来记录日志。通常用js来记录log有这种方法。
<1> ajax
这种方式很容易想到,但是你使用原生的xmlhttprequest的话,还需要考虑浏览器兼容,但不用原生的话,就要借助于第三方框架,比如jquery,但是毕竟还是有很多公司是不使用jquery的,所以这个要根据实际的需要来使用了。
1 //日志中心
2 var logCenter = (function () {
3
4 var result = {
5 info: function (title, message) {
6 //ajax操作
7 $.get("http://xxx.com", { "title": title, "message": message }, function () {
8
9 }, "post");
10
11 }
12 };
13
14 return result;
15
16 })();
<2>image
我们的dom中有一个叫做image的对象,所以可以通过动态给它的src赋值来达到请求后台url的目的,同时在url中加上我们需要传递 title和message信息,这种动态给image.src的方式是不需要考虑浏览器兼容性的问题,非常不错。
1 //日志中心
2 var logCenter = (function () {
3
4 var result = {
5 info: function (title, message) {
6 //ajax操作
7 $.get("http://xxx.com", { "title": title, "message": message }, function () {
8
9 }, "post");
10
11 },
12
13 info_image: function (title, message) {
14 //image
15 var img = new Image();
16
17 img.src = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.random() * 100000);
18 }
19 };
20
21 return result;
22
23 })();
转载于:https://www.cnblogs.com/dianshi/p/4171646.html
Javascript——说说js的调试相关推荐
- vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)
文章目录 declaration vscode 对于javascript的支持 环境 使用node.js调试纯js代码 使用浏览器调试 试验代码 Note! edge浏览器独立调试编辑并保存代码 窗格 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- Chrome 中的 JavaScript 断点设置和调试技巧
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...
- javascript错误处理与调试(转)
JavaScript 在错误处理调试上一直是它的软肋,如果脚本出错,给出的提示经常也让人摸不着头脑. ECMAScript 第 3 版为了解决这个问题引入了 try...catch 和 throw 语 ...
- 【JavaScript】JS的基础知识
JavaScript 一.什么是JavaScript? 二.JavaScript的用途 三.JS是如何运行的? 四.JS前置知识 4.1 JS书写格式 4.1.1 行内格式 4.1.2 内嵌格式 4. ...
- 如何使用 Javascript/node.js 在 WebRTC 中构建音视频通话APP?
语音和视频通信的嵌入对于现在的互联网产品发展的重要性已经毋庸置疑,WebRTC 事实上是一种通用的技术框架标准,它可以在浏览器之间不需要中介的情况下,实现任意数据流交换.这使得 web 应用程序和移动 ...
- 【JavaScript】JS事件机制学习
常用的事件 通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
- JavaScript(JS)常用正则表达式汇总
文章目录 自定义字符串校验函数 常用正则表达式 自定义字符串校验函数 校验字符串是否全由数字组成,是则返回true,否则返回false: function isDigit(str) {var regE ...
- Chrome JS断点调试技巧
Chrome调试折腾记_(2)JS断点调试技巧 技巧一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 技巧三:查看断点内部的作用范围[很实用] 技巧4:监听事件断点 技巧5:DOM及 XHR监听跳 ...
最新文章
- Spring Boot配置文件学习记录【1】
- React Mixins入门指南
- Xml,XPath,XSLTxue 学习方法
- php 自定义菜单 openid,微信公众平台开发(99) 自定义菜单获取OpenID
- 备战双 11!96秒,100亿,支付宝万级规模 K8s 集群管理系统如何设计?
- java docur,JavaDoc生成API详解
- 案例:按照JSP Model2思想实现用户注册功能
- linux 软件部署工具下载,linux配置 yum管理应用软件 、 快速部署Web/FTP
- inteliJ maven 打包时把依赖的包一起打
- 算法:Reverse String(反转字符串)
- MacOS 按键精灵推荐
- 显示器尺寸对照表_电脑液晶屏尺寸如何计算,液晶屏尺寸对照表
- 【书山有路】互联网+:从IT到DT 读书笔记
- 滑动平均滤波c语言_9种简单的数字滤波算法(C语言源程序)
- ros_arduino_bridge功能包集的使用
- 【LDC1314】金属传感器(电感传感器)的调试技巧
- 黑雷苹果模拟器_精灵盛典iOS模拟器版本 已更新上架黑雷
- Java+Selenium实现网页截图
- LowB三人组--选择排序原理和实现
- Android Camera基本架构介绍
热门文章
- c四舍五入取整函数_学会这8个Excel函数,工作瞬间好轻松!
- Qt,编译libcurl并且导入到库
- 全国计算机二级qq闪退,电脑上QQ闪退怎么回事?各个系统版本电脑QQ闪退现象的解决方法介绍...
- python趣味编程_第6章 旋转的方块(《Python趣味创意编程》教学视频)
- Qt 多线程TCP服务端一键关闭所有客户端
- grub 引导 多linux系统,GRUB 多系统引导
- Surface Computing
- [codevs 1911] 孤岛营救问题
- Luogu P1198 BZOJ 1012 最大数 (线段树)
- android 列表倒计时,Android利用RecyclerView实现列表倒计时效果