JavaScript代码的三种引入方式【操作演示】
在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：
需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。
(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。
嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：
外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：
上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。
为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。
标签的src属性设置了要引入的文件为Example02.js。
创建Example02.js文件，在该文件中编写如下代码：
保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。
以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：
(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。
(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。
(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。
JavaScript代码嵌入HTML的方法、及两者的在执行流程上的细微区别
为了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：
此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。
此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。
此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。
当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。
window.onload和body中onload也有些许区别：
在IE10和FireFox下，结果为 ：
\”DOMContentLoaded\”\”bodyonload\”
说明body中的onload会覆盖window.onload
在chrome下，结果为：
DOMContentLoadedwindow.onloadbodyonload
然后，如果把javascript代码移到最下面，结果又会是什么样呢？
chrome和IE10、FireFox的结果竟然是一样的：
DOMContentLoadedwindow.onload
IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。
onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。
在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。
如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件
5.1 使用原生js方法
动态创建script标签，并指定script的src属性
还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。
5.2 使用document.write/writeln(）方式
该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。
document.writeln(\”<script src=\\\”http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\\\”></script>\”);
需要注意的是特殊字符的转义。
5.3 使用jQuery
使用getScript(url,callback)方法实现动态加载js文件
－End－
Javascript应用-Js在页面中被引入的几种方法
javaScript是一种解释型语言，它的执行是自上而下，但是各个浏览器对于至上而下的理解是有细微差别的，而代码的上下游也就是程序流又对于程序正确至关重要。
首先得了解有几种方法能把javaScript加入到页面中？ 常见下述的前2种，其实还有更多。
1.页面中直接引入外部js文件：<script src=\”my.js\”></script>
2.页面中直接写入 js片段： <script>alert(1)</script>
3.在js中引入js文件（比较少用）： document.write(\”<scr\”+\”ipt src=\’my.js\’></scr\”+\”ipt>\”);
注意:这时候\”..</script>\”必须拆成\”</scr\”+\”ipt>\”,否则浏览器可能会把父js片段关闭掉,出错;
4.同样在js中引用其他js片段，document.write(\”<scr\”+\”ipt>alert(1)</scr\”+\”ipt>\”);
你可能觉得这个并没有必要，既然已经在script中了还套一层干嘛？呵呵，怎么说也是一种写法，而且它具有其特殊的行为，稍后我们讨论到。
5.使用Ajax中的xmlHttpRequest结合eval()来引入js，我最早在Dojo的代码见到，写的详细些：
var ajaxRequest = getXmlHttpRequest()//省去各个浏览器得到xmlHttpRequest的部门
ajaxRequest.open(\”GET\”,\”my.js\”,false);//使用xmlHttpRequest对象Get方法的同步调用
ajaxRequest.send(null);
sJsFragment = ajax.responseText;//得到字符串为js片段
eval(sJsFragment);//执行js片段
注意:这里要求my.js即后来的sJsFragment内容得是非常规范的js，且没有//开头的注释，怎样检查js是否规范呢？去http://jslint.com/
6.无所不能的Dom方法，非常好用：
var oScript = document.createElement(\”script\”);//创建一个Script元素
oScript.src = \”my.js\”;//制定src属性
document.getElementsByTagName(\”head\”)[0].appendChild(oScript);
说明：my.js的内容会在oScript加入到文档中之后获得并执行。仔细看下这段容易发现这个调用是异步的，可以在文档载入之后通过事件触发，我用它变通了一下，作为了xmlHttpRequest的Get方法在跨域取数时的替代，获得了很完美的效果，以后有机会专门写篇文。
六种不少吧，可能还会有吧，而且这几种之间还可能相互嵌套，变化无常。
其中1、2、4、6种方式引入的javaScript的执行顺序是非常自然的，随着页面的载入以及后续的事件触发，它们遵守先来后到、而其内部自上而下。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
