Method for automatically positioning code position in editor by clicking page dom element

Abstract

The invention relates to a method for automatically positioning the position of a code in an editor by clicking a page dom element, in particular to the field of browsers and editors, a client automatically positions the position of the code in the editor by clicking a page DOM element, a global click event monitor is set by utilizing addEventListener, and the editor can automatically position the position of the code in the editor by clicking the page DOM element. The transmitted position information is analyzed through an Express framework, a monitoring request is processed, a developer can locate the corresponding code position more quickly and accurately, the code browsing and editing efficiency is improved, a server initializes a new folder of a Node.js project in a command line, the EXpress framework is installed, and the code browsing and editing efficiency is improved. The method comprises the following steps: starting a server side through a command line and receiving DOM element position information sent by a front end, executing a system command by using a Child-process module of Node.js, creating a WebSocket in a client side code to be connected to an address specified by the server side, installing a WebSocket library in the server side, creating a WebSocket server in the server side code, and connecting the WebSocket library with the WebSocket server. Real-time communication connection based on WebSocket is established between the server and the client, so that the stability and reliability of the system are improved.

Description

Technical Field

[0001] The present invention relates to the field of browsers and editors, and more specifically, to a method for automatically locating a code position in an editor by clicking a DOM element on a page. Background Art

[0002] With the continuous development of front-end technology and the diversification of front-end frameworks, the complexity of modern web applications has increased dramatically. In large projects, there are a large number of code files, which are often organized in modularization and componentization. This requires developers to search and locate codes across multiple files when modifying specific functions, which is not only time-consuming but also prone to errors. Especially for developers who have just joined the team, the cost of this search and location is particularly significant.

[0003] Therefore, there is an urgent need for a method to automatically locate the code position in the editor by clicking on the page DOM element. Summary of the invention

[0004] The present invention aims at the technical problems existing in the prior art and provides a method for automatically locating the code position in an editor by clicking a DOM element of a page, so as to solve the problems raised in the above background technology.

[0005] The technical solution of the present invention to solve the above technical problem is as follows: a method for automatically locating the code position in the editor by clicking a page DOM element, comprising the following steps:

[0006] S101. The client realizes automatic location of the code position in the editor by clicking the page DOM element, uses addEventListener to set the global click event listener, parses the passed location information through the Express framework and processes the listening request;

[0007] S102. The server initializes a new Node.js project folder in the command line and installs the Express framework, starts the server through the command line and receives the DOM element position information sent by the front end, and uses the child-process module of Node.js to execute system commands;

[0008] S103. Create a WebSocket connection in the client code to the address specified by the server, install the WebSocket library on the server and create a WebSocket server in the server code, and establish a real-time communication connection based on WebSocket between the server and the client;

[0009] In a preferred embodiment, in S101, the client automatically locates the code position in the editor by clicking on the page DOM element, uses JavaScript to add custom attributes to each DOM element and stores the file path and line number information of the source code through data-* attributes. When the DOM elements in the page are dynamically generated through JavaScript, the file path and line number information of the source code are assigned to the location information of the newly created elements during the generation process. In the CSS style sheet, the DOM elements with specific custom attribute values ​​are selected through the attribute selector, and the style is set to highlight and mark the DOM elements. The addEventListener is used to set a global click event listener to trigger the corresponding event processing function when the user clicks the DOM element, wherein the console is used og adds the logic of single-click events, double-click events, keyboard and mouse events, and obtains the location information attribute value of the clicked DOM element in the event processing function. It obtains the specific element clicked through event.target, including the tag name, class name and ID. It creates a function and uses AJAX to send the location information to the back-end service. It uses the Express framework to parse the passed location information and process the listening request, and matches the obtained DOM element information with the event listener. The back-end service receives the location information sent by the front-end by receiving an HTTP POST request, and sends a response to the front-end to inform it of the processing result.

