ajax加载include,JS实现完美include加载功能代码

css文件的动态加载应用具有多种效果，css文件的动态加载的知识不计其数，但是总的方法还是动态加载css文件，下面是爱站技术频道小编带给大家的实现完美include.html" target="_blank">include加载功能代码，一起来了解一下吧！

已有js include的一些问题

在写这个之前在网上搜索了些资料，发现以前写的include都存在2个问题，这也是include需要解决的比较重要的2个问题。

1、相对路径的问题： 在a.js中使用include("../js/common.js"); include 函数中肯定是使用相对路径，是相对a.js的路径。而a.js在html中使用嵌入有可能是相对路径，有可能是绝对路径。 include函数如何才能真正确定common.js的绝对路径，或者是相对html的相对路径。网上一些为了解决这个问题，还需要加一些js变量，不方便。

2、引用的问题。 网上include函数的实现几乎都是使用下面2种方式插入common.js

document.write("

}

在a.js中直接使用 include("../js/common.js");

多请求的问题

使用上面的include看上去挺爽的，不过却带来另外1个严重的问题，就是多发送了1个ajax的请求。

我们常常为了WEB性能，而合并js，减少请求。但使用include后却偏偏多了请求。如果这个问题不解决，相信很多人都不会在正式产品中使用include的了，除非是局域网产品。

如何解决这个多请求的问题，我也思考很久，最后觉的单单使用客户端js是没办法解决了。所以就想到了使用服务端代码来解决

还记的我之前有文章介绍 "js、css的合并、压缩、缓存管理"的时候，就通过服务器端代码在程序启动时候去合并js。

所以我把include多请求的解决方案也加到里面去。就是在程序启动的时候去查找所有的js，发现有使用include的就把include中common.js的源代码替换该include函数。这样a.js中在运行的时候就没有include函数，而是真真包含了common.js的内容的js文件

后语

丫的。说到最后，怎么又把所有的include都替换掉了，哪之前说的那么多不白说了。

个人觉得，每个产品都应该要区分开发环境和产品环境(一般通过配置文件进行区分)，在开发环境应该以开发效率为首要，而产品环境则以性能为首。所以这里的inlcude就应该要区分对待，在开发环境中使用js include来提高开发和维护效率，而在产品环境中则自动把所有include替换成真真的js文件的内容。

通过上述介绍，大家对JS实现完美include加载功能代码有了一定的了解吧，如果大家有需要，爱站技术频道拥有专业的知识，可以帮您。