《JavaScript精粹(修订版)》——1.7 给页面添加脚本

简介: 解析器本来无需读取注释内容,更不用去执行它。不过现实情况是,被注释的JavaScript完全可以工作,这是一个历史遗留问题,也是一种妥协,不应该假定解析器会正确地略过注释,忽略注释中的JavaScript,实际上,应该假定解析器一定不能正确地读取注释。

本节书摘来自异步社区《JavaScript精粹(修订版)》一书中的第1章,第1.7节,作者:【英】Edwards, J. , 【澳】Adams, C.著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.7 给页面添加脚本

要想让脚本工作,首先需要在页面中将其载入。有两种技术可以做到这一点,而其中一种技术明显优于另一种。

方 法
第一种,也是最直接的方法,是把代码写入script元素中,正像前面看见过的那样:

<script type="text/javascript">
function saySomething(message)
{ 
 alert(message);
}
saySomething('Hello world!');
</script>

这种方法的问题在于,对于老的或者不支持script元素的浏览器,这些内容会被解释为文本。

一种更好的替代方式是将脚本放入外部的一个JavaScript文件,如下:

<script type="text/javascript" src="what-is-javascript.js"></script>
这条语句会载入一个外部的名叫what-is-javascript.js的JavaScript文件。这个文件中将包含前一个例子放入script元素中的代码,如下:

文件:what-is-javascript.js

function saySomething(message)
{ 
 alert(message);
}
saySomething('Hello world!');

采用这种方法,不支持script元素的浏览器会忽略JavaScript部分,也不会显示多余内容(因为该元素的内容实际上是空的),不过那些能够解读script的浏览器会载入并处理该脚本。这有助于脚本和内容的分离,而且很容易维护,可以在不同的页面中使用同一个脚本,而无须复制脚本,也无需维护多个副本。

讨 论
也许您对避免在页面中写入脚本这个建议有异议,“不会有问题的呀”,您可能还会说,“我可以使用HTML注释把代码框起来”。不过我认为那不是一个好主意,使用HTML注释来“隐藏”代码是一种非常坏的习惯,一定要记住这一点。

1.7.1 用HTML注释框住代码
解析器本来无需读取注释内容,更不用去执行它。不过现实情况是,被注释的JavaScript完全可以工作,这是一个历史遗留问题,也是一种妥协,不应该假定解析器会正确地略过注释,忽略注释中的JavaScript,实际上,应该假定解析器一定不能正确地读取注释。

书中的所有例子都通过HTML提供(与之相对的是XHTML),所以这种假设是合理的。不过如果使用XHTML(使用application/xhtml+xml的MIME类型),在浏览器处理该文件之前,XML解析器能够正确地忽略其中的注释,这样,注释的JavaScript代码确实不会执行。不过,考虑到兼容性(以及良好的编程习惯),强烈建议您尽量不在注释中放入代码。JavaScript代码应该总是放到一个外部的JavaScript文件中。

1.7.2 语言属性
语言属性不再是必需的了。当Netscape 4和它同时代的浏览器成为了主流时,< script>标签扮演了一个探测脚本支持的角色(在JavaScript 1.3中指定),并且影响着脚本解释器的工作方式。

当JavaScript变成了ECMAScript时,指定JavaScript的版本已经毫无意义,语言属性已经被类型属性取代。这种属性指定了被包含文件的MIME类型,例如脚本和样式表的类型,而且这也是惟一的一种需要指定的类型:

<script type="text/javascript">
实际上,值应该被指定为text/ecmascript,不过Internet Explorer不认识这种信息。我个人希望它最好能支持,因为我输入javascript几个字比较费劲,有好多次,在输入text/javascript的时候我都输错。

相关文章
|
28天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
2月前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
16 0
springboot从控制器请求至页面时js失效的解决方法
|
2月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
52 1
|
2月前
|
JavaScript 前端开发 Java
liteflow规则引擎 执行Javascript脚本
liteflow规则引擎 执行Javascript脚本
50 1
|
2月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
2月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
16 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
80 0
|
1天前
|
JavaScript UED
js得禁止页面滚动
js得禁止页面滚动
7 1
|
1天前
|
JavaScript 前端开发
js选取页面元素的方法
js选取页面元素的方法
9 2
|
8天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面