外部引用JavaScript

外部引用就是引用HTML文件外部的JavaScript文件,这种方式可以使代码更清晰,更容易扩展。

可以通过HTML的script标签加载JavaScript文件。

把JavaScript文件放在head中

标准方法是把JavaScript文件放到head标签内。

<head>
 <script type="text/javascript" src="dreamdu.js"></script>
</head>

  • 如果浏览器不支持JavaScript,将忽略script标签里面的内容,可以避免使用<!-- ... //-->(内部引用)。
  • 当JavaScript有任何HTML实体时,也不需要使用CDATA标签了(因为JavaScript代码不直接在HTML文件中)。
  • JavaScript文件必须使用js为文件后缀。
  • HTML实体的表现方式,是以位与运算符&开头,以分号运算符;结尾.

    下面是经常用到的,最重要的实体,而且是在HTML标签或属性中使用的.

    • &quot; -- 表示双引号(")
    • &amp; -- 表示位与运算符(&)
    • &lt; -- 表示小于运算符(<)
    • &gt; -- 表示大于运算符(>)
    • &nbsp; -- 表示空格( )

把JavaScript文件放在body前

为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部,例如下面的代码。

<script type="text/javascript" src="dreamdu.js"></script></body></html> 

JavaScript文件的内容

JavaScript文件可以包含任何的JavaScript代码,比如dreamdu.js文件中

document.write("www.dreamdu.com");
document.write("梦之都");

JavaScript文件外部加载的好处

  • 避免使用<!-- ... //-->,骇客技术。
  • 避免使用CDATA。
  • 统一定义JavaScript代码,方便查看,方便维护。
  • 使代码更安全,可以压缩,加密单个JavaScript文件。
  • 浏览器可以缓存JavaScript文件,减少宽带使用(当多个页面同时使用一个JavaScript文件的时候,通常只需下载一次)。

JavaScript文件外部加载的注意事项

  • 不要把JavaScript分为多个文件,多个文件会增加服务器的负担,增加服务器的HTTP请求。
  • <script type='text/javascript' src='外部JS文件地址' />引用外部JS文件是会出现问题的,所以一定要写成<script type='text/javascript' src='外部js文件地址'></script> ,script元素不允许通过前一种方式结束,如果采用前种方式,而恰好这个引用声明后面又跟了一段内部script段,那么前面这个引用声明会去找</script>,结果导致后面内部script内内容失效。类似的情况好有几个好像,印象最深的是iframe 也不允许使用"<iframe …… />的方式,否则后面的元素都会被当成是iframe的innerhtml,后显示不出来
  • 一个JavaScript文件也会增大HTTP请求。
  • 为什么有些网站的JavaScript文件后面有一串数字?比如:

            <script type="text/javascript" src="dreamdu.js?1217128319"></script>

有两种可能:

  • JavaScript文件更新后,此版本将增加或改变,浏览器会因此判断这是一个新的JavaScript文件,从而更新缓存中以前的JavaScript文件。
  • 这个JavaScript文件是由应用程序生成的因此带有版本好以示区别。

疑问:

引用外部JS文件总是不成功,但我直接把JS代码放页面中可以成功,不知道为什么?

该不会在JS文件里加了 <script> </script>标记吧; 如果有,删除;

两个js文件的编码和页面编码不一致。而里面估计有中文,要么把中文删掉,要么用IDE改下编码,统一一下.

 

HTML实体的表现方式,是以位与运算符&开头,以分号运算符;结尾.

下面是经常用到的,最重要的实体,而且是在HTML标签或属性中使用的.

  • &quot; -- 表示双引号(")
  • &amp; -- 表示位与运算符(&)
  • &lt; -- 表示小于运算符(<)
  • &gt; -- 表示大于运算符(>)
  • &nbsp; -- 表示空格( )

 

 

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值