javascript--Talk about the debugging JS

Recently, we all know that the Web front-end relative to a few years ago has become very heavy, all kinds of JS framework, all kinds of face objects, and more projects, will extract public modules.

The UI display of these modules is the same, not the same is the background logic, for example, when we do business travel, usually have a cost center of the JS public module, the customer when booking tickets to fill out the cost center, and this cost center distributed in online, Offline and apps, such as the predetermined end, this is also convenient late and the customer company monthly settlement.

We also know that the project is bigger, complicated, SOA, a lot of problems come, like a theory in the Web, all the front end of the data is not credible, the other team's interface data is not, the previous project is small, not so insecure, will only in logic Error when the log is logged, normal business processes are rarely recorded, after all, the info log looks ugly, but also consumes server bandwidth, but also drag the performance of the Web.

But the project is big, when you encounter a strange bug in the project one day, you rely on the incomplete log, finally with the naked eye to go back to the interface, but too many parameters, can not accurately restore the parameters of the interface data, but you are 100% confidence is definitely the interface return problem, But can not get the complete message, at this time you can not find the interface provider, then that helpless ah, many think it is best to have a log of every row of how good ah.

After a lesson, note the trend of the process log more and more prevalent, and eventually brewed a big event at the beginning of the year, the confused said a lot of, the Web backend so, the current heavy front end is not the same to log it? We know that since it is a public JS module, then this module certainly encapsulates some of the methods, it is definitely not allowed to let a third-party program to manipulate its own text nodes, such as the following:

1 <!--Third module---

2 companies: <input type= "text" id= "Company" value= "XXX Co., Ltd."/>

3 Employee Name: <input type= "text" id= "username" value= "Zhang San"/>

4 <!---->

5

6 <script type= "Text/javascript" >

7

8//cost center

9 var costcenter = (function () {

Ten var company = (document.getElementById ("Company") | | "") && document.getElementById ("Company"). Value;

One-to-one var username = (document.getElementById ("username") | | "") && document.getElementById ("username"). Value;

12

var result = {

Getinfo:function () {

return {company:company, username:username};

16},

Validation:function () {

Return Boolean (company && username);

19}

20};

21st

return result;

23

24}) ();

25

</script>

To simplify the operation, the third-party UI provides a UI node for the company name and employee name, and encapsulates a costcenter class to provide a read method, and as you can see, my scheduler only needs to read Costcenter.getinfo and also play a role in encapsulation.

But the problem is here, the project in the actual combat for a variety of reasons can not get the value in CostCenter, of course, may be common UI bug.

But then you can not be very sure if you really get the value, but logically, even if you do not get the value, in principle you can not prevent the order submission, so in order to completely trace the bug, wrote a Logcenter Singleton class to record the log. Usually use JS to record log with this method.

<1> Ajax

This is an easy way to think about it, but if you use native XMLHttpRequest, you also need to consider browser compatibility, but not native, with third-party frameworks, such as jquery, but there are still many companies that don't use jquery, So this has to be used according to the actual needs.

1//Log Center

2 var Logcenter = (function () {

3

4 var result = {

5 info:function (title, message) {

6//ajax operation

7 $.get ("Http://xxx.com", {"title": Title, "message": Message}, Function () {

8

9}, "Post");

10

11}

12};

13

return result;

15

16}) ();

<2>image

We have an object called image in our dom, so we can achieve the purpose of requesting the background URL by dynamically assigning it the SRC value, and in the URL we need to pass the title and message information. This dynamic way to IMAGE.SRC is not a matter of having to consider browser compatibility, very good.

1//Log Center

2 var Logcenter = (function () {

3

4 var result = {

5 info:function (title, message) {

6//ajax operation

7 $.get ("Http://xxx.com", {"title": Title, "message": Message}, Function () {

8

9}, "Post");

10

11},

12

Info_image:function (title, message) {

//image

The var img = new Image ();

16

IMG.SRC = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.rand Om () * 100000);

18}

19};

20

return result;

22

23}) ();

javascript--Talk about the debugging JS