Heim > Web-Frontend > js-Tutorial > Wie schreibe ich Code, wenn JS- und jQuery-Dokumente geladen werden?

Wie schreibe ich Code, wenn JS- und jQuery-Dokumente geladen werden?

yulia
Freigeben: 2018-09-13 18:00:05
Original
1208 Leute haben es durchsucht


HTML是有执行顺序的,默认是自上而下执行。所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的时候才去执行js代码,所以通常我们会这样做:

一、当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件

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

(注:在使用时,window.onload可直接简写成onload,但是为了不发生歧义及造成不必要的错误,最好是把window写上)

二、在引入jQuery时,可以有多种写法,这里只列出一种最复杂(其他写法基本都是此种的变形)的,和2种最常见的写法

1、最复杂的一种写法:

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

(1)、在最开始使用分号的目的是为了防止多个文件压缩合并时,因为其他文件最后一行语句没加分号,而引起合并后的语法错误(如果能确保不会有多个文件压缩合并的情况,可以不写这个分号)

(2)、这就是一个匿名函数的自执行,一般js库都采用这种自执行的匿名函数来保护内部变量

(3)、形参中的$是jQuery的简写,很多方法和类库也使用$,这里$接收jQuery对象,也是为了避免$变量冲突,保证多个插件之间可以正常运行(如果只引入了jQuery这一个插件,可以不写这个)

(4)、实参分别接收window,document这两个对象,window,document这两个对象都是全局环境下的,而在函数体内的window,document其实是局部变量,不是指全局的window,或是document对象。这样做有个好处就是可以提高性能,减少作用域的查询时间(如果在函数体内需要多次调用window,或是document对象,这样把window或是document对象作为参数传进去,是非常有必要的。如果代码中没有用到这两个对象,那么就不需要传这两个参数了)

(5)、使用undefined的原因:

①因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined做比较的话,程序就可以不用到window下搜索undefined,可以提高程序的性能
②undefined在有些版本较旧的浏览器是不被支持的,直接使用会报错,js框架就要考虑到兼容性问题,所以增加一个形参undefined

2、比较常用的写法:

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

(注:①在不确定是否只引入jQuery一个js框架的时候,代码中的$可以像复杂写法那样通过参数的形式传递,②代码中的document可省略)

3、最简单的一种写法:

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

(注:细节情况与上种方法相同)

三、总结:文档加载完毕的写法可以有多种,需要按照实际情况和个人习惯使用。

Das obige ist der detaillierte Inhalt vonWie schreibe ich Code, wenn JS- und jQuery-Dokumente geladen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage