Switch to the front-end jQuery

Switch to the front-end jQuery


Collation
I think, before reading this article, if I only read the question, I will surely think that I have switched from server-side development (Java Development) to front-end development. To put it bluntly, I am working on the front-end. For example, design Layout or JavaScript. This is not the case. So what is it like? Please continue.

Background
In fact, for developers, there is no strict front-end backend division. As backend engineers, front-end technologies are more or less known. After all, some companies do not have front-end engineers, and there may be very few front-end engineers. When you are doing development, you can only write the front-end by yourself. Over time, you will understand front-end technologies.
In retrospect, there were not many new technologies used this week. However, I have been dealing with jQuery for many days. This is the case. On Saturday, the manager suddenly told me that he would transfer me out to other departments for technical support for about a week. As a result, I was lent out to other departments for development. Of course, it is also a Java project. However, this time we only need to write the front-end. Due to functional limitations, we can only use some front-end technologies, such as partial refresh, Dynamic Refresh, and dynamic table display.

Body
I feel like I have been able to change to the frontend in the past week. The reason for this is that most of the time in the week has been operating on DOM elements to implement various functions. Even delegate functions I have never used.
I will not talk about it below. Let's take a look at some of the more common technologies I have used.

• Partial refresh

(Use Ajax asynchronous requests to dynamically add data)

• Dynamic Refresh

Set the interval to achieve Dynamic Refresh after a fixed time

• Delegate Function
  

If front-end JS uses a small number of children's shoes, it is assumed that the delegate function is not used much. The following describes the usage of this function.


JQuery scans the document for $ ('# tab1'), and uses the click Event and the 'A' CSS selector as parameters to bind the custom function to $ (' # tab1 '). Whenever an event bubbles to $ ('# tab1'), it checks whether the event is a click event and whether the target element of the event matches the CSS selector. If both checks are true, It executes the function.
So what is event bubbling? Event bubbling, also known as event propagation. When we click a link, it triggers the Click Event of the link element, this event triggers the execution of any function on the click event that we have bound to this element.


Therefore, a single click operation triggers the execution of the custom function.


The click event will then spread to the root direction of the tree, broadcast to the parent element, and then each ancestor element, as long as the click event on a child element of the tree is triggered, the event is passed to it.



Conclusion
It is a week. In fact, from last Saturday, coding and debugging are only four days in total. The problem is that this project has been running until now. Why, the specific requirements of the department responsible for this project have not been finalized yet and are constantly being changed. For such requirements, I can only do my best to develop myself, the ability to write live data as much as possible, so that no matter how the demand changes, it will not affect me here, you can change the parameters in the resource file at most. Of course, if it involves a specific business, it is only a small part of the modification, and it will not be too large to modify the code. Easy to maintain.
JQuery contains a lot of things, and I only use a small part here. I believe that in the long run, I will become a front-end master (* ^__ ^ *) hey.