我们在JavaScript开发中,习惯将一些常用功能封装在js文件中,具体实现时,这些功能难免需要调用其他js文件中封装的功能,甚至需要引入预定义的css文件。
将不同类型的功能封装于js文件,无疑是一种好的做法。但具体使用时,一个js若需要其他js的支持,则必须在使用前(按顺序)引入其依赖的所有js,使得开发过程变得复杂。
虽然各种主流浏览器已支持动态引用(import),但其要求在严格模式下执行,使得引用的局限性很大,难以兼容已开发测试好的很多功能。
本文旨在制作一个功能,让我们在开发js时,使其能按自身的相对路径引入所需的依赖项(其他js及css)。使得在后期开发中,只需引入所需功能所在的js,而无需考虑其依赖的内容。
资源链接:CSDN下载: javascript动态引入依赖的js及css文件
使用示例:
link('xxx');//同link('xxx.css'),加载当前js文件或页面所在目录下的xxx.css
includes('js/a,b', function(){...});//同includes('js/a.js,b.js',...),加载当前js文件或页面所在目录下的js/a.js、b.js
includes(['js/a', 'b'], ...);//同上,其中function(){...}为加载完成时的回调函数,可省略。
定义您js文件时,可以这样:
includes('...',function(){ //...为要引用的其他js文件
... //js内容
}
与在页面中使用<script>标签同步加载js的区别是:使用被包含文件中定义的内容,应在回调函数中或在页面加载完成后使用。
结语:使用此工具后,开发js时,独立管理了所需的依赖项。后期开发中使用这样的js,再也无需考虑其依赖的内容。若需支持IE,可进一步联系。