原生JS与jQuery文档加载完毕的写法

HTML是有执行顺序的，默认是自上而下执行。因此当咱们的js代码在html代码下边的时候，能够正常执行，而当咱们的js代码在html代码上边的时候，能够就没法正常执行了，这时，咱们须要在文档加载完毕的时候才去执行js代码，因此一般咱们会这样作：

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

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

（注：在使用时，window.onload可直接简写成onload，可是为了避免发生歧义及形成没必要要的错误，最好是把window写上）

2、在引入jQuery时，能够有多种写法，这里只列出一种最复杂（其余写法基本都是此种的变形）的，和2种最多见的写法

一、最复杂的一种写法：

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

(1)、在最开始使用分号的目的是为了防止多个文件压缩合并时，由于其余文件最后一行语句没加分号，而引发合并后的语法错误（若是能确保不会有多个文件压缩合并的状况，能够不写这个分号）

(2)、(function(){})();：这就是一个匿名函数的自执行，通常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

二、比较经常使用的写法：

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

（注：①在不肯定是否只引入jQuery一个js框架的时候，代码中的$能够像复杂写法那样经过参数的形式传递，②代码中的document可省略）

三、最简单的一种写法：

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

（注：细节状况与上种方法相同）

3、总结：文档加载完毕的写法能够有多种，须要按照实际状况和我的习惯使用。

（注：文章内容部分来源于网络，若有侵权，请与博主联系）