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

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

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

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

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

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

1、最复杂的一种写法：

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

(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代码段
});

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

3、最简单的一种写法：

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

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

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

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