[0010] In a preferred embodiment, in S102, the server initializes a new Node.js project folder in the command line and installs the EXpress framework, creates a file named server.js in the Node.js project folder as the entry file of the server code, introduces the EXpress module and sets the route, starts the server through the command line and receives the DOM element position information sent by the front end, introduces the body-parser in the EXpress module and configures it to parse the request body data, and after the server receives the position information, performs necessary verification and parsing work, wherein the verification is to check the integrity and correctness of the request body data, and prepares the preliminary data items, fills the missing values ​​with the preliminary data, and the parsing is to extract the coordinates in the position information of the DOM element, constructs a corresponding command according to the received position information and by calling a command API generated in a specific format, which is used to open the specified code editor and locate the corresponding code position, and uses the child-process module of Node.js to execute the system command, which is used to start the code editor and pass the code position information, and sends a response to the front end while notifying the front end whether the operation is successful, and attaches the data that needs to be returned to the front end.

[0011] In a preferred embodiment, in S103, a WebSocket connection is created in the client code to the address specified by the server, and the page content is updated after the front end receives the notification and data from the server. The WebSocket library is installed on the server and a WebSocket server is created in the server code, and the specified port is listened to. A real-time communication connection based on WebSocket is established between the server and the client to achieve faster data transmission and real-time interaction, and a new message format is defined to support the transmission of more types of DOM element marking information, including size and type, and to add code highlighting. When a user marks a DOM element and edits the code, the server broadcasts the marking operation to other users for real-time update of the code interface of other users. When users edit the same DOM element and code at the same time in a multi-user collaboration scenario, the editing library is used to provide a solution.

[0012] The beneficial effects of the present invention are as follows: by storing the file path and line number information of the source code on the DOM element and triggering the event processing function when clicking, the developer can locate the corresponding code position more quickly and accurately, improve the efficiency of code browsing and editing, highlight and mark the DOM elements on the interface, let the user clearly understand the click target, improve the visualization effect of the operation, add the logic of click events, double-click events, keyboard and mouse events to the event processing function, and send the location information to the back-end service, support the developer to debug and modify the code, speed up the problem location and repair, the back-end service receives and processes the location information request from the front end, and parses the information through the Express framework It matches with event listeners to realize the collaboration between client and server, and provides users with more complete functional support. It sends responses to the front end to inform the processing results, so that users can understand the feedback of the operation in real time. At the same time, it makes necessary adjustments and optimizations according to the response results to improve the stability and reliability of the system. Through the verification, parsing and command construction of the server, it realizes more accurate and reliable code positioning function, helps developers to quickly and accurately locate the code location that needs to be edited, improves development efficiency, and realizes the function of automatically opening the specified code editor and locating the corresponding code location by generating a command API in a specific format and executing system commands, which simplifies the developer's operation steps, improves the convenience of code editing, and is convenient for service developers. The server verifies and parses the requested data, effectively ensuring that the received location information is complete and correct, filling in missing values ​​and extracting coordinate information to improve the quality and accuracy of the data. The system command is executed through the child-process module of Node.js, and a response is sent to the front end after the operation is completed, notifying whether the operation result is successful or not, and attaching the data that needs to be returned to the front end, so as to achieve effective communication and data interaction between the server and the front end. By automatically opening the code editor and locating to the specified code location, it provides developers with a more friendly and efficient interaction method, improves the user experience, and makes the code editing process smoother and more convenient. A real-time communication connection is established through WebSocket to achieve customer Faster data transmission and real-time interaction between the client and the server enable real-time feedback of user operations on the page to other users or different devices of the same user. New message formats are defined to support the transmission of more types of DOM element tag information, enrich the display and interaction methods of page content, improve the visualization of the page and the flexibility of user operations, and update the page content of other users in real time. Real-time sharing and collaborative editing functions in multi-user collaboration scenarios are realized to promote teamwork. When multiple users edit the same DOM element or code at the same time, the solutions provided by the editing library are used to effectively handle editing conflicts, ensure data consistency and integrity, and avoid errors caused by editing by multiple people. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] Figure 1 is a flow chart of the method of the present invention; DETAILED DESCRIPTION

[0014] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0015] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this application, "plurality" means two or more, unless otherwise clearly and specifically defined.

