将JavaScript外置以提高代码复用

在网页中经常需要用到各类JavaScript，以实现某种特定的功能。在特定条件下，JavaScript能够以更简单、方便的方式完成标准的html所无力完成或需要十分繁琐的代码才能达到的功能与效果。以基于WordPress的博客网站为例，许多WordPress插件便在其中使用JavaScript。

常见的一个问题便是，许多朋友在启用这类含JavaScript的插件后，只要看到其运行正常，便一切OK，导致网页html中充斥大段大段的javaScript代码，应该说，这是个很不好的习惯，也会带来很多问题。

理想的解决办法应是将这些JavaScript代码外置到单独的文件，然后在html中调用这些外置的JavaScript文件。

将JavaScript代码外置到单独文件的好处

• 提高代码的复用率：如果相同的JavaScript代码存在于多个网页中，特别对WordPress插件而言往往将代码置于header模板而使得相同的JavaScript代码存在于所有网页中，用户浏览每个页面时都需要重新下载相应的内容，而将JavaScript置于单独的文件则可有效地提高代码的复用率，用户浏览多个网页时，相同的代码只需要下载一次，无疑会在极大程度上减轻对服务器带宽及Web Server的压力。
• SEO方面的优势：将JavaScrpt外置于单独的文件可以让html代码更简洁，体积更小，这不仅可以降低搜索引擎的spider对服务器的访问压力，也可以在很大程度上保证其能够正确读取信息，不致误读，同时，也避免在SERP(搜索结果页面)可能出现的对页面描述的错误展示，这对SEO而言是相当重要的。

如何将JavaScript外置到单独的文件

1. 查看页面的html，找到相应的JavaScript代码，将
<script>     </script>之间的内容拷贝到文本编辑器中；
2. 将其保存，比如说命名为“external.js”；
3. 将external.js上传到服务器，比如说上传到网站根目录下的“directory”下；
4. 在html中的相应位置调用该js文件，比如说在部分调用：
   

   <script type="text/javascript" src="/directory/external.js"></script>

就这么简单。当然，如果存在多段JavaScript代码而又无法将其合并为一个文件的话，也可以创建多个外置的JavaScript文件。