JavaScript之引入方式

JavaScript的引入方式

JavaScript文件的引入方式与CSS引入方式类似，主要也是分为三种：标签内联、内部写入、外部引入。

标签内联

顾名思义就是在HTML标签的内部书写JS的功能，此方法与CSS的标签内联书写类似，只需要为标签书写相应的JS功能即可，如下：

function show(){

    alert("点击我了~");

}

内部书写

此方法针对JS的书写位置有一定的要求，因为页面的加载是从上往下进行，所以我们需要把JS代码使用script包含起来写在标签结构的下方，保证结构的加载之后，JS能够获取到结构并执行功能，如下：

var btn = document.getElementById("con");

con.onclick = function(){

alert("点击我了~");

}
往往有时候我们会希望JS能够像CSS一样写在页面的头部，但是如上把JS直接放到头部，页面就不会有JS功能，而一定写在头部就必须对JS功能块加上window.onload方法，即可把JS写在头部并让JS能够顺利执行。

外部引入

此方法需要再外部创建一个JS文件，然后书写JS功能，之后通过script标签的src属性来做文件的引入。但是需要注意一点，如果此script标签用于文件的引入，那在script标签之间就不允许存放任何内容（空格也不行）。

JavaScript的不同引入方式的优势与劣势

标签内联

优缺点：用得比较少，代码多，加载慢，不利于维护。

内部书写

优缺点：使用也比较多，加载速度快，一般用于访问量较大的网站或首页，但是整站代码较多，不利于维护。

外部引入

优缺点：使用最广泛，一个JS文件可控制多个页面，从整站来讲，减少代码数量，提高加载速度，便于维护。