javascript动态引入依赖的js及css文件(不支持IE)

 我们在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,可进一步联系。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值