I have been complaining recently. Everyone knows that the web front-end has become very heavy compared to a few years ago. Various js frameworks, various objects, and many projects, public modules will be extracted.
The UI display of these modules is the same, and the difference is the background logic. For example, when we are doing business in corporate travel, we usually have a JS public module of the cost center. Customers fill in this cost center when booking air tickets. This cost center is distributed on the reservation ends such as online, offline and app, which is also convenient for monthly settlement with the customer company in the later stage.
We also know that after the project becomes bigger, complicated, and SOA, many problems arise. Just like a theory in the web, all front-end data is untrustable, so the interface data of the other team is not the same. When the project was young, it was not so unconfident, and it would only record logs when Logic errors. Normal business processes are generally rarely recorded. After all, info logs look unsightly, and it also consumes server bandwidth and also drags down 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 logs and finally trace the interface line by line with the naked eye. However, there are too many parameters and it is impossible to accurately restore the interface parameter data. However, you are 100% confident that it is definitely the return problem of the interface, but you cannot get the complete message. At this time, you cannot find the interface provider. I was helpless at that time. It would be great if you think that it would be better to have a log in every line.
After learning the lesson, the trend of recording process logs became more and more popular, and eventually a major event at the beginning of the year was also caused. I said a lot in a confused way that the web backend is like this, so don’t we also need to record logs in the current front-end? We know that since it is a public JS module, this module must have encapsulated some methods on its own, and it is absolutely impossible to let third-party programs operate their own text nodes, such as the following:
The code copy is as follows:
<!--third module -->
Company: <input type="text" id="company" value="xxx Co., Ltd." />
Employee name: <input type="text" id="username" value="Zhang San" />
<!-- -->
<script type="text/javascript">
//Cost Center
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>
In order to simplify operations, the third-party UI provides UI nodes for company names and employee names, and encapsulates a costcenter class to provide reading methods. It can be seen that my scheduled program only needs to read costCenter.getInfo, which also plays a role in encapsulation.
But the problem occurs here. In the actual project, the value cannot be obtained in the costcenter due to various reasons. Of course, it may also be a bug in common ui.
But at that time you were not sure whether the value was actually obtained, but logically even if the value was not obtained, in principle you could not prevent order submission. So in order to thoroughly track the bug, you wrote a logCenter singleton class to record the log. There is usually this way to use js to record logs.
<1> ajax
This method is easy to think of, but if you use native xmlhttprequest, you need to consider browser compatibility. However, if you don’t need native, you need to rely on third-party frameworks, such as jquery. However, after all, there are still many companies that do not use jquery, so this needs to be used according to actual needs.
The code copy is as follows:
//Log Center
var logCenter = (function () {
var result = {
info: function (title, message) {
//ajax operation
$.get("http://xxx.com", { "title": title, "message": message }, function () {
}, "post");
}
};
return result;
})();
<2>image
There is an object called image in our dom, so we can dynamically assign its src to the purpose of requesting the background url, and at the same time, we need to pass title and message information into the url. This dynamic way to image.src does not need to consider browser compatibility issues, which is very good.
The code copy is as follows:
//Log Center
var logCenter = (function () {
var result = {
info: function (title, message) {
//ajax operation
$.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;
})();
The above is the main content of this article, and we will continue to discuss it in depth in the future