第二章：在HTML中使用javascript（学习笔记）
2017-06-04 本文已影响23人
日暮途远_
<script>元素
在HTML中使用javascript脚本的方法主要是通过HTML的<script>元素。script元素有几个属性值得说下：
- async
异步脚本。会立即下载脚本，但是不会阻塞HTML加载，会在遇到</html>元素的时候才会执行脚本中的内容。如果有多个脚本都使用async属性的话，不保证脚本的执行顺序 - defer
延迟脚本。这个属性和async很类似。HTML5规定，如果有多个脚本都使用defer属性，会按照顺序执行脚本的内容。但是在工作中，各个浏览器对此支持也各不一样。 - type
标识脚本语言的内容类型。模板引擎都是通过type来指明的。
例如handlebars:
<script id="partner-template" type="text/x-handlebars-template">
{{#each list}}
<a href="{{href}}" target="_blank" >
</a>
{{/each}}
</script>
<script>标签的位置
做法1：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
// 外部脚本
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
// 嵌入脚本
<script>
new Vue({
el: '#app',
data: function () {
return {
msg: 'hello, world'
}
}
})
</script>
</body>
</html>
问题：这种做法必须等到javascript脚本下载，解析和执行完之后才会渲染页面中的内容，所以会导致白屏的问题。
做法2（推荐）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
// 外部脚本
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
// 嵌入脚本
<script>
new Vue({
el: '#app',
data: function () {
return {
msg: 'hello, world'
}
}
})
</script>
</body>
</html>
这种不会存在白屏的问题，也是目前工作中普遍的做法。
外部脚本与嵌入脚本
javascript脚本有两种引入方式。如上，一种是通过src引入外部脚本（可以和img一样，跨域加载）。一种就是嵌入HTML中的方式。
和嵌入HTML中这种引入方式相比，通过src引入外部脚本有如下几个优势：
- 可维护性
将所有js脚本放入统一的一个文件夹，维护起来很方便。 - 可缓存
浏览器可以通过具体的设置缓存链接的所有外部javascript文件。例如通过CDN缓存JS文件达到加速的目的。
文档模式
IE引入了文档模式的概念，通过文档类型（doctype）切换实现。包括混杂模式，标准模式，准标准模式。这个稍微了解下就可以，现代浏览器中基本都是HTML5的文档模式，如下：
<!--html5 模式-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>hello, world</p>
</body>
</html>
引用
javascript 高级程序设计第三版