[0016] In the description of the present application, the term "for example" is used to mean "used as an example, illustration or description". Any embodiment described as "for example" in the present application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is given to enable any technician in the field to implement and use the present invention. In the following description, details are listed for the purpose of explanation. It should be understood that a person of ordinary skill in the art can recognize that the present invention can be implemented without using these specific details. In other examples, well-known structures and processes will not be elaborated in detail to avoid unnecessary details to obscure the description of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown, but is consistent with the widest scope consistent with the principles and features disclosed in the present application.

[0017] This embodiment provides Figure 1 A method for automatically locating the code position in the editor by clicking on a page DOM element is shown, specifically comprising the following steps:

[0018] S101. The client realizes automatic location of the code position in the editor by clicking the page DOM element, uses addEventListener to set the global click event listener, parses the passed location information through the Express framework and processes the listening request;

[0019] Furthermore, the client realizes automatic positioning of the code position in the editor by clicking on the DOM element of the page, uses JavaScript to add custom attributes to each DOM element and stores the file path and line number information of the source code through the data-* attributes. When the DOM elements in the page are dynamically generated through JavaScript, the file path and line number information of the source code are assigned to the location information of the newly created element in the generation process. In the CSS style sheet, the DOM element with a specific custom attribute value is selected through the attribute selector, and the style is set to highlight and mark the DOM element. The addEventListener is used to set a global click event listener to trigger the corresponding event processing function when the user clicks the DOM element, wherein console is used to add the logic of single-click event, double-click event, keyboard and mouse event, and the location information attribute value of the clicked DOM element is obtained in the event processing function, and the specific element clicked, including the tag name, class name and ID, is obtained through event.target. A function is created and the location information is sent to the back-end service through AJAX. The Express framework is used to parse the transmitted location information and process the listening request, and the obtained DOM element information is matched with the event listener. The back-end service receives the HTTP The POST request method receives the location information sent by the front end and sends a response to the front end to inform the processing result.

[0020] S102. The server initializes a new Node.js project folder in the command line and installs the Express framework, starts the server through the command line and receives the DOM element position information sent by the front end, and uses the child-process module of Node.js to execute system commands;

[0021] Furthermore, the server initializes a new Node.js project folder in the command line and installs the EXpress framework, creates a file named server.js in the Node.js project folder as the entry file of the server code, introduces the EXpress module and sets the route, starts the server through the command line and receives the DOM element position information sent by the front end, introduces the body-parser in the EXpress module and configures it to parse the request body data, and after receiving the position information, performs necessary verification and parsing work, wherein the verification is to check the integrity and correctness of the request body data, and prepares the preliminary data items, fills the missing values ​​with the preliminary data, and parses to extract the coordinates in the position information of the DOM element, constructs the corresponding command according to the received position information and by calling the command API generated in a specific format, which is used to open the specified code editor and locate the corresponding code position, and uses the child-process module of Node.js to execute the system command, which is used to start the code editor and pass the code position information, sends a response to the front end, and notifies the front end whether the operation is successful, and attaches the data that needs to be returned to the front end.

[0022] S103. Create a WebSocket connection in the client code to the address specified by the server, install the WebSocket library on the server and create a WebSocket server in the server code, and establish a real-time communication connection based on WebSocket between the server and the client;

[0023] Furthermore, a WebSocket connection is created in the client code to connect to the address specified by the server. After the front end receives notifications and data from the server, the page content is updated. The WebSocket library is installed on the server and a WebSocket server is created in the server code, which listens to the specified port. A real-time communication connection based on WebSocket is established between the server and the client to achieve faster data transmission and real-time interaction. A new message format is defined to support the transmission of more types of DOM element tag information, including size and type, and to add code highlighting. When a user marks a DOM element and edits the code, the server broadcasts the marking operation to other users for real-time update of the code interface of other users. When users edit the same DOM element and code at the same time in a multi-user collaboration scenario, the editing library is used to provide a solution.

