ie 引用公共js_js的异步加载

javascript异步加载的三种方案

1、defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。

v2-8312928722bb6cc2a22bc44e847f7485_b.jpg
两种都可以

2、async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script标签里。

(1、 2执行时也不阻塞页面)

3、创建script,插入到DOM中,加载完毕后callback。可以解决不同浏览器的兼容问题。

v2-38fca83bf5ad788ced1f5e771779b819_b.jpg

这样仍然会遇到一个问题,假设我们的test.js里有一个test方法,我们在appendChild之后执行这个test方法,会报错,因为script.src对js文件的预加载可能还没有完成,那么我们怎么处理呢?我们知道,当我们想要给img标签加载图片资源,并在加载完图片资源后进行操作时,会用到onload事件,同样的,script标签加载src资源也可以用同样的方法。(注意,ie不兼容)

v2-78b1db0aaff9933c37d3c90b0ad623a3_b.jpg

ie不兼容此方法,但ie的script标签有个状态码叫readtState,默认为‘loading’,当加载完之后,状态码会变为‘complete’或‘loaded’。并且ie提供了一个onreadystatechange事件来监听状态码的改变。所以我们可以写一个兼容的写法:

v2-273c5bc9b77b6f0d578103d2ff0e7873_b.jpg

当我们写了一个工具库tools.js,想要在页面中引用这个js的部分方法,并且此方法可能只有在特定的情况下才会使用。这时候,如果把此js直接加载到页面中肯定会造成资源的浪费,通过上面的学习,我们可以封装一个方法,令这个js只在我们需要调用它的时候再加载,如果不需要则不加载。

v2-07e639f25049c577df1e32458fee0bab_b.jpg

上面这个方法还可以再优化一下:

1)我们的test()可以写成参数传进来,变成动态的

2)如果我的网速足够快,我们的src瞬间就加载完毕,当代码执行到绑定onreadystatechange事件后,由于src的readyState已经改变,就监听不到此事件的发生了(有点吹毛求疵的感觉,基本上不会发生,不过考虑周到总没错哈哈哈)

所以我们可以先绑定监听事件,再来加载src资源

v2-f32013d08415b2a24266e8580fc7f9f6_b.jpg

但是这样写,也有一个问题,咱们的test在传参时,实参test是一个变量,而我们的代码里并没有声明这个变量,所以会报错,我们可以再优化一下

v2-890a5c63819d6c6f1990bc838e4394b6_b.jpg

我们传一个匿名函数进去,当callback执行时,执行的是此匿名函数,然后匿名函数的函数体里执行的才是test函数。

我们甚至可以更近一步,将tools.js里的方法赋值给对象的属性,我们在学习对象时知道,对象是可以通过[ ‘字符串’ ]方法来调用的,所以我们还可以这么写:

v2-3979d926e00f7078c2c9ccfc987e5d42_b.jpg

好了,今天的学习就到这里了,希望对大家有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值