How to write code when JS and jQuery documents are loaded?

HTML has an execution order, and the default is top-down execution. So when our js code is below the html code, it can be executed normally, but when our js code is above the html code, it cannot be executed normally. At this time, we need to wait until the document is loaded. Execute js code, so we usually do this:

1. When you do not introduce the jQuery framework and only write native JS code, you need to use the onload event of the window object

window.onload = function(){
  //要执行的js代码段  
}

(Note: in When used, window.onload can be directly abbreviated to onload, but in order to avoid ambiguity and unnecessary errors, it is best to write window)

2. When introducing jQuery, there are many ways to write it , here are only one of the most complicated writing methods (other writing methods are basically variations of this type), and the two most common writing methods

1. The most complex writing method:

(function($,window,document,undefined){
    //要执行的js代码段
})(jQuery,window,document);

(1). The purpose of using semicolons at the beginning is to prevent syntax errors after merging due to the lack of a semicolon in the last line of statements in other files when compressing and merging multiple files (if it can be ensured that there will not be multiple In the case of file compression and merging, you don’t need to write this semicolon)

(2). This is the self-execution of an anonymous function. Generally, js libraries use this self-executing anonymous function to protect internal variables

(3). The $ in the formal parameter is the abbreviation of jQuery. Many methods and class libraries also use $. Here $ receives the jQuery object to avoid $ variable conflicts and ensure that multiple plug-ins can run normally ( If you only introduce the jQuery plug-in, you don’t need to write this)

(4) The actual parameters receive the two objects window and document respectively. The two objects window and document are both in the global environment. The window and document in the function body are actually local variables, not the global window or document object. The advantage of doing this is that it can improve performance and reduce scope query time (if you need to call the window or document object multiple times in the function body, it is very necessary to pass the window or document object as a parameter. If these two objects are not used in the code, then there is no need to pass these two parameters)

(5) Reasons for using undefined:

① Because undefined is a property of window , after declaring it as a local variable, if there is another variable in the function that is compared with undefined, the program does not need to search for undefined in the window, which can improve the performance of the program.
② undefined is not used in some older browsers It is supported. If you use it directly, an error will be reported. The js framework must consider compatibility issues, so add a formal parameter undefined

2. The more commonly used writing method:

$(document).ready(function(){
    //要执行的js代码段
});

(Note: ① When determining whether to introduce only jQuery as a js framework, the $ in the code can be passed in the form of parameters like complex writing. ② The document in the code can be omitted)

3. The simplest writing method:

$(function(){
    //要执行的js代码段
});

(Note: The details are the same as the above method)

3. Summary: There are many ways to write the document after loading, and it needs to be used according to the actual situation and personal habits.

The above is the detailed content of How to write code when JS and jQuery documents are loaded?. For more information, please follow other related articles on the PHP Chinese website!