当前位置:Gxlcms > JavaScript > yepnope.js使用详解及示例分享_javascript技巧

yepnope.js使用详解及示例分享_javascript技巧

时间:2021-07-01 10:21:17 帮助过:20人阅读

yepnope.js的一个典型实例:

此实例表示如果Modernizr.geolocation为真的时候加载normal.js,为假则加载polyfill.js及wrapper.js。

yepnope完整语法

为什么使用yepnope

Gzip后只有1.6K比大多数的资源加载器都小
可以加载CSS及JS
yepnope通过了作者能找到的所有的浏览器的测试
yepnope完全分离资源加载和执行,这样你可以控制资源的执行顺序
提供友好的API和促进资源的逻辑组合
模块化设计,你可以自己扩充功能(见稍后的Prefixes及filters)
鼓励按需加载资源
集成在 Modernizr 中
默认总是按照资源列表(你所提供的文件列表顺序)顺序执行
可处理资源回退(fallback),且仍优先并行下载依赖的脚本,看下代码更容易理解:

而其他加载器则可能必须这样处理:

yepnope的不足

并不总是最快的,像labjs等优化后可能加载速度优于yepnope,但需要根据你的实际情况考虑使用哪个加载器
需要给资源设置一定的缓存头(这一点很重要)
并不像RequireJS等类库有自己的生成工具及丰富的API,yepnope仅实现了基本加载器功能
默认总是按照你提供的资源列表顺序执行,这一点有可能会影响速度

yepnope使用实例:

直接传入字符串

传入一个Object对象

回调函数实例(回调函数中url表示加载的资源文件名;result表示test参数的结果;key表示使用 key maping 时候的文件名缩写)

complete函数实例

Key maping实例

当然回调函数你还可以这样写:

yepnope官方提供的3个Prefixes

css! Prefix:可以加载任何后缀的文件作为css文件

preload! Prefix:预加载资源到缓存中,但不执行(下次load时候才执行)

ie! Prefix(es):判断是否IE浏览器(除ie!外,还支持 ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8, 及 ielt9这几种Prefix)

人气教程排行