[0024] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0025] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0026] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0027] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0028] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0029] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0030] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A method for automatically locating the code position in an editor by clicking a page DOM element, characterized in that: The specific steps include: S101. The client realizes automatic location of the code position in the editor by clicking the page DOM element, uses addEventListener to set the global click event listener, parses the passed location information through the Express framework and processes the listening request; S102. The server initializes a new Node.js project folder in the command line and installs the Express framework, starts the server through the command line and receives the DOM element position information sent by the front end, and uses the child-process module of Node.js to execute system commands; S103. Create a WebSocket connection in the client code to the address specified by the server, install a WebSocket library on the server and create a WebSocket server in the server code, and establish a real-time communication connection based on WebSocket between the server and the client.

2. According to claim 1, a method for automatically locating the code position in the editor by clicking on the DOM element of the page, characterized in that: In S101, the client automatically locates the code position in the editor by clicking on the page DOM element, uses JavaScript to add custom attributes to each DOM element and stores the file path and line number information of the source code through data-* attributes, dynamically generates DOM elements in the page through JavaScript, and uses addEventListener to set a global click event listener to trigger the corresponding event processing function when the user clicks the DOM element, wherein console.log is used to add the logic of single-click events, double-click events, and keyboard and mouse events, and the position information attribute value of the clicked DOM element is obtained in the event processing function, and the specific element clicked, including the tag name, class name and ID, is obtained through event.target, and a function is created and the position information is sent to the back-end service using AJAX.

3. The method of automatically locating the code position in the editor by clicking on the DOM element of the page according to claim 2, characterized in that: During the process of dynamically generating DOM elements in a page through JavaScript, the file path and line number information of the source code are assigned to the location information of the newly created element. In the CSS style sheet, the DOM element with a specific custom attribute value is selected through the attribute selector, and the style is set to highlight and mark the DOM element.

4. The method of automatically locating the code position in the editor by clicking on a page DOM element according to claim 2, characterized in that: After creating the function and using AJAX to send the location information to the backend service, the steps are as follows: use the Express framework to parse the passed location information and process the listening request, match the obtained DOM element information with the event listener, and the backend service receives the location information sent by the frontend by receiving an HTTP POST request, and sends a response to the frontend to inform it of the processing result.

5. The method of automatically locating the code position in the editor by clicking on the DOM element of the page according to claim 1, characterized in that: In S102, the server initializes a new Node.js project folder in the command line and installs the EXpress framework, creates a file named server.js in the Node.js project folder as the entry file of the server code, introduces the EXpress module and sets the route, starts the server through the command line and receives the DOM element position information sent by the front end, constructs a corresponding command based on the received position information and by calling a command API generated in a specific format, which is used to open the specified code editor and locate the corresponding code position, uses the child-process module of Node.js to execute system commands, which is used to start the code editor and pass the code position information, sends a response to the front end, and notifies the front end whether the operation is successful, and attaches the data that needs to be returned to the front end.

6. A method for automatically locating the code position in the editor by clicking on a page DOM element according to claim 5, characterized in that: Introduce body-parser into the Express module and configure it to parse the request body data. After receiving the location information on the server side, perform necessary verification and parsing. Verification is to check the integrity and correctness of the request body data, prepare preliminary data items, fill in missing values ​​with preliminary data, and parse to extract the coordinates from the location information of the DOM element.

7. The method of automatically locating the code position in the editor by clicking on a page DOM element according to claim 1, characterized in that: In S103, a WebSocket connection is created in the client code to connect to the address specified by the server, and the page content is updated after the front end receives the notification and data from the server. The WebSocket library is installed on the server and a WebSocket server is created in the server code, and the specified port is listened to. A real-time communication connection based on WebSocket is established between the server and the client to achieve faster data transmission and real-time interaction, define a new message format to support the transmission of more types of DOM element tag information, including size and type, and add code highlighting. .

8. The method of automatically locating the code position in the editor by clicking on a page DOM element according to claim 7, characterized in that: When a user marks a DOM element and edits code, the server broadcasts the marking operation to other users so that the code interface of other users can be updated in real time. When users edit the same DOM element and code at the same time in a multi-user collaboration scenario, the editing library provides a solution.

Images